:root {
  --bg: #0b0c12;
  --panel: #12141d;
  --panel-soft: #0f1119;
  --text: #f2f4ff;
  --muted: #9aa0c7;
  --line: rgba(255,255,255,.08);
  --brand: #7c5cff;
  --brand2: #4ee6b8;
  --radius: 18px;
}

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

body {
  background: radial-gradient(800px 400px at 20% -10%, rgba(124,92,255,.25), transparent 60%),
              radial-gradient(700px 400px at 90% 0%, rgba(78,230,184,.18), transparent 55%),
              var(--bg);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  min-height: 100vh;
}

/* ── TOPBAR ─────────────────────────────────────────────── */
.topbar {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(11,12,18,.8);
}
.brand { display:flex;align-items:center;gap:10px;font-weight:700;font-size:15px; }
.logo-dot { width:12px;height:12px;border-radius:4px;background:linear-gradient(135deg,var(--brand),var(--brand2)); }
.topbar nav a { margin-left:16px;color:var(--muted);text-decoration:none;font-size:14px;font-weight:500;transition:color .15s; }
.topbar nav a:hover { color:var(--text); }
.topbar nav .cta { padding:8px 14px;border-radius:12px;background:linear-gradient(135deg,var(--brand),var(--brand2));color:white;font-weight:600; }

/* ── NAV DROPDOWN ────────────────────────────────────────── */
.dropdown {
  position: relative; margin-left: 16px;
  display: inline-flex; align-items: center;
}
.dropdown-toggle {
  background: transparent; border: 1px solid var(--line);
  border-radius: 10px; padding: 6px 12px;
  color: var(--muted); font-size: 14px; font-weight: 500;
  cursor: pointer; display: flex; align-items: center; gap: 6px;
  transition: color .15s, border-color .15s;
}
.dropdown-toggle:hover  { color: var(--text); border-color: rgba(124,92,255,.4); }
.dropdown-toggle:active { transform: none; }
.dropdown-arrow { font-size: 9px; opacity: .6; transition: transform .2s; display: inline-block; }
.dropdown.open .dropdown-arrow { transform: rotate(180deg); }
.dropdown-menu {
  display: none; position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 190px; width:fit-content; background: rgba(15,17,25,.97);
  border: 1px solid var(--line); border-radius: 14px; padding: 6px;
  z-index: 500; box-shadow: 0 12px 40px rgba(0,0,0,.55);
  backdrop-filter: blur(14px); animation: dropIn .15s ease;
}
@keyframes dropIn { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:none} }
.dropdown.open .dropdown-menu { display: block; }
.dropdown-menu a {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 9px 12px; border-radius: 10px;
  color: var(--muted); text-decoration: none;
  font-size: 13px; font-weight: 500;
  transition: background .12s, color .12s; margin-left: 0;
}
.dropdown-menu a:hover { background: rgba(124,92,255,.12); color: var(--text); width:90%; }
.dropdown-divider { height: 1px; background: var(--line); margin: 4px 6px; }


/* ── LAYOUT ─────────────────────────────────────────────── */
.container { max-width:1100px;margin:0 auto;padding:40px 24px; }

/* ── STEPS BAR ──────────────────────────────────────────── */
.steps {
  background: linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.015));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 20px;
}
.steps-bar {
  max-width: 1100px;
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}
.step span {
  width:20px;height:20px;display:grid;place-items:center;
  border-radius:6px;background:rgba(255,255,255,.08);
  color:var(--text);font-weight:700;font-size:11px;flex-shrink:0;
}
.step.active { color:var(--text);border-color:rgba(124,92,255,.4);background:rgba(124,92,255,.12); }
.step.active span { background:linear-gradient(135deg,var(--brand),var(--brand2)); }
.step.optional em { font-style:normal;font-size:11px;opacity:.65; }

