/* LED Studio brand accent over Nocturne — the blurple accent ramp is retuned
   to the LED Studio yellow (logo uploads/assets-1784031929354.png), same
   lightness discipline, chroma carried in lines and glows per Nocturne. */
:root {
  --color-accent: #e8e424;
  --color-accent-2: #eeea5c;
  --color-accent-100: #fdfce8;
  --color-accent-200: #faf8c4;
  --color-accent-300: #f4f08a;
  --color-accent-400: #ece646;
  --color-accent-500: #e8e424;
  --color-accent-600: #beba1c;
  --color-accent-700: #918e15;
  --color-accent-800: #55530f;
  --color-accent-900: #34330a;
  --color-accent-2-100: #fdfce8;
  --color-accent-2-200: #faf8c4;
  --color-accent-2-300: #f4f08a;
  --color-accent-2-400: #eee968;
  --color-accent-2-500: #d6d14e;
  --color-accent-2-600: #aca83c;
  --color-accent-2-700: #83802c;
  --color-accent-2-800: #55530f;
  --color-accent-2-900: #34330a;
}

/* ---- Modern pass (applies to all screens via this shared token layer) ----
   Same concept, same layout — refreshed surfaces: glassy sticky bars, softer
   radii, layered elevation, pill controls, hover states, themed scrollbars. */
:root {
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 0 rgba(255,255,255,.03) inset, 0 2px 10px rgba(0,0,0,.28);
  --shadow-md: 0 1px 0 rgba(255,255,255,.04) inset, 0 10px 30px rgba(0,0,0,.38);
  --shadow-lg: 0 1px 0 rgba(255,255,255,.05) inset, 0 24px 60px rgba(0,0,0,.5);
}
html { scrollbar-color: #33364a var(--color-bg); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #2c2f42; border-radius: 999px; border: 2px solid var(--color-bg); }
::-webkit-scrollbar-thumb:hover { background: #3a3e56; }
::-webkit-scrollbar-track { background: transparent; }

/* Bars: glassy, pinned, with a soft light hairline */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--color-surface) 72%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  backdrop-filter: blur(16px) saturate(1.15);
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset;
}

/* Surfaces */
.card {
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-surface) 96%, #ffffff 4%) 0%, var(--color-surface) 100%);
  border: 1px solid rgba(233,233,237,.07);
  border-radius: var(--radius-lg);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.card.elev-sm { box-shadow: var(--shadow-sm); }
.card.elev-md { box-shadow: var(--shadow-md); }
a.card:hover { transform: translateY(-1px); border-color: rgba(233,233,237,.16); box-shadow: var(--shadow-md); }
.card:hover { border-color: rgba(233,233,237,.13); }

/* Buttons */
.btn { border-radius: 10px; transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .05s ease; }
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: linear-gradient(180deg, #f3ef46 0%, #ddd91a 100%);
  border: 1px solid rgba(0,0,0,.35);
  color: #16160a !important;
  font-weight: 600;
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 4px 16px color-mix(in srgb, var(--color-accent) 22%, transparent);
}
.btn-primary:hover { background: linear-gradient(180deg, #f7f36a 0%, #e6e224 100%); box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 6px 22px color-mix(in srgb, var(--color-accent) 32%, transparent); }
.btn-secondary { background: rgba(233,233,237,.04); border: 1px solid rgba(233,233,237,.12); }
.btn-secondary:hover { border-color: color-mix(in srgb, var(--color-accent) 45%, rgba(233,233,237,.12)); background: rgba(233,233,237,.07); }
.btn-ghost:hover { background: rgba(233,233,237,.06); border-radius: 8px; }

/* Inputs */
.input { border-radius: 10px; background: rgba(0,0,0,.22); border: 1px solid rgba(233,233,237,.1); transition: border-color .15s ease, box-shadow .15s ease; }
.input:hover { border-color: rgba(233,233,237,.18); }
.input:focus { border-color: var(--color-accent-600); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 14%, transparent); outline: none; }

/* Segmented controls -> pills */
.seg { border-radius: 999px; padding: 3px; background: rgba(0,0,0,.25); border: 1px solid rgba(233,233,237,.08); gap: 2px; }
.seg .seg-opt { border-radius: 999px; transition: background .15s ease, color .15s ease; white-space: nowrap; }
.seg { flex-wrap: nowrap; }
.seg .seg-opt:hover { background: rgba(233,233,237,.06); }
.seg .seg-opt:has(input:checked) { background: color-mix(in srgb, var(--color-accent) 16%, rgba(233,233,237,.05)); color: var(--color-text); box-shadow: 0 1px 0 rgba(255,255,255,.06) inset; }

/* Tags -> pills with a soft ring */
.tag { border-radius: 999px; letter-spacing: .06em; box-shadow: 0 0 0 1px rgba(233,233,237,.05) inset; }

/* Tables */
.table thead th { letter-spacing: .1em; text-transform: uppercase; font-size: 10px; color: var(--color-neutral-500); }
.table tbody tr { transition: background .12s ease; }
.table tbody tr:hover { background: color-mix(in srgb, var(--color-accent) 4%, transparent); }

/* Rules fade at the ends (Nocturne behaviour, applied to the utility) */
hr.hr { border: 0; height: 1px; background: linear-gradient(to right, transparent, var(--color-divider) 24%, var(--color-divider) 76%, transparent); }

/* Dialogs, if used */
.dialog { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }

/* Tablet: compress the nav row, never clip it */
.nav { overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav > * { flex-shrink: 0; }
@media (max-width: 1180px) {
  .nav { padding-left: 14px; padding-right: 14px; gap: 10px; }
  .nav a { padding-left: 8px !important; padding-right: 8px !important; font-size: 12.5px !important; }
  .nav .btn { padding-left: 10px !important; padding-right: 10px !important; white-space: nowrap; }
  .nav span[style*="0.14em"] { display: none; } /* WORKBENCH wordmark (React serializes .14em -> 0.14em) */
}
@media (max-width: 900px) {
  .nav a { padding-left: 6px !important; padding-right: 6px !important; font-size: 12px !important; }
  .nav span[style*="0.14em"], .nav span[style*=".14em"] { display: none !important; }
}