/* ── CSS Variables ── */
:root[data-theme="dark"] {
  --bg:           #0d0d0d;
  --surface:      #111111;
  --surface2:     #161616;
  --border:       #1e1e1e;
  --border2:      #2a2a2a;
  --text:         #f0f0f0;
  --text2:        #888888;
  --text3:        #444444;
  --accent:       #F8FFA1;
  --accent-bg:    rgba(248,255,161,0.06);
  --red:          #eb5757;
  --green:        #6fcf97;
  --logo-filter:  invert(1) brightness(2);
}
:root[data-theme="light"] {
  --bg:           #f5f5f5;
  --surface:      #ffffff;
  --surface2:     #f8f8f8;
  --border:       #e0e0e0;
  --border2:      #d0d0d0;
  --text:         #111111;
  --text2:        #666666;
  --text3:        #aaaaaa;
  --accent:       #111111;
  --accent-bg:    rgba(0,0,0,0.05);
  --red:          #c0392b;
  --green:        #27ae60;
  --logo-filter:  none;
}

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  transition: background 0.2s, color 0.2s;
}
a { color: inherit; text-decoration: none; }

/* ── Theme Toggle ── */
.theme-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  font-size: 12px;
  color: var(--text3);
  background: none;
  border: none;
  padding: 0;
}
.toggle-track {
  width: 36px; height: 20px;
  background: var(--border2);
  border-radius: 10px;
  position: relative;
  transition: background 0.2s;
}
.toggle-dot {
  width: 14px; height: 14px;
  background: var(--accent);
  border-radius: 50%;
  position: absolute;
  top: 3px; left: 3px;
  transition: transform 0.2s;
}
[data-theme="light"] .toggle-dot { transform: translateX(16px); }

/* ── Logo ── */
.jb-logo { filter: var(--logo-filter); }

/* ── Utility ── */
.text-red   { color: var(--red) !important; }
.text-green { color: var(--green) !important; }
.text-muted { color: var(--text3); }

/* ── Mobile ── */
@media (max-width: 480px) {
  body { padding-left: 16px !important; padding-right: 16px !important; }
  .topbar { margin-bottom: 28px !important; }
  .page-title { font-size: 17px !important; }
}