/* ── BUTTONS ─────────────────────────────────────────────── */
button { border:none;border-radius:12px;padding:10px 16px;font-weight:600;cursor:pointer;font-size:13px;transition:opacity .15s,transform .1s; }
button:active { transform:scale(.98); }
button.primary { background:linear-gradient(135deg,var(--brand),var(--brand2));color:white; }
button.primary:hover { opacity:.9; }
button.primary:disabled { opacity:.4;cursor:not-allowed; }
button.ghost { background:transparent;color:var(--text);border:1px solid var(--line); }
button.ghost:hover { border-color:rgba(124,92,255,.35); }

/* ── UPLOAD CARD ─────────────────────────────────────────── */
.upload-card {
  background: linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.015));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 32px;
}
.upload-header { display:flex;align-items:center;justify-content:space-between;margin-bottom:18px; }
.upload-header h2 { margin:0;font-size:18px; }
.tag { font-size:12px;padding:5px 10px;border-radius:999px;background:rgba(124,92,255,.12);border:1px solid rgba(124,92,255,.2);color:var(--brand);font-weight:600; }

/* ── DROPZONE ────────────────────────────────────────────── */
.dropzone {
  position:relative;border:1px dashed rgba(255,255,255,.18);
  border-radius:var(--radius);padding:28px 24px;
  display:flex;gap:16px;align-items:center;cursor:pointer;
  background:rgba(255,255,255,.02);transition:border-color .15s,background .15s;
}
.dropzone:hover { border-color:var(--brand);background:rgba(124,92,255,.04); }
.dropzone.has-file { border-color:rgba(78,230,184,.5);background:rgba(78,230,184,.04);border-style:solid; }
.dropzone input { position:absolute;inset:0;opacity:0;cursor:pointer; }
.drop-icon { font-size:26px;flex-shrink:0; }
.drop-text strong { display:block;font-size:14px;margin-bottom:3px; }
.drop-text span { color:var(--muted);font-size:13px; }
.file-name { font-size:12px;color:var(--brand2);font-weight:600;margin-top:6px;min-height:18px; }

/* ── INPUTS ──────────────────────────────────────────────── */
.name-input {
  width:100%;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid var(--line);border-radius:14px;
  padding:12px 14px;color:var(--text);font-size:14px;font-weight:500;
  outline:none;transition:border-color .15s,box-shadow .15s;
}
.name-input::placeholder { color:var(--muted);opacity:.8; }
.name-input:hover { border-color:rgba(124,92,255,.35); }
.name-input:focus { border-color:rgba(124,92,255,.6);background:linear-gradient(180deg,rgba(124,92,255,.1),rgba(255,255,255,.02));box-shadow:0 0 0 3px rgba(124,92,255,.15); }
.name-warning { font-size:11px;color:var(--muted);margin:4px 0 0 2px; }

