/* WB KTV Design System v2 — Warm Gold */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=JetBrains+Mono:wght@400;500;600&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Surfaces — deeper warm blacks */
  --bg:        #080600;
  --s1:        #0f0b02;
  --s2:        #171104;
  --s3:        #1f1808;
  --s4:        #28200c;
  --border:    #2a2008;
  --border-hi: #3d3010;

  /* Primary: Warm Gold */
  --amber:     #e8a817;
  --amber2:    #b8840f;
  --amber-lo:  rgba(232,168,23,0.08);
  --amber-mid: rgba(232,168,23,0.15);
  --amber-glow: rgba(232,168,23,0.03);

  /* Secondary: Seafoam (corrected output only) */
  --mint:      #2dd4a8;
  --mint-dim:  #1aa882;
  --mint-lo:   rgba(45,212,168,0.08);

  /* Accent: Coral (warnings, energy) */
  --coral:     #ff6b6b;
  --coral-lo:  rgba(255,107,107,0.08);

  /* Text hierarchy */
  --text:      #f0e6d0;
  --text2:     #9a8560;
  --text3:     #6a5a3a;
  --muted:     #4a3a20;

  /* Radii — slightly larger for premium feel */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-full: 9999px;

  /* Shadows */
  --shadow-card:  0 1px 3px rgba(0,0,0,0.4), 0 0 0 1px var(--border);
  --shadow-hover: 0 4px 16px rgba(0,0,0,0.5), 0 0 0 1px var(--border-hi);
  --shadow-glow:  0 0 40px var(--amber-glow);
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ── Nav ── */
nav.topnav {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 56px;
  padding: 0 24px;
  background: var(--s1);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
}
nav.topnav .logo {
  font-weight: 800;
  color: var(--amber);
  letter-spacing: -0.02em;
  margin-right: 16px;
  font-size: 1.1rem;
}
nav.topnav a {
  text-decoration: none;
  color: var(--text2);
  padding: 6px 16px;
  border-radius: var(--r-md);
  font-size: 0.85rem;
  font-weight: 500;
  transition: color 150ms ease, background 150ms ease;
}
nav.topnav a:hover { color: var(--text); background: var(--s3); }
nav.topnav a.active { color: var(--amber); background: var(--amber-lo); font-weight: 600; }

/* ── Layout ── */
.page { max-width: 1200px; margin: 0 auto; padding: 32px 24px; }

/* ── Cards — with depth ── */
.card {
  background: var(--s1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px 24px;
  box-shadow: var(--shadow-card);
  transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}
.card:hover {
  border-color: var(--border-hi);
}
.card-title {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--r-md);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 150ms ease;
}
.btn-primary {
  background: var(--amber);
  color: #080600;
}
.btn-primary:hover {
  background: var(--amber2);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(232,168,23,0.2);
}
.btn-ghost {
  background: transparent;
  color: var(--amber);
  border: 1px solid var(--amber);
}
.btn-ghost:hover { background: var(--amber-lo); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-danger { background: #ef4444; color: #fff; }
.btn-danger:hover { background: #dc2626; }

/* ── Score Badge — with glow ── */
.score-grade {
  font-size: 4.5rem;
  font-weight: 800;
  color: var(--amber);
  line-height: 1;
  text-shadow: 0 0 60px var(--amber-glow);
}
.score-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text2);
  margin-top: 4px;
}

/* ── Mono numbers ── */
.mono { font-family: 'JetBrains Mono', monospace; }

/* ── Form controls ── */
select, input[type="range"], input[type="file"], input[type="text"], input[type="number"] {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.9rem;
  background: var(--s2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 8px 12px;
  transition: border-color 150ms ease;
}
select:focus, input:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px var(--amber-lo); }

label { font-size: 0.85rem; color: var(--text2); display: block; margin-bottom: 4px; font-weight: 500; }

/* ── Audio player ── */
audio { width: 100%; }

/* ── Data table ── */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
}
.data-table th {
  color: var(--text3);
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  font-weight: 500;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.data-table td { padding: 7px 12px; color: var(--text); }
.data-table tbody tr { border-bottom: 1px solid rgba(42,32,8,0.5); transition: background 100ms; }
.data-table tbody tr:hover { background: var(--s2); }
.voiced-yes { color: var(--mint); }
.voiced-no  { color: var(--muted); }

/* ── Toggle group ── */
.toggle-group {
  display: flex;
  background: var(--s2);
  border-radius: var(--r-md);
  padding: 3px;
  gap: 3px;
}
.toggle-group button {
  flex: 1;
  padding: 8px 16px;
  border: none;
  background: transparent;
  color: var(--text2);
  border-radius: var(--r-sm);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 150ms ease;
}
.toggle-group button.active {
  background: var(--amber);
  color: #080600;
  font-weight: 600;
}

/* ── Pill tags ── */
.pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--r-full);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.pill-gold { background: var(--amber-lo); color: var(--amber); border: 1px solid var(--amber2); }
.pill-mint { background: var(--mint-lo); color: var(--mint); }
.pill-coral { background: var(--coral-lo); color: var(--coral); }

/* ── Utility ── */
.flex        { display: flex; }
.flex-col    { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-8   { gap: 8px; }
.gap-16  { gap: 16px; }
.gap-24  { gap: 24px; }
.grid-2  { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3  { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.mb-8    { margin-bottom: 8px; }
.mb-16   { margin-bottom: 16px; }
.mb-24   { margin-bottom: 24px; }
.text-amber { color: var(--amber); }
.text-mint  { color: var(--mint); }
.text-muted { color: var(--text2); }
.hidden  { display: none !important; }

/* ── Mobile responsiveness ── */
@media (max-width: 768px) {
  .page { padding: 16px 12px; }
  nav.topnav { padding: 0 12px; gap: 2px; }
  nav.topnav a { padding: 6px 8px; font-size: 0.8rem; }
  nav.topnav .logo { margin-right: 8px; font-size: 1rem; }
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .card { padding: 16px; }
  .score-grade { font-size: 3rem; }
  .score-num { font-size: 1.2rem; }
  .data-table { font-size: 0.7rem; }
  .data-table th, .data-table td { padding: 4px 6px; }
  .toggle-group { flex-direction: column; }
  .toggle-group button { padding: 8px 14px; }
}
@media (max-width: 480px) {
  .page { padding: 12px 8px; }
  nav.topnav { height: 48px; }
  nav.topnav a { font-size: 0.75rem; padding: 4px 6px; }
  .card { padding: 12px; }
  .score-grade { font-size: 2.5rem; }
}

/* ── Accessibility ── */
:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}
.btn:focus-visible { box-shadow: 0 0 0 3px var(--amber-lo); }

/* ── Loading / processing states ── */
.processing-spinner {
  display: inline-block;
  width: 24px; height: 24px;
  border: 2px solid var(--muted);
  border-top-color: var(--amber);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Cancel button ── */
.btn-cancel {
  background: transparent;
  color: var(--text2);
  border: 1px solid var(--muted);
  font-size: 0.85rem;
  padding: 6px 16px;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all 150ms;
}
.btn-cancel:hover { border-color: var(--text2); color: var(--text); }