:root{
  --bg:#0b121a;
  --panel:#0f1b27;
  --panel-2:#0e1821;
  --text:#d8e6ff;
  --muted:#9fb3c8;
  --brand:#bcd7ff;
  --accent:#4da3ff;
  --chip:#0e2436;
  --chip-border:#1c344b;
  --green:#1fb866;
  --ring:#1f5b86;
  --shadow:0 8px 24px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial,sans-serif}
a{color:var(--brand);text-decoration:none}
a:hover{color:#fff;text-decoration:underline}

.container{max-width:1200px;margin:0 auto;padding:28px 20px}
/* Topbar */
.topbar{position:sticky;top:0;z-index:50;background:rgba(11,18,26,.85);backdrop-filter:saturate(1.1) blur(8px);border-bottom:1px solid #0f2638}
.topbar-inner{display:flex;align-items:center;gap:12px;min-height:56px;padding:10px 16px}
.burger{width:40px;height:40px;border-radius:12px;background:#0e2436;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--chip-border);cursor:pointer;box-shadow:var(--shadow)}
.burger span, .burger span:before, .burger span:after{content:"";display:block;width:18px;height:2px;background:#cde3ff;border-radius:2px;position:relative}
.burger span:before{position:absolute;top:-6px}
.burger span:after{position:absolute;top:6px}

.brand{font-weight:700;letter-spacing:.2px}
.brand .full{display:inline}
.brand .short{display:none}
@media (max-width:900px){
  .brand .full{display:none}
  .brand .short{display:inline}
}
.nav{margin-left:auto;display:flex;gap:18px}
.nav a{padding:8px 12px;border-radius:10px;border:1px solid transparent}
.nav a.active{background:var(--chip);border-color:var(--chip-border);color:#fff}
.nav a:hover{background:#0f2638;border-color:#1a3b57}

.content{padding:20px}

/* Drawer */
.drawer-overlay{position:fixed;inset:0;background:rgba(2,8,14,.6);opacity:0;pointer-events:none;transition:.25s ease;z-index:60}
.drawer{position:fixed;top:0;left:0;height:100dvh;width:min(420px,92vw);background:var(--panel);transform:translateX(-105%);transition:transform .25s ease;z-index:61;border-right:1px solid #12324a;box-shadow:var(--shadow);display:flex;flex-direction:column}
.drawer.open{transform:none}
.drawer-overlay.show{opacity:1;pointer-events:auto}
.drawer-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid #12324a}
.drawer-title{font-weight:700}
.drawer-body{padding:14px 12px;overflow:auto}

.cat-grid{display:grid;grid-template-columns:1fr;gap:10px}
@media (min-width:520px){.cat-grid{grid-template-columns:1fr 1fr}}
.cat{display:flex;align-items:center;gap:10px;background:var(--panel-2);border:1px solid #113047;padding:12px 12px;border-radius:14px}
.cat:hover{border-color:#1b4764;background:#0f2032}
.cat img{width:22px;height:22px;border-radius:6px;background:#0e2436;border:1px solid #203f56;flex:0 0 22px}
.cat .label{display:flex;flex-direction:column;gap:2px;line-height:1.1}
.cat .name{color:#e9f2ff;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cat .count{color:#8fb0cb;font-size:12px}

/* Demo block & banners */
.demo{background:var(--panel-2);border:1px solid #12324a;border-radius:16px;padding:14px 16px;color:var(--muted)}
.banner{margin:18px auto;max-width:820px;background:#0d2234;border:1px dashed #2c5676;border-radius:14px;color:#78a5c8;text-align:center;padding:16px}
.footer{padding:24px 16px 40px;border-top:1px solid #102434;text-align:center;color:#9fb3c8}
.legal a{color:#9cc0e6}


/* PATCH: make brand clickable and visually identical */
.brand-link { color: inherit; text-decoration: none; display:inline-flex; gap:.375rem; align-items:center; }
.brand-link .full, .brand-link .short { color: inherit; }
.nav a.active { /* neutralize any leftover active styles if another file adds it */
  background: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
  border-color: transparent !important;
}