/* TIF Loom — brand tokens from thoughtsinform.com: ink, paper, orange, maroon;
   Archivo for UI, Instrument Serif for display, JetBrains Mono for numbers. */
:root {
  /* Light "paper" theme, after the Cloudflare Connect look: off-white ground, ink text, one orange. */
  --ink: #fbfaf7; --ink-2: #ffffff; --ink-3: #f3f1ec; --ink-4: #e9e5de;
  --paper: #141414; --paper-2: #2a2926; --graphite: #6b6864; --graphite-2: #9c9a95;
  --orange: #ff5a00; --orange-2: #e04f00; --orange-soft: rgba(255,90,0,.10); --maroon: #7a0000; --red: #f0330f; --silver: #c6d0d2;
  --line: rgba(20,20,20,.12); --line-2: rgba(20,20,20,.24); --dot: rgba(20,20,20,.14);
  --on-orange: #ffffff; --thumb-bg: #0b0b0d; --overlay: rgba(11,11,13,.82); --overlay-fg: #f6f2e8;
  --glow: #ffffff; --glow-mid: rgba(255,255,255,.75);
  --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --serif: 'Instrument Serif', Georgia, serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --r: 6px; --r2: 8px; --pill: 999px;
}
:root[data-theme="dark"] {
  --ink: #0b0b0d; --ink-2: #141414; --ink-3: #1c1c1f; --ink-4: #26262a;
  --paper: #f6f2e8; --paper-2: #e9e5de; --graphite: #9c9a95; --graphite-2: #6b6864;
  --orange-2: #ff8a2a; --orange-soft: rgba(255,90,0,.16);
  --line: rgba(246,242,232,.10); --line-2: rgba(246,242,232,.22); --dot: rgba(246,242,232,.10);
  --on-orange: #0b0b0d; --overlay: rgba(11,11,13,.85); --overlay-fg: #f6f2e8;
  --glow: #17171b; --glow-mid: rgba(23,23,27,.75);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--ink); color: var(--paper); font: 14px/1.5 var(--display); -webkit-font-smoothing: antialiased; }
html { color-scheme: light; } html[data-theme="dark"] { color-scheme: dark; }
.mono-label { font: 500 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--graphite); }
a { color: var(--orange); text-decoration: none; }
h1, h2, h3 { font-family: var(--display); letter-spacing: -.01em; margin: 0; }
h1 { font-size: 28px; font-weight: 700; } h2 { font-size: 18px; font-weight: 600; margin: 22px 0 10px; } h3 { font-size: 15px; font-weight: 600; margin: 14px 0 8px; }
.serif { font-family: var(--serif); font-weight: 400; font-style: italic; }
.mono { font-family: var(--mono); font-size: 12px; }
.muted { color: var(--graphite); } .small { font-size: 12.5px; } .center { text-align: center; padding: 60px 0; }
button, .btn { font: inherit; font-weight: 500; border: 1px solid var(--line-2); background: var(--ink-2); color: var(--paper); padding: 8px 16px; border-radius: var(--pill); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; transition: background .12s, border-color .12s; }
button:hover, .btn:hover { background: var(--ink-3); border-color: var(--paper); }
button:disabled { opacity: .45; cursor: default; }
.primary, button.primary { background: var(--orange); border-color: var(--orange); color: var(--on-orange); font-weight: 600; }
.primary:hover, button.primary:hover { background: var(--orange-2); border-color: var(--orange-2); }
.ghost, button.ghost { border-color: transparent; background: transparent; } button.ghost:hover { border-color: transparent; }
button.danger { color: #ff7b5c; } button.danger:hover { background: rgba(122,0,0,.25); border-color: rgba(240,51,15,.4); }
.big { padding: 12px 22px; font-size: 15px; }
input, select, textarea { font: inherit; background: var(--ink-2); color: var(--paper); border: 1px solid var(--line-2); border-radius: var(--r); padding: 9px 12px; width: 100%; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--orange); }
select { appearance: none; padding-right: 30px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%239c9a95' stroke-width='2'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; }
label { display: block; font: 500 10.5px var(--mono); color: var(--graphite); margin: 14px 0 5px; text-transform: uppercase; letter-spacing: .12em; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .spread { justify-content: space-between; }
.card { background: var(--ink-2); border: 1px solid var(--line-2); border-radius: var(--r2); padding: 18px; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 99px; font: 500 11px var(--mono); letter-spacing: .04em; background: var(--ink-2); color: var(--graphite); border: 1px solid var(--line-2); }
.pill.ok { color: #1d8a4e; border-color: rgba(29,138,78,.35); } .pill.warn { color: var(--orange-2); border-color: rgba(255,90,0,.4); } .pill.bad { color: #c9331b; border-color: rgba(201,51,27,.35); }
:root[data-theme="dark"] .pill.ok { color: #7fd6a0; } :root[data-theme="dark"] .pill.bad { color: #ff7b5c; }
.toast { position: fixed; bottom: 64px; left: 50%; transform: translateX(-50%); background: var(--paper); color: var(--ink); padding: 11px 16px; border-radius: var(--pill); box-shadow: 0 10px 30px rgba(0,0,0,.25); z-index: 90; max-width: 90vw; font-weight: 500; }
code { font-family: var(--mono); font-size: 12px; background: var(--ink-3); padding: 2px 6px; border-radius: 6px; }
.avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--maroon); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex: none; object-fit: cover; }

/* ---------- shell: icon sidebar + top search, like Loom ---------- */
.shell { display: flex; min-height: 100vh; }
.side { width: 64px; flex: none; border-right: 1px solid var(--line); background: var(--ink-2); display: flex; flex-direction: column; align-items: center; padding: 14px 0; gap: 6px; position: sticky; top: 0; height: 100vh; }
.side .logo { width: 36px; height: 36px; border-radius: 10px; overflow: hidden; margin-bottom: 14px; } .side .logo img { width: 100%; height: 100%; display: block; }

.side a { width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--graphite); position: relative; }
.side a:hover { background: var(--ink-3); color: var(--paper); } .side a.active { background: var(--orange-soft); color: var(--orange); }
.side a svg { width: 20px; height: 20px; }
.side a .tip { position: absolute; left: 52px; background: var(--paper); color: var(--ink); font-size: 12px; font-weight: 600; padding: 4px 8px; border-radius: 6px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .1s; }
.side a:hover .tip { opacity: 1; }
.side .rec-btn { margin-top: auto; background: var(--orange); color: var(--on-orange); } .side .rec-btn:hover { background: var(--orange-2); color: var(--on-orange); }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.top { display: flex; align-items: center; gap: 14px; padding: 12px 28px; border-bottom: 1px solid var(--line); background: var(--ink-2); position: sticky; top: 0; z-index: 5; }
.top .search { flex: 1; max-width: 720px; margin: 0 auto; position: relative; }
.top .search input { padding-left: 38px; background: var(--ink-2); border-radius: var(--pill); }
.top .search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--graphite); }
.top .me { display: flex; align-items: center; gap: 10px; margin-left: auto; }
main { padding: 26px 32px 90px; max-width: 1500px; width: 100%; margin: 0 auto; }
/* Ground: a dot grid over the whole window, with a soft glow from the middle so the
   cards sit on clean paper while the edges keep their texture. Fixed to the viewport,
   so it stays centred whatever the window size and however far you scroll. */
