:root { --bg:#0b0f1a; --fg:#e6e9f2; --muted:#9aa3b2; --card:#121a2b; --line:#1f2a42; --btn:#1b2b52; }
* { box-sizing:border-box; }
body { margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial; background:var(--bg); color:var(--fg); }
a { color:inherit; text-decoration:none; }
.hidden { display:none !important; }

.topbar {
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; border-bottom:1px solid var(--line);
  background:rgba(11,15,26,0.9); backdrop-filter: blur(6px);
}
.left { display:flex; gap:12px; align-items:center; min-width:220px; }
.logo { width:40px; height:40px; border-radius:12px; background:#0f1b36; display:grid; place-items:center; font-weight:700; }
.brand .name { font-weight:700; line-height:1.1; }
.brand .tag { font-size:12px; color:var(--muted); }

.nav { display:flex; gap:14px; align-items:center; justify-content:center; flex:1; }
.nav a { padding:8px 10px; border-radius:10px; color:var(--muted); }
.nav a.active { background:var(--card); color:var(--fg); border:1px solid var(--line); }

.right { display:flex; gap:10px; align-items:center; min-width:220px; justify-content:flex-end; }
.btn { background:var(--btn); color:var(--fg); border:1px solid var(--line); border-radius:12px; padding:8px 12px; cursor:pointer; }
.btn-ghost { background:transparent; }

.account { display:flex; align-items:center; gap:8px; }
.status-dot { width:10px; height:10px; background:#22c55e; border-radius:50%; display:inline-block; }
.account-label { color:var(--fg); font-weight:600; }

.dropdown { position:absolute; right:16px; top:58px; background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden; min-width:180px; }
.dropdown a, .dropdown-btn { display:block; padding:10px 12px; color:var(--fg); background:transparent; border:0; width:100%; text-align:left; cursor:pointer; }
.dropdown a:hover, .dropdown-btn:hover { background:#0f1730; }

.main { padding:18px 16px; max-width:1100px; margin:0 auto; }
.card { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:16px; }
.h1 { font-size:28px; margin:0 0 8px; }
.p { color:var(--muted); margin:0 0 14px; line-height:1.5; }

.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; }
.item { border:1px solid var(--line); border-radius:14px; padding:12px; background:#0f1730; }
.badge { display:inline-block; padding:4px 8px; border-radius:999px; border:1px solid var(--line); color:var(--muted); font-size:12px; }

.footer { padding:14px 16px; border-top:1px solid var(--line); text-align:center; }
.muted { color:var(--muted); font-size:12px; }