@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

:root {
  --bg:          #020209;
  --surface:     #080818;
  --surface2:    #0d0d24;
  --accent:      #00d4ff;
  --accent2:     #7b2fff;
  --accent-glow: rgba(0,212,255,0.2);
  --purple-glow: rgba(123,47,255,0.2);
  --text:        #e8f4ff;
  --text-muted:  #6b7a99;
  --success:     #00ffb3;
  --error:       #ff4466;
  --border:      rgba(0,212,255,0.08);
  --border2:     rgba(0,212,255,0.18);
  --radius:      14px;
  --radius-sm:   9px;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.6;
  overflow-x: hidden;
}

/* ── Starfield ── */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  background: transparent;
  box-shadow:
    /* Row 0-100 */
    18px 45px rgba(255,255,255,0.9), 67px 23px rgba(255,255,255,0.7),
    134px 78px rgba(255,255,255,0.5), 223px 12px rgba(255,255,255,0.8),
    356px 56px rgba(255,255,255,0.6), 445px 34px rgba(255,255,255,0.9),
    512px 89px rgba(255,255,255,0.4), 678px 15px rgba(255,255,255,0.7),
    745px 67px rgba(255,255,255,0.8), 867px 43px rgba(255,255,255,0.5),
    934px 91px rgba(255,255,255,0.9), 1045px 28px rgba(255,255,255,0.6),
    1123px 74px rgba(255,255,255,0.7), 1256px 51px rgba(255,255,255,0.5),
    1389px 18px rgba(255,255,255,0.8), 1467px 84px rgba(255,255,255,0.4),
    1534px 37px rgba(255,255,255,0.9), 1678px 62px rgba(255,255,255,0.6),
    1789px 9px  rgba(255,255,255,0.7), 1856px 49px rgba(255,255,255,0.5),
    /* Row 100-250 */
    45px 134px rgba(200,240,255,0.6),  112px 167px rgba(255,255,255,0.8),
    234px 189px rgba(255,255,255,0.5), 323px 145px rgba(200,240,255,0.7),
    456px 223px rgba(255,255,255,0.9), 567px 178px rgba(255,255,255,0.4),
    689px 134px rgba(200,240,255,0.8), 756px 212px rgba(255,255,255,0.6),
    878px 156px rgba(255,255,255,0.5), 945px 198px rgba(200,240,255,0.9),
    1067px 167px rgba(255,255,255,0.7),1178px 134px rgba(255,255,255,0.5),
    1289px 223px rgba(200,240,255,0.6),1378px 189px rgba(255,255,255,0.8),
    1456px 145px rgba(255,255,255,0.4),1567px 212px rgba(200,240,255,0.7),
    1678px 167px rgba(255,255,255,0.9),1789px 134px rgba(255,255,255,0.5),
    1867px 198px rgba(200,240,255,0.6),1923px 156px rgba(255,255,255,0.8),
    /* Row 250-450 */
    23px 278px rgba(255,255,255,0.5),  89px 345px rgba(255,255,255,0.8),
    167px 312px rgba(200,240,255,0.7), 245px 389px rgba(255,255,255,0.4),
    378px 334px rgba(255,255,255,0.9), 467px 412px rgba(200,240,255,0.6),
    534px 356px rgba(255,255,255,0.5), 623px 423px rgba(255,255,255,0.8),
    712px 378px rgba(200,240,255,0.7), 834px 312px rgba(255,255,255,0.5),
    923px 445px rgba(255,255,255,0.9), 1034px 367px rgba(200,240,255,0.6),
    1145px 412px rgba(255,255,255,0.4),1256px 334px rgba(255,255,255,0.8),
    1367px 389px rgba(200,240,255,0.7),1445px 312px rgba(255,255,255,0.5),
    1578px 445px rgba(255,255,255,0.9),1689px 378px rgba(200,240,255,0.6),
    1756px 423px rgba(255,255,255,0.4),1867px 356px rgba(255,255,255,0.8),
    /* Row 450-650 */
    56px 512px rgba(255,255,255,0.6),  134px 578px rgba(200,240,255,0.8),
    256px 534px rgba(255,255,255,0.5), 345px 612px rgba(255,255,255,0.7),
    478px 556px rgba(200,240,255,0.9), 567px 623px rgba(255,255,255,0.4),
    645px 589px rgba(255,255,255,0.6), 734px 512px rgba(200,240,255,0.8),
    856px 645px rgba(255,255,255,0.5), 967px 578px rgba(255,255,255,0.7),
    1089px 534px rgba(200,240,255,0.9),1178px 612px rgba(255,255,255,0.4),
    1289px 589px rgba(255,255,255,0.6),1378px 512px rgba(200,240,255,0.8),
    1467px 645px rgba(255,255,255,0.5),1589px 578px rgba(255,255,255,0.7),
    1678px 534px rgba(200,240,255,0.9),1756px 612px rgba(255,255,255,0.4),
    1823px 589px rgba(255,255,255,0.6),1912px 645px rgba(200,240,255,0.8),
    /* Row 650-900 */
    78px 712px rgba(255,255,255,0.7),  167px 789px rgba(200,240,255,0.5),
    289px 745px rgba(255,255,255,0.8), 378px 823px rgba(255,255,255,0.4),
    512px 767px rgba(200,240,255,0.6), 623px 856px rgba(255,255,255,0.9),
    734px 712px rgba(255,255,255,0.5), 845px 789px rgba(200,240,255,0.7),
    956px 845px rgba(255,255,255,0.4), 1067px 723px rgba(255,255,255,0.8),
    1189px 878px rgba(200,240,255,0.6),1278px 756px rgba(255,255,255,0.5),
    1389px 834px rgba(255,255,255,0.7),1467px 712px rgba(200,240,255,0.9),
    1578px 789px rgba(255,255,255,0.4),1689px 867px rgba(255,255,255,0.6),
    1778px 723px rgba(200,240,255,0.8),1856px 834px rgba(255,255,255,0.5),
    1934px 767px rgba(255,255,255,0.7),89px 912px rgba(200,240,255,0.4),
    /* Bright accent stars — slightly larger glow */
    312px 234px 1px rgba(0,212,255,0.6), 789px 456px 1px rgba(0,212,255,0.5),
    1234px 678px 1px rgba(0,212,255,0.6),1678px 312px 1px rgba(123,47,255,0.5),
    456px 789px 1px rgba(0,212,255,0.4), 923px 123px 1px rgba(123,47,255,0.6),
    1456px 567px 1px rgba(0,212,255,0.5);
  pointer-events: none;
  z-index: 0;
  animation: starDrift 80s linear infinite;
}

