/* ═══════════════════════════════════════════════════════════════════════════
   MaestroAI — Design System
   Premium dark aesthetic — Aulart cinematic × Apple precision
═══════════════════════════════════════════════════════════════════════════ */

/* ── Custom Properties ────────────────────────────────────────────────── */
:root {
  /* Surfaces — the landing's paper world, so app and landing are one place.
     Ground is warm paper; cards are near-white paper lifted a shade above it;
     borders are ink hairlines, not light-on-dark lines. */
  --bg:           #F6F2E9;
  --surface:      #EFE9DB;
  --surface-2:    #EAE3D3;
  --card:         #FCFAF4;
  --card-hover:   #F4EFE3;
  --border:       rgba(27,23,18,0.14);
  --border-light: rgba(27,23,18,0.22);
  --border-mid:   rgba(27,23,18,0.18);

  /* Legacy aliases */
  --bg-tertiary:  #EAE3D3;

  /* Brand — gold that carries its weight on paper. The fill gold is the
     landing's --ouro; --primary-dark is the darker --ouro-texto for gold
     TEXT, which needs more depth than a fill to stay legible on cream. */
  --primary:      #B8892B;
  --primary-light:#C79A3A;
  --primary-dark: #8A6414;
  --primary-glow: rgba(184,137,43,0.20);

  /* Accent — same gold family (kept as alias for existing rules) */
  --accent:       #B8892B;
  --accent-light: #8A6414;
  --accent-glow:  rgba(184,137,43,0.16);

  /* Semantic — darkened to read on paper instead of glowing on black */
  --green:  #2f7d55;
  --red:    #b23a2b;
  --blue:   #3a6ea5;

  /* Text — the landing's ink scale */
  --text-primary:   #1B1712;
  --text-secondary: #5D5648;
  --text-muted:     #8D8471;

  /* Radii — Apple-precise */
  --radius-sm:  2px;
  --radius-md:  3px;
  --radius-lg:  4px;
  --radius-xl:  4px;
  --radius-2xl: 6px;

  /* Shadows — soft ink on paper, not deep black on void */
  --shadow-sm:  0 1px 3px rgba(27,23,18,0.08);
  --shadow-md:  0 6px 24px rgba(27,23,18,0.10);
  --shadow-lg:  0 18px 50px rgba(27,23,18,0.14);
  --shadow-glow:0 0 40px rgba(184,137,43,0.14);

  --transition: 0.18s ease;
  --font-display: 'Archivo', 'Schibsted Grotesk', sans-serif;
  --font-text:    'Schibsted Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;

  /* Type roles. Steps are wide enough to read as different jobs. */
  --text-display: clamp(2.6rem, 5.5vw, 4.6rem);
  --text-title-l: 1.75rem;    /* 28px — section headline */
  --text-title:   1.25rem;    /* 20px — card / block title */
  --text-body:    1rem;       /* 16px — reading floor */
  --text-body-s:  0.9375rem;  /* 15px — dense secondary prose */
  --text-meta:    0.8125rem;  /* 13px — metadata, captions */
  --text-label:   0.6875rem;  /* 11px — micro caps, always tracked */
}

/* ── Reset & Base ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-text);
  font-size: var(--text-body);
  background: var(--bg);
  color: var(--text-primary);
  line-height: 1.65;
  letter-spacing: 0.006em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Subtle grain texture — cinematic depth */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 180px 180px;
  opacity: 0.025;
  mix-blend-mode: multiply;
}

img { max-width: 100%; display: block; }
a { color: var(--primary-light); text-decoration: none; }
a:hover { color: var(--accent-light); }

/* ── Typography ───────────────────────────────────────────────────────────
   Archivo carries the voice at display sizes. Set heavy at its natural width, it
   has the sturdy engineered look of equipment lettering; opening the width
   axis pushed headlines onto an extra line and bought nothing. Schibsted Grotesk runs the interface: narrow
   enough for dense data rows, even enough to disappear while reading. Both
   replace faces (Inter, Space Grotesk) that were defaults, not decisions.     */
h1, h2, h3, h4 { font-family: var(--font-display); }
h1 {
  font-size: var(--text-display);
  font-weight: 800; line-height: 1.02;
  letter-spacing: -0.035em;
  font-variation-settings: 'wdth' 100;
}
h2 {
  font-size: clamp(1.75rem, 3vw, 2.6rem);
  font-weight: 700; letter-spacing: -0.022em;
  line-height: 1.12;
  font-variation-settings: 'wdth' 100;
}
h3 {
  font-size: var(--text-title);
  font-weight: 700; letter-spacing: -0.012em; line-height: 1.25;
  font-variation-settings: 'wdth' 100;
}
p  { color: var(--text-secondary); }

/* Measured values are read like a panel, not like prose: same column width
   per digit, and no ligature turning 0.58 into something clever. */
.confidence-pct, .freq-band-value, .rhythm-row-value, .bpm-number,
.raw-feature-val, .stat-number, .price-amount, .blueprint-card-value {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* Landing grammar: the highlighted word is solid gold, not a gradient. */
.gradient-text { color: var(--primary); }

.eyebrow {
  font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--primary); font-weight: 700;
}

/* ── Layout helpers ───────────────────────────────────────────────────── */
.section-inner  { max-width: 1140px; margin: 0 auto; padding: 0 28px; }
.section-header { text-align: center; margin-bottom: 64px; }
.section-title  { margin-bottom: 18px; }
.section-subtitle {
  font-size: 1.1rem; max-width: 540px;
  margin: 0 auto; color: var(--text-secondary);
  line-height: 1.7; font-weight: 400;
}

/* Horizontal rule */
.section-rule {
  width: 40px; height: 2px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  margin: 0 auto 20px;
  border-radius: 2px;
}

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 22px;
  border: none; border-radius: 3px;
  font-family: inherit; font-size: var(--text-body-s); font-weight: 600;
  cursor: pointer; transition: all var(--transition);
  white-space: nowrap; text-decoration: none;
  letter-spacing: -0.01em;
}
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

.btn-primary {
  background: var(--primary);
  color: #0B0B0C;
  font-weight: 700;
  box-shadow: 0 4px 20px rgba(216,163,74,0.22);
}
.btn-primary:hover:not(:disabled) {
  background: var(--primary-light);
  box-shadow: 0 8px 24px rgba(216,163,74,0.3);
  transform: translateY(-1px);
  color: #0B0B0C;
}
.btn-primary:active:not(:disabled) { transform: translateY(0); }

.btn-ghost {
  background: rgba(27,23,18,0.05);
  color: var(--text-primary);
  border: 1px solid rgba(27,23,18,0.09);
  backdrop-filter: blur(12px);
}
.btn-ghost:hover:not(:disabled) {
  background: rgba(27,23,18,0.09);
  border-color: rgba(27,23,18,0.14);
  color: var(--text-primary);
}

.btn-lg  { padding: 15px 30px; font-size: 1rem; border-radius: 3px; }
.btn-sm  { padding: 7px 14px;  font-size: var(--text-meta); border-radius: 3px; }
.btn-full { width: 100%; }

/* ═══════════════════════════════ NAVBAR ════════════════════════════════ */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 0 28px;
  height: 60px;
  background: rgba(246,242,233,0.82);
  backdrop-filter: saturate(140%) blur(20px);
  -webkit-backdrop-filter: saturate(140%) blur(20px);
  border-bottom: 1px solid var(--border);
  transition: background 0.3s ease, border-color 0.3s ease;
}
.navbar.scrolled {
  background: rgba(246,242,233,0.94);
  border-bottom-color: var(--border-mid);
}
.nav-inner {
  max-width: 1140px; margin: 0 auto;
  display: flex; align-items: center; height: 100%; gap: 36px;
}
.nav-logo {
  display: flex; align-items: center; gap: 9px;
  font-weight: 800; font-size: 1.1rem;
  color: var(--text-primary);
  text-decoration: none;
  flex-shrink: 0;
  letter-spacing: -0.02em;
}
/* Inline SVG icons: sized by the inherited font-size, coloured by currentColor,
   so every existing icon rule below keeps working unchanged. */
.icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.125em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.logo-icon { font-size: 1.2rem; color: var(--primary-light); display: inline-flex; align-items: center; }
/* Landing wordmark: MAESTRO in paper, AI in gold, tracked-out caps. */
.logo-text {
  font-family: var(--font-display);
  font-weight: 700; letter-spacing: 0.24em; font-size: 15px;
  text-transform: uppercase; color: var(--text-primary);
}
.logo-text .logo-ai { color: var(--primary); }
.nav-links { display: flex; gap: 2px; flex: 1; }
.nav-link {
  padding: 6px 13px; border-radius: var(--radius-sm);
  color: var(--text-secondary); font-size: var(--text-body-s); font-weight: 500;
  transition: color var(--transition);
  letter-spacing: -0.01em;
}
.nav-link:hover { color: var(--text-primary); }
.nav-auth { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.nav-user { gap: 14px; }

/* Credits badge */
.credits-badge {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 12px;
  background: rgba(27,23,18,0.05);
  border: 1px solid rgba(27,23,18,0.08);
  border-radius: 999px;
  font-size: var(--text-meta); font-weight: 600;
  color: var(--accent-light);
  backdrop-filter: blur(10px);
}
.credits-icon { font-size: var(--text-body-s); }
.credits-label { color: var(--text-muted); font-weight: 400; }

/* User menu */
.user-menu { position: relative; }
.user-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: var(--text-body-s); color: #fff;
  transition: all var(--transition);
  box-shadow: 0 0 0 2px transparent;
}
.user-avatar:hover { box-shadow: 0 0 0 2px var(--primary); transform: scale(1.05); }
.user-dropdown {
  display: none; position: absolute; right: 0; top: calc(100% + 10px);
  width: 224px;
  background: rgba(16,16,16,0.96);
  border: 1px solid rgba(27,23,18,0.09);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(27,23,18,0.14);
  overflow: hidden;
  animation: fadeDown 0.15s ease;
  backdrop-filter: blur(20px);
}
.user-dropdown.open { display: block; }
.dropdown-header {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(27,23,18,0.06);
}
.dropdown-email { font-size: var(--text-meta); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dropdown-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  font-size: var(--text-body-s); color: var(--text-secondary);
  transition: all var(--transition);
  cursor: pointer; background: none; border: none; width: 100%; text-align: left; font-family: inherit;
}
.dropdown-item:hover { background: rgba(27,23,18,0.05); color: var(--text-primary); }
.dropdown-logout { color: var(--red); }
.dropdown-logout:hover { background: rgba(248,113,113,0.06); color: var(--red); }

/* ═══════════════════════════════ HERO ══════════════════════════════════ */
.hero {
  position: relative; min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 120px 28px 80px;
  overflow: hidden;
}

/* Single cinematic gradient — Aulart style */
.hero-bg {
  position: absolute; inset: 0; pointer-events: none;
}
.hero-bg::before {
  content: '';
  position: absolute;
  top: -20%; left: 50%; transform: translateX(-50%);
  width: 900px; height: 700px;
  background: radial-gradient(ellipse at 50% 40%,
    rgba(216,163,74,0.28) 0%,
    rgba(216,163,74,0.10) 40%,
    transparent 70%);
  pointer-events: none;
}
.hero-bg::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0; height: 280px;
  background: linear-gradient(to top, var(--bg), transparent);
}

/* Subtle dot-grid pattern */
.hero-grid {
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(27,23,18,0.06) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 20%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 20%, transparent 80%);
}

/* Keep orb elements hidden (HTML still has them) */
.hero-orb { display: none; }

.hero-content {
  position: relative; z-index: 2;
  max-width: 720px; text-align: center;
}

/* Landing beta badge: gold pill outline + pulsing gold dot + eyebrow beside it. */
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  background: rgba(216,163,74,0.10);
  border: 1px solid rgba(216,163,74,0.32);
  border-radius: 999px;
  font-size: var(--text-meta); font-weight: 500; color: var(--primary-light);
  margin-bottom: 32px;
  backdrop-filter: blur(10px);
  letter-spacing: 0;
}
.hero-badge-inner {
  font-size: 11px; font-weight: 700; color: var(--primary-light);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.hero-eyebrow {
  margin-left: 10px; padding-left: 14px;
  border-left: 1px solid rgba(216,163,74,0.32);
  font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--text-secondary); font-weight: 700;
}
.badge-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--primary-light);
  box-shadow: 0 0 8px var(--primary-light);
  animation: pulse 2.2s ease infinite;
  flex-shrink: 0;
}
@keyframes pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(1.5); }
}

