:root {
  --bg:      #F5EFE3;
  --surf:    #EDE5D0;
  --surf2:   #E2D8C4;
  --surf3:   #D4C8B0;
  --border:  rgba(90,55,15,0.10);
  --border2: rgba(90,55,15,0.18);
  --accent:  #ff5b22;
  --accent2: #4A8A65;
  --text:    #1E1006;
  --muted:   #7A6040;
  --subtle:  #A89070;
  --err:     #C0392B;
  --warn:    #B07800;
  --font:    -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --serif:   'Playfair Display',Georgia,serif;
  --mono:    ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --radius:  8px;
  --rail-w:  288px;
  --clips-w: 300px;
  /* ── Design foundation — one vocabulary both surfaces obey ── */
  --canvas-studio:#E7DCC6;                 /* recessed Studio well — makes the 9:16 video the hero */
  --r-1: 6px;                              /* chips · small controls */
  --r-2: 10px;                             /* cards · panels · buttons */
  --r-3: 14px;                             /* modals · large surfaces */
  --r-pill: 999px;                         /* fully-round badges */
  --sh-1: 0 1px 2px rgba(90,55,15,.06), 0 1px 3px rgba(90,55,15,.05);              /* resting */
  --sh-2: 0 4px 14px -6px rgba(90,55,15,.18), 0 2px 5px -2px rgba(90,55,15,.10);   /* lifted */
  --sh-3: 0 18px 44px -18px rgba(90,55,15,.30), 0 6px 14px -8px rgba(90,55,15,.16);/* floating */
  --ease: cubic-bezier(.2,.8,.2,1);        /* one easing, everywhere */
  --dur-1: .15s; --dur-2: .24s; --dur-3: .42s;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--text);font-family:var(--font);height:100%;-webkit-font-smoothing:antialiased}

/* ── Splash ── */
#splash{position:fixed;inset:0;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;z-index:1000}
#splash .s-brand{font-family:var(--serif);font-size:38px;font-weight:800;letter-spacing:-.02em;color:var(--text)}
#splash .s-brand .dot{color:var(--accent)}