@keyframes starDrift {
  from { transform: translateY(0); }
  to   { transform: translateY(-300px); }
}

/* ── Scanline overlay ── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0,0,0,0.08) 3px,
    rgba(0,0,0,0.08) 4px
  );
  pointer-events: none;
  z-index: 9998;
}

/* ── Ambient glow ── */
.ambient {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 45% at 15% -5%, rgba(0,212,255,0.07) 0%, transparent 60%),
    radial-gradient(ellipse 50% 35% at 90% 110%, rgba(123,47,255,0.07) 0%, transparent 55%);
  pointer-events: none;
  z-index: 0;
}

/* ── Header ── */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(2,2,9,0.82);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(0,212,255,0.15);
  box-shadow: 0 1px 40px rgba(0,212,255,0.06);
}

.container { max-width: 880px; margin: 0 auto; padding: 0 24px; }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 62px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--accent);
  text-decoration: none;
  letter-spacing: 0.05em;
  text-shadow: 0 0 20px rgba(0,212,255,0.5), 0 0 40px rgba(0,212,255,0.2);
}

.logo svg { flex-shrink: 0; }

/* ── LIVE badge ── */
.live-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #ff3355;
  padding: 4px 10px;
  border: 1px solid rgba(255,51,85,0.35);
  border-radius: 4px;
  background: rgba(255,51,85,0.06);
}

.live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff3355;
  box-shadow: 0 0 6px #ff3355;
  animation: livePulse 1.4s ease-in-out infinite;
}