.hero-title { margin-bottom: 28px; }
.hero-subtitle {
  font-size: 1.2rem; line-height: 1.75;
  color: var(--text-secondary); margin-bottom: 40px;
  font-weight: 400; max-width: 580px; margin-left: auto; margin-right: auto;
}
.hero-subtitle strong { color: var(--text-primary); font-weight: 600; }

.hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 56px; }

.hero-stats {
  display: flex; align-items: center; justify-content: center;
  gap: 0; flex-wrap: wrap;
  background: rgba(27,23,18,0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 0;
  overflow: hidden;
  display: inline-flex;
}
.stat {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 20px 36px;
  position: relative;
}
.stat + .stat::before {
  content: '';
  position: absolute; left: 0; top: 20%; height: 60%;
  width: 1px; background: var(--border);
}
.stat-number {
  font-size: 1.6rem; font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.03em;
}
.stat-label  {
  font-size: var(--text-label); color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 500;
}
.stat-divider { display: none; }

/* Waveform demo */
.hero-visual {
  position: absolute; bottom: 48px; left: 50%; transform: translateX(-50%);
  opacity: 0.25;
}
.waveform-demo { overflow: hidden; }
.waveform-bars {
  display: flex; align-items: center; gap: 3px; height: 56px;
}
.waveform-bars span {
  display: block; width: 2px;
  background: var(--primary-light);
  border-radius: 2px;
  animation: waveBar 1.2s ease-in-out infinite;
}
.waveform-bars span:nth-child(1)  { height: 20%; animation-delay: 0s; }
.waveform-bars span:nth-child(2)  { height: 45%; animation-delay: 0.1s; }
.waveform-bars span:nth-child(3)  { height: 70%; animation-delay: 0.2s; }
.waveform-bars span:nth-child(4)  { height: 55%; animation-delay: 0.3s; }
.waveform-bars span:nth-child(5)  { height: 85%; animation-delay: 0.4s; }
.waveform-bars span:nth-child(6)  { height: 95%; animation-delay: 0.05s; }
.waveform-bars span:nth-child(7)  { height: 75%; animation-delay: 0.15s; }
.waveform-bars span:nth-child(8)  { height: 60%; animation-delay: 0.25s; }
.waveform-bars span:nth-child(9)  { height: 40%; animation-delay: 0.35s; }
.waveform-bars span:nth-child(10) { height: 80%; animation-delay: 0.45s; }
.waveform-bars span:nth-child(11) { height: 100%; animation-delay: 0.1s; }
.waveform-bars span:nth-child(12) { height: 65%; animation-delay: 0.2s; }
.waveform-bars span:nth-child(13) { height: 50%; animation-delay: 0.3s; }
.waveform-bars span:nth-child(14) { height: 90%; animation-delay: 0.4s; }
.waveform-bars span:nth-child(15) { height: 45%; animation-delay: 0.0s; }
.waveform-bars span:nth-child(16) { height: 70%; animation-delay: 0.18s; }
.waveform-bars span:nth-child(17) { height: 55%; animation-delay: 0.28s; }
.waveform-bars span:nth-child(18) { height: 80%; animation-delay: 0.38s; }
.waveform-bars span:nth-child(19) { height: 35%; animation-delay: 0.08s; }
.waveform-bars span:nth-child(20) { height: 65%; animation-delay: 0.22s; }
.waveform-bars span:nth-child(21) { height: 90%; animation-delay: 0.32s; }
.waveform-bars span:nth-child(22) { height: 50%; animation-delay: 0.42s; }
.waveform-bars span:nth-child(23) { height: 75%; animation-delay: 0.12s; }
.waveform-bars span:nth-child(24) { height: 40%; animation-delay: 0.24s; }
.waveform-bars span:nth-child(25) { height: 60%; animation-delay: 0.34s; }
.waveform-bars span:nth-child(26) { height: 85%; animation-delay: 0.06s; }
.waveform-bars span:nth-child(27) { height: 30%; animation-delay: 0.16s; }
.waveform-bars span:nth-child(28) { height: 55%; animation-delay: 0.26s; }
.waveform-bars span:nth-child(29) { height: 70%; animation-delay: 0.36s; }
.waveform-bars span:nth-child(30) { height: 25%; animation-delay: 0.46s; }

@keyframes waveBar {
  0%,100% { transform: scaleY(1); }
  50%      { transform: scaleY(0.3); }
}

/* ═══════════════════════════════ FEATURES ══════════════════════════════ */
.features {
  padding: 120px 0;
}
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.feature-card {
  background: var(--card);
  padding: 36px 32px;
  transition: background var(--transition);
  position: relative;
}
.feature-card::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 0% 0%, rgba(216,163,74,0.06), transparent 60%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.feature-card:hover { background: var(--card-hover); }
.feature-card:hover::after { opacity: 1; }

.feature-icon {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  background: rgba(27,23,18,0.04);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: 20px;
}
.feature-card h3 {
  font-size: 1rem; margin-bottom: 10px;
  color: var(--text-primary);
}
.feature-card p  { font-size: var(--text-body-s); line-height: 1.7; color: var(--text-secondary); }
.feature-tag {
  display: inline-block; margin-top: 14px;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700;
  color: var(--primary); background: rgba(216,163,74,0.10);
  border: 1px solid rgba(216,163,74,0.22);
  padding: 3px 11px; border-radius: 3px;
}

/* ═══════════════════════════════ APP SECTION ════════════════════════════ */
.app-section { padding: 80px 0 80px; }

/* Tabs */
.tab-bar {
  display: flex; gap: 2px;
  padding: 4px;
  background: rgba(27,23,18,0.03);
  border: 1px solid rgba(27,23,18,0.07);
  border-radius: var(--radius-lg);
  width: fit-content;
  margin-bottom: 40px;
  backdrop-filter: blur(10px);
}
.tab-btn {
  padding: 9px 22px; border-radius: calc(var(--radius-lg) - 4px);
  border: none; background: none;
  font-family: inherit; font-size: var(--text-body-s); font-weight: 600;
  color: var(--text-muted); cursor: pointer;
  transition: all var(--transition);
  letter-spacing: -0.01em;
}
.tab-btn:hover { color: var(--text-primary); }
.tab-btn.active {
  background: rgba(27,23,18,0.08);
  color: var(--text-primary);
  box-shadow: 0 1px 0 rgba(27,23,18,0.07) inset;
}
.tab-content { display: block; }

/* Upload gate */
.upload-gate {
  text-align: center; padding: 60px 24px;
  background: var(--card);
  border: 1px dashed var(--border-light);
  border-radius: var(--radius-xl);
}
.gate-icon { font-size: 3rem; margin-bottom: 20px; }
.upload-gate h3 { margin-bottom: 12px; font-size: 1.4rem; }
.upload-gate p { margin-bottom: 24px; }
.gate-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* Upload zone */
.upload-zone-wrapper { margin-bottom: 28px; }
.upload-zone {
  border: 1px dashed rgba(27,23,18,0.10);
  border-radius: var(--radius-xl);
  padding: 72px 32px;
  text-align: center;
  cursor: pointer;
  transition: all 0.22s ease;
  background: rgba(27,23,18,0.015);
  position: relative;
  overflow: hidden;
}
.upload-zone::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(216,163,74,0.07), transparent 60%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.upload-zone:hover,
.upload-zone.drag-over {
  border-color: rgba(216,163,74,0.45);
  background: rgba(216,163,74,0.04);
}
.upload-zone:hover::before,
.upload-zone.drag-over::before { opacity: 1; }
.upload-zone.drag-over { transform: scale(1.008); }
.upload-icon {
  width: 72px; height: 72px; margin: 0 auto 22px;
  background: rgba(216,163,74,0.08);
  border: 1px solid rgba(216,163,74,0.2);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--primary-light);
  transition: all var(--transition);
}
.upload-zone:hover .upload-icon {
  background: rgba(216,163,74,0.15);
  border-color: rgba(216,163,74,0.35);
  transform: scale(1.06);
}
.upload-title { font-size: 1.25rem; margin-bottom: 8px; color: var(--text-primary); }
.upload-subtitle { color: var(--text-muted); margin-bottom: 20px; font-size: var(--text-body-s); }
.upload-formats { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 12px; }
.format-badge {
  padding: 3px 10px; border-radius: 999px;
  background: rgba(27,23,18,0.06);
  border: 1px solid var(--border);
  font-size: var(--text-label); font-weight: 600; color: var(--text-secondary);
  font-family: var(--font-mono);
}
.upload-limit { font-size: var(--text-meta); color: var(--text-muted); }

.rights-attest {
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: 14px; padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--border); border-radius: 3px;
  font-size: var(--text-body-s); color: var(--text-secondary);
  cursor: pointer; text-align: left;
}
.rights-attest input[type="checkbox"] {
  margin-top: 2px; flex-shrink: 0; accent-color: var(--accent, #D8A34A);
  width: 16px; height: 16px; cursor: pointer;
}
.rights-attest a { color: var(--accent, #D8A34A); }
.rights-attest-error { border-color: #e5484d; box-shadow: 0 0 0 1px rgba(229, 72, 77, 0.4); }

/* Analysing animation */
.analyzing-state {
  text-align: center; padding: 60px 24px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
}
.analyzer-bars {
  display: flex; align-items: flex-end; justify-content: center;
  gap: 5px; height: 56px; margin-bottom: 28px;
}
.analyzer-bars span {
  display: block; width: 8px;
  background: linear-gradient(to top, var(--primary), var(--accent));
  border-radius: 4px;
  animation: analyzerPulse 1s ease-in-out infinite;
}
.analyzer-bars span:nth-child(1) { height: 40%; animation-delay: 0s; }
.analyzer-bars span:nth-child(2) { height: 70%; animation-delay: 0.1s; }
.analyzer-bars span:nth-child(3) { height: 90%; animation-delay: 0.2s; }
.analyzer-bars span:nth-child(4) { height: 60%; animation-delay: 0.3s; }
.analyzer-bars span:nth-child(5) { height: 100%; animation-delay: 0.15s; }
.analyzer-bars span:nth-child(6) { height: 75%; animation-delay: 0.25s; }
.analyzer-bars span:nth-child(7) { height: 50%; animation-delay: 0.35s; }
.analyzer-bars span:nth-child(8) { height: 80%; animation-delay: 0.05s; }
@keyframes analyzerPulse {
  0%,100% { transform: scaleY(1); opacity: 1; }
  50%      { transform: scaleY(0.25); opacity: 0.5; }
}
.analyzing-title { font-size: 1.4rem; margin-bottom: 32px; }
.analyzing-steps { display: flex; flex-direction: column; gap: 16px; max-width: 380px; margin: 0 auto 24px; text-align: left; }
.step {
  display: flex; align-items: center; gap: 12px;
  font-size: var(--text-body-s); color: var(--text-muted);
  transition: color var(--transition);
}
.step.step-active { color: var(--text-primary); }
.step.step-done   { color: var(--green); }
.step-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
  background: var(--border-light);
  transition: background var(--transition), box-shadow var(--transition);
}
.step.step-active .step-dot {
  background: var(--primary);
  box-shadow: 0 0 8px var(--primary-glow);
  animation: stepDotPulse 1s ease infinite;
}
.step.step-done .step-dot { background: var(--green); box-shadow: none; }
@keyframes stepDotPulse {
  0%,100% { transform: scale(1); }
  50%      { transform: scale(1.4); }
}
.analyzing-note { font-size: var(--text-meta); color: var(--text-muted); }

/* ══════════════════════════ NO-CREDITS BANNER ═══════════════════════════ */
.no-credits-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  margin-bottom: 20px;
}
.no-credits-icon {
  font-size: 2rem;
  flex-shrink: 0;
}
.no-credits-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.no-credits-text strong {
  color: #b23a2b;
  font-size: var(--text-body);
}
.no-credits-text span {
  color: var(--text-muted);
  font-size: var(--text-body-s);
}
.no-credits-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
@media (max-width: 600px) {
  .no-credits-banner { flex-direction: column; align-items: flex-start; }
  .no-credits-actions { width: 100%; }
  .no-credits-actions .btn { flex: 1; text-align: center; }
}

/* ═══════════════════════════════ SHARED BANNER ══════════════════════════ */
.shared-banner {
  background: rgba(217, 119, 6, 0.12);
  border: 1px solid rgba(217, 119, 6, 0.35);
  border-radius: 3px;
  color: #B8892B;
  font-size: var(--text-body-s);
  padding: 10px 18px;
  margin-bottom: 16px;
  text-align: center;
}
.shared-banner a { color: #fcd34d; text-decoration: underline; }
.shared-banner a:hover { color: #fff; }
.shared-banner.shared-banner-error {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.35);
  color: #b23a2b;
}

/* ═══════════════════════════════ RESULTS ═══════════════════════════════ */
.results-section { animation: fadeIn 0.4s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.results-header { margin-bottom: 28px; }
.results-title-row {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px; margin-bottom: 10px;
}
.results-title { font-size: 1.6rem; }
.results-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.results-meta { font-size: var(--text-body-s); color: var(--text-muted); }

.results-block {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 20px;
}
.block-title {
  font-size: var(--text-meta); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--text-muted); margin-bottom: 18px;
  display: flex; align-items: center; gap: 8px;
}
.block-icon { font-size: 1rem; }

.results-two-col {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px;
  /* Rhythm carries less than Tonality; stretching it left a void inside the card. */
  align-items: start;
}

/* Instrument cards */
.instruments-grid { display: flex; flex-direction: column; gap: 16px; }

.instrument-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px;
  transition: border-color var(--transition);
}
.instrument-card.primary {
  border-color: rgba(216,163,74,0.4);
  background: rgba(216,163,74,0.05);
}
.instrument-card:hover { border-color: var(--border-light); }
.instrument-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 14px; flex-wrap: wrap;
}
/* min-width:0 lets these flex children shrink below their intrinsic width;
   without it a long era_estimate ("modern production (2015+) using vintage
   909 palette") forces the row wider than a 390px viewport. */
.instrument-name-block { min-width: 0; }
.instrument-family {
  font-size: var(--text-label); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--primary-light); margin-bottom: 4px;
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
}
/* Marks the family as the reliable claim, next to the hedged model below it. */
.family-certain {
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em;
  padding: 1px 6px; border-radius: 999px;
  color: #2f7d55;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
}
.instrument-model { font-size: 1.05rem; font-weight: 700; color: var(--text-primary); }
.instrument-role  { font-size: var(--text-meta); color: var(--text-muted); margin-top: 3px; }
.instrument-alts {
  font-size: var(--text-meta); color: var(--text-muted); margin-top: 10px;
  padding-top: 10px; border-top: 1px solid var(--border);
}

