/* AutomateMotion — premium dark theme. Deep near-black base, purple as a jewel accent.
   Design rules: restraint over glow, hairline borders, soft depth, generous space. */
:root {
  --bg:#14141D; --bg-2:#191827; --fg:#EEEEF5; --mut:#9B9BB6; --dim:#65657E;
  --purple:#8B5CF6; --purple-2:#7C5CFC; --lav:#A78BFA;
  --cyan:#A78BFA;                                   /* legacy accent name — now the soft lavender accent */
  --glass:rgba(255,255,255,.05); --glass-2:rgba(255,255,255,.032);
  --line:rgba(190,180,240,.10); --line-2:rgba(198,188,246,.17);
  --err:#F0708A; --ok:#3DD6A3;
  --r:14px; --r-sm:10px;
  --ease:cubic-bezier(.25,.6,.2,1);
  --shadow-1:0 1px 0 rgba(255,255,255,.07) inset, 0 10px 30px rgba(6,4,18,.45), 0 0 24px rgba(124,80,240,.06);
  --shadow-2:0 1px 0 rgba(255,255,255,.09) inset, 0 26px 64px rgba(6,4,18,.55), 0 0 48px rgba(124,80,240,.10);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; background:var(--bg); color:var(--fg);
  font:15px/1.65 Inter,-apple-system,Segoe UI,sans-serif; -webkit-font-smoothing:antialiased;
  letter-spacing:.004em; overflow-x:hidden;
}
/* subtle film grain for depth */
body::after {
  content:""; position:fixed; inset:0; z-index:2; pointer-events:none; opacity:.045; mix-blend-mode:overlay;
  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.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- background: near-black with one faint, still gradient. no bloom. ---------- */
#space { position:fixed; inset:0; width:100%; height:100%; z-index:0; opacity:.35; }
.glow {
  position:fixed; inset:0; z-index:0; pointer-events:none; animation:none; filter:none; transform:none;
  background:
    radial-gradient(1400px 900px at -8% -12%, rgba(139,92,246,.20), rgba(139,92,246,.05) 45%, transparent 70%),
    radial-gradient(1100px 800px at 110% 110%, rgba(99,78,222,.14), transparent 62%),
    radial-gradient(900px 500px at 55% 0%, rgba(255,255,255,.035), transparent 60%),
    linear-gradient(165deg, #1B1A2A 0%, #16161F 42%, #12121A 100%);
}
@keyframes breathe { 0%,100%{opacity:1} 50%{opacity:1} }

/* ---------- layout ---------- */
.wrap { position:relative; z-index:1; max-width:880px; margin:0 auto; padding:72px 24px 96px; }
.card {
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.012));
  border:1px solid var(--line); border-radius:20px;
  backdrop-filter:blur(20px) saturate(120%); -webkit-backdrop-filter:blur(20px) saturate(120%);
  box-shadow:var(--shadow-2);
  padding:44px 48px 48px;
}
.top { display:flex; justify-content:space-between; align-items:center; margin-bottom:36px; }
.brand { font-weight:650; font-size:20px; letter-spacing:-.02em; color:var(--fg); }
.brand span { background:none; -webkit-background-clip:initial; background-clip:initial; color:var(--lav); font-weight:650; }
.pill { font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); border:1px solid var(--line); border-radius:99px; padding:4px 11px; font-weight:500; }
.pill:empty { display:none; }

.hero { font-size:34px; line-height:1.12; letter-spacing:-.035em; font-weight:600; margin:0 0 30px; color:var(--fg); }
.hero b { font-weight:700; font-size:1em; letter-spacing:-.035em;
  background:linear-gradient(120deg,#FFFFFF 30%,#C9BAF8 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.lead { color:var(--mut); margin:-12px 0 26px; }

/* ---------- controls ---------- */
.field { display:flex; flex-direction:column; gap:10px; margin-bottom:30px; }
.field > span { font-size:11px; font-weight:600; letter-spacing:.11em; text-transform:uppercase; color:var(--mut); display:flex; gap:10px; align-items:baseline; }
.field > span em { font-style:normal; text-transform:none; letter-spacing:.005em; font-weight:400; color:var(--dim); }
.field.inline { flex-direction:row; align-items:center; gap:12px; margin:0; }
input[type=text], input[type=password], input[type=email], textarea, select {
  width:100%; background:rgba(0,0,0,.38); color:var(--fg); border:1px solid rgba(255,255,255,.035); border-radius:var(--r-sm);
  padding:13px 15px; font:inherit; outline:none;
  box-shadow:inset 0 2px 10px rgba(0,0,0,.45), inset 0 -1px 0 rgba(255,255,255,.025);
  transition:border-color .2s var(--ease), box-shadow .25s var(--ease), background .2s;
}
textarea { resize:vertical; min-height:200px; line-height:1.65; font-size:15px; }
input:focus, textarea:focus, select:focus { border-color:rgba(139,92,246,.5);
  box-shadow:inset 0 2px 10px rgba(0,0,0,.4), 0 0 0 3px rgba(139,92,246,.13), 0 0 28px rgba(124,79,240,.12); background:rgba(0,0,0,.44); }
select { width:auto; min-width:150px; padding-right:36px; appearance:none; -webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--mut) 50%),linear-gradient(135deg,var(--mut) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%; background-size:5px 5px; background-repeat:no-repeat; }
.meta { display:flex; justify-content:flex-end; font-size:12px; color:var(--dim); margin-top:-2px; }

.btn { border:0; border-radius:var(--r-sm); padding:11px 20px; font:inherit; font-weight:600; letter-spacing:.005em; cursor:pointer; color:#0A0A0F;
  background:var(--fg); transition:transform .18s var(--ease), box-shadow .25s var(--ease), opacity .2s, filter .2s, background .2s; }
.btn:hover:not(:disabled) { transform:translateY(-1px); }
/* primary action — the one purple button on a page */
.btn.cyan { background:linear-gradient(180deg,#9168F9,#7C4FF0); color:#fff; box-shadow:0 1px 0 rgba(255,255,255,.2) inset, 0 8px 26px rgba(124,79,240,.42), 0 0 44px rgba(124,79,240,.14); }
.btn.cyan:hover:not(:disabled) { transform:translateY(-1px); box-shadow:0 1px 0 rgba(255,255,255,.22) inset, 0 12px 34px rgba(124,79,240,.55), 0 0 60px rgba(124,79,240,.2); filter:brightness(1.05); }
.btn.cyan:active:not(:disabled) { transform:translateY(0); }
.btn.big { padding:14px 32px; font-size:15px; }
.btn.purple { background:rgba(255,255,255,.05); color:var(--fg); border:1px solid var(--line-2); box-shadow:none; padding:10px 18px; font-size:13.5px; }
.btn.purple:hover:not(:disabled) { transform:translateY(-1px); border-color:rgba(167,139,250,.5); color:#fff; box-shadow:0 8px 22px rgba(8,4,22,.45), 0 0 26px rgba(124,79,240,.14); }
.btn.loading { position:relative; color:transparent !important; pointer-events:none; }
.btn.loading::after { content:""; position:absolute; inset:0; margin:auto; width:16px; height:16px; border-radius:50%;
  border:2px solid rgba(255,255,255,.35); border-top-color:#fff; animation:spin .7s linear infinite; }
@keyframes spin { to{transform:rotate(360deg)} }
.selects { display:flex; gap:24px; flex-wrap:wrap; }
.section-actions { display:flex; align-items:center; gap:14px; }
.out-foot { margin-top:10px; font-size:12px; color:var(--dim); min-height:1em; }
.out-foot .ok { color:var(--ok); } .out-foot .bad { color:var(--err); }
.out.loading .out-body:empty::before { content:"Generating…"; color:var(--lav); font-style:normal; }
.btn:disabled { opacity:.32; cursor:not-allowed; box-shadow:none; transform:none; }

.login { display:flex; gap:10px; max-width:440px; }
.err { color:var(--err); min-height:1.3em; margin:10px 0 0; font-size:14px; }

/* ---------- drop zones ---------- */
.grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:26px; }
.drop {
  position:relative; border:1px solid rgba(182,166,232,.07); border-radius:var(--r);
  background:linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,.006)); box-shadow:var(--shadow-1);
  padding:30px 16px; text-align:center; cursor:pointer; display:flex; flex-direction:column; gap:4px; align-items:center;
  transition:border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease), box-shadow .25s var(--ease);
}
.drop .ico { font-size:20px; margin-bottom:4px; opacity:.7; }
.drop:hover, .drop.over { border-color:rgba(167,139,250,.6); background:rgba(139,92,246,.055); transform:translateY(-1px); box-shadow:0 10px 26px rgba(8,4,22,.45), 0 0 28px rgba(124,80,240,.10); }
.drop.done { border-color:rgba(61,214,163,.35); background:rgba(61,214,163,.035); }
.drop .hint { color:var(--dim); font-size:12.5px; }
.drop .file { color:var(--ok); font-size:13px; word-break:break-all; min-height:1.2em; }
.drop .file:empty { display:none; }

.tracks { list-style:none; margin:8px 0 0; padding:0; width:100%; text-align:left; display:flex; flex-direction:column; gap:4px; }
.tracks:empty { display:none; }
.tracks li { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--fg); background:rgba(0,0,0,.3); border-radius:8px; padding:6px 10px; }
.tracks li .n { color:var(--dim); width:16px; }
.tracks li .name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tracks li .d { color:var(--mut); font-variant-numeric:tabular-nums; }
.tracks li .x { background:none; border:0; color:var(--dim); cursor:pointer; font-size:14px; padding:0 2px; }
.tracks li .x:hover { color:var(--err); }
.durations { display:flex; align-items:center; gap:10px; margin:-8px 0 24px; font-size:13.5px; color:var(--mut); flex-wrap:wrap; }
.durations b { color:var(--fg); font-variant-numeric:tabular-nums; font-weight:600; }
.durations .sep { color:var(--dim); }
.durations .flag { font-weight:500; font-size:13px; }
.durations .flag.short { color:var(--err); } .durations .flag.ok { color:var(--ok); }
.row { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }

/* ---------- panels ---------- */
.panel { margin-top:28px; background:linear-gradient(180deg, rgba(255,255,255,.032), rgba(255,255,255,.008)); border:1px solid var(--line); border-radius:var(--r); padding:20px 22px; animation:rise .35s var(--ease); box-shadow:var(--shadow-1); }
@keyframes rise { from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }
.panel-head { display:flex; justify-content:space-between; font-size:12px; font-weight:600; letter-spacing:.06em; color:var(--mut); text-transform:capitalize; margin-bottom:12px; }
.bar { height:4px; background:rgba(255,255,255,.06); border-radius:99px; overflow:hidden; }
#bar-fill { height:100%; width:0; border-radius:99px; background:linear-gradient(90deg,#6D4CD8,var(--lav)); transition:width .5s var(--ease); }
pre { margin:14px 0 0; background:rgba(0,0,0,.34); border:0; box-shadow:inset 0 2px 10px rgba(0,0,0,.4); border-radius:10px; padding:12px 14px; font:12px/1.65 ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--mut); overflow:auto; max-height:240px; white-space:pre-wrap; }
#downloads { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
#downloads a { color:var(--lav); text-decoration:none; font-weight:500; font-size:13.5px; padding:8px 14px; border:1px solid var(--line-2); border-radius:10px; transition:background .2s, border-color .2s, color .2s; }
#downloads a:hover { background:rgba(139,92,246,.08); border-color:rgba(167,139,250,.5); color:#fff; box-shadow:0 0 22px rgba(124,79,240,.14); }
details summary { cursor:pointer; color:var(--mut); font-size:13px; font-weight:600; }
.preview { margin:6px 0 14px; }
.preview-head { display:flex; justify-content:space-between; font-size:12px; letter-spacing:.06em; color:var(--mut); font-weight:600; margin-bottom:10px; }
#render-status.ok { color:var(--ok); } #render-status.bad { color:var(--err); }
#player { width:100%; max-height:420px; background:#000; border-radius:12px; border:1px solid var(--line); }

