/* MediaFarm — dark operations UI. Tokens first; every component uses them. */
:root {
  --bg: #0b0e12;
  --panel: #131920;
  --panel-2: #1a2129;
  --panel-3: #202934;
  --line: #232c36;
  --line-2: #2f3a46;
  --text: #e9edf2;
  --dim: #8e99a6;
  --faint: #5f6b78;
  --accent: #34d399;
  --accent-2: #10b981;
  --accent-ink: #06261c;
  --accent-soft: rgba(52, 211, 153, .12);
  --warn: #f5b041;
  --warn-soft: rgba(245, 176, 65, .14);
  --err: #f0655b;
  --err-soft: rgba(240, 101, 91, .14);
  --sans: "Fira Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "Fira Code", "Cascadia Mono", Consolas, ui-monospace, monospace;
  --r-sm: 6px; --r: 10px; --r-lg: 14px;
  --shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 10px 30px -18px rgba(0, 0, 0, .9);
  --t: 160ms cubic-bezier(.2, .7, .3, 1);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: radial-gradient(1100px 520px at 12% -8%, rgba(52, 211, 153, .07), transparent 60%),
              radial-gradient(900px 500px at 100% 0%, rgba(52, 211, 153, .03), transparent 55%), var(--bg);
  color: var(--text);
  font: 14px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--accent); text-decoration: none; transition: color var(--t); }
