/* Dark theme everywhere (dashboard and pairing page). */
:root {
  --ink: #e6e9f0;
  --muted: #8b94a7;
  --line: #2a3140;
  --paper: #0f1218;
  --card: #171b24;
  --brand: #4c7dff;
  --ok: #2fbf71;
  --bad: #ff6b5e;
  --radius: 10px;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink);
  color-scheme: dark;
  background: var(--paper);
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--paper); color: var(--ink); }
header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; background: var(--card); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 2; }
header h1 { font-size: 18px; margin: 0; }
nav { display: flex; gap: 4px; padding: 8px 12px; background: var(--card); border-bottom: 1px solid var(--line); overflow-x: auto; }
nav button { border: 0; background: none; padding: 8px 12px; border-radius: 8px; font: inherit; color: var(--muted); }
nav button[aria-current="true"] { background: var(--paper); color: var(--ink); font-weight: 600; }
main { padding: 16px; max-width: 760px; margin: 0 auto; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; margin-bottom: 12px; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.spread { justify-content: space-between; }
.muted { color: var(--muted); font-size: 14px; }
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px 12px; margin: 10px 0; font-size: 14px; }
.stats b { display: block; font-weight: 500; color: var(--muted); font-size: 12px; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; background: var(--bad); }
.dot.on { background: var(--ok); }
button, .btn { font: inherit; padding: 9px 14px; border-radius: 8px; border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; }
button.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
button.danger { color: var(--bad); }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
input, select { font: inherit; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); min-width: 0; }
label { display: grid; gap: 4px; font-size: 14px; color: var(--muted); }
.thumb { width: 72px; height: 48px; object-fit: cover; border-radius: 6px; background: #232a38; flex: none; }
.media-item { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.media-item:last-child { border-bottom: 0; }
.grow { flex: 1; min-width: 0; }
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
dialog { border: 0; border-radius: var(--radius); padding: 0; width: min(640px, 96vw); max-height: 90vh; }
dialog .body { padding: 16px; overflow: auto; max-height: calc(90vh - 70px); }
dialog .foot { padding: 12px 16px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 8px; }
.error { color: var(--bad); }
.empty { text-align: center; padding: 28px 12px; color: var(--muted); }
@media (prefers-reduced-motion: no-preference) { button { transition: background .15s; } }

/* ---------- Dark theme details ---------- */
button:hover:not(.primary) { background: #202634; }
dialog { background: var(--card); color: var(--ink); }
dialog::backdrop { background: rgba(0, 0, 0, .6); }
main.wide { max-width: none; padding-inline: 12px; } /* the Timeline tab uses the full width */

/* ---------- Timeline editor ---------- */
.tl-bar { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin-bottom: 10px; }
.tl-bar label { display: flex; align-items: center; gap: 6px; }
.tl-bar input[type="number"] { width: 84px; padding: 6px 8px; }
.tl-spacer { flex: 1; }
.tl-dirty { color: #ffd166; font-size: 13px; }
.tl-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #12161e; position: relative; }
.tl-canvas { position: relative; min-width: 100%; }
.tl-row { display: flex; align-items: stretch; border-bottom: 1px solid var(--line); }
.tl-row:last-child { border-bottom: 0; }
.tl-head {
  position: sticky; left: 0; z-index: 4; flex: none; width: 132px; padding: 8px 10px;
  background: #171b24; border-right: 1px solid var(--line); display: grid; align-content: center; gap: 4px;
}
.tl-head b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-head .tl-meta { font-size: 12px; color: var(--muted); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.tl-head .dot { width: 8px; height: 8px; }
.tl-head button { padding: 2px 8px; font-size: 12px; }
.tl-lane.active .tl-head { box-shadow: inset 3px 0 0 var(--brand); }
.tl-track { position: relative; flex: none; height: 74px; background:
  repeating-linear-gradient(90deg, transparent 0, transparent calc(var(--pps) * 1px - 1px), rgba(255,255,255,.045) calc(var(--pps) * 1px - 1px), rgba(255,255,255,.045) calc(var(--pps) * 1px)); }
.tl-lane.active .tl-track { background-color: rgba(76,125,255,.06); }
.tl-ruler { height: 28px; background: #131720; }
.tl-ruler .tl-track { height: 28px; background: none; }
.tl-tick { position: absolute; top: 0; bottom: 0; border-left: 1px solid #2f3747; font-size: 11px; color: var(--muted); padding: 3px 0 0 4px; white-space: nowrap; pointer-events: none; }
.tl-tick.minor { top: 18px; border-color: #252c3a; padding: 0; }
.tl-clip {
  position: absolute; top: 8px; height: 58px; border-radius: 7px; padding: 6px 8px; overflow: hidden;
  color: #fff; font-size: 12px; cursor: grab; user-select: none; touch-action: none;
  border: 1px solid rgba(255,255,255,.18); box-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.tl-clip.video { background: linear-gradient(180deg, #4a78f5, #2f56c9); }
.tl-clip.image { background: linear-gradient(180deg, #23a883, #167a5f); }
.tl-clip.busy { opacity: .55; }
.tl-clip.sel { outline: 2px solid #ffd166; outline-offset: 1px; z-index: 2; }
.tl-clip.dragging { cursor: grabbing; opacity: .9; z-index: 3; }
.tl-clip .n { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-clip .d { opacity: .8; }
.tl-handle { position: absolute; right: 0; top: 0; bottom: 0; width: 12px; cursor: ew-resize; background: rgba(255,255,255,.28); }
.tl-loopend { position: absolute; top: 28px; bottom: 0; width: 0; border-left: 2px dashed #ff9f43; z-index: 3; pointer-events: none; }
.tl-loopend::after { content: "loop end"; position: absolute; top: 2px; left: 4px; font-size: 11px; color: #ff9f43; white-space: nowrap; }
/* ---------- Screen drawings (physical mounting) ---------- */
.scr { position: relative; flex: none; border: 2px solid #56607a; border-radius: 5px; background: #0b0e14; overflow: visible; }
.scr-view { position: absolute; inset: 0; overflow: hidden; border-radius: 3px; display: block; }
.scr-label { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 700; font-size: 14px; color: #c9d0df; pointer-events: none; text-shadow: 0 1px 3px #000; }
.scr-foot { position: absolute; background: #9aa4bd; border-radius: 2px; }
.scr.foot-bottom .scr-foot { left: 22%; right: 22%; bottom: -7px; height: 4px; }
.scr.foot-top .scr-foot { left: 22%; right: 22%; top: -7px; height: 4px; }
.scr.foot-left .scr-foot { top: 22%; bottom: 22%; left: -7px; width: 4px; }
.scr.foot-right .scr-foot { top: 22%; bottom: 22%; right: -7px; width: 4px; }
.scr.online { border-color: #2fbf71; }
.layout-map { display: flex; flex-wrap: wrap; gap: 22px 26px; align-items: flex-end; padding: 6px 4px 2px; }
.layout-item { display: grid; gap: 8px; justify-items: center; text-align: center; font-size: 12px; color: var(--muted); max-width: 130px; cursor: pointer; }
.layout-item b { color: var(--ink); font-size: 13px; }
/* ---------- Simulator ---------- */
.sim { display: flex; flex-direction: column; min-height: 0; }
.sim-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 8px; overflow: hidden; }
.sim.compact .sim-stage { height: 300px; flex: none; }
.sim-item { display: grid; gap: 10px; justify-items: center; }
.sim-tv { background: #000; border-width: 3px; }
.sim-tv .scr-view video, .sim-tv .scr-view img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.sim-badge { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; font-size: 12px; color: #b9c1d3; text-shadow: 0 1px 3px #000; pointer-events: none; }
.sim-name { font-size: 13px; text-align: center; }
.sim-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 10px 12px; border-top: 1px solid var(--line); background: var(--card); }
.sim-controls button { padding: 6px 12px; }
.sim-scrub { flex: 1; min-width: 160px; padding: 0; accent-color: var(--brand); }
.sim-time { font-variant-numeric: tabular-nums; min-width: 110px; }
.sim-live { display: flex; flex-direction: row; align-items: center; gap: 6px; }
.sim-overlay { position: fixed; inset: 0; z-index: 60; background: #05070a; display: flex; flex-direction: column; }
.sim-top { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--card); border-bottom: 1px solid var(--line); }
.sim-root { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.sim-root.sim { min-height: 0; }
.layout-edit .layout-item { padding: 8px 10px; border: 1px dashed transparent; border-radius: 10px; cursor: grab; }
.layout-edit .layout-item.dragover { border-color: var(--brand); background: rgba(76,125,255,.08); }
.layout-edit .layout-item.dragging { opacity: .4; }
.layout-arrows { display: flex; gap: 6px; }
.layout-arrows button { padding: 2px 10px; }
/* ---------- Clips: frame strip, trim / loop / fade handles ---------- */
.tl-track { height: 88px; }
.tl-clip { top: 8px; height: 72px; padding: 0; overflow: hidden; }
.tl-film { position: absolute; inset: 0 0 16px 0; display: flex; overflow: hidden; background: #0b0e14; pointer-events: none; }
.tl-tile { position: relative; display: flex; flex: none; height: 100%; overflow: hidden; }
.tl-tile.loop { border-left: 2px dashed #ffd166; box-shadow: inset 0 0 0 100px rgba(255, 209, 102, .10); }
.tl-fr { flex: 1 1 0; min-width: 0; height: 100%; object-fit: cover; background: #1b2130; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.tl-loopmark { position: absolute; top: 2px; left: 3px; z-index: 2; font-size: 13px; color: #ffd166; text-shadow: 0 1px 2px #000; }
.tl-imgfill { position: absolute; inset: 0; background-size: auto 100%; background-repeat: repeat-x; background-position: left center; }
.tl-cliplabel { position: absolute; left: 0; right: 0; bottom: 0; height: 16px; display: flex; justify-content: space-between; gap: 6px; padding: 0 12px; font-size: 11px; line-height: 16px; background: rgba(0, 0, 0, .6); color: #fff; pointer-events: none; }
.tl-cliplabel .n { display: inline; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.tl-cliplabel .d { display: inline; flex: none; }
.tl-trim { position: absolute; top: 0; bottom: 16px; width: 9px; background: rgba(255, 255, 255, .6); cursor: ew-resize; z-index: 3; }
.tl-trim.l { left: 0; border-radius: 6px 0 0 0; }
.tl-trim.r { right: 0; border-radius: 0 6px 0 0; }
.tl-trim:hover { background: #fff; }
.tl-looptab { position: absolute; top: 26px; width: 19px; height: 19px; border-radius: 50%; background: #ffd166; color: #1a1a1a; font-size: 13px; line-height: 19px; text-align: center; cursor: ew-resize; z-index: 3; box-shadow: 0 1px 3px rgba(0, 0, 0, .6); user-select: none; }
.tl-looptab.l { left: 12px; }
.tl-looptab.r { right: 12px; }
.tl-fade { position: absolute; top: 0; bottom: 16px; z-index: 2; pointer-events: none; }
.tl-fade.in { left: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .9), rgba(0, 0, 0, 0)); }
.tl-fade.out { right: 0; background: linear-gradient(270deg, rgba(0, 0, 0, .9), rgba(0, 0, 0, 0)); }
.tl-fadeh { position: absolute; top: 3px; width: 13px; height: 13px; z-index: 4; background: #fff; border: 2px solid #3f4a63; border-radius: 3px; cursor: ew-resize; opacity: .9; }
.tl-fadeh:hover { opacity: 1; background: #ffd166; }
.tl-cut { position: fixed; z-index: 80; width: 236px; padding: 6px; border-radius: 10px; background: #0b0e14; border: 1px solid #56607a; box-shadow: 0 8px 28px rgba(0, 0, 0, .7); pointer-events: none; }
.tl-cut video { display: block; width: 100%; max-height: 168px; object-fit: contain; background: #000; border-radius: 6px; }
.tl-cut .lab { margin-top: 6px; font-size: 12px; color: #e6e9f0; text-align: center; }
.tl-master { padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.tl-time { font-variant-numeric: tabular-nums; min-width: 128px; }
.tl-inline { display: flex; flex-direction: row; align-items: center; gap: 6px; }
.tl-ruler { cursor: pointer; }
.tl-simhead { position: absolute; top: 0; bottom: 0; left: 132px; width: 0; border-left: 2px solid #ff5d5d; z-index: 6; pointer-events: none; }
.tl-simhead::before { content: ""; position: absolute; top: 0; left: -7px; border: 6px solid transparent; border-top: 9px solid #ff5d5d; }
.tl-head { cursor: pointer; }
.tl-lane.drop-target .tl-track { background-color: rgba(255, 209, 102, .10); box-shadow: inset 0 0 0 2px rgba(255, 209, 102, .5); }
.tl-clip.dragging { transition: none; }
.tl-delay {
  position: absolute; left: 0; top: 0; bottom: 0; pointer-events: none; color: var(--muted); font-size: 11px; padding: 4px 6px;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 6px, transparent 6px 12px);
  border-right: 1px dashed #4a5468;
}
.tl-lend { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px dashed #ff9f43; pointer-events: none; z-index: 1; }
.tl-playhead { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px solid #ff5d5d; z-index: 5; pointer-events: none; display: none; }
.tl-playhead::before { content: ""; position: absolute; top: 0; left: -6px; border: 5px solid transparent; border-top: 8px solid #ff5d5d; }
.tl-inspector { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: end; }
.tl-inspector label { min-width: 0; }
.tl-inspector input { width: 92px; }
.tl-lib { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.tl-card { display: flex; gap: 8px; align-items: center; padding: 6px; border: 1px solid var(--line); border-radius: 8px; background: #12161e; }
.tl-card .thumb { width: 56px; height: 40px; }
.tl-card button { padding: 5px 10px; }
.tl-help { font-size: 13px; color: var(--muted); margin: 8px 0 0; }

/* Timeline: snap guide and clip context menu */
.tl-snapline { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed #ffd24c; pointer-events: none; z-index: 6; }
.tl-menu { position: fixed; z-index: 60; min-width: 160px; padding: 4px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.45); }
.tl-menu button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 8px 10px; border-radius: 6px; }
.tl-menu button:hover, .tl-menu button:focus-visible { background: rgba(255,255,255,.07); outline: none; }

/* Timeline tab top row: media pool (left, resizable) next to the simulator */
.tl-top { display: grid; grid-template-columns: var(--pool-w, 460px) 10px minmax(0, 1fr); height: var(--pool-h, 320px); }
.tl-top > .card { margin: 0; min-height: 0; }
.tl-simcard { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.tl-simcard .sim-stage { flex: 1 1 auto; height: auto; min-height: 0; }
.tl-resize-x, .tl-resize-y { position: relative; touch-action: none; }
.tl-resize-x { cursor: col-resize; }
.tl-resize-y { cursor: row-resize; height: 12px; margin-bottom: 4px; }
.tl-resize-x::after, .tl-resize-y::after { content: ""; position: absolute; border-radius: 2px; background: var(--line); transition: background .15s; }
.tl-resize-x::after { top: 40%; bottom: 40%; left: 4px; width: 2px; }
.tl-resize-y::after { left: 45%; right: 45%; top: 5px; height: 2px; }
.tl-resize-x:hover::after, .tl-resize-y:hover::after, .tl-resize-x.active::after, .tl-resize-y.active::after, .tl-resize-x:focus-visible::after, .tl-resize-y:focus-visible::after { background: var(--brand); }

.tl-pool { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.tl-pool.dropping { box-shadow: inset 0 0 0 2px var(--brand); }
.pool-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.pool-head button { padding: 4px 10px; }
.pool-head input[type=search] { width: 120px; padding: 4px 8px; }
.pool-head input[type=range] { width: 90px; padding: 0; accent-color: var(--brand); }
.pool-views { display: flex; }
.pool-views button { border-radius: 0; }
.pool-views button:first-child { border-radius: 6px 0 0 6px; }
.pool-views button:last-child { border-radius: 0 6px 6px 0; margin-left: -1px; }
.pool-views button[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: #fff; }
.pool-body { flex: 1; min-height: 0; overflow: auto; padding: 10px; background: #0c0f14; }
.pool-status { padding: 4px 10px; font-size: 12px; border-top: 1px solid var(--line); min-height: 24px; }

.pool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--thumb, 150px), 1fr)); gap: 12px 10px; align-content: start; }
.pool-tile { cursor: grab; outline: none; border-radius: 6px; }
.pool-tile.not-ready { cursor: default; }
.pool-thumb { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: 5px; overflow: hidden; border: 2px solid transparent; }
.pool-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.pool-tile.sel .pool-thumb, .pool-tile:focus-visible .pool-thumb { border-color: #ff9f1a; }
.pool-kind { position: absolute; left: 5px; top: 4px; font-size: 11px; color: #fff; text-shadow: 0 1px 2px #000; opacity: .85; }
.pool-dur { position: absolute; right: 5px; bottom: 4px; font-size: 11px; font-variant-numeric: tabular-nums; padding: 1px 5px; border-radius: 3px; background: rgba(0,0,0,.7); color: #fff; }
.pool-state { position: absolute; inset: auto 0 0 0; padding: 3px; text-align: center; font-size: 11px; background: rgba(0,0,0,.75); color: #fff; }
.pool-state.error { color: var(--bad); }
.pool-name { margin-top: 5px; font-size: 12px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.pool-tile.sel .pool-name { color: #ff9f1a; }

.pool-list { width: 100%; border-collapse: collapse; font-size: 12px; }
.pool-list th { position: sticky; top: -10px; background: #0c0f14; text-align: left; font-weight: 600; color: var(--muted); padding: 6px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.pool-list td { padding: 4px 8px; border-bottom: 1px solid #1a1f2a; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pool-list tr.pool-tile.sel td { background: rgba(255,159,26,.12); }
.pool-list tr.pool-tile:hover td { background: rgba(255,255,255,.04); }
.pool-lname { display: flex; align-items: center; gap: 8px; max-width: 320px; overflow: hidden; }
.pool-lname span { overflow: hidden; text-overflow: ellipsis; }
.pool-lname .pool-state { position: static; background: none; padding: 0; color: var(--muted); }
.pool-mini { width: 48px; height: 27px; object-fit: contain; background: #000; border-radius: 3px; flex: none; }

.pool-dlg-title { margin: 0; font-size: 18px; }
.pool-info { display: grid; gap: 12px; }
.pool-info-media { width: 100%; max-height: 50vh; object-fit: contain; background: #000; border-radius: 6px; }
.pool-info ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 14px; }
.danger-fill { background: var(--bad); border-color: var(--bad); color: #fff; }
.tl-menu button[disabled] { opacity: .45; cursor: default; }
@media (max-width: 800px) {
  .tl-top { grid-template-columns: 1fr; height: auto; }
  .tl-top .tl-pool { height: var(--pool-h, 320px); }
  .tl-resize-x { display: none; }
  .tl-simcard { height: 300px; }
}