:root { --bg: #0b0f17; --panel: #101624; --panel-2: #16203a; --line: #1f2a3d; --ink: #e6edf7; --dim: #8a93a5; --accent: #2b8fff; --warn: #e6c34a; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 14px/1.5 -apple-system, 'Segoe UI', sans-serif; }
.bar { display: flex; align-items: center; gap: 14px; padding: 10px 18px; border-bottom: 1px solid var(--line); }
.logo { font-weight: 300; letter-spacing: .02em; } .logo b { font-weight: 800; }
.proj { color: var(--dim); font-size: 13px; }
.spacer { flex: 1; }
button { background: var(--panel-2); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; font-size: 12.5px; padding: 6px 12px; cursor: pointer; }
button:hover { border-color: var(--accent); }
button:disabled { opacity: .4; cursor: default; }
input { background: #0e1626; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); font-size: 13px; padding: 7px 10px; }
input:focus { border-color: var(--accent); outline: none; }

.review { display: grid; grid-template-columns: minmax(420px, 54%) 1fr; gap: 18px; padding: 18px; height: calc(100vh - 53px); }
.left { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.player video { width: 100%; border-radius: 12px; background: #000; display: block; }
.rail { position: relative; height: 14px; margin: 4px 2px 0; }
.rail .dot { position: absolute; top: 3px; width: 9px; height: 9px; border-radius: 50%; background: var(--warn); cursor: pointer; transform: translateX(-50%); }
.rail .dot:hover { box-shadow: 0 0 0 3px rgba(230, 195, 74, .3); }
.composer { display: flex; gap: 8px; }
.composer #who { width: 130px; }
.composer #say { flex: 1; }
.notes { overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding-right: 4px; }
.note { display: flex; gap: 10px; padding: 8px 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
.note .tc { flex: 0 0 auto; font-family: ui-monospace, monospace; font-size: 12px; }
.note .body { min-width: 0; } .note b { color: var(--accent); font-size: 12.5px; }

.right { min-width: 0; display: flex; flex-direction: column; border-left: 1px solid var(--line); padding-left: 18px; }
.t-head { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; }
.t-head .hint { color: var(--dim); font-size: 11.5px; flex: 1; }
.ops-n { color: var(--warn); font-size: 12px; }
kbd { background: var(--panel-2); border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; font-size: 11px; }
.transcript { overflow-y: auto; line-height: 2.1; font-size: 15px; padding-right: 8px; user-select: none; }
.transcript .w { padding: 2px 3px; border-radius: 4px; cursor: pointer; }
.transcript .w:hover { background: var(--panel-2); }
.transcript .w.sel { background: rgba(43, 143, 255, .3); }
.transcript .w.struck { text-decoration: line-through; color: #6b7585; background: rgba(230, 100, 90, .12); }
.transcript .sect { margin: 18px 0 6px; color: var(--warn); font-weight: 700; font-size: 13px; }

/* landing */
.landing { max-width: 720px; margin: 12vh auto; padding: 0 24px; }
.landing h1 { font-weight: 300; font-size: 42px; margin: 0 0 6px; } .landing h1 b { font-weight: 800; }
.landing p { color: var(--dim); font-size: 17px; }

/* v0.2: cut-material toggle, restore marks, arrange modal, drawing */
.t-head .chk { display: flex; gap: 5px; align-items: center; color: var(--dim); font-size: 11.5px; white-space: nowrap; }
.transcript .w.cutword { text-decoration: line-through; color: #55607494; }
.transcript .w.cutword.restored { text-decoration: none; color: #7fe0a8; background: rgba(80, 200, 130, .14); }
.player { position: relative; }
#drawcanvas { position: absolute; inset: 0; display: none; cursor: crosshair; z-index: 5; }
.draw-tools { display: none; position: absolute; top: 10px; right: 10px; gap: 6px; z-index: 6; }
body.drawing #drawcanvas, body.drawing .draw-tools { display: flex; }
body.drawing #drawcanvas { display: block; }
.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.pending-draw { display: flex; align-items: center; gap: 8px; color: var(--warn); font-size: 12.5px; padding: 4px 2px; }
.pending-draw.hidden { display: none; }
.note-ref { display: block; margin-top: 6px; max-width: 220px; border-radius: 8px; border: 1px solid var(--line); cursor: zoom-in; }
.rail .dot.has-ref { background: #ff3b30; }
.arr-ov { position: fixed; inset: 0; background: rgba(2,5,10,.6); display: flex; align-items: center; justify-content: center; z-index: 50; }
.arr-box { width: 460px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
.arr-title { font-weight: 700; margin-bottom: 12px; } .arr-title .hint { color: var(--dim); font-weight: 400; font-size: 12px; }
.arr-list { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow-y: auto; }
.arr-row { display: flex; align-items: center; gap: 8px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.arr-row span { flex: 1; font-size: 13px; }
.arr-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }

/* white-label: agency-branded review header */
.powered { color: var(--dim); font-size: 10.5px; font-weight: 400; letter-spacing: .03em; }

/* 𝐂𝐂 captions panel — the caption-fix loop */
.cue-preview { position: absolute; inset: 0; display: none; flex-direction: column; justify-content: flex-end; align-items: center; pointer-events: none; z-index: 4; text-align: center; line-height: 1.25; }
.cc-box { width: 560px; max-height: 78vh; display: flex; flex-direction: column; }
.cc-list { overflow-y: auto; margin: 10px 0; display: flex; flex-direction: column; gap: 4px; }
.cc-row { display: flex; gap: 8px; align-items: center; }
.cc-row .tc { flex: 0 0 52px; font-family: ui-monospace, monospace; font-size: 11.5px; padding: 4px 6px; }
.cc-row input { flex: 1; font-size: 13px; }
.cc-row.cc-edited input { border-color: var(--warn); background: rgba(230, 195, 74, .08); }
.cc-foot { display: flex; align-items: center; gap: 10px; }
.cc-foot .hint { color: var(--dim); font-size: 11.5px; }
.cc-foot .cc-job { color: var(--warn); }
.cc-dl { color: var(--ink); font-size: 12px; text-decoration: none; border: 1px solid var(--line); border-radius: 7px; padding: 5px 10px; }
.cc-dl:hover { border-color: var(--accent); }
.approve-btn { color: #7fe0a8; border-color: rgba(127, 224, 168, .45); }
.approve-btn:hover { border-color: #7fe0a8; }
.vsel { background: var(--panel-2); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; font-size: 12px; padding: 4px 8px; font-family: ui-monospace, monospace; }
/* deliverable poster thumbs (client page) */
.dlv { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.dlv .dposter { width: 168px; aspect-ratio: 16/9; object-fit: cover; border-radius: 8px; background: #0a0e16; display: block; }
/* storage media grid (thumbs generated in-browser at upload) */
.fx-grid { display: flex; flex-wrap: wrap; gap: 12px; padding: 10px 0; }
.fx-tile { display: flex; flex-direction: column; gap: 5px; width: 172px; text-decoration: none; color: inherit; }
.fx-tile img { width: 172px; aspect-ratio: 16/9; object-fit: cover; border-radius: 9px; background: #0a0e16; border: 1px solid #222c44; }
.fx-tile span { font-size: 11.5px; opacity: .75; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* one-tree roots + project footage link */
.fx-roots { display: flex; gap: 8px; margin: 6px 0 10px; }
.fx-root { font-size: 12px; padding: 4px 12px; border-radius: 14px; border: 1px solid var(--line); color: var(--dim); text-decoration: none; }
.fx-root.on { color: var(--accent); border-color: var(--accent); }
.pfoot { font-size: 11.5px; color: var(--accent); text-decoration: none; margin-right: 10px; }

/* ---- terminal-cinema pass: the portal speaks the homepage's two voices ---- */
body { font-family: Fraunces, Georgia, serif; font-size: 14.5px; }
.logo, .proj, .mono, button, input, select, .fx-crumbs, .fx-row .meta, .cc-meta, .chip, .status, .kind, .meta, .fx-root, .navlink { font-family: 'IBM Plex Mono', ui-monospace, monospace; }
h1, h2, .sec, .cc-name, .pname, .c-name { font-family: Fraunces, Georgia, serif; font-weight: 600; letter-spacing: .01em; }
.bar { background: linear-gradient(rgba(11,15,23,.95), rgba(11,15,23,.75)); backdrop-filter: blur(6px); }
body::after { content: ''; position: fixed; inset: 0; z-index: 59; pointer-events: none;
  background: radial-gradient(ellipse 120% 90% at 50% 40%, transparent 55%, rgba(2,4,9,.5) 100%); }
.grainy { position: fixed; inset: -100%; z-index: 60; 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='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.8'/%3E%3C/svg%3E"); }
.cc-logo { max-width: 70%; max-height: 60%; object-fit: contain; }
.cc-cover { display: flex; align-items: center; justify-content: center; }

/* ================= app shell (frame.io-grade pass) ================= */
:root { --grad: linear-gradient(135deg, #2b8fff, #7b5cff); --panel-hi: #131a2a; --edge: rgba(255,255,255,.06); }
body.shelled { background: radial-gradient(ellipse 90% 60% at 30% -10%, rgba(43,143,255,.12), transparent 55%), #0a0d14; }
.app { display: flex; min-height: 100vh; }
.side { flex: 0 0 232px; position: sticky; top: 0; height: 100vh; overflow-y: auto; padding: 20px 14px;
  border-right: 1px solid var(--edge); background: rgba(10,13,20,.7); backdrop-filter: blur(10px);
  display: flex; flex-direction: column; gap: 6px; }
.wordmark { font-family: 'IBM Plex Mono', monospace; font-size: 14.5px; color: var(--ink); text-decoration: none; padding: 4px 10px 16px; display: block; }
.wordmark b { font-weight: 700; }
.sn-group { display: flex; flex-direction: column; gap: 2px; }
.sn { display: block; padding: 8px 12px; border-radius: 9px; color: var(--dim); text-decoration: none; font-size: 13px; font-family: 'IBM Plex Mono', monospace; }
.sn:hover { color: var(--ink); background: rgba(255,255,255,.04); }
.sn.on { color: #fff; background: var(--grad); box-shadow: 0 4px 18px rgba(43,143,255,.35); }
.sn-client { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--edge); display: flex; flex-direction: column; gap: 2px; }
.sn-head { font-family: Fraunces, serif; font-weight: 600; font-size: 15px; padding: 2px 12px 8px; }
.sn-sub { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); opacity: .7; padding: 10px 12px 4px; }
.sn-proj { font-size: 12px; }
.sn-empty { color: var(--dim); font-size: 11.5px; padding: 2px 12px; }
.sn-foot { margin-top: auto; padding: 12px; font-size: 11px; opacity: .5; }
.sn-foot a { color: var(--dim); }
.main { flex: 1; min-width: 0; padding: 30px 36px 60px; }
/* cards & panels get depth */
.client-card, .proj-card, .card, .fx-list, .fx-drop { background: linear-gradient(180deg, var(--panel-hi), var(--panel)); border: 1px solid var(--edge); box-shadow: 0 8px 28px rgba(0,0,0,.35); }
.client-card { border-radius: 16px; overflow: hidden; transition: transform .18s ease, box-shadow .18s ease, border-color .18s; }
.client-card:hover { transform: translateY(-3px); box-shadow: 0 16px 44px rgba(0,0,0,.5); border-color: rgba(43,143,255,.35); }
.proj-card { border-radius: 16px; padding: 16px 18px; margin-bottom: 16px; }
.dlv { transition: transform .16s ease; } .dlv:hover { transform: translateY(-2px); }
.dlv .dposter, .fx-tile img { box-shadow: 0 6px 20px rgba(0,0,0,.4); border: 1px solid var(--edge); }
.fx-tile { transition: transform .16s ease; } .fx-tile:hover { transform: translateY(-2px); }
h1 { font-size: 30px; margin: 4px 0 4px; } .sub { color: var(--dim); margin-bottom: 22px; font-size: 13.5px; }
h2.sec { font-size: 13px; font-family: 'IBM Plex Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin: 30px 0 12px; }
button, .fx-root.on { background: var(--grad); border: none; color: #fff; }
button:hover { filter: brightness(1.12); border: none; }
.bar { border-bottom: 1px solid var(--edge); }
/* review page polish (client-facing, no sidebar) */
.player video { border-radius: 16px; box-shadow: 0 18px 60px rgba(0,0,0,.55); border: 1px solid var(--edge); }
.note, .n-item { border-radius: 12px; }

body.shelled > .app .bar, body.shelled header.bar { display: none; }

/* review v2: frame.io shape — player + transcript below, comments right rail */
.review.r2 { grid-template-columns: 1fr 340px; }
.review.r2 .left { overflow-y: auto; }
.review.r2 .right { display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--edge); padding-left: 16px; }
.review.r2 .right .notes { flex: 1; overflow-y: auto; }
.review.r2 .t-head { margin-top: 14px; }
.review.r2 .transcript { max-height: none; }
.c-head { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); padding: 4px 0 10px; }
.back-studio { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--accent); text-decoration: none; margin-right: 12px; }
/* client-page project toggles */
.proj-head { cursor: pointer; }
.proj-card.closed .dlvs { display: none; }
.ptog { font-size: 11px; color: var(--dim); margin-right: 8px; transition: transform .15s; display: inline-block; }
.proj-card.closed .ptog { transform: rotate(-90deg); }
/* settings modal */
.set-ov { position: fixed; inset: 0; background: rgba(5,8,14,.7); z-index: 950; display: flex; align-items: center; justify-content: center; }
.set-box { width: 380px; background: linear-gradient(180deg, var(--panel-hi), var(--panel)); border: 1px solid var(--edge); border-radius: 16px; padding: 22px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 24px 80px rgba(0,0,0,.6); }
.set-box h3 { margin: 0; font-family: Fraunces, serif; }
.set-box label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--dim); font-family: 'IBM Plex Mono', monospace; }
.set-bar { display: flex; justify-content: flex-end; gap: 8px; }
.set-bar .ghost { background: transparent; border: 1px solid var(--line); color: var(--dim); }
.sn-pow { margin-top: 6px; font-size: 10px; opacity: .6; }

/* ============ review v3 — the stage (player pinned, panels scroll under it) ============ */
.review.r2 { grid-template-columns: minmax(0, 1fr) 360px; gap: 0; padding: 0; height: calc(100vh - 57px); }
.review.r2 .left { padding: 20px 26px 0; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.review.r2 .player { flex: 0 0 auto; }
.review.r2 .player video { max-height: 56vh; object-fit: contain; background: #000; }
.review.r2 .t-head { flex: 0 0 auto; margin-top: 16px; padding: 12px 14px; background: linear-gradient(180deg, var(--panel-hi), var(--panel)); border: 1px solid var(--edge); border-bottom: none; border-radius: 14px 14px 0 0; }
.review.r2 .t-head b { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.review.r2 .transcript { flex: 1; min-height: 0; overflow-y: auto; border: 1px solid var(--edge); border-top: none; border-radius: 0 0 0 0; background: rgba(16,22,36,.5); padding: 16px 20px; }
.review.r2 .right { display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--edge); background: #0d1017; padding: 16px 18px; }
.review.r2 .right .c-head { padding-bottom: 12px; border-bottom: 1px solid var(--edge); }
.review.r2 .right .notes { order: 1; flex: 1; min-height: 0; overflow-y: auto; padding: 12px 2px; }
.review.r2 .right .pending-draw { order: 2; }
.review.r2 .right .composer { order: 3; flex-wrap: wrap; gap: 8px; padding-top: 12px; border-top: 1px solid var(--edge); }
.review.r2 .right .composer #say { flex: 1 1 100%; }
.review.r2 .right .composer #who { flex: 1; min-width: 0; }
/* comment cards, frame.io-flavored */
.review.r2 .notes > div { background: linear-gradient(180deg, var(--panel-hi), var(--panel)); border: 1px solid var(--edge); border-radius: 12px; margin-bottom: 10px; }
/* CC modal breathes but never overflows */
.cc-box { max-height: 78vh; display: flex; flex-direction: column; }
.cc-list { flex: 1; min-height: 0; overflow-y: auto; }

/* ============ sidebar v2 — a real web-app sidebar ============ */
.side { background: #0d1017; border-right: 1px solid rgba(255,255,255,.07); padding: 16px 12px 12px; }
.side .wordmark { font-family: Fraunces, serif; font-weight: 600; font-size: 16px; letter-spacing: 0; padding: 2px 10px 14px; }
.sn { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 13.5px; display: flex; align-items: center; gap: 10px; padding: 7px 10px; }
.sn.on { background: rgba(43,143,255,.15); color: #fff; box-shadow: inset 2px 0 0 var(--accent); border-radius: 8px; }
.sn-sub { font-size: 9.5px; }
.sn-client { border-top: 1px solid rgba(255,255,255,.07); }
.sn-foot { border-top: 1px solid rgba(255,255,255,.07); padding: 10px 4px 0; }
.prof-row { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; cursor: pointer; }
.prof-row:hover { background: rgba(255,255,255,.05); }
.prof-av { width: 30px; height: 30px; border-radius: 50%; background: var(--grad); display: flex; align-items: center; justify-content: center; font: 600 13px -apple-system, sans-serif; color: #fff; flex: 0 0 auto; }
.prof-name { font: 500 13px -apple-system, sans-serif; color: var(--ink); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prof-chev { color: var(--dim); font-size: 11px; }
.prof-menu { position: fixed; z-index: 960; width: 208px; background: linear-gradient(180deg, var(--panel-hi), var(--panel)); border: 1px solid var(--edge); border-radius: 12px; padding: 6px; box-shadow: 0 18px 60px rgba(0,0,0,.55); }
.prof-menu a { display: block; padding: 8px 12px; border-radius: 8px; color: var(--ink); text-decoration: none; font: 13px -apple-system, sans-serif; }
.prof-menu a:hover { background: rgba(43,143,255,.12); }
.prof-menu .dis { opacity: .45; pointer-events: none; }

/* ============ v5 WORKSPACE SKIN — the tool voice (frame.io register) ============
   Rule: serif+mono = storytelling surfaces (landing, docs). Tools speak ONE quiet
   sans (Inter); mono is reserved for machine DATA (timecodes, sizes, versions).
   Neutral graphite replaces the blue-cast navy; content carries the color. */
:root { --bg: #141519; --panel: #1b1d22; --panel-hi: #202329; --line: #2a2d34;
  --edge: rgba(255,255,255,.07); --ink: #e8eaed; --dim: #999ea8; --grad: linear-gradient(135deg, #2b8fff, #5b6cff); }
body, body.shelled { background: var(--bg); font-family: Inter, -apple-system, sans-serif; font-size: 13.5px; }
h1, h2, h3, .sec, .cc-name, .pname, .c-name, .sn-head, .set-box h3, .arr-title, b {
  font-family: Inter, -apple-system, sans-serif; letter-spacing: 0; }
h1 { font-size: 22px; font-weight: 700; }
h2.sec, .review.r2 .t-head b, .c-head, .sn-sub {
  font-family: Inter, -apple-system, sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .08em; }
.logo, .wordmark, .sn, .lib-chip, button, input, select, .fx-crumbs, .cc-meta, .chip, .status, .kind,
.fx-root, .navlink, .hero-dl-sub, .back-studio, .prof-name, .set-box label, .prof-menu a, .sub, .pfoot {
  font-family: Inter, -apple-system, sans-serif; }
.meta, .tc, .vsel, .fx-row .meta, .v, .ops-n, .sn-pow, .time { font-family: 'IBM Plex Mono', ui-monospace, monospace; }
/* flatten: content carries the color, chrome recedes */
.client-card, .proj-card, .card, .fx-list, .fx-drop, .set-box, .prof-menu,
.review.r2 .t-head, .review.r2 .notes > div { background: var(--panel); box-shadow: none; border: 1px solid var(--edge); }
.client-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,.35); }
.client-card, .proj-card { border-radius: 12px; }
.dlv .dposter, .fx-tile img { box-shadow: none; border-radius: 8px; }
.review.r2 .right, .side { background: #17181d; }
.review.r2 .transcript { background: var(--panel); font-family: Inter, sans-serif; font-size: 14px; line-height: 2; }
.sn.on { background: rgba(43,143,255,.12); box-shadow: inset 2px 0 0 var(--accent); }
button { border-radius: 8px; font-weight: 500; font-size: 12.5px; }
.status, .chip { border-radius: 6px; }
.dlv { background: var(--panel-hi) !important; border: 1px solid var(--edge) !important; border-radius: 10px; padding: 8px; }

/* ambient depth: soft light behind the chrome (homepage-flavored, static — no cursor trick).
   Two large, very low-alpha glows + a faint sheen on panel tops = dimension without noise. */
body.shelled, body:not(.shelled) main.review { position: relative; }
body.shelled {
  background:
    radial-gradient(ellipse 46% 38% at 14% 4%, rgba(43,143,255,.10), transparent 62%),
    radial-gradient(ellipse 52% 42% at 88% 96%, rgba(91,108,255,.07), transparent 65%),
    var(--bg);
  background-attachment: fixed;
}
.review.r2 .left {
  background:
    radial-gradient(ellipse 60% 45% at 32% 0%, rgba(43,143,255,.08), transparent 60%),
    transparent;
}
.side { background: linear-gradient(180deg, #191b21, #15161b 40%, #17181d); }
.client-card, .proj-card, .card, .review.r2 .t-head, .review.r2 .notes > div, .set-box, .prof-menu {
  background: linear-gradient(180deg, rgba(255,255,255,.025), transparent 30%), var(--panel);
}
.review.r2 .right { background: linear-gradient(180deg, #1a1c22, #16171c); }
/* 'used in' tags */
.ui-wrap { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-left: 8px; }
.ui-chip { font: 500 10.5px Inter, sans-serif; padding: 2px 8px; border-radius: 6px; background: rgba(43,143,255,.12); color: #7fb5ff; text-decoration: none; border: 1px solid rgba(43,143,255,.25); }
.ui-chip:hover { background: rgba(43,143,255,.22); }
.ui-add { background: transparent; border: none; color: var(--dim); font-size: 13px; padding: 0 2px; cursor: pointer; }
.ui-add:hover { color: var(--accent); }
.fx-tile .ui-wrap { margin-left: 0; }

/* review bottom-panel tabs (subtitles default · transcript = suggest edits) */
.panel-tabs { display: flex; gap: 6px; margin-top: 16px; flex: 0 0 auto; }
.ptab { background: transparent; border: 1px solid var(--edge); color: var(--dim); border-radius: 9px 9px 0 0; border-bottom: none; padding: 8px 16px; font-weight: 500; }
.ptab.on { background: var(--panel); color: var(--ink); }
.pane-cc { flex: 1; min-height: 0; overflow-y: auto; border: 1px solid var(--edge); border-radius: 0 10px 10px 10px; background: var(--panel); padding: 12px 16px; display: flex; flex-direction: column; }
.pane-cc .cc-list { flex: 1; min-height: 0; overflow-y: auto; }
.pane-cc .cc-foot { display: flex; gap: 10px; align-items: center; padding-top: 10px; border-top: 1px solid var(--edge); flex: 0 0 auto; }
.pane-tx { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.review.r2 .pane-tx .t-head { margin-top: 0; border-radius: 0 10px 0 0; }
.cc-empty { color: var(--dim); padding: 30px; text-align: center; }