/* ── Landing page ── */
#landing-screen{display:none;min-height:100vh;background:var(--bg);color:var(--text)}
.lp-wrap{max-width:1120px;margin:0 auto;padding:0 28px}
.lp-header{display:flex;align-items:center;gap:24px;padding:22px 28px;max-width:1120px;margin:0 auto}
.lp-brand{font-family:var(--serif);font-size:24px;font-weight:800;letter-spacing:-.02em}
.lp-brand .dot{color:var(--accent)}
.lp-nav{flex:1;display:flex;gap:22px;justify-content:center}
.lp-nav a{color:var(--muted);text-decoration:none;font-size:13px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.1em}
.lp-nav a:hover{color:var(--text)}
.lp-signin{padding:8px 16px;background:transparent;border:1px solid var(--border2);border-radius:6px;color:var(--text);cursor:pointer;font-size:13px;font-family:var(--mono);letter-spacing:.06em}
.lp-signin:hover{background:var(--surf2)}
.lp-hero{padding:64px 28px 48px;text-align:center}
.lp-eyebrow{font-size:11px;font-family:var(--mono);color:var(--accent);text-transform:uppercase;letter-spacing:.2em;margin-bottom:18px}
.lp-h1{font-family:var(--serif);font-size:clamp(40px,7vw,76px);font-weight:800;line-height:1.04;letter-spacing:-.02em;margin:0 auto 22px;max-width:920px}
.lp-h1 em{font-style:italic;color:var(--accent);font-weight:800}
.lp-sub{font-size:clamp(15px,1.6vw,18px);color:var(--muted);max-width:620px;margin:0 auto 30px;line-height:1.55}
.lp-cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:14px}
.lp-cta{padding:14px 26px;background:var(--accent);border:none;border-radius:8px;color:#fff;font-weight:700;font-size:15px;cursor:pointer;letter-spacing:.01em}
.lp-cta:hover{opacity:.92}
.lp-cta.ghost{background:transparent;color:var(--text);border:1px solid var(--border2)}
.lp-cta.ghost:hover{background:var(--surf2)}
.lp-trust{font-size:12px;font-family:var(--mono);color:var(--subtle);letter-spacing:.08em;text-transform:uppercase}

/* Hero mock-up — visual approximation of the editor */
.lp-mock{margin:40px auto 0;max-width:980px;padding:0 28px}
.lp-mock-frame{background:var(--surf);border:1px solid var(--border);border-radius:12px;overflow:hidden;box-shadow:0 20px 60px -25px rgba(90,55,15,.32),0 4px 12px -6px rgba(90,55,15,.15)}
.lp-mock-bar{display:flex;align-items:center;gap:8px;padding:11px 16px;background:var(--surf2);border-bottom:1px solid var(--border)}
.lp-mock-dot{width:11px;height:11px;border-radius:50%;background:#d8c9a6}
.lp-mock-dot:nth-child(2){background:#e6cb84}.lp-mock-dot:nth-child(3){background:#bfd4b6}
.lp-mock-url{margin-left:10px;flex:1;font-size:11px;font-family:var(--mono);color:var(--subtle);text-align:center}
.lp-mock-body{display:grid;grid-template-columns:230px 1fr 220px;min-height:420px}
.lp-mock-rail,.lp-mock-clips{padding:18px;background:var(--surf);font-size:11px;color:var(--muted);font-family:var(--mono);border-right:1px solid var(--border)}
.lp-mock-clips{border-right:none;border-left:1px solid var(--border)}
.lp-mock-rail-h{font-size:9px;text-transform:uppercase;letter-spacing:.16em;color:var(--subtle);margin-bottom:10px}
.lp-mock-drop{border:2px dashed rgba(255,91,34,.4);border-radius:8px;padding:22px 12px;text-align:center;color:var(--accent);margin-bottom:14px;background:rgba(255,91,34,.04)}
.lp-mock-pill{display:inline-block;padding:3px 8px;background:var(--surf2);border:1px solid var(--border);border-radius:4px;margin:2px;font-size:10px}
.lp-mock-pill.active{background:rgba(255,91,34,.15);border-color:var(--accent);color:var(--accent)}
.lp-mock-center{background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;text-align:center}
.lp-mock-vid{width:170px;height:300px;background:#100b06;border-radius:8px;position:relative;overflow:hidden;box-shadow:0 12px 30px -12px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.04)}
.lp-mock-scene{position:absolute;inset:0;width:100%;height:100%;display:block}
.lp-mock-scene .subj{transform-origin:50% 44%;animation:lpKen 9s var(--ease) infinite alternate}
@keyframes lpKen{from{transform:scale(1.01)}to{transform:scale(1.08)}}
.lp-mock-vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(125% 78% at 50% 36%,transparent 42%,rgba(0,0,0,.5) 100%)}
.lp-mock-grain{position:absolute;inset:0;pointer-events:none;opacity:.05;mix-blend-mode:overlay;background-image:repeating-linear-gradient(0deg,#fff 0 1px,transparent 1px 3px)}
.lp-mock-play{position:absolute;top:42%;left:50%;transform:translate(-50%,-50%);z-index:3;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.16);backdrop-filter:blur(2px);border:1px solid rgba(255,255,255,.35);display:flex;align-items:center;justify-content:center;animation:lpPulse 2.6s var(--ease) infinite}
.lp-mock-play::after{content:'';margin-left:3px;width:0;height:0;border-left:11px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent}
@keyframes lpPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.18)}55%{box-shadow:0 0 0 9px rgba(255,255,255,0)}}
.lp-mock-caption{position:absolute;left:0;right:0;bottom:30px;z-index:3;text-align:center;padding:0 10px;font-family:'Arial Black','Arial',sans-serif;font-size:14px;font-weight:900;color:#fff;text-shadow:0 0 7px rgba(0,0,0,.9),2px 2px 0 #000;letter-spacing:.4px;line-height:1.15}
.lp-mock-caption .hl{color:#ffd34d;display:inline-block;animation:lpPop 2.6s var(--ease) infinite}
@keyframes lpPop{0%,70%,100%{transform:scale(1)}80%{transform:scale(1.16)}}
.lp-mock-pbar{position:absolute;left:10px;right:10px;bottom:13px;z-index:3;height:3px;border-radius:2px;background:rgba(255,255,255,.22);overflow:hidden}
.lp-mock-pbar i{position:absolute;inset:0 auto 0 0;width:42%;background:var(--accent);border-radius:2px;animation:lpProg 6s linear infinite}
@keyframes lpProg{0%{width:6%}100%{width:94%}}
.lp-mock-score{position:absolute;top:8px;right:8px;z-index:3;font-size:9px;font-family:var(--mono);font-weight:700;color:#fff;background:rgba(255,91,34,.92);padding:3px 7px;border-radius:5px;box-shadow:0 2px 6px rgba(0,0,0,.35)}
.lp-mock-dur{position:absolute;top:8px;left:8px;z-index:3;font-size:8px;font-family:var(--mono);letter-spacing:.08em;color:rgba(255,255,255,.85);background:rgba(0,0,0,.4);padding:3px 6px;border-radius:5px}
@media (prefers-reduced-motion:reduce){.lp-mock-scene .subj,.lp-mock-caption .hl,.lp-mock-pbar i,.lp-mock-play{animation:none}.lp-mock-pbar i{width:48%}}
.lp-mock-clip-card{background:var(--surf2);border:1px solid var(--border);border-radius:6px;padding:10px;margin-bottom:8px}
.lp-mock-clip-card .score{color:var(--accent);font-size:12px;font-weight:700}
.lp-mock-clip-card .hook{font-size:10px;color:var(--text);margin-top:4px;line-height:1.4}

/* Features */
.lp-section{padding:80px 28px;max-width:1120px;margin:0 auto}
.lp-section-eyebrow{font-size:11px;font-family:var(--mono);color:var(--accent);text-transform:uppercase;letter-spacing:.2em;margin-bottom:12px;text-align:center}
.lp-section-h{font-family:var(--serif);font-size:clamp(28px,4vw,42px);font-weight:800;text-align:center;line-height:1.15;letter-spacing:-.01em;margin:0 auto 14px;max-width:760px}
.lp-section-h em{color:var(--accent);font-style:italic}
.lp-section-sub{font-size:15px;color:var(--muted);text-align:center;max-width:560px;margin:0 auto 48px;line-height:1.5}
.lp-feat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.lp-feat{background:var(--surf);border:1px solid var(--border);border-radius:10px;padding:24px}
.lp-feat-icon{width:36px;height:36px;border-radius:8px;background:rgba(255,91,34,.12);border:1px solid rgba(255,91,34,.25);display:flex;align-items:center;justify-content:center;font-size:18px;margin-bottom:14px}
.lp-feat-h{font-family:var(--serif);font-size:18px;font-weight:800;margin-bottom:6px}
.lp-feat-p{font-size:13px;color:var(--muted);line-height:1.5}

/* Pricing */
.lp-pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-top:8px}
.lp-price{background:var(--surf);border:1px solid var(--border);border-radius:12px;padding:28px 24px;position:relative;display:flex;flex-direction:column}
.lp-price.featured{border:2px solid var(--accent);background:linear-gradient(180deg,rgba(255,91,34,.05),var(--surf))}
.lp-price-badge{position:absolute;top:-11px;left:24px;background:var(--accent);color:#fff;font-size:10px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.12em;padding:3px 10px;border-radius:4px;font-weight:700}
.lp-price-tier{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.18em;color:var(--subtle);margin-bottom:8px}
.lp-price-amt{font-family:var(--serif);font-size:42px;font-weight:800;line-height:1}
.lp-price-amt span{font-size:14px;color:var(--muted);font-weight:400;margin-left:4px;font-family:var(--font)}
.lp-price-period{font-size:11px;color:var(--subtle);margin-top:4px;margin-bottom:18px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em}
.lp-price ul{list-style:none;padding:0;margin:0 0 24px;font-size:13px;color:var(--muted);line-height:1.9;flex:1}
.lp-price li::before{content:'✓ ';color:var(--accent2);font-weight:700}
.lp-price-cta{padding:11px;background:var(--surf2);border:1px solid var(--border);border-radius:6px;color:var(--text);cursor:pointer;font-size:13px;font-weight:700}
.lp-price-cta:hover{background:var(--surf3)}
.lp-price.featured .lp-price-cta{background:var(--accent);color:#fff;border-color:var(--accent)}
.lp-price.featured .lp-price-cta:hover{opacity:.92}

/* FAQ */
.lp-faq-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.lp-q{background:var(--surf);border:1px solid var(--border);border-radius:10px;padding:20px 22px}
.lp-q-h{font-family:var(--serif);font-size:16px;font-weight:800;margin-bottom:8px}
.lp-q-a{font-size:13px;color:var(--muted);line-height:1.55}

/* Footer */
.lp-footer{border-top:1px solid var(--border);padding:36px 28px;max-width:1120px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px}
.lp-foot-l{font-family:var(--serif);font-size:18px;font-weight:800}
.lp-foot-l .dot{color:var(--accent)}
.lp-foot-r{font-size:11px;color:var(--subtle);font-family:var(--mono)}
.lp-foot-r a{color:var(--subtle);text-decoration:none;margin-left:14px}
.lp-foot-r a:hover{color:var(--text)}

/* Bottom CTA strip */
.lp-bottom-cta{background:var(--surf);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:60px 28px;text-align:center}
.lp-bottom-cta h2{font-family:var(--serif);font-size:clamp(26px,3.6vw,38px);font-weight:800;margin:0 0 12px;letter-spacing:-.01em}
.lp-bottom-cta p{color:var(--muted);margin:0 0 22px;font-size:14px}

@media (max-width: 760px) {
  .lp-header{padding:18px 18px;gap:10px}
  .lp-nav{gap:14px;justify-content:flex-end}
  .lp-nav a{font-size:11px}
  .lp-hero{padding:40px 18px 32px}
  .lp-mock-body{grid-template-columns:1fr;min-height:auto}
  .lp-mock-rail,.lp-mock-clips{border-right:none;border-bottom:1px solid var(--border);border-left:none}
  .lp-section{padding:54px 18px}
  .lp-footer{padding:24px 18px;justify-content:center;text-align:center}
}
.spinner{width:22px;height:22px;border:2px solid rgba(90,55,15,.15);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Auth ── */
#auth-screen{display:none;min-height:100vh;align-items:center;justify-content:center;padding:40px 20px}
.auth-box{width:100%;max-width:380px;background:transparent;padding:0 8px}
.auth-logo{font-family:var(--serif);font-size:34px;font-weight:800;letter-spacing:-.02em;margin-bottom:36px;color:var(--text)}
.auth-logo .dot{color:var(--accent)}
.auth-tabs{display:flex;border-bottom:1px solid var(--border);margin-bottom:32px;gap:4px}
.auth-tab{flex:1;background:none;border:none;padding:12px 4px;font-size:11px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.auth-tab.active{color:var(--text);border-bottom-color:var(--accent)}
.auth-form{display:none}.auth-form.active{display:block}
.af-field{margin-bottom:24px}
.af-field label{display:block;font-size:10px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin-bottom:10px}
.af-field input{width:100%;background:transparent;border:none;border-bottom:1.5px solid rgba(90,55,15,.22);border-radius:0;padding:10px 0;font-size:16px;color:var(--text);outline:none;transition:border-color .15s}
.af-field input:focus{border-bottom-color:var(--accent)}
.af-err{font-size:11px;color:var(--err);margin-top:6px;min-height:14px}
.af-submit{width:100%;padding:15px;background:var(--accent);border:none;border-radius:3px;font-size:12px;font-weight:700;font-family:var(--mono);text-transform:uppercase;letter-spacing:.12em;color:#fff;cursor:pointer;margin-top:12px}
.af-tip{margin-top:14px;padding:10px 12px;background:rgba(74,138,101,.07);border:1px solid rgba(74,138,101,.18);border-radius:5px;font-size:12px;color:var(--text);line-height:1.5}
.af-tip strong{color:var(--accent2)}
.af-submit:hover{opacity:.9}
.af-submit:disabled{opacity:.5;cursor:wait}
.auth-note{text-align:center;font-size:12px;color:var(--muted);margin-top:20px}
.oauth-divider{display:flex;align-items:center;gap:12px;margin:24px 0;color:var(--subtle);font-size:11px;font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase}
.oauth-divider::before,.oauth-divider::after{content:'';flex:1;height:1px;background:var(--border)}
.oauth-btns{display:flex;gap:10px}
.oauth-btn{flex:1;padding:11px;background:transparent;border:1px solid var(--border2);border-radius:3px;font-size:12px;font-family:var(--mono);letter-spacing:.06em;color:var(--text);cursor:pointer;text-align:center;text-transform:uppercase}
.oauth-btn:hover{background:var(--surf2)}
.totp-step{display:none}
.totp-step.active{display:block}
.totp-input{width:100%;text-align:center;font-size:28px;letter-spacing:.3em;background:transparent;border:none;border-bottom:1.5px solid rgba(90,55,15,.22);border-radius:0;padding:14px 0;color:var(--text);font-family:var(--mono);outline:none}
.totp-input:focus{border-bottom-color:var(--accent)}

/* ── App layout ── */
#app{display:none;flex-direction:column;height:100vh;overflow:hidden}

/* ── Hub (post-signup home) — clean, AI-progress front-and-center ── */
#hub{display:none;flex-direction:column;min-height:100vh;background:var(--bg);color:var(--text)}
.hub-top{display:flex;align-items:center;gap:12px;padding:0 24px;height:56px;border-bottom:1px solid var(--border);flex-shrink:0;background:var(--surf)}
.hub-mark{font-family:var(--serif);font-weight:800;font-size:16px;color:var(--accent);margin-left:8px;padding-left:10px;border-left:1px solid var(--border2);letter-spacing:.02em}
.hub-userbar{font-size:12px;color:var(--muted);margin-right:4px}
.hub-userbar strong{color:var(--text)}
.hub-body{flex:1;max-width:780px;margin:0 auto;width:100%;padding:48px 28px;display:flex;flex-direction:column;align-items:center;text-align:center}
.hub-greet{font-family:var(--serif);font-size:clamp(28px,4vw,40px);font-weight:800;letter-spacing:-.01em;margin-bottom:22px}
.hub-ai{width:100%;max-width:520px;background:linear-gradient(135deg,rgba(255,91,34,.08),rgba(74,138,101,.06));border:1px solid var(--border2);border-radius:var(--r-3);padding:16px 18px;box-shadow:var(--sh-1);margin-bottom:20px}
.hub-ai-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
.hub-ai-label{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--accent);font-weight:700}
.hub-ai-level{font-size:13px;font-weight:700;color:var(--accent2);background:rgba(74,138,101,.14);border:1px solid var(--accent2);border-radius:var(--r-pill);padding:2px 12px;text-transform:capitalize}
.hub-ai-bar{height:8px;border-radius:var(--r-pill);background:var(--surf3);overflow:hidden}
.hub-ai-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:var(--r-pill);transition:width var(--dur-3) var(--ease)}
.hub-ai-note{font-size:11.5px;color:var(--muted);margin-top:8px;line-height:1.45}
/* First-class "Train your AI" entry on the hub's learning panel */
.hub-ai-train{margin-top:12px;width:100%;padding:9px 12px;border:1px solid var(--accent);border-radius:var(--r-2);background:rgba(255,91,34,.08);color:var(--accent);font-size:12.5px;font-weight:700;cursor:pointer;transition:background var(--dur-1) var(--ease)}
.hub-ai-train:hover{background:rgba(255,91,34,.16)}
/* Brief highlight when we jump the user to the trainer */
.ys-train-flash{animation:ysFlash 1.6s ease-out}
@keyframes ysFlash{0%{box-shadow:0 0 0 3px rgba(255,91,34,.5)}100%{box-shadow:0 0 0 0 rgba(255,91,34,0)}}
.hub-stats{display:flex;gap:14px;margin-bottom:34px;flex-wrap:wrap;justify-content:center}
.hub-stat{background:var(--surf);border:1px solid var(--border);border-radius:var(--r-2);padding:12px 22px;min-width:118px}
.hub-stat-num{font-family:var(--mono);font-size:26px;font-weight:800;color:var(--accent);line-height:1}
.hub-stat-lbl{font-size:11px;color:var(--subtle);margin-top:4px;text-transform:uppercase;letter-spacing:.08em}
.hub-q{font-size:15px;color:var(--muted);margin-bottom:16px}
.hub-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;width:100%;max-width:640px}
@media(max-width:680px){.hub-cards{grid-template-columns:1fr}}
.hub-card{position:relative;background:var(--surf);border:1px solid var(--border2);border-radius:var(--r-3);padding:26px 18px 22px;cursor:pointer;text-align:center;transition:transform var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease);box-shadow:var(--sh-1);color:var(--text)}
.hub-card:hover{transform:translateY(-4px);box-shadow:var(--sh-3);border-color:var(--accent)}
.hub-card:not(.is-live){opacity:.7}
.hub-card:not(.is-live):hover{transform:translateY(-2px);border-color:var(--border2);box-shadow:var(--sh-1)}
.hub-card-ic{font-size:34px;line-height:1;margin-bottom:10px}
.hub-card-t{font-family:var(--serif);font-size:21px;font-weight:800;margin-bottom:4px}
.hub-card-d{font-size:12px;color:var(--muted);margin-bottom:12px}
.hub-card-badge{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--subtle)}
.hub-card-badge.live{color:var(--accent2)}
.hub-foot{font-size:12.5px;color:var(--subtle);margin-top:30px;line-height:1.5;max-width:480px}
.hub-foot b{color:var(--text)}

/* ── Hub eye-candy: depth · gradient glow · motion ── */
#hub{background:radial-gradient(1100px 560px at 50% -8%, rgba(255,91,34,.12), transparent 62%), radial-gradient(900px 520px at 50% 114%, rgba(74,138,101,.09), transparent 60%), var(--bg)}
.hub-body>*{animation:hubIn .5s var(--ease) both}
.hub-ai{animation-delay:.06s}.hub-stats{animation-delay:.12s}.hub-q{animation-delay:.18s}.hub-cards{animation-delay:.22s}.hub-foot{animation-delay:.30s}
@keyframes hubIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.hub-greet{font-size:clamp(30px,4.4vw,46px)}
.hub-ai{position:relative;overflow:hidden;box-shadow:var(--sh-2)}
.hub-ai-fill{background:linear-gradient(90deg,var(--accent),#ffb27a,var(--accent2))}
.hub-ai-fill::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);animation:hubShimmer 2.6s linear infinite}
@keyframes hubShimmer{0%{transform:translateX(-120%)}100%{transform:translateX(260%)}}
.hub-stat{background:linear-gradient(160deg,var(--surf),var(--surf2));transition:transform var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease)}
.hub-stat:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
/* Time-saved = the dopamine stat — gently spotlit so it draws the eye */
.hub-stat-hero{background:linear-gradient(160deg,rgba(255,91,34,.12),rgba(255,91,34,.04));border-color:var(--accent)}
.hub-stat-hero .hub-stat-num{color:var(--accent)}
.hub-stat-hero .hub-stat-lbl{color:var(--accent)}
/* Loss-aversion banner at the quota wall — remind them of value before upselling */
.pricing-loss{background:linear-gradient(135deg,rgba(255,91,34,.12),rgba(255,91,34,.04));border:1px solid var(--accent);border-radius:var(--r-2);padding:12px 15px;margin-bottom:18px;font-size:13.5px;line-height:1.5;color:var(--text)}
.pricing-loss strong{color:var(--accent)}
/* Honest upgrade "glow" — the Upgrade button shows ONLY to free users, so a
   gentle pulse draws them toward Premium without fake-locking working features */
.hdr-btn.upgrade{animation:upgradePulse 2.8s ease-in-out infinite}
@keyframes upgradePulse{0%,100%{box-shadow:0 0 0 0 rgba(255,91,34,0)}50%{box-shadow:0 0 0 4px rgba(255,91,34,.16)}}
@media (prefers-reduced-motion:reduce){.hdr-btn.upgrade{animation:none}}
.hub-card{background:linear-gradient(165deg,var(--surf),var(--surf2));overflow:hidden}
.hub-card::before{content:'';position:absolute;inset:0;background:radial-gradient(420px 220px at 50% -10%,rgba(255,91,34,.13),transparent 70%);opacity:0;transition:opacity var(--dur-2) var(--ease);pointer-events:none}
.hub-card:hover::before{opacity:1}
.hub-card-ic{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;background:linear-gradient(160deg,rgba(255,91,34,.18),rgba(74,138,101,.14));margin:0 auto 12px;box-shadow:var(--sh-1)}
.hub-card.is-live{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 12px 32px -14px rgba(255,91,34,.45)}
.hub-card.is-live .hub-card-ic{background:linear-gradient(160deg,var(--accent),#ff8a5c)}
/* hub "Studios" dropdown — pops a touch, accent-tinted */
.ws-hub>summary{background:linear-gradient(135deg,rgba(255,91,34,.16),rgba(74,138,101,.10));border-color:var(--accent);color:var(--text)}
.ws-lab.live{color:var(--accent2);border-color:var(--accent2)}

/* ── Hub v2 — take it further: aurora · shine · float · breathe ── */
#hub{position:relative;overflow:hidden}
#hub::before{content:'';position:absolute;inset:-20% -10%;z-index:0;pointer-events:none;
  background:radial-gradient(500px 380px at 20% 18%, rgba(255,91,34,.16), transparent 60%),
            radial-gradient(560px 420px at 82% 16%, rgba(74,138,101,.14), transparent 62%),
            radial-gradient(620px 440px at 50% 102%, rgba(255,91,34,.10), transparent 60%);
  filter:blur(22px);animation:aurora 20s ease-in-out infinite alternate}
@keyframes aurora{0%{transform:translate3d(-2%,-1%,0) scale(1)}50%{transform:translate3d(2%,2%,0) scale(1.08)}100%{transform:translate3d(-1%,1%,0) scale(1.03)}}
.hub-top,.hub-body{position:relative;z-index:1}
.hub-ai{box-shadow:0 0 0 1px var(--border2), 0 18px 42px -20px rgba(255,91,34,.34)}
.hub-ai-milestone{font-size:11.5px;color:var(--accent);font-weight:700;margin-top:7px}
.hub-card-ic{animation:hubFloat 4s ease-in-out infinite}
.hub-card:nth-child(2) .hub-card-ic{animation-delay:.6s}
.hub-card:nth-child(3) .hub-card-ic{animation-delay:1.2s}
@keyframes hubFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.hub-card::after{content:'';position:absolute;top:0;left:-70%;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-18deg);opacity:0;pointer-events:none}
.hub-card:hover::after{opacity:1;animation:hubShine .85s var(--ease)}
@keyframes hubShine{from{left:-70%}to{left:140%}}
.hub-card.is-live{animation:hubBreathe 3.4s ease-in-out infinite}
@keyframes hubBreathe{0%,100%{box-shadow:0 0 0 1px var(--accent),0 12px 32px -14px rgba(255,91,34,.45)}50%{box-shadow:0 0 0 1px var(--accent),0 18px 44px -12px rgba(255,91,34,.62)}}
.hub-spark{display:inline-block;animation:hubTwinkle 2.2s ease-in-out infinite}
@keyframes hubTwinkle{0%,100%{opacity:.55;transform:scale(.9)}50%{opacity:1;transform:scale(1.18)}}
.hub-continue{display:none;align-items:center;gap:14px;width:100%;max-width:520px;margin:0 auto 22px;padding:10px 12px;background:var(--surf);border:1px solid var(--border2);border-radius:var(--r-2);cursor:pointer;text-align:left;box-shadow:var(--sh-1);transition:transform var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease);animation:hubIn .5s var(--ease) both;animation-delay:.1s}
.hub-continue:hover{transform:translateY(-2px);box-shadow:var(--sh-2);border-color:var(--accent)}
.hub-continue img{width:46px;height:64px;object-fit:cover;border-radius:var(--r-1);background:#000;flex-shrink:0}
.hub-continue-t{font-size:10px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--subtle)}
.hub-continue-h{font-size:13px;font-weight:700;color:var(--text);margin-top:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hub-continue-go{margin-left:auto;color:var(--accent);font-weight:800;font-size:20px;flex-shrink:0}
@media(prefers-reduced-motion:reduce){#hub::before,.hub-card-ic,.hub-card.is-live,.hub-spark,.hub-body>*{animation:none!important}}

/* ── Premium pass — Patek-grade: restraint, air, fine type, precious material ── */
/* Quieter ambient — luxury is calm confidence, not motion. */
#hub::before{filter:blur(36px);opacity:.64;animation-duration:40s}
@keyframes aurora{0%{transform:translate3d(-1.5%,-1%,0) scale(1)}50%{transform:translate3d(1.5%,1.5%,0) scale(1.05)}100%{transform:translate3d(-1%,.5%,0) scale(1.02)}}
.hub-card-ic{animation:none}                  /* no bobbing icons */
.hub-card.is-live{animation:none}             /* no breathing card */
.hub-card:hover::after{animation:none;opacity:0}  /* no shine flash */
.hub-spark{animation-duration:5s;color:#b08d57}
.hub-ai-fill::after{animation-duration:6s;background:linear-gradient(90deg,transparent,rgba(255,255,255,.30),transparent)}

/* Faint paper grain — material you can almost feel under the cream. */
#hub::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* The air — generous, calm, centered. */
.hub-body{padding-top:62px;padding-bottom:66px;max-width:880px}
.hub-greet{font-weight:600;font-size:clamp(36px,5vw,58px);letter-spacing:-.022em;line-height:1.05;margin-bottom:32px}
.hub-stats{gap:16px;margin:34px 0 42px}
.hub-cards{gap:18px}
.hub-q{font-size:15.5px;letter-spacing:.004em}

/* Engraved signage — wide-tracked small-caps labels. */
.hub-ai-label,.hub-stat-lbl,.hub-continue-t{letter-spacing:.22em}

/* Precious metal — a fine brass hairline + a brass 'level' (gold tier, not plastic green). */
.hub-ai{box-shadow:inset 0 0 0 1px rgba(176,141,87,.42),0 20px 48px -26px rgba(90,55,15,.42)}
.hub-ai-level{color:#8a6d38;background:rgba(176,141,87,.10);border-color:rgba(176,141,87,.5)}
.hub-ai-milestone{color:#8a6d38}

/* Cards as gallery pieces — fine border, one calm confident lift. */
.hub-card{border:1px solid var(--border2);transition:transform var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease)}
.hub-card:hover{transform:translateY(-4px);box-shadow:0 28px 60px -30px rgba(90,55,15,.5)}
.hub-card-ic{box-shadow:inset 0 0 0 1px rgba(176,141,87,.22),var(--sh-1)}

/* ── Header ── */
.app-header{display:flex;align-items:center;gap:12px;padding:0 20px;height:52px;border-bottom:1px solid var(--border);flex-shrink:0;background:var(--surf)}
.hdr-brand{font-family:var(--serif);font-size:20px;font-weight:800;letter-spacing:-.02em;color:var(--text);flex-shrink:0}
.hdr-brand .dot{color:var(--accent)}
.hdr-studio{display:none;align-items:center;font-family:var(--serif);font-weight:800;font-size:18px;letter-spacing:.01em;color:var(--text);padding-left:14px;margin-left:2px;border-left:1px solid var(--border2)}
.hdr-studio .v{color:var(--accent)}
.hdr-spacer{flex:1}
#verify-banner{background:rgba(255,165,0,.12);border:1px solid rgba(255,165,0,.3);border-radius:6px;padding:6px 12px;font-size:12px;color:var(--warn);display:none;align-items:center;gap:8px}
.engine-dot{width:7px;height:7px;border-radius:50%;background:var(--subtle);flex-shrink:0}
.engine-dot.ok{background:var(--accent2);box-shadow:0 0 5px rgba(74,138,101,.5)}
.engine-dot.err{background:var(--err)}
#userbar-who{font-size:12px;color:var(--muted);flex-shrink:0}
#userbar-who strong{color:var(--text)}
.tier-pill{font-size:10px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.12em;padding:2px 7px;border-radius:4px;background:var(--surf3);border:1px solid var(--border2);color:var(--muted)}
.tier-pill.pro{background:rgba(0,214,143,.15);border-color:var(--accent2);color:var(--accent2)}
.tier-pill.starter{background:rgba(255,91,34,.15);border-color:var(--accent);color:var(--accent)}
.hdr-btn{padding:6px 14px;background:none;border:1px solid var(--border2);border-radius:6px;font-size:12px;color:var(--muted);cursor:pointer}
.hdr-btn:hover{border-color:var(--border2);color:var(--text);background:var(--surf2)}
.hdr-btn.upgrade{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700}
.hdr-btn.upgrade:hover{opacity:.9}

/* ── Workspace (3 columns) ── */
.workspace{display:flex;flex:1;overflow:hidden}

/* ── Left rail ── */
.input-rail{width:var(--rail-w);flex-shrink:0;background:var(--surf);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden}
.rail-body{padding:16px;display:flex;flex-direction:column;gap:16px}

/* File drop (primary / hero) */
.file-drop{border:1.5px dashed var(--border2);border-radius:var(--radius);padding:18px;text-align:center;cursor:pointer;transition:border-color .2s,background .2s;position:relative}
.file-drop:hover,.file-drop.drag-over{border-color:var(--accent);background:rgba(255,91,34,.04)}
.file-drop input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.file-drop-text{font-size:12px;color:var(--muted);line-height:1.5}
.file-drop-icon{font-size:20px;margin-bottom:6px;color:var(--subtle)}
.file-drop-hero{padding:32px 18px 28px;border-width:2px;background:linear-gradient(180deg,rgba(255,91,34,.04),rgba(255,91,34,.01))}
.file-drop-hero:hover,.file-drop-hero.drag-over{background:linear-gradient(180deg,rgba(255,91,34,.10),rgba(255,91,34,.03))}
.file-drop-hero .file-drop-icon{font-size:30px;margin-bottom:10px;color:var(--accent)}
.file-drop-title{font-family:var(--serif);font-size:18px;color:var(--text);margin-bottom:4px;line-height:1.2}
.file-drop-hero .file-drop-text{font-size:11px;font-family:var(--mono);color:var(--subtle);text-transform:lowercase;letter-spacing:.05em}
.file-drop-badge{position:absolute;top:8px;right:10px;font-size:9px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--accent);background:rgba(255,91,34,.08);border:1px solid rgba(255,91,34,.25);border-radius:3px;padding:2px 7px}
.file-selected{font-size:12px;color:var(--accent2);font-family:var(--mono);padding:4px 0}

/* URL panel (secondary) */
.url-panel{background:var(--surf2);border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px 12px;margin-bottom:0;opacity:.88}
.url-panel:hover,.url-panel:focus-within{opacity:1;border-color:var(--border2)}
.url-panel-src{font-size:9px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.18em;color:var(--subtle);margin-bottom:8px}
.url-row{display:flex;gap:8px;align-items:flex-end}
.url-panel .url-row input,.url-panel .url-row textarea{flex:1;background:transparent;border:none;border-bottom:1px solid var(--border2);border-radius:0;padding:6px 0;font-size:13px;color:var(--text);outline:none;min-width:0}
.url-panel .url-row textarea{font-family:inherit;line-height:1.45;resize:none;min-height:38px;max-height:140px}
.url-panel .url-row input::placeholder,.url-panel .url-row textarea::placeholder{color:var(--subtle)}
.url-panel .url-row input:focus,.url-panel .url-row textarea:focus{border-bottom-color:var(--accent)}
.url-panel .go-btn{padding:6px 12px;border-radius:3px;font-size:10px;font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase;background:var(--muted);color:var(--bg);white-space:nowrap}
.url-panel .go-btn:hover{background:var(--text)}
.url-panel-note{font-size:10px;color:var(--subtle);line-height:1.45;margin-top:8px;padding-top:8px;border-top:1px dashed var(--border)}
/* ── Smart-link recognizer (URL box) — makes the input feel alive ── */
.smart-link{display:none;margin-top:10px}
.smart-link.show{display:block;animation:slIn var(--dur-2) var(--ease)}
@keyframes slIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.sl-thumb{border-radius:6px;object-fit:cover;background:var(--surf3);flex-shrink:0}
/* "ready to clip" chip — a supported link was recognized */
.sl-chip{display:flex;align-items:center;gap:10px;padding:8px 11px;background:rgba(74,138,101,.10);border:1px solid rgba(74,138,101,.32);border-radius:var(--r-2)}
.sl-chip .sl-thumb{width:46px;height:30px}
.sl-chip-body{min-width:0;flex:1}
.sl-chip-tag{font-size:9.5px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--accent2);font-weight:700}
.sl-chip-title{font-size:11.5px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
/* YouTube download card — turns the limitation into a guided 2-step */
.sl-card{padding:12px;background:linear-gradient(180deg,rgba(255,91,34,.09),rgba(255,91,34,.03));border:1px solid rgba(255,91,34,.28);border-radius:var(--r-2);box-shadow:var(--sh-1)}
.sl-card-head{display:flex;gap:11px;align-items:center}
.sl-card .sl-thumb{width:74px;height:42px}
.sl-card-meta{min-width:0;flex:1}
.sl-card-tag{font-size:9.5px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--accent);font-weight:700}
.sl-card-title{font-size:12.5px;color:var(--text);font-weight:600;line-height:1.3;margin-top:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sl-card-sub{font-size:10.5px;color:var(--muted);margin-top:3px}
.sl-steps{display:flex;align-items:center;gap:9px 11px;margin-top:11px;flex-wrap:wrap}
.sl-dl-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 15px;background:var(--accent);border:none;border-radius:var(--r-1);color:#fff;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap;flex:0 0 auto;transition:transform var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease)}
.sl-dl-btn:hover{transform:translateY(-1px);box-shadow:var(--sh-2)}
.sl-steps-then{font-size:10.5px;color:var(--muted);line-height:1.45;flex:1 1 130px;min-width:130px}
.sl-steps-then b{color:var(--text)}
.sl-more{font-size:10px;color:var(--subtle);margin-top:8px}
/* dropzone attention pulse once the user kicks off a download */
@keyframes slDropPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,91,34,0)}45%{box-shadow:0 0 0 6px rgba(255,91,34,.16)}}
.file-drop.sl-cue{border-color:var(--accent);animation:slDropPulse 1.15s var(--ease) 2}
.go-btn{padding:9px 14px;background:var(--accent);border:none;border-radius:6px;font-weight:700;font-size:13px;color:#fff;cursor:pointer;white-space:nowrap;flex-shrink:0}
.go-btn:hover{opacity:.9}
.or-sep{text-align:center;font-size:10px;font-family:var(--mono);color:var(--subtle);text-transform:uppercase;letter-spacing:.12em;position:relative;padding:2px 0}
.or-sep::before,.or-sep::after{content:'';position:absolute;top:50%;width:32%;height:1px;background:var(--border)}
.or-sep::before{left:0}.or-sep::after{right:0}

/* Settings */
.sect-label{font-size:10px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--subtle);margin-bottom:6px}
/* What-to-make picker (Make Clips vs Polish Full Video). Two-column grid
   sits above Platform; mirrors plat-btn / dur-btn styling so the picker
   feels native to the existing sidebar grammar. */
.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.mode-grid-3{grid-template-columns:repeat(3,1fr)}
.mode-pick{padding:10px 6px 9px;background:var(--surf2);border:1px solid var(--border);border-radius:5px;font-size:11px;font-family:var(--mono);color:var(--muted);cursor:pointer;transition:all .12s;text-align:center;display:flex;flex-direction:column;gap:3px;align-items:center;justify-content:center;line-height:1.25;min-height:54px}
.mode-pick:hover{border-color:var(--border2);color:var(--text)}
.mode-pick.active{background:rgba(255,91,34,.15);border-color:var(--accent);color:var(--accent);font-weight:700}
.mode-pick-label{font-size:11px;font-weight:700}
.mode-pick-sub{font-size:9px;color:var(--subtle);font-family:var(--mono);letter-spacing:.02em;text-transform:none;font-weight:400}
.mode-pick.active .mode-pick-sub{color:var(--accent);opacity:.85}

.plat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.plat-btn{padding:6px 0 6px 14px;background:var(--surf2);border:1px solid var(--border);border-radius:5px;font-size:11px;font-family:var(--mono);color:var(--muted);cursor:pointer;transition:all .12s;position:relative}
.plat-btn:hover{border-color:var(--border2);color:var(--text)}
.plat-btn.active{background:rgba(255,91,34,.15);border-color:var(--accent);color:var(--accent)}
/* Active platform chips tinted to each platform's brand color */
.plat-btn.active[data-p="tiktok"]{background:rgba(37,244,238,.18);border-color:#25f4ee;color:#0a8a99}
.plat-btn.active[data-p="shorts"]{background:rgba(255,0,51,.13);border-color:#ff0033;color:#ff0033}
.plat-btn.active[data-p="reels"]{background:rgba(193,53,132,.14);border-color:#c13584;color:#c13584}
.plat-btn.active[data-p="twitter"]{background:rgba(120,120,120,.16);border-color:#888;color:var(--text)}
/* Brand-color dot on EVERY plat-btn so the user can eyeball which is
   which without parsing the label. Visible in the inactive state; the
   active state already tints the whole chip in brand color so we hide
   the dot there to avoid double-coding. */
.plat-btn::before{content:'';position:absolute;left:5px;top:50%;transform:translateY(-50%);width:6px;height:6px;border-radius:50%;background:var(--accent)}
.plat-btn[data-p="tiktok"]::before{background:#25f4ee;box-shadow:0 0 0 1px #fe2c55 inset}
.plat-btn[data-p="shorts"]::before{background:#ff0033}
.plat-btn[data-p="reels"]::before{background:linear-gradient(135deg,#f09433 0%,#dc2743 50%,#bc1888 100%)}
.plat-btn[data-p="twitter"]::before{background:#000;box-shadow:0 0 0 1px rgba(255,255,255,.5) inset}
.plat-btn.active::before{display:none}
.dur-row{display:flex;gap:5px}
.dur-btn{flex:1;padding:6px 0;background:var(--surf2);border:1px solid var(--border);border-radius:5px;font-size:11px;font-family:var(--mono);color:var(--muted);cursor:pointer;transition:all .12s}
.dur-btn:hover{border-color:var(--border2);color:var(--text)}
.dur-btn.active{background:rgba(255,91,34,.15);border-color:var(--accent);color:var(--accent)}
.style-select{width:100%;background:var(--surf2);border:1px solid var(--border2);border-radius:6px;padding:8px 10px;font-size:12px;color:var(--text);outline:none;cursor:pointer}
.style-select option{background:var(--surf2)}
/* Music mixer fader — control how loud the background music sits under the voice */
.music-vol-row{display:flex;align-items:center;gap:9px;margin-top:9px}
.music-vol-ic{font-size:13px;opacity:.7;flex:0 0 auto}
.music-vol-val{font-size:11px;font-family:var(--mono);color:var(--muted);min-width:34px;text-align:right;flex:0 0 auto}
.music-fader{flex:1;-webkit-appearance:none;appearance:none;height:4px;border-radius:3px;outline:none;cursor:pointer;
  background:linear-gradient(90deg,var(--accent) 0%,var(--accent) var(--fill,35%),var(--border2) var(--fill,35%),var(--border2) 100%)}
.music-fader::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:15px;height:15px;border-radius:50%;background:var(--accent);border:2px solid #fff;box-shadow:var(--sh-1);cursor:grab}
.music-fader::-moz-range-thumb{width:15px;height:15px;border-radius:50%;background:var(--accent);border:2px solid #fff;box-shadow:var(--sh-1);cursor:grab}
.music-empty-hint{font-size:11px;color:var(--subtle);line-height:1.45;margin-top:8px;background:var(--surf2);border:1px solid var(--border2);border-radius:6px;padding:8px 10px}
/* Clip history — searchable grid of every past clip */
.hist-search{display:flex;align-items:center;gap:9px;background:var(--surf2);border:1px solid var(--border2);border-radius:var(--r-2);padding:10px 13px;margin-bottom:12px}
.hist-search-ic{opacity:.55;font-size:14px}
.hist-search input{flex:1;border:none;background:none;outline:none;font-size:14px;color:var(--text);font-family:var(--font)}
.hist-search input::placeholder{color:var(--subtle)}
.hist-count{font-size:10px;color:var(--subtle);margin-bottom:11px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.1em;min-height:12px}
.hist-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:12px}
.hist-card{display:flex;flex-direction:column;background:var(--surf2);border:1px solid var(--border2);border-radius:var(--r-2);overflow:hidden;cursor:pointer;text-decoration:none;color:inherit;box-shadow:var(--sh-1);transition:transform var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease)}
.hist-card:hover{transform:translateY(-2px);box-shadow:var(--sh-2);border-color:var(--accent)}
.hist-thumb{width:100%;aspect-ratio:9/16;max-height:210px;object-fit:cover;background:#1b1b1b;display:block}
.hist-meta{padding:8px 10px 10px}
.hist-title{font-size:12px;font-weight:700;color:var(--text);line-height:1.3;margin-bottom:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hist-said{font-size:11px;color:var(--muted);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hist-empty{text-align:center;color:var(--subtle);font-size:13px;line-height:1.6;padding:44px 20px}
.mode-row{display:flex;gap:5px}
.mode-btn{flex:1;padding:7px 0;background:var(--surf2);border:1px solid var(--border);border-radius:5px;font-size:11px;font-family:var(--mono);color:var(--muted);cursor:pointer;transition:all .12s}
.mode-btn.active{background:rgba(255,91,34,.15);border-color:var(--accent);color:var(--accent)}
.toggle-row{display:flex;align-items:center;gap:8px;cursor:pointer}
.toggle-row input[type=checkbox]{accent-color:var(--accent);width:15px;height:15px;flex-shrink:0}
.toggle-text{font-size:12px;color:var(--muted)}

/* Make clips button */
.make-btn{width:100%;padding:12px;background:var(--accent);border:none;border-radius:var(--radius);font-size:15px;font-weight:700;color:#fff;cursor:pointer;transition:opacity .15s}
.make-btn:hover{opacity:.9}
.make-btn:disabled{opacity:.45;cursor:wait}

/* Queue */
.queue-hdr{display:flex;align-items:center;justify-content:space-between}
.queue-hdr-label{font-family:var(--serif);font-style:italic;font-size:14px;color:var(--text);letter-spacing:0;text-transform:none}
.queue-clear{background:none;border:none;font-size:10px;font-family:var(--mono);color:var(--subtle);cursor:pointer;text-transform:uppercase;letter-spacing:.1em}
.queue-clear:hover{color:var(--err)}
/* "Cancel stuck" header button — appears only when ≥1 job has been
   in-progress for 5+ min without progressing. Colored loud by default so
   the user can spot it without hovering. */
.queue-clear.danger{color:var(--err);border:1px solid var(--err);border-radius:4px;padding:3px 8px;background:rgba(255,69,69,.05)}
.queue-clear.danger:hover{background:rgba(255,69,69,.15)}
.queue-jobs{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.qjob{background:var(--surf2);border:1px solid var(--border);border-radius:6px;padding:10px 12px;cursor:pointer;transition:border-color .15s}
.qjob:hover{border-color:var(--border2)}
.qjob.active-job{border-color:var(--accent)}
.qjob-source{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:5px}
.qjob-row{display:flex;align-items:center;gap:8px}
.qjob-pill{font-size:10px;font-family:var(--mono);padding:2px 7px;border-radius:4px;text-transform:uppercase;letter-spacing:.1em;background:var(--surf3);color:var(--muted);border:1px solid var(--border);flex-shrink:0}
.qjob-pill.done{background:rgba(74,138,101,.15);border-color:var(--accent2);color:var(--accent2)}
.qjob-pill.failed{background:rgba(255,69,69,.12);border-color:var(--err);color:var(--err)}
.qjob-pill.running,.qjob-pill.downloading,.qjob-pill.transcribing,.qjob-pill.scoring,.qjob-pill.rendering{background:rgba(255,91,34,.12);border-color:var(--accent);color:var(--accent)}
.qjob-pill.queued{color:var(--subtle)}
.qjob-prog{flex:1;height:3px;background:var(--border);border-radius:2px;overflow:hidden}
.qjob-prog-fill{height:100%;background:var(--accent);transition:width .4s;border-radius:2px}
.qjob-dismiss{background:none;border:none;color:var(--subtle);cursor:pointer;font-size:14px;padding:0 2px;line-height:1;flex-shrink:0}
.qjob-dismiss:hover{color:var(--err)}
/* Labeled cancel for in-progress jobs. Tint the default state with the
   error color (lower opacity) so the user can spot the affordance without
   hovering — the muted-grey default was easy to miss when a job felt stuck. */
.qjob-cancel{background:none;border:1px solid rgba(255,69,69,.45);color:var(--err);cursor:pointer;font-size:10px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em;padding:3px 8px;border-radius:4px;line-height:1;flex-shrink:0;opacity:.85}
.qjob-cancel:hover{border-color:var(--err);opacity:1;background:rgba(255,69,69,.1)}
.qjob-actions{display:flex;gap:6px;margin-top:6px}
.qjob-retry{flex:1;padding:4px 8px;background:var(--surf2);border:1px solid var(--border2);border-radius:4px;font-size:10px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);cursor:pointer}
.qjob-retry:first-child{border-color:rgba(255,91,34,.35);color:var(--accent)}
.qjob-retry:hover{color:var(--text);border-color:var(--text);background:var(--surf3)}
.queue-empty{font-size:11px;color:var(--subtle);font-style:italic;font-family:var(--serif);padding:8px 4px;text-align:center}
.quota-bar-wrap{background:var(--surf2);border-radius:4px;height:3px;overflow:hidden}
.quota-bar-fill{height:100%;background:var(--accent);border-radius:4px;transition:width .4s}
.quota-text{font-size:10px;font-family:var(--mono);color:var(--subtle);margin-bottom:4px}

/* ── Center panel ── */
.center-panel{flex:1;display:flex;flex-direction:column;overflow:hidden;background:var(--bg);position:relative}

/* Empty state */
.center-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:40px}
.ce-logo{font-size:56px;font-weight:800;letter-spacing:-.03em;color:var(--surf3)}
.ce-tagline{font-size:22px;color:var(--muted);text-align:center;line-height:1.5;font-family:var(--serif)}
.ce-platforms{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:8px}
.ce-plat{font-size:12px;font-family:var(--mono);padding:5px 12px;background:var(--surf);border:1px solid var(--border);border-radius:20px;color:var(--muted)}
.ce-cue{display:flex;align-items:center;gap:10px;font-size:12px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.18em;color:var(--accent);margin-top:14px;animation:cuePulse 2.4s ease-in-out infinite}
.ce-cue-arrow{font-size:18px;display:inline-block;animation:cueArrow 1.8s ease-in-out infinite}
@keyframes cuePulse{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes cueArrow{0%,100%{transform:translateX(0)}50%{transform:translateX(-6px)}}
.ce-steps{display:flex;gap:18px;margin-top:6px;flex-wrap:wrap;justify-content:center;max-width:520px}
.ce-step{font-size:11px;font-family:var(--mono);color:var(--subtle);display:flex;align-items:center;gap:7px}
.ce-step-n{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:var(--surf2);border:1px solid var(--border);color:var(--muted);font-size:10px}

/* Processing state */
.center-proc{flex:1;display:none;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:40px}
.proc-src{font-size:14px;font-weight:600;color:var(--muted);font-family:var(--mono);text-align:center;max-width:400px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.proc-stages{display:flex;gap:8px;align-items:center}
.proc-stage{font-size:11px;font-family:var(--mono);padding:4px 10px;border-radius:20px;background:var(--surf2);border:1px solid var(--border);color:var(--subtle);transition:all .3s;position:relative}
.proc-stage.active{background:rgba(255,91,34,.15);border-color:var(--accent);color:var(--accent);animation:stagePulse 1.4s ease-in-out infinite}
.proc-stage.active::after{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-left:7px;vertical-align:middle;animation:stageDot 1s linear infinite}
.proc-stage.done{background:rgba(74,138,101,.12);border-color:var(--accent2);color:var(--accent2)}
@keyframes stagePulse{0%,100%{box-shadow:0 0 0 0 rgba(255,91,34,.0)}50%{box-shadow:0 0 0 4px rgba(255,91,34,.18)}}
@keyframes stageDot{0%,100%{opacity:.3}50%{opacity:1}}
.proc-msg{font-size:13px;color:var(--muted);text-align:center;max-width:420px;line-height:1.4}
.proc-meta{display:flex;gap:14px;align-items:center;justify-content:center;font-size:11px;font-family:var(--mono);color:var(--subtle);text-transform:uppercase;letter-spacing:.12em}
.proc-meta-elapsed{display:inline-flex;align-items:center;gap:5px}
.proc-meta-elapsed::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--accent);animation:procPulse 1s ease-in-out infinite}
@keyframes procPulse{0%,100%{opacity:.4}50%{opacity:1}}
.proc-tip{font-size:12px;font-style:italic;color:var(--muted);font-family:var(--serif);text-align:center;max-width:440px;line-height:1.5;min-height:1.5em;opacity:0;transition:opacity .4s}
.proc-tip.show{opacity:.85}
.proc-bar-outer{width:100%;max-width:420px;height:8px;background:var(--surf2);border-radius:4px;overflow:hidden;position:relative}
.proc-bar-pct{position:absolute;right:0;top:-22px;font-size:11px;font-family:var(--mono);color:var(--accent);font-weight:600;letter-spacing:.05em}
.proc-bar-inner{height:100%;background:var(--accent);border-radius:4px;transition:width .5s ease;min-width:2px}
.proc-bar-inner.shimmer{background:linear-gradient(90deg,var(--accent) 0%,#ff8c60 50%,var(--accent) 100%);background-size:200% 100%;animation:shimmer 1.5s linear infinite}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
/* "Reveal moment": clips drop in one-by-one with a staggered pop (--i = index).
   `both` holds them invisible until their turn, so it reads as a sequence. */
@keyframes revealPop{0%{opacity:0;transform:translateY(12px) scale(.95)}60%{opacity:1}100%{opacity:1;transform:translateY(0) scale(1)}}
.reveal-in{animation:revealPop var(--dur-3) var(--ease) both;animation-delay:calc(var(--i,0)*90ms)}
/* Smooth fade between center-panel states (empty ⇄ processing ⇄ clips) so the
   app never hard-cuts. Fires only on real state change (see showCenterState). */
@keyframes csEnter{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.cs-enter{animation:csEnter var(--dur-2) var(--ease)}
@media (prefers-reduced-motion: reduce){.reveal-in,.cs-enter{animation:none}}
.proc-preview-clips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:8px;max-width:600px}
.ppc-card{background:var(--surf);border:1px solid var(--border);border-radius:var(--r-2);padding:10px 14px;min-width:160px;box-shadow:var(--sh-1)}
.ppc-score{font-size:11px;font-family:var(--mono);color:var(--accent);margin-bottom:4px}
.ppc-hook{font-size:12px;color:var(--text);line-height:1.4}
.proc-err{font-size:13px;color:var(--err);text-align:center;max-width:420px;padding:14px 20px;background:rgba(255,69,69,.08);border:1px solid rgba(255,69,69,.2);border-radius:var(--radius)}

/* Clip preview (center) */
.center-clip{flex:1;display:none;flex-direction:column;overflow-y:auto}
.player-section{display:flex;justify-content:center;align-items:center;padding:20px;background:var(--canvas-studio);border-bottom:1px solid var(--border);position:relative;overflow:hidden;min-height:50vh}
/* Blurred backdrop of the clip's own thumbnail fills the dead space around
   a vertical 9:16 video — no flat black sides anymore. inset:-80px pushes
   the blur edges past the visible viewport so they don't show. Falls back
   to a soft brand gradient when no thumbnail is set. */
.player-bg-blur{position:absolute;inset:-80px;background-image:var(--clip-thumb, linear-gradient(135deg,rgba(255,91,34,.18),rgba(74,138,101,.10) 60%,rgba(255,91,34,.18)));background-size:cover;background-position:center;background-repeat:no-repeat;filter:blur(50px) saturate(1.1) brightness(0.85);transform:scale(1.1);z-index:0;pointer-events:none;transition:background-image var(--dur-2) var(--ease)}
.player-section video{max-height:62vh;max-width:100%;border-radius:var(--r-2);background:transparent;display:block;position:relative;z-index:1;box-shadow:var(--sh-3)}
.clip-infobar{padding:12px 20px;display:flex;align-items:center;gap:14px;border-bottom:1px solid var(--border);flex-shrink:0}
.cib-score{font-size:20px;font-weight:800;color:var(--accent);font-family:var(--mono)}
.cib-times{font-size:11px;font-family:var(--mono);color:var(--muted)}
.cib-hook{font-size:13px;color:var(--text);font-style:italic;flex:1}
/* The AI's voice in the editor — present + intentional, not a silent tool */
.cib-ai{flex:1;min-width:0;font-size:12.5px;color:var(--text);line-height:1.45}
.cib-ai b{color:var(--accent);font-weight:800}
.cib-hookq{display:block;color:var(--muted);font-style:italic;font-size:11.5px;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cib-dl{padding:7px 14px;background:var(--accent);border:none;border-radius:6px;font-size:12px;font-weight:700;color:#fff;cursor:pointer;text-decoration:none;flex-shrink:0;display:inline-block}
.cib-dl:hover{opacity:.9}
.cib-pack{padding:7px 14px;background:transparent;border:1px solid var(--accent);border-radius:6px;font-size:12px;font-weight:700;color:var(--accent);cursor:pointer;text-decoration:none;flex-shrink:0;display:inline-block;margin-left:6px}
.cib-pack:hover{background:var(--accent);color:#fff}
.cib-publish-yt{padding:7px 14px;background:#ff0033;border:1px solid #ff0033;border-radius:6px;font-size:12px;font-weight:700;color:#fff;cursor:pointer;text-decoration:none;flex-shrink:0;display:inline-block;margin-left:6px}
.cib-publish-yt:hover{opacity:.9}
.cib-publish-yt:disabled{opacity:.6;cursor:wait}
.cib-publish-ig{padding:7px 14px;background:linear-gradient(45deg,#f09433,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888);border:none;border-radius:6px;font-size:12px;font-weight:700;color:#fff;cursor:pointer;flex-shrink:0;display:inline-block;margin-left:6px}
.cib-publish-ig:hover{opacity:.9}
.cib-publish-ig:disabled{opacity:.6;cursor:wait}

/* Hook Coach */
.hook-coach{padding:12px 20px;border-bottom:1px solid var(--border);background:linear-gradient(180deg,rgba(255,91,34,.04),transparent 70%);flex-shrink:0}
.hc-row-top{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:8px;flex-wrap:wrap}
.hc-title{display:flex;align-items:center;gap:10px}
.hc-eyebrow{font-size:10px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.16em;color:var(--accent);font-weight:700}
.hc-score-pill{display:inline-flex;align-items:baseline;gap:1px;background:var(--accent);color:#fff;padding:3px 10px;border-radius:14px;font-family:var(--serif);font-weight:800;font-size:15px;line-height:1}
.hc-score-of{font-size:9px;font-family:var(--mono);font-weight:600;opacity:.85;margin-left:2px}
.hc-score-pill.low{background:#B07800}
.hc-score-pill.mid{background:var(--accent)}
.hc-score-pill.high{background:var(--accent2)}
.hc-bars{display:flex;gap:10px;align-items:center}
.hc-bar{display:flex;flex-direction:column;align-items:center;gap:3px}
.hc-bar-label{font-size:9px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--subtle)}
.hc-bar-meter{width:54px;height:4px;background:var(--surf2);border-radius:2px;overflow:hidden}
.hc-bar-fill{height:100%;background:var(--accent);transition:width .4s}
.hc-body{font-size:12px;line-height:1.5}
.hc-label{font-size:10px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--subtle);margin-right:6px}
.hc-current{color:var(--muted);margin-bottom:3px}
.hc-suggest{margin-bottom:5px;display:flex;align-items:flex-start;gap:6px;flex-wrap:wrap}
.hc-suggest-text{color:var(--accent);font-weight:700;flex:1;min-width:0}
.hc-copy{background:none;border:1px solid var(--border2);border-radius:4px;cursor:pointer;padding:1px 6px;font-size:11px;color:var(--subtle)}
.hc-copy:hover{color:var(--text);border-color:var(--text)}
.hc-copy.copied{color:var(--accent2);border-color:var(--accent2)}
.hc-reason{font-style:italic;color:var(--subtle);font-size:11px;font-family:var(--serif)}
.hc-loading{font-size:11px;color:var(--subtle);font-family:var(--mono);text-transform:uppercase;letter-spacing:.1em;padding:4px 0}
/* Platform-fit chips — TikTok/Shorts/X predicted performance */
.hc-platforms{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.hc-platform{display:flex;align-items:center;gap:6px;padding:5px 10px;background:var(--surf2);border-radius:99px;font-size:11px;border:1px solid transparent;transition:border-color .2s ease}
.hc-platform.high{border-color:var(--accent2)}
.hc-platform.mid{border-color:var(--accent)}
.hc-platform.low{border-color:var(--warn)}
.hcp-label{font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em;font-size:9px;color:var(--muted);font-weight:600}
.hcp-score{font-family:var(--serif);font-weight:800;font-size:13px;color:var(--text)}
/* Editor coach (specific actionable suggestions per clip) */
.hc-coach{margin-top:10px;padding-top:10px;border-top:1px dashed var(--border)}
.hc-coach-label{font-size:9px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.12em;color:var(--accent);font-weight:700;margin-bottom:6px}
.hc-coach-list{margin:0;padding:0;list-style:none}
.hc-coach-list li{font-size:11.5px;color:var(--text);line-height:1.5;padding:3px 0 3px 18px;position:relative}
.hc-coach-list li::before{content:'→';position:absolute;left:0;color:var(--accent);font-weight:700}

/* Advanced settings section — collapsible drawer for power-user controls.
   Default state: closed (matches the "fewer choices upfront" UX principle).
   Open state persists per-browser via localStorage so repeat users keep
   their preference. The controls inside are functional whether the drawer
   is open or closed — collapsing only hides them, it doesn't reset values. */
.adv-section{border-top:1px solid var(--border);padding-top:8px;margin-top:4px}
.adv-header{width:100%;display:flex;align-items:center;justify-content:space-between;background:none;border:none;padding:6px 0;cursor:pointer;font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:var(--subtle);outline:none}
.adv-header:hover{color:var(--text)}
.adv-header-label{display:flex;align-items:center;gap:6px}
.adv-chevron{display:inline-block;transition:transform .18s ease;font-size:9px;color:var(--subtle)}
.adv-section.open .adv-chevron{transform:rotate(180deg)}
.adv-body{display:none;flex-direction:column;gap:14px;padding-top:8px}
.adv-section.open .adv-body{display:flex}

/* Timeline view — multi-track visualization above the trim waveform.
   Each row shows ONE track type (captions, music, b-roll, sfx). Click any
   row to scrub the video preview to that point. Editing still happens via
   the existing Studio panel and trim handles; this is the "what's on this
   clip at a glance" layer. */
.timeline-section{padding:10px 20px 4px;border-bottom:1px solid var(--border);position:relative;flex-shrink:0;display:none}
.timeline-section.active{display:block}
.timeline-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.timeline-hdr-label{font-size:10px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--subtle)}
.timeline-hdr-dur{font-size:11px;font-family:var(--mono);color:var(--muted)}
.timeline-tracks{display:flex;flex-direction:column;gap:4px}
.tl-row{display:flex;align-items:center;gap:12px}
.tl-row-label{font-size:10px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.12em;color:var(--subtle);flex-shrink:0;min-width:64px;text-align:right}
.tl-row-stage{position:relative;flex:1;height:17px;border-radius:4px;background:#241f19;box-shadow:inset 0 1px 2px rgba(0,0,0,.28);cursor:pointer;overflow:hidden}
.tl-row-stage:hover{background:#2c2620}
.tl-seg{position:absolute;top:2px;bottom:2px;border-radius:3px;pointer-events:none}
.tl-seg-caption{background:linear-gradient(180deg,#f4cf66,#e7b531);opacity:.96}
.tl-seg-music{background:linear-gradient(180deg,#74b8df,#4f9ac8);opacity:.96}
.tl-seg-broll{background:linear-gradient(180deg,#b87fd8,#9d5cc4);opacity:.96;box-shadow:0 0 0 1px rgba(167,107,204,.4)}
.tl-marker{position:absolute;top:-1px;bottom:-1px;width:3px;background:#e35454;border-radius:1px;box-shadow:0 0 6px rgba(227,84,84,.6);pointer-events:none}
.tl-row-empty .tl-row-stage{opacity:.35}
.tl-row-empty .tl-row-stage::after{content:'—';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:10px;color:var(--subtle);font-family:var(--mono)}

/* FX track — drag-and-drop effect placement */
.tl-row-fx .tl-row-stage{min-height:30px;background:#241f19;cursor:copy}
.tl-row-fx .tl-row-stage.drag-over{background:#3a2e22;outline:1px dashed var(--accent)}
.tl-row-fx-hint{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:10px;color:var(--subtle);font-family:var(--mono);pointer-events:none;letter-spacing:.05em;opacity:.7}
.tl-row-fx-hint.hidden{display:none}
.tl-fx-pill{position:absolute;top:2px;bottom:2px;border-radius:3px;padding:0 4px;display:flex;align-items:center;gap:3px;font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.06em;cursor:grab;user-select:none;background:rgba(255,91,34,.85);border:1px solid var(--accent);color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.4);min-width:8px;white-space:nowrap;z-index:2}
.tl-fx-pill:hover{background:var(--accent);z-index:3}
.tl-fx-pill.dragging{cursor:grabbing;opacity:.85;z-index:10}
.tl-fx-pill[data-type="zoom"]{background:rgba(255,91,34,.85);border-color:var(--accent)}
.tl-fx-pill[data-type="shake"]{background:rgba(200,16,38,.85);border-color:#c81026}
.tl-fx-pill[data-type="flash"]{background:rgba(245,239,227,.92);border-color:#fff;color:#1a1a1a}
.tl-fx-pill[data-type="overlay"]{background:linear-gradient(90deg,rgba(255,150,40,.9),rgba(255,91,34,.9));border-color:#ff9628}
.tl-fx-pill[data-type="colorpop"]{background:rgba(240,192,66,.85);border-color:#f0c042;color:#2a2010}
.tl-fx-pill[data-type="vignette"]{background:rgba(95,168,211,.85);border-color:#5fa8d3}
.tl-fx-pill[data-type="slowmo"]{background:rgba(167,107,204,.85);border-color:#a76bcc}
.tl-fx-pill .pill-edge{position:absolute;top:0;bottom:0;width:5px;cursor:ew-resize;background:rgba(255,255,255,.2)}
.tl-fx-pill .pill-edge.left{left:0}
.tl-fx-pill .pill-edge.right{right:0}
.tl-fx-pill .pill-edge:hover{background:rgba(255,255,255,.55)}
.tl-fx-pill .pill-x{cursor:pointer;font-size:11px;font-weight:700;opacity:.7;padding:0 1px;line-height:1}
.tl-fx-pill .pill-x:hover{opacity:1}
.tl-fx-pill .pill-label{pointer-events:none;overflow:hidden}
/* Playhead — vertical line on FX row showing current preview-video time */
.tl-fx-playhead{position:absolute;top:-2px;bottom:-2px;width:2px;background:#fff;border-radius:1px;pointer-events:none;box-shadow:0 0 4px rgba(255,255,255,.65);z-index:4;display:none}

/* Palette of draggable FX chips above the timeline */
.fx-palette{display:flex;gap:5px;padding:6px 20px 8px;border-bottom:1px solid var(--border);background:var(--surf2);align-items:center;flex-wrap:wrap}
.fx-palette-label{font-size:9px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--subtle);margin-right:4px}
.fx-chip{padding:5px 9px;background:var(--surf3);border:1px solid var(--border2);border-radius:4px;font-size:10px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--text);cursor:grab;user-select:none;transition:all .12s}
.fx-chip:hover{background:var(--accent);color:#fff;border-color:var(--accent);transform:translateY(-1px)}
.fx-chip:active,.fx-chip.dragging{cursor:grabbing;opacity:.7;transform:scale(.96)}
.fx-chip[data-type="zoom"]::before{content:'🔍 '}
.fx-chip[data-type="shake"]::before{content:'💥 '}
.fx-chip[data-type="flash"]::before{content:'⚡ '}
.fx-chip[data-type="colorpop"]::before{content:'🎨 '}
.fx-chip[data-type="vignette"]::before{content:'⬛ '}
.fx-chip[data-type="slowmo"]::before{content:'⏱ '}
.fx-palette-hint{font-size:9px;color:var(--subtle);font-family:var(--mono);margin-left:auto;letter-spacing:.05em}

/* Waveform + trim */
.waveform-section{padding:10px 20px;border-bottom:1px solid var(--border);position:relative;flex-shrink:0}
.wf-row{display:flex;align-items:center;gap:12px}
.wf-label{font-size:10px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--subtle);flex-shrink:0;min-width:32px}
.wf-stage{position:relative;flex:1;height:48px;border-radius:4px;overflow:hidden;background:#2a2620;touch-action:none}
#waveform-canvas{width:100%;height:48px;display:block;cursor:pointer;border-radius:4px}
.waveform-playhead{position:absolute;top:6px;bottom:6px;width:2px;background:var(--accent);border-radius:1px;pointer-events:none;opacity:0;transition:opacity .2s;z-index:3}
.wf-mask{position:absolute;top:0;bottom:0;background:rgba(245,239,227,.62);backdrop-filter:saturate(0) brightness(.9);pointer-events:none;z-index:1}
.wf-mask-left{left:0;width:0}
.wf-mask-right{right:0;width:0}
.wf-handle{position:absolute;top:0;bottom:0;width:14px;cursor:ew-resize;z-index:2;display:flex;align-items:center;justify-content:center;background:var(--accent);box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.wf-handle-left{left:0;border-radius:4px 0 0 4px}
.wf-handle-right{right:0;border-radius:0 4px 4px 0}
.wf-grip{width:2px;height:20px;background:rgba(255,255,255,.8);border-radius:1px;box-shadow:-3px 0 0 -1px rgba(255,255,255,.6),3px 0 0 -1px rgba(255,255,255,.6)}
.wf-handle:hover,.wf-handle.dragging{filter:brightness(1.1)}
.wf-times{display:flex;align-items:center;gap:5px;font-size:11px;font-family:var(--mono);color:var(--muted);flex-shrink:0}
.wf-t{min-width:32px;text-align:center}
.wf-t-sep{color:var(--subtle)}
.wf-reset{background:none;border:1px solid var(--border2);border-radius:4px;color:var(--subtle);cursor:pointer;font-size:13px;padding:1px 6px;margin-left:4px;line-height:1;display:none}
.wf-reset.active{display:inline-block;color:var(--accent);border-color:var(--accent)}
.wf-reset:hover{color:var(--text);border-color:var(--text)}
@media(max-width:600px){
  .wf-row{flex-wrap:wrap}
  .wf-label{min-width:auto}
  .wf-times{width:100%;justify-content:center}
  .wf-handle{width:18px}
}

/* Transcript */
.transcript-section{padding:16px 20px;flex:1;overflow-y:auto}
.ts-header{font-size:10px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--subtle);margin-bottom:12px;display:flex;align-items:center;gap:10px}
.ts-lang-badge{padding:2px 7px;background:var(--surf2);border:1px solid var(--border);border-radius:4px;font-size:9px;text-transform:uppercase}
.transcript-words{font-size:14px;line-height:2;color:var(--muted)}
.ts-word{cursor:text;border-radius:3px;padding:1px 2px;transition:background .1s,color .1s;display:inline-block;outline:none}
.ts-word:hover{color:var(--text);background:var(--surf3)}
.ts-word.current{background:rgba(255,91,34,.25);color:var(--text)}
.ts-word.edited{color:var(--accent);background:rgba(255,91,34,.06);border-bottom:1.5px dotted var(--accent)}
.ts-word:focus{background:var(--surf3);color:var(--text);box-shadow:0 0 0 2px rgba(255,91,34,.35)}
.ts-toolbar{display:flex;align-items:center;gap:10px;font-size:11px;font-family:var(--mono);color:var(--subtle);margin-bottom:8px}
.ts-edit-count{color:var(--accent)}
.ts-reset-edits{background:none;border:1px solid var(--border2);border-radius:4px;padding:2px 8px;color:var(--subtle);cursor:pointer;font-family:var(--mono);font-size:10px}
.ts-reset-edits:hover{color:var(--text);border-color:var(--text)}
.ts-hint{color:var(--subtle);font-style:italic;font-family:var(--serif);font-size:11px}

/* ── Right rail (clips) ── */
.clips-rail{width:var(--clips-w);flex-shrink:0;background:var(--surf);border-left:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden}
.rail-hdr{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--border);flex-shrink:0}
.rail-title{font-size:12px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.rail-dl-all{background:none;border:1px solid var(--border2);border-radius:5px;padding:4px 10px;font-size:10px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--muted);cursor:pointer}
.rail-dl-all:hover{color:var(--text);border-color:var(--border2)}

.clips-scroll{flex:1;overflow-y:auto;overflow-x:hidden}
.rail-empty-msg{padding:40px 20px;text-align:center;font-size:12px;color:var(--subtle);line-height:1.6}

/* Clip card in rail */
.clip-card{border-bottom:1px solid var(--border);cursor:pointer;transition:background var(--dur-1) var(--ease);position:relative}
.clip-card:hover{background:var(--surf2)}
.clip-card.selected{background:rgba(255,91,34,.06);border-left:2px solid var(--accent)}
.cc-thumb{width:100%;aspect-ratio:9/16;background:#000;display:block;object-fit:cover;max-height:180px}
.cc-thumb-placeholder{width:100%;height:140px;background:var(--surf3);display:flex;align-items:center;justify-content:center;color:var(--subtle);font-size:20px}
.cc-body{padding:10px 12px}
.cc-top{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.cc-score{font-size:16px;font-weight:800;color:var(--accent);font-family:var(--mono)}
/* Virality score — a 0–100 prediction shown prominently like OpusClip's. */
.vir-badge{display:inline-flex;align-items:baseline;gap:1px;font-family:var(--mono);font-weight:800;font-size:15px;line-height:1;padding:3px 7px;border-radius:var(--r-1);color:#fff;white-space:nowrap;box-shadow:var(--sh-1)}
.vir-badge .vir-cap{font-size:9px;font-weight:700;opacity:.85}
.vir-hi{background:var(--accent2)}   /* green  ≥80: strong */
.vir-mid{background:var(--accent)}   /* orange 60–79: decent */
.vir-lo{background:var(--muted)}     /* muted  <60: weak */
.vir-you{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5), 0 1px 3px rgba(90,55,15,.18), 0 0 11px rgba(255,91,34,.34)}  /* calibrated to YOUR audience — premium ring + warm glow */
.vir-you .vir-cap{opacity:1;font-weight:800}
.cib-score .vir-badge{font-size:18px}
.cc-times{font-size:10px;font-family:var(--mono);color:var(--subtle)}
.cc-primary-badge{font-size:9px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.1em;padding:2px 6px;background:rgba(255,91,34,.15);border:1px solid var(--accent);color:var(--accent);border-radius:3px}
.cc-cue-badge{font-size:9px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.1em;padding:2px 6px;background:rgba(80,180,255,.13);border:1px solid #50b4ff;color:#50b4ff;border-radius:3px}
.cc-longform-badge{font-size:9px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.1em;padding:2px 6px;background:rgba(255,91,34,.18);border:1px solid var(--accent);color:var(--accent);border-radius:3px;font-weight:700}
/* Hero card for the full polished video in 'both' mode — distinct visual
   container so users immediately see "your polished video" vs "your clips". */
.rail-section-label{font-size:9px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.18em;color:var(--subtle);padding:14px 12px 8px;border-bottom:1px solid var(--border);background:var(--surf2)}
.clip-card.is-hero{background:linear-gradient(135deg, rgba(255,91,34,.07), rgba(255,91,34,.02));border-bottom:2px solid var(--accent)}
.clip-card.is-hero .cc-thumb{max-height:240px;aspect-ratio:16/9}
.cc-hook{font-size:12px;color:var(--text);font-style:italic;line-height:1.4;margin-bottom:6px}
.cc-reason{font-size:11px;color:var(--muted);line-height:1.4;margin-bottom:8px}
.cc-actions{display:flex;gap:6px}
.cc-btn{padding:5px 10px;background:none;border:1px solid var(--border2);border-radius:5px;font-size:10px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--muted);cursor:pointer;text-decoration:none;display:inline-block}
.cc-btn:hover{color:var(--text);border-color:var(--border2)}
.cc-btn.dl{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700}
.cc-btn.dl:hover{opacity:.9}
.cc-rendering{font-size:11px;font-family:var(--mono);color:var(--accent);display:flex;align-items:center;gap:6px}

/* Per-clip feedback (Slice 8a) — thumbs + reason picker. Captures explicit
   like/dislike signals that 8b will use to bias future scoring. Tightly
   integrated into the existing clip-card layout so it never feels like a
   bolt-on. */
.cc-feedback{display:flex;align-items:center;gap:6px;margin-top:8px;position:relative}
.cc-thumb-btn{background:none;border:1px solid var(--border2);border-radius:5px;padding:4px 9px;font-size:14px;line-height:1;cursor:pointer;color:var(--muted);transition:transform .08s,background .15s,border-color .15s}
.cc-thumb-btn:hover{color:var(--text);border-color:var(--text);transform:scale(1.06)}
.cc-thumb-btn.rated{cursor:default;transform:none}
.cc-thumb-btn.rated:hover{transform:none}
.cc-thumb-btn.rated-up{background:rgba(76,175,80,.18);border-color:#4caf50;color:#4caf50}
.cc-thumb-btn.rated-down{background:rgba(227,84,84,.18);border-color:#e35454;color:#e35454}
.cc-feedback-thanks{font-size:10px;font-family:var(--mono);color:var(--subtle);text-transform:uppercase;letter-spacing:.1em;opacity:0;transition:opacity .25s}
.cc-feedback-thanks.show{opacity:1}
/* Reason popover for 👎 — fast, 6 buttons + free-text note. No modal-overlay
   ceremony since this is a per-card affordance. */
.cc-reason-pop{position:absolute;top:100%;left:0;right:0;margin-top:6px;background:var(--surf);border:1px solid var(--border2);border-radius:6px;padding:10px;z-index:5;box-shadow:0 6px 18px rgba(0,0,0,.18);display:none}
.cc-reason-pop.open{display:block}
.cc-reason-pop-title{font-size:10px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.12em;color:var(--subtle);margin-bottom:6px}
.cc-reason-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-bottom:6px}
.cc-reason-btn{padding:4px 6px;background:var(--surf2);border:1px solid var(--border2);border-radius:4px;font-size:10px;color:var(--text);cursor:pointer;text-align:left}
.cc-reason-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.cc-reason-pop-close{background:none;border:none;font-size:11px;color:var(--subtle);cursor:pointer;padding:2px 0;width:100%;text-align:right}
.cc-reason-pop-close:hover{color:var(--text)}

/* Effects panel */
.effects-panel{border-top:1px solid var(--border);padding:14px;background:var(--surf);flex-shrink:0;overflow-y:auto;max-height:55vh}
.ep-title{font-size:13px;font-family:var(--brand);font-weight:800;color:var(--text);margin-bottom:2px;letter-spacing:.01em}
.ep-title-sub{font-size:11px;font-weight:400;color:var(--muted);font-family:var(--mono)}
.ep-title-hint{font-size:11px;color:var(--muted);margin-bottom:14px;line-height:1.5}
/* Group heading — friendlier than the old mono-uppercase tag.
   Title-case word + 1-line description so users get oriented at a glance. */
.ep-group{margin-top:18px;margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid rgba(255,91,34,.15)}
.ep-group-title{font-size:12px;font-family:var(--brand);font-weight:700;color:var(--accent);letter-spacing:.01em;margin-bottom:2px}
.ep-group-sub{font-size:10px;color:var(--muted);line-height:1.45}
.ep-group-label{font-size:10px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.18em;color:var(--accent);margin-top:14px;margin-bottom:8px;padding-bottom:4px;border-bottom:1px solid rgba(255,91,34,.15)}
.ep-help{display:inline-block;margin-left:4px;width:14px;height:14px;line-height:14px;text-align:center;border-radius:99px;background:var(--surf2);color:var(--muted);font-size:9px;font-weight:700;cursor:help;vertical-align:middle}
.ep-help:hover{background:var(--accent);color:#fff}
.ep-section{margin-bottom:14px}
.ep-label{font-size:11px;color:var(--text);font-weight:600;margin-bottom:3px;letter-spacing:.005em}
.ep-sublabel{font-size:10px;color:var(--muted);margin-bottom:7px;line-height:1.4}
.ep-toggle-group{margin-bottom:9px}
.ep-toggle-group-label{font-size:10px;color:var(--subtle);font-family:var(--mono);text-transform:uppercase;letter-spacing:.12em;margin-bottom:4px}
.ep-btns{display:flex;flex-wrap:wrap;gap:4px}
.ep-btn{padding:4px 9px;background:var(--surf2);border:1px solid var(--border);border-radius:4px;font-size:10px;font-family:var(--mono);color:var(--muted);cursor:pointer;transition:all .1s}
.ep-btn:hover{border-color:var(--border2);color:var(--text)}
.ep-btn.active{background:rgba(255,91,34,.15);border-color:var(--accent);color:var(--accent)}
.ep-btn.popular::after{content:" ★";font-size:7px;color:#f5c518;vertical-align:super}
.ep-toggles{display:flex;flex-direction:column;gap:6px}
.ep-toggle{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted);cursor:pointer}
.ep-toggle input{accent-color:var(--accent);width:13px;height:13px}
.ep-actions{display:flex;gap:8px;margin-top:12px}
.ep-sublabel{font-size:9px;color:var(--subtle);font-family:var(--mono);text-transform:none;letter-spacing:0;margin-left:6px;font-weight:normal}
.ep-reframe{display:flex;align-items:center;gap:8px}
.ep-reframe input[type=range]{flex:1;accent-color:var(--accent);height:18px;touch-action:none}
.ep-reframe-end{font-size:9px;font-family:var(--mono);color:var(--subtle);text-transform:uppercase;letter-spacing:.1em}
.ep-reframe-reset{background:none;border:1px solid var(--border2);border-radius:4px;color:var(--subtle);cursor:pointer;font-size:13px;padding:0 6px;line-height:1.4}
.ep-reframe-reset.active{color:var(--accent);border-color:var(--accent)}
.ep-reframe-reset:hover{color:var(--text);border-color:var(--text)}
.ep-reframe-readout{font-size:10px;font-family:var(--mono);color:var(--subtle);margin-top:6px;text-align:center}
.ep-reframe-readout.changed{color:var(--accent)}
.ep-auto{flex:1;padding:8px;background:none;border:1px solid var(--accent);border-radius:6px;font-size:11px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--accent);cursor:pointer}
.ep-auto:hover{background:rgba(255,91,34,.1)}
.ep-save-sig{display:block;width:100%;margin-top:8px;padding:6px;background:transparent;border:1px dashed var(--border2);border-radius:6px;font-size:10.5px;font-family:var(--mono);letter-spacing:.04em;color:var(--muted);cursor:pointer}
.ep-save-sig:hover{border-color:#c81026;color:#c81026}
/* Action hierarchy: ONE bold primary (Re-render, full-width below) + two quiet
   neutral shortcuts above. Calm, pro — not three buttons competing in 3 colors. */
.ep-signature,.ep-mystyle{flex:1;padding:8px 10px;background:transparent;border:1px solid var(--border2);border-radius:6px;font-size:10.5px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);cursor:pointer;transition:border-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
.ep-signature:hover,.ep-mystyle:hover{border-color:var(--accent);color:var(--text)}
.ep-signature.applied,.ep-mystyle.applied{background:var(--accent);border-color:var(--accent);color:#fff}
.ep-signature:disabled,.ep-mystyle:disabled{opacity:.5;cursor:wait}
.ep-rerender{flex:1 1 100%;padding:13px;background:var(--accent);border:none;border-radius:7px;font-size:12.5px;font-family:var(--mono);font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:#fff;cursor:pointer;box-shadow:var(--sh-1);transition:opacity var(--dur-1) var(--ease)}
.ep-rerender:hover{opacity:.92}
.ep-rerender:disabled{opacity:.45;cursor:wait}
.ep-rerender:disabled{opacity:.45;cursor:wait}
.ep-moment-add{display:flex;gap:6px;align-items:center;margin-bottom:8px;flex-wrap:wrap}
.ep-moment-select{flex:0 0 auto;padding:6px 8px;background:var(--surf2);border:1px solid var(--border);border-radius:5px;font-size:12px;color:var(--text);font-family:var(--mono)}
.ep-moment-time{width:64px;padding:6px 8px;background:var(--surf2);border:1px solid var(--border);border-radius:5px;font-size:12px;color:var(--text);font-family:var(--mono)}
.ep-moment-add-btn{flex:0 0 auto;padding:6px 12px;background:var(--surf2);border:1px solid var(--accent);border-radius:5px;font-size:11px;font-weight:700;color:var(--accent);cursor:pointer;font-family:var(--mono)}
.ep-moment-add-btn:hover{background:var(--accent);color:#fff}
.ep-moments-list{display:flex;flex-direction:column;gap:4px}
.ep-moment-chip{display:flex;align-items:center;justify-content:space-between;padding:5px 10px;background:var(--surf2);border:1px solid var(--border);border-radius:5px;font-size:12px;font-family:var(--mono)}
.ep-moment-chip-x{cursor:pointer;color:var(--err);font-weight:700;padding:0 4px;border:none;background:none;font-size:14px}
.ep-moment-chip-x:hover{opacity:.7}
.ep-status{font-size:11px;font-family:var(--mono);color:var(--muted);margin-top:8px;text-align:center}
/* Thumbnail Studio */
.thumb-studio{margin-top:6px}
.thumb-studio-empty{text-align:center;padding:14px 8px;border:1px dashed var(--border);border-radius:6px;background:rgba(255,91,34,.03)}
.thumb-studio-gen{padding:8px 14px;background:var(--accent);border:none;border-radius:5px;color:#fff;font-size:11px;font-family:var(--mono);font-weight:700;text-transform:uppercase;letter-spacing:.1em;cursor:pointer}
.thumb-studio-gen:hover{opacity:.9}
.thumb-studio-gen:disabled{opacity:.5;cursor:wait}
.thumb-studio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.thumb-studio-card{position:relative;cursor:pointer;border:2px solid transparent;border-radius:5px;overflow:hidden;background:#000;aspect-ratio:9/16;transition:border-color .15s,transform .15s}
.thumb-studio-card:hover{border-color:var(--muted);transform:translateY(-1px)}
.thumb-studio-card.active{border-color:var(--accent)}
.thumb-studio-card img{width:100%;height:100%;object-fit:cover;display:block}
.thumb-studio-card-badge{position:absolute;top:4px;left:4px;background:rgba(0,0,0,.65);color:#fff;font-family:var(--mono);font-size:9px;padding:1px 5px;border-radius:3px;letter-spacing:.05em}
.thumb-studio-card.active .thumb-studio-card-badge{background:var(--accent)}
.thumb-studio-status{font-size:11px;font-family:var(--mono);color:var(--muted);text-align:center;padding:14px}

/* Content panel */
.content-panel{border-top:1px solid var(--border);padding:12px 14px;background:var(--surf);flex-shrink:0}
.cp-label{font-size:10px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin-bottom:10px}
.cp-section{margin-bottom:10px}
.cp-section-title{font-size:9px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.12em;color:var(--accent);margin-bottom:5px}
.cp-item{display:flex;gap:8px;align-items:flex-start;margin-bottom:4px;font-size:11px;color:var(--text);line-height:1.4}
.cp-num{font-family:var(--mono);color:var(--subtle);min-width:14px;flex-shrink:0}
.cp-copy{background:none;border:none;color:var(--subtle);cursor:pointer;padding:0;font-size:12px;line-height:1;flex-shrink:0}
.cp-copy:hover{color:var(--accent)}
.cp-copy.copied{color:var(--accent2)}
.cp-tags{font-size:11px;color:var(--muted);font-family:var(--mono);line-height:1.7;word-break:break-word}
/* Audience-tuned content-pack tabs */
.cp-tabs{display:flex;gap:4px;margin-bottom:10px;border-bottom:1px solid var(--border);padding-bottom:0}
.cp-tab{flex:1;background:none;border:none;border-bottom:2px solid transparent;padding:6px 4px;font-size:10.5px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--muted);cursor:pointer;transition:color .15s ease,border-color .15s ease}
.cp-tab:hover{color:var(--text)}
.cp-tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.cp-pack-body{display:flex;flex-direction:column;gap:8px}
.cp-copy-all{background:rgba(255,91,34,.08);border:1px solid rgba(255,91,34,.25);border-radius:4px;padding:4px 8px;font-size:10px;font-family:var(--mono);letter-spacing:.04em;color:var(--accent);cursor:pointer}
.cp-copy-all:hover{background:var(--accent);color:#fff}

/* Feedback panel */
.feedback-panel{border-top:1px dashed var(--border);padding:10px 14px;flex-shrink:0}
.fb-label{font-size:10px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.12em;color:var(--subtle);margin-bottom:8px}
.fb-btns{display:flex;flex-wrap:wrap;gap:4px}
.fb-btn{padding:4px 9px;background:none;border:1px solid var(--border);border-radius:4px;font-size:10px;font-family:var(--mono);color:var(--subtle);cursor:pointer}
.fb-btn:hover{border-color:var(--border2);color:var(--text)}
.fb-btn.sent{background:rgba(74,138,101,.12);border-color:var(--accent2);color:var(--accent2);cursor:default}

/* ── Modals ── */
.modal-backdrop{position:fixed;inset:0;background:rgba(20,10,4,.60);z-index:200;display:none;align-items:center;justify-content:center;padding:20px}
.modal-backdrop.open{display:flex}
.modal{background:var(--surf);border:1px solid var(--border2);border-radius:var(--radius);width:100%;max-width:540px;max-height:90vh;overflow-y:auto;position:relative}
.modal-hdr{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--border)}
.modal-hdr h2{font-size:16px;font-weight:700}
.modal-close{background:var(--surf2);border:1px solid var(--border2);border-radius:50%;width:32px;height:32px;font-size:22px;color:var(--muted);cursor:pointer;line-height:1;display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0}
.modal-close:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.modal-body{padding:24px}

/* Recut — long-form Video studio timeline (split a finished video, drop the
   weak stretches, keep what's worth posting). Restraint: thin lines, mono
   labels, accent only on the "keep" segments + Apply. */
.recut-modal{max-width:700px}
.recut-video{width:100%;max-height:46vh;background:#000;border-radius:var(--r-2);display:block}
.recut-hint{font-size:12px;color:var(--muted);margin:11px 2px 9px;line-height:1.5}
.recut-tl-wrap{position:relative;margin:6px 0 2px}
.recut-tl{display:flex;gap:2px;height:48px;width:100%;border-radius:6px;overflow:hidden;background:var(--surf2)}
.recut-seg{position:relative;min-width:5px;background:linear-gradient(180deg,rgba(255,91,34,.17),rgba(255,91,34,.07));border:1px solid rgba(255,91,34,.32);cursor:pointer;display:flex;align-items:flex-end;justify-content:center;padding-bottom:4px;transition:background .12s,opacity .12s}
.recut-seg:hover{background:rgba(255,91,34,.26)}
.recut-seg.dropped{background:repeating-linear-gradient(45deg,rgba(122,96,64,.12),rgba(122,96,64,.12) 6px,transparent 6px,transparent 12px);border-color:var(--border2);opacity:.55}
.recut-seg-label{font-family:var(--mono);font-size:9px;color:var(--muted);pointer-events:none;white-space:nowrap}
.recut-seg.dropped .recut-seg-label{text-decoration:line-through}
.recut-playhead{position:absolute;top:0;bottom:0;width:2px;background:var(--text);pointer-events:none;left:0;transform:translateX(-1px)}
.recut-controls{display:flex;align-items:center;gap:10px;margin:13px 0 2px;flex-wrap:wrap}
.recut-btn{padding:8px 12px;background:var(--surf2);border:1px solid var(--border2);border-radius:6px;font-family:var(--mono);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text);cursor:pointer}
.recut-btn:hover{border-color:var(--accent);color:var(--accent)}
.recut-btn.ghost{opacity:.7}
.recut-readout{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--muted)}
.recut-apply-row{display:flex;align-items:center;gap:12px;margin-top:14px}
.recut-apply{padding:11px 20px;background:var(--accent);border:none;border-radius:8px;font-family:var(--mono);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:#fff;cursor:pointer}
.recut-apply:hover{opacity:.92}
.recut-apply:disabled{opacity:.45;cursor:not-allowed}
.recut-status{font-size:12px;color:var(--muted)}
.recut-result{margin-top:16px;padding-top:14px;border-top:1px solid var(--border)}
.recut-result a{color:var(--accent);font-weight:700;text-decoration:none}

/* Pricing */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:560px){.pricing-grid{grid-template-columns:1fr}}
.price-card{background:var(--surf2);border:1px solid var(--border);border-radius:var(--radius);padding:20px;position:relative}
.price-card.featured{border-color:var(--accent)}
.price-badge{position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:var(--accent);color:#fff;font-size:10px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.12em;padding:3px 10px;border-radius:10px;white-space:nowrap}
.price-tier{font-size:11px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin-bottom:8px}
.price-amount{font-size:28px;font-weight:800;margin-bottom:4px}
.price-amount span{font-size:14px;font-weight:400;color:var(--muted)}
.price-period{font-size:11px;color:var(--subtle);margin-bottom:16px}
.price-features{list-style:none;font-size:12px;color:var(--muted);display:flex;flex-direction:column;gap:6px;margin-bottom:20px}
.price-features li::before{content:'✓ ';color:var(--accent2)}
.price-cta{width:100%;padding:10px;background:var(--accent);border:none;border-radius:6px;font-size:13px;font-weight:700;color:#fff;cursor:pointer;text-align:center;display:block;text-decoration:none}
.price-cta:hover{opacity:.9}
.price-cta.free-cta{background:var(--surf3);color:var(--text)}

/* YouTube cookies status pill */
.yt-cookies-status{font-size:11px;padding:4px 10px;border-radius:99px;display:inline-block;margin-bottom:8px;background:rgba(122,96,64,.12);color:var(--muted);font-weight:600;letter-spacing:.03em}
.yt-cookies-status.set{background:rgba(74,138,101,.15);color:var(--accent2)}
.yt-cookies-banner{font-size:12.5px;padding:9px 12px;border-radius:6px;margin-bottom:10px;line-height:1.45;display:none}
.yt-cookies-banner.warn{display:block;background:rgba(220,158,40,.12);border:1px solid rgba(220,158,40,.35);color:#9a6b00}
.yt-cookies-banner.expired{display:block;background:rgba(200,60,60,.10);border:1px solid rgba(200,60,60,.35);color:var(--err)}
/* Account modal */
.acct-tier-benefits{font-size:11px;color:var(--subtle);font-family:var(--mono);line-height:1.6;margin:6px 0 10px;padding:8px 12px;background:var(--surf2);border-radius:6px}
.ys-section{border-top:1px solid var(--border);margin-top:10px;padding-top:12px}
.ys-hdr{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--subtle);display:flex;align-items:center;gap:8px;margin-bottom:8px}
.ys-level-badge{font-size:10px;font-weight:700;color:var(--accent2);background:rgba(74,138,101,.12);border:1px solid var(--accent2);border-radius:var(--r-pill);padding:2px 9px;text-transform:capitalize;letter-spacing:0}
.ys-signals{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.ys-chip{font-size:11px;color:var(--text);background:var(--surf2);border:1px solid var(--border2);border-radius:var(--r-pill);padding:3px 10px}
.ys-empty{font-size:11px;color:var(--subtle);line-height:1.5}
.ys-calib{font-size:11.5px;line-height:1.5;color:var(--text);background:linear-gradient(135deg,rgba(255,91,34,.10),rgba(74,138,101,.08));border:1px solid var(--border2);border-radius:var(--r-2);padding:10px 12px;margin-bottom:8px;width:100%;box-shadow:var(--sh-1)}
.ys-calib-cold{color:var(--muted)}
/* Train your AI with a video — the learning flywheel, made tangible */
.ys-train{margin-top:14px}
.ys-train-hdr{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--accent);margin-bottom:5px}
.ys-train-sub{font-size:12px;color:var(--muted);line-height:1.5;margin-bottom:10px}
.ys-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;text-align:center;
  padding:22px 14px;border:1.5px dashed var(--border2);border-radius:var(--r-2);background:var(--surf2);
  color:var(--subtle);font-size:12.5px;cursor:pointer;transition:border-color .18s,background .18s,color .18s}
.ys-drop:hover{border-color:var(--accent);color:var(--muted)}
.ys-drop.dragover{border-color:var(--accent);background:rgba(255,91,34,.06);color:var(--text)}
.ys-drop.has-file{border-style:solid;border-color:var(--accent2);background:rgba(74,138,101,.06);color:var(--text)}
.ys-drop-icon{font-size:18px;line-height:1;opacity:.8}
.ys-drop u{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--accent)}
.ys-train-msg{font-size:12px;margin-top:8px;min-height:1px}
.ys-learned{margin-top:10px;background:linear-gradient(135deg,rgba(255,91,34,.10),rgba(74,138,101,.08));
  border:1px solid var(--border2);border-radius:var(--r-2);padding:11px 13px;box-shadow:var(--sh-1)}
.ys-learned-hdr{font-size:11px;font-weight:700;color:var(--accent2);text-transform:uppercase;letter-spacing:.08em;margin-bottom:7px}
.ys-learned ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.ys-learned li{font-size:12.5px;color:var(--text);line-height:1.4;display:flex;gap:7px;align-items:flex-start}
.ys-learned li::before{content:"✓";color:var(--accent2);font-weight:700;flex:0 0 auto}
.ys-train-btn[disabled]{opacity:.45;cursor:not-allowed}
/* Growth dashboard */
.growth-stat{text-align:center;padding:14px 0 6px}
.growth-stat-num{font-family:var(--mono);font-size:34px;font-weight:800;color:var(--accent);line-height:1}
.growth-stat-lbl{font-size:11px;color:var(--subtle);margin-top:4px}
.growth-winning{background:linear-gradient(135deg,rgba(255,91,34,.12),rgba(74,138,101,.10));border:1px solid var(--border2);border-radius:var(--r-2);padding:12px 14px;margin:12px 0;display:flex;flex-direction:column;gap:10px;box-shadow:var(--sh-1)}
.growth-winning-txt{font-size:13px;color:var(--text);line-height:1.5}
.growth-more-btn{align-self:flex-start;background:var(--accent);color:#fff;border:none;border-radius:var(--r-2);padding:8px 14px;font-size:12px;font-weight:700;cursor:pointer;box-shadow:var(--sh-1);transition:filter var(--dur-1) var(--ease),transform var(--dur-1) var(--ease)}
.growth-more-btn:hover{filter:brightness(1.06);transform:translateY(-1px)}
.growth-list-hdr{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--subtle);margin:14px 0 6px}
.growth-list{display:flex;flex-direction:column;gap:4px}
.growth-row{display:flex;justify-content:space-between;align-items:center;padding:7px 10px;background:var(--surf2);border-radius:6px;font-size:12px}
.growth-plat{text-transform:capitalize;color:var(--muted)}
.growth-views{font-family:var(--mono);font-weight:700;color:var(--text)}
.growth-empty{text-align:center;padding:30px 16px}
.growth-empty-icon{font-size:40px}
.growth-empty-title{font-size:16px;font-weight:700;margin:8px 0 6px}
.growth-empty-text{font-size:12.5px;color:var(--subtle);line-height:1.6;max-width:380px;margin:0 auto}
.acct-tier-benefits ul{list-style:none;padding:0;margin:0}
.acct-tier-benefits li::before{content:'✓ ';color:var(--accent2);margin-right:2px}
.acct-comped{font-size:11px;color:var(--accent2);font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em}
.acct-section{margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid var(--border)}
.acct-section:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
.acct-section-title{font-size:11px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin-bottom:12px}
.acct-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.acct-label{font-size:13px;color:var(--muted)}
.acct-value{font-size:13px;font-weight:600;color:var(--text)}
.acct-btn{padding:6px 14px;background:none;border:1px solid var(--border2);border-radius:6px;font-size:12px;color:var(--muted);cursor:pointer}
.acct-btn:hover{color:var(--text);border-color:var(--border2)}
.acct-btn.danger{border-color:rgba(255,69,69,.4);color:var(--err)}
.acct-btn.danger:hover{background:rgba(255,69,69,.1)}
.acct-btn.primary{border-color:var(--accent);color:var(--accent);font-weight:700}
.acct-btn.primary:hover{background:rgba(255,91,34,.1);color:var(--accent)}
.acct-sub-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.acct-sub-link{font-size:11px;color:var(--muted);text-decoration:none;border-bottom:1px dotted var(--border2)}
.acct-sub-link:hover{color:var(--text)}
.acct-input{width:100%;background:var(--surf2);border:1px solid var(--border2);border-radius:6px;padding:9px 12px;font-size:14px;color:var(--text);outline:none;margin-bottom:10px}
.acct-input:focus{border-color:var(--accent)}
.acct-submit{padding:8px 20px;background:var(--accent);border:none;border-radius:6px;font-size:13px;font-weight:700;color:#fff;cursor:pointer}
.acct-submit:hover{opacity:.9}
.acct-ok{font-size:12px;color:var(--accent2);margin-top:5px}
.acct-err{font-size:12px;color:var(--err);margin-top:5px}
.totp-qr{text-align:center;margin-bottom:14px}
.totp-qr img{border-radius:6px;border:2px solid var(--border2)}
.totp-secret{font-family:var(--mono);font-size:11px;color:var(--muted);text-align:center;margin-bottom:12px;word-break:break-all}
.toggle-switch{display:flex;align-items:center;gap:10px;cursor:pointer}
.toggle-switch input{accent-color:var(--accent);width:16px;height:16px}
.toggle-switch span{font-size:13px;color:var(--muted)}

/* Toast */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(16px);background:var(--surf2);border:1px solid var(--border2);color:var(--text);padding:12px 20px;border-radius:var(--radius);font-size:13px;opacity:0;transition:opacity .2s,transform .2s;z-index:999;pointer-events:none;max-width:90vw;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.err{background:rgba(255,69,69,.15);border-color:var(--err);color:var(--err)}
.toast.ok{background:rgba(74,138,101,.15);border-color:var(--accent2);color:var(--accent2)}

/* ════════════════════════════════════════════════════════════════════
   STUDIO EDITOR SHELL  (clip-mode) — one organized editor surface.
   Reuses the global :root tokens (light-cream; --canvas-studio = the
   recessed well that makes the 9:16 video the hero). Classes are
   namespaced .ed-* and stay inert until the editor HTML lands (Phase 2).
   ════════════════════════════════════════════════════════════════════ */
.ed-shell{display:none;flex:1;min-height:0;flex-direction:column;background:var(--bg);overflow:hidden}
.ed-shell.active{display:flex}

/* — top bar: clip context (left) + primary actions (right) — */
.ed-top{display:flex;align-items:center;gap:11px;padding:9px 16px;background:var(--surf);border-bottom:1px solid var(--border);flex-shrink:0}
.ed-eyebrow{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.16em;color:var(--subtle);flex-shrink:0}
.ed-clip-name{font-weight:700;font-size:14px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px}
.ed-pill{font-family:var(--mono);font-size:11px;color:var(--muted);border:1px solid var(--border2);border-radius:var(--r-1);padding:3px 8px;background:var(--surf2);flex-shrink:0}
.ed-spacer{flex:1}
.ed-top .vir-badge{font-size:17px;padding:4px 9px}
.ed-health{display:flex;gap:4px}
.ed-hdot{display:inline-flex;align-items:center;gap:4px;font-family:var(--mono);font-size:11px;font-weight:700;color:var(--muted);padding:4px 7px;border-radius:var(--r-1);border:1px solid var(--border2);background:var(--surf2)}
.ed-hdot i{width:7px;height:7px;border-radius:50%;background:var(--subtle);display:inline-block}
.ed-hdot.ok i{background:var(--accent2)}
.ed-hdot.warn i{background:var(--warn)}
.ed-hdot.lo i{background:var(--err)}
.ed-act{padding:7px 13px;border-radius:var(--r-2);font-size:12px;font-weight:700;cursor:pointer;border:1px solid var(--border2);background:var(--surf2);color:var(--text);white-space:nowrap;transition:background var(--dur-1) var(--ease),transform var(--dur-1) var(--ease),filter var(--dur-1) var(--ease)}
.ed-act:hover{background:var(--surf3)}
.ed-act:disabled{opacity:.5;cursor:wait}
.ed-act.pri{background:var(--accent);border-color:var(--accent);color:#fff}
.ed-act.pri:hover{filter:brightness(1.06);background:var(--accent)}
.ed-act.pub{background:linear-gradient(135deg,var(--accent),var(--accent2));border:none;color:#fff}
.ed-act.pub:hover{filter:brightness(1.05)}
.ed-act.ghost{background:none}

/* — body: filmstrip | tool rail | contextual panel | stage — */
.ed-body{flex:1;min-height:0;display:grid;grid-template-columns:64px 340px 1fr}
.ed-body>*{min-height:0}
/* transport (play + time) centered in the STVDIO bar — Canva-style */
.ed-transport{display:flex;align-items:center;gap:10px}
.ed-tp-btn{width:34px;height:34px;border-radius:50%;border:1px solid var(--border2);background:var(--surf2);color:var(--text);font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;transition:background var(--dur-1) var(--ease)}
.ed-tp-btn:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.ed-tp-time{font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:.02em;min-width:84px;text-align:center}
/* workshop switcher dropdown (in the STVDIO bar) */
.ws-switch{position:relative;flex-shrink:0}
.ws-switch>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border:1px solid var(--border2);border-radius:var(--r-2);background:var(--surf2);font-size:12px;font-weight:700;color:var(--text)}
.ws-switch>summary::-webkit-details-marker{display:none}
.ws-switch>summary:hover{background:var(--surf3)}
.ws-menu{position:absolute;top:calc(100% + 6px);left:0;z-index:30;background:#FBF7EE;border:1px solid var(--border2);border-radius:var(--r-2);box-shadow:var(--sh-3),inset 0 1px 0 rgba(255,255,255,.6);padding:6px;min-width:188px;display:flex;flex-direction:column;gap:2px}
.ws-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border:none;background:none;border-radius:var(--r-1);font-size:12.5px;color:var(--text);cursor:pointer;text-align:left;width:100%;font-family:var(--font)}
button.ws-item:hover{background:var(--surf2)}
.ws-item.ws-active{color:var(--accent);font-weight:700;cursor:default}
.ws-lab{margin-left:auto;font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.06em;color:var(--subtle);border:1px solid var(--border2);border-radius:var(--r-pill);padding:1px 6px}

/* clips filmstrip (relocated #clips-scroll) — keeps virality scores always visible */
.ed-clips{background:var(--surf);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden}
.ed-clips .clips-scroll{flex:1;overflow-y:auto}
.ed-clips .rail-hdr{padding:9px 11px}
.ed-clips .clip-card .cc-hook,.ed-clips .clip-card .cc-reason,.ed-clips .clip-card .cc-actions,.ed-clips .clip-card .cc-feedback{display:none}
.ed-clips .cc-thumb{max-height:108px}
.ed-clips .cc-body{padding:7px 9px}
.ed-clips .cc-top{margin-bottom:3px}
.ed-clips .vir-badge{font-size:13px;padding:2px 6px}
.ed-clips .rail-section-label{padding:8px 9px 6px;letter-spacing:.12em}
.ed-clips .clip-card.is-hero .cc-thumb{max-height:108px;aspect-ratio:9/16}

/* tool rail — icons that swap the contextual panel */
.ed-rail{background:var(--surf);border-right:1px solid var(--border);display:flex;flex-direction:column;align-items:stretch;padding:6px 5px;gap:3px;overflow-y:auto}
.ed-tool{display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 2px;border-radius:var(--r-2);cursor:pointer;color:var(--muted);font-size:9.5px;font-weight:600;text-align:center;border:1px solid transparent;transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
.ed-tool:hover{background:var(--surf2);color:var(--text)}
.ed-tool.on{background:var(--accent);color:#fff;box-shadow:var(--sh-1)}
.ed-tool .ed-tool-ic{font-size:17px;line-height:1}

/* contextual panel — holds the relocated control groups, one pane visible */
.ed-panel{background:var(--surf);border-right:1px solid var(--border);display:flex;flex-direction:column;min-height:0;overflow:hidden}
.ed-panel-hdr{padding:14px 16px;border-bottom:1px solid var(--border);font-weight:800;font-size:14px;color:var(--text);display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-shrink:0}
.ed-panel-hdr small{font-weight:500;color:var(--subtle);font-size:10.5px;text-align:right}
.ed-panel-body{flex:1;overflow-y:auto;padding:18px 16px}
.ed-pane{display:none}
.ed-pane.active{display:block}
.ed-panel-actions{flex-shrink:0;padding:14px 16px;border-bottom:1px solid var(--border);background:var(--surf)}
.ed-panel-actions:empty{display:none}

/* preview stage — the 9:16 video floats in the recessed well, as the hero */
.ed-stage{display:flex;flex-direction:column;min-height:0;background:var(--canvas-studio)}
.ed-stage .player-section{flex:1;min-height:0;border-bottom:none}
.ed-stage .clip-infobar{flex-shrink:0}

/* bottom timeline (relocated tracks + trim + FX) — full width under the body */
.ed-timeline{flex-shrink:0;background:var(--surf);border-top:1px solid var(--border);max-height:32vh;overflow-y:auto}
.ed-timeline .timeline-section,.ed-timeline .waveform-section,.ed-timeline .transcript-section{border-bottom:none}

/* relocated blocks sit flush inside the shell — strip their old rail/card chrome */
.ed-panel #effects-panel{max-height:none;border-top:none;padding:0;background:transparent;overflow:visible}
.ed-panel .content-panel{border-top:none;padding:0;background:transparent}
.ed-panel #hook-coach{margin:0}
.ed-panel .feedback-panel{border-top:1px dashed var(--border);margin-top:12px;padding:12px 0 0}
.ed-panel .transcript-section{padding:0;overflow:visible;flex:none}
.ed-stage .player-section{padding:18px}

/* ── Studio panel: collapsible dropdown library (editor-style accordions) ── */
.ed-panel #effects-panel .ep-title{font-family:var(--serif);font-weight:800;font-size:15px;margin-bottom:1px}
.ed-panel #effects-panel .ep-title-hint{font-size:11px;color:var(--subtle);margin-bottom:10px}
.ep-actions{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;position:sticky;top:0;z-index:3;background:var(--surf);padding-bottom:8px}
.ed-acc{border:1px solid var(--border);border-radius:var(--r-2);margin-bottom:11px;background:var(--surf2);overflow:hidden}
.ed-acc>summary{list-style:none;cursor:pointer;padding:10px 12px;font-weight:700;font-size:12.5px;color:var(--text);display:flex;align-items:center;gap:8px;user-select:none;transition:background var(--dur-1) var(--ease)}
.ed-acc>summary::-webkit-details-marker{display:none}
.ed-acc>summary::after{content:'⌄';margin-left:auto;color:var(--subtle);font-size:14px;font-weight:800;transition:transform var(--dur-2) var(--ease)}
.ed-acc[open]>summary::after{transform:rotate(180deg)}
.ed-acc>summary:hover{background:var(--surf3)}
.ed-acc[open]>summary{border-bottom:1px solid var(--border)}
.ed-acc-ic{font-size:15px;line-height:1}
.ed-acc-body{padding:10px 12px 12px}
.ed-acc-sub{font-size:10.5px;color:var(--subtle);line-height:1.45;margin-bottom:10px}
.ed-acc-mini>summary{font-size:9px;font-family:var(--mono);color:var(--subtle);cursor:pointer;text-transform:uppercase;letter-spacing:.08em;list-style:none}
.ed-acc-mini>summary::-webkit-details-marker{display:none}

/* the draggable FX tile library — grab a tile, drop it on the timeline */
.fx-lib{display:flex;flex-wrap:wrap;gap:6px}
.fx-tile{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;background:var(--surf);border:1px solid var(--border2);border-radius:var(--r-pill);font-family:var(--font);font-size:11px;font-weight:600;text-transform:none;letter-spacing:0;color:var(--text);cursor:grab;transition:transform var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease)}
.fx-tile::before{font-size:13px;line-height:1}
.fx-tile:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--sh-2)}
.fx-tile:active,.fx-tile.dragging{cursor:grabbing;opacity:.65;transform:scale(.97)}
/* Descriptive effect rows — plain name + what-it-does, fewer shown + "More" */
.fx-list{display:flex;flex-direction:column;gap:6px}
.fx-chip.fx-row{display:flex;align-items:center;gap:10px;width:100%;padding:9px 11px;border-radius:var(--r-2);background:var(--surf3);border:1px solid var(--border2);box-shadow:none;text-transform:none;letter-spacing:0;cursor:grab;transition:transform var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease)}
.fx-chip.fx-row::before{font-size:16px;line-height:1;flex:0 0 auto}
.fx-chip.fx-row:hover{border-color:var(--accent);transform:translateY(-1px)}
.fx-row-txt{display:flex;flex-direction:column;gap:1px;min-width:0;text-align:left}
.fx-row-name{font-size:12px;font-weight:700;color:var(--text)}
.fx-row-desc{font-size:10.5px;color:var(--subtle);line-height:1.3}
.fx-more>summary{font-size:11px;color:var(--muted);cursor:pointer;padding:4px 0;user-select:none}
.fx-more[open]>summary{margin-bottom:2px}

/* make the FX drop row an obvious, inviting target */
.ed-timeline .tl-row-fx .tl-row-stage{min-height:38px}
.ed-timeline .tl-row-fx .tl-row-stage.drag-over{background:rgba(255,91,34,.20);outline:2px dashed var(--accent);outline-offset:-2px}

/* ════════ STVDIO — coffee pro-editor theme (scoped to .ed-shell ONLY) ════════
   Re-skin the whole editing space to a warm espresso dark by overriding the
   design tokens on the shell. Intake + landing + modals (outside .ed-shell)
   stay cream. Everything inside already reads var(--surf)/var(--text)/… so
   this re-themes the entire Studio in one place. */
.ed-shell{
  --bg:#1a1410; --surf:#231c15; --surf2:#2e251c; --surf3:#3a2f23;
  --border:rgba(245,232,210,.09); --border2:rgba(245,232,210,.17);
  --text:#f1e8d8; --muted:#bdab8f; --subtle:#8d7d66;
  --canvas-studio:#100b07;
  color:var(--text);
}
.ed-shell .ed-top{background:linear-gradient(180deg,#2b2118,#221a13);border-bottom:1px solid var(--border2)}
.ed-eyebrow{font-family:var(--serif);font-weight:800;font-size:16px;letter-spacing:.01em;color:var(--text);text-transform:none}
.ed-eyebrow .v{color:var(--accent)}
.ed-keyhint{font-family:var(--mono);font-size:10px;color:var(--subtle);letter-spacing:.04em;white-space:nowrap}
.ed-keyhint kbd{background:var(--surf3);border:1px solid var(--border2);border-radius:4px;padding:1px 5px;color:var(--muted);font-family:var(--mono);font-size:10px}
.ed-shell .ed-clip-name{color:var(--muted);font-weight:600}
.ed-shell .ed-rail{background:#1e1710}
.ed-shell .ed-stage{box-shadow:inset 0 0 90px rgba(0,0,0,.55)}
.ed-shell .player-bg-blur{filter:blur(64px) saturate(.85) brightness(.32);opacity:.55}
.ed-shell .ed-timeline{background:#1e1710;border-top:1px solid var(--border2)}
.ed-shell .ed-panel-hdr{background:linear-gradient(180deg,#2a2018,#231c15)}
/* Workshop dropdown: in the dark editor the hardcoded cream menu made the
   light theme text invisible. Re-skin it dark here so items read clearly. */
.ed-shell .ws-menu{background:#2a2018;border-color:var(--border2);box-shadow:var(--sh-3)}
.ed-shell .ws-switch>summary{background:var(--surf2);border-color:var(--border2);color:var(--text)}
.ed-acc{background:var(--surf2)}
.ed-acc[open]{background:var(--surf)}
.ed-acc[open]>summary{border-bottom-color:var(--border2)}
.fx-tile{background:var(--surf3)}
/* hide the now-redundant inner title (the panel header already labels the pane) */
.ed-panel #effects-panel .ep-title{display:none}
.ed-panel #effects-panel .ep-title-hint{color:var(--subtle)}

/* FX fine-tune rows — precise start/end with a "set to playhead" button */
.ep-moment-row{display:flex;align-items:center;gap:5px;padding:5px 7px;background:var(--surf2);border:1px solid var(--border);border-radius:var(--r-1);margin-bottom:5px}
.emr-name{flex:1;font-weight:600;font-size:11px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.emr-lbl{font-family:var(--mono);font-size:8.5px;color:var(--subtle);text-transform:uppercase;letter-spacing:.06em}
.emr-num{width:42px;background:var(--surf);border:1px solid var(--border2);border-radius:4px;color:var(--text);font-size:11px;font-family:var(--mono);padding:3px 4px;text-align:center}
.emr-num:focus{outline:none;border-color:var(--accent)}
.emr-btn,.emr-x{background:none;border:1px solid var(--border2);border-radius:4px;color:var(--muted);cursor:pointer;width:23px;height:23px;font-size:13px;line-height:1;flex-shrink:0}
.emr-btn:hover{border-color:var(--accent);color:var(--accent)}
.emr-x:hover{border-color:var(--err);color:var(--err)}

/* drag-to-apply — every look/effect can be dragged onto the video (whole-clip) */
.ed-shell #ep-grade .ep-btn,.ed-shell #ep-caption .ep-btn,.ed-shell #ep-aspect .ep-btn,.ed-shell .ep-toggle{cursor:grab}
.ed-shell #ep-grade .ep-btn:active,.ed-shell #ep-caption .ep-btn:active,.ed-shell #ep-aspect .ep-btn:active,.ed-shell .ep-toggle:active{cursor:grabbing}
.ed-stage{position:relative}
.ed-stage.apply-drop{outline:2px dashed var(--accent);outline-offset:-8px}
.ed-stage.apply-drop::after{content:'Drop to apply to the whole clip';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(255,91,34,.16);color:#fff;font-family:var(--font);font-weight:700;font-size:15px;letter-spacing:.01em;pointer-events:none;z-index:6}

/* EVERY option is a draggable tile (consistent with the FX tiles) — grab any
   look/effect and drop it on the video. The drag is wired in wireApplyDragDrop. */
.ed-acc .ep-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ed-acc .ep-btn{display:flex;align-items:center;justify-content:center;text-align:center;padding:13px 8px;background:var(--surf3);border:1px solid var(--border2);border-radius:var(--r-2);font-family:var(--font);font-size:12px;font-weight:600;text-transform:none;letter-spacing:0;color:var(--text);cursor:grab;box-shadow:var(--sh-1);transition:transform var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease)}
.ed-acc .ep-btn:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--sh-2)}
.ed-acc .ep-btn:active{cursor:grabbing;transform:scale(.97)}
.ed-acc .ep-btn.active{border-color:var(--accent);background:rgba(255,91,34,.18);color:#fff}
.ed-acc .ep-toggles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ed-acc .ep-toggle{display:flex;align-items:center;gap:8px;padding:9px 10px;background:var(--surf3);border:1px solid var(--border2);border-radius:var(--r-2);cursor:grab;font-size:11px;font-weight:600;color:var(--text);transition:border-color var(--dur-1) var(--ease),transform var(--dur-1) var(--ease)}
.ed-acc .ep-toggle:hover{border-color:var(--accent);transform:translateY(-1px)}
.ed-acc .ep-toggle:has(input:checked){border-color:var(--accent);background:rgba(255,91,34,.18)}
/* color-tone tiles get a swatch on top — like LUT thumbnails */
.ed-acc #ep-grade .ep-btn{flex-direction:column;gap:8px;padding:10px 6px}
.ed-acc #ep-grade .ep-btn::before{content:'';width:100%;height:24px;border-radius:5px;border:1px solid rgba(0,0,0,.3)}
.ed-acc #ep-grade .ep-btn[data-v="none"]::before{background:linear-gradient(135deg,#8a8a8a,#c2c2c2)}
.ed-acc #ep-grade .ep-btn[data-v="cinematic"]::before{background:linear-gradient(135deg,#1f6f7a,#e08a3c)}
.ed-acc #ep-grade .ep-btn[data-v="gaming"]::before{background:linear-gradient(135deg,#ff007a,#00e0ff)}
.ed-acc #ep-grade .ep-btn[data-v="clean"]::before{background:linear-gradient(135deg,#d8d8d8,#ffffff)}
.ed-acc #ep-grade .ep-btn[data-v="vibrant"]::before{background:linear-gradient(135deg,#ff5b22,#ffd23f 55%,#4A8A65)}
.ed-acc #ep-grade .ep-btn[data-v="vintage"]::before{background:linear-gradient(135deg,#b89a6a,#d9c2a0)}
.ed-acc #ep-grade .ep-btn[data-v="moody"]::before{background:linear-gradient(135deg,#262630,#54545f)}
.ed-acc #ep-grade .ep-btn[data-v="signature"]::before{background:radial-gradient(120% 120% at 50% 40%,#3a1414,#140707 70%);box-shadow:inset 0 0 8px rgba(200,16,38,.5)}

@media(max-width:900px){
  .clips-rail{display:none}
  .input-rail{width:240px}
}
@media(max-width:600px){
  .workspace{flex-direction:column;overflow:auto}
  .input-rail{width:100%;max-height:none;border-right:none;border-bottom:1px solid var(--border)}
  .rail-body{padding:14px;gap:12px}
  .center-panel{min-height:60vh}
  .file-drop-hero{padding:22px 14px 18px}
  .file-drop-title{font-size:16px}
  .app-header{padding:0 12px;gap:6px;height:auto;min-height:52px;flex-wrap:wrap}
  .hdr-brand{font-size:17px}
  .hdr-btn{padding:5px 10px;font-size:11px}
  #verify-banner{order:99;flex-basis:100%;margin:6px 0;justify-content:center}
  #userbar-who{font-size:11px}
  .url-panel-note{font-size:9.5px}
  .center-empty{padding:24px 18px;gap:12px}
  .ce-logo{font-size:42px}
  .ce-tagline{font-size:17px}
  .ce-platforms{gap:6px}
  .ce-plat{font-size:11px;padding:4px 9px}
  .modal{margin:8px;max-height:92vh}
}