:root{--bg:#0f1724;--card:#0b1220;--accent:#06b6d4;--text:#e6eef8}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,Segoe UI,Arial;background:linear-gradient(180deg,var(--bg),#071024);color:var(--text);min-height:100vh;display:flex;align-items:center;justify-content:center}
.container{width:min(720px,92%);padding:28px;background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);border-radius:12px;box-shadow:0 8px 30px rgba(2,6,23,0.6)}
header{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.logo{width:56px;height:56px;border-radius:10px;background:linear-gradient(135deg,var(--accent),#7c3aed);display:flex;align-items:center;justify-content:center;font-weight:700}
h1{font-size:20px;margin:0}
p.lead{margin:6px 0 18px;color:rgba(230,238,248,0.8)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
a.card{display:flex;align-items:center;gap:12px;padding:12px;border-radius:10px;background:linear-gradient(180deg,rgba(255,255,255,0.01),transparent);text-decoration:none;color:var(--text);border:1px solid rgba(255,255,255,0.03);transition:transform .12s ease,box-shadow .12s ease}
a.card:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(2,6,23,0.6)}
.icon{width:44px;height:44px;border-radius:8px;background:#071226;display:flex;align-items:center;justify-content:center;font-size:20px}
.meta{display:flex;flex-direction:column}
.meta .title{font-weight:600}
.meta .sub{font-size:13px;color:rgba(230,238,248,0.7)}
footer{margin-top:16px;font-size:13px;color:rgba(230,238,248,0.65);display:flex;justify-content:space-between;align-items:center}
@media (max-width:420px){.logo{width:44px;height:44px}}