/* =========================================
   Base: palette, primitives, utilities
========================================= */
* { box-sizing: border-box; }

:root{
  --bg:#0b0f14;
  --text:#e7edf3;
  --muted:#9fb3c8;
  --border:#1d2836;
  --card:#0f1622;
  --maxw:1100px;

  /* Purple × Blue theme tokens */
  --violet:#8b5cf6;       /* violet-500 */
  --violet-600:#7c3aed;
  --blue:#60a5fa;         /* blue-400  */
  --blue-600:#2563eb;
  --violetA:rgba(139,92,246,.28);
  --blueA:rgba(96,165,250,.28);
  --violetA2:rgba(139,92,246,.18);
  --blueA2:rgba(96,165,250,.18);
}

html, body { min-height:100%; }

body{
  margin:0;
  color:var(--text);
  background:var(--bg);
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,"Noto Sans",sans-serif;
}

a{ color:#8ecbff; text-decoration:none; }
a:hover{ text-decoration:underline; }

.container{ max-width:var(--maxw); margin:24px auto; padding:0 16px; }

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:10px;
  padding:16px;
  margin-bottom:16px;
}

.sectionTitle{ font-size:1.1rem; font-weight:700; margin-bottom:8px; }
.small{ font-size:12px; color:var(--muted); }
.muted{ color:var(--muted); }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:10px 14px; border-radius:10px;
  background:linear-gradient(135deg,var(--violet-600),var(--blue-600));
  border:1px solid rgba(139,92,246,.55);
  color:#fff; font-weight:700; cursor:pointer;
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 8px 18px rgba(99,102,241,.22); }
.btn:disabled{ opacity:.6; cursor:not-allowed; }
.btn.ghost{
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));
  border:1px solid rgba(139,92,246,.25); color:#e8ecff;
}
.btn.ghost:hover{ background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02)); }
.btn.danger,.btn.destructive{ background:#3a1214; border:1px solid #5c2225; color:#ffdada; }
.btn.danger:hover,.btn.destructive:hover{ background:#4a1518; }

.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:3px 8px; border-radius:999px; font-size:11px;
  background:linear-gradient(180deg,rgba(139,92,246,.10),rgba(96,165,250,.08));
  border:1px solid rgba(139,92,246,.35);
}
.badge.soft{ background:rgba(139,92,246,.14); }

code{
  background:#0e1520; padding:2px 6px; border-radius:6px; border:1px solid var(--border);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}

/* Tables (optional) */
table{ width:100%; border-collapse:collapse; }
th,td{ text-align:left; padding:10px; border-bottom:1px solid var(--border); }
thead th{ background:#0c1320; position:sticky; top:52px; }

/* Token line */
.token-line{ display:flex; gap:10px; align-items:center; justify-content:space-between; margin-top:8px; flex-wrap:wrap; }
.token-code{
  display:block; flex:1 1 560px; min-width:260px; padding:10px 12px; border-radius:10px;
  background:#111418; border:1px solid #23252b; color:#e7e7e9;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace; font-size:.95rem;
}
.token-actions{ display:flex; gap:8px; align-items:center; }
.token-meta-row{ margin-top:8px; color:var(--muted); display:flex; gap:8px; flex-wrap:wrap; }

/* Keyboard focus ring */
:where(a,button,[role="button"],summary,input,.chip-action):focus-visible{
  outline:none;
  box-shadow:0 0 0 2px rgba(139,92,246,.60), 0 0 0 6px rgba(96,165,250,.35);
  border-color:rgba(139,92,246,.60)!important;
}

/* =========================================
   Header (glass, sticky, JS-free)
========================================= */
.site-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:blur(8px);
  background:color-mix(in hsl, transparent 80%, #0b0b0b 20%);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.nav-inner{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:auto 1fr auto auto;
  gap:10px; align-items:center; padding:10px 14px;
}

/* Brand */
.brand{ display:flex; align-items:center; gap:8px; text-decoration:none; color:inherit; font-weight:800; letter-spacing:.2px; }
.brand-glyph{
  width:32px; height:32px; display:grid; place-items:center; border-radius:10px;
  background:linear-gradient(135deg,var(--violetA),var(--blueA));
  border:1px solid rgba(255,255,255,.10);
}
.brand-name{ font-size:16px; }

/* Links */
.nav-links{ display:flex; gap:10px; align-items:center; }
.nav-link{
  padding:8px 10px; border-radius:10px; text-decoration:none; color:inherit; border:1px solid transparent;
}
.nav-link:hover{
  background:linear-gradient(135deg,rgba(139,92,246,.12),rgba(96,165,250,.12));
  border-color:rgba(139,92,246,.22);
}
.nav-link.active{
  background:linear-gradient(135deg,rgba(139,92,246,.18),rgba(96,165,250,.18));
  border-color:rgba(139,92,246,.35);
}

/* User dropdown */
.nav-user{ display:flex; align-items:center; justify-content:flex-end; }
.user-menu{ position:relative; }
.user-menu > summary{
  list-style:none; display:flex; align-items:center; gap:8px; cursor:pointer;
  padding:6px 8px; border-radius:10px;
  border:1px solid rgba(139,92,246,.22);
  background:linear-gradient(135deg,rgba(139,92,246,.08),rgba(96,165,250,.06));
}
.user-menu > summary::-webkit-details-marker{ display:none; }
.user-menu[open] > summary{
  background:linear-gradient(135deg,rgba(139,92,246,.14),rgba(96,165,250,.12));
}
.u-av{
  width:26px; height:26px; border-radius:999px; object-fit:cover;
  border:1px solid rgba(255,255,255,.08);
}
.u-avatar-fallback{
  width:26px; height:26px; display:grid; place-items:center; border-radius:999px;
  border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.05);
  font-size:12px; font-weight:700;
}
.u-name{ max-width:16ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; opacity:.95; }
.chev{ opacity:.7; }

.user-menu .menu{
  position:absolute; right:0; margin-top:8px; min-width:180px;
  background:#121212; border:1px solid rgba(255,255,255,.08); border-radius:12px;
  box-shadow:0 18px 30px rgba(0,0,0,.35); padding:6px;
}
.menu-item{ display:block; padding:8px 10px; border-radius:8px; text-decoration:none; color:inherit; font-size:14px; }
.menu-item:hover{ background:rgba(255,255,255,.08); }
.menu-item.danger{ color:#ff9ea0; }

/* Mobile menu (no JS) */
.nav-mobile{ display:none; margin-left:-6px; }
.nav-mobile > summary{
  list-style:none; cursor:pointer; padding:6px; border-radius:10px;
  border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03);
}
.nav-mobile > summary::-webkit-details-marker{ display:none; }
.nav-mobile[open] > summary{ background:rgba(255,255,255,.08); }
.nav-mobile .sheet{
  position:absolute; left:0; right:0; top:56px;
  background:linear-gradient(180deg,rgba(15,16,22,.96),rgba(15,16,22,.98));
  border-top:1px solid rgba(139,92,246,.25);
  display:flex; flex-direction:column; gap:4px; padding:10px 14px;
  box-shadow:0 14px 24px rgba(0,0,0,.35);
}
.sheet-link{
  display:block; padding:10px 12px; border-radius:10px; text-decoration:none; color:inherit; border:1px solid transparent;
}
.sheet-link:hover{
  background:linear-gradient(135deg,rgba(139,92,246,.12),rgba(96,165,250,.12));
  border-color:rgba(139,92,246,.22);
}
.sheet-link.active{
  background:linear-gradient(135deg,rgba(139,92,246,.18),rgba(96,165,250,.18));
  border-color:rgba(139,92,246,.35);
}
.sheet-user{ display:flex; gap:10px; align-items:center; padding:6px 0; }
.u-col{ display:flex; flex-direction:column; }
.u-login{ opacity:.7; font-size:12px; }

@media (max-width:820px){
  .nav-inner{ grid-template-columns:auto 1fr auto; }
  .nav-links,.nav-user{ display:none; }
  .nav-mobile{ display:block; }
}

/* =========================================
   Hero (dashboard)
========================================= */
.hero-card{
  position:relative; overflow:hidden; display:grid; grid-template-columns:1fr auto; gap:18px;
  padding:18px; border-radius:16px; border:1px solid var(--border);
  background:
    radial-gradient(1200px 400px at 120% -40%, rgba(96,165,250,.08) 0%, transparent 60%),
    radial-gradient(1200px 400px at -20% 130%, rgba(139,92,246,.10) 0%, transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.02));
  box-shadow:0 0 0 1px rgba(255,255,255,.03) inset, 0 8px 18px rgba(0,0,0,.18);
}
.hero-main{ display:flex; gap:14px; align-items:center; min-width:0; }
.avatar-xxl{ width:64px; height:64px; border-radius:50%; object-fit:cover; border:1px solid rgba(255,255,255,.08); }
.hero-info{ min-width:0; }
.hero-title{ font-size:20px; font-weight:800; display:flex; gap:8px; align-items:center; }
.badge.soft{ opacity:.85; }
.hero-stats{ display:flex; gap:10px; flex-wrap:wrap; align-items:stretch; justify-content:flex-end; }
.stat-chip{
  min-width:110px; border:1px solid var(--border); border-radius:12px; padding:10px 12px;
  background:linear-gradient(180deg, rgba(139,92,246,.10), rgba(96,165,250,.06));
}
.stat-label{ font-size:11px; opacity:.7; }
.stat-value{ font-weight:700; }

@media (max-width:720px){
  .hero-card{ grid-template-columns:1fr; }
  .hero-stats{ justify-content:flex-start; }
  .hero-bg{ display:none; }
}

/* =========================================
   Followers Chart
========================================= */
.fs-card { position: relative; display: flex; flex-direction: column; gap: 12px; }
.fs-kpis { display: flex; flex-wrap: wrap; align-items: baseline; gap: 24px; }
.fs-kpi { display: flex; gap: 8px; font-weight: 700; }
.fs-kpi-label { opacity: .9; font-weight: 600; }
.delta.up { color: var(--good, #16a34a); }
.delta.down { color: var(--bad, #dc2626); }
.delta.eq { opacity: .8; }

/* Disabled look: fade whole section and blur content slightly */
.fs-card.is-disabled .fs-kpis,
.fs-card.is-disabled canvas { filter: blur(1px);}
.fs-card.is-disabled { height: 250px;}
.fs-card.is-disabled .fs-kpis, .fs-card.is-disabled canvas#fsChart {display: none;}

/* Overlay centered message */
.fs-overlay {
  position: absolute; inset: 0; display: none; z-index: 2;
  align-items: center; justify-content: center; text-align: center;
  pointer-events: none; /* no interactions since there's no button */
}
.fs-card.is-disabled .fs-overlay { display: flex; }

.fs-overlay-center {
  max-width: 560px;
  padding: 16px 20px;
  border-radius: 12px;
  background: rgba(17,17,17,.55); /* subtle plate over the faded card */
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

.fs-overlay-title { font-weight: 800; margin-bottom: 6px; }
.fs-overlay-desc  { opacity: .9; margin-bottom: 10px; }
.fs-scope-chips code {
  display: inline-block; margin: 4px 6px; padding: 6px 10px; border-radius: 8px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
  font-weight: 600;
}
/* Chart height */
.fs-chart { height: 340px; }
@media (min-width: 1200px){ .fs-chart { height: 380px; } }

/* Table under chart */
.fs-table { margin-top: 10px; overflow-x:auto; }
.fs-table table { width:100%; border-collapse:collapse; font-size:.9rem; }
.fs-table thead th { text-align:left; opacity:.85; font-weight:700; border-bottom:1px solid rgba(255,255,255,.08); padding:8px; }
.fs-table tbody td { padding:8px; border-top:1px solid rgba(255,255,255,.06); }
.fs-table td.num { text-align:right; font-variant-numeric: tabular-nums; }


/* =========================================
   Permissions (simple)
========================================= */
.perms-card .perm-groups{ display:flex; flex-direction:column; gap:16px; margin-top:10px; }
.scope-group{
  border:1px solid rgba(139,92,246,.25);
  border-radius:12px; padding:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
}
.scope-title{ margin:0 0 8px; font-size:13px; opacity:.9; }
.perm-list{ display:flex; flex-wrap:wrap; gap:8px; }
.scope-check{ display:none; }
.perm-badge{
  border:1px solid rgba(139,92,246,.45)!important; color:#dbe5ff!important;
  background:linear-gradient(180deg, rgba(139,92,246,.10), rgba(96,165,250,.06))!important;
  border-radius:999px; padding:6px 10px; user-select:none; cursor:pointer;
}
.scope-check:checked + .perm-badge{
  border-color:var(--violet)!important; color:#fff!important;
  background:linear-gradient(135deg,var(--violet),var(--blue))!important;
}
.perms-actions{ margin-top:12px; display:flex; gap:10px; align-items:center; }

/* =========================================
   Tools (modern)
========================================= */
.tools-panel{
  padding:16px 16px 18px;
  background:linear-gradient(180deg, rgba(139,92,246,.06), rgba(96,165,250,.03));
  border-radius:16px;
}
.tools-header{ display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:10px; }
.tools-title{ display:flex; gap:10px; align-items:center; font-weight:700; }
.tools-title span{ font-size:18px; }
.tools-subtitle{ font-size:12px; opacity:.7; }

.tool-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(350px,1fr)); gap:16px; }

.tool-card{
  border-radius:14px; border:1px solid rgba(139,92,246,.25);
  background:linear-gradient(180deg, rgba(255,255,255,.015), rgba(0,0,0,.02));
  box-shadow:0 0 0 1px rgba(255,255,255,.03) inset, 0 10px 20px rgba(30,27,75,.35);
  padding:14px; transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.tool-card:hover{
  transform:translateY(-2px);
  border-color:rgba(139,92,246,.45);
  box-shadow:0 0 0 1px rgba(255,255,255,.05) inset, 0 16px 30px rgba(30,27,75,.45);
}
.tool-card[data-enabled="false"]{ filter:grayscale(.2) saturate(.9); opacity:.6; }

.tool-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.tool-id{ display:flex; gap:10px; align-items:center; min-width:0; }
.tool-glyph{
  width:32px; height:32px; border-radius:10px; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--violetA),var(--blueA));
  border:1px solid rgba(255,255,255,.10);
}
.tool-meta{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.tool-name{ font-weight:600; font-size:15px; }
.tool-desc{ font-size:12px; opacity:.8; text-overflow:ellipsis; }

.badge.method{ text-transform:uppercase; letter-spacing:.6px; }
.badge.method.get{ border-color:#315e38; color:#8be28f; background:rgba(40,120,50,.12); }
.badge.method.post{ border-color:#2b4c80; color:#8ec7ff; background:rgba(46,110,200,.12); }
.badge.method.patch{ border-color:#80692b; color:#ffd78e; background:rgba(200,140,46,.12); }
.badge.method.delete{ border-color:#7d2b2b; color:#ff9ea0; background:rgba(200,46,46,.12); }

.req-label{ font-size:11px; opacity:.7; margin-right:6px; }
.req-badges{ display:flex; flex-wrap:wrap; gap:6px; }
.badge.scope{ border-color:#3a3a3a; background:rgba(255,255,255,.02); }
.tool-reqs{ display:flex; align-items:center; gap:8px; margin:4px 0 10px; flex-wrap:wrap; }

.tool-url{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.url-chip{
  position:relative; display:flex; align-items:center; gap:8px;
  border-radius:10px; border:1px dashed rgba(139,92,246,.35);
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  font-size:12px; padding:8px 10px; max-width:100%;
}
.url-chip .truncate{ max-width:48ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chip-action{
  display:inline-flex; align-items:center; gap:6px;
  border:none; background:transparent; color:inherit; font-size:12px; cursor:pointer;
  padding:4px 6px; border-radius:8px;
}
.chip-action:hover{ background:linear-gradient(180deg, rgba(139,92,246,.14), rgba(96,165,250,.12)); }

/* Scope the Tools “warn” pill so it doesn’t clash with Admin warn */
.tools-panel .badge.warn{
  border-color:#7d2b2b; color:#ff9ea0; background:rgba(200,46,46,.12);
}

.tool-missing{ display:flex; flex-direction:column; gap:6px; font-size:12px; }
.missing-list{ opacity:.9; }
.hint{ opacity:.7; }

@media (max-width:520px){
  .url-chip .truncate{ max-width:30ch; }
}

/* =========================================
   Admin (modern)
========================================= */
.admin-kpis{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin-bottom:14px;
}
.kpi{
  display:flex; gap:10px; align-items:center;
  border:1px solid rgba(139,92,246,.25); border-radius:14px; padding:12px;
  background:linear-gradient(180deg, rgba(139,92,246,.08), rgba(96,165,250,.06));
  box-shadow:0 0 0 1px rgba(255,255,255,.03) inset, 0 8px 16px rgba(0,0,0,.15);
}
.kpi-icon{
  width:36px; height:36px; border-radius:10px; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--violetA),var(--blueA));
  border:1px solid rgba(255,255,255,.10);
}
.kpi-meta{ display:flex; flex-direction:column; gap:2px; }
.kpi-label{ font-size:12px; opacity:.75; }
.kpi-value{ font-weight:800; font-size:18px; }

.section{
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  border:1px solid rgba(139,92,246,.18);
  border-radius:16px; padding:16px; margin-top:14px;
}
.toolbar{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:space-between; margin-bottom:8px; }
.search{ flex:1; min-width:220px; }
.search .input{
  width:100%; padding:10px 12px; border-radius:12px;
  border:1px solid #2b2b31; background:#0f0f14; color:#fff;
}

.user-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(350px,1fr)); gap:12px; }
.user-card{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  border:1px solid rgba(139,92,246,.22); border-radius:14px; padding:12px;
  background:linear-gradient(180deg, rgba(139,92,246,.05), rgba(96,165,250,.03));
}
.user-card.banned{ filter:grayscale(.3) opacity(.8); }
.user-main{ display:flex; gap:10px; align-items:center; }
.uAv{ width:44px; height:44px; border-radius:50%; object-fit:cover; border:1px solid rgba(139,92,246,.22); }
.uInfo{ min-width:0; }
.uName{ font-weight:700; display:flex; gap:8px; align-items:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.uLogin{ opacity:.8; font-size:12px; }
.uMeta{ opacity:.8; font-size:12px; }
.tiny{ font-size:11px; opacity:.75; }
.uActions{ display:flex; gap:8px; }

.token-list{ display:grid; grid-template-columns:repeat(auto-fit,minmax(360px,1fr)); gap:12px; }
.token-card{
  border:1px solid rgba(139,92,246,.22); border-radius:14px; padding:12px;
  background:linear-gradient(180deg, rgba(139,92,246,.05), rgba(96,165,250,.03));
}
.tTop{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; gap:8px; }
.tWho{ display:flex; gap:10px; align-items:center; }
.tAv{ width:40px; height:40px; border-radius:50%; object-fit:cover; border:1px solid rgba(139,92,246,.22); }
.tMeta{ display:flex; flex-direction:column; gap:2px; }
.tName{ font-weight:700; }
.tLogin{ opacity:.75; }
.badges .badge{ font-size:11px; padding:3px 8px; border-radius:999px; }

/* Admin status badges (keep semantic colors) */
.badge.ok  { color:#8be28f; border-color:#315e38; background:rgba(40,120,50,.12); }
.badge.warn{ color:#ffd78e; border-color:#80692b; background:rgba(200,140,46,.12); }
.badge.bad { color:#ff9ea0; border-color:#7d2b2b; background:rgba(200,46,46,.12); }

.scopeWrap{
  background:#0f0f14; border:1px dashed #2a2a31; border-radius:10px; padding:8px;
}
.scopeWrap summary{ cursor:pointer; font-weight:600; margin:6px 0; color:#9aa4b2; }
.scopes{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.scope{ font-size:11px; padding:4px 8px; border-radius:999px; border:1px solid var(--border); background:rgba(255,255,255,.02); }

.tFoot{ margin-top:10px; display:flex; gap:8px; flex-wrap:wrap; }

/* Footer (optional) */
.footer{ color:#8aa0b6; font-size:12px; padding:24px 16px; text-align:center; }

/* =========================================
   Backgrounds: gradient wash + aurora + grid
   (pure CSS, CSP-safe)
========================================= */
body{
  background-color:#0a0c12;
  background:
    radial-gradient(40vw 40vh at 85% 10%, rgba(139,92,246,.20), transparent 60%),
    radial-gradient(60vw 60vh at 10% 100%, rgba(96,165,250,.18), transparent 62%),
    linear-gradient(180deg, #0a0c12, #0b0f14 30%, #0b0f14 70%, #0a0c12);
  background-attachment:fixed, fixed, fixed;
}

body::before{
  content:"";
  position:fixed; inset:-10%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(35% 25% at 20% 20%, rgba(139,92,246,.35), transparent 60%),
    radial-gradient(30% 30% at 80% 75%, rgba(96,165,250,.32), transparent 60%),
    conic-gradient(from 180deg at 50% 50%, rgba(139,92,246,.15), rgba(96,165,250,.15), rgba(139,92,246,.15));
  filter:blur(60px) saturate(115%);
  opacity:.45; animation:aurora-drift 40s linear infinite; will-change:transform;
}
@keyframes aurora-drift{
  0%{ transform:translate3d(-2%,-1%,0) rotate(0)   scale(1.05); }
  50%{transform:translate3d( 1%, 2%,0) rotate(180deg) scale(1.00); }
  100%{transform:translate3d(-2%,-1%,0) rotate(360deg) scale(1.05); }
}
@media (prefers-reduced-motion:reduce){ body::before{ animation:none; } }

body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    repeating-linear-gradient(to right, rgba(255,255,255,.04) 0, rgba(255,255,255,.04) 1px, transparent 1px, transparent 24px),
    repeating-linear-gradient(to bottom, rgba(255,255,255,.04) 0, rgba(255,255,255,.04) 1px, transparent 1px, transparent 24px);
  opacity:.035;
}
/* --- Mobile nav toggle: compact, themed, CSP-safe --- */
@media (max-width: 820px){
  .nav-inner{ grid-template-columns: auto 1fr auto; }

  /* kill the old offset that made it look weird */
  .nav-mobile{ display:block; margin-left:0; }

  .nav-mobile > summary{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:36px;
    height:36px;
    padding:0;
    border-radius:12px;
    border:1px solid rgba(139,92,246,.35);
    background: linear-gradient(135deg, var(--violetA2), var(--blueA2));
    box-shadow:none;                 /* don’t look like a big pill */
    -webkit-tap-highlight-color:transparent;
  }
  /* subtle focus, not the big global ring */
  .nav-mobile > summary:focus{ outline:none; }
  .nav-mobile > summary:focus-visible{
    box-shadow: 0 0 0 2px rgba(139,92,246,.6);
  }

  /* sheet sits just below header; keep it above content */
  .nav-mobile .sheet{
    position: fixed;
    left: 0; right: 0;
    top: 56px;                     /* matches header height */
    z-index: 60;
    background: linear-gradient(180deg, rgba(15,16,22,.96), rgba(15,16,22,.98));
    border-top: 1px solid rgba(139,92,246,.25);
    box-shadow: 0 14px 24px rgba(0,0,0,.35);
  }
}

/* Brand shouldn’t underline on tap/hover */
.brand:hover{ text-decoration: none; }
@media (max-width: 820px){
  .nav-mobile{ display:block; margin-left:auto; justify-self:end; }
}