@keyframes livePulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 6px #ff3355; }
  50%       { opacity: 0.4; box-shadow: 0 0 2px #ff3355; }
}

/* ── Main ── */
.main {
  position: relative;
  z-index: 1;
  padding: 72px 0 120px;
}

/* ── Hero ── */
.hero { text-align: center; margin-bottom: 52px; }

.hero h1 {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(1.9rem, 4.5vw, 3rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: rgba(232,244,255,0.88);
  margin-bottom: 20px;
  animation: typewriterReveal 1.6s cubic-bezier(0.23, 1, 0.32, 1) 0.3s both;
}

@keyframes typewriterReveal {
  from { clip-path: inset(0 100% 0 0); opacity: 0.5; }
  to   { clip-path: inset(0 0% 0 0);   opacity: 1; }
}

.gradient-text {
  background: linear-gradient(90deg, var(--accent) 0%, #4af9ff 40%, var(--accent2) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
  text-shadow: none;
  filter: drop-shadow(0 0 18px rgba(0,212,255,0.45));
}

.hero-sub {
  font-size: 1rem;
  color: var(--text-muted);
  max-width: 560px;
  margin: 0 auto;
  font-weight: 400;
  line-height: 1.75;
  animation: fadeUp 1s ease 1.2s both;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Glass card ── */
.glass-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  position: relative;
  overflow: hidden;
  animation: fadeUp 0.8s ease 1.4s both;
}

.glass-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(0,212,255,0.35) 50%, transparent 100%);
}

/* ── Input card ── */
.input-card { margin-top: 48px; margin-bottom: 16px; }

.source-toggle {
  display: flex;
  gap: 2px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 3px;
  width: fit-content;
  margin-bottom: 24px;
}

.source-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 16px;
  background: transparent;
  border: none;
  border-radius: 7px;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 500;
  font-family: 'Orbitron', sans-serif;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all 0.2s ease;
}

.source-btn:hover { color: var(--text); }

.source-btn.active {
  background: rgba(0,212,255,0.1);
  color: var(--accent);
  border: 1px solid rgba(0,212,255,0.25);
  box-shadow: 0 0 12px rgba(0,212,255,0.15);
}

/* ── URL input ── */
.url-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.url-input-wrap svg {
  position: absolute;
  left: 14px;
  pointer-events: none;
}

input[type="url"] {
  width: 100%;
  padding: 13px 16px 13px 44px;
  background: var(--surface2);
  border: 1px solid rgba(0,212,255,0.15);
  border-radius: var(--radius-sm);
  color: var(--accent);
  font-size: 0.9rem;
  font-family: 'Courier New', 'Monaco', monospace;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  caret-color: var(--accent);
}

input[type="url"]::placeholder { color: rgba(0,212,255,0.25); }

input[type="url"]:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(0,212,255,0.2), 0 0 24px rgba(0,212,255,0.12);
}

/* ── Drop zone ── */
.dropzone {
  border: 1px dashed rgba(0,212,255,0.2);
  border-radius: var(--radius-sm);
  padding: 40px 24px;
  text-align: center;
  cursor: pointer;
  transition: all 0.25s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.dropzone:hover, .dropzone.dragover {
  border-color: var(--accent);
  background: rgba(0,212,255,0.04);
  box-shadow: inset 0 0 24px rgba(0,212,255,0.05);
}

.dropzone p { font-size: 0.9rem; color: var(--text-muted); }
.dropzone-hint { font-size: 0.78rem; color: rgba(107,122,153,0.6); letter-spacing: 0.03em; }
.browse-link { color: var(--accent); cursor: pointer; text-decoration: none; border-bottom: 1px solid rgba(0,212,255,0.35); }

.file-selected {
  margin-top: 12px;
  font-size: 0.83rem;
  color: var(--success);
  padding: 10px 14px;
  background: rgba(0,255,179,0.05);
  border: 1px solid rgba(0,255,179,0.2);
  border-radius: var(--radius-sm);
  font-family: monospace;
}

/* ── Output badges ── */
.output-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.output-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid rgba(0,212,255,0.4);
  border-radius: 999px;
  background: rgba(0,212,255,0.06);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: #00d4ff;
  white-space: nowrap;
}