.instrument-badges { display: flex; gap: 6px; flex-wrap: wrap; min-width: 0; }
.badge {
  padding: 3px 9px; border-radius: 999px;
  font-size: var(--text-label); font-weight: 600;
  border: 1px solid;
  min-width: 0;
  overflow-wrap: anywhere;
}
.badge-high    { background: rgba(16,185,129,0.12);  border-color: rgba(16,185,129,0.3);  color: #2f7d55; }
.badge-medium  { background: rgba(245,158,11,0.12);  border-color: rgba(245,158,11,0.3);  color: var(--accent-light); }
.badge-low     { background: rgba(239,68,68,0.12);   border-color: rgba(239,68,68,0.3);   color: #b23a2b; }
.badge-pickup  { background: rgba(59,130,246,0.10);  border-color: rgba(59,130,246,0.25); color: #93c5fd; }
.badge-era     { background: rgba(27,23,18,0.05); border-color: var(--border); color: var(--text-muted); }

/* Confidence bar */
.confidence-row {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
}
.confidence-label { font-size: var(--text-meta); color: var(--text-muted); width: 88px; flex-shrink: 0; }
.confidence-bar-track {
  flex: 1; height: 6px;
  background: rgba(27,23,18,0.06);
  border-radius: 999px; overflow: hidden;
}
.confidence-bar-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  width: 0%;
  transition: width 1s cubic-bezier(0.4,0,0.2,1);
}
.confidence-pct { font-size: var(--text-meta); font-weight: 700; color: var(--text-primary); width: 36px; text-align: right; flex-shrink: 0; }

/* Sub-70% gear: three candidates, equal weight, each with its own percentage. */
.instrument-model-tentative { color: var(--text-muted); font-weight: 600; }
.gear-shortlist-caption {
  font-size: var(--text-label); color: var(--text-muted);
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.gear-shortlist { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.gear-cand { display: flex; align-items: center; gap: 10px; }
.gear-cand-rank {
  font-family: var(--font-mono); font-size: var(--text-label); font-weight: 700;
  color: var(--primary-dark); width: 14px; flex-shrink: 0; text-align: center;
}
.gear-cand-name {
  font-size: var(--text-body-s); font-weight: 600; color: var(--text-primary);
  width: 150px; flex-shrink: 0; overflow-wrap: anywhere;
}
.gear-cand-track {
  flex: 1; height: 6px; background: rgba(27,23,18,0.06);
  border-radius: 999px; overflow: hidden;
}
.gear-cand-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--primary-dark), var(--primary));
  width: 0%; transition: width 1s cubic-bezier(0.4,0,0.2,1);
}
.gear-cand-pct {
  font-family: var(--font-mono); font-size: var(--text-meta); font-weight: 700;
  color: var(--text-primary); width: 40px; text-align: right; flex-shrink: 0;
}

.instrument-evidence {
  font-size: var(--text-meta); color: var(--text-muted); line-height: 1.6;
  padding: 10px 14px;
  background: rgba(27,23,18,0.03);
  border-radius: var(--radius-sm);
  /* A hairline rule reads as "this is the supporting evidence" without the
     3px gold tab every generated interface wears. */
  border-left: 1px solid rgba(216,163,74,0.45);
}

/* ── Feedback panel ── */
.feedback-panel {
  border: 1px solid rgba(216,163,74,0.3);
  background: rgba(216,163,74,0.05);
  padding: 20px;
  border-radius: var(--radius);
}
.feedback-header { font-size: 1rem; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; }
.feedback-detected { font-size: var(--text-body-s); color: var(--text-muted); margin-bottom: 14px; }
.feedback-buttons { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-confirm {
  background: rgba(34,197,94,0.15); border: 1px solid rgba(34,197,94,0.4);
  color: #86efac; padding: 8px 18px; border-radius: 2px; cursor: pointer;
  font-size: var(--text-body-s); font-weight: 600; transition: background 0.2s;
}
.btn-confirm:hover { background: rgba(34,197,94,0.28); }
.btn-correct {
  background: rgba(239,68,68,0.10); border: 1px solid rgba(239,68,68,0.3);
  color: #fca5a5; padding: 8px 18px; border-radius: 2px; cursor: pointer;
  font-size: var(--text-body-s); font-weight: 600; transition: background 0.2s;
}
.btn-correct:hover { background: rgba(239,68,68,0.22); }

/* Tonality panel */
.tonality-key-row {
  display: flex; align-items: flex-end; gap: 18px; margin-bottom: 16px; flex-wrap: wrap;
}
/* Two co-equal forms of the key: musical ("G minor") and alphanumeric Camelot
   ("6A") — DJs and electronic producers read the Camelot code first. */
.key-form { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.key-form-value { display: flex; align-items: center; gap: 8px; }
.key-form-label {
  font-family: var(--font-mono); font-size: var(--text-label);
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted);
}
.tonality-key-row .conf-tag { margin-left: auto; align-self: center; }
.key-badge {
  padding: 8px 20px; border-radius: var(--radius-md);
  background: var(--primary);
  font-size: 1.4rem; font-weight: 800; color: #fff;
  box-shadow: 0 2px 12px var(--primary-glow);
}
.mode-badge {
  padding: 6px 14px; border-radius: var(--radius-sm);
  background: rgba(27,23,18,0.06);
  border: 1px solid var(--border);
  font-size: var(--text-body-s); font-weight: 600; color: var(--text-secondary);
  text-transform: capitalize;
}
.conf-tag {
  font-size: var(--text-label); color: var(--text-muted);
  font-family: var(--font-mono);
}
.camelot-badge {
  padding: 8px 18px; border-radius: var(--radius-md);
  border: 1.5px solid var(--primary-dark); color: var(--primary-dark);
  background: rgba(184,137,43,0.08);
  font-family: var(--font-mono); font-size: 1.25rem; font-weight: 700;
  letter-spacing: 0.04em; line-height: 1;
}
.key-ambiguous-note {
  margin: 4px 0 12px; padding: 8px 12px;
  border-left: 2px solid var(--primary-dark);
  background: rgba(184,137,43,0.06);
  font-size: var(--text-meta); color: var(--text-secondary); line-height: 1.5;
  max-width: 60ch;
}
.scale-name { font-size: 0.92rem; color: var(--text-secondary); margin-bottom: 12px; }
.notes-label { font-size: var(--text-label); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 8px; }
.notes-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.note-pill {
  padding: 4px 12px; border-radius: 999px;
  background: rgba(245,158,11,0.12);
  border: 1px solid rgba(245,158,11,0.25);
  font-size: var(--text-meta); font-weight: 700; color: var(--accent-light);
  font-family: var(--font-mono);
}
.harmonic-char {
  margin-top: 14px; font-size: var(--text-body-s); color: var(--text-muted);
  font-style: italic; padding: 8px 12px;
  background: rgba(27,23,18,0.03); border-radius: var(--radius-sm);
}

/* Rhythm panel */
.bpm-display {
  display: flex; align-items: baseline; gap: 6px;
  margin-bottom: 14px;
}
.bpm-number {
  font-size: 3.25rem; font-weight: 800; line-height: 1;
  letter-spacing: -0.03em;
  /* A measured value should read as a value. At this size the weight is the
     emphasis; a gradient only costs legibility. */
  color: var(--primary-light);
}
.bpm-unit { font-size: 1rem; font-weight: 600; color: var(--text-muted); }
.rhythm-details { display: flex; flex-direction: column; gap: 8px; }
.rhythm-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: var(--text-body-s);
}
.rhythm-row-label { color: var(--text-muted); }
.rhythm-row-value { font-weight: 600; color: var(--text-primary); font-family: var(--font-mono); }

/* Frequency bands */
.freq-bands { display: flex; flex-direction: column; gap: 12px; }
.freq-band-row { display: flex; align-items: center; gap: 12px; }
.freq-band-label { width: 100px; font-size: var(--text-meta); color: var(--text-muted); flex-shrink: 0; }
.freq-band-track {
  flex: 1; height: 10px;
  background: rgba(27,23,18,0.05);
  border-radius: 999px; overflow: hidden;
}
.freq-band-fill {
  height: 100%; border-radius: 999px;
  width: 0%; transition: width 0.8s cubic-bezier(0.4,0,0.2,1);
}
.freq-band-value { font-size: var(--text-meta); color: var(--text-muted); width: 60px; text-align: right; font-family: var(--font-mono); flex-shrink: 0; }

.freq-sub      { background: linear-gradient(90deg, #B07E2E, var(--primary)); }
.freq-bass     { background: linear-gradient(90deg, var(--primary-dark), var(--primary-light)); }
.freq-low-mid  { background: linear-gradient(90deg, var(--primary-dark), #f59e0b); }
.freq-high-mid { background: linear-gradient(90deg, #f59e0b, #B8892B); }
.freq-presence { background: linear-gradient(90deg, #B8892B, var(--primary-light)); }

.summary-text { font-size: var(--text-body); line-height: 1.75; color: var(--text-secondary); }

/* Raw features */
.raw-features-details {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 20px;
}
.raw-features-summary {
  padding: 16px 24px; cursor: pointer;
  font-size: var(--text-meta); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--text-muted);
  display: flex; align-items: center; gap: 8px;
  list-style: none;
  transition: color var(--transition);
}
.raw-features-summary:hover { color: var(--text-primary); }
.raw-features-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0;
  padding: 8px 16px 16px;
}
.raw-feature-item {
  padding: 10px 8px;
  border-bottom: 1px solid var(--border);
}
.raw-feature-key { font-size: var(--text-label); color: var(--text-muted); font-family: var(--font-mono); margin-bottom: 2px; }
.raw-feature-val { font-size: var(--text-body-s); font-weight: 600; color: var(--text-primary); font-family: var(--font-mono); word-break: break-all; }

/* ═══════════════════════════════ HISTORY ═══════════════════════════════ */
.history-header { margin-bottom: 28px; }
.history-header h2 { margin-bottom: 6px; }
.history-subtitle { font-size: var(--text-body-s); color: var(--text-muted); }
.history-empty, .history-gate {
  text-align: center; padding: 60px 24px;
  background: var(--card);
  border: 1px dashed var(--border-light);
  border-radius: var(--radius-xl);
}
.empty-icon { font-size: 3rem; margin-bottom: 16px; }
.history-empty h3, .history-gate h3 { margin-bottom: 10px; }
.history-empty p,  .history-gate p  { margin-bottom: 20px; max-width: 360px; margin-left: auto; margin-right: auto; }
.history-list { display: flex; flex-direction: column; gap: 12px; }

.history-item {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 18px 20px;
  display: flex; align-items: center; gap: 16px;
  cursor: pointer; transition: all var(--transition);
  flex-wrap: wrap;
}
.history-item:hover {
  border-color: var(--border-light); background: var(--card-hover);
  transform: translateX(2px);
}
.history-icon {
  width: 44px; height: 44px; border-radius: var(--radius-sm);
  background: rgba(216,163,74,0.12);
  color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; flex-shrink: 0;
}
.history-info { flex: 1; min-width: 0; }
.history-filename {
  font-weight: 600; font-size: var(--text-body); color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 4px;
}
.history-meta { font-size: var(--text-meta); color: var(--text-muted); }
.history-primary-instrument {
  font-size: var(--text-body-s); font-weight: 600; color: var(--primary-light);
  text-align: right; flex-shrink: 0;
}
.history-date { font-size: var(--text-meta); color: var(--text-muted); }

/* ═══════════════════════════════ PRICING ═══════════════════════════════ */
.pricing { padding: 120px 0; }
.pricing-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px; margin-bottom: 36px;
  align-items: start;
}
.pricing-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl); padding: 36px 32px;
  position: relative; transition: all 0.25s ease;
}
.pricing-card:hover {
  transform: translateY(-3px);
  border-color: var(--border-mid);
  box-shadow: 0 20px 60px rgba(27,23,18,0.12);
}
.pricing-card-featured {
  background: linear-gradient(160deg,
    rgba(216,163,74,0.10) 0%,
    rgba(15,15,15,1) 60%);
  border-color: rgba(216,163,74,0.35);
  box-shadow: 0 0 0 1px rgba(216,163,74,0.12),
              0 20px 60px rgba(216,163,74,0.1);
}
.pricing-badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  padding: 4px 16px; border-radius: 999px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  font-size: var(--text-label); font-weight: 700; color: #fff; white-space: nowrap;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.pricing-header { margin-bottom: 28px; }
.plan-name { font-size: var(--text-body-s); font-weight: 600; margin-bottom: 16px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.plan-price { margin-bottom: 6px; }
.price-amount { font-size: 2.8rem; font-weight: 800; color: var(--text-primary); letter-spacing: -0.04em; }
.plan-credits { font-size: var(--text-meta); color: var(--text-muted); margin-top: 2px; }
.plan-features {
  list-style: none; margin-bottom: 28px;
  display: flex; flex-direction: column; gap: 12px;
}
.plan-features li {
  font-size: var(--text-body-s); color: var(--text-secondary);
  display: flex; align-items: flex-start; gap: 10px;
  padding-left: 0;
}
.plan-features li::before {
  content: '–';
  color: var(--primary-light);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}
.plan-btn { width: 100%; margin-bottom: 10px; }
.price-per { text-align: center; font-size: var(--text-label); color: var(--text-muted); }
.pricing-note { text-align: center; font-size: var(--text-meta); color: var(--text-muted); }

/* ═══════════════════════════════ FOOTER ════════════════════════════════ */
.footer {
  padding: 60px 0;
  border-top: 1px solid rgba(27,23,18,0.05);
  text-align: center;
}
.footer-inner { max-width: 1140px; margin: 0 auto; padding: 0 28px; }
.footer-logo {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 800; font-size: 1.05rem; color: var(--text-secondary);
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}
.footer-tagline { font-size: var(--text-body-s); color: var(--text-muted); margin-bottom: 8px; }
.footer-copy { font-size: var(--text-meta); color: var(--text-muted); opacity: 0.6; }
.footer-links { font-size: var(--text-meta); color: var(--text-muted); opacity: 0.75; margin-top: 0.5rem; }
.footer-links a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.footer-links a:hover { color: var(--accent); border-bottom-color: currentColor; }

/* ═══════════════════════════════ MODALS ════════════════════════════════ */
.modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 200;
  background: rgba(27,23,18,0.28);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  align-items: center; justify-content: center;
  padding: 20px;
  animation: fadeIn 0.15s ease;
}
.modal-overlay.open { display: flex; }

.modal {
  background: var(--card);
  border: 1px solid rgba(27,23,18,0.09);
  border-radius: var(--radius-xl);
  padding: 40px;
  width: 100%; max-width: 420px;
  position: relative;
  animation: modalPop 0.22s cubic-bezier(0.22,1,0.36,1);
  box-shadow: 0 24px 80px rgba(27,23,18,0.14),
              0 0 0 1px rgba(27,23,18,0.04);
}
@keyframes modalPop {
  from { opacity: 0; transform: scale(0.93) translateY(-12px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.modal-close {
  position: absolute; top: 16px; right: 16px;
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(27,23,18,0.06); border: none;
  color: var(--text-muted); cursor: pointer; font-size: var(--text-meta);
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition);
}
.modal-close:hover { background: rgba(27,23,18,0.1); color: var(--text-primary); }
.modal-header { text-align: center; margin-bottom: 32px; }
.modal-logo { font-size: 2rem; display: block; margin-bottom: 14px; }
.modal-header h2 { font-size: 1.45rem; margin-bottom: 6px; letter-spacing: -0.02em; }
.modal-header p { font-size: var(--text-body-s); color: var(--text-muted); }
.modal-form { display: flex; flex-direction: column; gap: 18px; }
.form-group { display: flex; flex-direction: column; gap: 7px; }
.form-group label {
  font-size: var(--text-meta); font-weight: 600; color: var(--text-secondary);
  display: flex; align-items: center; gap: 6px;
  letter-spacing: 0.02em;
}
.hint { font-weight: 400; color: var(--text-muted); }
.form-group input {
  padding: 12px 15px; border-radius: var(--radius-sm);
  background: rgba(27,23,18,0.04);
  border: 1px solid rgba(27,23,18,0.08);
  color: var(--text-primary); font-family: inherit; font-size: var(--text-body-s);
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
}
.form-group input:focus {
  border-color: rgba(216,163,74,0.6);
  box-shadow: 0 0 0 3px rgba(216,163,74,0.12);
  background: rgba(27,23,18,0.05);
}
.form-group input::placeholder { color: var(--text-muted); }
.form-error {
  padding: 10px 14px; border-radius: var(--radius-sm);
  background: rgba(248,113,113,0.07); border: 1px solid rgba(248,113,113,0.2);
  font-size: var(--text-meta); color: var(--red);
}
.modal-footer-text { text-align: center; font-size: var(--text-meta); color: var(--text-muted); margin-top: 18px; }

/* ═══════════════════════════════ TOAST ═════════════════════════════════ */
.toast {
  position: fixed; bottom: 24px; right: 24px; z-index: 300;
  padding: 13px 20px; border-radius: var(--radius-md);
  background: var(--card);
  border: 1px solid rgba(27,23,18,0.09);
  box-shadow: 0 16px 48px rgba(27,23,18,0.14);
  font-size: var(--text-body-s); font-weight: 500;
  transform: translateY(100px); opacity: 0;
  transition: all 0.28s cubic-bezier(0.22,1,0.36,1);
  pointer-events: none; max-width: 340px;
  backdrop-filter: blur(20px);
}
@media (max-width: 480px) {
  .toast { left: 16px; right: 16px; max-width: none; bottom: 16px; }
}
.toast.show { transform: translateY(0); opacity: 1; }
.toast.toast-success { border-color: rgba(16,185,129,0.4); color: #2f7d55; }
.toast.toast-error   { border-color: rgba(239,68,68,0.4);  color: #b23a2b; }
.toast.toast-info    { border-color: rgba(59,130,246,0.4);  color: #93c5fd; }

/* ── Spinner ──────────────────────────────────────────────────────────── */
.spinner {
  width: 32px; height: 32px; border-radius: 50%;
  border: 3px solid rgba(216,163,74,0.2);
  border-top-color: var(--primary);
  animation: spin 0.8s linear infinite;
  margin: 0 auto 12px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Fade animations ──────────────────────────────────────────────────── */
@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════ RESPONSIVE ════════════════════════════ */
@media (max-width: 768px) {
  .nav-links { display: none; }
  .results-two-col { grid-template-columns: 1fr; }
  .results-title-row { flex-direction: column; align-items: flex-start; }
  .hero { min-height: auto; padding: 100px 20px 80px; }
  .hero-visual { display: none; }
  .pricing-grid { grid-template-columns: 1fr; }
  .features-grid { grid-template-columns: 1fr; }
  .modal {
    padding: 28px 20px;
    max-height: 90dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .history-item { flex-direction: column; align-items: flex-start; }
  .tab-bar {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tab-bar::-webkit-scrollbar { display: none; }
  .tab-btn {
    flex-shrink: 0;
    min-height: 44px;
    padding: 10px 16px;
  }
}

@media (max-width: 480px) {
  .tab-btn { flex: 1; padding: 10px 10px; font-size: var(--text-meta); min-height: 44px; }
  .upload-zone { padding: 40px 16px; }
  .hero-cta { flex-direction: column; align-items: center; }
  .results-actions .btn-sm { font-size: var(--text-label); padding: 6px 10px; }
  .btn { min-height: 44px; }
  .modal { border-radius: var(--radius-lg); }
}

/* ── Skeleton loaders ─────────────────────────────────────────────────── */
@keyframes skeletonShimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.skeleton {
  background: linear-gradient(90deg, var(--surface) 25%, var(--card-hover) 50%, var(--surface) 75%);
  background-size: 800px 100%;
  animation: skeletonShimmer 1.4s ease infinite;
  border-radius: var(--radius-sm);
}
.skeleton-item {
  display: flex; gap: 14px; padding: 16px 0;
  border-bottom: 1px solid var(--border);
}
.skeleton-item:last-child { border-bottom: none; }
.skeleton-avatar { width: 40px; height: 40px; border-radius: var(--radius-sm); flex-shrink: 0; }
.skeleton-body { flex: 1; display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.skeleton-line { height: 12px; }
.skeleton-line-short { width: 40%; }
.skeleton-line-long  { width: 75%; }

/* ── Button loading spinner ───────────────────────────────────────────── */
.btn-loading {
  position: relative; pointer-events: none;
  color: transparent !important;
}
.btn-loading::after {
  content: '';
  position: absolute; inset: 0;
  margin: auto;
  width: 16px; height: 16px;
  border: 2px solid rgba(27,23,18,0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Offline toggle ────────────────────────────────────────────────────── */
.offline-toggle {
  margin-top: 12px;
  text-align: center;
}
.offline-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: var(--text-body-s);
  color: var(--text-secondary);
  user-select: none;
}
.offline-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
  cursor: pointer;
}
.offline-label input:disabled { opacity: 0.5; cursor: not-allowed; }
.offline-text { display: flex; align-items: center; gap: 6px; }
.offline-note { color: var(--accent-light); font-size: var(--text-meta); }

/* ── Offline result badge ─────────────────────────────────────────────── */
.badge-offline {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(245,158,11,0.12);
  border: 1px solid rgba(245,158,11,0.3);
  color: var(--accent-light);
  font-size: var(--text-label);
  padding: 2px 8px;
  border-radius: 4px;
  margin-left: 8px;
  font-weight: 500;
  vertical-align: middle;
}

/* ── Waveform visualizer ──────────────────────────────────────────────── */
.waveform-canvas-wrapper {
  margin-bottom: 16px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: rgba(216,163,74,0.06);
  border: 1px solid rgba(216,163,74,0.2);
}
.waveform-canvas {
  display: block;
  width: 100%;
  height: 80px;
}
.waveform-file-info {
  padding: 6px 12px 8px;
  font-size: var(--text-label);
  color: var(--text-muted);
  font-family: var(--font-mono);
  border-top: 1px solid rgba(27,23,18,0.04);
}

/* ── History header actions & search ─────────────────────────────────── */
.history-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.history-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.history-search-input {
  background: var(--card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: var(--text-body-s);
  padding: 6px 12px;
  width: 200px;
  outline: none;
  transition: border-color 0.2s;
}
.history-search-input:focus { border-color: var(--primary); }
.history-search-input::placeholder { color: var(--text-muted); }

/* ── History pagination ────────────────────────────────────────────── */
.history-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.pagination-info {
  font-size: var(--text-body-s);
  color: var(--text-secondary);
}

/* ── Developer / API Keys tab ──────────────────────────────────────────── */
.dev-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 12px;
}
.dev-subtitle {
  color: var(--text-secondary);
  font-size: var(--text-body-s);
  margin-top: 4px;
}
.dev-subtitle code {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  font-family: var(--font-mono);
  font-size: 0.85em;
  color: var(--primary-light);
}
.dev-empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--text-secondary);
}
.dev-loading {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 0;
  color: var(--text-secondary);
}

.api-keys-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 32px;
}
.api-key-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 14px 18px;
  gap: 12px;
}
.api-key-row.api-key-revoked {
  opacity: 0.5;
}
.key-row-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.key-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.key-label {
  font-weight: 600;
  color: var(--text-primary);
}
.key-prefix {
  font-family: var(--font-mono);
  font-size: var(--text-body-s);
  color: var(--text-secondary);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 8px;
}
.key-meta {
  display: flex;
  gap: 16px;
  font-size: var(--text-meta);
  color: var(--text-muted);
}
.key-badge {
  font-size: var(--text-label);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.key-active  { background: rgba(16,185,129,0.15); color: var(--green); }
.key-revoked { background: rgba(239,68,68,0.12);  color: var(--red); }

.key-usage {
  margin-top: 6px;
}
.key-usage-label {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-label);
  color: var(--text-muted);
  margin-bottom: 4px;
}
.key-usage-bar {
  height: 4px;
  background: rgba(27,23,18,0.08);
  border-radius: 2px;
  overflow: hidden;
}
.key-usage-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.3s ease;
}

.dev-docs { margin-top: 8px; }
.dev-docs h3 {
  font-size: 1rem;
  color: var(--text-secondary);
  margin-bottom: 10px;
}
.code-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 16px;
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  color: var(--text-secondary);
  overflow-x: auto;
  white-space: pre;
  line-height: 1.7;
}

/* New key display in modal */
.key-warning-text {
  color: var(--accent);
  font-size: var(--text-body-s);
}
.new-key-display {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: 2px;
  padding: 12px 14px;
  margin-bottom: 16px;
}
.new-key-code {
  font-family: var(--font-mono);
  font-size: var(--text-body-s);
  color: var(--primary-light);
  word-break: break-all;
  flex: 1;
}
.copy-btn { flex-shrink: 0; }

/* ── Admin tab ─────────────────────────────────────────────────────────── */
.admin-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}
.admin-stat-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 20px;
  text-align: center;
}
.admin-stat-number {
  font-size: 2rem;
  font-weight: 700;
  color: var(--primary-light);
}
.admin-stat-label {
  font-size: var(--text-meta);
  color: var(--text-muted);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.admin-users-section { margin-top: 8px; }
.admin-users-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 10px;
}
.admin-users-header h3 { font-size: 1.1rem; }
.admin-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-secondary);
  padding: 12px 0;
}
.admin-empty { color: var(--text-secondary); padding: 12px 0; }
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-body-s);
}
.admin-table th {
  text-align: left;
  padding: 10px 12px;
  color: var(--text-muted);
  font-weight: 500;
  border-bottom: 1px solid var(--border);
  font-size: var(--text-meta);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.admin-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text-secondary);
}
.admin-table tr:hover td { background: var(--card-hover); }
.admin-actions { display: flex; gap: 6px; }

