/* ── TOOLBAR ───────────────────────────────────────────────────────────── */
#toolbar {
  height:var(--toolbar-h);
  background:var(--bg);
  border-bottom:1px solid var(--border-hair);
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 14px;
  flex-shrink:0;
  z-index:300;
  position:relative;
}
#toolbar-stats {
  font-family:'JetBrains Mono', monospace;
  font-size:9px;
  color:var(--text3);
  letter-spacing:.1em;
  text-transform:uppercase;
}

/* ── TOOLBAR THEME CYCLE BUTTON ─────────────────────────────────────────── */
#tbar-theme-cycle {
  all:unset;
  cursor:pointer;
  width:28px;
  height:26px;
  margin-left:6px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border-hair);
  border-radius:6px;
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:600;
  line-height:1;
  color:var(--text3);
  transition:color .12s, background .12s, border-color .12s;
}
#tbar-theme-cycle:hover {
  color:var(--text);
  background:var(--surface2);
}

/* ── TOOLBAR FONT CYCLE BUTTON ──────────────────────────────────────────── */
#tbar-font-cycle {
  all:unset; cursor:pointer;
  width:28px; height:26px; margin-left:4px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--border-hair); border-radius:6px;
  font-family:var(--font-mono); font-size:11px; font-weight:600; line-height:1;
  color:var(--text3);
  transition:color .12s, background .12s, border-color .12s;
}
#tbar-font-cycle:hover { color:var(--text); background:var(--surface2); }
#tbar-font-cycle[data-font="1984"] { font-family:"Chicago FLF","Chicago",monospace; font-size:12px; }
#tbar-font-cycle[data-font="dos"]  { font-family:"Less Perfect DOS VGA","Perfect DOS VGA 437",monospace; font-size:11px; }

.tbar-account-btn {
  all:unset;
  cursor:pointer;
  width:28px;
  height:26px;
  margin-left:4px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border-hair);
  border-radius:6px;
  color:var(--text3);
  transition:color .12s, background .12s, border-color .12s;
}
.tbar-account-btn:hover {
  color:var(--text);
  background:var(--surface2);
}

.toolbar-metrics {
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-mono, 'JetBrains Mono', monospace);
  font-size:9px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text3);
  white-space:nowrap;
}
.toolbar-metrics-sep {
  opacity:.5;
}

.logo {
  font-family:var(--font-display,'Inter',-apple-system,sans-serif);
  font-weight:500;
  font-size:15px;
  color:var(--text);
  letter-spacing:-0.01em;
  white-space:nowrap;
  cursor:pointer;
  border:none;
  padding:0;
  background:none;
  display:inline-flex;
  align-items:center;
  gap:7px;
}
.logo:hover { color:var(--text); opacity:.85; }
.logo:focus { outline:none; }
.toolbar-logo-mark {
  width:18px;
  height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}
.toolbar-logo-mark svg {
  width:18px;
  height:18px;
  display:block;
}
.toolbar-logo-mark circle:first-child {
  fill:currentColor;
}
.toolbar-logo-mark circle:last-child {
  fill:none;
  stroke:currentColor;
  stroke-width:6;
}

#nav-logo-chevron {
  font-size:9px;
  color:var(--text3);
  opacity:.7;
  transition:transform .18s ease, opacity .15s ease;
}
#nav-logo-btn.open #nav-logo-chevron { transform:rotate(180deg); opacity:.95; color:var(--text2); }
#nav-logo-wrap { position:relative; flex-shrink:0; display:flex; align-items:center; }

#nav-scrim {
  position:fixed; inset:0;
  background:transparent;
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  opacity:0;
  pointer-events:none;
  transition:opacity .22s cubic-bezier(.4,0,.2,1);
  z-index:50;
}
#nav-scrim.open { opacity:1; }

#nav-menu {
  position:absolute;
  top:calc(100% + 6px);
  left:-4px;
  min-width:208px;
  background:linear-gradient(180deg, rgba(22,24,36,0.98), rgba(14,16,26,0.98));
  border:1px solid rgba(255,255,255,0.16);
  border-radius:12px;
  padding:6px;
  z-index:600;
  box-shadow:
    0 20px 60px rgba(0,0,0,.78),
    0 1px 0 rgba(255,255,255,0.14) inset,
    0 30px 80px -20px rgba(74,158,255,.18);
  display:none;
  transform-origin:top left;
}
#nav-menu.open {
  display:block;
  animation:dropdownIn .22s cubic-bezier(.34,1.2,.64,1);
}

.nav-item {
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border-radius:7px;
  text-decoration:none;
  color:var(--text2);
  font-family:'Inter', sans-serif;
  font-size:12px;
  letter-spacing:.01em;
  transition:
    background .15s ease,
    color .15s ease,
    transform .18s cubic-bezier(.34,1.4,.64,1);
  position:relative;
}
.nav-item:hover {
  background:rgba(255,255,255,0.06);
  color:var(--text);
  transform:translateX(2px);
}
.nav-item.active {
  background:var(--accent-dim);
  color:var(--text);
}
.nav-item.active::before {
  content:'';
  position:absolute;
  left:3px; top:50%;
  transform:translateY(-50%);
  width:2px; height:14px;
  border-radius:1px;
  background:linear-gradient(180deg, var(--accent2), var(--accent), var(--accent3));
}
.nav-glyph {
  width:18px;
  text-align:center;
  font-size:14px;
  opacity:.75;
  flex-shrink:0;
  font-family:'JetBrains Mono', monospace;
  line-height:1;
}
.nav-item.active .nav-glyph { opacity:1; }
.nav-label { flex:1; font-family:'Inter', sans-serif; font-weight:500; }
.nav-sep { height:1px; background:rgba(255,255,255,0.07); margin:5px 8px; }
.nav-foot {
  padding:8px 12px 4px;
  font-family:'JetBrains Mono', monospace;
  font-size:9px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text3);
}
.nav-foot-user { color:var(--text2); }