/* ---------- output ---------- */
.output { margin-top:60px; padding-top:42px; border-top:1px solid var(--line); }
.section-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:18px; }
.section-head h2 { margin:0; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--mut); font-weight:600; }
.soon { font-size:12px; color:var(--dim); }
.out-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }
.out { background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.008)); border:1px solid var(--line); border-radius:var(--r); padding:16px 18px 18px; display:flex; flex-direction:column; min-height:150px; transition:border-color .2s, transform .2s var(--ease), box-shadow .25s var(--ease); box-shadow:var(--shadow-1); }
.out:hover { border-color:var(--line-2); transform:translateY(-1px); }
.out-head { display:flex; justify-content:space-between; align-items:center; font-size:10.5px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--mut); margin-bottom:12px; }
.copy { background:transparent; color:var(--mut); border:1px solid var(--line); border-radius:8px; padding:4px 10px; font:500 11px Inter,sans-serif; cursor:pointer; transition:all .2s var(--ease); }
.copy:hover { color:var(--lav); border-color:rgba(167,139,250,.5); }
.copy.ok { color:#fff; background:var(--purple); border-color:var(--purple); }
.out-body { flex:1; font-size:13.5px; white-space:pre-wrap; color:var(--fg); }
.out-body:empty::before { content:attr(data-placeholder); color:var(--dim); font-style:italic; }

.hidden { display:none !important; }

@media (max-width:760px) {
  .wrap { padding:28px 14px 64px; }
  .card { padding:28px 22px 30px; border-radius:18px; }
  .hero { font-size:28px; }
  .grid, .out-grid { grid-template-columns:1fr; }
  .row { flex-direction:column; align-items:stretch; }
  .section-head { flex-direction:column; align-items:flex-start; gap:10px; }
  .btn.big { width:100%; }
}
@media (prefers-reduced-motion:reduce) { .glow{animation:none} #space{display:none} }

/* ---------- image review ---------- */
.review-intro { color:var(--mut); font-size:14px; margin:2px 0 20px; }
.term { border:1px solid var(--line); border-radius:var(--r); padding:20px 20px 18px; margin-bottom:16px; background:var(--glass-2); transition:border-color .2s; box-shadow:var(--shadow-1); }
.term.approved { border-color:rgba(61,214,163,.35); } .term.rejected { border-color:rgba(240,112,138,.3); }
.term-head { display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:14px; }
.term-head .name { font-size:16px; font-weight:600; letter-spacing:-.01em; }
.term-head .when { color:var(--mut); font-size:12.5px; margin-left:8px; font-weight:400; }
.term-head .state { font-size:10.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; padding:4px 10px; border-radius:99px; }
.state.pending { color:var(--mut); border:1px solid var(--line); }
.state.approved { color:#06120D; background:var(--ok); }
.state.rejected { color:var(--err); border:1px solid rgba(240,112,138,.45); }
.cands { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px; margin-bottom:16px; }
.cand { position:relative; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:#000; cursor:pointer; transition:border-color .15s, transform .18s var(--ease), box-shadow .25s var(--ease); aspect-ratio:16/10; }
.cand img { width:100%; height:100%; object-fit:cover; display:block; }
.cand:hover { border-color:rgba(167,139,250,.6); transform:translateY(-1px); box-shadow:0 8px 20px rgba(0,0,0,.4); }
.cand.selected { border-color:var(--purple); box-shadow:0 0 0 3px rgba(139,92,246,.18); }
.cand .badge { position:absolute; top:8px; left:8px; font-size:10.5px; font-weight:600; background:var(--ok); color:#06120D; border-radius:6px; padding:2px 8px; }
.cand .src { position:absolute; left:0; right:0; bottom:0; font-size:10px; padding:3px 7px; background:rgba(0,0,0,.65); color:var(--mut); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.term.rejected .cands { opacity:.35; }
.term-btns { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.term-btns .spacer { flex:1; }
.btn.sm { padding:8px 15px; font-size:13px; }
.btn.ghost { background:transparent; color:var(--mut); border:1px solid var(--line-2); }
.btn.ghost:hover:not(:disabled) { border-color:rgba(167,139,250,.5); color:var(--fg); box-shadow:0 0 22px rgba(124,79,240,.12); }
.btn.danger { background:transparent; color:var(--err); border:1px solid rgba(240,112,138,.4); }
.btn.danger:hover:not(:disabled) { background:rgba(240,112,138,.07); }
.undo { background:none; border:0; color:var(--dim); font:inherit; font-size:12px; cursor:pointer; text-decoration:underline; text-underline-offset:3px; padding:4px 0; }
.undo:hover { color:var(--mut); }
.term .empty { color:var(--dim); font-size:13px; margin-bottom:12px; }
.review-actions { display:flex; align-items:center; gap:14px; margin-top:8px; padding-top:18px; border-top:1px solid var(--line); }
.note { color:var(--mut); font-size:13px; margin:-4px 0 12px; }
.cand.broken img { opacity:.15; } .cand.broken::after { content:"no preview"; position:absolute; inset:0; display:grid; place-items:center; color:var(--dim); font-size:12px; }
.bank-save { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--mut); cursor:pointer; }
.bank-save input { accent-color:var(--purple); }

/* ================= shell layout ================= */
body.shell { overflow-x:hidden; }
.app { position:relative; z-index:1; display:grid; grid-template-columns:272px 1fr; min-height:100vh; }
.app.collapsed { grid-template-columns:72px 1fr; }
.sidebar { position:sticky; top:0; height:100vh; display:flex; flex-direction:column; padding:22px 16px; border-right:1px solid var(--line);
  background:linear-gradient(180deg, rgba(15,12,24,.78), rgba(10,9,16,.78)); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  box-shadow:8px 0 40px rgba(6,3,16,.45); }
.sb-top { display:flex; align-items:center; justify-content:space-between; padding:4px 8px 26px; }
.sb-brand { text-decoration:none; color:var(--fg); font-size:18px; }
.sb-toggle { background:transparent; border:1px solid var(--line); color:var(--dim); border-radius:8px; width:26px; height:26px; cursor:pointer; padding:0; transition:color .2s, border-color .2s; }
.sb-toggle:hover { color:var(--fg); border-color:var(--line-2); }
.sb-nav { display:flex; flex-direction:column; gap:2px; }
.sb-nav a { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:9px; color:var(--mut); text-decoration:none; font-weight:500; font-size:13.5px; letter-spacing:.005em; transition:background .18s, color .18s; }
.sb-nav a .ic { width:20px; text-align:center; font-size:14px; opacity:.75; }
.sb-nav a:hover { background:rgba(255,255,255,.04); color:var(--fg); }
.sb-nav a.active { background:linear-gradient(90deg, rgba(139,92,246,.18), rgba(139,92,246,.05)); color:#fff; box-shadow:inset 2px 0 0 var(--purple), 0 0 20px rgba(124,80,240,.08); }
.sb-nav a.active .ic { opacity:1; }
.sb-bottom { margin-top:auto; }
.profile { display:flex; align-items:center; gap:11px; padding:10px 11px; border:1px solid var(--line); border-radius:12px;
  background:var(--glass); box-shadow:var(--shadow-1); transition:border-color .2s; }
.profile:hover { border-color:var(--line-2); }
.avatar.round { border-radius:50%; box-shadow:0 0 0 1px rgba(255,255,255,.12), 0 4px 14px rgba(0,0,0,.5); }
.handle-line { display:flex; align-items:center; gap:5px; min-width:0; }
.crown { color:#EAC85E; font-size:13px; line-height:1; opacity:.95; flex:none; margin-top:-1px; filter:none; }
.avatar { width:38px; height:38px; border-radius:10px; object-fit:cover; flex:none; }
.avatar.big { width:96px; height:96px; }
.who { display:flex; flex-direction:column; line-height:1.25; min-width:0; gap:1px; }
.who b { font-size:12.5px; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#EF4444; font-weight:600; }
.who .role { color:var(--mut) !important; font-size:11px; font-weight:400; letter-spacing:.01em; text-transform:none; margin-top:1px; opacity:1; }
.gear { margin-left:auto; color:var(--dim); text-decoration:none; font-size:15px; padding:4px; border-radius:8px; flex:none; transition:color .2s, background .2s; }
.gear:hover { color:var(--fg); background:rgba(255,255,255,.05); }
.app.collapsed .lbl, .app.collapsed .sb-brand, .app.collapsed .who, .app.collapsed .gear { display:none; }
.app.collapsed .sidebar { padding:22px 10px; } .app.collapsed .sb-nav a { justify-content:center; padding:10px 0; } .app.collapsed .profile { justify-content:center; padding:8px; }
.app.collapsed .sb-top { justify-content:center; }

.pages { padding:64px 56px 110px; max-width:1080px; width:100%; margin:0 auto; }   /* generous, centred */
.pages .card, .pages .grid, .pages .row { max-width:100%; }
.page { display:none; } .page.active { display:block; animation:rise .3s var(--ease); }
.page-head { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin-bottom:46px; flex-wrap:wrap; }
.page-head h1 { margin:0; font-size:34px; letter-spacing:-.035em; font-weight:700; background:linear-gradient(120deg,#FFFFFF 40%,#C9BAF8 110%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.crumb { color:var(--dim); font-size:12.5px; text-decoration:none; transition:color .2s; } .crumb:hover { color:var(--lav); }
.pages .card { padding:0; background:transparent; border:0; box-shadow:none; backdrop-filter:none; }

/* home */
.home-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:10px 0 28px; }
.big-card { position:relative; display:flex; flex-direction:column; gap:9px; padding:38px 34px; border:1px solid var(--line-2); border-radius:18px;
  background:
    radial-gradient(420px 200px at 20% -30%, rgba(139,92,246,.10), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.014));
  text-decoration:none; color:var(--fg); overflow:hidden; box-shadow:var(--shadow-2);
  transition:transform .22s var(--ease), border-color .22s, box-shadow .3s var(--ease); }
.big-card::before { content:""; position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(167,139,250,.65), transparent); opacity:.5; transition:opacity .3s; }
.big-card .ic { font-size:24px; color:var(--lav); } .big-card b { font-size:19px; letter-spacing:-.015em; font-weight:650; } .big-card span:last-child { color:var(--mut); font-size:13.5px; }
.big-card:hover { transform:translateY(-3px); border-color:rgba(167,139,250,.5);
  box-shadow:0 1px 0 rgba(255,255,255,.07) inset, 0 26px 60px rgba(8,4,22,.7), 0 0 56px rgba(124,80,240,.16); }
.big-card:hover::before { opacity:1; }
.home-actions { display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-bottom:44px; }
.recent h3 { font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--mut); margin:0 0 12px; font-weight:600; }

/* projects */
.projects { display:flex; flex-direction:column; gap:10px; }
.project-row { display:grid; grid-template-columns:1fr auto; gap:4px 16px; align-items:center; padding:16px 20px; border:1px solid var(--line); border-radius:12px;
  background:var(--glass-2); color:var(--fg); text-decoration:none; transition:border-color .18s, background .18s, transform .18s var(--ease), box-shadow .25s var(--ease); }
.project-row:hover { border-color:rgba(167,139,250,.4); background:rgba(139,92,246,.055); transform:translateY(-1px); box-shadow:0 10px 26px rgba(8,4,22,.5), 0 0 28px rgba(124,80,240,.12); }
.project-row b { font-size:14.5px; font-weight:600; letter-spacing:-.01em; } .project-row > span { color:var(--mut); font-size:12.5px; }
.project-row .chips { grid-column:1 / -1; display:flex; gap:6px; }
.chips i { font-style:normal; font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; padding:2px 8px; border-radius:99px; border:1px solid var(--line); color:var(--dim); }
.chips i.on { color:var(--ok); border-color:rgba(61,214,163,.4); }
.empty-state { text-align:center; padding:72px 20px; border:0; border-radius:16px; background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.004)); box-shadow:var(--shadow-1); color:var(--mut); display:flex; flex-direction:column; gap:6px; align-items:center; }
.empty-state .ic { font-size:26px; color:var(--dim); } .empty-state b { color:var(--fg); font-size:16px; font-weight:600; }
.pj-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.pj-block { border:1px solid var(--line); border-radius:14px; padding:18px 20px; background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.008)); min-height:120px; box-shadow:var(--shadow-1); transition:border-color .2s; }
.pj-block:hover { border-color:var(--line-2); }
.pj-block h3 { margin:0 0 12px; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--mut); font-weight:600; }
.pj-block .empty { color:var(--dim); font-size:13.5px; font-style:italic; }
.pj-block > div:not(.empty) { white-space:pre-wrap; font-size:13.5px; }

/* script + settings */
.two-col { display:grid; grid-template-columns:1fr 1.2fr; gap:40px; }
.settings { max-width:520px; }
.pic-row { display:flex; align-items:center; gap:20px; margin-bottom:26px; }

/* modal */
.modal { position:fixed; inset:0; z-index:50; background:rgba(6,6,11,.75); backdrop-filter:blur(8px); display:grid; place-items:center; }
.modal-card { width:min(520px, 92vw); background:linear-gradient(180deg,#14121F,#0F0E17); border:1px solid var(--line-2); border-radius:16px; padding:30px 32px; box-shadow:0 40px 100px rgba(4,2,12,.8), 0 0 80px rgba(124,80,240,.12), 0 1px 0 rgba(255,255,255,.06) inset; }
.modal-card h2 { margin:0 0 20px; font-size:18px; letter-spacing:-.02em; font-weight:650; }
.modal-card .row { justify-content:flex-end; }

@media (max-width:900px) {
  .app { grid-template-columns:72px 1fr; } .lbl, .sb-brand, .who, .gear { display:none; } .sb-nav a { justify-content:center; }
  .pages { padding:26px 18px 70px; } .home-grid, .two-col, .pj-grid { grid-template-columns:1fr; }
}

/* profile settings */
.pic-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.pic-actions .soon { width:100%; }
.handle-input { display:flex; align-items:center; background:rgba(0,0,0,.38); border:1px solid rgba(255,255,255,.035); border-radius:var(--r-sm); overflow:hidden; box-shadow:inset 0 2px 10px rgba(0,0,0,.45); transition:border-color .2s, box-shadow .25s; }
.handle-input:focus-within { border-color:rgba(139,92,246,.5); box-shadow:inset 0 2px 10px rgba(0,0,0,.4), 0 0 0 3px rgba(139,92,246,.13), 0 0 28px rgba(124,79,240,.12); }
.handle-input .at { padding:12px 0 12px 14px; color:var(--lav); font-weight:600; user-select:none; }
.handle-input input { border:0; background:transparent; padding-left:4px; box-shadow:none !important; }
.handle-input input:focus { border:0; box-shadow:none; background:transparent; }
.field .hint-line { display:block; margin-top:6px; color:var(--dim); font-size:12px; font-style:normal; }

/* script writing stages */
.stages { list-style:none; margin:24px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; }
.stages li { display:flex; align-items:center; gap:12px; padding:13px 16px; border:1px solid var(--line); border-radius:12px; background:linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,.006)); font-size:13.5px; transition:border-color .2s; }
.stages .stx { flex:1; display:flex; flex-direction:column; min-width:0; }
.stages .stx b { font-weight:600; }
.stages .detail { color:var(--dim); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:340px; }
.stages .st { color:var(--dim); font-size:11.5px; font-weight:600; letter-spacing:.03em; }
.stages .time { color:var(--dim); font-size:12px; font-variant-numeric:tabular-nums; min-width:38px; text-align:right; }
.stages .ind { width:18px; height:18px; border-radius:50%; flex:none; border:2px solid var(--line-2); display:grid; place-items:center; font-size:11px; font-weight:800; color:#0A0A0F; }
.stages li.running { border-color:rgba(167,139,250,.4); }
.stages li.running .ind { border-color:transparent; border-top-color:var(--lav); border-right-color:var(--lav); animation:spin .8s linear infinite; }
.stages li.running .st { color:var(--lav); }
.stages li.done .ind { border-color:var(--ok); background:var(--ok); animation:none; }
.stages li.done .ind::after { content:"✓"; }
.stages li.done .st { color:var(--ok); }
.stages li.error { border-color:rgba(240,112,138,.45); }
.stages li.error .ind { border-color:var(--err); background:var(--err); }
.stages li.error .ind::after { content:"✕"; }
.stages li.error .st { color:var(--err); }
.notes-out { margin:0; max-height:220px; }
#sw-output { min-height:392px; margin-bottom:14px; }

/* auth screen */
.auth-card { max-width:560px; margin:0 auto; }
.tabs { display:flex; gap:6px; margin:6px 0 22px; border-bottom:1px solid var(--line); }
.tab { background:none; border:0; color:var(--mut); font:500 14px Inter,sans-serif; padding:10px 14px; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; transition:color .2s; }
.tab.active { color:var(--fg); border-bottom-color:var(--purple); }
.auth-form { display:flex; flex-direction:column; gap:4px; }
.auth-form .btn.big { align-self:flex-start; margin-top:6px; }
.settings .sec { margin:34px 0 14px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--mut); display:flex; gap:10px; align-items:baseline; font-weight:600; }
.settings .sec em { font-style:normal; text-transform:none; letter-spacing:.005em; color:var(--dim); font-weight:400; }
.key-row { display:flex; gap:10px; align-items:center; }
.key-row input { flex:1; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.who .role:empty { display:none; }

/* keep Chrome autofill on-brand */
input:-webkit-autofill, input:-webkit-autofill:focus { -webkit-box-shadow:0 0 0 1000px #0c0c13 inset !important; -webkit-text-fill-color:var(--fg) !important; caret-color:var(--fg); transition:background-color 9999s ease-in-out 0s; }

/* channels */
.channels { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px; }
.channel-card { display:flex; flex-direction:column; gap:6px; padding:20px 20px 18px; border:1px solid var(--line); border-radius:14px; background:linear-gradient(180deg, rgba(255,255,255,.032), rgba(255,255,255,.008)); color:var(--fg); text-decoration:none; box-shadow:var(--shadow-1); transition:border-color .18s, transform .2s var(--ease), background .18s, box-shadow .25s var(--ease); }
.channel-card:hover { border-color:rgba(167,139,250,.45); background:rgba(139,92,246,.055); transform:translateY(-2px); box-shadow:0 16px 38px rgba(8,4,22,.55), 0 0 32px rgba(124,80,240,.14); }
.channel-card .ic { width:40px; height:40px; border-radius:10px; display:grid; place-items:center; font-weight:650; font-size:14px; background:rgba(139,92,246,.14); border:1px solid rgba(139,92,246,.25); color:var(--lav); margin-bottom:8px; }
.channel-card b { font-size:15px; font-weight:600; letter-spacing:-.01em; } .channel-card .niche { color:var(--mut); font-size:12.5px; }
.channel-card .key { font-size:11px; margin-top:8px; color:var(--dim); } .channel-card .key.on { color:var(--ok); }
.channel-card .ic.logo { object-fit:cover; padding:0; background:#000; border:1px solid var(--line); }
.vo-box { margin-top:16px; border:1px solid var(--line); border-radius:12px; padding:16px 18px; background:var(--glass-2); display:flex; flex-direction:column; gap:10px; box-shadow:var(--shadow-1); }
.vo-box .bar { height:4px; } #sw-vo-bar { height:100%; width:0; border-radius:99px; background:linear-gradient(90deg,#6D4CD8,var(--lav)); transition:width .4s var(--ease); }
#sw-vo-player { width:100%; }
#sw-vo-status.ok { color:var(--ok); } #sw-vo-status.bad { color:var(--err); }
.pj-block.wide { grid-column:1 / -1; }
.pj-block .asset { display:flex; flex-direction:column; gap:8px; }
.pj-block audio { width:100%; }
.pj-block img.thumb { max-width:100%; border-radius:10px; border:1px solid var(--line); }
.status-select { min-width:130px; }
.status-pill { font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; padding:2px 8px; border-radius:99px; border:1px solid var(--line); color:var(--mut); }
.status-pill.in-progress { color:var(--lav); border-color:rgba(167,139,250,.35); }
.status-pill.done { color:var(--ok); border-color:rgba(61,214,163,.35); }
.status-pill.uploaded { color:var(--ok); border-color:rgba(61,214,163,.5); }
.project-row img.pthumb { width:56px; height:32px; object-fit:cover; border-radius:6px; }

/* ---- project cost breakdown ---- */
.costs { display:flex; flex-direction:column; gap:7px; }
.cost-row { display:flex; align-items:baseline; gap:10px; font-size:13.5px; }
.cost-row span { min-width:110px; }
.cost-row em { flex:1; color:var(--dim); font-style:normal; font-size:12px; text-align:right; }
.cost-row b { font-variant-numeric:tabular-nums; min-width:56px; text-align:right; font-weight:600; }
.cost-row.total { border-top:1px solid var(--line); padding-top:10px; margin-top:5px; }
.cost-row.total b { color:var(--lav); font-size:15px; }

/* ---- B-Roll Cutter ---- */
.br-clips { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.br-clips i { font-style:normal; font-size:11px; padding:4px 10px; border-radius:99px; border:1px solid var(--line); color:var(--mut); }
.br-clips i.on { color:var(--ok); border-color:rgba(61,214,163,.4); }
#br-downloads a { color:var(--lav); text-decoration:none; font-weight:500; font-size:13.5px; padding:8px 14px; border:1px solid var(--line-2); border-radius:10px; transition:background .2s, border-color .2s, color .2s; }
#br-downloads a:hover { background:rgba(139,92,246,.08); border-color:rgba(167,139,250,.5); color:#fff; }
#br-drop .tracks { max-width:520px; margin-top:10px; }

/* script page: same open flow as Video Editing */
.sw-notes-field textarea { min-height:84px; font-size:14px; }

/* B-Roll Cutter mode toggle */
.br-modes { display:flex; gap:10px; flex-wrap:wrap; }
.br-mode { display:flex; flex-direction:column; gap:3px; align-items:flex-start; text-align:left; padding:13px 18px; border-radius:12px;
  border:1px solid var(--line); background:linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.006));
  color:var(--mut); cursor:pointer; font:inherit; transition:border-color .2s, color .2s, box-shadow .25s var(--ease), background .2s; }
.br-mode b { font-size:13.5px; font-weight:600; color:inherit; }
.br-mode em { font-style:normal; font-weight:400; font-size:11.5px; color:var(--dim); }
.br-mode:hover { border-color:rgba(167,139,250,.35); color:var(--fg); }
.br-mode.on { color:#fff; border-color:rgba(167,139,250,.5); background:rgba(139,92,246,.10); box-shadow:0 0 24px rgba(124,80,240,.12); }

/* channel music + auto-filled track chips */
.tracks li .chip { font-style:normal; font-size:9px; letter-spacing:.07em; text-transform:uppercase; color:var(--lav); border:1px solid rgba(167,139,250,.3); border-radius:99px; padding:1px 7px; flex:none; }
#ch-music-list { max-width:560px; }
#ch-music-list:empty { display:none; }

/* channel end screen / subscribe uploads */
.asset-row { display:flex; align-items:flex-start; gap:18px; margin-bottom:8px; }
.asset-prev { width:250px; max-height:140px; border-radius:12px; border:1px solid var(--line); background:#000; box-shadow:var(--shadow-1); }

/* ---- Spreadsheet: premium data table ---- */
.sheet-wrap { border:1px solid var(--line); border-radius:18px; overflow-x:auto; box-shadow:var(--shadow-2);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012));
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
.sheet-row { display:grid; grid-template-columns:minmax(0,1fr) 122px 86px 86px 72px 84px 72px 72px;
  align-items:stretch; border-bottom:1px solid rgba(182,166,232,.05); }
.sheet-row > *:not(:first-child) { border-left:1px solid rgba(182,166,232,.06); justify-content:center; text-align:center; padding-left:6px; padding-right:6px; }
.sheet-row:last-child { border-bottom:0; }
.sheet-head { background:rgba(0,0,0,.28); border-bottom:1px solid var(--line-2); }
.sheet-head span { font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--mut); font-weight:600; padding:14px 10px; white-space:normal; line-height:1.35; display:flex; align-items:center; }
.sheet-head span:first-child { padding-left:18px; }
#sheet-body .sheet-row { transition:background .18s; }
#sheet-body .sheet-row:nth-child(even) { background:rgba(255,255,255,.012); }
#sheet-body .sheet-row:hover { background:rgba(139,92,246,.05); }
.sc { padding:14px 10px; font-size:13px; color:var(--fg); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:flex; align-items:center; min-height:64px; min-width:0; }
.sc.title { padding-left:18px; padding-right:16px; }
.sc.dim { color:var(--dim); }
.sc.act { cursor:pointer; }
/* status badges */
.stpill { font-style:normal; font-size:9.5px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; padding:5px 11px; border-radius:99px; border:1px solid; white-space:nowrap; transition:box-shadow .2s; max-width:100%; overflow:hidden; text-overflow:ellipsis; }
.stpill.st-draft { color:var(--mut); border-color:var(--line-2); background:rgba(255,255,255,.03); }
.stpill.st-in-progress { color:#F5A94B; border-color:rgba(245,169,75,.35); background:rgba(245,169,75,.08); }
.stpill.st-done { color:var(--lav); border-color:rgba(167,139,250,.35); background:rgba(139,92,246,.08); }
.stpill.st-uploaded { color:var(--ok); border-color:rgba(61,214,163,.4); background:rgba(61,214,163,.08); }
.sc.act:hover .stpill { box-shadow:0 0 16px rgba(124,80,240,.15); }
/* mini cell buttons */
.cbtn { font-style:normal; font-size:11.5px; font-weight:500; color:var(--lav); border:1px solid var(--line-2); border-radius:7px; padding:5px 13px;
  transition:border-color .15s, color .15s, background .15s, box-shadow .2s; }
.sc.act:hover .cbtn { border-color:rgba(167,139,250,.55); color:#fff; background:rgba(139,92,246,.1); box-shadow:0 0 16px rgba(124,80,240,.12); }
.sc.cell-locked .cbtn { color:var(--dim); border-color:var(--line); }
.sthumb { width:56px; height:32px; object-fit:cover; border-radius:6px; border:1px solid var(--line-2); box-shadow:0 2px 10px rgba(0,0,0,.45); transition:transform .18s var(--ease), box-shadow .2s; }
.sc.act:hover .sthumb { transform:scale(1.04); box-shadow:0 4px 16px rgba(0,0,0,.5), 0 0 18px rgba(124,80,240,.15); }
.sc.title input { width:100%; background:transparent; border:0; box-shadow:none; padding:8px 10px; margin-left:-10px; font:inherit; font-size:13px; font-weight:500; color:var(--fg); outline:none; border-radius:8px; text-overflow:ellipsis; transition:background .15s, box-shadow .15s; }
.sc.title input:hover:not(:disabled):not(:focus) { background:rgba(0,0,0,.22); }
.sc.title input:focus { background:rgba(0,0,0,.42); box-shadow:0 0 0 2px rgba(139,92,246,.3); }

/* ---- team roles: colour-coded everywhere ---- */
.role-founder { color:#A78BFA !important; }
.role-admin { color:#22D3EE !important; }
.role-writer { color:#3DD6A3 !important; }
.role-designer { color:#F5A94B !important; }
.tm-row { display:flex; align-items:center; gap:12px; padding:10px 14px; border:1px solid var(--line); border-radius:12px;
  margin-bottom:8px; background:var(--glass-2); max-width:600px; box-shadow:var(--shadow-1); }
.tm-row b { font-size:13.5px; }
.tm-row .avatar.sm { width:30px; height:30px; border-radius:50%; }
.tm-row select.tm-role { margin-left:auto; min-width:160px; padding:8px 32px 8px 12px; font-size:12.5px; font-weight:600; }
.tm-fixed { font-size:12px; font-weight:600; letter-spacing:.02em; }
.tm-row .x { background:none; border:0; color:var(--dim); cursor:pointer; font-size:14px; padding:2px 4px; }
.tm-row .x:hover { color:var(--err); }
/* locked navigation + spreadsheet cells */
.sb-nav a.locked { opacity:.35; cursor:not-allowed; }
.sb-nav a.locked:hover { background:none; color:var(--mut); }
.sc.cell-locked { color:var(--dim); cursor:not-allowed; opacity:.6; }
.sc.title input:disabled { opacity:.55; cursor:not-allowed; }

textarea.readonly { opacity:.72; cursor:not-allowed; background:rgba(0,0,0,.22); }

/* Celebrity script flow: interview source blocks */
.cw-src { margin-top:12px; }
.cw-src .panel-head { text-transform:none; letter-spacing:.02em; font-size:12.5px; }
.cw-del { background:none; border:0; color:var(--dim); cursor:pointer; font-size:14px; padding:2px 6px; border-radius:6px; transition:color .15s; }
.cw-del:hover { color:var(--err); }
.cw-src textarea { min-height:150px; }

select:disabled { opacity:.75; cursor:not-allowed; }

/* ---- channel settings: collapsible, role-gated sections ---- */
.cs-sec { border:1px solid var(--line); border-radius:16px; margin-bottom:14px; overflow:hidden; box-shadow:var(--shadow-1);
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.008)); }
.cs-sec > summary { list-style:none; display:flex; align-items:center; gap:16px; padding:18px 22px; cursor:pointer; transition:background .18s; }
.cs-sec > summary::-webkit-details-marker { display:none; }
.cs-sec > summary:hover { background:rgba(139,92,246,.05); }
.cs-sec > summary > div { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.cs-sec > summary > div > b { font-size:15px; font-weight:650; letter-spacing:-.01em; }
.cs-sec > summary > div > span { font-size:12.5px; color:var(--mut); line-height:1.5; }
.cs-sec > summary > div > span em { font-style:normal; color:var(--fg); }
.cs-sec > summary > div > span b { color:var(--fg); font-weight:600; }
.cs-role { font-style:normal; font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; padding:4px 10px; border-radius:99px; border:1px solid currentColor; white-space:nowrap; flex:none; }
.cs-sec .chev { font-style:normal; color:var(--dim); font-size:22px; line-height:1; flex:none; transition:transform .2s var(--ease); }
.cs-sec[open] .chev { transform:rotate(90deg); color:var(--lav); }
.cs-sec[open] > summary { border-bottom:1px solid var(--line); }
.cs-body { padding:4px 22px 26px; }
.cs-body.settings { max-width:none; }
.cs-body > .sec:first-child, .cs-body > .settings > .sec:first-child { margin-top:20px; }

/* ================= premium retune: light, depth, type, air ================= */
/* typography */
.page-head h1 { font-size:38px; letter-spacing:-.04em; font-weight:700; line-height:1.05; }
.page-head { margin-bottom:54px; }
.hero { font-size:38px; letter-spacing:-.04em; }
.field > span, .sheet-head span, .section-head h2, .settings .sec, .pj-block h3, .out-head, .recent h3 { letter-spacing:.13em; color:var(--mut); }
.field > span { font-size:11px; }
.field > span em, .settings .sec em { color:var(--dim); }
.soon { color:var(--dim); }
/* spacing */
.pages { padding:72px 64px 120px; max-width:1120px; }
.field { margin-bottom:32px; gap:11px; }
.output { margin-top:68px; padding-top:44px; }
.home-grid { gap:22px; margin:12px 0 32px; }
.settings .sec { margin:40px 0 16px; }
/* raised surfaces: lighter fill + top-edge highlight + soft shadow */
.pj-block, .out, .panel, .channel-card, .project-row, .stages li, .vo-box, .tm-row, .drop, .cs-sec, .sheet-wrap, .modal-card, .profile, .empty-state {
  background:linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.025));
  border:1px solid var(--line);
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset, 0 10px 30px rgba(6,4,18,.45), 0 0 24px rgba(124,80,240,.05);
}
.big-card {
  background:radial-gradient(460px 220px at 18% -30%, rgba(139,92,246,.14), transparent 70%),
             linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border:1px solid var(--line-2);
  box-shadow:0 1px 0 rgba(255,255,255,.1) inset, 0 26px 64px rgba(6,4,18,.5), 0 0 48px rgba(124,80,240,.10);
}
.sheet-wrap { background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.022)); }
.sheet-head { background:rgba(0,0,0,.22); }
#sheet-body .sheet-row:nth-child(even) { background:rgba(255,255,255,.018); }
.modal-card { background:linear-gradient(180deg,#1E1D2C,#181725); }
.sidebar { background:linear-gradient(180deg, rgba(24,23,36,.82), rgba(19,18,29,.82)); }
/* recessed inputs on the lighter field */
input[type=text], input[type=password], input[type=email], textarea, select, .handle-input {
  background-color:rgba(0,0,0,.26); border:1px solid rgba(255,255,255,.06);
  box-shadow:inset 0 2px 8px rgba(0,0,0,.35), inset 0 -1px 0 rgba(255,255,255,.03);
}
input:focus, textarea:focus, select:focus, .handle-input:focus-within {
  border-color:rgba(139,92,246,.55); background-color:rgba(0,0,0,.32);
  box-shadow:inset 0 2px 8px rgba(0,0,0,.3), 0 0 0 3px rgba(139,92,246,.16), 0 0 28px rgba(124,79,240,.14);
}
pre { background:rgba(0,0,0,.28); box-shadow:inset 0 2px 8px rgba(0,0,0,.35); }
/* purple = jewel accent: primary gradient + glow; secondary quiet */
.btn.cyan { background:linear-gradient(180deg,#9A73FF,#7B55F5); box-shadow:0 1px 0 rgba(255,255,255,.22) inset, 0 8px 26px rgba(124,79,240,.40), 0 0 44px rgba(124,79,240,.14); }
.btn.cyan:hover:not(:disabled) { transform:translateY(-1px); filter:brightness(1.06); box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 12px 34px rgba(124,79,240,.52), 0 0 60px rgba(124,79,240,.2); }
.btn.purple, .btn.ghost { background:rgba(255,255,255,.06); border:1px solid var(--line-2); color:var(--fg); }
.btn.purple:hover:not(:disabled), .btn.ghost:hover:not(:disabled) { background:rgba(255,255,255,.09); border-color:rgba(167,139,250,.5); color:#fff; }
.sb-nav a { color:var(--mut); }
.sb-nav a.active { background:linear-gradient(90deg, rgba(139,92,246,.22), rgba(139,92,246,.06)); color:#fff; box-shadow:inset 2px 0 0 var(--purple), 0 0 22px rgba(124,80,240,.10); }
/* micro-interactions */
.pj-block, .out, .channel-card, .project-row, .big-card, .drop, .tm-row, .cs-sec > summary, .btn, .cbtn, .stpill, .sthumb, .sc.title input { transition:transform .2s var(--ease), box-shadow .28s var(--ease), border-color .2s, background .2s, filter .2s, color .15s; }
.pj-block:hover, .out:hover { transform:translateY(-1px); border-color:var(--line-2); }
.channel-card:hover, .project-row:hover { transform:translateY(-2px) scale(1.004); }
.big-card:hover { transform:translateY(-3px) scale(1.006); }
.btn:hover:not(:disabled) { transform:translateY(-1px); filter:brightness(1.05); }
/* consistent radii */
.pj-block, .out, .panel, .channel-card, .stages li, .vo-box, .tm-row, .drop { border-radius:14px; }
.project-row { border-radius:12px; }
.big-card, .sheet-wrap { border-radius:18px; }
.cs-sec, .modal-card { border-radius:16px; }

/* Interview Cutter: saved clips */
.iv-clips { display:flex; flex-direction:column; gap:12px; }
.iv-clip { display:grid; grid-template-columns:260px 1fr; gap:18px; align-items:start; margin-top:0; padding:14px; }
.iv-clip video { width:100%; aspect-ratio:16/9; border-radius:10px; background:#000; border:1px solid var(--line); }
.iv-meta { display:flex; flex-direction:column; gap:8px; min-width:0; }
.iv-top { display:flex; align-items:center; gap:10px; }
.iv-top .x { margin-left:auto; background:none; border:0; color:var(--dim); cursor:pointer; font-size:14px; }
.iv-top .x:hover { color:var(--err); }
.iv-text { font-size:14px; line-height:1.55; color:var(--fg); }
@media (max-width:900px) { .iv-clip { grid-template-columns:1fr; } }

/* default music: mood folders */
.nm-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:12px; }
.nm-mood { padding:14px 16px; border-radius:14px; border:1px solid var(--line); background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); box-shadow:var(--shadow-1); }
.nm-head { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.nm-head b { font-size:14px; } .nm-head .btn { margin-left:auto; }
.nm-mood .tracks:empty::before { content:"no tracks yet"; color:var(--dim); font-size:12px; font-style:italic; display:block; padding:4px 0; }
.nm-mood .tracks:empty { display:block; }

/* ---- shared context bar: Niche -> Channel -> Project (Script Writing, Video Editing, B-Roll Cutter, Interview Cutter) ---- */
.ctx-bar { display:flex; align-items:center; gap:26px; flex-wrap:wrap; padding:16px 20px; margin:-22px 0 38px;
  border:1px solid var(--line); border-radius:var(--r); background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 12px 34px rgba(6,4,18,.28); }
.ctx-bar .field.inline { margin:0; }
.ctx-bar select { min-width:170px; max-width:300px; text-overflow:ellipsis; }
.ctx-bar select.project-select { min-width:240px; max-width:380px; }
.ctx-bar select:not(:disabled):not([value=""]) { border-color:var(--line-2); }
.ctx-note { margin-left:auto; font-size:12.5px; color:var(--dim); text-align:right; line-height:1.4; }
.ctx-note b { color:var(--lav); font-weight:600; }
.ctx-note .chips { display:inline-flex; gap:5px; margin-left:8px; vertical-align:middle; }
.ctx-note .chips i { font-style:normal; font-size:10px; letter-spacing:.06em; text-transform:uppercase; padding:2px 7px; border-radius:99px;
  border:1px solid var(--line); color:var(--dim); }
.ctx-note .chips i.on { color:var(--fg); border-color:rgba(167,139,250,.45); background:rgba(139,92,246,.14); }
.ctx-note .saved { color:var(--ok); }
@media (max-width: 900px) { .ctx-note { margin-left:0; text-align:left; width:100%; } }

/* ---- Thumbnails (Higgsfield) ---- */
.th-title { padding:16px 20px; margin-bottom:26px; }
.th-title-text { font-size:20px; font-weight:600; letter-spacing:-.015em; line-height:1.3; }
.th-groups { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
@media (max-width: 1000px) { .th-groups { grid-template-columns:1fr; } }
.th-group h3 { margin:0 0 10px; font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--mut); font-weight:600; display:flex; gap:10px; align-items:baseline; }
.th-group h3 em { font-style:normal; text-transform:none; letter-spacing:0; color:var(--dim); font-weight:400; }
.th-style-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:10px; }
.th-style { display:flex; flex-direction:column; text-align:left; padding:0; border-radius:12px; overflow:hidden; cursor:pointer; font:inherit; color:var(--mut);
  border:1px solid var(--line); background:linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.006)); transition:border-color .2s, box-shadow .25s var(--ease), color .2s; }
.th-style .ref { aspect-ratio:16/9; background:#0b0a12 center/cover no-repeat; display:grid; place-items:center; color:var(--dim); font-size:11px; }
.th-style b { font-size:13px; font-weight:600; color:inherit; padding:9px 12px 3px; }
.th-style em { font-style:normal; font-size:11px; color:var(--dim); padding:0 12px 10px; }
.th-style:hover { border-color:rgba(167,139,250,.35); color:var(--fg); }
.th-style.on { color:#fff; border-color:rgba(167,139,250,.6); box-shadow:0 0 0 3px rgba(139,92,246,.16), 0 0 26px rgba(124,80,240,.14); }
.th-style.off { opacity:.5; }
.th-count { display:inline-flex; align-items:center; gap:4px; padding:4px; border:1px solid var(--line); border-radius:12px; background:var(--glass-2); }
.th-count span { font-size:11px; letter-spacing:.11em; text-transform:uppercase; color:var(--mut); padding:0 10px; font-weight:600; }
.th-count button { font:inherit; font-weight:600; width:38px; height:32px; border-radius:9px; border:1px solid transparent; background:transparent; color:var(--mut); cursor:pointer; transition:all .18s; }
.th-count button.on { background:rgba(139,92,246,.18); color:#fff; border-color:rgba(167,139,250,.5); }
.th-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; }
.th-card { border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--glass-2); box-shadow:var(--shadow-1); transition:border-color .2s; }
.th-card img { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; background:#000; }
.th-card .th-meta { display:flex; align-items:center; gap:8px; padding:10px 12px; flex-wrap:wrap; }
.th-card .th-meta .soon { flex:1; min-width:120px; }
.th-card.approved { border-color:rgba(61,214,163,.5); box-shadow:0 0 0 3px rgba(61,214,163,.12); }
.th-card .tag { font-size:10.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; padding:3px 9px; border-radius:99px; background:rgba(61,214,163,.16); color:var(--ok); }
.th-se-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:10px; margin-bottom:16px; }
.th-se-item { display:flex; gap:10px; align-items:center; padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:var(--glass-2); cursor:pointer; }
.th-se-item .ref { width:64px; aspect-ratio:16/9; border-radius:6px; background:#0b0a12 center/cover no-repeat; flex:none; }
.th-se-item b { font-size:13px; display:block; } .th-se-item span { font-size:11px; color:var(--dim); }
.th-se-item:hover { border-color:rgba(167,139,250,.4); }
.th-refs { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:8px; }
.th-refs .rf { position:relative; width:150px; aspect-ratio:16/9; border-radius:8px; overflow:hidden; border:1px solid var(--line); background:#000; }
.th-refs .rf img { width:100%; height:100%; object-fit:cover; display:block; }
.th-refs .rf button { position:absolute; top:4px; right:4px; width:22px; height:22px; border-radius:6px; border:0; background:rgba(0,0,0,.65); color:#fff; cursor:pointer; font-size:12px; }

/* ---- Thumbnails: Layer 2 overlays ---- */
.th-ov-row { display:flex; gap:26px; align-items:center; flex-wrap:wrap; }
.th-ov-row select { min-width:200px; }
.th-ov-preview { display:flex; gap:8px; }
.th-ov-preview .pv { width:96px; aspect-ratio:16/9; border-radius:8px; border:1px solid var(--line); background:#0b0a12 center/contain no-repeat; position:relative; }
.th-ov-preview .pv i { position:absolute; left:0; right:0; bottom:0; font-style:normal; font-size:9px; letter-spacing:.06em; text-transform:uppercase; text-align:center; padding:2px; background:rgba(0,0,0,.6); color:var(--mut); }
.th-ov-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:10px; }
.th-ov-item { border:1px solid var(--line); border-radius:12px; background:var(--glass-2); overflow:hidden; }
.th-ov-item .pv { aspect-ratio:16/9; background:repeating-conic-gradient(#1b1a2a 0 25%, #14141d 0 50%) 0 0/24px 24px; display:grid; place-items:center; }
.th-ov-item .pv img { max-width:92%; max-height:92%; object-fit:contain; }
.th-ov-item .m { padding:8px 10px; display:flex; flex-direction:column; gap:6px; font-size:12px; }
.th-ov-item .m b { font-size:12.5px; }
.th-ov-item .m .kind { font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--lav); }
.th-ov-item .m .ctl { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.th-ov-item .m .ctl input, .th-ov-item .m .ctl select { width:auto; min-width:0; padding:4px 8px; font-size:12px; }
.th-ov-item .m .ctl input[type=number] { width:64px; }
.th-card .th-ov-tags { font-size:10.5px; color:var(--dim); padding:0 12px 10px; }

/* ==== Spreadsheet: true grid (Google-Sheets structure, dark) ==== */
:root { --grid:rgba(190,180,240,.16); --grid-strong:rgba(190,180,240,.26); --sheet-bg:#17161F; --sheet-head:#1F1E2B; --sheet-rn:#1C1B27; }
.sheet-wrap { border:1px solid var(--grid-strong); border-radius:8px; overflow-x:auto; overflow-y:hidden; background:var(--sheet-bg);
  box-shadow:0 14px 40px rgba(6,4,18,.35); backdrop-filter:none; -webkit-backdrop-filter:none; }
.sheet-row { display:grid; grid-template-columns:44px minmax(220px,1fr) 128px 104px 112px 84px 96px 104px 96px; align-items:stretch; border-bottom:1px solid var(--grid); min-width:0; }
.sheet-row:last-child { border-bottom:0; }
#sheet-body .sheet-row:last-child { border-bottom:1px solid var(--grid); }
.sheet-row > * { border-right:1px solid var(--grid); min-width:0; }
.sheet-row > *:last-child { border-right:0; }
.sheet-row > *:not(:first-child) { justify-content:center; text-align:center; padding-left:8px; padding-right:8px; }
/* column letters strip + header row */
.sheet-cols { background:var(--sheet-rn); border-bottom:1px solid var(--grid-strong); }
.sheet-cols span { display:flex; align-items:center; justify-content:center; height:24px; font-size:10.5px; font-weight:600; letter-spacing:.06em; color:var(--dim); }
.sheet-head { background:var(--sheet-head); border-bottom:1px solid var(--grid-strong); }
.sheet-head span { display:flex; align-items:center; height:42px; padding:0 10px; font-size:12px; font-weight:600; letter-spacing:.01em; text-transform:none; color:var(--fg); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.2; }
.sheet-head span:first-child { padding-left:0; }
.sheet-head span:nth-child(2) { justify-content:flex-start; text-align:left; padding-left:12px; }
/* row-number column */
.sheet-row .rn { background:var(--sheet-rn); color:var(--dim); font-size:11px; font-weight:600; justify-content:center; text-align:center; padding:0; border-right:1px solid var(--grid-strong); }
#sheet-body .sheet-row:hover .rn { color:var(--fg); }
/* cells: square, even height */
.sc { padding:0 10px; font-size:13px; color:var(--fg); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:flex; align-items:center; height:44px; min-height:0; }
.sc.title { padding-left:12px; padding-right:10px; justify-content:flex-start; text-align:left; }
#sheet-body .sheet-row { background:transparent; transition:background .12s; }
#sheet-body .sheet-row:nth-child(even) { background:transparent; }
#sheet-body .sheet-row:hover { background:rgba(255,255,255,.025); }
.sc.act:hover { background:rgba(139,92,246,.10); box-shadow:inset 0 0 0 1px rgba(167,139,250,.45); }
.sc.title input { margin-left:0; padding:6px 8px; border-radius:4px; font-size:13px; }
.sc.title input:focus { background:rgba(0,0,0,.35); box-shadow:inset 0 0 0 2px var(--purple); }
.sthumb { width:52px; height:30px; border-radius:3px; box-shadow:none; }
.cbtn { padding:4px 11px; border-radius:5px; font-size:11.5px; }
.stpill { padding:4px 10px; border-radius:4px; }
.big-card, .sheet-wrap { border-radius:8px; }
.big-card { border-radius:18px; }

/* =====================================================================================================
   DESIGN SYSTEM v3 — layered near-black, ONE accent, Satoshi + Inter. Aesthetics only: every rule below
   re-skins existing components; structure, features and behaviour are untouched.
   ===================================================================================================== */
:root {
  --bg-app:#0A0A0C; --bg-sidebar:#0D0D10; --surface:#141418; --surface-raise:#1B1B21; --input-bg:#131317;
  --border-hair:rgba(255,255,255,0.06); --border:#232329;
  --text-primary:#F4F4F6; --text-secondary:#9B9BA5; --text-muted:#64646E; --text-label:#7A7A85;
  --accent:#6D5DFC; --accent-hover:#5B4CE6; --accent-press:#4A3DC7; --accent-subtle:rgba(109,93,252,0.12); --accent-text:#B3A8FF;
  --status-live:#3FB984;
  --font-head:"Satoshi","Inter",system-ui,sans-serif; --font-body:"Inter","Satoshi",system-ui,sans-serif;
  --shadow-card:0 1px 2px rgba(0,0,0,0.4); --shadow-drop:0 8px 30px rgba(0,0,0,0.5); --ring:0 0 0 3px rgba(109,93,252,0.35);
  --r-input:10px; --r-card:14px; --r-chip:8px;
  /* legacy tokens -> new system (everything built on the old names inherits the new look) */
  --bg:var(--bg-app); --bg-2:var(--surface); --fg:var(--text-primary); --mut:var(--text-secondary); --dim:var(--text-muted);
  --purple:var(--accent); --purple-2:var(--accent-hover); --lav:var(--accent-text); --cyan:var(--accent);
  --glass:var(--surface); --glass-2:var(--surface); --line:var(--border-hair); --line-2:var(--border);
  --ok:var(--status-live); --err:#F0708A;
  --r:var(--r-card); --r-sm:var(--r-input);
  --shadow-1:var(--shadow-card); --shadow-2:var(--shadow-card);
  --grid:var(--border-hair); --grid-strong:var(--border); --sheet-bg:var(--surface); --sheet-head:var(--surface-raise); --sheet-rn:var(--surface-raise);
}
/* ---- background: flat app colour, no purple wash, 2.5% noise ---- */
body { background:var(--bg-app); color:var(--text-primary); font:400 15px/1.6 var(--font-body); letter-spacing:0; }
body::after { opacity:.025; }
#space, .glow { display:none !important; }
.page[data-page="home"] { position:relative; }
.page[data-page="home"]::before { content:""; position:absolute; left:50%; top:-160px; width:800px; height:520px; transform:translateX(-50%); pointer-events:none; z-index:-1;
  background:radial-gradient(closest-side, rgba(109,93,252,.04), transparent 70%); }
/* ---- typography ---- */
h1, h2, h3, .hero, .page-head h1, .big-card b, .modal-card h2, .cs-sec > summary > div > b, .empty-state b, .th-title-text, .term-head .name, .brand { font-family:var(--font-head); }
.hero { font-size:42px; font-weight:600; line-height:1.05; letter-spacing:-.025em; color:var(--text-primary); margin:0 0 24px; }
.hero b { font-weight:600; font-size:1em; letter-spacing:-.025em; background:none; -webkit-background-clip:initial; background-clip:initial; color:var(--accent-text); }
.page-head h1 { font-size:30px; font-weight:600; line-height:1.1; letter-spacing:-.02em; background:none; -webkit-background-clip:initial; background-clip:initial; color:var(--text-primary); }
.page-head { margin-bottom:40px; align-items:flex-end; }
.page-head .soon, .page-head > div > .soon { display:block; margin-top:8px; font-size:14px; color:var(--text-secondary); line-height:1.5; max-width:820px; }
.big-card b, .modal-card h2, .cs-sec > summary > div > b, .empty-state b, .th-title-text { font-size:18px; font-weight:600; letter-spacing:-.01em; }
.brand, .sb-brand { font-weight:600; font-size:18px; letter-spacing:-.02em; color:var(--text-primary); }
.brand span { color:var(--accent-text); font-weight:600; }
.field > span, .section-head h2, .settings .sec, .pj-block h3, .out-head, .recent h3, .th-group h3, .sheet-cols span, .th-count span, .panel-head {
  font-family:var(--font-body); font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--text-label); }
.panel-head { text-transform:uppercase; }
.field > span em, .settings .sec em, .th-group h3 em { font-size:12px; letter-spacing:0; text-transform:none; font-weight:400; color:var(--text-muted); }
.soon, .note, .hint-line, .drop .hint, .meta, .out-foot, .crumb, .stages .detail, .stages .time, .term .empty, .review-intro, .cost-row em, .th-ov-tags, .ctx-note, .who .role, .channel-card .key, .project-row > span, .tracks li .d, .pill { color:var(--text-muted); font-size:13px; }
.soon b, .ctx-note b { color:var(--text-secondary); font-weight:600; }
.lead, .big-card span:last-child, .review-intro, .iv-text, .out-body, .pj-block > div:not(.empty), .cs-sec > summary > div > span { color:var(--text-secondary); }
.who b { color:var(--text-primary); font-weight:600; font-size:13px; }
.crown { color:var(--accent-text); }
/* ---- spacing (8px grid) ---- */
.pages { padding:48px 48px 96px; max-width:1040px; }
.pages:has(.page[data-page="sheet"].active) { max-width:1280px; }   /* the spreadsheet table breathes wider than form pages */
.field { gap:8px; margin-bottom:24px; }
.section-head { margin-bottom:16px; }
.output { margin-top:48px; padding-top:32px; border-top:1px solid var(--border-hair); }
.grid { gap:16px; margin-bottom:24px; }
.row { gap:16px; }
.settings .sec { margin:32px 0 12px; }
.panel { margin-top:24px; padding:24px; }
.ctx-bar { padding:16px 24px; margin:-8px 0 32px; gap:24px; }
/* ---- surfaces: flat colour + hairline, card shadow only, no gradients / blur / glow ---- */
.pj-block, .out, .panel, .channel-card, .project-row, .stages li, .vo-box, .tm-row, .drop, .cs-sec, .modal-card, .profile, .empty-state,
.ctx-bar, .th-title, .th-card, .th-style, .th-se-item, .th-ov-item, .br-mode, .nm-mood, .iv-clip, .term, .card, .big-card, .cw-src, .asset-prev {
  background:var(--surface); border:1px solid var(--border-hair); box-shadow:var(--shadow-card); backdrop-filter:none; -webkit-backdrop-filter:none; }
.pj-block, .out, .panel, .channel-card, .stages li, .vo-box, .tm-row, .drop, .cs-sec, .ctx-bar, .th-title, .th-card, .th-ov-item, .br-mode, .nm-mood, .iv-clip, .term, .empty-state, .modal-card, .profile, .big-card, .card { border-radius:var(--r-card); }
.project-row, .th-style, .th-se-item, .tracks li { border-radius:12px; }
.pj-block, .out, .channel-card, .panel, .cs-body, .big-card, .empty-state, .modal-card { padding:24px; }
.cs-body { padding:8px 24px 24px; }
.pj-block:hover, .out:hover, .channel-card:hover, .project-row:hover, .big-card:hover, .drop:hover, .th-style:hover, .th-se-item:hover, .br-mode:hover, .tm-row:hover, .profile:hover, .cs-sec > summary:hover {
  transform:none; box-shadow:var(--shadow-card); background:var(--surface-raise); border-color:var(--border); filter:none; }
.big-card:hover, .channel-card:hover, .project-row:hover, .th-style:hover, .br-mode:hover, .drop:hover, .drop.over { border-color:var(--accent); }
.big-card::before { display:none; }
.empty-state { color:var(--text-secondary); }
.empty-state .ic { color:var(--text-muted); }
.cs-sec > summary { padding:20px 24px; }
.cs-sec[open] > summary { border-bottom:1px solid var(--border-hair); }
.cs-sec[open] .chev { color:var(--accent-text); }
pre, .notes-out { background:var(--input-bg); border:1px solid var(--border-hair); box-shadow:none; border-radius:var(--r-input); color:var(--text-secondary); }
.bar { background:var(--surface-raise); }
#bar-fill, #sw-vo-bar, #iv-bar, #br-bar, #th-bar { background:var(--accent) !important; }
/* ---- inputs / selects ---- */
input[type=text], input[type=password], input[type=email], textarea, select, .handle-input {
  background:var(--input-bg); background-color:var(--input-bg); color:var(--text-primary); border:1px solid var(--border); border-radius:var(--r-input);
  box-shadow:none; font:400 15px/1.4 var(--font-body); }
input[type=text], input[type=password], input[type=email], select { height:40px; padding:0 12px; }
textarea { padding:12px; line-height:1.6; }
::placeholder { color:var(--text-muted); opacity:1; }
input:focus, textarea:focus, select:focus, .handle-input:focus-within { border-color:var(--accent); background-color:var(--input-bg); box-shadow:var(--ring); }
select { padding-right:36px; background-color:var(--input-bg);
  background-image:linear-gradient(45deg,transparent 50%,var(--text-secondary) 50%),linear-gradient(135deg,var(--text-secondary) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size:5px 5px, 5px 5px; background-repeat:no-repeat; }
select:focus { background-color:var(--input-bg); }
.handle-input .at { color:var(--accent-text); padding:0 0 0 12px; }
.handle-input input { height:38px; }
input:-webkit-autofill, input:-webkit-autofill:focus { -webkit-box-shadow:0 0 0 1000px var(--input-bg) inset !important; }
textarea.readonly { background:var(--surface); opacity:.8; }
/* ---- buttons ---- */
.btn { height:40px; padding:0 16px; border-radius:var(--r-input); font:600 14px/1 var(--font-body); letter-spacing:-.005em; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--surface-raise); color:var(--text-primary); border:1px solid var(--border-hair); box-shadow:none; }
.btn:hover:not(:disabled) { transform:none; filter:none; background:#22222A; border-color:var(--border); box-shadow:none; }
.btn.cyan { background:var(--accent); color:#fff; border-color:transparent; box-shadow:none; }
.btn.cyan:hover:not(:disabled) { background:var(--accent-hover); box-shadow:0 4px 16px rgba(109,93,252,.28); transform:none; filter:none; }
.btn.cyan:active:not(:disabled) { background:var(--accent-press); box-shadow:none; }
.btn.big { height:40px; padding:0 20px; font-size:14px; }
.btn.sm { height:32px; padding:0 12px; font-size:13px; }
.btn.purple, .btn.ghost { background:var(--surface-raise); color:var(--text-primary); border:1px solid var(--border-hair); box-shadow:none; }
.btn.purple:hover:not(:disabled), .btn.ghost:hover:not(:disabled) { background:#22222A; border-color:var(--border); color:var(--text-primary); box-shadow:none; }
.btn.danger { background:transparent; color:var(--err); border-color:rgba(240,112,138,.35); }
.btn:disabled { opacity:.4; }
.btn:focus-visible, .sb-nav a:focus-visible, .th-style:focus-visible { outline:none; box-shadow:var(--ring); }
.copy, .undo, .sb-toggle, .cw-del { font-family:var(--font-body); }
.copy { border-radius:var(--r-chip); border-color:var(--border-hair); color:var(--text-secondary); }
.copy:hover { color:var(--accent-text); border-color:var(--accent); }
.copy.ok { background:var(--accent); border-color:var(--accent); }
#downloads a, #br-downloads a { color:var(--accent-text); border:1px solid var(--border-hair); background:var(--surface-raise); border-radius:var(--r-input); box-shadow:none; }
#downloads a:hover, #br-downloads a:hover { border-color:var(--accent); color:var(--text-primary); box-shadow:none; background:var(--surface-raise); }
/* ---- chips / tags / pills: no green ---- */
.chips i, .ctx-note .chips i, .br-clips i, .stpill, .status-pill, .pill, .cs-role, .tracks li .chip, .th-card .tag, .th-ov-item .m .kind, .stages .st, .state {
  font-family:var(--font-body); border-radius:var(--r-chip); }
.chips i, .ctx-note .chips i, .br-clips i { background:var(--surface); color:var(--text-muted); border:1px solid var(--border-hair); }
.chips i.on, .ctx-note .chips i.on, .br-clips i.on { background:var(--accent-subtle); color:var(--accent-text); border-color:var(--border-hair); }
.status-pill, .stpill.st-draft { color:var(--text-muted); border-color:var(--border-hair); background:var(--surface); }
.status-pill.in-progress, .stpill.st-in-progress { color:var(--accent-text); border-color:var(--border-hair); background:var(--accent-subtle); }
.status-pill.done, .stpill.st-done { color:var(--text-secondary); border-color:var(--border); background:var(--surface-raise); }
.status-pill.uploaded, .stpill.st-uploaded { color:var(--status-live); border-color:rgba(63,185,132,.3); background:rgba(63,185,132,.08); }   /* genuine live status */
.channel-card .key, .channel-card .key.on { color:var(--text-muted); }                       /* voice dots: no green */
.drop .file { color:var(--text-secondary); }
.drop.done { border-color:var(--border); background:var(--surface); }
.durations .flag.ok, .out-foot .ok { color:var(--text-secondary); }
.state.approved, .cand .badge { background:var(--accent); color:#fff; }
.term.approved { border-color:var(--accent); }
.cand.selected { border-color:var(--accent); box-shadow:var(--ring); }
.stages li.done .ind { border-color:var(--accent); background:var(--accent); color:#fff; }
.stages li.done .st { color:var(--accent-text); }
.stages li.running { border-color:var(--accent); }
.th-card.approved { border-color:var(--accent); box-shadow:var(--shadow-card); }
.th-card .tag { background:var(--accent-subtle); color:var(--accent-text); }
.th-style.on, .br-mode.on { background:var(--accent-subtle); border-color:var(--accent); box-shadow:none; color:var(--text-primary); }
.th-count button.on { background:var(--accent-subtle); color:var(--text-primary); border-color:transparent; }
.th-count { border-radius:var(--r-input); background:var(--surface); border-color:var(--border-hair); }
#render-status.ok, #sw-vo-status.ok, .ctx-note .saved { color:var(--status-live); }             /* live / ready = the one green */
.cost-row.total b, .crumb:hover, .cs-sec[open] .chev, .handle-input .at { color:var(--accent-text); }
/* ---- sidebar ---- */
.app { grid-template-columns:248px 1fr; }
.app.collapsed { grid-template-columns:72px 1fr; }
.sidebar { background:var(--bg-sidebar); border-right:1px solid var(--border-hair); box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; padding:24px 16px; }
.sb-top { padding:0 8px 24px; }
.sb-toggle { border-color:var(--border-hair); color:var(--text-muted); border-radius:8px; }
.sb-nav { gap:4px; }
.sb-nav a { height:40px; padding:0 12px; gap:12px; border-radius:10px; color:var(--text-secondary); font:500 14px/1 var(--font-body); box-shadow:none; background:none; }
.sb-nav a .ic { width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; opacity:1; color:var(--text-muted); font-size:0; }
.sb-nav a .ic svg { width:18px; height:18px; }
.sb-nav a:hover { background:var(--surface); color:var(--text-primary); }
.sb-nav a.active { background:var(--accent-subtle); color:var(--text-primary); box-shadow:none; }
.sb-nav a.active .ic { color:var(--accent); }
.sb-nav a.locked { opacity:.35; }
.app.collapsed .sb-nav a { padding:0; }
.profile { padding:10px 12px; border-radius:var(--r-card); }
.gear { display:inline-flex; color:var(--text-muted); padding:6px; border-radius:8px; }
.gear svg { width:18px; height:18px; }
.gear:hover { color:var(--text-primary); background:var(--surface-raise); }
.avatar.round { box-shadow:0 0 0 1px var(--border-hair); }
/* ---- home ---- */
.home-grid { gap:16px; margin:8px 0 24px; }
.big-card { display:flex; flex-direction:column; justify-content:flex-start; gap:8px; min-height:180px; padding:24px; border-radius:var(--r-card); position:relative; }
.big-card .ic { width:40px; height:40px; border-radius:10px; background:var(--accent-subtle); color:var(--accent); display:inline-flex; align-items:center; justify-content:center; font-size:0; margin-bottom:8px; }
.big-card .ic svg { width:20px; height:20px; }
.big-card b { font-size:18px; font-weight:600; letter-spacing:-.01em; color:var(--text-primary); }
.big-card span:last-child { font-size:14px; color:var(--text-secondary); line-height:1.5; max-width:34ch; }
/* (home-card arrow lives in the action-cards block further down — single definition, bottom-right) */
.home-actions { gap:16px; margin-bottom:40px; }
.home-actions .soon { font-size:13px; color:var(--text-muted); }
.recent h3 { margin:0 0 12px; }
.projects { gap:8px; }
.project-row { padding:16px; border-radius:12px; }
.project-row b { font-size:15px; font-weight:500; letter-spacing:0; color:var(--text-primary); }
/* ---- channels / projects / misc cards ---- */
.channel-card .ic { background:var(--accent-subtle); border:0; color:var(--accent); border-radius:10px; }
.pj-block:hover, .out:hover { border-color:var(--border-hair); background:var(--surface); }
.tracks li { background:var(--input-bg); border:1px solid var(--border-hair); }
.tracks li .chip { color:var(--accent-text); border-color:var(--border-hair); background:var(--accent-subtle); }
.tab { font-family:var(--font-body); } .tab.active { border-bottom-color:var(--accent); }
.modal { background:rgba(10,10,12,.7); backdrop-filter:blur(6px); }
.modal-card { background:var(--surface-raise); box-shadow:var(--shadow-drop); border-radius:var(--r-card); }
.stages .ind { border-color:var(--border); }
.stages li.running .ind { border-top-color:var(--accent); border-right-color:var(--accent); }
.stages li.running .st { color:var(--accent-text); }
.cs-role.role-founder, .role-founder { color:var(--accent-text) !important; }
.th-ov-item .pv { background:repeating-conic-gradient(var(--surface-raise) 0 25%, var(--surface) 0 50%) 0 0/24px 24px; }
.th-style .ref, .th-se-item .ref, .th-ov-preview .pv { background-color:var(--input-bg); }
.th-card { background:var(--surface); }
.iv-clip video, .asset-prev, #player, .pj-block img.thumb { border-color:var(--border-hair); border-radius:10px; }
.sc.act:hover { background:var(--accent-subtle); box-shadow:inset 0 0 0 1px var(--accent); }
.sc.title input:focus { box-shadow:inset 0 0 0 2px var(--accent); background:var(--input-bg); }
.sheet-head span, .sheet-cols span { font-family:var(--font-body); }
.sheet-head span { font-size:12px; font-weight:600; letter-spacing:0; text-transform:none; color:var(--text-primary); }
.sheet-wrap { box-shadow:var(--shadow-card); border-radius:var(--r-card); border-color:var(--border); }
.cbtn { color:var(--accent-text); border-color:var(--border-hair); background:var(--surface-raise); border-radius:var(--r-chip); }
.sc.act:hover .cbtn { border-color:var(--accent); color:var(--text-primary); background:var(--surface-raise); box-shadow:none; }
.sthumb { border-color:var(--border-hair); box-shadow:none; }
.sc.act:hover .sthumb { transform:none; box-shadow:none; }
.sc.act:hover .stpill { box-shadow:none; }
.ctx-bar select:not(:disabled):not([value=""]) { border-color:var(--border); }
.key-row input { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:14px; }
.who .role { font-size:12px; }
.crumb { font-size:13px; }
@media (max-width:900px) { .app { grid-template-columns:72px 1fr; } .pages { padding:24px 16px 64px; } }

/* ---- Home refinement: promoted Recent Projects with pipeline dots + quiet Tools strip ---- */
.home-grid { margin:8px 0 24px; }
.home-actions { margin-bottom:48px; }
.recent h3, .tools h3 { font:600 11px/1 var(--font-body); letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); margin:0 0 12px; }
.recent { display:flex; flex-direction:column; gap:8px; }
.recent h3 { margin-bottom:4px; }
.project-row.home-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px; border-radius:12px; border:1px solid rgba(255,255,255,0.06); background:var(--surface);
  box-shadow:none; transition:border-color .18s, transform .18s var(--ease), box-shadow .18s, background .18s; }
.project-row.home-row:hover { border-color:var(--accent); transform:translateY(-1px); box-shadow:0 1px 2px rgba(0,0,0,0.4); background:var(--surface); }
.pr-main { display:flex; flex-direction:column; gap:8px; min-width:0; }
.pr-main b { font:500 15px/1.3 var(--font-body); color:var(--text-primary); letter-spacing:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pr-dots { display:inline-flex; gap:6px; align-items:center; }
.pr-dots i { width:8px; height:8px; border-radius:50%; background:var(--border); display:inline-block; }
.pr-dots i.on { background:var(--accent); }
.pr-side { display:flex; align-items:center; gap:12px; flex:none; }
.pr-chan { font-size:13px; color:var(--text-muted); }
.home-row .status-pill { font:600 10.5px/1 var(--font-body); letter-spacing:.06em; padding:5px 9px; border-radius:var(--r-chip); text-transform:uppercase; }
.tools { margin-top:48px; }
.tool-strip { display:flex; flex-wrap:wrap; gap:8px; }
.tool-chip { display:inline-flex; align-items:center; gap:10px; height:44px; padding:0 14px; border-radius:10px; background:var(--surface); border:1px solid rgba(255,255,255,0.06);
  color:var(--text-secondary); text-decoration:none; font:500 14px/1 var(--font-body); transition:background .15s, color .15s, border-color .15s; }
.tool-chip .ic { display:inline-flex; width:18px; height:18px; color:var(--text-muted); transition:color .15s; }
.tool-chip .ic svg { width:18px; height:18px; }
.tool-chip:hover { background:var(--surface-raise); color:var(--text-primary); border-color:var(--border); }
.tool-chip:hover .ic { color:var(--text-primary); }

/* =============================== ROUND 2: alignment, rhythm, hierarchy (aesthetics only) =============================== */
/* 1. 960px column, left-aligned, 48px padding */
.pages { max-width:960px; margin:0; padding:48px 48px 96px; }
.pages:has(.page.active[data-page="sheet"]) { max-width:none; }
/* 2. one page header: title, one-line descriptor under it, controls on the right; right-aligned header text removed */
.page-head { display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:24px; row-gap:6px; align-items:center; margin-bottom:32px; }
.page-head > h1 { grid-column:1; grid-row:1; }
.page-head > .soon { grid-column:1; grid-row:2; }
.page-head > div:first-child { grid-column:1; grid-row:1 / span 2; display:flex; flex-direction:column; gap:6px; min-width:0; }
.page-head > :not(h1):not(.soon):not(div:first-child) { grid-column:2; grid-row:1 / span 2; }
.page-head .soon, .page-head > div > .soon { margin:0; font:400 14px/1.4 var(--font-body); color:var(--text-secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; display:block; }
#sw-flow-hint, #edit-project { display:none !important; }
.info { font-style:normal; display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; margin-left:4px; border-radius:50%; font-size:12px; color:var(--text-muted); cursor:help; position:relative; vertical-align:-2px; }
.info:hover, .info:focus { color:var(--accent-text); outline:none; }
.info::after { content:attr(data-tip); position:absolute; left:0; top:22px; z-index:20; width:360px; white-space:normal; padding:10px 12px; border-radius:10px; background:var(--surface-raise); border:1px solid var(--border); color:var(--text-secondary); font:400 12.5px/1.5 var(--font-body); box-shadow:var(--shadow-drop); opacity:0; pointer-events:none; transition:opacity .15s; }
.info:hover::after, .info:focus::after { opacity:1; }
/* 3. the control bar: one card, labels above fields, helper bottom-left */
.ctx-bar { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; padding:16px; border-radius:12px; margin:0 0 32px; background:var(--surface); border:1px solid var(--border-hair); box-shadow:none; }
.ctx-bar .field.inline { flex-direction:column; align-items:stretch; gap:8px; margin:0; min-width:0; }
.ctx-bar .field.inline > span { font:600 11px/1 var(--font-body); letter-spacing:.08em; text-transform:uppercase; color:var(--text-label); }
.ctx-bar select { width:100%; min-width:0; max-width:none; }
.ctx-bar .ctx-note { grid-column:1 / -1; margin:0; text-align:left; font-size:12px; color:var(--text-muted); line-height:1.4; }
.ctx-bar .ctx-note .chips { margin-left:6px; }
/* 4. labels + helper on the same line */
.field > span { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; font:600 11px/1 var(--font-body); letter-spacing:.08em; text-transform:uppercase; color:var(--text-label); }
.field > span em, .section-head .soon, .settings .sec em { font:400 12px/1.4 var(--font-body); letter-spacing:0; text-transform:none; color:var(--text-muted); }
.section-head { display:flex; justify-content:flex-start; align-items:baseline; gap:12px; margin-bottom:8px; }
.section-head h2 { font:600 11px/1 var(--font-body); letter-spacing:.08em; text-transform:uppercase; color:var(--text-label); }
/* 5. rhythm: 32 between sections, 8 label->field, 6 field->helper */
.field { gap:8px; margin-bottom:32px; }
.field .meta, .field .hint-line { margin-top:-2px; }
.meta { margin-top:6px; }
.output { margin-top:32px; padding-top:32px; }
.panel { margin-top:32px; }
#sw-status:empty, #th-status:empty { display:none; }
#sw-status, #th-status { margin-top:8px !important; }
.stages { margin-top:32px; }
#sw-output { margin-bottom:8px; }
.grid { margin-bottom:32px; }
.durations { margin:-16px 0 32px; }
/* 6. helper left, primary button right, centred */
.row { align-items:center; }
.row > .soon { flex:1; min-width:0; }
/* 7. helper contrast */
.soon, .drop .hint, .field .hint-line, .note, .stages .detail, .stages .time, .cost-row em, .th-ov-tags { color:var(--text-label); }
/* ---- per page ---- */
.output .row:has(#sw-to-edit) { justify-content:flex-end; gap:8px; }
.output .row:has(#sw-to-edit) .copy { height:32px; padding:0 12px; border-radius:var(--r-input); font:600 13px/1 var(--font-body); background:var(--surface-raise); border:1px solid var(--border-hair); color:var(--text-primary); }
.drop { border:1px dashed var(--border); border-radius:12px; background:var(--surface); box-shadow:none; }
.drop .ico { transition:transform .18s var(--ease); }
.drop:hover, .drop.over { border-color:var(--accent); border-style:dashed; background:var(--surface); }
.drop:hover .ico { transform:translateY(-2px); }
.out-grid { align-items:stretch; }
.out { padding:24px; min-height:150px; }
.out-head { margin-bottom:12px; align-items:flex-start; }
.br-modes { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.br-mode { border-radius:12px; height:100%; padding:14px 16px; }
.br-mode.on { background:var(--accent-subtle); border-color:var(--accent); }
[data-page="thumbs"] .th-title { margin-bottom:32px; padding:16px 20px; }
[data-page="thumbs"] .section-head { margin-top:32px; margin-bottom:12px; }
[data-page="thumbs"] .th-styles { margin-bottom:0; }
[data-page="thumbs"] .row { margin-top:32px !important; }
.th-style, .th-style .ref { border-radius:10px; }
.th-style .ref { border-radius:10px 10px 0 0; }
.th-style-list { grid-template-columns:repeat(auto-fill, minmax(168px, 1fr)); }
/* channels cards */
.channel-card { position:relative; display:grid; grid-template-columns:44px minmax(0,1fr); grid-template-rows:auto auto auto; column-gap:14px; row-gap:2px; padding:20px; border-radius:var(--r-card); }
.channel-card .ic { width:44px; height:44px; border-radius:12px; grid-row:1 / span 2; margin:0; font-size:14px; }
.channel-card b.ch-name { font:600 16px/1.25 var(--font-head); letter-spacing:-.01em; color:var(--text-primary); grid-column:2; align-self:end; }
.channel-card b.ch-name.link { cursor:pointer; text-decoration:underline; text-decoration-color:transparent; text-underline-offset:3px; transition:text-decoration-color .15s, color .15s; }
.channel-card b.ch-name.link:hover { text-decoration-color:var(--accent); color:var(--accent-text); }
.channel-card .niche { grid-column:2; font-size:13px; color:var(--text-muted); align-self:start; }
.channel-card .key { grid-column:1 / -1; margin-top:14px; font-size:12px; color:var(--text-muted); display:flex; align-items:center; gap:6px; }
.channel-card .key .dot { width:6px; height:6px; border-radius:50%; background:var(--border); display:inline-block; }
.channel-card .key.on .dot { background:var(--status-live); }
/* .ch-open hover label removed — the channel NAME is the link (underline + accent on hover) */
.channel-card:hover { border-color:var(--accent); transform:translateY(-1px); background:var(--surface); box-shadow:var(--shadow-card); }

/* projects: pipeline chips */
.project-row .chips { gap:8px; margin-top:6px; }
.chips i { font:600 10.5px/1 var(--font-body); letter-spacing:.06em; padding:5px 9px; border-radius:var(--r-chip); background:var(--surface); color:var(--text-muted); border:1px solid var(--border-hair); min-width:64px; text-align:center; }
.chips i.on { background:var(--accent-subtle); color:var(--accent-text); border-color:var(--border-hair); }
/* spreadsheet: full width, sticky header, zebra, 12px cell padding */
.sheet-wrap { overflow:visible; border-radius:12px; }
@media (max-width:1100px) { .sheet-wrap { overflow-x:auto; } }
.sheet-cols { position:sticky; top:0; z-index:3; background:var(--surface-raise); }
.sheet-head { position:sticky; top:24px; z-index:3; background:var(--surface-raise); }
.sheet-row { grid-template-columns:44px minmax(260px,1.6fr) 140px minmax(110px,1fr) minmax(120px,1fr) minmax(90px,.9fr) minmax(100px,1fr) minmax(110px,1fr) minmax(100px,1fr); }
.sc { padding:0 12px; height:44px; }
.sc.title { padding-left:12px; }
.sheet-head span { padding:0 12px; height:44px; }
#sheet-body .sheet-row { background:var(--bg-app); }
#sheet-body .sheet-row:nth-child(even) { background:rgba(255,255,255,.02); }
#sheet-body .sheet-row:hover { background:rgba(255,255,255,.035); }
.sheet-foot { margin-top:12px; font-size:13px; color:var(--text-label); }
.sheet-foot #sheet-empty:not(.hidden)::after { content:" · "; }

/* ---- Settings: the three API key blocks are one component ---- */
.key-row { display:flex; align-items:center; gap:8px; }
.key-row .key-input, .key-row input { flex:1; min-width:0; height:40px; padding:0 12px; border-radius:var(--r-input); border:1px solid var(--border); background:var(--input-bg);
  font:400 14px/40px var(--font-body); letter-spacing:0; color:var(--text-primary); box-shadow:none; }
.key-row input::placeholder { font:400 14px/40px var(--font-body); letter-spacing:0; color:var(--text-muted); }
.key-row input.has-key::placeholder { letter-spacing:.14em; font-size:14px; color:var(--text-secondary); }
.key-row input:focus { border-color:var(--accent); box-shadow:var(--ring); }
.key-row .btn { height:40px; padding:0 14px; min-width:96px; font:600 14px/1 var(--font-body); margin:0; }
.key-row .btn.sm { height:40px; font-size:14px; }
.key-status, .key-row + .soon { display:block; margin-top:6px; font:400 12px/1.4 var(--font-body); color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.settings .sec { margin:32px 0 8px; }
.settings .sec { display:flex; align-items:baseline; gap:8px; white-space:nowrap; overflow:hidden; }
.settings .sec em { overflow:hidden; text-overflow:ellipsis; min-width:0; }

/* ---- Founder handle: violet -> magenta gradient + visible slow sweep. Bound to role === "founder" (never to the handle
   string); exempt from theme/accent overrides (own tokens, !important on the fill). ---- */
:root { --founder-1:#A78BFA; --founder-2:#C46BEA; --founder-3:#E0559E; --founder-sweep:#FBF2FF; }
.handle--founder, .handle--founder:hover {
  background:linear-gradient(105deg, var(--founder-1) 0%, var(--founder-2) 42%, var(--founder-sweep) 50%, var(--founder-2) 58%, var(--founder-3) 100%) !important;
  background-size:220% 100% !important; background-position:-30% 0;
  -webkit-background-clip:text !important; background-clip:text !important;
  -webkit-text-fill-color:transparent !important; color:transparent !important;
  font-weight:600; display:inline-block; animation:founder-sweep 7s ease-in-out infinite; }
@keyframes founder-sweep {
  0%   { background-position:130% 0; }
  35%  { background-position:-30% 0; }   /* ~2.5s slow, visible cross */
  100% { background-position:-30% 0; }   /* ~4.5s rest, then loop */
}
.crown.gold { color:var(--founder-2) !important; }
@media (prefers-reduced-motion: reduce) { .handle--founder { animation:none; background-position:50% 0; } }

/* ---- Wordmark: two-tone kept; the gleam is painted on a text-shaped copy (clipped to the glyphs), so only the letters
   light up as it passes - the background stays untouched ---- */
.logo-wordmark { position:relative; display:inline-block; font-weight:600; overflow:visible; }
.logo-wordmark .logo-automate { color:var(--text-primary); }
.logo-wordmark .logo-motion, .brand.logo-wordmark span.logo-motion { color:var(--accent-text); font-weight:inherit; }
.logo-wordmark::after {
  content:attr(data-text); position:absolute; left:0; top:0; pointer-events:none; white-space:nowrap;
  font:inherit; letter-spacing:inherit; line-height:inherit;
  /* lavender-white gleam: reads on the white word (as a light lilac pass) AND on the purple word */
  background:linear-gradient(105deg, transparent 40%, rgba(226,214,255,0.92) 50%, transparent 60%);
  background-size:220% 100%; background-position:-30% 0;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  animation:logo-sweep 8s ease-in-out infinite; }
@keyframes logo-sweep {
  0%   { background-position:130% 0; }
  30%  { background-position:-30% 0; }   /* ~2.4s smooth cross */
  100% { background-position:-30% 0; }   /* ~5.6s rest, then loop */
}
.sb-top, .sidebar { overflow:visible; }
@media (prefers-reduced-motion: reduce) { .logo-wordmark::after { animation:none; opacity:0; } }

/* ---- Idea Finder ---- */
.ctx-bar--two { grid-template-columns:repeat(2, minmax(0, 1fr)); }
.idea-list { display:flex; flex-direction:column; gap:12px; }
.idea { display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:4px 16px; padding:20px 24px; border:1px solid var(--border-hair); border-radius:var(--r-card); background:var(--surface); align-items:start; }
.idea .rank { grid-row:1 / span 4; font:600 22px/1 var(--font-head); color:var(--text-muted); letter-spacing:-.02em; padding-top:2px; }
.idea .idea-title { font:600 17px/1.3 var(--font-head); letter-spacing:-.01em; color:var(--text-primary); display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.idea .tag { font:600 10.5px/1 var(--font-body); letter-spacing:.08em; text-transform:uppercase; padding:4px 8px; border-radius:var(--r-chip); border:1px solid var(--border-hair); }
.idea .tag.hot { background:var(--accent-subtle); color:var(--accent-text); }
.idea .tag.evergreen { background:var(--surface-raise); color:var(--text-secondary); }
.idea .why { color:var(--text-secondary); font-size:14px; line-height:1.5; }
.idea .why b, .idea .notes b { color:var(--text-label); font:600 11px/1 var(--font-body); letter-spacing:.08em; text-transform:uppercase; margin-right:8px; }
.idea .notes { color:var(--text-secondary); font-size:14px; line-height:1.55; white-space:pre-wrap; }
.idea .source { font-size:12px; color:var(--text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.idea .source a { color:var(--text-muted); text-decoration:underline; text-underline-offset:3px; }
.idea .source a:hover { color:var(--accent-text); }
.idea .act { grid-column:3; grid-row:1 / span 4; align-self:start; display:flex; flex-direction:column; gap:6px; align-items:flex-end; }
.idea:hover { border-color:var(--border); background:var(--surface-raise); }
.idea.imported { border-color:var(--accent); }
#id-focus button { width:auto; padding:0 12px; }

/* ---- Idea Finder: page cleanup ---- */
.lbl-11 { display:block; font:600 11px/1 var(--font-body); letter-spacing:.08em; text-transform:uppercase; color:var(--text-label); margin-bottom:8px; }
.id-controls { align-items:center; margin-bottom:0; }
.id-focus-wrap { display:flex; flex-direction:column; min-width:0; }
.id-focus-wrap #id-status { margin-top:8px; font-size:12px; color:var(--text-muted); }
.seg { display:inline-flex; align-items:center; gap:2px; padding:3px; border-radius:10px; background:var(--surface); border:1px solid var(--border-hair); width:max-content; }
.seg button { flex:0 0 auto; min-width:0; height:32px; padding:0 16px; border:0; border-radius:8px; background:transparent; color:var(--text-secondary); font:500 13px/32px var(--font-body); cursor:pointer; white-space:nowrap; transition:background .15s, color .15s; }
.seg button:hover { color:var(--text-primary); }
.seg button.on { background:var(--accent); color:#fff; }
#id-progress { margin-top:32px; padding:16px; border-radius:12px; background:var(--surface); border:1px solid var(--border-hair); box-shadow:none; }
#id-progress .panel-head { font:600 11px/1 var(--font-body); letter-spacing:.08em; text-transform:uppercase; color:var(--text-label); margin-bottom:10px; }
#id-progress .panel-head span:last-child { color:var(--text-muted); letter-spacing:0; font-weight:500; }
#id-progress .bar { height:4px; background:var(--surface-raise); }
#id-log { margin:12px 0 0; padding:0; background:transparent; border:0; box-shadow:none; color:var(--text-muted); font:12px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace; max-height:180px; }
[data-page="ideas"] .output { margin-top:32px; }
.idea-list { gap:16px; }
.idea { grid-template-columns:40px minmax(0,1fr) auto; gap:0 16px; padding:20px; border-radius:12px; transition:border-color .18s, transform .18s var(--ease), box-shadow .18s; }
.idea .rank { font:600 24px/1 var(--font-head); color:var(--text-muted); padding-top:0; }
.idea .idea-title { margin-bottom:12px; }
.idea .tag { font:600 10px/1 var(--font-body); letter-spacing:.08em; padding:4px 8px; }
.idea .why, .idea .notes { display:block; font:400 14px/1.6 var(--font-body); color:var(--text-secondary); }
.idea .why b, .idea .notes b { display:block; margin:0 0 4px; font:600 11px/1 var(--font-body); letter-spacing:.08em; text-transform:uppercase; color:var(--text-label); }
.idea .notes { margin-top:12px; }
.idea .source { margin-top:12px; font-size:12px; color:var(--text-muted); }
.idea .source a { color:var(--accent-text); text-decoration:none; }
.idea .source a:hover { text-decoration:underline; }
.idea .act { gap:4px; }
.idea .act .soon { font-size:11px; color:var(--text-muted); }
.idea:hover { border-color:var(--accent); transform:translateY(-1px); box-shadow:var(--shadow-card); background:var(--surface); }
/* ---- Home: three primary cards (idea -> script -> edit) ---- */
.home-grid--3 { grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; }
.home-grid--3 .big-card { min-height:180px; }
.home-grid--3 .big-card span:last-child { max-width:none; }
@media (max-width:900px) { .home-grid--3 { grid-template-columns:1fr; } }

/* =============================== POLISH PASS 3 =============================== */
/* A1: interview clip rows */
.iv-clip { grid-template-columns:160px minmax(0,1fr) 140px; gap:16px; padding:16px; border:1px solid var(--border-hair); border-radius:12px; position:relative; align-items:start; }
.iv-clip video { width:160px; aspect-ratio:16/9; border-radius:8px; }
.iv-mid { display:flex; flex-direction:column; gap:6px; min-width:0; padding-right:20px; }
.iv-name { font:500 14px/1.3 var(--font-body); color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.iv-clip .iv-text { font:400 13px/1.55 var(--font-body); color:var(--text-secondary); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.iv-anchor { font-size:12px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.iv-right { width:140px; display:flex; flex-direction:column; gap:4px; align-items:flex-end; text-align:right; font:400 13px/1.4 var(--font-body); color:var(--text-muted); white-space:nowrap; }
.iv-clip .iv-del { position:absolute; top:10px; right:10px; background:none; border:0; color:var(--text-muted); cursor:pointer; font-size:13px; padding:4px; }
.iv-clip .iv-del:hover { color:var(--err); }
@media (max-width:900px) { .iv-clip { grid-template-columns:1fr; } .iv-right { width:auto; align-items:flex-start; text-align:left; } }
/* A2: dropzone file info never breaks mid-value */
.drop .file { display:flex; flex-direction:column; align-items:center; gap:2px; max-width:100%; }
.drop .file .fname { max-width:90%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:13px; color:var(--text-secondary); }
.drop .file .fdur { font-size:13px; color:var(--text-muted); font-variant-numeric:tabular-nums; }
/* A3: idea finder controls aligned */
.id-controls { margin:0 0 8px; }
.id-focus-row { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.id-controls .seg { height:40px; }
.id-controls #id-status { margin-top:8px; font-size:12px; color:var(--text-muted); min-height:1em; }
/* B: control-bar status = ONE row */
.ctx-bar .ctx-note { display:flex; align-items:center; gap:12px; min-width:0; white-space:nowrap; }
.ctx-save { display:inline-flex; align-items:center; gap:8px; min-width:0; flex:1; }
.ctx-save .csl { font:600 11px/1 var(--font-body); letter-spacing:.08em; text-transform:uppercase; color:var(--text-label); font-style:normal; flex:none; }
.ctx-save .cst { font:500 13px/1.2 var(--font-body); color:var(--text-primary); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ctx-save .csm { font-size:12px; color:var(--text-muted); }
.ctx-save .saved { flex:none; font-size:12px; }
.ctx-bar .ctx-note .chips { margin-left:auto; display:inline-flex; gap:6px; flex:none; }
.ctx-bar .ctx-note .chips i { height:20px; display:inline-flex; align-items:center; font-size:10px; letter-spacing:.08em; padding:0 8px; min-width:0; }
/* C: dropzone identity */
.drop { border:1px dashed var(--border); border-radius:12px; min-height:160px; justify-content:center; }
.drop .ico { font-size:24px; color:var(--text-muted); opacity:1; transition:color .15s, transform .18s var(--ease); }
.drop strong, .drop b { font:500 15px/1.3 var(--font-body); color:var(--text-primary); }
.drop .hint { font-size:13px; color:var(--text-muted); }
.drop:hover, .drop.over { border-color:var(--accent); background:var(--accent-subtle); }
.drop:hover .ico, .drop.over .ico { color:var(--accent); }
.drop.done { border:1px solid var(--border-hair); background:var(--surface); }
.drop.done::after { content:"Replace"; font:500 12px/1 var(--font-body); color:var(--accent-text); margin-top:6px; }
/* E: mini empty states */
.mini-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:24px; text-align:center;
  border:1px dashed var(--border-hair); border-radius:12px; color:var(--text-muted); font:400 13px/1.4 var(--font-body); }
.mini-empty .mi { font-size:20px; line-height:1; opacity:.8; }
.mini-empty .mi-hint { font-size:12px; color:var(--text-muted); }
.mini-empty .mi-link { font-size:12px; color:var(--accent-text); text-decoration:none; }
.mini-empty .mi-link:hover { text-decoration:underline; }
.th-style-list .mini-empty { grid-column:1 / -1; }
#iv-script-empty:not(.hidden) { display:block; }
/* F: disabled primaries read as disabled, not hover */
.btn.cyan:disabled, .btn:disabled { background:var(--surface-raise); color:var(--text-muted); border:1px solid var(--border-hair); opacity:1; cursor:not-allowed; box-shadow:none; }
/* G: thumbnails grouped cards */
.tcard { background:var(--surface); border:1px solid var(--border-hair); border-radius:12px; padding:20px; margin-bottom:24px; box-shadow:var(--shadow-card); }
.tcard .section-head { margin-top:0 !important; margin-bottom:14px; }
[data-page="thumbs"] .tcard .row { margin-top:0 !important; }
.tcard .th-ov-row { margin-bottom:0; }
/* H: spreadsheet details */
.cdot { width:4px; height:4px; border-radius:50%; background:var(--border); display:inline-block; }
#sheet-body .sheet-row:hover { background:rgba(255,255,255,.045); }
.sc.title input { max-width:100%; }
/* I: micro-consistency */
.pr-dots i { width:8px; height:8px; } .pr-dots { gap:6px; }
.sheet-cols span, .th-count span, .stages .st { letter-spacing:.08em; }
.field > span, .section-head h2, .settings .sec, .pj-block h3, .out-head, .recent h3, .tools h3, .th-group h3, .lbl-11, .csl { letter-spacing:.08em; }
.iv-right { padding-right:24px; }

/* =====================================================================================================
   OBSIDIAN — premium material refresh. Tokens, type, surfaces, buttons, motion only; layout untouched.
   ===================================================================================================== */
:root {
  --bg-app:#0B0C10; --bg-sidebar:#08090D;
  --surface:linear-gradient(180deg, #16171D 0%, #121319 100%);
  --surface-flat:#14151B; --surface-raise:#1B1C24; --input-bg:#0F1015;
  --border-hair:rgba(255,255,255,0.06); --border:#24252E; --edge-light:rgba(255,255,255,0.09);
  --text-primary:#EDEDF0; --text-secondary:#A0A1AB; --text-muted:#6E6F7A; --text-label:#7C7D88;
  --accent:#7C6CF6; --accent-hover:#6B5AE8; --accent-press:#5B4BD6; --accent-subtle:rgba(124,108,246,0.12); --accent-text:#B8ADFF;
  --accent-grad:linear-gradient(180deg, #8A7BF9 0%, #6F5EF1 100%);
  --status-live:#3FB984;
  --font-head:"Geist",system-ui,sans-serif; --font-body:"Geist",system-ui,sans-serif; --font-mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --shadow-obsidian:inset 0 1px 0 var(--edge-light), 0 1px 2px rgba(0,0,0,0.5), 0 12px 32px rgba(0,0,0,0.35);
  --shadow-card:var(--shadow-obsidian);
  --sheet-bg:var(--surface-flat); --sheet-head:var(--surface-raise); --sheet-rn:var(--surface-raise);
  --ring:0 0 0 3px rgba(124,108,246,0.30);
}
/* ---- 2. typography ---- */
body { font:400 15px/1.6 var(--font-body); }
.hero { font-size:44px; line-height:1.02; letter-spacing:-.035em; }
.page-head h1 { letter-spacing:-.03em; }
.big-card b, .modal-card h2, .cs-sec > summary > div > b, .empty-state b, .th-title-text, .idea .idea-title, .channel-card b.ch-name { font-size:17px; letter-spacing:-.015em; }
.field > span, .section-head h2, .settings .sec, .pj-block h3, .out-head, .recent h3, .tools h3, .th-group h3, .lbl-11, .csl, .sheet-cols span, .th-count span { letter-spacing:.09em; }
.btn { letter-spacing:-.01em; }
/* mono for every number-ish value */
pre, #id-log, #th-log, #sw-vo-status, .durations b, .drop .file .fdur, .iv-right, .tracks li .d, .stages .time,
.channel-card .key, .cost-row b, .cost-row em, .key-row input, .sc:not(.title), .idea .rank, .pr-dots ~ *, #pct, #th-pct, #id-pct, #iv-pct, #br-pct,
.sheet-cols span, .th-ov-tags { font-family:var(--font-mono); }
/* word-count counters read as prose, not tabular data -> use the body sans for a consistent voice */
.meta, #tx-count, #sw-count, #tags-count { font-family:var(--font-body); }
.sc:not(.title) { font-size:12.5px; }
.channel-card .key, .iv-right, .stages .time, .durations b { font-size:12px; }
/* ---- 3. surface material ---- */
.pj-block, .out, .panel, .channel-card, .project-row, .stages li, .vo-box, .tm-row, .cs-sec, .modal-card, .profile, .empty-state,
.ctx-bar, .th-title, .th-card, .th-se-item, .th-ov-item, .br-mode, .nm-mood, .iv-clip, .term, .card, .big-card, .cw-src, .tcard, .idea,
#id-progress, .th-style {
  background:var(--surface); border:1px solid var(--border-hair); box-shadow:var(--shadow-obsidian);
  transition:transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease; }
.big-card:hover, .channel-card:hover, .project-row:hover, .th-style:hover, .th-se-item:hover, .idea:hover, .tool-chip:hover, .br-mode:hover, .drop:hover {
  transform:translateY(-1px); border-color:rgba(124,108,246,0.45);
  box-shadow:inset 0 1px 0 var(--edge-light), 0 2px 4px rgba(0,0,0,0.5), 0 16px 40px rgba(0,0,0,0.45); background:var(--surface); }
.pj-block:hover, .out:hover, .cs-sec > summary:hover, .profile:hover, .tm-row:hover { background:var(--surface); border-color:var(--border); transform:none; }
.seg, .th-count, .tool-chip, .chips i, .ctx-note .chips i, .br-clips i, .stpill, .status-pill, .tracks li, .mini-empty { background:var(--surface-flat); }
.th-style.on, .br-mode.on { background:var(--accent-subtle); }
.drop { background:var(--surface-flat); }
.drop:hover, .drop.over { background:var(--accent-subtle); }
.drop.done { background:var(--surface-flat); }
.mini-empty { background:transparent; }
/* ---- 4. background: hero glow + dot grid + grain ---- */
body { background:var(--bg-app); }
.pages { background-image:radial-gradient(rgba(255,255,255,0.035) 1px, transparent 1px); background-size:24px 24px; }
.page[data-page="home"]::before { width:900px; height:500px; left:15%; top:-120px; transform:none;
  background:radial-gradient(closest-side, rgba(124,108,246,0.09), transparent 60%); }
body::after { opacity:.025; }
/* ---- 5. buttons ---- */
.btn.cyan { background:var(--accent-grad); color:#fff; border:1px solid rgba(255,255,255,0.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.20), 0 1px 2px rgba(0,0,0,0.4); transition:all 140ms ease; }
.btn.cyan:hover:not(:disabled) { background:var(--accent-grad); filter:brightness(1.06);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.22), 0 6px 18px rgba(0,0,0,0.45); }   /* soft depth, no colored glow */
.btn.cyan:active:not(:disabled) { transform:scale(0.985); background:var(--accent-grad); filter:brightness(0.98); }
.btn, .btn.purple, .btn.ghost { background:var(--surface-flat); border:1px solid var(--border); box-shadow:inset 0 1px 0 var(--edge-light); transition:all 140ms ease; }
.btn:hover:not(:disabled), .btn.purple:hover:not(:disabled), .btn.ghost:hover:not(:disabled) { background:var(--surface-raise); border-color:var(--border); }
.btn:active:not(:disabled) { transform:scale(0.985); }
.btn.cyan:disabled, .btn:disabled { background:var(--surface-raise); color:var(--text-muted); border:1px solid var(--border-hair); box-shadow:none; transform:none; }
.btn.danger { background:transparent; box-shadow:none; }
/* ---- 6. inputs ---- */
input[type=text], input[type=password], input[type=email], textarea, select, .handle-input, .key-row input {
  background-color:var(--input-bg); border:1px solid var(--border); box-shadow:inset 0 1px 2px rgba(0,0,0,0.4); transition:border-color 140ms ease, box-shadow 140ms ease; }
input:focus, textarea:focus, select:focus, .handle-input:focus-within, .key-row input:focus {
  border-color:var(--accent); box-shadow:inset 0 1px 2px rgba(0,0,0,0.4), 0 0 0 3px rgba(124,108,246,0.30); }
select { background-color:var(--input-bg); }
/* ---- 7. sidebar ---- */
.sidebar { background:var(--bg-sidebar); border-right:1px solid var(--border-hair); }
.sb-nav a { position:relative; transition:background 150ms ease, color 150ms ease; }
.sb-nav a:hover { background:var(--surface-flat); }
.sb-nav a.active { background:linear-gradient(90deg, rgba(124,108,246,0.16), rgba(124,108,246,0.04)); }
.sb-nav a.active::before { content:""; position:absolute; left:0; top:9px; bottom:9px; width:2px; border-radius:99px; background:var(--accent); }
.sb-nav a .ic svg, .tool-chip .ic svg, .big-card .ic svg, .gear svg { stroke-width:1.75; }
/* ---- 8. hero name gradient ---- */
.hero b { background:linear-gradient(90deg, #B8ADFF, #7C6CF6); -webkit-background-clip:text; background-clip:text; color:transparent; }
/* ---- 9. motion ---- */
.page.active { animation:page-rise 220ms ease-out; }
@keyframes page-rise { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
.out.loading .out-body:empty::before { content:""; display:block; height:64px; border-radius:8px; color:transparent;
  background:linear-gradient(100deg, var(--surface-flat) 40%, var(--surface-raise) 50%, var(--surface-flat) 60%); background-size:220% 100%;
  animation:shimmer 1.4s ease-in-out infinite; }
@keyframes shimmer { 0% { background-position:150% 0; } 100% { background-position:-80% 0; } }
@media (prefers-reduced-motion: reduce) {
  .page.active { animation:none; }
  .out.loading .out-body:empty::before { animation:none; background:var(--surface-flat); }
}
/* ---- 10. chips + dots ---- */
.chips i, .ctx-note .chips i, .br-clips i, .stpill, .status-pill, .tool-chip, .seg { box-shadow:inset 0 1px 0 var(--edge-light); }
.chips i.on, .ctx-note .chips i.on, .br-clips i.on { background:var(--accent-subtle); color:var(--accent-text); box-shadow:inset 0 1px 0 var(--edge-light); }
.pr-dots i.on { box-shadow:0 0 6px rgba(124,108,246,0.6); }
/* founder handle + crown are EXEMPT: their own tokens/rules above stay untouched */

/* ---- cost tracking (Obsidian, minimal) ---- */
.cost-chip { display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 10px; margin-left:10px; border-radius:8px; vertical-align:middle;
  background:var(--surface-flat); border:1px solid var(--border-hair); box-shadow:inset 0 1px 0 var(--edge-light);
  font:400 12px/1 var(--font-mono); color:var(--text-secondary); cursor:default; animation:cost-in 180ms ease-out; white-space:nowrap; }
.cost-chip .ci { display:inline-flex; width:13px; height:13px; color:var(--text-muted); }
.cost-chip .ci svg { width:13px; height:13px; }
@keyframes cost-in { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }
.ctx-cost { flex:none; font:400 12px/1 var(--font-mono); color:var(--text-muted); margin-left:auto; cursor:default; transition:color 400ms ease; }
.ctx-bar .ctx-note .chips { margin-left:12px; }
.pj-cost { font:400 12px/1 var(--font-mono); color:var(--text-muted); font-style:normal; margin-left:8px; }
.cost-total { font:400 18px/1.2 var(--font-mono); color:var(--text-primary); margin-bottom:12px; }
.cost-total i { font:400 11px/1 var(--font-body); color:var(--text-muted); font-style:normal; margin-left:6px; letter-spacing:.06em; text-transform:uppercase; }
.cost-row b.free { color:var(--text-muted); font-weight:400; font-family:var(--font-body); font-size:12px; }
.cost-row { font-size:13px; } .cost-row em { color:var(--text-muted); }
@media (prefers-reduced-motion: reduce) { .cost-chip { animation:none; } }

/* ---- settings: on/off toggle ---- */
.sw-toggle { display:inline-flex; align-items:center; gap:10px; cursor:pointer; user-select:none; }
.sw-toggle input { position:absolute; opacity:0; width:0; height:0; }
.sw-track { width:38px; height:22px; border-radius:99px; background:var(--surface-raise); border:1px solid var(--border); position:relative; transition:background 140ms ease, border-color 140ms ease; box-shadow:inset 0 1px 2px rgba(0,0,0,.4); }
.sw-track::after { content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:var(--text-secondary); transition:transform 140ms ease, background 140ms ease; }
.sw-toggle input:checked + .sw-track { background:var(--accent-subtle); border-color:var(--accent); }
.sw-toggle input:checked + .sw-track::after { transform:translateX(16px); background:var(--accent); }
.sw-toggle input:focus-visible + .sw-track { box-shadow:var(--ring); }
.sw-lbl { font:400 13px/1 var(--font-body); color:var(--text-secondary); }

/* ============================================================================
   Video Editing — Voiceover / Music dropzone pair (VISUAL/LAYOUT ONLY)
   Keep the two columns balanced: the Music track list scrolls internally so it
   never stretches the row, and the Voiceover box no longer balloons with a void.
   Scoped to #drop-vo / #drop-music so nothing else is affected.
   ============================================================================ */
/* Both columns share ONE fixed, equal height so neither balloons and neither shows a void */
#drop-vo, #drop-music { height:300px; box-sizing:border-box; }
/* Voiceover: compact, content centered (icon, filename, duration, Replace) — no empty gap below */
#drop-vo { justify-content:center; }
/* Music: static header (icon + "Music" + hint) on top; the track list fills the rest and scrolls internally */
#drop-music { justify-content:flex-start; }
#music-list {
  flex:1 1 auto; min-height:0; max-height:220px; overflow-y:auto; overflow-x:hidden; margin-top:10px; padding-right:4px;
  scrollbar-width:thin; scrollbar-color:rgba(182,166,232,.28) transparent;   /* thin, muted (Firefox) */
}
#music-list::-webkit-scrollbar { width:6px; }
#music-list::-webkit-scrollbar-track { background:transparent; }
#music-list::-webkit-scrollbar-thumb { background:rgba(182,166,232,.28); border-radius:99px; }
#music-list::-webkit-scrollbar-thumb:hover { background:rgba(182,166,232,.45); }
/* Compact, consistent single-line track rows (~38px) */
#music-list li { min-height:38px; }

/* ---- Role-based access: member lock banner + Admin Panel (stage 22) ---- */
.member-lock { display:flex; flex-direction:column; gap:4px; padding:16px 18px; margin:0 0 22px;
  border:1px solid var(--line); border-radius:14px; background:rgba(148,163,184,.08); }
.member-lock b { font-size:15px; }
.member-lock span { color:var(--muted); font-size:13px; }
.admin-invites { display:flex; flex-direction:column; gap:6px; }
.admin-invite { display:flex; align-items:center; gap:10px; padding:8px 12px; border:1px solid var(--line); border-radius:10px; }
.admin-invite code { font-weight:700; letter-spacing:.04em; }
.admin-users { display:flex; flex-direction:column; gap:8px; }
.admin-user { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:10px 12px; border:1px solid var(--line); border-radius:12px; }
.admin-user .au-id { display:flex; align-items:center; gap:8px; }
.admin-user .avatar.sm { width:28px; height:28px; border-radius:50%; }
.admin-user select.admin-role { padding:6px 8px; border-radius:8px; }

/* ---- Per-role locked visual state (stage 22 part 2): visible but dimmed + 🔒 + unclickable ---- */
.sb-nav a.locked, .gear.locked { opacity:.4; cursor:not-allowed; pointer-events:none; position:relative; }
.sb-nav a.locked .lbl::after { content:" 🔒"; font-size:12px; opacity:.95; }
.gear.locked::after { content:"🔒"; position:absolute; top:-3px; right:-3px; font-size:10px; }
.sb-nav a.locked:hover { background:none; }
/* cost visibility: Founder/Admin/Creator only. body.no-costs hides every cost surface for lower roles.
   NOTE: .costs/.cost-row are also used by the B-roll shopping list, so we target ONLY real cost surfaces. */
body.no-costs .cost-chip, body.no-costs .ctx-cost, body.no-costs .pj-cost, body.no-costs #pj-spend,
body.no-costs .pj-block:has([data-pj="costs"]) { display:none !important; }

/* ---- Competitors tab (stage 24) ---- */
/* ---- Competitors page (visual cleanup: 3 stacked surface cards, fixed chip grid, calm rows) ---- */
.cmp-stack { display:flex; flex-direction:column; gap:32px; margin-top:4px; }
.cmp-card { background:var(--surface); border:1px solid var(--border-hair); border-radius:var(--r);
  padding:20px; box-shadow:inset 0 1px 0 var(--edge-light); }
.cmp-sec { margin:0 0 14px; display:flex; align-items:center; gap:10px; font:600 11px/1 var(--font-body);
  letter-spacing:.11em; text-transform:uppercase; color:var(--text-label); }
.cmp-sec em { font:400 12px/1 var(--font-body); font-style:normal; text-transform:none; letter-spacing:.005em; color:var(--text-muted); }
.cmp-sec .btn { margin-left:auto; }
#cmp-count { margin-left:auto; font:500 12px/1 var(--font-mono); color:var(--text-muted); }
#cmp-count.near-cap { color:var(--await); }
.channel-select { height:40px; min-width:220px; padding:0 12px; font:500 14px/38px var(--font-body); }
.cmp-list { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; max-height:360px; overflow-y:auto; }
.cmp-list::-webkit-scrollbar { width:8px; }
.cmp-item { display:flex; align-items:center; gap:10px; height:48px; padding:0 12px; min-width:0;
  background:var(--surface-flat); border:1px solid var(--border-hair); border-radius:var(--r-sm);
  box-shadow:inset 0 1px 0 var(--edge-light); transition:border-color 160ms var(--ease), transform 160ms var(--ease); }
.cmp-item:hover { border-color:rgba(124,108,246,.4); transform:translateY(-1px); }
.cmp-item .avatar.sm { width:28px; height:28px; border-radius:50%; flex:none; }
.cmp-item .cmp-name { flex:1; min-width:0; font:500 14px/1.3 var(--font-body); color:var(--text-primary);
  text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cmp-item .cmp-del { flex:none; width:24px; height:24px; margin:0; padding:0; display:flex; align-items:center; justify-content:center;
  background:none; border:0; border-radius:50%; color:var(--text-muted); font-size:13px; line-height:1; cursor:pointer;
  opacity:.35; transition:opacity 160ms var(--ease), color 160ms var(--ease), background 160ms var(--ease); }
.cmp-item:hover .cmp-del { opacity:1; }
.cmp-item .cmp-del:hover { color:var(--err); background:rgba(240,112,138,.12); }
.cmp-top { display:flex; flex-direction:column; gap:8px; }
.cmp-vid { display:flex; align-items:center; gap:14px; padding:12px; background:var(--surface-flat);
  border:1px solid var(--border-hair); border-radius:var(--r-sm); }
.cmp-rank { font:500 14px/1 var(--font-mono); color:var(--text-muted); width:32px; text-align:center; flex:none; }
.cmp-thumb { width:120px; height:68px; object-fit:cover; border-radius:8px; flex:none; background:rgba(148,163,184,.15); }
.cmp-vmeta { flex:1; min-width:0; }
.cmp-vtitle { font:500 15px/1.35 var(--font-body); color:var(--text-primary); overflow:hidden; text-overflow:ellipsis;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.cmp-vmeta .soon { font-size:13px; color:var(--text-muted); }
.cmp-vmeta .soon b { font-family:var(--font-mono); font-weight:600; }
.cmp-vid .cmp-import.btn.cyan { flex:none; background:var(--surface-flat); border:1px solid var(--border); color:var(--accent-text); }
.cmp-vid .cmp-import.btn.cyan:hover:not(:disabled) { background:var(--accent-grad); border-color:transparent; color:#fff; }
@media (max-width:1200px) { .cmp-list { grid-template-columns:repeat(2, 1fr); } }
@media (max-width:640px) { .cmp-list { grid-template-columns:1fr; } }
#angle-options .angle-opt { width:100%; }

/* ---- Generation queue tracker (homepage, stage 25) ---- */
.gen-queue { margin:8px 0 22px; }
.gen-queue h3 { margin:0 0 10px; }
.q-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; margin-bottom:6px;
  border:1px solid var(--line); border-radius:12px; text-decoration:none; color:inherit; }
.q-title { display:flex; align-items:center; gap:10px; min-width:0; }
.q-title b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:42vw; }
.q-side { display:flex; align-items:center; gap:8px; flex:none; }
.q-badge { font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px; font-style:normal; }
.q-badge.q-processing { background:rgba(34,211,238,.18); color:#22d3ee; }
.q-badge.q-queued { background:rgba(148,163,184,.18); color:var(--muted); }
.q-badge.q-done { background:rgba(34,197,94,.18); color:#22c55e; }
.q-badge.q-error { background:rgba(239,68,68,.18); color:#ef4444; }
.q-bar { display:inline-block; width:120px; height:6px; border-radius:999px; background:rgba(148,163,184,.25); overflow:hidden; }
.q-bar > span { display:block; height:100%; background:#22d3ee; transition:width .5s ease; }
.q-pct { font-size:12px; color:var(--muted); min-width:34px; text-align:right; }
.q-step { max-width:34vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---- Step 2: ONE calm, centered empty-state pattern (Home / Channels / Spreadsheet) ---- */
.empty-state { grid-column:1 / -1; max-width:460px; margin:8px auto; padding:56px 36px; gap:10px;
  background:var(--surface); border:1px solid var(--border-hair); box-shadow:none; align-items:center; text-align:center; }
.empty-state .ic { display:flex; align-items:center; justify-content:center; width:46px; height:46px; margin-bottom:4px;
  border-radius:50%; background:var(--surface-raise); border:1px solid var(--border-hair); color:var(--text-secondary); font-size:20px; }
.empty-state b { color:var(--text-primary); font-size:16px; font-weight:600; }
.empty-state span { color:var(--text-muted); font-size:13.5px; line-height:1.55; max-width:40ch; }
.empty-state .btn { margin-top:16px; }

/* ============================================================================
   BOLD REDESIGN — premium pass (CSS only; no markup/JS changes).
   Elevates surfaces, type, sidebar, cards, buttons, inputs, table, badges.
   ========================================================================== */
:root{
  --r-card:16px; --r-input:11px; --r-chip:9px;
  --border-hair:rgba(255,255,255,.07); --border:rgba(255,255,255,.13); --edge-light:rgba(255,255,255,.08);
  --surface:linear-gradient(180deg,#17181F 0%,#121218 100%);
  --surface-raise:#1E1F28; --surface-flat:#131319; --input-bg:#0E0E13;
  --shadow-obsidian:0 1px 0 var(--edge-light) inset, 0 1px 2px rgba(0,0,0,.5), 0 18px 40px -22px rgba(0,0,0,.75);
  --shadow-pop:0 1px 0 var(--edge-light) inset, 0 24px 64px -26px rgba(0,0,0,.85);
  --accent:#7C6CF6; --accent-text:#C3BAFF; --accent-subtle:rgba(124,108,246,.13);
  --accent-grad:linear-gradient(180deg,#8B7CFA 0%,#6E5CF0 100%);
}

/* ---- ambiance: a single faint accent aurora at the top, otherwise deep + calm ---- */
body { background:radial-gradient(1100px 520px at 50% -260px, rgba(124,108,246,.07), transparent 68%), var(--bg-app); }
.pages { background-image:radial-gradient(rgba(255,255,255,0.028) 1px, transparent 1px); background-size:26px 26px; }
*::-webkit-scrollbar { width:11px; height:11px; }
*::-webkit-scrollbar-thumb { background:rgba(255,255,255,.09); border-radius:99px; border:3px solid transparent; background-clip:padding-box; }
*::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,.16); }

/* ---- typography: stronger, tighter hierarchy ---- */
.page-head h1, .hero { background:linear-gradient(178deg,#FFFFFF 30%,#CFC8F2 130%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.page-head h1 { font-size:38px; font-weight:680; letter-spacing:-.032em; line-height:1.05; }
.hero { font-size:46px; font-weight:700; letter-spacing:-.038em; line-height:1.03; }
.page-head { margin-bottom:36px; align-items:flex-end; }
.page-head .soon, .page-head > div > span { color:var(--text-muted); font-size:14px; }
.field > span, .settings .sec, .pj-block h3, .recent h3, .tools h3, .section-head h2, .out-head, .th-group h3, .sheet-head span {
  font-size:11px; font-weight:600; letter-spacing:.11em; text-transform:uppercase; color:var(--text-label); }

/* ---- unified premium card material ---- */
.big-card, .channel-card, .pj-block, .out, .panel, .drop, .cs-sec, .th-card, .th-style, .idea, .nm-mood, .vo-box,
.ctx-bar, .modal-card, .cmp-vid, .admin-user, .admin-invite, .stages li, .tm-row, .iv-clip, .term, .card, .tcard, .th-title {
  border-radius:var(--r-card); border:1px solid var(--border-hair); background:var(--surface); box-shadow:var(--shadow-obsidian);
  transition:transform .18s var(--ease), border-color .18s var(--ease), box-shadow .25s var(--ease); }
.big-card:hover, .channel-card:hover, .idea:hover, .th-style:hover, .cmp-vid:hover, .project-row:hover {
  transform:translateY(-2px); border-color:rgba(124,108,246,.42); box-shadow:var(--shadow-pop); }

/* ---- home: bigger, composed hero + signature action cards ---- */
.home-grid { gap:18px; margin:8px 0 30px; }
.big-card { min-height:184px; padding:26px 24px; position:relative; overflow:hidden; }
.big-card::after { content:""; position:absolute; inset:0 0 auto 0; height:1px; background:linear-gradient(90deg,transparent,var(--edge-light),transparent); }
.big-card .ic { width:44px; height:44px; border-radius:13px; background:var(--accent-subtle); color:var(--accent);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.big-card .ic svg { width:22px; height:22px; }
.big-card b { font-size:19px; font-weight:600; letter-spacing:-.015em; }
.big-card > span { color:var(--text-muted); font-size:14px; line-height:1.5; margin-top:6px; }
.home-actions { margin:2px 0 8px; gap:16px; align-items:center; }
.tools { margin-top:40px; }
.tool-chip { border-radius:11px; border:1px solid var(--border-hair); background:var(--surface-flat); transition:border-color .16s, background .16s, transform .16s; }
.tool-chip:hover { border-color:var(--border); background:var(--surface-raise); transform:translateY(-1px); }

/* ---- sidebar: refined, Linear-grade ---- */
.sidebar { background:linear-gradient(180deg,#0C0C11,#090A0D); border-right:1px solid var(--border-hair); }
.sb-nav a { border-radius:10px; padding:9px 12px; gap:12px; font-weight:500; color:var(--text-secondary);
  transition:background .15s, color .15s; }
.sb-nav a:hover:not(.active):not(.locked) { background:rgba(255,255,255,.045); color:var(--text-primary); }
.sb-nav a .ic { opacity:.72; }
.sb-nav a.active { background:linear-gradient(90deg,var(--accent-subtle),rgba(124,108,246,0)); color:#fff; }
.sb-nav a.active .ic { color:var(--accent); opacity:1; }
.sb-bottom .profile { border:1px solid var(--border-hair); background:var(--surface); border-radius:14px; box-shadow:var(--shadow-obsidian); transition:border-color .16s; }
.sb-bottom .profile:hover { border-color:var(--border); }

/* ---- buttons ---- */
.btn { border-radius:10px; font-weight:600; letter-spacing:-.01em; transition:transform .14s var(--ease), filter .14s, background .14s, border-color .14s, box-shadow .18s; }
.btn.cyan { background:var(--accent-grad); color:#fff; border:1px solid rgba(255,255,255,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20), 0 1px 2px rgba(0,0,0,.4); }
.btn.cyan:hover:not(:disabled) { transform:translateY(-1px); filter:brightness(1.06); box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 8px 22px -8px rgba(0,0,0,.7); }
.btn.ghost, .btn.purple { background:var(--surface-flat); border:1px solid var(--border-hair); color:var(--text-secondary); box-shadow:none; }
.btn.ghost:hover:not(:disabled), .btn.purple:hover:not(:disabled) { border-color:var(--border); color:var(--text-primary); background:var(--surface-raise); transform:translateY(-1px); box-shadow:none; }

/* ---- inputs / selects / textareas ---- */
input:not([type="checkbox"]):not([type="radio"]), select, textarea, .key-input {
  background-color:var(--input-bg); border:1px solid var(--border-hair); border-radius:var(--r-input); color:var(--text-primary); }
input:focus, select:focus, textarea:focus, .key-input:focus {
  border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-subtle); outline:none; }
.ctx-bar { padding:18px 20px; }

/* ---- Spreadsheet: reverted to its pre-redesign clean version (the bold table styling was removed on request).
   The earlier .sheet-* rules take over again — no bold overrides here so it looks exactly as before. ---- */

/* ---- badges / pills / chips -> purple accent (status green/red kept as semantic) ---- */
.q-badge.q-processing { background:var(--accent-subtle); color:var(--accent-text); }
.q-bar > span { background:var(--accent); }
.q-badge, .status-pill, .stpill, .pill { border-radius:999px; font-weight:600; }
.cost-chip { border:1px solid var(--border-hair); border-radius:999px; padding:3px 10px; background:var(--surface-flat); }

/* ---- empty states: accent-tinted icon chip ---- */
.empty-state { background:var(--surface); border:1px solid var(--border-hair); box-shadow:var(--shadow-obsidian); border-radius:var(--r-card); }
.empty-state .ic { background:var(--accent-subtle); border-color:transparent; color:var(--accent); }

/* ---- modals ---- */
.modal-card { box-shadow:var(--shadow-pop); border:1px solid var(--border); }
.modal { backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); background:rgba(6,6,9,.55); }

/* ============================================================================
   HOME — taste pass (design-taste-frontend + design-guidelines). Hero + cards + empty.
   CSS only. Purple is the intentional brand accent (executed restrained, no glow).
   ========================================================================== */
.home-hero { max-width:780px; margin:2px 0 40px; }
.hero-kicker { display:inline-flex; align-items:center; gap:9px; font-size:12px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--text-muted); margin-bottom:20px; }
.hero-kicker::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 0 4px var(--accent-subtle); }
.hero { font-size:clamp(40px,4.6vw,58px); font-weight:700; letter-spacing:-.04em; line-height:1.02; margin:0; }
.hero-sub { color:var(--text-secondary); font-size:16.5px; line-height:1.55; max-width:60ch; margin:20px 0 0; }
.home-hero .home-actions { margin-top:28px; gap:18px; align-items:center; }
.btn.cyan.big { height:46px; padding:0 22px; font-size:15px; }

/* action cards: the centrepiece — premium, with a hover-reveal arrow + tactile press */
.home-grid--3 { grid-template-columns:repeat(3,1fr); gap:16px; margin:0 0 34px; }
.big-card { min-height:196px; padding:26px 24px 24px; display:flex; flex-direction:column; position:relative; }
.big-card .ic { width:46px; height:46px; min-width:46px; align-self:flex-start; border-radius:13px;
  background:var(--accent-subtle); color:var(--accent); display:grid; place-items:center; margin:0 0 auto; }
.big-card .ic svg { width:22px; height:22px; }
.big-card b { padding-top:18px; font-size:19px; font-weight:600; letter-spacing:-.015em; }
.big-card > span { color:var(--text-muted); font-size:14px; line-height:1.5; margin-top:7px; max-width:34ch; }
.big-card::after { content:""; position:absolute; inset:auto 20px 20px auto; width:18px; height:18px;   /* Lucide arrow-right, anchored bottom-right (explicit inset: an earlier ::after hairline rule sets top/left) */
  background-color:var(--text-muted);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
  transition:transform .16s var(--ease), background-color .16s var(--ease); }
.big-card:hover::after { background-color:var(--accent); transform:translateX(4px); }
.big-card:active { transform:translateY(0) scale(.992); }

/* empty state on home reads as a quiet inset panel, not a floating card */
.recent .empty-state { background:linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,0)); }

/* tools: demoted to a calm secondary shelf */
.tools { margin-top:8px; padding-top:26px; border-top:1px solid var(--border-hair); }
.tools h3 { color:var(--text-muted); }
.tool-strip { display:flex; flex-wrap:wrap; gap:10px; }
.tool-chip { padding:10px 14px; gap:9px; color:var(--text-secondary); font-size:13.5px; }
.tool-chip .ic { opacity:.7; }

/* ============================================================================
   GENERATION QUEUE — queued banner, sidebar live indicator, Home tracker w/ progress
   ========================================================================== */
.queued-banner { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  margin-top:16px; padding:14px 18px; border:1px solid rgba(124,108,246,.35); border-radius:var(--r-card); background:var(--accent-subtle); }
.queued-banner .qb-left { display:flex; align-items:center; gap:10px; }
.queued-banner .qb-check { display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:var(--accent); color:#fff; font-size:12px; font-weight:700; }
.queued-banner .qb-msg { color:var(--text-primary); font-weight:500; }

.sb-queue { display:flex; align-items:center; gap:10px; margin:8px 12px 0; padding:10px 12px; border-radius:12px;
  border:1px solid rgba(124,108,246,.3); background:var(--accent-subtle); text-decoration:none; color:var(--text-primary); transition:border-color .15s; }
.sb-queue:hover { border-color:rgba(124,108,246,.55); }
.sb-queue .sbq-dot { width:8px; height:8px; flex:none; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px var(--accent-subtle); animation:qpulse 1.8s ease-in-out infinite; }
.sb-queue .sbq-body { display:flex; flex-direction:column; line-height:1.25; min-width:0; }
.sb-queue #sbq-count { font-size:13px; font-weight:600; letter-spacing:0; text-transform:none; }
.sb-queue #sbq-sub { font-size:11.5px; color:var(--text-muted); letter-spacing:0; text-transform:none; }
@keyframes qpulse { 0%,100%{opacity:1} 50%{opacity:.35} }
.app.collapsed .sb-queue .sbq-body { display:none; }

.gen-queue { margin:6px 0 28px; }
.q-head { display:flex; align-items:baseline; gap:12px; margin:0 0 14px; }
.q-head h3 { margin:0; font-size:16px; }
.q-row { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 16px; margin-bottom:8px;
  border:1px solid var(--border-hair); border-radius:12px; background:var(--surface); text-decoration:none; color:inherit; transition:border-color .15s; }
.q-row:hover { border-color:var(--border); }
.q-row--processing { border-color:rgba(124,108,246,.4); }
.q-title { display:flex; align-items:center; gap:10px; min-width:0; }
.q-title b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:38vw; font-weight:600; }
.q-side { display:flex; align-items:center; gap:10px; flex:none; }
.q-bar { display:inline-block; width:170px; height:6px; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden; }
.q-bar > span { display:block; height:100%; border-radius:999px; transition:width .6s var(--ease); }
.q-bar--processing > span { background:var(--accent); }
.q-bar--done > span { background:var(--ok); }
.q-bar--error > span { background:var(--err); }
.q-pct { font-size:12px; color:var(--text-muted); min-width:52px; text-align:right; font-variant-numeric:tabular-nums; }
.q-badge { font-size:11px; font-weight:700; padding:2px 9px; border-radius:999px; font-style:normal; }
.q-badge.q-processing { background:var(--accent-subtle); color:var(--accent-text); }
.q-badge.q-queued { background:rgba(255,255,255,.08); color:var(--text-muted); }
.q-badge.q-done { background:rgba(63,185,132,.18); color:var(--ok); }
.q-badge.q-error { background:rgba(240,112,138,.18); color:var(--err); }
.q-step { max-width:22vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---- non-blocking image step: "awaiting images" queue state + review banner ---- */
:root { --await:#E6A83B; --await-subtle:rgba(230,168,59,.15); }
.q-row--awaiting_images { border-color:rgba(230,168,59,.45); cursor:pointer; }
.q-row--awaiting_images:hover { border-color:var(--await); }
.q-bar--awaiting_images > span { background:var(--await); }
.q-badge.q-awaiting_images { background:var(--await-subtle); color:var(--await); }
.q-badge { white-space:nowrap; }
.q-row--awaiting_images .q-title b { max-width:26vw; }
.q-pct--await { color:var(--await); font-weight:600; min-width:auto; }
.q-step--await { color:var(--await); }
.sb-queue--await { border-color:rgba(230,168,59,.4); background:var(--await-subtle); }
.sb-queue--await .sbq-dot { background:var(--await); box-shadow:0 0 0 4px var(--await-subtle); }
.review-awaiting { display:flex; flex-direction:column; gap:4px; margin:0 0 14px; padding:13px 16px;
  border:1px solid rgba(230,168,59,.4); border-radius:var(--r-card); background:var(--await-subtle); }
.review-awaiting b { color:var(--await); font-size:14px; }
.review-awaiting span { color:var(--text-muted); font-size:12.5px; line-height:1.5; }

/* ---- Niche settings = the Founder/niche-level section: purple + distinct so it's instantly recognisable ---- */
.cs-sec--niche { border-color:rgba(124,108,246,.45); box-shadow:0 0 0 1px rgba(124,108,246,.22), var(--shadow-1); }
.cs-sec--niche > summary { background:linear-gradient(90deg, rgba(124,108,246,.14), rgba(124,108,246,.03)); border-left:3px solid #7C6CF6; }
.cs-sec--niche > summary:hover { background:linear-gradient(90deg, rgba(124,108,246,.20), rgba(124,108,246,.06)); }
.cs-sec--niche > summary > div > b { color:#C3BAFF; }
.cs-sec--niche[open] > summary { border-bottom-color:rgba(124,108,246,.35); }
.cs-sec--niche .chev { color:#8B7CFA; }
.cs-sec--niche .cs-role.role-founder { color:#C3BAFF; background:rgba(124,108,246,.16); border-color:rgba(124,108,246,.55); }

/* ============================================================================
   SIGN-IN / ENTRY — premium split layout (brand panel + card). Functionality
   unchanged: same #gate / #auth / #login-form / #auth-form blocks + IDs.
   ========================================================================== */
.auth-shell { position:relative; z-index:2; min-height:100vh; width:100%;
  display:grid; grid-template-columns:1.05fr 1fr; background:var(--bg-app); }

/* ---- LEFT: brand panel ---- */
.auth-brand { position:relative; overflow:hidden; display:flex;
  border-right:1px solid var(--border-hair);
  background:
    radial-gradient(115% 90% at 0% 0%, rgba(109,93,252,.16), transparent 46%),
    radial-gradient(90% 80% at 100% 100%, rgba(109,93,252,.07), transparent 55%),
    linear-gradient(155deg, #101019 0%, #0B0B10 55%, #08080B 100%); }
.auth-brand-grain { position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size:46px 46px; mask-image:radial-gradient(120% 100% at 0% 0%, #000 30%, transparent 78%); }
.auth-brand-inner { position:relative; z-index:1; display:flex; flex-direction:column;
  justify-content:space-between; gap:40px; padding:56px 64px; width:100%; max-width:560px; margin-left:auto; }
.auth-brand-top .logo-wordmark { font-size:20px; }
.auth-tagline { font-family:var(--font-head); font-weight:600; font-size:clamp(34px,3.4vw,52px);
  line-height:1.04; letter-spacing:-.03em; color:var(--text-primary); margin:0 0 20px; }
.auth-tagline .ac { color:var(--accent-text); }
.auth-sub { color:var(--text-secondary); font-size:16px; line-height:1.6; margin:0 0 30px; max-width:420px; }
.auth-points { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.auth-points li { display:flex; align-items:center; gap:13px; color:var(--text-secondary); font-size:14.5px; }
.auth-points .dot { flex:none; width:7px; height:7px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 0 4px var(--accent-subtle); }
.auth-brand-foot { font:600 11px/1 var(--font-body); letter-spacing:.14em; text-transform:uppercase; color:var(--text-muted); }

/* ---- RIGHT: sign-in card ---- */
.auth-panel { display:flex; align-items:center; justify-content:center; padding:48px 32px; background:var(--bg-app); }
.auth-card2 { width:100%; max-width:412px; padding:40px 40px 30px; border-radius:18px;
  background:var(--surface); border:1px solid var(--border-hair);
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 24px 60px -28px rgba(0,0,0,.75); }
.auth-card-brand { display:none; margin-bottom:22px; }              /* shown only when the brand panel is hidden (mobile) */
.auth-card-brand .logo-wordmark { font-size:20px; }
.auth-card-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px; }
.auth-title { font-family:var(--font-head); font-weight:600; font-size:24px; letter-spacing:-.02em; color:var(--text-primary); margin:0; }
.auth-card2 .lead { color:var(--text-secondary); font-size:14px; line-height:1.55; margin:2px 0 24px; }
.auth-card2 #auth .tabs { margin:18px 0 24px; }

/* fields + inputs (premium) */
.auth-card2 .field { margin-bottom:18px; gap:9px; }
.auth-card2 .field > span { color:var(--text-label); }
.auth-card2 .field input { width:100%; height:46px; padding:0 14px; border-radius:var(--r-input);
  background:var(--input-bg); border:1px solid var(--border); color:var(--text-primary);
  font:400 15px/46px var(--font-body); transition:border-color .15s var(--ease), box-shadow .15s var(--ease); box-shadow:none; }
.auth-card2 .field input::placeholder { color:var(--text-muted); }
.auth-card2 .field input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-subtle); }
.auth-card2 .handle-input { display:flex; align-items:center; height:46px; border-radius:var(--r-input);
  background:var(--input-bg); border:1px solid var(--border); overflow:hidden; transition:border-color .15s, box-shadow .15s; }
.auth-card2 .handle-input:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-subtle); }
.auth-card2 .handle-input .at { padding:0 4px 0 14px; color:var(--text-muted); font-size:15px; }
.auth-card2 .handle-input input { height:44px; border:0; box-shadow:none; background:transparent; padding-left:2px; }
.auth-card2 .handle-input input:focus { box-shadow:none; }

/* the shared-password form: stack full-width */
.auth-card2 .login { display:flex; flex-direction:column; gap:0; max-width:none; }
.auth-submit { width:100%; height:48px; font-size:15px; margin-top:4px; }
.auth-card2 .auth-form .auth-submit { align-self:stretch; margin-top:8px; }

.auth-card2 .err { min-height:18px; margin:12px 0 0; font-size:13px; color:var(--err); }
.auth-foot { margin:24px 0 0; padding-top:20px; border-top:1px solid var(--border-hair);
  text-align:center; color:var(--text-muted); font-size:12.5px; }
.auth-foot b { color:var(--text-secondary); font-weight:600; }
.auth-shell .pill { color:var(--text-muted); border-color:var(--border-hair); }

/* ---- responsive: collapse to a single centered card ---- */
@media (max-width:900px) {
  .auth-shell { grid-template-columns:1fr; }
  .auth-brand { display:none; }
  .auth-panel { padding:32px 20px;
    background:radial-gradient(110% 60% at 50% 0%, rgba(109,93,252,.12), transparent 60%), var(--bg-app); }
  .auth-card-brand { display:block; }
}
@media (max-width:420px) { .auth-card2 { padding:30px 24px 24px; border-radius:16px; } }

/* ---- queue "Finishing" (rendering) state: working/in-progress, purple (not orange) ---- */
.q-badge.q-rendering { background:var(--accent-subtle); color:var(--accent-text); }
.q-bar--rendering > span { background:var(--accent); }
.q-bar--rendering.q-bar--live > span { background:linear-gradient(90deg, var(--accent), #9C8FFF, var(--accent));
  background-size:200% 100%; animation:qshimmer 1.4s linear infinite; }
@keyframes qshimmer { from { background-position:0% 0; } to { background-position:-200% 0; } }
.q-pct--render { color:var(--accent-text); font-weight:600; }
.q-row--rendering { border-color:rgba(109,93,252,.4); cursor:pointer; }
.q-row--rendering:hover { border-color:var(--accent); }
.q-step--render { color:var(--accent-text); display:inline-flex; align-items:center; gap:8px; }
.q-spin { display:inline-block; width:12px; height:12px; border-radius:50%; flex:none;
  border:2px solid rgba(179,168,255,.30); border-top-color:var(--accent-text); animation:qspin .7s linear infinite; vertical-align:-2px; }
@keyframes qspin { to { transform:rotate(360deg); } }
.rendering-note { color:var(--accent-text) !important; display:inline-flex; align-items:center; gap:8px; }
@media (prefers-reduced-motion:reduce) { .q-spin, .q-bar--live > span { animation:none; } }

/* ---- Idea Finder layout (visual only): four evenly-spaced 32px sections, tight control bar ---- */
[data-page="ideas"] .ctx-bar { padding:20px; grid-template-columns:1fr 1fr; gap:16px; margin:0 0 32px; }
[data-page="ideas"] .ctx-bar .ctx-note { grid-column:1 / -1; margin:-4px 0 0; font-size:12px; color:var(--text-muted);
  text-align:left; white-space:normal; display:block; }
[data-page="ideas"] .id-controls { margin:0 0 32px; }
[data-page="ideas"] .id-controls .lbl-11 { display:block; margin-bottom:10px; }
[data-page="ideas"] .id-focus-row { align-items:center; }
[data-page="ideas"] .id-focus-row .btn.big { height:40px; padding:0 24px; font-size:14px; display:inline-flex; align-items:center; }
[data-page="ideas"] .output { margin:0 0 32px; padding-top:0; border-top:0; }
[data-page="ideas"] #id-list .mini-empty { min-height:220px; border:1px solid var(--border-hair); border-radius:var(--r);
  background:var(--surface); box-shadow:inset 0 1px 0 var(--edge-light); }
[data-page="ideas"] #id-manage { margin-top:32px; }

/* ---- App-wide dropdown: floating menu panel over every native <select> (visual only; see shell.js) ---- */
select.dd-open { border-color:var(--accent); box-shadow:var(--ring);
  background-position:calc(100% - 13px) 50%, calc(100% - 18px) 50%; }   /* swapped halves = chevron points up */
.dd-menu { position:fixed; z-index:60; background:var(--surface-raise); border:1px solid var(--border); border-radius:12px;
  box-shadow:inset 0 1px 0 var(--edge-light), 0 12px 32px rgba(0,0,0,0.55); padding:6px; overflow-y:auto; overscroll-behavior:contain;
  opacity:0; transform:scale(.98) translateY(-4px); transition:opacity 140ms ease-out, transform 140ms ease-out; }
.dd-menu.open { opacity:1; transform:none; }
.dd-menu.closing { opacity:0; transition:opacity 100ms ease; }
.dd-menu::-webkit-scrollbar { width:8px; }
.dd-menu::-webkit-scrollbar-thumb { background:rgba(255,255,255,.10); border-radius:99px; border:2px solid transparent; background-clip:padding-box; }
.dd-opt { display:flex; align-items:center; justify-content:space-between; gap:8px; height:36px; padding:0 10px; border-radius:8px;
  font:400 14px/1 var(--font-body); color:var(--text-secondary); cursor:pointer; }
.dd-opt + .dd-opt { margin-top:2px; }
.dd-opt:hover, .dd-opt.active { background:var(--surface-flat); color:var(--text-primary); }
.dd-opt.selected { background:var(--accent-subtle); color:var(--accent-text); }
.dd-opt .dd-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dd-opt .dd-check { flex:none; visibility:hidden; }
.dd-opt.selected .dd-check { visibility:visible; }
.dd-opt.disabled { opacity:.4; cursor:default; }
@media (prefers-reduced-motion:reduce) { .dd-menu { transition:none; transform:none; } }

/* ---- Admin Panel structure (visual only): two surface cards, clean list rows, founder pill ---- */
.admin-stack { display:flex; flex-direction:column; gap:32px; }
.admin-card { background:var(--surface); border:1px solid var(--border-hair); border-radius:var(--r); padding:24px;
  box-shadow:inset 0 1px 0 var(--edge-light); }
.admin-sec { margin:0 0 14px; display:flex; align-items:baseline; gap:10px; font:600 11px/1 var(--font-body);
  letter-spacing:.11em; text-transform:uppercase; color:var(--text-label); }
.admin-sec em { font:400 12px/1.3 var(--font-body); font-style:normal; text-transform:none; letter-spacing:.005em; color:var(--text-muted); }
.pill-founder { display:inline-flex; align-items:center; gap:6px; height:22px; padding:0 10px; border-radius:99px;
  background:var(--accent-subtle); color:var(--accent-text); font:600 11px/1 var(--font-body); letter-spacing:.06em; text-transform:uppercase; }
.pill-founder svg { flex:none; }
.admin-invites { gap:8px; }
.admin-invite { display:flex; align-items:center; gap:12px; height:48px; padding:0 12px;
  background:var(--surface-flat); border:1px solid var(--border-hair); border-radius:var(--r-sm); }
.admin-invite code { font:500 14px var(--font-mono); color:var(--text-primary); letter-spacing:.03em; flex:none; }
.admin-invite .inv-meta { flex:1; min-width:0; font-size:12px; color:var(--text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.admin-invite .inv-copy { flex:none; width:24px; height:24px; padding:0; display:flex; align-items:center; justify-content:center;
  background:none; border:0; border-radius:6px; color:var(--text-muted); cursor:pointer; opacity:0;
  transition:opacity 160ms var(--ease), color 160ms var(--ease); }
.admin-invite:hover .inv-copy { opacity:1; }
.admin-invite .inv-copy:hover { color:var(--accent-text); }
.admin-invite .inv-copy.copied { color:var(--ok); opacity:1; }
.admin-users { gap:8px; }
.admin-user { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; min-height:48px;
  padding:8px 12px; background:var(--surface-flat); border:1px solid var(--border-hair); border-radius:var(--r-sm); }