/* Extra button sizes */
.btn-xs {
  padding: 3px 8px;
  font-size: var(--text-label);
}
.btn-danger {
  background: rgba(239,68,68,0.15);
  color: var(--red);
  border: 1px solid rgba(239,68,68,0.3);
}
.btn-danger:hover {
  background: rgba(239,68,68,0.25);
}

/* ── Settings Modal ────────────────────────────────────────────────────── */
.modal-wide { max-width: 520px; }

.settings-section {
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}
.settings-section:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.settings-section-title {
  font-size: var(--text-body-s);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 14px;
}
.settings-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  font-size: var(--text-body-s);
}
.settings-label { color: var(--text-secondary); }
.settings-value { color: var(--text-primary); font-weight: 500; }
.settings-form { margin-top: 4px; }
.settings-form .btn { width: auto; }

/* ── Form success message ──────────────────────────────────────────────── */
.form-success {
  background: rgba(16,185,129,0.12);
  border: 1px solid rgba(16,185,129,0.3);
  color: var(--green);
  border-radius: 2px;
  padding: 10px 14px;
  font-size: var(--text-body-s);
  line-height: 1.5;
}

.settings-danger-text {
  color: var(--text-secondary);
  font-size: var(--text-body-s);
  margin-bottom: 12px;
  line-height: 1.5;
}