.output-badge::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #00d4ff;
  opacity: 0.7;
  flex-shrink: 0;
}

/* ── Input actions ── */
.input-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 24px;
}

.input-actions-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
}

.processing-note {
  font-size: 0.72rem;
  color: #6b7a99;
  margin: 8px 0 0 0;
}

/* ── Buttons ── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 32px;
  background: linear-gradient(135deg, #00d4ff 0%, #00aacc 100%);
  color: #020209;
  font-size: 0.85rem;
  font-weight: 700;
  font-family: 'Orbitron', sans-serif;
  letter-spacing: 0.06em;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.25s ease;
  white-space: nowrap;
  box-shadow: 0 0 20px rgba(0,212,255,0.3), 0 4px 15px rgba(0,0,0,0.4);
  text-transform: uppercase;
}

.btn-primary:hover {
  box-shadow: 0 0 35px rgba(0,212,255,0.55), 0 0 70px rgba(0,212,255,0.2), 0 4px 20px rgba(0,0,0,0.4);
  transform: translateY(-1px);
  background: linear-gradient(135deg, #1adbff 0%, #00c4ee 100%);
}

.btn-primary:active { transform: translateY(0); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 12px 28px;
  background: transparent;
  color: var(--accent);
  font-size: 0.82rem;
  font-weight: 600;
  font-family: 'Orbitron', sans-serif;
  letter-spacing: 0.05em;
  border: 1px solid rgba(0,212,255,0.3);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.25s ease;
  text-transform: uppercase;
}

.btn-ghost:hover {
  border-color: var(--accent);
  box-shadow: 0 0 20px rgba(0,212,255,0.2), inset 0 0 16px rgba(0,212,255,0.05);
  background: rgba(0,212,255,0.05);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 18px;
  background: var(--surface2);
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 600;
  font-family: 'Orbitron', sans-serif;
  letter-spacing: 0.05em;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s ease;
  text-transform: uppercase;
}

.btn-secondary:hover {
  color: var(--text);
  border-color: var(--border2);
  box-shadow: 0 0 12px rgba(0,212,255,0.1);
}

/* ── Progress card ── */
.progress-card { padding: 36px 28px; }

/* ── Stepper ── */
.stepper {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 32px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.stepper::-webkit-scrollbar { display: none; }

.step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.step-circle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(0,212,255,0.2);
  background: var(--surface2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
  transition: all 0.35s ease;
}

.step-label {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  white-space: nowrap;
  transition: color 0.3s;
  text-transform: uppercase;
}

.step-line {
  flex: 1;
  height: 1px;
  background: rgba(0,212,255,0.1);
  margin: 0 4px;
  margin-bottom: 24px;
  min-width: 24px;
  overflow: hidden;
}

.step-line-fill {
  height: 100%;
  width: 0%;
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent);
  transition: width 0.5s ease;
}

/* Active step */
.step-item.active .step-circle {
  border-color: var(--accent);
  background: rgba(0,212,255,0.08);
  color: var(--accent);
  animation: stepPulse 1.6s ease-in-out infinite;
}

.step-item.active .step-label { color: var(--accent); }

@keyframes stepPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,212,255,0.5); }
  50%       { box-shadow: 0 0 0 7px rgba(0,212,255,0); }
}

/* Done step */
.step-item.done .step-circle {
  border-color: var(--success);
  background: rgba(0,255,179,0.08);
  color: var(--success);
}

.step-item.done .step-label { color: var(--success); }

/* ── Progress bar ── */
.progress-message {
  font-family: 'Courier New', monospace;
  font-size: 0.82rem;
  color: var(--accent);
  margin-bottom: 14px;
  min-height: 20px;
  opacity: 0.85;
}

.progress-message::before {
  content: '> ';
  color: var(--accent2);
}

.progress-track {
  height: 5px;
  background: rgba(0,212,255,0.07);
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid rgba(0,212,255,0.08);
}

