:root{--bg:#07122b;--panel:#0f1632;--accent:#7c4dff;--muted:#b9c2e6}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Segoe UI, Roboto, system-ui, Arial;color:#fff;background:linear-gradient(180deg,#07122b,#041025)}
.head{padding:20px;border-bottom:1px solid rgba(255,255,255,.08);background:linear-gradient(90deg,#0f1632,#151d46)}
.brand{display:flex;gap:12px;align-items:center;max-width:1100px;margin:0 auto}
.brand img{width:56px;height:56px;border-radius:12px}
.muted{color:var(--muted)}
.wrap{max-width:1100px;margin:30px auto;padding:0 18px;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.tile{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01));border:1px solid rgba(255,255,255,.06);border-radius:14px;text-decoration:none;color:#fff}
.tile .tile-inner{padding:18px}
.tile h2{margin:4px 0 6px 0}
.tile p{color:var(--muted)}
.tile:hover{outline:2px solid rgba(124,77,255,.35)}
.tile.alt{background:linear-gradient(180deg,rgba(124,77,255,.08),rgba(124,77,255,.02))}
.foot{max-width:1100px;margin:20px auto;color:var(--muted);padding:10px 18px}