/* ── CONTROLS ROW ────────────────────────────────────────── */
.controls { display:flex;align-items:center;gap:12px;flex-wrap:wrap; }
.controls select, select {
  background:rgba(255,255,255,.05);border:1px solid var(--line);
  border-radius:10px;padding:8px 10px;color:var(--text);
  font-size:13px;outline:none;cursor:pointer;transition:border-color .15s;
}
.controls select:focus, select:focus { border-color:rgba(124,92,255,.5); }
.controls select option, select option { background:#1a1b25; }
.controls label { font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px; }

/* ── MISC ────────────────────────────────────────────────── */
.file-list { display:flex;flex-direction:column;gap:6px;margin-top:10px; }
.file { display:flex;justify-content:space-between;padding:9px 12px;border-radius:10px;background:rgba(0,0,0,.2);border:1px solid var(--line);font-size:13px; }
.actions { margin-top:20px;display:flex;justify-content:flex-end;gap:10px; }
.muted { color:var(--muted); }
.small { font-size:13px; }
a { color:var(--brand); }
code { background:rgba(124,92,255,.12);border:1px solid rgba(124,92,255,.2);border-radius:5px;padding:1px 5px;font-size:11px;color:var(--brand2); }

/* ── HERO ────────────────────────────────────────────────── */
.hero { max-width:680px;margin-bottom:40px; }
.hero h1 { font-size:clamp(28px,4vw,46px);line-height:1.08;margin-bottom:14px; }
.hero h1 span { background:linear-gradient(135deg,var(--brand),var(--brand2));-webkit-background-clip:text;background-clip:text;color:transparent; }
.hero p { color:var(--muted);font-size:17px;line-height:1.6; }

/* ── PROGRESS ────────────────────────────────────────────── */
.progress { width:100%;height:6px;background:rgba(255,255,255,.06);border-radius:999px;overflow:hidden; }
.progress-bar { height:100%;background:linear-gradient(90deg,var(--brand),var(--brand2));border-radius:999px;transition:width .5s ease;width:0%; }

/* ── FOOTER ──────────────────────────────────────────────── */
.footer { text-align:center;padding:32px 24px;color:var(--muted);font-size:13px;border-top:1px solid var(--line);margin-top:20px; }
.footer a { color:var(--brand);text-decoration:none; }

/* ── HISTORY (new grid) ──────────────────────────────────── */
.history-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px; }
.h-card { background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:border-color .2s,transform .2s;cursor:pointer; }
.h-card:hover { border-color:rgba(124,92,255,.4);transform:translateY(-2px); }
.h-thumb { width:100%;aspect-ratio:9/16;max-height:220px;background:#111;overflow:hidden;position:relative; }
.h-thumb video { width:100%;height:100%;object-fit:cover;display:block; }
.h-vbadge { position:absolute;top:8px;right:8px;font-size:10px;font-weight:700;padding:2px 8px;border-radius:999px; }
.h-emoji { position:absolute;bottom:8px;left:10px;font-size:18px; }
.h-body { padding:10px 12px 4px; }
.h-title { font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:3px; }
.h-meta { font-size:11px;color:var(--muted);margin-bottom:4px;display:flex;gap:8px;flex-wrap:wrap; }
.h-caption { font-size:11px;color:var(--brand2);font-style:italic;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:8px; }
.h-actions { display:flex;gap:6px;padding:0 12px 12px; }
.h-actions button { flex:1;padding:7px;font-size:11px;border-radius:8px; }
.h-del { flex:0 !important;padding:7px 9px !important;color:#ff6b6b !important;border-color:rgba(255,107,107,.2) !important; }

/* ── PREVIEW (new) ───────────────────────────────────────── */
.preview-layout { display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:start; }
@media(max-width:860px){ .preview-layout { grid-template-columns:1fr; } }
.main-vid-wrap { width:min(260px,38vw);aspect-ratio:9/16;border-radius:22px;overflow:hidden;border:2.5px solid rgba(255,255,255,.15);background:#111;box-shadow:0 12px 48px rgba(0,0,0,.5),0 0 0 6px rgba(124,92,255,.07);flex-shrink:0; }
.main-vid-wrap video { width:100%;height:100%;object-fit:cover;display:block; }
.info-panel { background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01));border:1px solid var(--line);border-radius:22px;padding:24px;display:flex;flex-direction:column;gap:16px; }
.info-title { font-size:20px;font-weight:700; }
.meta-grid { display:grid;grid-template-columns:1fr 1fr;gap:8px; }
.meta-item { background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:12px;padding:10px 12px; }
.meta-item strong { display:block;font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:3px; }
.meta-item span { font-size:14px;font-weight:600; }
.viral-section label { font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px; }
.viral-row { display:flex;align-items:center;gap:10px;margin-top:6px; }
.viral-bar-bg { flex:1;height:6px;background:rgba(255,255,255,.06);border-radius:999px;overflow:hidden; }
.viral-bar { height:100%;border-radius:999px;background:linear-gradient(90deg,var(--brand),var(--brand2));transition:width .7s ease; }
.viral-pct { font-size:14px;font-weight:700; }
.ai-box { background:rgba(124,92,255,.06);border:1px solid rgba(124,92,255,.18);border-radius:14px;padding:12px 14px; }
.ai-box-label { font-size:10px;font-weight:700;color:var(--brand2);text-transform:uppercase;letter-spacing:.6px;margin-bottom:6px;display:block; }
.ai-box p { font-size:13px;color:var(--muted);line-height:1.6;font-style:italic; }
.tags { display:flex;flex-wrap:wrap;gap:6px; }
.tag-chip { font-size:11px;padding:3px 10px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--muted); }
.action-stack { display:flex;flex-direction:column;gap:8px; }
.action-stack button { font-size:14px; }
.strip-section { margin-top:32px; }
.strip-label { font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;margin-bottom:14px;display:block; }
.clip-strip { display:grid;grid-template-columns:repeat(3,1fr);gap:14px; }
@media(max-width:700px){ .clip-strip { grid-template-columns:1fr; } }
.strip-card { background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:16px;overflow:hidden;cursor:pointer;transition:border-color .2s,transform .2s; }
.strip-card:hover   { border-color:rgba(124,92,255,.4);transform:translateY(-2px); }
.strip-card.active  { border-color:var(--brand);background:rgba(124,92,255,.05); }
.strip-thumb { width:100%;aspect-ratio:9/16;max-height:200px;background:#111;overflow:hidden;position:relative; }
.strip-thumb video { width:100%;height:100%;object-fit:cover;display:block; }
.strip-vbadge { position:absolute;top:8px;right:8px;font-size:10px;font-weight:700;padding:2px 8px;border-radius:999px; }
.strip-body { padding:10px 12px 12px; }
.strip-title { font-size:12px;font-weight:700;display:flex;align-items:center;gap:5px;margin-bottom:4px; }
.strip-meta { font-size:11px;color:var(--muted);margin-bottom:8px; }
.strip-actions { display:flex;gap:6px; }
.strip-actions button { flex:1;padding:7px;font-size:11px;border-radius:8px; }

/* ── EDITOR ──────────────────────────────────────────────── */
body.editor-page { overflow:hidden;height:100vh; }
.editor-shell { height:calc(100vh - 64px);display:grid;grid-template-columns:72px 1fr 300px;overflow:hidden; }
.tool-rail { background:rgba(0,0,0,.3);border-right:1px solid var(--line);padding:12px 6px;display:flex;flex-direction:column;align-items:center;gap:6px;overflow:hidden; }
.rail-label { font-size:9px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.7px;margin-bottom:4px; }
.tool { width:54px;padding:9px 4px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--muted);font-size:10px;font-weight:600;cursor:pointer;text-align:center;transition:all .15s;line-height:1.4; }
.tool:hover  { border-color:rgba(124,92,255,.4);color:var(--text); }
.tool.active { background:rgba(124,92,255,.18);border-color:rgba(124,92,255,.5);color:var(--text); }
.tool-spacer { flex:1; }
.tool.export { background:rgba(78,230,184,.08);border-color:rgba(78,230,184,.25);color:#4ee6b8; }
.tool.export:hover { background:rgba(78,230,184,.15); }
.editor-main { display:flex;flex-direction:column;overflow:hidden;padding:10px 14px;gap:8px;min-height:0; }
.steps-compact .steps-bar { padding:6px 12px 7px; }
.steps-compact .step { padding:6px 10px;font-size:12px; }
.stage { display:flex;justify-content:center;flex-shrink:0; }
.vid-container { position:relative;aspect-ratio:9/16;height:min(300px,calc(100vh - 390px));border-radius:18px;overflow:hidden;border:2px solid rgba(255,255,255,.12);background:#0a0a0a;box-shadow:0 8px 32px rgba(0,0,0,.5); }
.vid-container video { width:100%;height:100%;object-fit:cover;display:block; }
.cap-overlay { position:absolute;left:6px;right:6px;text-align:center;pointer-events:none;z-index:10;font-family:Impact,Arial Black,sans-serif;text-shadow:2px 2px 0 #000,-2px -2px 0 #000,2px -2px 0 #000,-2px 2px 0 #000;line-height:1.2;word-break:break-word;transition:all .15s; }
.cap-overlay.bottom { bottom:10%; }
.cap-overlay.center { top:50%;transform:translateY(-50%); }
.cap-overlay.top    { top:8%; }
.timeline { background:rgba(0,0,0,.2);border:1px solid var(--line);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:7px;flex-shrink:0; }
.tl-row { display:flex;align-items:center;gap:8px; }
.tl-lbl { width:48px;font-size:10px;font-weight:600;color:var(--muted);flex-shrink:0; }
.tl-track { flex:1;height:26px;background:rgba(255,255,255,.05);border-radius:7px;position:relative;cursor:pointer;overflow:visible; }
canvas.waveform { position:absolute;inset:0;width:100%;height:100%;border-radius:7px;pointer-events:none; }
.tl-fill { position:absolute;top:0;bottom:0;border-radius:7px;pointer-events:none; }
.tl-zone { position:absolute;top:0;bottom:0;background:rgba(124,92,255,.18);border:1px solid rgba(124,92,255,.4);border-radius:6px;pointer-events:none; }
.tl-ph   { position:absolute;top:-3px;bottom:-3px;width:2px;background:white;border-radius:2px;pointer-events:none;z-index:5;box-shadow:0 0 5px rgba(255,255,255,.4); }
.tl-hl   { position:absolute;top:-2px;bottom:-2px;width:7px;background:white;border-radius:3px;cursor:ew-resize;z-index:6; }
.tl-time { width:40px;text-align:right;font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums;flex-shrink:0; }
.panels { background:rgba(0,0,0,.15);border:1px solid var(--line);border-radius:12px;padding:10px 12px;flex-shrink:0;min-height:68px; }
.panel { display:none;flex-direction:column;gap:8px; }
.panel.active { display:flex; }
.p-row { display:flex;align-items:center;gap:8px;flex-wrap:wrap; }
.p-lbl { font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;min-width:52px; }
.p-input, .p-select, .p-num { background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:9px;padding:7px 9px;color:var(--text);font-size:12px;outline:none; }
.p-input  { flex:1; }
.p-num    { width:68px; }
.p-input:focus, .p-select:focus, .p-num:focus { border-color:rgba(124,92,255,.55);box-shadow:0 0 0 3px rgba(124,92,255,.12); }
.p-hint { font-size:11px;color:var(--muted);line-height:1.4; }
input[type="range"] { flex:1;accent-color:var(--brand); }
.swatches { display:flex;gap:7px; }
.swatch { width:24px;height:24px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:all .15s; }
.swatch:hover  { transform:scale(1.15); }
.swatch.active { border-color:white; }
.apply-btn { padding:8px 16px;font-size:12px;margin-left:auto; }
.apply-btn.ok { background:linear-gradient(135deg,#1a7a6e,#4ee6b8) !important; }
.chat { border-left:1px solid var(--line);background:rgba(0,0,0,.15);display:flex;flex-direction:column;padding:14px;gap:10px;overflow:hidden; }
.chat-header { display:flex;align-items:center;gap:8px; }
.chat-header h3 { margin:0;font-size:14px; }
.chat-badge { font-size:10px;font-weight:700;padding:2px 8px;border-radius:999px;background:rgba(255,80,80,.12);color:#ff6b6b;border:1px solid rgba(255,80,80,.25); }
.chat-msgs { flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:8px;background:rgba(0,0,0,.2);border-radius:10px;padding:10px;min-height:0; }
.bubble { padding:8px 11px;border-radius:12px;font-size:12px;line-height:1.5;max-width:94%; }
.bubble.user { align-self:flex-end;background:rgba(124,92,255,.3);color:white;border-radius:12px 12px 0 12px; }
.bubble.ai   { align-self:flex-start;background:rgba(255,255,255,.06);color:var(--text);border-radius:12px 12px 12px 0; }
.bubble.hint { color:var(--muted);font-style:italic;align-self:flex-start;background:transparent;padding-left:4px; }
.chat-input-row { display:flex;gap:7px; }
.chat-input-row input { flex:1;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:10px;padding:8px 10px;color:var(--text);font-size:12px;outline:none; }
.chat-input-row input:focus { border-color:rgba(124,92,255,.5); }
.chat-input-row button { padding:8px 12px;font-size:13px; }
.chat-note { font-size:10px;color:var(--muted);line-height:1.4; }
@media(max-width:1050px){ .editor-shell { grid-template-columns:72px 1fr; } .chat { display:none; } }

/* ── PROCESSING ──────────────────────────────────────────── */
.ai-panel { background:linear-gradient(135deg,rgba(124,92,255,.07),rgba(78,230,184,.05));border:1px solid rgba(124,92,255,.22);border-radius:18px;padding:20px 24px;margin:0 auto 28px;max-width:800px;display:none;animation:fadeIn .4s ease; }
.ai-panel.visible { display:block; }
@keyframes fadeIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }
.ai-panel-title { font-size:11px;font-weight:700;color:var(--brand2);text-transform:uppercase;letter-spacing:.7px;margin-bottom:14px;display:flex;align-items:center;gap:8px; }
.ai-facts { display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin-bottom:14px; }
.ai-fact { background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:12px;padding:10px 12px; }
.ai-fact strong { display:block;font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:3px; }
.ai-fact span { font-size:13px;font-weight:600; }
.ai-reasoning { font-size:13px;color:var(--muted);line-height:1.6;font-style:italic;border-top:1px solid var(--line);padding-top:12px; }
.clip-cards { display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:0 auto 24px;max-width:800px; }
.clip-card { background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:18px;padding:22px 14px;display:flex;flex-direction:column;align-items:center;gap:10px;transition:border-color .3s; }
.clip-card.active  { border-color:rgba(124,92,255,.5); }
.clip-card.done    { border-color:rgba(78,230,184,.45); }
.clip-card.errored { border-color:rgba(255,80,80,.4); }
.card-ring { width:60px;height:60px;border-radius:50%;border:2px solid var(--line);background:rgba(255,255,255,.04);display:flex;align-items:center;justify-content:center;font-size:26px;position:relative;transition:background .3s,border-color .3s; }
.clip-card.active .card-ring { border-color:var(--brand); }
.clip-card.active .card-ring::before { content:'';position:absolute;inset:-5px;border-radius:50%;border:3px solid transparent;border-top-color:var(--brand);border-right-color:var(--brand2);animation:spin 1s linear infinite; }
.clip-card.done .card-ring { background:linear-gradient(135deg,var(--brand),var(--brand2));border-color:transparent;font-size:22px; }
@keyframes spin { to{transform:rotate(360deg)} }
.card-label  { font-size:13px;font-weight:700; }
.card-status { font-size:11px;color:var(--muted);text-align:center;min-height:15px; }
.clip-card.done    .card-status { color:var(--brand2); }
.clip-card.errored .card-status { color:#ff5555; }
.mini-dots { display:flex;align-items:center;gap:5px; }
.mdot { width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.1);transition:background .3s; }
.mdot.done   { background:var(--brand2); }
.mdot.active { background:var(--brand); }
.mdot-line { width:10px;height:1px;background:rgba(255,255,255,.08); }
.virality-chip { font-size:11px;font-weight:700;padding:3px 10px;border-radius:999px;opacity:0;transition:opacity .3s; }
.clip-card.done .virality-chip { opacity:1; }

/* ── MOBILE ──────────────────────────────────────────────── */
@media(max-width:700px){
  .container { padding:24px 16px; }
  .preview-layout { grid-template-columns:1fr; }
  .main-vid-wrap { width:min(220px,70vw);margin:0 auto; }
  .clip-cards { grid-template-columns:1fr; }
  .clip-strip { grid-template-columns:1fr; }
  .history-grid { grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); }
}