.progress-fill {
  height: 100%;
  width: 4%;
  background: linear-gradient(90deg, var(--accent), var(--accent2), var(--accent));
  background-size: 200% 100%;
  border-radius: 3px;
  transition: width 0.6s cubic-bezier(0.4,0,0.2,1);
  position: relative;
  animation: progressFlow 2.5s linear infinite;
}

@keyframes progressFlow {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

.progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
  animation: lightSweep 2s ease-in-out infinite;
}

@keyframes lightSweep {
  0%   { left: -60%; }
  100% { left: 160%; }
}

/* ── Error card ── */
.error-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  border-color: rgba(255,68,102,0.25);
  background: rgba(255,68,102,0.04);
}

.error-icon { flex-shrink: 0; }
.error-body { flex: 1; }
.error-title { font-family: 'Orbitron', sans-serif; font-weight: 700; color: var(--error); font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; }
.error-detail { font-size: 0.82rem; color: var(--text-muted); margin-top: 4px; font-family: monospace; }

/* ── Results ── */
.results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.results-meta h2 {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--accent);
  text-shadow: 0 0 20px rgba(0,212,255,0.35);
}

.results-time {
  font-family: monospace;
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 4px;
}

.results-actions { display: flex; align-items: center; gap: 10px; }

/* ── Tabs ── */
.tabs-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.tab-bar {
  display: flex;
  border-bottom: 1px solid var(--border);
  padding: 0 4px;
  overflow-x: auto;
  position: relative;
  scrollbar-width: none;
  background: rgba(13,13,36,0.8);
}

.tab-bar::-webkit-scrollbar { display: none; }

.tab-btn {
  padding: 13px 16px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-family: 'Orbitron', sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  cursor: pointer;
  white-space: nowrap;
  text-transform: uppercase;
  transition: color 0.2s;
  position: relative;
}

.tab-btn::before {
  content: '';
  opacity: 0;
  transition: opacity 0.2s;
}

.tab-btn:hover { color: rgba(0,212,255,0.7); }

.tab-btn.active {
  color: var(--accent);
}

.tab-btn.active::before {
  content: '> ';
  opacity: 1;
  color: var(--accent2);
}

.tab-underline {
  position: absolute;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  box-shadow: 0 0 8px var(--accent);
  border-radius: 2px 2px 0 0;
  transition: left 0.25s cubic-bezier(0.4,0,0.2,1), width 0.25s cubic-bezier(0.4,0,0.2,1);
}

/* ── Tab panels ── */
.tab-panel { padding: 24px; }
.tab-panel.hidden { display: none; }

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 12px;
}

.panel-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
}

.chip {
  font-family: monospace;
  font-size: 0.7rem;
  font-weight: 500;
  padding: 2px 8px;
  background: rgba(0,212,255,0.08);
  color: var(--accent);
  border-radius: 4px;
  border: 1px solid rgba(0,212,255,0.2);
}

/* ── Copy buttons ── */
.copy-all-btn, .toolbar-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: rgba(0,212,255,0.04);
  border: 1px solid rgba(0,212,255,0.15);
  border-radius: 5px;
  color: var(--text-muted);
  font-family: 'Orbitron', sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  text-transform: uppercase;
}

.copy-all-btn:hover, .toolbar-copy-btn:hover {
  color: var(--accent);
  border-color: rgba(0,212,255,0.35);
  box-shadow: 0 0 10px rgba(0,212,255,0.1);
}

.copy-all-btn.copied, .toolbar-copy-btn.copied {
  color: var(--success);
  border-color: rgba(0,255,179,0.3);
}

/* ── Content cards ── */
.cards-list { display: flex; flex-direction: column; gap: 10px; }

.content-card {
  background: var(--surface2);
  border: 1px solid rgba(0,212,255,0.08);
  border-left: 2px solid rgba(0,212,255,0.35);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color 0.25s, box-shadow 0.25s;
  position: relative;
}

.content-card::before,
.content-card::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.content-card::before {
  top: -1px;
  right: -1px;
  border-top: 1px solid var(--accent);
  border-right: 1px solid var(--accent);
}

.content-card::after {
  bottom: -1px;
  right: -1px;
  border-bottom: 1px solid var(--accent2);
  border-right: 1px solid var(--accent2);
}