/* ════════════════════════════════ BUY MODAL ═════════════════════════════ */
.modal-wide { max-width: 640px; }
.buy-plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 20px 0;
}
@media (max-width: 560px) {
  .buy-plans { grid-template-columns: 1fr; }
}
.buy-plan {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}
.buy-plan-featured {
  border-color: var(--purple);
  background: rgba(192,142,53,0.07);
}
.buy-plan-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--purple);
  color: #fff;
  font-size: var(--text-label);
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 4px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.buy-plan-name { font-weight: 700; font-size: 1rem; }
.buy-plan-price { font-size: 1.5rem; font-weight: 800; color: var(--text-primary); }
.buy-plan-credits { color: var(--purple-light); font-size: var(--text-body-s); font-weight: 600; }
.buy-plan-note { color: var(--text-muted); font-size: var(--text-meta); margin-bottom: 8px; }
.buy-offline-note {
  text-align: center;
  font-size: var(--text-meta);
  color: var(--text-muted);
  margin-top: 4px;
}
.buy-offline-note a { color: var(--purple-light); }

/* ══════════════════════════ ONBOARDING MODAL ════════════════════════════ */
.modal-onboarding {
  max-width: 480px;
  text-align: center;
  padding: 40px 36px 36px;
}
.onboarding-steps-indicator {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 28px;
}
.onboarding-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--border);
  transition: background 0.2s, transform 0.2s;
}
.onboarding-dot.active {
  background: var(--purple);
  transform: scale(1.2);
}
.onboarding-icon { font-size: 3rem; margin-bottom: 16px; }
.onboarding-title { font-size: 1.4rem; font-weight: 700; margin-bottom: 14px; }
.onboarding-body {
  color: var(--text-secondary);
  font-size: 0.92rem;
  line-height: 1.65;
  margin-bottom: 16px;
}
.onboarding-body strong { color: var(--text-primary); }
.onboarding-code {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  text-align: left;
  line-height: 1.6;
  margin-bottom: 20px;
  white-space: pre-wrap;
}

.audit-action-badge {
  font-size: var(--text-label);
  font-family: var(--font-mono);
  background: rgba(216,163,74,0.12);
  color: var(--primary-light);
  padding: 2px 7px;
  border-radius: 4px;
  white-space: nowrap;
}

/* ── OAuth buttons ──────────────────────────────────────────────────────── */
.oauth-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 8px;
}
.btn-oauth {
  justify-content: center;
  gap: 10px;
  background: rgba(27,23,18,0.05);
  border: 1px solid var(--border-light);
  color: var(--text-primary);
  font-size: var(--text-body-s);
}
.btn-oauth:hover { background: rgba(27,23,18,0.1); color: var(--text-primary); }
.oauth-divider {
  display: flex; align-items: center; gap: 12px;
  color: var(--text-muted); font-size: var(--text-meta); margin: 4px 0;
}
.oauth-divider::before, .oauth-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}

/* ═══════════════════════════ BILLING TOGGLE ════════════════════════════ */
.billing-toggle {
  display: flex;
  justify-content: center;
  gap: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px;
  width: fit-content;
  margin: 0 auto 40px;
}
.billing-tab {
  position: relative;
  padding: 8px 22px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--text-body-s);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
  display: flex;
  align-items: center;
  gap: 8px;
}
.billing-tab.active {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 2px 10px var(--primary-glow);
}
.billing-save-badge {
  font-size: var(--text-label);
  font-weight: 700;
  background: rgba(16,185,129,0.2);
  color: var(--green);
  padding: 1px 6px;
  border-radius: 999px;
  letter-spacing: 0.03em;
}
.billing-tab.active .billing-save-badge {
  background: rgba(27,23,18,0.2);
  color: #fff;
}
.price-period {
  font-size: 1rem;
  font-weight: 400;
  color: var(--text-secondary);
  margin-left: 2px;
}
.price-save {
  background: rgba(16,185,129,0.15);
  color: var(--green);
  font-size: var(--text-label);
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 4px;
}

/* ══════════════════════════ COOKIE CONSENT ══════════════════════════════ */
.cookie-banner {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 500;
  width: min(620px, calc(100vw - 32px));
  background: var(--card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 48px rgba(27,23,18,0.12);
  backdrop-filter: blur(12px);
  padding: 16px 20px;
  animation: cookieSlideUp 0.35s cubic-bezier(0.22,1,0.36,1);
}
@keyframes cookieSlideUp {
  from { opacity: 0; transform: translateX(-50%) translateY(28px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.cookie-content {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.cookie-content p {
  flex: 1;
  font-size: var(--text-body-s);
  color: var(--text-secondary);
  min-width: 200px;
  margin: 0;
}
.cookie-content p a { color: var(--primary-light); text-decoration: underline; }
.cookie-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
#cookie-reject {
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-light);
  background: transparent;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: var(--text-meta);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
}
#cookie-reject:hover { background: rgba(27,23,18,0.06); color: var(--text-primary); }
#cookie-accept {
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  border: none;
  background: var(--primary);
  color: #fff;
  font-family: inherit;
  font-size: var(--text-meta);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  box-shadow: 0 2px 8px var(--primary-glow);
}
#cookie-accept:hover { background: var(--primary-light); }
@media (max-width: 480px) {
  .cookie-content { flex-direction: column; align-items: flex-start; }
  .cookie-actions { width: 100%; }
  #cookie-reject, #cookie-accept { flex: 1; text-align: center; }
}

/* ══════════════════════════ SUBSCRIPTION CARD ═══════════════════════════ */
.subscription-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px 20px;
}
.subscription-free {
  border-color: var(--border);
}
.sub-plan-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 4px;
}
.sub-plan-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.sub-plan-detail {
  font-size: var(--text-meta);
  color: var(--text-muted);
}
.sub-badge {
  font-size: var(--text-label);
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.sub-badge-free {
  background: rgba(100,116,139,0.15);
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.sub-badge-active {
  background: rgba(16,185,129,0.12);
  color: var(--green);
  border: 1px solid rgba(16,185,129,0.3);
}
.sub-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  flex-wrap: wrap;
}

/* ══════════════════════════ PAYMENT TABLE ═══════════════════════════════ */
.payment-table-wrapper { overflow-x: auto; }
.payment-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-body-s);
}
.payment-table th {
  text-align: left;
  padding: 8px 12px;
  color: var(--text-muted);
  font-weight: 600;
  border-bottom: 1px solid var(--border);
  font-size: var(--text-meta);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.payment-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text-secondary);
  white-space: nowrap;
}
.payment-table tr:last-child td { border-bottom: none; }
.payment-table tr:hover td { background: var(--card-hover); }
.payment-status {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-label);
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: capitalize;
}
.payment-status-paid,
.payment-status-succeeded {
  background: rgba(16,185,129,0.12);
  color: var(--green);
}
.payment-status-pending {
  background: rgba(245,158,11,0.12);
  color: var(--accent-light);
}
.payment-status-failed,
.payment-status-refunded {
  background: rgba(239,68,68,0.12);
  color: var(--red);
}

/* ══════════════════════════ UPGRADE MODAL ═══════════════════════════════ */
.upgrade-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 4px;
}
@media (max-width: 480px) {
  .upgrade-compare { grid-template-columns: 1fr; }
}
.upgrade-plan {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  position: relative;
}
.upgrade-plan-free {
  background: var(--surface);
}
.upgrade-plan-paid {
  background: linear-gradient(135deg, rgba(216,163,74,0.1), rgba(245,158,11,0.04));
  border-color: rgba(216,163,74,0.4);
  box-shadow: 0 0 30px rgba(216,163,74,0.1);
}
.upgrade-plan-badge {
  position: absolute;
  top: -11px; left: 50%;
  transform: translateX(-50%);
  padding: 3px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  font-size: var(--text-label);
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}
.upgrade-plan-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.upgrade-plan-current {
  font-size: var(--text-meta);
  color: var(--text-muted);
  margin-bottom: 16px;
}
.upgrade-plan-price {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 16px;
}
.upgrade-plan-price span {
  font-size: var(--text-body-s);
  font-weight: 400;
  color: var(--text-muted);
}
.upgrade-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.upgrade-features li {
  font-size: var(--text-body-s);
  display: flex;
  align-items: center;
  gap: 8px;
}
.upgrade-feat-check {
  color: var(--text-secondary);
}
.upgrade-feat-check::before {
  content: '✓';
  color: var(--green);
  font-weight: 700;
  flex-shrink: 0;
}
.upgrade-feat-cross {
  color: var(--text-muted);
}
.upgrade-feat-cross::before {
  content: '✕';
  color: var(--text-muted);
  flex-shrink: 0;
}