a:hover { color: #7fe8c3; }
h1 { font-size: 22px; margin: 0 0 16px; font-weight: 600; letter-spacing: -.01em; }
h2 { font-size: 13px; margin: 26px 0 10px; font-weight: 600; color: var(--dim); text-transform: uppercase; letter-spacing: .08em; display: flex; align-items: center; gap: 10px; }
h2::after { content: ""; flex: 1; height: 1px; background: var(--line); }
h3 { font-size: 12px; margin: 14px 0 8px; font-weight: 600; color: var(--dim); text-transform: uppercase; letter-spacing: .06em; }
.dim { color: var(--dim); }
.faint { color: var(--faint); }
.mono { font-family: var(--mono); font-size: 12.5px; font-variant-ligatures: none; }
.small { font-size: 12px; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.num, .tnum { font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }
svg.ico { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ----- header ----- */
header.top { display: flex; align-items: center; gap: 22px; padding: 0 22px; height: 54px; background: rgba(14, 18, 24, .92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
header.top .brand { font-weight: 700; letter-spacing: .01em; display: flex; align-items: center; gap: 9px; color: var(--text); font-size: 15px; }
header.top .brand .mark { width: 28px; height: 28px; border-radius: 8px; background: linear-gradient(145deg, var(--accent), var(--accent-2)); color: var(--accent-ink); display: grid; place-items: center; box-shadow: 0 0 18px rgba(52, 211, 153, .35); }
header.top .brand .mark svg { width: 16px; height: 16px; }
header.top nav { display: flex; gap: 2px; flex: 1; overflow-x: auto; align-self: stretch; scrollbar-width: none; }
header.top nav a { color: var(--dim); padding: 0 12px; display: flex; align-items: center; white-space: nowrap; position: relative; font-weight: 500; transition: color var(--t); }
header.top nav a:hover { color: var(--text); }
header.top nav a.on { color: var(--text); }
header.top nav a.on::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 2px; border-radius: 2px 2px 0 0; background: var(--accent); box-shadow: 0 0 10px rgba(52, 211, 153, .6); }
header.top .who { color: var(--dim); font-size: 13px; white-space: nowrap; display: flex; align-items: center; gap: 8px; }
main { padding: 22px 22px 40px; max-width: 1520px; margin: 0 auto; }

/* ----- messages ----- */
.flash { padding: 10px 14px; border-radius: var(--r); margin-bottom: 16px; border: 1px solid; font-weight: 500; }
.flash.ok { background: var(--accent-soft); border-color: rgba(52, 211, 153, .35); color: #bff2dc; }
.flash.err { background: var(--err-soft); border-color: rgba(240, 101, 91, .4); color: #ffc9c4; }
.note { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 14px; margin: 10px 0; }
.note.warn { border-color: rgba(245, 176, 65, .4); background: var(--warn-soft); }

/* ----- stat cards ----- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 8px; }
.stat { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 16px 14px 60px; box-shadow: var(--shadow); min-height: 84px; }
.stat::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--c, var(--line-2)); opacity: .9; }
.stat .ic { position: absolute; left: 16px; top: 18px; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: var(--c, var(--dim)); background: color-mix(in srgb, var(--c, var(--dim)) 14%, transparent); }
.stat .ic svg { width: 17px; height: 17px; }
.stat .v { font-size: 28px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var(--c, var(--text)); }
.stat .k { color: var(--dim); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; margin-top: 4px; font-weight: 500; }
.stat.enc { --c: var(--accent); }
.stat.ok { --c: var(--accent); }
.stat.err { --c: var(--err); }
.stat.warn { --c: var(--warn); }
.stat .sub { color: var(--faint); font-size: 11.5px; margin-top: 2px; }

/* ----- node cards ----- */
.grid-nodes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(380px, 100%), 1fr)); gap: 12px; }
.grid-nodes > *, .cols2 > *, .cols3 > * { min-width: 0; }
.node { background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 0; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.node .hd { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.node .hd .name { font-weight: 600; font-size: 15px; color: var(--text); }
.node .hd .name:hover { color: var(--accent); }
.node .hd .sub { color: var(--dim); font-size: 12px; margin-left: auto; text-align: right; line-height: 1.3; }
.node.offline, .node.never { opacity: .55; }
.node .body { padding: 8px 14px 12px; display: flex; flex-direction: column; gap: 4px; }
.rsrc { padding: 7px 0; border-bottom: 1px dashed var(--line); }
.rsrc:last-child { border-bottom: 0; }
.rsrc .rh { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.rsrc .rh .ico { color: var(--dim); }
.rsrc .rh .rl { font-family: var(--mono); font-size: 12px; color: var(--text); min-width: 58px; }
.rsrc .rh .rd { color: var(--dim); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rsrc .rm { display: grid; grid-template-columns: 1fr 44px; gap: 8px; align-items: center; margin: 5px 0 0 24px; }
.rsrc .rm .val { text-align: right; font-variant-numeric: tabular-nums; color: var(--dim); font-size: 12px; }
.rsrc .rj { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0 0 24px; }
.meter { height: 6px; background: rgba(255, 255, 255, .06); border-radius: 4px; overflow: hidden; }
.meter > i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--accent-2), var(--accent)); box-shadow: 0 0 10px rgba(52, 211, 153, .35); transition: width .6s ease; }
.meter.hot > i { background: linear-gradient(90deg, #d9962e, var(--warn)); box-shadow: 0 0 10px rgba(245, 176, 65, .35); }
.slots { display: flex; gap: 3px; margin-left: auto; }
.slots b { width: 16px; height: 7px; border-radius: 2px; background: rgba(255, 255, 255, .06); border: 1px solid var(--line-2); }
.slots b.on { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 8px rgba(52, 211, 153, .5); }

.chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 3px 9px 3px 7px; border-radius: 999px; background: var(--panel-3); border: 1px solid var(--line-2); color: var(--text); font-size: 12px; line-height: 1.3; transition: border-color var(--t), background var(--t); }
.chip:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }
.chip .d { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 6px var(--accent); flex: none; }
.chip .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; background: var(--faint); flex: none; }
.dot.online { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.dot.draining { background: var(--warn); box-shadow: 0 0 8px var(--warn); }
.dot.disabled { background: var(--faint); }
.dot.offline, .dot.never { background: var(--err); }

/* ----- pills ----- */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: var(--panel-3); border: 1px solid var(--line-2); color: var(--dim); white-space: nowrap; line-height: 1.4; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .9; }
.pill.running, .pill.assigned, .pill.processing { color: var(--accent); border-color: rgba(52, 211, 153, .35); background: var(--accent-soft); }
.pill.running::before { animation: pulse 1.2s ease-in-out infinite; }
.pill.fetching, .pill.delivering { color: #e6c37a; border-color: rgba(245, 176, 65, .3); background: var(--warn-soft); }
.pill.fetching::before, .pill.delivering::before { animation: pulse 1.2s ease-in-out infinite; }
.prog.relay > i { background: linear-gradient(90deg, #b58a2e, #e6c37a); box-shadow: 0 0 10px rgba(230, 195, 122, .4); }
/* ----- ingest tiles (multiviewer grid) ----- */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; margin: 10px 0 24px; }
.tile { background: var(--panel-2); border: 1px solid var(--line-2); border-radius: var(--r-lg); overflow: hidden; }
.tile .pic { display: flex; gap: 4px; background: #000; cursor: zoom-in; }
.tile .frame { position: relative; flex: 1; min-width: 0; aspect-ratio: 16 / 9; }
.tile .pic video, .tile .pic img.still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }
.tile .pic video { opacity: 0; transition: opacity .3s; }
.tile .pic.playing video { opacity: 1; }
.tile .pic.off img.still { opacity: .35; }
.tile .tags { position: absolute; top: 8px; left: 8px; right: 8px; display: flex; justify-content: space-between; gap: 6px; pointer-events: none; }
.tile .tag { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: rgba(10, 14, 18, .72); color: var(--text); border: 1px solid rgba(255, 255, 255, .12); }
.tile .tag.rec { background: rgba(240, 101, 91, .85); color: #fff; border-color: transparent; }
.tile .tag.rec::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #fff; margin-right: 6px; animation: pulse 1s ease-in-out infinite; vertical-align: 1px; }
.tile .tag.warn { background: rgba(245, 176, 65, .85); color: #1b1200; border-color: transparent; }
.tile .tag.armed { background: rgba(52, 211, 153, .85); color: #04221a; border-color: transparent; }
.tile .body { padding: 10px 12px 12px; }
.tile .name { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.tile .name .spacer { flex: 1; }
.tile .meta { font-size: 11.5px; color: var(--dim); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile .name .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   /* a long name is cut, the pills stay on the line */
.tile .tstat { font-size: 11.5px; color: var(--text); margin-left: auto; text-align: right; line-height: 1.35; font-variant-numeric: tabular-nums; }
.tile .tstat .warn { color: var(--warn); }
.tile .tstat .ok { color: var(--accent); }
.meters { display: flex; gap: 4px; margin: 8px 0; min-height: 6px; }
.meters .bar { flex: 1; height: 6px; background: var(--panel-3); border-radius: 3px; overflow: hidden; }
.meters .bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .08s linear; }
.meters .bar.hot i { background: var(--warn); }
.meters .bar.clip i { background: var(--err); }
.meters.v { flex-direction: row; align-items: stretch; margin: 0; padding: 5px 6px; gap: 3px; background: #06090c; min-height: 0; }
.meters.v .bar { position: relative; width: 7px; height: auto; flex: none; border-radius: 3px; background: var(--panel-3); }
.meters.v .bar i { position: absolute; left: 0; right: 0; bottom: 0; width: auto; height: 0; transition: height .08s linear; }
.meters.v .bar::after { content: ""; position: absolute; left: 0; right: 0; top: 30%; border-top: 1px solid rgba(255, 255, 255, .25); }   /* the -18 dBFS line */
.pv-stage { display: flex; gap: 6px; background: #000; border-radius: var(--r-sm); overflow: hidden; }
.pv-frame { flex: 1; min-width: 0; }
.pv-meters { margin: 0; padding: 8px 8px; }
.pv-meters .bar { width: 10px; }
.tile .chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 10px; }
.tile .chip { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; padding: 3px 8px 3px 6px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--panel-3); color: var(--dim); max-width: 100%; }
.tile .chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile .chip svg { width: 13px; height: 13px; flex: none; }
.tile .chip.on { color: var(--accent); border-color: rgba(52, 211, 153, .35); background: var(--accent-soft); }
.tile .chip.wait { color: var(--warn); border-color: rgba(245, 176, 65, .35); background: var(--warn-soft); }
.tile .chip.bad { color: #ffb0a9; border-color: rgba(240, 101, 91, .4); background: var(--err-soft); }
.tile .chip.idle { color: var(--text); }
.tile .chip.off { opacity: .6; }
.tile .acts { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.tile .acts .btns { display: flex; gap: 6px; }
.tile .acts button { width: 36px; height: 30px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.tile .acts button svg { width: 16px; height: 16px; }
.tile .acts button.rec { color: var(--err); border-color: rgba(240, 101, 91, .5); }
.tile .name input.sel { width: 15px; height: 15px; margin: 0 8px 0 0; accent-color: var(--accent); flex: none; }
.toolbar .bulk { display: flex; align-items: center; gap: 6px; margin-left: 18px; flex-wrap: wrap; }
.toolbar .bulk button { padding: 5px 10px; font-size: 12px; }
.tile .acts button.rec.stop { color: #fff; background: var(--err); border-color: var(--err); }          /* recording: a solid red STOP */
.tile .acts button.rec.stop:hover:not(:disabled) { background: #d9534a; border-color: #d9534a; }
.tile .acts button.rec.stop:disabled { opacity: .55; cursor: default; }                                   /* stopping: file being closed */
.tile .acts button.on { color: var(--accent); border-color: rgba(52, 211, 153, .5); }
.tile .acts .err { font-size: 11px; color: #ff9b95; margin-left: 4px; }
.pill.armed { color: #7fe8c3; border-color: rgba(52, 211, 153, .3); background: var(--accent-soft); }
.pill.recording { color: #ffb0a9; border-color: rgba(240, 101, 91, .45); background: var(--err-soft); }
.pill.recording::before { animation: pulse 1s ease-in-out infinite; }
.pill.starting, .pill.stopping { color: var(--warn); border-color: rgba(245, 176, 65, .35); background: var(--warn-soft); }
.pill.starting::before, .pill.stopping::before { animation: pulse 1.2s ease-in-out infinite; }
.pill.paused { color: var(--warn); border-color: rgba(245, 176, 65, .35); background: var(--warn-soft); }
.pill.verifying, .pill.settling, .pill.warn, .pill.cancelling { color: var(--warn); border-color: rgba(245, 176, 65, .35); background: var(--warn-soft); }
.pill.done, .pill.ok { color: #7fe8c3; border-color: rgba(52, 211, 153, .3); background: var(--accent-soft); }
.pill.failed, .pill.err { color: #ffb0a9; border-color: rgba(240, 101, 91, .4); background: var(--err-soft); }
.pill.queued, .pill.probing { color: var(--text); }
.pill.cancelled, .pill.ignored, .pill.skipped { color: var(--dim); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ----- job lines & progress ----- */
.jobline { padding: 8px 0; border-top: 1px solid var(--line); font-size: 12.5px; }
.jobline:first-of-type { border-top: 0; }
.jobline .t { display: flex; gap: 6px; align-items: baseline; }
.jobline .t .f { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jobline .row2 { display: flex; gap: 10px; align-items: center; }
.jobline .row2 .body { flex: 1; min-width: 0; }
.prog { height: 6px; background: rgba(255, 255, 255, .06); border-radius: 4px; overflow: hidden; margin-top: 4px; }
.prog > i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--accent-2), var(--accent)); box-shadow: 0 0 10px rgba(52, 211, 153, .45); transition: width .8s ease; }
.prog.verifying > i { background: linear-gradient(90deg, #d9962e, var(--warn)); box-shadow: 0 0 10px rgba(245, 176, 65, .45); }
.pct { font-variant-numeric: tabular-nums; font-size: 12px; color: var(--dim); margin-top: 3px; }

/* ----- tables ----- */
table { width: 100%; border-collapse: collapse; }
table.t { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); }
table.t th, table.t td { padding: 10px 12px; border-bottom: 1px solid rgba(255, 255, 255, .045); text-align: left; vertical-align: middle; }
table.t th { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--dim); font-weight: 600; background: var(--panel-2); }
table.t tr:last-child td { border-bottom: 0; }
table.t tbody tr { transition: background var(--t); }
table.t tr.click { cursor: pointer; }
table.t tr.click:hover td { background: rgba(255, 255, 255, .03); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl-wrap { overflow-x: auto; border-radius: var(--r-lg); }
.tbl-wrap table.t { min-width: 560px; }
.empty { color: var(--dim); padding: 6px 0; display: flex; align-items: center; gap: 8px; }

/* ----- forms ----- */
form.inline { display: inline; }
.form { background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; box-shadow: var(--shadow); }
.form .row { display: grid; grid-template-columns: 210px 1fr; gap: 10px; align-items: start; margin-bottom: 12px; }
.form .row > label { color: var(--dim); padding-top: 8px; font-weight: 500; }
.form .row .help { color: var(--faint); font-size: 12px; margin-top: 5px; line-height: 1.45; }
/* explanations: a small "i" icon with a balloon (app.js turns .help and p.intro into these) */
.info-wrap { position: relative; display: inline-block; vertical-align: middle; margin-left: 6px; line-height: 1; }
.info-wrap .info { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%;
  border: 1px solid var(--line-2); background: var(--panel-2); color: var(--dim); font: 600 10px/1 "Fira Sans", system-ui, sans-serif;
  cursor: help; user-select: none; }
.info-wrap .info:hover, .info-wrap.open .info { color: var(--accent); border-color: var(--accent); }
.balloon { display: none; position: absolute; top: 22px; left: 0; z-index: 60; width: max-content; max-width: min(460px, 88vw);
  padding: 10px 12px; background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .5); color: var(--text); font-size: 12.5px; font-weight: 400; line-height: 1.5;
  text-align: left; white-space: normal; text-transform: none; letter-spacing: 0; }
.info-wrap.open .balloon { display: block; }
.info-wrap.right .balloon { left: auto; right: 0; }
.info-wrap.up .balloon { top: auto; bottom: 22px; }
h1 .info-wrap, h2 .info-wrap { margin-left: 8px; }
.form fieldset { border: 1px solid var(--line); border-radius: var(--r); margin: 16px 0; padding: 12px 14px 4px; background: rgba(0, 0, 0, .12); }
.form legend { color: var(--text); font-weight: 600; padding: 0 8px; font-size: 13px; }
.cols2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.cols3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
input[type=text], input[type=password], input[type=number], select, textarea {
  background: var(--bg); color: var(--text); border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 8px 10px; font: inherit; width: 100%; max-width: 560px; min-height: 38px;
  transition: border-color var(--t), box-shadow var(--t);
}
input[type=number] { max-width: 140px; }
textarea { font-family: var(--mono); font-size: 12.5px; min-height: 58px; font-variant-ligatures: none; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
input[type=checkbox] { width: 16px; height: 16px; vertical-align: -3px; accent-color: var(--accent); }
.checks label { display: inline-flex; align-items: center; gap: 7px; margin: 4px 16px 4px 0; color: var(--text); cursor: pointer; }
input[type=radio] { width: 15px; height: 15px; margin: 0; accent-color: var(--accent); vertical-align: -2px; }
.radios { display: inline-flex; gap: 12px; align-items: center; color: var(--dim); }
.radios label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.radios input:checked + span, .radios label:has(input:checked) { color: var(--text); }
button, .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; background: var(--panel-3); color: var(--text); border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 0 14px; min-height: 36px; font: inherit; font-weight: 500; cursor: pointer; white-space: nowrap; transition: background var(--t), border-color var(--t), transform var(--t), box-shadow var(--t); }
button:hover, .btn:hover { border-color: #3d4a58; background: #27313d; color: var(--text); }
button:active, .btn:active { transform: translateY(1px); }
button:focus-visible, .btn:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button.primary, .btn.primary { background: linear-gradient(180deg, var(--accent), var(--accent-2)); border-color: transparent; color: var(--accent-ink); box-shadow: 0 6px 18px -8px rgba(52, 211, 153, .8); }
button.primary:hover, .btn.primary:hover { background: linear-gradient(180deg, #5ee3b1, var(--accent)); color: var(--accent-ink); }
button.danger { color: #ffb0a9; border-color: rgba(240, 101, 91, .4); }
button.danger:hover { background: var(--err-soft); border-color: var(--err); }
button.small, .btn.small { min-height: 30px; padding: 0 10px; font-size: 12.5px; }
button:disabled { opacity: .45; cursor: default; transform: none; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 14px 0; }
.toolbar { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.toolbar input, .toolbar select { width: auto; }
.spacer { flex: 1; }

.encoders { display: flex; flex-direction: column; gap: 5px; max-width: 560px; }
.encoders .enc { display: flex; align-items: center; gap: 10px; padding: 6px 10px; background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--r-sm); transition: border-color var(--t); }
.encoders .enc.on { border-color: var(--accent); background: var(--accent-soft); }
.encoders .enc .n { flex: 1; }
.encoders .enc .ord { color: var(--accent); font-weight: 700; width: 18px; text-align: center; font-variant-numeric: tabular-nums; }

.matrix td.cell { text-align: center; font-variant-numeric: tabular-nums; }
.cell-ok { color: var(--accent); font-weight: 600; }
.cell-no { color: var(--err); }
.cell-off { color: var(--faint); }
.cell-pend { color: var(--warn); }
pre.log { background: #080a0d; border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; max-height: 420px; overflow: auto; font: 12px/1.5 var(--mono); font-variant-ligatures: none; white-space: pre-wrap; word-break: break-all; color: #c3cad3; }
.kv { display: grid; grid-template-columns: 160px 1fr; gap: 7px 14px; background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 16px; box-shadow: var(--shadow); }
.kv > div:nth-child(odd) { color: var(--dim); }
.browser { background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--r); max-height: 380px; overflow: auto; }
.browser .it { display: flex; align-items: center; gap: 9px; padding: 7px 12px; border-bottom: 1px solid rgba(255, 255, 255, .04); font-size: 13px; min-height: 36px; }
.browser .it:hover { background: rgba(255, 255, 255, .03); }
.browser .it .n { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.browser .it.dir .n { color: var(--accent); cursor: pointer; }
.crumbs { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; margin: 8px 0; font-size: 13px; }
.crumbs a { cursor: pointer; }
.token { font-family: var(--mono); background: #080a0d; border: 1px solid var(--accent-2); padding: 10px 12px; border-radius: var(--r-sm); word-break: break-all; user-select: all; font-variant-ligatures: none; }

/* ----- live previews ----- */
.thumb { width: 96px; height: 54px; border-radius: 5px; background: #000 center/cover no-repeat; border: 1px solid var(--line-2); flex: none; cursor: zoom-in; object-fit: cover; display: block; transition: transform var(--t), border-color var(--t), box-shadow var(--t); }
.thumb:hover { transform: scale(1.04); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.thumb.sm { width: 72px; height: 40px; }
.thumb.empty { cursor: default; background: repeating-linear-gradient(45deg, #0f1319 0 6px, #141a21 6px 12px); transform: none; box-shadow: none; border-color: var(--line); }
.preview-inline { width: 100%; max-width: 480px; aspect-ratio: 16 / 9; background: #000; border-radius: var(--r); border: 1px solid var(--line-2); object-fit: contain; cursor: zoom-in; display: block; }
.pv-modal { position: fixed; inset: 0; background: rgba(4, 6, 9, .78); backdrop-filter: blur(6px); display: none; align-items: center; justify-content: center; z-index: 100; padding: 16px; }
.pv-modal.open { display: flex; animation: fade .18s ease-out; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.pv-box { background: var(--panel-2); border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 12px; max-width: min(960px, 100%); width: 100%; box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .9); animation: rise .2s cubic-bezier(.2, .7, .3, 1); }
@keyframes rise { from { transform: translateY(8px) scale(.985); opacity: .6; } to { transform: none; opacity: 1; } }
.pv-box .hd { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.pv-box .hd .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.pv-box img, .pv-box video { width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: #000; border-radius: var(--r-sm); display: block; }
.pv-box .ft { display: flex; gap: 10px; align-items: center; margin-top: 10px; font-size: 12.5px; color: var(--dim); }
.icon-btn { width: 34px; height: 34px; min-height: 34px; padding: 0; border-radius: var(--r-sm); }
.icon-btn svg { display: block; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--err); box-shadow: 0 0 6px var(--err); display: inline-block; animation: pulse 1.2s ease-in-out infinite; }

/* ----- graphics library ----- */
.gposter { width: 96px; height: 54px; object-fit: contain; border-radius: 5px; background: repeating-conic-gradient(#2a3340 0 25%, #1c232c 0 50%) 0 0 / 12px 12px; border: 1px solid var(--line-2); display: block; }
.gposter.empty { background: repeating-linear-gradient(45deg, #0f1319 0 6px, #141a21 6px 12px); }
.gstage { position: relative; width: 100%; aspect-ratio: 16 / 9; background: linear-gradient(135deg, #2b3340, #141a22); border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden; }
.gstage::before { content: "16:9 frame"; position: absolute; left: 10px; bottom: 8px; color: var(--faint); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.gstage.ref::before { content: "reference"; color: rgba(255, 255, 255, .55); text-shadow: 0 1px 3px rgba(0, 0, 0, .9); }
.gstage img, .gstage .gbox { position: absolute; left: 0; top: 0; display: block; }
.gstage .gbox { width: 12%; aspect-ratio: 16 / 9; background: var(--accent-soft); border: 1px dashed var(--accent); color: var(--accent); font-size: 11px; display: grid; place-items: center; border-radius: 4px; }
.glist { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; max-width: 760px; }
.gitem { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--r-sm); cursor: pointer; transition: border-color var(--t); }
.gitem.on { border-color: var(--accent); background: var(--accent-soft); }
.gitem img { width: 64px; height: 36px; object-fit: contain; border-radius: 4px; background: repeating-conic-gradient(#2a3340 0 25%, #1c232c 0 50%) 0 0 / 10px 10px; flex: none; }
.pline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); margin-bottom: 6px; background: rgba(0, 0, 0, .12); }
.pline.on { border-color: var(--accent-2); }
.pline .pout { display: none; align-items: center; gap: 8px; flex-wrap: wrap; }
.pline.on .pout { display: flex; }

/* ----- queue groups (same source file) ----- */
table.t tr.grp td { background: rgba(52, 211, 153, .05); border-top: 1px solid var(--line-2); padding-top: 8px; padding-bottom: 6px; }
table.t tr.sub td { padding-top: 6px; padding-bottom: 6px; }
table.t tr.sub td:first-child { padding-left: 18px; }
table.t tr.muted td { opacity: .62; }
table.t tr.muted:hover td { opacity: .85; }

/* ----- watch task encoders ----- */
.encrow { border: 1px solid var(--line-2); border-radius: var(--r); padding: 12px 14px; margin-bottom: 10px; background: rgba(0, 0, 0, .14); }
.encrow .eh { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.encrow .eh .n { font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; }
.encrow .eh select { max-width: 360px; }
.encrow .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px 16px; }
.encrow .grid label.f { display: flex; flex-direction: column; gap: 4px; color: var(--dim); font-size: 12.5px; }
.encrow .grid label.f input, .encrow .grid label.f select { max-width: none; }
.encrow .grid label.f .checks { color: var(--text); font-size: 13px; }

/* ----- frames: add / edit / info pages open in a dialog over the list ----- */
.fr-modal { position: fixed; inset: 0; background: rgba(4, 6, 9, .74); backdrop-filter: blur(6px); display: none; justify-content: center; align-items: flex-start; z-index: 90; padding: 4vh 16px; }
.fr-modal.open { display: flex; animation: fade .18s ease-out; }
.fr-box { background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--r-lg); width: min(1180px, 100%); max-height: 92vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 30px 80px -24px rgba(0, 0, 0, .95), 0 0 0 1px rgba(52, 211, 153, .08); animation: rise .2s cubic-bezier(.2, .7, .3, 1); }
.fr-box .hd { display: flex; align-items: center; gap: 6px; padding: 8px 10px 8px 16px; border-bottom: 1px solid var(--line); background: var(--panel-2); flex: none; }
.fr-box .hd .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 15px; }
.fr-box .hd .icon-btn { color: var(--dim); }
.fr-box .hd .icon-btn:hover { color: var(--text); }
.fr-box .hd .back { margin-left: -6px; margin-right: 4px; }
.fr-box iframe { border: 0; width: 100%; height: 240px; min-height: 120px; max-height: calc(92vh - 52px); display: block; background: var(--bg); transition: height .15s ease; }
body.has-frame { overflow: hidden; }
body.frame { background: var(--bg); }
body.frame main { padding: 16px 20px 20px; max-width: none; }
body.frame h1 { display: none; }
@media (max-width: 760px) {
  .fr-modal { padding: 0; }
  .fr-box { width: 100%; max-height: 100vh; height: 100vh; border-radius: 0; border: 0; }
  .fr-box iframe { max-height: none; flex: 1; }
}

/* ----- per-resource profile switches (node page) ----- */
.chips { display: inline-flex; gap: 4px; flex-wrap: wrap; vertical-align: middle; margin-right: 6px; }
.chip-res { font-family: var(--mono); font-size: 11.5px; padding: 0 8px; min-height: 26px; }
.chip-res.on { color: var(--accent); border-color: rgba(52, 211, 153, .45); background: var(--accent-soft); }
.chip-res.off { color: var(--faint); text-decoration: line-through; }
.chip-res.na { color: #ffb0a9; border-color: rgba(240, 101, 91, .45); background: var(--err-soft); text-decoration: line-through; cursor: not-allowed; }
.chip-res.pend { color: var(--faint); border-style: dashed; cursor: default; }
.chip-res[disabled] { opacity: .85; transform: none; }

/* ----- changelog ----- */
.changelog { max-width: 900px; }
.changelog h2 { margin-top: 26px; }
.changelog ul { margin: 6px 0 14px; padding-left: 22px; }
.changelog li { margin: 4px 0; }
.changelog p { color: var(--dim); }
.changelog code { font-family: var(--mono); font-size: 12px; background: var(--panel-3); padding: 1px 5px; border-radius: 4px; }

/* ----- responsive & motion ----- */
@media (max-width: 760px) {
  header.top { padding: 0 14px; gap: 12px; }
  header.top .brand .t { display: none; }
  main { padding: 14px 14px 32px; }
  .form .row { grid-template-columns: 1fr; }
  .cols2, .cols3 { grid-template-columns: minmax(0, 1fr); }
  .grid-nodes { grid-template-columns: 1fr; }
  .kv { grid-template-columns: 120px 1fr; }
  .cards { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ----- cloud sync (Cloud page) ----- */
.ctask { background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); margin-bottom: 14px; }
.ctask .hd { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.ctask .hd .name { font-weight: 600; }
.ctask .hd .sub { color: var(--dim); font-size: 12px; flex-basis: 100%; }
.ctask .hd .spacer { flex: 1; }
.ctask .body { padding: 12px 16px 14px; }
.ctask .body > .prog { height: 9px; }
.ctask .files { margin-top: 12px; }
.ctask .files table.t { min-width: 0; box-shadow: none; }
.pill.uploading { color: var(--accent); border-color: rgba(52, 211, 153, .35); background: var(--accent-soft); }
.pill.uploading::before { animation: pulse 1.2s ease-in-out infinite; }
.prog.busy > i { width: 28%; animation: tc-slide 1.6s ease-in-out infinite; }      /* working, no percent yet (comparing folders) */
@keyframes tc-slide { 0% { margin-left: 0; } 50% { margin-left: 72%; } 100% { margin-left: 0; } }
/* ----- task editor (0.21): the In kind as a segmented control, Out rows = profile -> target ----- */
.seg { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 14px; }
.seg label { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--panel-3); color: var(--dim); font-weight: 500; cursor: pointer; }
.seg label:hover { border-color: #3d4a58; color: var(--text); }
.seg label .ico { width: 16px; height: 16px; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label:has(input:checked) { color: var(--accent); border-color: rgba(52, 211, 153, .5); background: var(--accent-soft); }
.seg label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.seg label.off { opacity: .4; cursor: not-allowed; }
.outrow .eh { flex-wrap: wrap; }
.outrow .eh .arrow { width: 18px; height: 18px; color: var(--faint); flex: none; }
.outrow .eh .o-tkind, .outrow .eh .o-run { width: auto; }
.browser.flist { max-height: 240px; }
.browser.flist .it button { min-height: 26px; padding: 0 8px; }
.tgt { display: inline-flex; align-items: center; gap: 5px; }
.tgt .ico { width: 13px; height: 13px; color: var(--faint); }