.content-card:hover {
  border-color: rgba(0,212,255,0.3);
  border-left-color: var(--accent);
  box-shadow: 0 0 24px rgba(0,212,255,0.07), -2px 0 12px rgba(0,212,255,0.1);
}

.content-card:hover::before,
.content-card:hover::after { opacity: 1; }

.content-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 14px;
  border-bottom: 1px solid rgba(0,212,255,0.07);
  background: rgba(0,212,255,0.02);
}

.content-card-label {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.card-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  background: transparent;
  border: 1px solid rgba(0,212,255,0.12);
  border-radius: 4px;
  color: var(--text-muted);
  font-family: 'Orbitron', sans-serif;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: all 0.2s;
  text-transform: uppercase;
}

.card-copy-btn:hover { color: var(--accent); border-color: rgba(0,212,255,0.3); }
.card-copy-btn.copied { color: var(--success); border-color: rgba(0,255,179,0.3); }

.content-card-body {
  padding: 14px;
  font-family: 'Courier New', 'Monaco', 'Menlo', monospace;
  font-size: 0.85rem;
  line-height: 1.75;
  color: rgba(232,244,255,0.8);
  white-space: pre-wrap;
}

/* ── Prose blocks ── */
.prose-block {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.9rem;
  line-height: 1.8;
  color: rgba(232,244,255,0.75);
  white-space: pre-wrap;
  background: var(--surface2);
  border: 1px solid rgba(0,212,255,0.08);
  border-left: 2px solid rgba(0,212,255,0.35);
  border-radius: var(--radius-sm);
  padding: 20px;
}

/* ── Transcript block ── */
.transcript-block {
  font-family: 'Courier New', 'Monaco', monospace;
  font-size: 0.8rem;
  line-height: 1.85;
  color: var(--text-muted);
  white-space: pre-wrap;
  background: var(--surface2);
  border: 1px solid rgba(0,212,255,0.07);
  border-left: 2px solid rgba(123,47,255,0.4);
  border-radius: var(--radius-sm);
  padding: 20px;
  max-height: 500px;
  overflow-y: auto;
}

.transcript-block::-webkit-scrollbar { width: 3px; }
.transcript-block::-webkit-scrollbar-track { background: transparent; }
.transcript-block::-webkit-scrollbar-thumb { background: rgba(0,212,255,0.2); border-radius: 2px; }

/* ── Clips banner ── */
.clips-banner {
  margin-top: 12px;
  font-size: 0.8rem;
  color: var(--success);
  padding: 10px 14px;
  background: rgba(0,255,179,0.04);
  border: 1px solid rgba(0,255,179,0.18);
  border-radius: var(--radius-sm);
  font-family: monospace;
}

/* ── Footer ── */
.footer {
  text-align: center;
  padding: 40px 24px;
  border-top: 1px solid rgba(0,212,255,0.06);
  font-family: 'Orbitron', sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  position: relative;
  z-index: 1;
}

.footer p {
  animation: colorCycle 10s ease-in-out infinite;
}

@keyframes colorCycle {
  0%   { color: #6b7a99; }
  25%  { color: rgba(0,212,255,0.7); }
  50%  { color: #6b7a99; }
  75%  { color: rgba(123,47,255,0.7); }
  100% { color: #6b7a99; }
}

/* ── Utilities ── */
.hidden { display: none !important; }

/* ── Responsive ── */
@media (max-width: 600px) {
  .main { padding: 40px 0 80px; }
  .glass-card { padding: 20px 16px; }
  .hero h1 { font-size: 1.5rem; letter-spacing: 0.01em; }
  .hero-sub { font-size: 0.88rem; }
  .input-actions { flex-direction: column; align-items: stretch; }
  .btn-primary, .btn-ghost { justify-content: center; }
  .results-header { flex-direction: column; align-items: flex-start; }
  .step-line { min-width: 12px; }
  .source-btn { font-size: 0.72rem; padding: 7px 12px; }
}

/* ── Spin animation (used by app.js for loading) ── */
@keyframes spin {
  to { transform: rotate(360deg); }
}