/* ══════════════════════ INVITE BANNER ═══════════════════════════════════ */
.invite-banner {
  background: rgba(216,163,74,0.10);
  border-bottom: 1px solid rgba(216,163,74,0.3);
  padding: 14px 24px;
  position: sticky;
  top: 64px; /* below navbar */
  z-index: 90;
}
.invite-banner-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.invite-banner-icon { font-size: 1.2rem; flex-shrink: 0; }
.invite-banner-inner span:not(.invite-banner-icon) {
  flex: 1;
  font-size: var(--text-body-s);
  color: var(--text-primary);
  min-width: 200px;
}
@media (max-width: 600px) {
  .invite-banner-inner { flex-direction: column; align-items: flex-start; }
}

/* ══════════════════════════ TEAM TAB ════════════════════════════════════ */
.team-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.team-header h2 { margin-bottom: 6px; }
.team-subtitle { font-size: var(--text-body-s); color: var(--text-muted); }

.team-empty {
  text-align: center;
  padding: 60px 24px;
  background: var(--card);
  border: 1px dashed var(--border-light);
  border-radius: var(--radius-xl);
}
.team-empty .empty-icon { font-size: 3rem; margin-bottom: 16px; }
.team-empty h3 { margin-bottom: 10px; }
.team-empty p  { margin-bottom: 24px; }

.org-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 24px;
}
.org-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.org-name {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.org-meta {
  font-size: var(--text-body-s);
  color: var(--text-muted);
}
.org-card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.org-stats {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
}
.org-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  min-width: 100px;
}
.org-stat-number {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--primary-light);
  text-transform: capitalize;
}
.org-stat-label {
  font-size: var(--text-label);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.team-section { margin-top: 8px; }
.team-section-title {
  font-size: var(--text-body-s);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 14px;
}

.members-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-secondary);
  font-size: var(--text-body-s);
  padding: 8px 0;
}

/* Role badges in members table */
.member-role-badge {
  font-size: var(--text-label);
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 999px;
  text-transform: capitalize;
  letter-spacing: 0.03em;
}
.member-role-owner {
  background: rgba(245,158,11,0.15);
  color: var(--accent-light);
  border: 1px solid rgba(245,158,11,0.3);
}
.member-role-admin {
  background: rgba(216,163,74,0.15);
  color: var(--primary-light);
  border: 1px solid rgba(216,163,74,0.3);
}
.member-role-member {
  background: rgba(100,116,139,0.12);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

/* ══════════════════════ SELECT INPUT (shared with form-group) ════════════ */
.input,
.form-group select {
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-family: inherit;
  font-size: var(--text-body-s);
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.input:focus,
.form-group select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(216,163,74,0.15);
}
textarea:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(216,163,74,0.15) !important;
}

/* ══════════════════════ SUPPORT TICKETS ═════════════════════════════════ */
.tickets-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.ticket-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
}
.ticket-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.ticket-subject {
  font-size: var(--text-body-s);
  font-weight: 600;
  color: var(--text-primary);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ticket-item-meta {
  font-size: var(--text-label);
  color: var(--text-muted);
}
.ticket-status-badge {
  font-size: var(--text-label);
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: capitalize;
  letter-spacing: 0.03em;
  flex-shrink: 0;
}
.ticket-status-open {
  background: rgba(245,158,11,0.15);
  color: var(--accent-light);
  border: 1px solid rgba(245,158,11,0.3);
}
.ticket-status-resolved {
  background: rgba(16,185,129,0.12);
  color: var(--green);
  border: 1px solid rgba(16,185,129,0.3);
}
.ticket-status-closed {
  background: rgba(100,116,139,0.12);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

/* ══════════════════════ ADMIN TABLE WRAPPER (shared) ════════════════════ */
.admin-table-wrapper { overflow-x: auto; }

@media (max-width: 600px) {
  .org-card-header { flex-direction: column; }
  .org-stats { gap: 12px; }
  .org-stat { min-width: 80px; padding: 10px 14px; }
}

/* ══════════════════════ NOTIFICATION BELL ═══════════════════════════════ */

/* Icon button for the bell */
.nav-icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(27,23,18,0.06);
  border: 1px solid var(--border-light);
  cursor: pointer;
  font-size: 1.05rem;
  color: var(--text-secondary);
  transition: all var(--transition);
  flex-shrink: 0;
}
.nav-icon-btn:hover {
  background: rgba(27,23,18,0.12);
  color: var(--text-primary);
  transform: scale(1.05);
}

/* Red dot / count badge on the bell */
.notif-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: var(--red);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border: 1.5px solid var(--bg);
  pointer-events: none;
}

/* Wrapper holds bell + dropdown */
.notif-wrapper {
  position: relative;
}

/* Dropdown panel */
.notif-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: 320px;
  background: var(--card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 150;
  animation: fadeDown 0.15s ease;
  overflow: hidden;
}
.notif-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-size: var(--text-body-s);
  font-weight: 600;
  color: var(--text-primary);
}
.notif-panel-header button {
  font-size: var(--text-meta);
  font-weight: 500;
  color: var(--primary-light);
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: color var(--transition);
}
.notif-panel-header button:hover { color: var(--accent-light); }

#notif-list {
  max-height: 360px;
  overflow-y: auto;
  padding: 4px 0;
}

/* Individual notification item */
.notif-item {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  cursor: default;
  transition: background var(--transition);
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: rgba(27,23,18,0.03); }
.notif-item-unread {
  background: rgba(216,163,74,0.06);
}
.notif-item-unread:hover { background: rgba(216,163,74,0.10); }
.notif-item-title {
  font-size: var(--text-body-s);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.notif-item-body {
  font-size: var(--text-meta);
  color: var(--text-secondary);
  margin-bottom: 3px;
  line-height: 1.4;
}
.notif-item-time {
  font-size: var(--text-label);
  color: var(--text-muted);
  font-family: var(--font-mono);
}

@media (max-width: 480px) {
  .notif-panel { width: calc(100vw - 32px); right: -8px; }
}

/* ══════════════════════ 2FA SECTION ═════════════════════════════════════ */

/* Enabled / disabled badge */
.tfa-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.tfa-badge-enabled {
  background: rgba(16,185,129,0.12);
  color: var(--green);
  border: 1px solid rgba(16,185,129,0.3);
}
.tfa-badge-disabled {
  background: rgba(100,116,139,0.12);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

/* QR code image */
.qr-code-img {
  display: block;
  margin: 0 auto;
  max-width: 200px;
  border: 2px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 8px;
  background: #fff;
}

/* Backup codes grid */
.backup-codes-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}
.backup-code {
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  color: var(--primary-light);
  text-align: center;
  letter-spacing: 0.05em;
}

/* ══════════════════════ ACTIVE SESSIONS ═════════════════════════════════ */

.session-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.session-item:last-child { margin-bottom: 0; }
.session-info { flex: 1; min-width: 0; }
.session-ip {
  font-size: var(--text-body-s);
  font-weight: 600;
  color: var(--text-primary);
  font-family: var(--font-mono);
  margin-bottom: 2px;
}
.session-meta {
  font-size: var(--text-label);
  color: var(--text-muted);
  line-height: 1.4;
}
.session-current-badge {
  display: inline-block;
  background: rgba(16,185,129,0.12);
  color: var(--green);
  border: 1px solid rgba(16,185,129,0.3);
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 1px 6px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-left: 4px;
}

/* ══════════════════════ REFERRAL SECTION ════════════════════════════════ */

.referral-code-input {
  font-family: var(--font-mono);
  font-size: var(--text-body-s);
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 8px 12px;
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  color: var(--primary-light);
  outline: none;
  cursor: text;
  flex: 1;
  min-width: 140px;
}
.referral-code-input:focus { border-color: var(--primary); }

.referral-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  min-width: 110px;
}
.referral-stat-number {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--primary-light);
  line-height: 1;
  margin-bottom: 4px;
}
.referral-stat-label {
  font-size: var(--text-label);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ── Genre & Mood ──────────────────────────────────────────────────────── */
.gm-genres {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.genre-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 4px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: var(--text-body-s);
  color: var(--text-secondary);
}
.genre-pill--primary {
  background: rgba(216,163,74,.18);
  border-color: var(--primary);
  color: var(--primary-light);
  font-weight: 700;
}
.genre-conf {
  font-size: var(--text-label);
  color: var(--text-muted);
  background: var(--surface);
  border-radius: 3px;
  padding: 1px 6px;
}
.mood-label {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 12px;
}
.mood-bars { display: flex; flex-direction: column; gap: 8px; }
.mood-bar-row {
  display: grid;
  grid-template-columns: 100px 1fr 32px;
  align-items: center;
  gap: 10px;
}
.mood-bar-label { font-size: var(--text-meta); color: var(--text-muted); }
.mood-bar-track {
  height: 6px;
  background: var(--surface-2);
  border-radius: 3px;
  overflow: hidden;
}
.mood-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width .6s ease;
}
.mood-bar-val { font-size: var(--text-label); color: var(--text-muted); text-align: right; }

/* ── Collections ──────────────────────────────────────────────────────── */
.collections-strip {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.collections-strip-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.collections-strip-title {
  font-size: var(--text-meta);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  font-weight: 700;
}
.collections-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.collection-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: var(--text-meta);
  cursor: pointer;
  transition: all .15s;
}
.collection-chip.active,
.collection-chip:hover {
  background: rgba(216,163,74,.15);
  border-color: var(--primary);
  color: var(--primary-light);
}
.chip-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.chip-count {
  font-size: var(--text-label);
  color: var(--text-muted);
  background: var(--surface-2);
  border-radius: 3px;
  padding: 0 6px;
}
.color-swatches {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.color-swatch {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all .15s;
}
.color-swatch.active {
  border-color: var(--text-primary);
  transform: scale(1.15);
}
.coll-select-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 320px;
  overflow-y: auto;
}
.coll-select-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
  transition: background .12s;
}
.coll-select-item:hover { background: var(--surface-2); }
.coll-select-item span:nth-child(2) { flex: 1; }
.history-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.history-coll-btn {
  font-size: var(--text-label);
  padding: 2px 8px;
  opacity: 0.6;
}
.history-item:hover .history-coll-btn { opacity: 1; }

/* ── History genre/mood pills ─────────────────────────────────────────── */
.history-pills { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 3px; }
.history-genre-pill {
  font-size: var(--text-label);
  padding: 1px 7px;
  border-radius: 3px;
  background: rgba(216,163,74,.15);
  color: var(--primary-light);
  border: 1px solid rgba(216,163,74,.3);
}
.history-mood-pill {
  font-size: var(--text-label);
  padding: 1px 7px;
  border-radius: 3px;
  background: rgba(245,158,11,.12);
  color: #F59E0B;
  border: 1px solid rgba(245,158,11,.25);
}

/* ── Insights Tab ─────────────────────────────────────────────────────── */
.insights-header { margin-bottom: 24px; }
.insights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
.insights-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
}
.insights-card-title {
  font-size: var(--text-body-s);
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 14px;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.insight-bar-row {
  display: grid;
  grid-template-columns: 130px 1fr 28px;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.insight-bar-label { font-size: var(--text-meta); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.insight-bar-track { height: 7px; background: var(--surface-2); border-radius: 4px; overflow: hidden; }
.insight-bar-fill  { height: 100%; border-radius: 4px; transition: width .5s ease; }
.insight-bar-val   { font-size: var(--text-label); color: var(--text-muted); text-align: right; }
.insights-stats-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 4px;
}
.insight-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  min-width: 100px;
}
.insight-stat-num {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--primary-light);
  line-height: 1;
  margin-bottom: 4px;
}
.insight-stat-lbl {
  font-size: var(--text-label);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.chord-root { font-size:2rem; font-weight: 800; color:var(--primary-light); }
.chord-progression { font-size:1.1rem; color:var(--text-secondary); margin:8px 0; font-family:monospace; }
.chord-diatonic { display:flex; gap:6px; flex-wrap:wrap; }
.chord-pill { padding:4px 12px; border-radius:20px; background:var(--surface-2); border:1px solid var(--border); font-size: var(--text-body-s); color:var(--text-primary); }
.chord-tension-row { display:grid; grid-template-columns:80px 1fr 32px; gap:8px; align-items:center; margin-top:10px; }

/* ── Instrument timeline ──────────────────────────────────────────── */
/* One lane per identified instrument; lanes overlap in time by design. */
.tl-lanes { display:flex; flex-direction:column; gap:10px; }
/* Label column fits "Native Instruments FM8" — the gear name is the payload,
   so it must not be the thing that gets ellipsised. */
.tl-lane { display:grid; grid-template-columns:minmax(0,200px) 1fr 38px; align-items:center; gap:10px; }
.tl-lane-head { display:flex; align-items:center; gap:7px; min-width:0; }
.tl-dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; }
/* A grouped lane reads "FM8 / Serum" — let it wrap to two lines rather than
   ellipsise away the second instrument the lane exists to show. */