body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(ellipse 58% 62% at 52% 50%, var(--glow) 0%, var(--glow-mid) 45%, transparent 100%), radial-gradient(var(--dot) 1px, transparent 1.2px);
  background-size: auto, 16px 16px; }
.shell { position: relative; z-index: 1; }
@media (max-width: 800px) { .side { display: none; } main { padding: 16px 14px 80px; } .top { padding: 10px 14px; } }

/* ---------- library ---------- */
.eyebrow { font: 500 10.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--graphite); display: flex; align-items: center; gap: 8px; }
.eyebrow::before { content: ""; width: 8px; height: 8px; background: var(--orange); display: inline-block; }
.hero { position: relative; }
.hero::before { content: "r3c0rd · tr4nscr1b3 · summ4r1z3 · sh4r3 · r3c0rd · tr4nscr1b3 · summ4r1z3 · sh4r3 · r3c0rd · tr4nscr1b3 · summ4r1z3 · sh4r3 · r3c0rd · tr4nscr1b3 · summ4r1z3 · sh4r3 · r3c0rd · tr4nscr1b3 · summ4r1z3 · sh4r3 · r3c0rd · tr4nscr1b3 · summ4r1z3 · sh4r3"; position: absolute; left: -8px; right: 0; top: -14px; bottom: -10px; font: 400 12px/1.7 var(--mono); letter-spacing: .12em; color: var(--orange); opacity: .22; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 70%, transparent); mask-image: linear-gradient(90deg, transparent, #000 15%, #000 70%, transparent); z-index: 0; white-space: normal; word-break: break-all; }
.hero > * { position: relative; z-index: 1; }
.tabs { display: flex; gap: 18px; border-bottom: 1px solid var(--line); margin: 18px 0 16px; }
.tabs button { border: 0; background: none; padding: 8px 2px; margin-bottom: -1px; color: var(--graphite); border-bottom: 2px solid transparent; border-radius: 0; font-weight: 500; }
.tabs button { font: 500 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; background: none; }
.tabs button:hover { background: none; color: var(--paper); } .tabs button.on { color: var(--paper); border-bottom-color: var(--orange); }
.filters { display: flex; gap: 8px; justify-content: flex-end; margin-bottom: 18px; }
.filters select { width: auto; background-color: var(--ink-2); padding: 7px 30px 7px 12px; border-radius: var(--pill); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 22px; }
.rec { background: var(--ink-2); overflow: hidden; color: var(--paper); display: block; border: 1px solid var(--line-2); border-radius: var(--r2); transition: border-color .12s, transform .12s; }
.rec:hover { border-color: var(--paper); transform: translateY(-2px); } .rec:hover .thumb { filter: grayscale(0); }
.rec .thumb { aspect-ratio: 16/9; background: var(--thumb-bg) center/cover no-repeat; position: relative; display: flex; align-items: center; justify-content: center; color: #6b6864; filter: grayscale(1); transition: filter .25s; border-bottom: 1px solid var(--line); }
.rec .thumb .dur, .rec .thumb .st { position: absolute; font-family: var(--mono); font-size: 11px; padding: 2px 7px; border-radius: 6px; }
.rec .thumb .dur { right: 8px; bottom: 8px; background: var(--overlay); color: var(--overlay-fg); }
.rec .thumb .st { left: 8px; top: 8px; background: var(--orange); color: var(--on-orange); letter-spacing: .06em; text-transform: uppercase; }
.rec .body { padding: 14px 16px 16px; }
.rec .blurb { font-size: 12.5px; line-height: 1.5; color: var(--graphite); margin: 0 0 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rec .who { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--graphite); margin-bottom: 8px; }
.rec h3 { margin: 0 0 6px; font-size: 15px; line-height: 1.35; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rec .stats { display: flex; gap: 14px; font-size: 12px; color: var(--graphite); font-family: var(--mono); }
.rec .stats span { display: inline-flex; gap: 5px; align-items: center; }
.empty { position: relative; overflow: hidden; border: 1px solid var(--line-2); border-radius: var(--r2); padding: 70px 20px; text-align: center; color: var(--graphite); background: var(--ink-2); }
.empty canvas.ht { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .55; pointer-events: none; }
.empty > *:not(canvas) { position: relative; }
.empty .serif { font-size: 26px; color: var(--paper); display: block; margin-bottom: 8px; }

/* ---------- watch ---------- */
.watch { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 0; margin: -26px -32px -80px; min-height: calc(100vh - 61px); }
.watch .left { padding: 22px 28px 60px; min-width: 0; }
.watch .panel { border-left: 1px solid var(--line); background: var(--ink-2); display: flex; flex-direction: column; min-height: 100%; }
@media (max-width: 1100px) { .watch { grid-template-columns: 1fr; } .watch .panel { border-left: 0; border-top: 1px solid var(--line); } }
.vtitle { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.vtitle h1 { font-size: 24px; line-height: 1.25; }
.vtitle input.title-edit { font: 700 24px/1.25 var(--display); letter-spacing: -.01em; background: none; border: 1px solid transparent; padding: 4px 8px; margin: -4px -8px; border-radius: 8px; }
.vtitle input.title-edit:hover, .vtitle input.title-edit:focus { border-color: var(--line-2); background: var(--ink-2); }
.vmeta { color: var(--graphite); font-size: 13px; display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.views { border: 1px solid var(--line-2); border-radius: var(--pill); padding: 6px 12px; font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; background: var(--ink-2); }
.player { background: #000; border-radius: var(--r2); overflow: hidden; border: 1px solid var(--line-2); position: relative; }
.player video { width: 100%; display: block; max-height: 70vh; background: #000; }
.player .speedtip { position: absolute; left: 50%; top: 58%; transform: translateX(-50%); background: var(--overlay); color: var(--overlay-fg); border-radius: var(--pill); padding: 8px 14px; font-family: var(--mono); font-size: 12px; pointer-events: none; opacity: 0; transition: opacity .2s; }
.player:hover .speedtip { opacity: 1; }
.player .speedtip s { color: #9c9a95; }
.reactbar { display: flex; justify-content: center; gap: 10px; margin: 18px 0 6px; flex-wrap: wrap; }
.reactbar .box { display: flex; gap: 4px; align-items: center; background: var(--ink-2); border: 1px solid var(--line-2); border-radius: var(--pill); padding: 6px 10px; }
.reactbar .emo { border: 0; background: none; font-size: 22px; padding: 4px 6px; border-radius: 8px; position: relative; line-height: 1; }
.reactbar .emo:hover { background: var(--ink-3); transform: scale(1.12); }
.reactbar .emo.on { background: var(--orange-soft); }
.reactbar .emo b { position: absolute; right: -2px; bottom: -4px; font: 600 10px var(--mono); background: var(--orange); color: var(--on-orange); border-radius: 99px; padding: 1px 5px; }
.reactbar .sep { width: 1px; background: var(--line-2); margin: 4px 6px; align-self: stretch; }
.section { margin-top: 26px; }
.section h2 { display: flex; align-items: center; gap: 8px; font: 500 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--graphite); border-top: 1px solid var(--line); padding-top: 10px; }
.section h2::before { content: ""; width: 8px; height: 8px; background: var(--orange); }
.chap { display: flex; gap: 12px; padding: 7px 0; cursor: pointer; border-bottom: 1px solid var(--line); }
.chap:hover { color: var(--orange); } .chap .t { font-family: var(--mono); font-size: 12px; color: var(--orange); min-width: 56px; padding-top: 2px; }
.sop { list-style: none; padding: 0; margin: 0; }
.sop li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.sop li .n { width: 26px; height: 26px; border-radius: 50%; background: var(--orange); color: var(--on-orange); display: flex; align-items: center; justify-content: center; font: 700 12px var(--mono); }
.sop li .t { font-family: var(--mono); font-size: 11.5px; color: var(--orange); cursor: pointer; margin-left: 8px; }
.sop img { width: 100%; max-width: 640px; border-radius: 8px; margin-top: 10px; border: 1px solid var(--line-2); cursor: zoom-in; display: block; }
.ptabs { display: flex; gap: 4px; padding: 10px 14px 0; border-bottom: 1px solid var(--line); position: sticky; top: 61px; background: var(--ink-2); z-index: 2; }
.ptabs button { border: 0; background: none; padding: 8px 10px; color: var(--graphite); border-bottom: 2px solid transparent; border-radius: 0; margin-bottom: -1px; font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.ptabs button:hover { background: none; color: var(--paper); } .ptabs button.on { color: var(--paper); border-bottom-color: var(--orange); }
.pbody { padding: 16px; overflow: auto; flex: 1; }
.pbody .toolbar { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.pbody .toolbar button { padding: 6px 10px; font-size: 12.5px; }
.seg { display: grid; grid-template-columns: 52px 1fr; gap: 10px; padding: 6px 8px; border-radius: 8px; cursor: pointer; font-size: 13.5px; line-height: 1.5; }
.seg:hover { background: var(--ink-3); } .seg.now { background: var(--orange-soft); }
.seg .t { font-family: var(--mono); font-size: 11.5px; color: var(--orange); padding-top: 3px; }
.seg mark { background: rgba(255,90,0,.35); color: inherit; border-radius: 3px; }
.gen { display: flex; flex-direction: column; gap: 6px; }
.gen button { justify-content: space-between; padding: 12px 14px; border-color: var(--line); background: var(--ink-2); text-align: left; border-radius: var(--r2); }
.gen button:hover { border-color: var(--line-2); }
.gen button .d { display: block; color: var(--graphite); font-size: 12px; font-weight: 400; }
.gen button .chev { color: var(--graphite); }
.gen .grp { font: 500 10.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--graphite); margin: 12px 0 4px; }
.doc { white-space: pre-wrap; font-size: 13.5px; line-height: 1.6; background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; max-height: 60vh; overflow: auto; }
.doc h1, .doc h2, .doc h3 { margin: 12px 0 6px; } .doc h1 { font-size: 18px; } .doc h2 { font-size: 15px; } .doc h3 { font-size: 14px; }
.doc ul, .doc ol { margin: 4px 0 8px 20px; padding: 0; } .doc p { margin: 0 0 8px; }
.cmt { display: flex; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.cmt .who { font-size: 12.5px; color: var(--graphite); display: flex; gap: 8px; align-items: baseline; }
.cmt .who b { color: var(--paper); font-weight: 600; }
.cmt .at { font-family: var(--mono); font-size: 11px; color: var(--orange); cursor: pointer; }
.cmt p { margin: 3px 0 0; white-space: pre-wrap; font-size: 13.5px; }
.cmt .x { margin-left: auto; color: var(--graphite-2); border: 0; padding: 0 4px; }
.cbox { display: flex; gap: 8px; align-items: flex-end; }
.cbox textarea { min-height: 42px; resize: vertical; }
.kv { display: grid; grid-template-columns: minmax(120px, max-content) 1fr; gap: 8px 14px; font-size: 13.5px; }
.kv b { color: var(--graphite); font-weight: 500; }
.lightbox { position: fixed; inset: 0; background: rgba(11,11,13,.92); display: flex; align-items: center; justify-content: center; z-index: 100; cursor: zoom-out; }
.lightbox img { max-width: 94vw; max-height: 94vh; border-radius: 8px; }

/* ---------- record ---------- */
.recwrap { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 22px; }
@media (max-width: 900px) { .recwrap { grid-template-columns: 1fr; } }
.preview { background: #000; border-radius: var(--r2); aspect-ratio: 16/9; position: relative; overflow: hidden; border: 1px solid var(--line); }
.preview video { width: 100%; height: 100%; object-fit: contain; display: block; }
.preview .bubble { position: absolute; left: 16px; bottom: 16px; width: 22%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 3px solid #fff; box-shadow: 0 4px 20px rgba(0,0,0,.5); }
.preview .bubble video { object-fit: cover; }
.preview .countdown { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 14px; align-items: center; justify-content: center; font: 400 160px/1 var(--serif); background: rgba(11,11,13,.7); color: var(--orange); }
.preview .countdown .skipbtn { font: 600 13px var(--display); background: #fff; color: #141414; border-color: #fff; padding: 9px 16px; }
.preview .hint { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #9c9a95; gap: 8px; background: #0b0b0d radial-gradient(rgba(255,90,0,.35) 1.2px, transparent 1.4px) 0 0/12px 12px; }
.preview .hint .serif { font-size: 30px; color: #f6f2e8; }
.controls { display: flex; gap: 10px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
.timer { font: 500 20px var(--mono); display: flex; align-items: center; gap: 10px; }
.timer .live { width: 10px; height: 10px; border-radius: 50%; background: var(--red); animation: blink 1.2s infinite; }
@keyframes blink { 50% { opacity: .2; } }
.modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.modes button { justify-content: center; flex-direction: column; gap: 2px; padding: 10px 6px; font-size: 12.5px; border-color: var(--line); }
.modes button { border-radius: var(--r2); }
.modes button.on { border-color: var(--orange); background: var(--orange-soft); }
.modes button span:first-child { font-size: 20px; }
.livetx { max-height: 240px; overflow: auto; font-size: 13px; color: var(--graphite); white-space: pre-wrap; line-height: 1.6; }
.progress { height: 6px; background: var(--ink-3); border-radius: 99px; overflow: hidden; margin: 12px 0; }
.progress i { display: block; height: 100%; background: var(--orange); width: 0; transition: width .3s; }
.steps { list-style: none; padding: 0; margin: 0; }
.steps li { display: flex; gap: 10px; align-items: center; padding: 6px 0; color: var(--graphite); }
.steps li.doing { color: var(--paper); } .steps li.done { color: #1d8a4e; } :root[data-theme="dark"] .steps li.done { color: #7fd6a0; }

/* ---------- login ---------- */
.login { max-width: 420px; margin: 10vh auto 0; text-align: center; position: relative; padding: 40px 28px; background: var(--ink-2); border: 1px solid var(--line-2); }
.login { overflow: hidden; }
.login > * { position: relative; }
.login .serif { font-size: 40px; display: block; margin: 12px 0 4px; }
.login .g { width: 100%; justify-content: center; background: var(--paper); color: var(--ink); border-color: var(--paper); font-weight: 600; padding: 12px; }
.login .g:hover { background: var(--paper-2); }

kbd { font: 500 11px var(--mono); background: var(--ink-3); border: 1px solid var(--line-2); border-radius: 5px; padding: 1px 6px; color: var(--paper); }

/* ---------- theme toggle (bottom centre, like a Human / Machine switch) ---------- */
.themepill { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 80; display: flex; gap: 2px; background: var(--paper); color: var(--ink); border-radius: var(--pill); padding: 4px; box-shadow: 0 8px 24px rgba(0,0,0,.25); font: 500 11px var(--mono); letter-spacing: .06em; }
.themepill button { border: 0; background: transparent; color: inherit; opacity: .55; padding: 5px 12px; border-radius: var(--pill); font: inherit; display: inline-flex; gap: 6px; align-items: center; }
.themepill button::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.themepill button.on { opacity: 1; background: rgba(127,127,127,.18); } .themepill button.on::before { background: var(--orange); }
.themepill button:hover { background: rgba(127,127,127,.18); }
@media (max-width: 800px) { .themepill { display: none; } }

/* ---------- halftone art (drawn by halftone() in app.js) ---------- */
.htbanner { position: relative; overflow: hidden; background: var(--orange); color: #fff; border-radius: 14px; padding: 48px 36px; text-align: left; min-height: 260px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 10px; }
.htbanner canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.htbanner > *:not(canvas) { position: relative; }
.htbanner h2 { font-size: 34px; font-weight: 600; letter-spacing: -.02em; margin: 0; color: #fff; max-width: 60%; line-height: 1.1; }
.htbanner .sub { font: 500 11px var(--mono); letter-spacing: .16em; text-transform: uppercase; background: rgba(255,255,255,.18); padding: 6px 12px; border-radius: var(--pill); }
.htbanner .btn { background: #fff; color: #141414; border-color: #fff; margin-top: 8px; } .htbanner .btn:hover { background: #f6f2e8; }
.htbanner.dark { background: #0b0b0d; }

/* ---------- usage table (Settings) ---------- */
.usage { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 6px; }
.usage th { font: 500 10.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--graphite); text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line-2); }
.usage td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.usage td.num { font-family: var(--mono); font-size: 12px; text-align: right; white-space: nowrap; } .usage th.num { text-align: right; }
.usage .who { display: flex; align-items: center; gap: 8px; } .usage .who small { display: block; color: var(--graphite); }
.usage tr.total td { font-weight: 600; border-top: 2px solid var(--line-2); }

/* ---------- thumbnail picker ---------- */
.thumbpick .cur { position: relative; border: 1px solid var(--line-2); border-radius: var(--r2); overflow: hidden; background: var(--thumb-bg); aspect-ratio: 16/9; }
.thumbpick .cur img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumbpick .cur .tag { position: absolute; left: 8px; top: 8px; font: 500 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; background: var(--orange); color: var(--on-orange); padding: 2px 7px; border-radius: 6px; }
.thumbpick .frames { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 8px; }
.thumbpick .fr { padding: 0; border: 1px solid var(--line-2); border-radius: 6px; overflow: hidden; background: var(--thumb-bg); aspect-ratio: 16/9; }
.thumbpick .fr:hover { border-color: var(--orange); } .thumbpick .fr canvas { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumbpick .scrub { border: 1px solid var(--line-2); border-radius: var(--r2); overflow: hidden; background: var(--thumb-bg); }
.thumbpick .scrub canvas { width: 100%; aspect-ratio: 16/9; display: block; object-fit: contain; }
.thumbpick .scrub input[type=range] { width: calc(100% - 70px); margin: 8px 8px 6px; accent-color: var(--orange); vertical-align: middle; }
.thumbpick .scrub .mono { color: var(--overlay-fg); font-size: 11px; }

/* ---------- pre-record preview ---------- */
.preview .meter { position: absolute; left: 16px; right: 16px; bottom: 10px; height: 4px; background: rgba(255,255,255,.18); border-radius: 99px; overflow: hidden; }
.preview .meter i { display: block; height: 100%; width: 0; background: var(--orange); transition: width .08s; }
.preview .bubble { z-index: 2; }

/* ---------- TIF Studio ---------- */
.tool { background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r2); padding: 22px 24px 20px; max-width: 900px; }
.tool .tabs { margin: 0 0 18px; overflow-x: auto; scrollbar-width: none; }
.tool .tabs button { white-space: nowrap; }
.tool .hint { color: var(--graphite); font-size: 13px; margin: -8px 0 14px; }
.linkrow { display: flex; gap: 10px; align-items: stretch; }
.linkrow input { flex: 1; font-size: 15px; padding: 12px 14px; border-radius: var(--r2); }
.linkrow button { border-radius: var(--r2); padding: 0 22px; font-size: 15px; }
.opts { display: flex; gap: 18px; flex-wrap: wrap; align-items: end; margin-top: 14px; }
.opts > div { min-width: 150px; } .opts label { margin-top: 0; }
.opts .chk { display: flex; align-items: center; gap: 8px; text-transform: none; letter-spacing: 0; font-size: 13.5px; color: var(--paper); padding-bottom: 9px; }
.opts .chk input { width: auto; margin: 0; }
.jobs { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.job { display: grid; grid-template-columns: 96px 1fr auto; gap: 14px; align-items: center; background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r2); padding: 10px 14px 10px 10px; color: var(--paper); transition: border-color .12s; }
.job:hover { border-color: var(--line-2); }
.job .th { width: 96px; aspect-ratio: 16/10; border-radius: 6px; background: var(--thumb-bg) center/cover no-repeat; display: flex; align-items: center; justify-content: center; color: #9c9a95; font: 500 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; overflow: hidden; }
.job .t { font-weight: 600; font-size: 14px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.job .m { color: var(--graphite); font-size: 12.5px; margin-top: 3px; display: flex; gap: 8px; flex-wrap: wrap; }
.job .m .mono { font-size: 11px; }
.bar { height: 3px; background: var(--ink-4); border-radius: 2px; overflow: hidden; margin-top: 8px; max-width: 320px; }
.bar i { display: block; height: 100%; background: var(--orange); transition: width .4s; }
.bar.pulse i { width: 40% !important; animation: slide 1.2s ease-in-out infinite alternate; }
@keyframes slide { from { margin-left: 0; } to { margin-left: 60%; } }
.jobpage { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 26px; }
@media (max-width: 1000px) { .jobpage { grid-template-columns: 1fr; } }
.poster { border-radius: var(--r2); border: 1px solid var(--line); background: var(--thumb-bg) center/cover no-repeat; aspect-ratio: 16/9; max-height: 420px; width: 100%; }
.poster.tall { aspect-ratio: 9/12; max-width: 320px; max-height: 480px; }
.files { display: flex; flex-direction: column; gap: 6px; }
.file { display: flex; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: var(--r2); padding: 8px 12px; background: var(--ink-2); font-size: 13.5px; }
.file .n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file .btn, .file button { padding: 5px 12px; font-size: 12.5px; }
.tr { background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r2); padding: 14px; max-height: 70vh; overflow: auto; font-size: 13.5px; line-height: 1.6; white-space: pre-wrap; }
.tags { display: flex; gap: 6px; flex-wrap: wrap; }
.stage { display: inline-flex; align-items: center; gap: 8px; }
.stage .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); animation: blink 1s infinite alternate; }
@keyframes blink { to { opacity: .2; } }
.signin { max-width: 440px; margin: 12vh auto 0; text-align: center; }
.signin .logo { width: 56px; height: 56px; margin: 0 auto 18px; }
.signin h1 { font-size: 34px; } .signin .serif { font-size: 22px; color: var(--graphite); display: block; margin: 6px 0 26px; }
.err { background: rgba(240,51,15,.08); border: 1px solid rgba(240,51,15,.35); color: var(--paper); padding: 10px 14px; border-radius: var(--r2); font-size: 13.5px; white-space: pre-wrap; }
.copybox { display: flex; gap: 8px; align-items: center; }
.copybox code { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 9px 12px; }
ol.how { padding-left: 20px; line-height: 1.7; } ol.how li { margin-bottom: 4px; }
@media (max-width: 800px) { .job { grid-template-columns: 72px 1fr; } .job .th { width: 72px; } .job > .pill { display: none; } .linkrow { flex-direction: column; } .linkrow button { padding: 12px; } }