/* Clipper: design system of the dashboard (index.html, login.html and the scripts of /static build on these classes).
   Dense tool, dark, one accent (Twitch purple), 4/8 px spacing, 6/10/14 px radii, semantic colours kept soft. */

:root {
  color-scheme: dark;
  --bg:#0b0c12; --panel:#12141d; --panel2:#181b27; --hover:#1e2232; --sunk:#0d0f16;
  --line:#232736; --line2:#313649;
  --ink:#e9ebf3; --mute:#9298b0; --faint:#6b7189;
  --accent:#9146ff; --accent-hi:#a97bff; --accent-ink:#cdb9ff; --accent-bg:rgba(145,70,255,.14);
  --ok:#4fbf8b; --no:#ef6b73; --warn:#e3b341; --info:#6ea8fe; --cyan:#5eead4;
  --r1:6px; --r2:10px; --r3:14px;
  --sans:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:"Cascadia Mono",Consolas,"SFMono-Regular",monospace;
  --ease:cubic-bezier(.2,.7,.2,1);
}
* { box-sizing:border-box; }
html { scrollbar-color:var(--line2) transparent; }
body { margin:0; background:var(--bg); color:var(--ink); font:14px/1.5 var(--sans); font-variant-numeric:tabular-nums; -webkit-font-smoothing:antialiased; }
button, select, input, textarea { font:inherit; color:inherit; }
button { cursor:pointer; }
a { color:var(--accent-ink); }
:focus-visible { outline:2px solid var(--accent-hi); outline-offset:2px; }
::selection { background:var(--accent); color:#fff; }
code, kbd, .mono { font-family:var(--mono); font-size:.92em; }
.muted { color:var(--mute); }
.hidden { display:none !important; }
.spacer { flex:1; }
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } }

/* ---- shell: sidebar (brand, sections, engine, account) + stage (title, progress, page) */
body { background:radial-gradient(1100px 520px at 78% -12%, rgba(145,70,255,.10), transparent 62%), var(--bg); background-attachment:fixed; }
.app { display:grid; grid-template-columns:240px minmax(0,1fr); min-height:100vh; }
.side { position:sticky; top:0; height:100vh; display:flex; flex-direction:column; gap:16px; padding:16px 12px; background:linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0) 40%), var(--sunk); border-right:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:8px; padding:4px 8px; font-weight:700; font-size:17px; letter-spacing:-.02em; color:var(--ink); text-decoration:none; }
.brand .mark { width:22px; height:22px; border-radius:6px; background:linear-gradient(135deg,var(--accent-hi),var(--accent)); position:relative; flex:none; box-shadow:0 0 0 1px rgba(255,255,255,.14) inset, 0 4px 14px rgba(145,70,255,.45); }
.brand .mark::after { content:""; position:absolute; left:9px; top:6px; border:5px solid transparent; border-left:7px solid #fff; border-right:0; }
.brand .ver { margin-left:auto; font:500 11px/18px var(--mono); color:var(--mute); background:rgba(255,255,255,.06); border-radius:999px; padding:0 8px; letter-spacing:0; }
.side select { width:100%; }
.nav-list { display:flex; flex-direction:column; gap:2px; }
.nav { position:relative; display:flex; align-items:center; gap:12px; width:100%; min-height:36px; padding:0 12px; background:none; border:0; border-radius:var(--r1); color:var(--mute); font-weight:500; text-align:left; transition:background .1s, color .1s; }
.nav svg { width:18px; height:18px; flex:none; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.nav:hover { background:rgba(255,255,255,.04); color:var(--ink); }
.nav.on { background:var(--accent-bg); color:var(--ink); } .nav.on svg { color:var(--accent-ink); }
.nav.on::before { content:""; position:absolute; left:0; top:8px; bottom:8px; width:2px; border-radius:2px; background:var(--accent-hi); }
.nav .count { margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--mute); }
.nav .count:not(:empty) { background:rgba(255,255,255,.07); border-radius:999px; padding:0 8px; line-height:18px; }
.side .grow { flex:1; }
.engine { background:var(--panel); border:1px solid var(--line); border-radius:var(--r2); padding:12px; display:flex; flex-direction:column; gap:8px; }
.engine .state { display:flex; align-items:center; justify-content:space-between; font-size:12px; color:var(--mute); }
.engine .btns { display:flex; gap:8px; flex-wrap:wrap; } .engine .btn { flex:1 1 auto; font-size:13px; padding:0 8px; }
#workerState { display:inline-flex; align-items:center; gap:8px; background:none; padding:0; font-size:13px; font-weight:600; color:var(--mute); }
#workerState::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--faint); }
#workerState.ok { color:var(--ink); } #workerState.ok::before { background:var(--ok); animation:beat 2.4s ease-in-out infinite; }
#workerState.q { color:var(--ink); } #workerState.q::before { background:var(--warn); }
@keyframes beat { 0%,100% { box-shadow:0 0 0 0 color-mix(in srgb, var(--ok) 55%, transparent); } 60% { box-shadow:0 0 0 6px transparent; } }
.usermenu { position:relative; }
.usermenu > summary { list-style:none; cursor:pointer; min-height:40px; display:flex; align-items:center; gap:8px; padding:0 8px; border-radius:var(--r1); font-size:12px; color:var(--mute); }
.usermenu > summary::-webkit-details-marker { display:none; }
.usermenu > summary::before { content:""; width:24px; height:24px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--info)); flex:none; opacity:.9; }
.usermenu > summary::after { content:"⋯"; margin-left:auto; font-size:16px; line-height:1; }
.usermenu > summary:hover, .usermenu[open] > summary { background:rgba(255,255,255,.05); color:var(--ink); }
.usermenu .menu { position:absolute; left:0; right:0; bottom:calc(100% + 6px); background:var(--panel2); border:1px solid var(--line2); border-radius:var(--r2); padding:4px; box-shadow:0 -12px 32px rgba(0,0,0,.5); z-index:6; display:flex; flex-direction:column; }
.usermenu .item { background:none; border:0; text-align:left; padding:8px 12px; border-radius:var(--r1); font-weight:500; }
.usermenu .item:hover { background:var(--hover); } .usermenu .item.danger { color:var(--no); }
.stage { min-width:0; }
.topbar { position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:24px; min-height:64px; padding:0 32px; background:color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
.topbar h1 { margin:0; font-size:20px; font-weight:700; letter-spacing:-.02em; }
#topProgress { display:none; margin-left:auto; width:min(460px,52%); padding:8px 12px; border:1px solid var(--line2); border-radius:var(--r2); background:var(--panel); } #topProgress.on { display:block; }
#topProgress .lbl { display:flex; gap:8px; font-size:12px; color:var(--mute); white-space:nowrap; overflow:hidden; } #topProgress .lbl b { color:var(--ink); font-weight:600; overflow:hidden; text-overflow:ellipsis; flex:0 1 auto; }
#topProgress .lbl span { overflow:hidden; text-overflow:ellipsis; } #topProgress .lbl .spacer { flex:1 0 0; }
#topProgress .bar { height:4px; margin:6px 0 0; } #topProgress.paused .bar > i { background:var(--warn); }
#topProgress .bar > i { min-width:6px; }  /* never invisible, even at 0 % */

/* ---- buttons, chips, badges */
.btn { background:var(--panel2); border:1px solid var(--line2); border-radius:var(--r1); min-height:32px; padding:0 12px; font-weight:500; display:inline-flex; align-items:center; justify-content:center; gap:6px; transition:background .1s, border-color .1s; }
.btn:hover:not(:disabled) { background:var(--hover); border-color:var(--faint); }
.btn:active:not(:disabled) { transform:translateY(1px); }
.btn:disabled { opacity:.45; cursor:default; }
.btn.primary { background:linear-gradient(180deg,var(--accent-hi),var(--accent)); border-color:var(--accent); color:#fff; box-shadow:0 2px 12px rgba(145,70,255,.35); } .btn.primary:hover:not(:disabled) { filter:brightness(1.1); }
.btn.ok { background:var(--ok); color:#06281c; border-color:var(--ok); } .btn.ok:hover:not(:disabled) { background:var(--ok); filter:brightness(1.08); }
.btn.no { color:var(--no); border-color:color-mix(in srgb, var(--no) 40%, var(--line2)); background:transparent; } .btn.no:hover:not(:disabled) { background:color-mix(in srgb, var(--no) 14%, transparent); border-color:var(--no); }
.btn.maybe { background:var(--warn); color:#2b1d02; border-color:var(--warn); }
.btn.review { background:var(--info); color:#051a33; border-color:var(--info); }
.btn.like.on { background:#facc15; color:#2b2102; border-color:#facc15; }
.btn.small { min-height:24px; padding:0 8px; font-size:12px; }
.chip { background:transparent; border:1px solid var(--line2); border-radius:999px; min-height:28px; padding:0 12px; color:var(--mute); font-weight:500; transition:background .1s, color .1s, border-color .1s; }
.chip:hover:not(:disabled) { color:var(--ink); border-color:var(--faint); }
.chip.on { background:var(--accent-bg); border-color:var(--accent); color:var(--ink); }
.chip:disabled { opacity:.5; cursor:default; }
.badge { display:inline-flex; align-items:center; font-size:11px; line-height:18px; padding:0 7px; border-radius:4px; background:rgba(255,255,255,.06); color:var(--mute); white-space:nowrap; }
.badge.err { background:color-mix(in srgb, var(--no) 16%, transparent); color:var(--no); }
.badge.ok { background:color-mix(in srgb, var(--ok) 14%, transparent); color:var(--ok); }
.badge.q { background:color-mix(in srgb, var(--warn) 14%, transparent); color:var(--warn); }
.badge.liked { background:#3a3108; }
.badge.lane.short { color:var(--cyan); } .badge.lane.replay { color:var(--info); } .badge.lane.bestof { color:var(--warn); }
.plat { font-size:10px; padding:0 6px; line-height:16px; border-radius:4px; background:rgba(255,255,255,.06); color:var(--mute); text-transform:uppercase; letter-spacing:.04em; }
.plat.youtube { color:#ff7b7b; } .plat.tiktok { color:var(--cyan); } .plat.instagram { color:#f0abfc; } .plat.mock { color:var(--warn); }

/* ---- layout */
main { padding:8px 32px 64px; max-width:1560px; }
h1, h2, h3 { letter-spacing:-.01em; }
h2 { font-size:15px; font-weight:650; margin:32px 0 12px; color:var(--ink); }
h2.fold { cursor:pointer; user-select:none; display:flex; align-items:center; gap:8px; }
h2.fold::before { content:"▾"; display:inline-block; transition:transform .15s var(--ease); width:12px; color:var(--faint); font-size:11px; }
h2.fold:hover::before { color:var(--ink); }
h2.fold.closed::before { transform:rotate(-90deg); } .fold-body.closed { display:none !important; }
h2.fold .hint { font-size:12px; font-weight:400; color:var(--mute); }
.grid { display:grid; gap:12px; }
.gauges { grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
.two { display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(380px,1fr)); }
.panel { background:var(--panel); border:1px solid var(--line); border-radius:var(--r2); padding:16px; box-shadow:0 1px 0 rgba(255,255,255,.03) inset; }
.row { display:flex; gap:8px; align-items:center; } .row > * { flex:0 0 auto; } .row > .grow { flex:1 1 auto; min-width:0; }
.form { display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); align-items:end; } .form label { display:flex; flex-direction:column; gap:4px; color:var(--mute); font-size:12px; }
.tools { display:flex; align-items:center; gap:12px; margin-top:16px; font-size:12px; color:var(--mute); }

/* ---- home: work on the left, the machine and what was learned on the right */
.home { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:0 32px; align-items:start; }
.home .col > .blk:first-child > h2 { margin-top:24px; } .blk .tools { margin:16px 0 0; }
.aside .gauges { grid-template-columns:1fr; gap:8px; }
.aside .gauge { display:grid; grid-template-columns:1fr auto; grid-template-areas:"lab val" "sub sub" "spark spark"; align-items:baseline; padding:12px 16px; }
.aside .gauge .lab { grid-area:lab; } .aside .gauge .val { grid-area:val; font-size:20px; } .aside .gauge .sub { grid-area:sub; } .aside .gauge svg { grid-area:spark; margin-top:4px; height:24px; }
.aside .two { grid-template-columns:1fr; }
@media (max-width:1180px) { .home { grid-template-columns:1fr; } }

/* ---- gauges, jobs */
.gauge { padding:12px 16px; }
.gauge .val { font-size:24px; font-weight:650; letter-spacing:-.02em; line-height:1.2; } .gauge .lab { color:var(--mute); font-size:12px; }
.gauge svg { width:100%; height:32px; margin-top:8px; } .gauge .sub { color:var(--mute); font-size:12px; }
.bar { height:6px; background:var(--line); border-radius:3px; overflow:hidden; margin:8px 0 6px; }
.bar > i { display:block; height:100%; background:var(--accent); border-radius:3px; transition:width .8s var(--ease); }
.bar.indet > i { width:30% !important; animation:slide 1.3s ease-in-out infinite; }  /* nothing measured yet: moving bar, the work is running */
@keyframes slide { 0% { transform:translateX(-100%); } 100% { transform:translateX(340%); } }
.jobbar { height:4px; margin:8px 0 0; } .jobbar > i { min-width:6px; }
.job { display:flex; flex-direction:column; gap:2px; padding:12px 16px; } .job .top { display:flex; justify-content:space-between; gap:12px; font-weight:600; }
.job.movable { cursor:grab; } .job.dragging { opacity:.45; } .job.over { outline:2px dashed var(--accent); outline-offset:2px; } .job .grip { color:var(--faint); }
.job .meta { color:var(--mute); font-size:12px; display:flex; gap:16px; flex-wrap:wrap; }
.job.running { border-color:color-mix(in srgb, var(--accent) 55%, var(--line)); background:linear-gradient(180deg, var(--accent-bg), transparent 70%), var(--panel); } .job.running .bar > i { background:linear-gradient(90deg, var(--accent), var(--accent-hi)); box-shadow:0 0 12px rgba(145,70,255,.55); }
.job.finished { padding:8px 16px; background:transparent; } .job.finished .top { font-weight:500; color:var(--mute); } .job.finished .steps { display:none; }
.steps { display:flex; gap:4px; flex-wrap:wrap; margin-top:8px; }
.step { font-size:11px; padding:0 8px; line-height:20px; border-radius:4px; background:var(--sunk); color:var(--faint); }
.step.done, .step.skip { color:var(--ok); } .step.now { background:var(--accent); color:#fff; } .step.user { background:var(--warn); color:#000; }

/* ---- forms, tables */
input[type=text], input[type=number], input[type=password], input[type=time], input[type=date], textarea, select { background:var(--sunk); border:1px solid var(--line2); border-radius:var(--r1); padding:0 10px; min-height:32px; width:100%; transition:border-color .1s; }
textarea { padding:8px 10px; min-height:64px; resize:vertical; }
input:hover, textarea:hover, select:hover { border-color:var(--faint); }
input:focus, textarea:focus, select:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-bg); }
input[type=checkbox], input[type=radio] { accent-color:var(--accent); }
.row select, .filters select { width:auto; }
table { width:100%; border-collapse:collapse; } td, th { padding:8px 12px; border-bottom:1px solid var(--line); text-align:left; vertical-align:middle; }
tbody tr:hover td, table tr:hover > td { background:rgba(255,255,255,.02); }
th { color:var(--mute); font-weight:500; font-size:12px; }

/* ---- VOD list on the home page: one quiet row each, details folded */
#vodsBox { padding:0; overflow:hidden; }
.vod { padding:16px 20px; border-bottom:1px solid var(--line); } .vod:last-child { border-bottom:0; }
.vod-main { display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"who acts" "stats acts"; gap:8px 24px; align-items:center; } .vod .who { grid-area:who; min-width:0; } .vod .stats { grid-area:stats; } .vod .acts { grid-area:acts; }
.vod .name { display:flex; align-items:center; gap:8px; font-weight:600; } .vod .name .mono { font-size:13px; }
.vod .sub { color:var(--mute); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; }
.vod .stats { display:flex; gap:4px 16px; flex-wrap:wrap; font-size:12px; color:var(--mute); } .vod .stats b { color:var(--ink); font-weight:600; }
.vod .acts { display:flex; align-items:center; gap:8px; justify-content:flex-end; flex-wrap:wrap; }
.vod-more { margin-top:8px; }
.vod-more > summary { list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--faint); user-select:none; }
.vod-more > summary::-webkit-details-marker { display:none; } .vod-more > summary::before { content:"▸"; font-size:10px; transition:transform .12s; }
.vod-more[open] > summary::before { transform:rotate(90deg); } .vod-more > summary:hover { color:var(--ink); }
.vod-detail { display:flex; flex-direction:column; gap:12px; margin-top:12px; padding:12px 16px; background:var(--sunk); border-radius:var(--r1); font-size:12px; }
.vod-game { display:flex; flex-direction:column; gap:8px; } .vod-game:empty { display:none; }
.vod-detail select { min-height:28px; font-size:12px; }
.chip.small { min-height:24px; padding:0 10px; font-size:12px; } .chip.done { color:var(--ok); }
@media (max-width:620px) { .vod-main { grid-template-columns:1fr; grid-template-areas:"who" "stats" "acts"; } .vod .acts { justify-content:flex-start; } }

/* ---- publication, calendar */
.cal { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px; }
.cal .day { background:var(--panel); border:1px solid var(--line); border-radius:var(--r2); padding:8px; min-height:112px; }
.cal .day.today { border-color:var(--accent); } .cal .day h4 { margin:0 0 8px; font-size:12px; color:var(--mute); font-weight:600; }
.pub { display:flex; gap:8px; align-items:center; background:var(--sunk); border-radius:var(--r1); padding:4px 8px 4px 4px; margin-bottom:4px; font-size:12px; cursor:pointer; }
.pub:hover { background:var(--hover); }
.pub img { width:26px; height:46px; object-fit:cover; border-radius:4px; background:#000; } .pub .tt { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }
.kpis { display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); }
.kpi .val { font-size:24px; font-weight:650; letter-spacing:-.02em; } .kpi .lab { color:var(--mute); font-size:12px; }
.vodcard { margin-bottom:12px; } .vodcard .head { display:flex; gap:12px; align-items:center; flex-wrap:wrap; } .vodcard ul { margin:8px 0; padding-left:0; list-style:none; }
.vodcard li { padding:2px 0; } .ok-t { color:var(--ok); } .no-t { color:var(--mute); }
.items-mini { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; } .items-mini .badge { cursor:pointer; }
@media (max-width:820px) { .cal { grid-template-columns:1fr; } }

/* ---- videos */
.filters { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:16px 0; }
.filters > .muted { color:var(--line2); }
.cards { display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); }
.card { background:var(--panel); border:1px solid var(--line); border-radius:var(--r2); overflow:hidden; display:flex; flex-direction:column; transition:border-color .12s; }
.card:hover { border-color:var(--line2); }
.card.approved { border-color:color-mix(in srgb, var(--ok) 55%, var(--line)); } .card.maybe { border-color:color-mix(in srgb, var(--warn) 55%, var(--line)); }
.card.review { border-color:color-mix(in srgb, var(--info) 60%, var(--line)); } .card.rejected { opacity:.5; }
.card.liked { box-shadow:0 0 0 1px #facc15; }
.card video { width:100%; background:#000; display:block; }
.card[data-kind="short"] video { aspect-ratio:9/16; max-height:440px; object-fit:contain; }
.vwrap { position:relative; } .vwrap .ov { position:absolute; left:8px; top:8px; display:flex; gap:4px; pointer-events:none; }
.vwrap .pill { font-size:11px; font-weight:600; line-height:20px; padding:0 8px; border-radius:999px; background:rgba(8,9,14,.72); backdrop-filter:blur(6px); color:#fff; border:1px solid rgba(255,255,255,.12); }
.vwrap .pill.mono { font-family:var(--mono); font-weight:500; }
.card .body { padding:12px; display:flex; flex-direction:column; gap:8px; }
.card .t { font-weight:600; line-height:1.3; } .card .why { color:var(--mute); font-size:12px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.card .row { gap:4px; } .card .row .btn { min-width:32px; padding:0 8px; } .card .row .btn.grow { padding:0 12px; }
.tags { display:flex; gap:4px; flex-wrap:wrap; }

/* ---- decision panel (detail window) */
.decide { display:flex; flex-direction:column; gap:8px; }
.decide.locked .choice, .decide.locked .chip { opacity:.5; filter:grayscale(.8); } .decide.locked .choice.on, .decide.locked .chip.on { opacity:.75; }
.decide.locked button { cursor:default; }
.decide.locked textarea { background:var(--sunk); border-style:dashed; color:var(--ink); cursor:default; resize:none; }  /* greyed frame, but the text stays fully readable */
.sent { color:var(--ok); font-weight:600; margin-top:8px; }
.choices { display:flex; gap:8px; flex-wrap:wrap; }
.choice { flex:1; min-width:110px; padding:12px; border-radius:var(--r2); border:1px solid var(--line2); background:var(--panel); font-weight:600; transition:border-color .1s, background .1s; }
.choice.ok:hover, .choice.ok.on { border-color:var(--ok); } .choice.no:hover, .choice.no.on { border-color:var(--no); }
.choice.maybe:hover, .choice.maybe.on { border-color:var(--warn); } .choice.maybe.on { background:var(--warn); color:#2b1d02; }
.choice.review:hover, .choice.review.on { border-color:var(--info); } .choice.review.on { background:var(--info); color:#051a33; }
.choice.ok.on { background:var(--ok); color:#06281c; } .choice.no.on { background:var(--no); color:#2b0707; }

/* ---- detail window */
.modal { position:fixed; inset:0; background:rgba(5,6,10,.8); backdrop-filter:blur(2px); z-index:20; display:none; overflow:auto; padding:32px 16px; }
.modal .box { max-width:1180px; margin:0 auto; background:var(--panel); border:1px solid var(--line2); border-radius:var(--r3); padding:20px; display:grid; gap:24px; grid-template-columns:auto minmax(0,1fr); box-shadow:0 24px 64px rgba(0,0,0,.5); }
.modal .media { position:sticky; top:0; align-self:start; display:flex; flex-direction:column; gap:8px; min-height:0; }
/* the short fills the whole card height and stays in view while the details scroll; the column is as wide as the video needs, so no black bands */
.modal .media { width:fit-content; max-width:52vw; } .modal .media > .tags { width:0; min-width:100%; }
.modal video { height:calc(100vh - 150px); width:auto; aspect-ratio:var(--ar, 0.5625); max-width:100%; align-self:center; background:#000; border-radius:var(--r2); object-fit:contain; }
/* a landscape video (replay) gets the wide side instead of a narrow column with black bands above and below */
.modal .box.wide { grid-template-columns:minmax(0,1.8fr) minmax(300px,1fr); }
.modal .box.wide .media { width:100%; max-width:none; height:auto; }
.modal .box.wide video { width:100%; height:auto; max-height:calc(100vh - 150px); }
.modal .right { display:flex; flex-direction:column; gap:12px; min-width:0; }
.modal h3 { margin:8px 0 4px; font-size:12px; font-weight:600; color:var(--mute); letter-spacing:.02em; }
.cap { display:flex; gap:8px; align-items:center; margin-bottom:4px; } .cap .tm { width:62px; flex:0 0 62px; color:var(--mute); font-variant-numeric:tabular-nums; font-family:var(--mono); font-size:12px; }
.cap button { background:none; border:0; color:var(--mute); } .caps { max-height:300px; overflow:auto; padding-right:4px; }
.reasons { display:flex; gap:6px; flex-wrap:wrap; } .reasons .chip { font-size:12px; }
.quote { border-left:2px solid var(--accent); padding:4px 12px; color:var(--mute); font-size:13px; }
.close { position:absolute; right:22px; top:16px; background:none; border:0; font-size:24px; color:var(--mute); } .close:hover { color:var(--ink); }
.modal .pos { position:absolute; right:56px; top:22px; font-size:12px; color:var(--mute); font-variant-numeric:tabular-nums; }
.navarrow { position:fixed; top:50%; transform:translateY(-50%); width:48px; height:84px; border-radius:var(--r3); border:1px solid var(--line2); background:rgba(18,20,29,.88); color:var(--ink); font-size:36px; line-height:1; cursor:pointer; z-index:21; transition:background .12s; }
.navarrow:hover { background:var(--accent); border-color:var(--accent); } .navarrow.prev { left:max(8px, calc(50vw - 640px)); } .navarrow.next { right:max(8px, calc(50vw - 640px)); }
@media (max-width:820px) { .navarrow { width:36px; height:60px; font-size:28px; top:auto; bottom:14px; transform:none; } }
@media (max-width:820px) { .modal .box, .modal .box.wide { grid-template-columns:1fr; } .modal .box.wide .media { height:auto; } .modal .media { position:static; height:auto; width:auto; max-width:none; } .modal video, .modal .box.wide video { width:100%; height:auto; max-height:70vh; } }
#toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:var(--panel2); border:1px solid var(--line2); border-radius:var(--r2); padding:12px 16px; display:none; max-width:90vw; z-index:30; box-shadow:0 12px 32px rgba(0,0,0,.45); }
#toast a { color:var(--accent-ink); }

/* ---- plan du stream (plan.js) */
.modal .box.plan { display:block; max-width:1000px; } .pthumb { width:136px; border-radius:var(--r1); display:block; background:#000; } .seg { margin-bottom:12px; }
.seg input[type=text], .seg input[type=number], .seg select { font-size:13px; width:auto; } .seg input[type=text] { width:96px; } .seg input[placeholder] { width:200px; }
.seg input[type=checkbox] { width:auto; min-height:0; } .seg .row { align-items:center; }
.mrow { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:8px; padding:8px 12px; background:var(--sunk); border:1px solid var(--line); border-radius:var(--r1); }
.mrow .grow { flex:1 1 0; } .pthumb.sm { width:88px; }

/* ---- original-video editor (clipedit.js) */
.modal .media > .cedit { width:0; min-width:100%; display:flex; flex-direction:column; gap:8px; } .cedit-panel { display:flex; flex-direction:column; gap:8px; }
.modal .cedit video.srcvid, .modal .box.wide .cedit video.srcvid { width:100%; height:auto; max-height:50vh; aspect-ratio:16/9; background:#000; border-radius:var(--r2); }
.cedit .row.wrap { flex-wrap:wrap; gap:6px; align-items:center; }
.tl { position:relative; height:92px; background:var(--panel2); border:1px solid var(--line); border-radius:var(--r1); overflow:hidden; cursor:pointer; user-select:none; touch-action:none; }
.tl canvas { position:absolute; inset:0; width:100%; height:100%; } .tlmarks { position:absolute; inset:0; pointer-events:none; }
.tlmarks .mk { position:absolute; top:3px; transform:translateX(-50%); font-size:13px; line-height:1; pointer-events:auto; cursor:pointer; text-shadow:0 0 3px #000; }
.mk.win { color:var(--ok); } .mk.loss { color:var(--no); } .mk.star { color:#facc15; font-size:15px; } .mk.death { color:#fb7185; } .mk.kill { color:var(--cyan); top:auto; bottom:3px; }
.tlmarks .mk.tick { top:auto; bottom:0; width:2px; height:9px; font-size:0; transform:none; } .mk.tick.ally { background:#38bdf8; } .mk.tick.enemy { background:#f87171; }
.tlmarks .mk.buy { transform:none; top:0; height:5px; background:#9ca3af66; pointer-events:auto; } .tllegend .mk.buy.sw { display:inline-block; width:18px; height:6px; position:static; }
.tlrange { position:absolute; top:0; bottom:0; background:#9146ff33; border-left:2px solid var(--accent-hi); border-right:2px solid var(--accent-hi); pointer-events:none; }
.tlh { position:absolute; top:0; bottom:0; width:14px; background:var(--accent-hi); cursor:ew-resize; pointer-events:auto; opacity:.9; border-radius:3px; } .tlh.s { left:-2px; } .tlh.e { right:-2px; }
.tlplay { position:absolute; top:0; bottom:0; width:2px; background:#fff; pointer-events:none; } .tlends { justify-content:space-between; font-size:11px; }
.heard { font-size:12px; min-height:16px; } .readout { font-size:13px; } .tllegend { font-size:11px; }

/* ---- phone: the sidebar becomes a top strip */
@media (max-width:860px) {
  .app { grid-template-columns:1fr; }
  .side { position:sticky; top:0; z-index:7; height:auto; flex-direction:row; flex-wrap:wrap; align-items:center; gap:8px 12px; padding:8px 12px; border-right:0; border-bottom:1px solid var(--line); }
  .side .grow { display:none; } .side select { width:auto; }
  .nav-list { order:5; flex-direction:row; flex-basis:100%; overflow-x:auto; gap:0; } .nav { width:auto; min-height:40px; white-space:nowrap; padding:0 12px; } .nav.on::before { top:auto; bottom:0; left:12px; right:12px; width:auto; height:2px; }
  .engine { flex-direction:row; align-items:center; padding:4px 8px; margin-left:auto; } .engine .btns { flex-wrap:nowrap; } .engine .btn { min-height:28px; font-size:12px; }
  .usermenu .menu { bottom:auto; top:calc(100% + 6px); left:auto; right:0; min-width:220px; }
  .topbar { position:static; padding:0 12px; min-height:48px; } .topbar h1 { font-size:18px; } #topProgress { width:100%; margin-left:auto; }
  main { padding:4px 12px 48px; } .cards { grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px; }
  .two { grid-template-columns:1fr; } .filters .spacer { flex-basis:100%; }
}

/* short taken from a replay: its passage on the timeline, in green next to the replay's own range */
.tlrange.sh { background:rgba(79,191,139,.28); border:1px solid var(--ok); pointer-events:none; z-index:2; }
.cedit-short { margin-top:16px; padding-top:12px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:8px; }

/* YouTube thumbnail editor (replays, best-ofs) */
.thumbed { display:flex; flex-direction:column; gap:8px; }
.thumbimg { width:100%; max-width:480px; aspect-ratio:16/9; border-radius:var(--r2); background:var(--sunk); object-fit:cover; display:block; }
.thumbimg.empty { display:flex; align-items:center; justify-content:center; font-size:13px; }
.thumbstrip { display:flex; gap:6px; overflow-x:auto; padding-bottom:4px; }
.thumbpick { width:120px; aspect-ratio:16/9; object-fit:cover; border-radius:var(--r1); cursor:pointer; border:2px solid transparent; flex:none; }
.thumbpick:hover { border-color:var(--mute); } .thumbpick.on { border-color:var(--accent); }

/* the engine block is narrow: its rows wrap instead of overflowing the frame */
#engineBox .row { flex-wrap:wrap; }
#engineBox label.row { flex-wrap:nowrap; align-items:flex-start; line-height:1.35; } #engineBox label.row input { margin-top:2px; }
.thumbgrid { display:grid; grid-template-columns:repeat(2, 1fr); gap:8px; max-width:480px; }
.thumbopt { cursor:pointer; border:2px solid transparent; border-radius:var(--r2); overflow:hidden; background:var(--sunk); display:flex; flex-direction:column; }
.thumbopt img { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; } .thumbopt span { font-size:12px; text-align:center; padding:4px; color:var(--mute); }
.thumbopt:hover { border-color:var(--mute); } .thumbopt.on { border-color:var(--ok); } .thumbopt.on span { color:var(--ok); }

/* in-page confirmation (replaces the browser's confirm()) */
.ask { position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.55); padding:16px; }
.askbox { background:var(--panel); border:1px solid var(--line); border-radius:var(--r3); padding:20px; max-width:460px; width:100%; box-shadow:0 12px 40px rgba(0,0,0,.5); }
.asktext { white-space:pre-line; line-height:1.45; margin-bottom:16px; } .askbtns { flex-wrap:wrap; justify-content:flex-end; }

/* title ideas under the title field (replays, best-ofs) */
.titleideas { display:flex; flex-direction:column; gap:4px; margin:6px 0; }
.titleideas .idea { text-align:left; background:var(--sunk); border:1px solid var(--line); border-radius:var(--r1); color:var(--ink); padding:6px 10px; line-height:1.35; cursor:pointer; }
.titleideas .idea:hover { border-color:var(--accent); }
/* thumbnail block: everything stays inside the column (rows wrap, the background pictures sit in a grid, none hidden to the right) */
.thumbed { min-width:0; max-width:100%; }
.thumbed .row { flex-wrap:wrap; } .thumbed .row input[type=text] { min-width:0; flex:1 1 160px; } .thumbed .row input#x { width:auto; }
.thumbstrip { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:6px; overflow:visible; }
.thumbpick { width:100%; }

/* home page: profile chips, short lists, agenda */
.homebar { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin:20px 0 4px; } .homebar .filters { margin:0; }
#homeBody > .kpis { margin:16px 0 4px; } .kpi.link { text-align:left; cursor:pointer; font:inherit; color:inherit; } .kpi.link:hover { border-color:var(--accent); }
.home-blk h2.plain { cursor:default; } .home-blk h2.plain::before { display:none; }
.todo { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--line); } .todo:last-child { border-bottom:0; } .todo .grow { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.lnk { color:#c4b5fd; cursor:pointer; text-decoration:none; } .lnk:hover { text-decoration:underline; }
.agenda-day + .agenda-day { margin-top:14px; } .agenda-date { text-transform:capitalize; font-weight:600; margin-bottom:2px; }
.vodsmini { padding:0; overflow:hidden; }
#nowBox > * + *, .panel > .bar + .muted { margin-top:6px; }
.todo .btn { flex:none; white-space:nowrap; }

/* a Twitch rebroadcast about to expire */
tr.exp td:first-child { box-shadow:inset 3px 0 var(--warn); }

/* step-by-step guides under each social account */
details.guide { margin:8px 0 10px; } details.guide > summary { cursor:pointer; color:#c4b5fd; font-weight:500; }
details.guide ol { margin:8px 0 0; padding-left:20px; display:flex; flex-direction:column; gap:6px; line-height:1.45; }
details.guide.sub { margin:10px 0 0 -20px; } details.guide code { background:var(--sunk); padding:1px 5px; border-radius:4px; }

/* disk space */
.storage-banner { display:flex; align-items:center; gap:12px; margin:0; padding:10px 24px; font-weight:500; border-bottom:1px solid var(--line); }
.storage-banner.low { background:rgba(227,179,65,.14); color:var(--warn); } .storage-banner.critical { background:rgba(239,107,115,.16); color:var(--no); }
.drive + .drive { margin-top:10px; } .drive .bar { margin-top:6px; } .bar.low > i { background:var(--warn); } .bar.critical > i { background:var(--no); } .warn-t { color:var(--warn); }
.usage { margin-top:10px; display:flex; flex-direction:column; gap:4px; font-size:13px; }

.spin { width:14px; height:14px; border:2px solid var(--line2); border-top-color:var(--accent); border-radius:50%; display:inline-block; animation:spin .8s linear infinite; } @keyframes spin { to { transform:rotate(360deg); } } @media (prefers-reduced-motion:reduce) { .spin { animation:none; } }

.row > input.grow, .row > select.grow { min-width:0; flex:1 1 0; }  /* a text field in a row shrinks to the box instead of overflowing it */