.tl-name {
  font-size: var(--text-meta); color:var(--text-primary);
  overflow-wrap:anywhere;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
  line-height:1.3;
}
.tl-track {
  position:relative; height:18px; min-width:0;
  background:var(--surface-2); border-radius:4px; overflow:hidden;
}
.tl-block { position:absolute; top:0; height:100%; border-radius:2px; transition:opacity .15s; }
.tl-block:hover { opacity:1 !important; }
.tl-share { font-size: var(--text-label); color:var(--text-muted); font-family:var(--font-mono); text-align:right; }
.tl-axis {
  display:flex; justify-content:space-between;
  font-size: var(--text-label); color:var(--text-muted); font-family:var(--font-mono);
  margin-top:8px; padding-left:210px;
}
.tl-note { font-size: var(--text-label); color:var(--text-muted); margin-top:10px; line-height:1.5; }

/* Narrow screens: a side label column can't hold "Native Instruments FM8"
   without truncating the part that identifies the gear, so stack instead —
   name on its own row, track full width beneath it. */
@media (max-width: 560px) {
  .tl-lane {
    grid-template-columns:1fr auto;
    grid-template-areas:"head share" "track track";
    gap:4px 8px;
  }
  .tl-lane-head { grid-area:head; }
  .tl-share { grid-area:share; }
  .tl-track { grid-area:track; }
  .tl-lanes { gap:14px; }
  .tl-axis { padding-left:0; }
}

/* Collection chip share button */
.collection-chip-wrap {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.chip-share-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--text-meta);
  padding: 2px 4px;
  border-radius: 4px;
  opacity: 0.6;
  transition: opacity 0.15s;
  color: var(--text-secondary);
  line-height: 1;
}
.collection-chip-wrap:hover .chip-share-btn {
  display: inline-block;
}
.chip-share-btn:hover {
  opacity: 1;
  background: var(--bg-tertiary);
}

/* ── Stem Analysis ──────────────────────────────────────────────────────── */
.stem-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}
.stem-card {
  background: var(--surface-1);
  border: 1px solid var(--border-color);
  border-radius: 3px;
  padding: 14px;
}
.stem-label {
  font-size: var(--text-meta);
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
}
.stem-row {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-meta);
  color: var(--text-secondary);
  padding: 3px 0;
  border-bottom: 1px solid var(--border-color);
}
.stem-row:last-child { border-bottom: none; }
.stem-row span:last-child { color: var(--text-primary); font-weight: 500; }
.stem-badge {
  background: var(--surface-2);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: var(--text-meta);
  color: var(--text-primary);
}

/* ── Library Comparison ─────────────────────────────────────────────────── */
.comparison-insights {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.insight-badge {
  background: rgba(124, 58, 237, 0.15);
  border: 1px solid rgba(124, 58, 237, 0.4);
  border-radius: 4px;
  padding: 4px 12px;
  font-size: var(--text-meta);
  color: var(--text-primary);
}
.comparison-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}
.comparison-item {
  background: var(--surface-1);
  border: 1px solid var(--border-color);
  border-radius: 2px;
  padding: 12px;
}
.cmp-label {
  font-size: var(--text-meta);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.cmp-bar-wrap {
  background: var(--surface-2);
  border-radius: 3px;
  height: 6px;
  margin-bottom: 8px;
  overflow: hidden;
}
.cmp-bar {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s ease;
}
.cmp-stats {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--text-meta);
}
.cmp-val { font-weight: 600; font-size: var(--text-body-s); }
.cmp-delta { font-size: var(--text-meta); }
.cmp-pct { margin-left: auto; color: var(--text-muted); font-size: var(--text-label); }
.cmp-footnote {
  margin-top: 12px;
  font-size: var(--text-meta);
  color: var(--text-muted);
  text-align: right;
}

/* ── Genre DNA ─────────────────────────────────────────────────────────────── */

.btn-dna { border-color: var(--accent) !important; color: var(--accent) !important; }
.btn-dna:hover { background: var(--accent) !important; color: #fff !important; }

.dna-intro { font-size: var(--text-body-s); color: var(--text-muted); margin-bottom: 14px; }

.dna-genre-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 8px;
}

.dna-genre-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 14px 8px;
  border: 1.5px solid var(--border);
  border-radius: 3px;
  background: var(--card-bg);
  cursor: pointer;
  transition: all 0.18s;
}
.dna-genre-btn:hover { border-color: var(--accent); background: var(--accent-faint); }
.dna-genre-icon  { font-size: 1.5rem; }
.dna-genre-name  { font-size: var(--text-meta); font-weight: 600; color: var(--text); }
.dna-genre-era   { font-size: var(--text-label); color: var(--text-muted); }

.dna-loading { display: flex; align-items: center; gap: 10px; padding: 24px; color: var(--text-muted); }

/* Switcher */
.dna-switcher {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
}
.dna-switch-btn {
  padding: 5px 12px;
  border-radius: 4px;
  border: 1.5px solid var(--border);
  background: var(--card-bg);
  font-size: var(--text-meta);
  cursor: pointer;
  transition: all 0.15s;
  color: var(--text);
}
.dna-switch-btn:hover { border-color: var(--accent); color: var(--accent); }
.dna-switch-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }

/* Score header */
.dna-header {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  margin-bottom: 22px;
  padding: 18px;
  background: var(--accent-faint, #f5f3ff);
  border-radius: 3px;
  border: 1px solid var(--border);
}
.dna-score-ring {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 80px;
  padding: 10px 14px;
  border: 3px solid var(--score-color, var(--accent));
  border-radius: 3px;
  background: #fff;
}
.dna-score-num  { font-size: 2rem; font-weight: 800; line-height: 1; }
.dna-score-pct  { font-size: var(--text-label); color: var(--text-muted); }
.dna-score-grade{ font-size: 1.1rem; font-weight: 700; margin-top: 2px; color: var(--score-color); }

.dna-header-meta { flex: 1; }
.dna-genre-title { font-size: 1.05rem; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.dna-era-badge   { font-size: var(--text-label); background: var(--border); color: var(--text-muted); padding: 2px 7px; border-radius: 3px; margin-left: 6px; font-weight: 400; }
.dna-genre-desc  { font-size: var(--text-meta); color: var(--text-muted); margin-bottom: 4px; }
.dna-genre-traits{ font-size: var(--text-meta); color: var(--accent); margin-bottom: 5px; }
.dna-ref-note    { font-size: var(--text-label); color: var(--text-muted); }

/* Metrics table */
.dna-metrics-section { margin-bottom: 18px; }
.dna-metrics-header  {
  display: grid;
  grid-template-columns: 160px 1fr 80px 28px;
  gap: 8px;
  padding: 6px 10px;
  font-size: var(--text-label);
  font-weight: 600;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.dna-metric-row {
  display: grid;
  grid-template-columns: 160px 1fr 80px 28px;
  gap: 8px;
  align-items: center;
  padding: 7px 10px;
  border-radius: 2px;
  transition: background 0.12s;
  font-size: var(--text-meta);
}
.dna-metric-row:hover { background: var(--row-alt, #faf9ff); }
.dna-metric-name  { font-weight: 600; color: var(--text); font-size: 0.80rem; }
.dna-metric-val   { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dna-val-yours    { font-weight: 700; color: var(--accent); }
.dna-val-sep      { color: var(--text-muted); font-size: var(--text-label); }
.dna-val-ref      { color: var(--text-muted); font-size: 0.80rem; }
.dna-ref-std      { font-size: var(--text-label); }
.dna-metric-insight{ grid-column: 1 / -1; font-size: 0.76rem; color: var(--text-muted); padding-left: 10px; margin-top: -2px; }

/* Z-score deviation bar */
.dna-zbar-wrap {
  position: relative;
  height: 8px;
  background: var(--border);
  border-radius: 4px;
  overflow: visible;
}
.dna-zbar-center {
  position: absolute;
  left: 50%;
  top: -2px;
  width: 2px;
  height: 12px;
  background: var(--text-muted);
  opacity: 0.5;
}
.dna-zbar-fill {
  position: absolute;
  top: 0;
  height: 8px;
  border-radius: 4px;
  min-width: 4px;
  transition: width 0.4s ease;
}

/* Status icons */
.dna-metric-status { text-align: center; font-weight: 700; font-size: var(--text-body-s); }
.dna-ok   { color: var(--success); }
.dna-warn { color: var(--warning); }
.dna-diff { color: var(--danger); }

/* Insights */
.dna-insights-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 18px;
}
@media (max-width: 600px) { .dna-insights-row { grid-template-columns: 1fr; } }

.dna-insights-title   { font-size: var(--text-meta); font-weight: 700; color: var(--text); margin-bottom: 6px; }
.dna-strength-item    { font-size: 0.80rem; color: var(--success); padding: 3px 0; }
.dna-suggestion-item  { font-size: 0.80rem; color: var(--text-muted); padding: 3px 0; }
.dna-strengths, .dna-suggestions {
  padding: 12px 14px;
  border-radius: 2px;
  background: var(--card-bg);
  border: 1px solid var(--border);
}

/* Closest tracks */
.dna-tracks-section { margin-top: 4px; }
.dna-tracks-title   { font-size: var(--text-meta); font-weight: 700; color: var(--text); margin-bottom: 8px; }
.dna-track-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 2px;
  font-size: var(--text-meta);
  border-bottom: 1px solid var(--border);
}
.dna-track-row:last-child { border-bottom: none; }
.dna-track-rank   { color: var(--text-muted); min-width: 24px; font-size: var(--text-label); }
.dna-track-title  { font-weight: 600; color: var(--text); flex: 1; }
.dna-track-artist { color: var(--text-muted); font-size: var(--text-meta); min-width: 100px; }
.dna-track-year   { color: var(--text-muted); font-size: var(--text-label); min-width: 36px; }
.dna-track-sim    { font-weight: 700; min-width: 40px; text-align: right; }

/* Vocal analysis (isolated stem) */
.vocal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}
.vocal-stat {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 2px;
}
.vocal-stat-label { font-size: var(--text-label); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin-bottom: 4px; }
.vocal-stat-value { font-size: var(--text-body-s); font-weight: 600; color: var(--text); }
.vocal-stat-dim { color: var(--text-muted); font-weight: 400; }
.vocal-instrumental { color: var(--text-muted); font-size: var(--text-body-s); }

/* Separated stems download */
.stems-note { color: var(--text-muted); font-size: var(--text-meta); margin-bottom: 10px; max-width: 62ch; }
.stems-row { display: flex; flex-wrap: wrap; gap: 10px; }
.stem-btn { min-width: 130px; justify-content: center; flex-direction: column; gap: 3px; padding-top: 8px; padding-bottom: 8px; }
.stem-excerpt-tag {
  font-family: var(--font-mono); font-size: var(--text-label);
  letter-spacing: 0.04em; color: var(--text-muted); text-transform: none;
}
.stems-scope-badge {
  font-family: var(--font-mono); font-size: var(--text-label);
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--primary-dark);
  border: 1px solid var(--primary-dark); border-radius: var(--radius-sm);
  padding: 1px 6px; margin-left: 8px; vertical-align: middle; font-weight: 600;
}

/* ═══════════════════════════ COMPARE A/B ═══════════════════════════════ */
.compare-picker-grid {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px;
  align-items: end; margin-bottom: 18px;
}
.compare-picker-label {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--text-meta); font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-secondary);
  margin-bottom: 8px;
}
.compare-vs {
  font-family: var(--font-display); font-weight: 700;
  color: var(--text-muted); padding-bottom: 12px; font-size: var(--text-body-s);
}
.compare-side-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  font-size: var(--text-label); font-weight: 800;
}
.compare-side-a { background: rgba(216,163,74,0.18); color: var(--primary-light); border: 1px solid rgba(216,163,74,0.4); }
.compare-side-b { background: rgba(27,23,18,0.07); color: var(--text-secondary); border: 1px solid rgba(27,23,18,0.18); }
.compare-picker-actions { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.compare-free-note { font-size: var(--text-meta); color: var(--text-muted); }

.compare-heads {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-bottom: 20px;
}
.compare-track { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.compare-track-name {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--text-body); color: var(--text-primary);
  overflow-wrap: anywhere;
}

.compare-insights { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.compare-insights li {
  position: relative; padding-left: 20px;
  font-size: 0.92rem; color: var(--text-secondary); line-height: 1.6;
}
.compare-insights li::before {
  content: ''; position: absolute; left: 0; top: 9px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--primary);
}

.compare-table-wrap { overflow-x: auto; }
.compare-table { width: 100%; border-collapse: collapse; font-size: var(--text-body-s); }
.compare-table th, .compare-table td {
  text-align: left; padding: 9px 12px;
  border-bottom: 1px solid var(--border);
}
.compare-table th {
  font-size: var(--text-label); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted); font-weight: 700;
}
.compare-table td:first-child { color: var(--text-muted); white-space: nowrap; }
.compare-table td { color: var(--text-primary); }
.compare-th-a { color: var(--primary) !important; }
.compare-span { color: var(--text-secondary) !important; font-style: italic; }
.compare-match { text-align: right; }
.compare-match-yes { color: var(--green); font-size: var(--text-meta); font-weight: 600; }
.compare-match-no  { color: var(--text-muted); font-size: var(--text-meta); }

.compare-gear-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 720px) { .compare-gear-grid { grid-template-columns: 1fr; } }
.compare-gear-head {
  font-size: var(--text-label); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted); font-weight: 700; margin-bottom: 10px;
  padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.compare-gear-head-shared { color: var(--primary); border-bottom-color: rgba(216,163,74,0.3); }
.compare-gear-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 12px; border-radius: 3px; margin-bottom: 8px;
  background: rgba(27,23,18,0.03); border: 1px solid var(--border);
  font-size: var(--text-body-s);
}
.compare-gear-shared { background: rgba(216,163,74,0.08); border-color: rgba(216,163,74,0.28); }
.compare-gear-model { color: var(--text-primary); font-weight: 600; overflow-wrap: anywhere; }
.compare-gear-conf { color: var(--text-muted); font-size: var(--text-label); flex-shrink: 0; }
.compare-gear-none { color: var(--text-muted); font-size: var(--text-body-s); }

.compare-bars { display: flex; flex-direction: column; gap: 14px; }
.compare-bar-row { display: grid; grid-template-columns: 170px 1fr; gap: 14px; align-items: center; }
@media (max-width: 600px) { .compare-bar-row { grid-template-columns: 1fr; gap: 6px; } }
.compare-bar-label { font-size: var(--text-meta); color: var(--text-secondary); }
.compare-bar-pair { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.compare-bar-line { display: flex; align-items: center; gap: 8px; }
.compare-bar {
  display: inline-block; height: 9px; border-radius: 5px; min-width: 2px;
  transition: width .4s ease;
}
.compare-bar-a { background: linear-gradient(90deg, var(--primary-dark), var(--primary-light)); }
.compare-bar-b { background: rgba(27,23,18,0.22); }
.compare-bar-val { font-size: var(--text-label); color: var(--text-muted); font-family: var(--font-mono); white-space: nowrap; }
.compare-bar-legend {
  display: flex; gap: 20px; margin-top: 14px;
  font-size: var(--text-meta); color: var(--text-muted);
}
.compare-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  margin-right: 6px; vertical-align: -1px;
}
.compare-dot-a { background: var(--primary); }
.compare-dot-b { background: rgba(27,23,18,0.35); }

@media (max-width: 640px) {
  .compare-picker-grid { grid-template-columns: 1fr; }
  .compare-vs { display: none; }
}
/* Fixed navbar must not swallow the compare header on scrollIntoView. */
#compare-result { scroll-margin-top: 84px; }

/* ── Feature tour ─────────────────────────────────────────────────────── */
.tour-overlay {
  position: fixed; inset: 0; z-index: 3000;
  opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
}
.tour-overlay.visible { opacity: 1; pointer-events: auto; }
.tour-spotlight {
  position: fixed; border-radius: 3px;
  box-shadow: 0 0 0 9999px rgba(6, 6, 8, 0.78), 0 0 0 1.5px var(--primary),
              0 0 24px var(--primary-glow);
  transition: top 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              left 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
.tour-card {
  position: fixed; width: 340px; max-width: calc(100vw - 32px);
  background: var(--card); border: 1px solid var(--border);
  border-top: 2px solid var(--primary);
  border-radius: var(--radius-md); padding: 18px 20px 16px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
  transition: top 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              left 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.tour-card-top {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px;
}
.tour-progress {
  font-family: var(--font-mono, monospace); font-size: var(--text-label);
  color: var(--primary); letter-spacing: 0.06em; text-transform: uppercase;
}
.tour-skip {
  background: none; border: none; color: var(--text-muted);
  font-size: var(--text-meta); cursor: pointer; padding: 2px 0;
}
.tour-skip:hover { color: var(--text-secondary); }
.tour-title {
  font-family: var(--font-display); font-size: 1.05rem;
  font-weight: 600; letter-spacing: -0.01em; color: var(--text-primary);
  margin-bottom: 6px;
}
.tour-body { font-size: 0.86rem; line-height: 1.55; color: var(--text-secondary); margin-bottom: 14px; }
.tour-nav { display: flex; justify-content: space-between; align-items: center; }
.tour-dots { display: flex; gap: 6px; }
.tour-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.16); transition: background 0.2s;
}
.tour-dot.active { background: var(--primary); }
.tour-btns { display: flex; gap: 8px; }

@media (max-width: 640px) {
  .tour-card {
    top: auto !important; left: 16px !important; right: 16px;
    bottom: 16px; width: auto;
  }
}

/* ── Production Blueprint ─────────────────────────────────────────────── */
.blueprint-block {
  background: linear-gradient(135deg, rgba(216, 163, 74, 0.07), rgba(216, 163, 74, 0.02)), var(--card);
  border: 1px solid rgba(216, 163, 74, 0.28);
  border-radius: var(--radius-md);
  padding: 22px 24px;
}
.blueprint-label {
  font-family: var(--font-mono, monospace); font-size: var(--text-label); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--primary);
  margin-bottom: 10px;
}
.blueprint-text {
  font-size: 1.02rem; line-height: 1.65; color: var(--text-primary);
  margin-bottom: 16px;
  /* Full-width prose ran ~155 characters a line on a 1440px screen. */
  max-width: 68ch;
}
.blueprint-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
.blueprint-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border); border-radius: 3px;
  padding: 12px 14px;
}
.blueprint-card-label {
  font-size: var(--text-label); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 4px;
}
.blueprint-card-value {
  font-family: var(--font-display); font-size: 0.98rem; font-weight: 600;
  color: var(--primary-light); letter-spacing: -0.01em;
}

/* ── Results "More" menu ──────────────────────────────────────────────── */
.results-more { position: relative; display: inline-block; }
.results-more-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 100;
  min-width: 170px; background: var(--card);
  border: 1px solid var(--border); border-radius: 3px;
  padding: 6px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}
.results-more-menu button {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: none; border: none; border-radius: 2px;
  padding: 8px 10px; font-size: 0.84rem; color: var(--text-secondary);
  cursor: pointer; text-align: left;
}
.results-more-menu button:hover { background: rgba(255, 255, 255, 0.05); color: var(--text-primary); }

/* ── Section selection ────────────────────────────────────────────────── */
.section-select { margin-top: 10px; text-align: left; }
.section-select-toggle {
  background: none; border: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--text-meta); color: var(--text-muted); padding: 4px 0;
}
.section-select-toggle:hover { color: var(--primary-light); }
.section-select-fields {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 8px; padding: 12px 14px;
  background: var(--card); border: 1px solid var(--border); border-radius: 3px;
  font-size: var(--text-body-s); color: var(--text-secondary);
}
.section-select-fields input {
  width: 64px; padding: 5px 8px; text-align: center;
  background: rgba(255, 255, 255, 0.04); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: 2px;
  font-family: var(--font-mono, monospace); font-size: var(--text-body-s); outline: none;
}
.section-select-fields input:focus { border-color: var(--primary); }
.section-select-hint { flex-basis: 100%; font-size: var(--text-label); color: var(--text-muted); }

/* Confidence tiers — same semantics as the badges, so the bar and the chip agree */
.confidence-bar-fill.conf-high   { background: linear-gradient(90deg, #2f7d55, var(--green)); }
.confidence-bar-fill.conf-medium { background: linear-gradient(90deg, var(--primary-dark), var(--primary)); }
.confidence-bar-fill.conf-low    { background: linear-gradient(90deg, #57534e, #8a8378); }

/* Tension reads as a musical quantity, not a fault */
.mood-bar-fill.mood-bar-tension { background: linear-gradient(90deg, var(--primary-dark), var(--primary-light)); }

.chord-quality {
  font-size: var(--text-body-s); color: var(--text-secondary); margin-bottom: 6px;
}

/* ── Reproduction guide — "How We'd Rebuild This" ─────────────────────────
   The section had a layout problem worth naming: it threw away information the
   pipeline already produces. Every move carries a confidence the analysis
   measured and, usually, the number the move rests on — and both were flattened
   into one weight of prose, so the single strongest finding in the whole report
   read exactly like a footnote about band balance.

   So the move is a figure, not a paragraph: the measurement on the left in the
   data face, the instruction on the right. Confidence sets the weight of the
   number rather than hiding in a chip. Scanning the left column alone tells a
   producer what this track is made of. */

.repro-frame {
  font-size: var(--text-body-s);
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 66ch;
  margin: -6px 0 4px;
}

.repro-tally {
  font-family: var(--font-mono, monospace);
  font-size: var(--text-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 26px;
}

.repro-block { margin-bottom: 26px; }
.repro-block:last-child { margin-bottom: 0; }

/* Not another tracked uppercase eyebrow — the block title above the section is
   already that, and five more in a column is grammar rather than hierarchy.
   These are subheads: same family as the body, heavier, quiet rule beneath. */
.repro-block-title {
  font-size: var(--text-body-s);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0 0 4px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--border);
}

.repro-move {
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: 20px;
  align-items: start;
  padding: 16px 0 15px;
  border-bottom: 1px solid var(--border);
}
.repro-move:last-child { border-bottom: none; padding-bottom: 2px; }

/* The measurement. Right-aligned so the numbers form a column the eye can run
   down, in the mono face the rest of the product already uses for data. */
.repro-metric {
  text-align: right;
  padding-top: 1px;
  min-width: 0;
}
.repro-metric-value {
  display: block;
  font-family: var(--font-mono, monospace);
  font-size: 1.32rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--primary-dark);
  overflow-wrap: anywhere;
}
.repro-metric-unit {
  font-size: 0.72em;
  font-weight: 500;
  margin-left: 3px;
  color: var(--text-muted);
}
.repro-metric-caption {
  display: block;
  font-size: var(--text-label);
  line-height: 1.35;
  color: var(--text-muted);
  margin-top: 5px;
}

.repro-move-title {
  font-size: var(--text-body);
  font-weight: 650;
  line-height: 1.35;
  color: var(--text-primary);
  margin: 0 0 5px;
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex-wrap: wrap;
}

.repro-move-text {
  font-size: var(--text-body-s);
  line-height: 1.62;
  color: var(--text-primary);
  margin: 0;
  max-width: 62ch;
}

/* The audit trail: where the number came from, in a producer's words. Quiet
   enough to skip, present enough that no sentence here is unaccountable. */
.repro-move-evidence {
  font-family: var(--font-mono, monospace);
  font-size: var(--text-label);
  line-height: 1.5;
  color: var(--text-muted);
  margin: 7px 0 0;
}

/* Confidence, stated and never rounded up. It changes the weight of the number,
   not just a chip in the corner — a tentative call must not read as a firm one
   from across a room, which is the entire reason the tier exists. */
.repro-conf {
  font-family: var(--font-mono, monospace);
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

.repro-move-strong .repro-metric-value { color: var(--primary); font-weight: 700; }
.repro-move-strong .repro-conf { color: var(--green); }
.repro-move-strong .repro-move-title { font-weight: 700; }

.repro-move-tentative .repro-metric-value { color: var(--text-secondary); font-weight: 500; }
.repro-move-tentative .repro-move-title { font-weight: 600; color: var(--text-secondary); }
.repro-move-tentative .repro-move-text { color: var(--text-secondary); }

@media (max-width: 720px) {
  /* The two-column figure stops earning its keep once the prose column is
     narrower than the measurement it sits beside. The number goes above the
     instruction and keeps its emphasis, left-aligned with everything else. */
  .repro-move {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .repro-metric { text-align: left; }
  .repro-metric-empty { display: none; }
  .repro-metric-value { display: inline; font-size: 1.18rem; }
  /* Inline beside the value, not indented under it: at this width the caption
     wraps to its own line anyway, and an 8px indent under a left-aligned number
     reads as a mistake. */
  .repro-metric-caption { display: inline; margin: 0 0 0 7px; }
  .repro-move-text { max-width: none; }
}