/* Tech Base Panel — touch UI, sized for the official 7" screen (800×480). */
:root {
  --bg: #07060a;
  --bg-2: #0c0a16;
  --panel: #100d1d;
  --panel-2: #16122a;
  --line: #241a44;
  --line-2: #3a2a6e;
  --text: #e7e0ff;
  --text-dim: #b3a6d8;
  --text-mute: #6f6494;
  --accent: #00e6ff;
  --accent-2: #ff2bd6;
  --ok: #00ff95;
  --warn: #ffb020;
  --danger: #ff3b6b;
  --accent-rgb: 0, 230, 255;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; cursor: none; }
/* Fluid shell: on the Pi kiosk the window IS 800x480 so 100% renders identical;
   on an iPad/phone the panel fills whatever the screen gives it. */
html, body {
  margin: 0; width: 100%; height: 100%; overflow: hidden;
  background: var(--bg); color: var(--text);
  font-family: -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
  user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
.boot {
  display: flex; align-items: center; justify-content: center; height: 100%;
  letter-spacing: 0.3em; color: var(--text-mute); font-weight: 700;
}

#app { width: 100%; height: 100%; display: grid; grid-template-rows: 50px 1fr; }

/* ---- header ---- */
.hdr {
  display: flex; align-items: center; gap: 12px; padding: 0 16px;
  background: linear-gradient(180deg, var(--bg-2), var(--bg));
  border-bottom: 1px solid var(--line);
}
.hdr .venue { font-weight: 800; letter-spacing: 0.04em; font-size: 17px; }
.hdr .spacer { flex: 1; }
.hdr .clock { font-variant-numeric: tabular-nums; color: var(--text-dim); font-size: 15px; }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.dot.on { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.dot.off { background: var(--text-mute); }
.cloud { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-mute); }
.gear {
  width: 42px; height: 36px; border-radius: 9px; border: 1px solid var(--line-2);
  background: var(--panel); color: var(--text-dim); font-size: 18px;
}
.gear.armed { border-color: var(--warn); color: var(--warn); }

/* iPad / iPhone standalone: the black-translucent status bar lets web content
   render UNDER the iOS clock / date / battery, so the header collides with them.
   Grow the header row + pad it down by the safe-area inset. Scoped to tall
   viewports so the 800×480 Pi kiosk (height 480) is left exactly as-is. */
@media (min-height: 600px) {
  #app { grid-template-rows: calc(50px + max(env(safe-area-inset-top), 24px)) 1fr; }
  .hdr { padding-top: max(env(safe-area-inset-top), 24px); }
}

/* ---- body: module rail + content ---- */
.body { display: grid; grid-template-columns: 116px 1fr; height: 100%; min-height: 0; }
.rail { background: var(--bg-2); border-right: 1px solid var(--line); padding: 10px 8px;
        display: flex; flex-direction: column; gap: 8px; overflow-y: auto; }
.rail .mod {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; height: 76px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--panel); color: var(--text-dim);
}
.rail .mod .ico { font-size: 24px; }
.rail .mod .lbl { font-size: 12px; font-weight: 600; }
.rail .mod .off-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-mute); }
.rail .mod.sel { border-color: var(--accent); color: var(--text);
                 box-shadow: inset 0 0 0 1px var(--accent), 0 0 16px rgba(var(--accent-rgb), .25); }
.rail .mod.offline { opacity: 0.55; }

.content { padding: 14px 16px; overflow-y: auto;
  padding-bottom: calc(14px + env(safe-area-inset-bottom)); }   /* iPad home b
/* Sliders own the touch gesture so iOS Safari can't reinterpret a drag as a
   scroll (that fired pointercancel mid-drag → snap-back / lost command). */
input[type="range"] { touch-action: none; }
.content h2 { margin: 0 0 4px; font-size: 14px; letter-spacing: 0.14em; color: var(--text-mute);
              text-transform: uppercase; font-weight: 700; }
.section + .section { margin-top: 14px; }
.muted { color: var(--text-mute); font-size: 12px; }

/* ---- scene buttons (the client surface) ---- */
.scenes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 8px; }
.scene {
  min-height: 70px; border-radius: 14px; border: 1px solid var(--line-2);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  color: var(--text); font-size: 16px; font-weight: 700; padding: 8px;
  display: flex; align-items: center; justify-content: center; text-align: center;
}
.scene:active { transform: scale(.97); }
.scene.active { border-color: var(--accent); color: var(--accent);
                box-shadow: 0 0 18px rgba(var(--accent-rgb), .35); }

/* ---- generic buttons ---- */
.btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.btn {
  min-height: 52px; min-width: 64px; padding: 8px 14px; border-radius: 11px;
  border: 1px solid var(--line-2); background: var(--panel); color: var(--text);
  font-size: 14px; font-weight: 600;
}
.btn:active { transform: scale(.97); }
.btn.accent { border-color: var(--accent); color: var(--accent); }
.btn.danger { border-color: var(--danger); color: var(--danger); }
.btn.lg { min-height: 60px; flex: 1; }
.btn[disabled] { opacity: .4; }

/* ---- routing grid (setup) ---- */
.route { overflow-x: auto; margin-top: 8px; }
table.rg { border-collapse: separate; border-spacing: 4px; }
table.rg th { font-size: 11px; color: var(--text-mute); padding: 2px 4px; }
table.rg th.o { text-align: right; padding-right: 6px; white-space: nowrap; }
.cell {
  width: 40px; height: 36px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--panel); color: var(--text-mute);
  font-size: 13px; font-variant-numeric: tabular-nums;
}
.cell.on { background: var(--accent); border-color: var(--accent); color: #04121a; font-weight: 800; }

.locked-note { margin-top: 6px; font-size: 12px; color: var(--warn); }

/* ---- audio zones (source select + volume + mute per zone) ---- */
.zones { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.zrow { display: flex; align-items: center; gap: 10px; padding: 7px 10px;
        border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.zname { width: 96px; flex: 0 0 auto; font-weight: 600; font-size: 14px;
         overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
select.zsrc { flex: 0 0 auto; min-height: 40px; max-width: 130px; border-radius: 8px;
              border: 1px solid var(--line-2); background: var(--panel-2); color: var(--text); padding: 0 8px; }
.zvol { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.zvol-top { display: flex; align-items: center; gap: 8px; }
.zvol-top input[type="range"] { flex: 1; height: 30px; accent-color: var(--accent); }
.znudge { flex: 0 0 auto; width: 40px; min-height: 40px; border-radius: 8px;
          border: 1px solid var(--line-2); background: var(--panel-2); color: var(--text);
          font-size: 21px; font-weight: 700; line-height: 1; padding: 0; }
.znudge:active { background: var(--accent); color: #fff; border-color: var(--accent); }
.znudge[disabled] { opacity: .4; }

/* ---- games: the "field" direction ----------------------------------------
   One team per line with its own crest in a FIXED-WIDTH tile: the crests never
   touch each other and the names align down the column no matter what aspect
   ratio ESPN's logos come in. The tile also gives dark crests (Tigers navy,
   Marlins black) something to sit on so they stop disappearing into the panel. */
.gm-row { --gm-ind: 67px;   /* at + gap + crest + gap: aligns tag/why with the team names */
          display: flex; align-items: center; gap: 14px; min-height: 82px;
          border: 1px solid var(--line); border-radius: 14px; background: var(--panel);
          padding: 11px 14px; margin-top: 9px; }
.gm-row.big { --gm-ind: 80px; min-height: 112px; border-color: var(--accent); border-width: 2px;
              background: linear-gradient(90deg, rgba(var(--accent-rgb), .10), transparent 55%), var(--panel-2);
              box-shadow: 0 1px 0 rgba(var(--accent-rgb), .10) inset; }
.gm-row.pinned { border-color: var(--warn); }
.gm-row.live { border-color: rgba(var(--accent-rgb), .5); }

/* when: the hour, or LIVE with a dot when it is already on */
.gm-when { display: flex; flex-direction: column; gap: 1px; width: 72px; flex: 0 0 auto; }
.gm-when b { font-size: 19px; font-variant-numeric: tabular-nums; line-height: 1.05; }
.gm-row.big .gm-when { width: 88px; }
.gm-row.big .gm-when b { font-size: 26px; color: var(--accent); }
.gm-when span { font-size: 11px; color: var(--text-mute); letter-spacing: .1em; }
/* the halo follows currentColor so it stays right under any skin's --danger */
.on-air { display: flex; align-items: center; gap: 6px; color: var(--danger);
          font-size: 15px; font-weight: 800; letter-spacing: .06em; }
.gm-row.big .on-air { font-size: 19px; }
.on-air i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: 0 0 auto;
            box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 22%, transparent); }

/* the matchup: one line per team, plus the reason it matters underneath */
.gm-match { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1 1 auto; }
.gm-row.big .gm-match { gap: 7px; }
.gm-side { display: flex; align-items: center; gap: 10px; min-width: 0; }
.gm-at { width: 13px; flex: 0 0 auto; text-align: center; font-size: 12px; color: var(--text-mute); }
.gm-row.big .gm-at { width: 16px; font-size: 14px; }
.gm-team { font-size: 17px; font-weight: 600; color: var(--text-dim); line-height: 1.15;
           overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-row.big .gm-team { font-size: 23px; font-weight: 700; letter-spacing: -.01em; }
/* an event's name IS the headline ("UFC 329: McGregor vs. Holloway 2") and there is
   only one line of teams, so let it use two lines instead of truncating it */
.gm-team.ev { white-space: normal; overflow-wrap: anywhere; display: -webkit-box;
              -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* the house team: brighter, heavier, and its tile gets a gold rim */
.gm-key { color: var(--accent-2); font-weight: 800; }
.gm-row.big .gm-key { font-weight: 800; }
.gm-side.house .gm-crest { border-color: rgba(var(--accent-rgb), .45);
                           background: rgba(var(--accent-rgb), .10); }

/* why it sits on top — the big row only, and never about which screen */
.gm-tag { font-size: 9.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
          color: var(--accent); opacity: .75; margin-bottom: 1px; padding-left: var(--gm-ind); }
.gm-tag.pin { color: var(--warn); opacity: .9; }
.gm-why { font-size: 11.5px; color: var(--text-mute); line-height: 1.3; padding-left: var(--gm-ind);
          overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: lowercase; }
.gm-row.big .gm-why { font-size: 12.5px; }

/* crest tile: fixed box, contained image, abbreviation when there is no logo */
.gm-crest { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 9px;
            background: rgba(255, 255, 255, .075); border: 1px solid rgba(255, 255, 255, .06);
            display: grid; place-items: center; overflow: hidden; }
.gm-crest img { width: 26px; height: 26px; object-fit: contain; }
.gm-row.big .gm-crest { width: 44px; height: 44px; border-radius: 11px; }
.gm-row.big .gm-crest img { width: 34px; height: 34px; }
.gm-ab { font-size: 11px; font-weight: 800; color: var(--text-mute); letter-spacing: .02em; }
.gm-row.big .gm-ab { font-size: 14px; }
.gm-crest.mini { width: 22px; height: 22px; border-radius: 6px; }
.gm-crest.mini img { width: 17px; height: 17px; }
.gm-crest.mini .gm-ab { font-size: 8.5px; }

/* league mark: which sport this is, kept away from the team crests */
.gm-lg { height: 26px; width: 34px; object-fit: contain; flex: 0 0 auto; opacity: .75;
         margin-left: auto; }
.gm-row.big .gm-lg { height: 34px; width: 44px; opacity: .85; }
.gm-sp { flex: 1 1 auto; }
/* channel + pin travel together in a fixed-width column, so the league mark lands
   on the same x down the whole list instead of shifting with each chip's width */
.gm-act { display: flex; align-items: center; gap: 10px; flex: 0 0 auto;
          min-width: 224px; justify-content: flex-end; }

/* the actionable bit: which channel/box/app the staff puts it on */
.gm-where { display: flex; align-items: center; gap: 8px; flex: 0 0 auto;
            border: 1px solid var(--line-2); border-radius: 10px; padding: 8px 12px;
            background: rgba(var(--accent-rgb), .06); }
.gm-where svg { width: 15px; height: 15px; fill: var(--accent); opacity: .8; flex: 0 0 auto; }
.gm-where span { font-size: 13px; font-weight: 700; color: var(--accent-2); white-space: nowrap; }
.gm-row.big .gm-where { padding: 10px 14px; }
.gm-row.big .gm-where svg { width: 17px; height: 17px; }
.gm-row.big .gm-where span { font-size: 15px; }

/* pin — icon only: square, comfortable touch target, state reads by color */
.gm-pin { flex: 0 0 auto; width: 48px; height: 48px; padding: 0; border-radius: 12px;
          border: 1px solid var(--line-2); background: var(--panel); color: var(--text-mute);
          display: grid; place-items: center; }
.gm-pin svg { width: 22px; height: 22px; fill: currentColor; }
.gm-pin:active { background: var(--panel-2); }
.gm-pin.on { border-color: var(--accent); color: var(--accent-2);
             background: rgba(var(--accent-rgb), .12);
             box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .35) inset; }
.gm-row.big .gm-pin { width: 54px; height: 54px; }
.gm-row.big .gm-pin svg { width: 25px; height: 25px; }
.gm-pin.sm { width: 36px; height: 36px; border-radius: 9px; }
.gm-pin.sm svg { width: 17px; height: 17px; }

/* collapsibles: more games / finished — one line each, a scan not a decision */
.gm-toggle { display: block; margin-top: 12px; background: none; border: 0; color: var(--text-dim);
             font-size: 13px; font-weight: 600; padding: 7px 0; text-align: left; }
.gm-minis { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }
.gm-mini { display: flex; align-items: center; gap: 10px; padding: 7px 10px; font-size: 13px;
           border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.gm-mini.off { opacity: .5; }
.gm-mini.pinned { border-color: var(--warn); }
.gm-mh { width: 72px; flex: 0 0 auto; color: var(--text-mute); font-variant-numeric: tabular-nums; }
.gm-mh .on-air { font-size: 12px; }
.gm-mh .on-air i { width: 6px; height: 6px;
                   box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 22%, transparent); }
.gm-mn { display: flex; align-items: center; gap: 7px; min-width: 0; flex: 1 1 auto;
         color: var(--text-dim); overflow: hidden; }
.gm-mt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-mn i { font-style: normal; color: var(--text-mute); flex: 0 0 auto; margin: 0 1px; }
.gm-mc { flex: 0 0 auto; font-size: 11.5px; color: var(--accent); font-weight: 700; }

/* footer + empty states */
.gm-bar { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.gm-upd { font-size: 11.5px; color: var(--text-mute); }
.gm-upd.stale { color: var(--warn); }
.gm-empty { padding: 24px 4px 6px; color: var(--text-dim); font-size: 16px; font-weight: 600; }
.gm-empty-sub { display: block; margin-top: 4px; color: var(--text-mute); font-size: 13px; font-weight: 400; }

/* the 7" kiosk (800px) and narrow tablets: shrink type and tighten the rows so the
   big card plus three more still fit above the fold. Never let a row wrap. */
@media (max-width: 980px) {
  /* on the 800x480 kiosk the big card plus three rows must fit without scrolling */
  .gm-row { --gm-ind: 61px; min-height: 70px; padding: 7px 12px; gap: 12px; margin-top: 6px; }
  .gm-row.big { --gm-ind: 72px; min-height: 94px; padding: 6px 12px; }
  .gm-match { gap: 2px; }
  .gm-row.big .gm-match { gap: 3px; }
  .gm-row.big .gm-team { font-size: 20px; }
  .gm-team { font-size: 16px; }
  .gm-tag { font-size: 9px; margin-bottom: 0; line-height: 1; }
  .gm-crest { width: 28px; height: 28px; border-radius: 8px; }
  .gm-crest img { width: 22px; height: 22px; }
  .gm-row.big .gm-crest { width: 36px; height: 36px; }
  .gm-row.big .gm-crest img { width: 28px; height: 28px; }
  .gm-lg { display: none; }
  .gm-act, .gm-row.big .gm-act { min-width: 0; }
}
@media (max-width: 780px) {
  .gm-row { gap: 10px; padding: 8px 11px; }
  .gm-row.big .gm-team { font-size: 19px; }
  .gm-where { padding: 7px 9px; }
  .gm-row.big .gm-where { padding: 8px 10px; }
  .gm-row.big .gm-where span { font-size: 14px; }
}

/* ---- PIN pad overlay ---- */
.overlay {
  position: fixed; inset: 0; background: rgba(2, 1, 6, .82);
  display: flex; align-items: center; justify-content: center; z-index: 30;
}
.pinbox { width: 300px; background: var(--panel); border: 1px solid var(--line-2);
          border-radius: 16px; padding: 18px; text-align: center; }
.pinbox .title { font-weight: 700; margin-bottom: 4px; }
.pinbox .dots { letter-spacing: 0.4em; font-size: 24px; height: 30px; color: var(--accent); }
.keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.key { height: 54px; border-radius: 11px; border: 1px solid var(--line-2);
       background: var(--panel-2); color: var(--text); font-size: 20px; font-weight: 700; }
.key:active { transform: scale(.96); }
.key.wide { font-size: 14px; }

/* ---- settings sheet ---- */
.sheet { width: 380px; background: var(--panel); border: 1px solid var(--line-2); border-radius: 16px; padding: 10px; }
.sheet-h { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 8px; }
.sheet-h .title { font-weight: 700; font-size: 16px; }
.sheet-h .x { width: 38px; height: 34px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--panel-2); color: var(--text-dim); }
.set-row { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
           min-height: 54px; padding: 0 14px; margin-top: 8px; border-radius: 11px;
           border: 1px solid var(--line-2); background: var(--panel-2); color: var(--text); font-size: 15px; font-weight: 600; }
.set-row .chev { color: var(--text-mute); font-size: 20px; }
.set-row.danger { color: var(--danger); border-color: var(--danger); }
.set-row .ok { color: var(--ok); }
.set-row .warn { color: var(--warn); }

/* ---- on-screen keyboard ---- */
.kbd { position: fixed; left: 0; right: 0; bottom: 0; background: var(--bg-2);
       border-top: 1px solid var(--line-2); padding: 8px 8px 10px; }
.kbd-top { display: flex; align-items: center; gap: 12px; padding: 2px 4px 8px; }
.kbd-title { color: var(--text-mute); font-size: 12px; flex: 0 0 auto; }
.kbd-val { flex: 1; min-height: 34px; padding: 6px 10px; border-radius: 8px;
           border: 1px solid var(--line-2); background: var(--panel); color: var(--text);
           font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 18px; overflow: hidden; }
.krow { display: flex; gap: 6px; justify-content: center; margin-top: 6px; }
.kk { flex: 1 1 0; min-width: 0; height: 46px; border-radius: 8px; border: 1px solid var(--line-2);
      background: var(--panel); color: var(--text); font-size: 16px; font-weight: 600; }
.kk:active { transform: scale(.96); }
.kk.wide { flex: 3; }
.kk.mod { flex: 1.4; color: var(--text-dim); }
.kk.mod.on { border-color: var(--accent); color: var(--accent); }
.kk.act { flex: 1.7; }
.kk.act.ok { border-color: var(--accent); color: var(--accent); }

[data-skin="gold"] .sheet { border-color: #7a591f; background: #15100a; }
[data-skin="gold"] .set-row, [data-skin="gold"] .sheet-h .x { border-color: #5a401b; background: rgba(26,19,9,.6); }
[data-skin="gold"] .kbd { background: #0e0b07; border-top-color: #5a401b; }
[data-skin="gold"] .kk, [data-skin="gold"] .kbd-val { border-color: #5a401b; background: rgba(26,19,9,.6); }

/* ---- toast ---- */
.toast {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  background: var(--panel-2); border: 1px solid var(--line-2); color: var(--text);
  padding: 10px 18px; border-radius: 10px; font-size: 14px; z-index: 40; opacity: 0;
  transition: opacity .15s ease; pointer-events: none;
}
.toast.show { opacity: 1; }
.toast.err { border-color: var(--danger); color: #ffd5df; }

/* ---- header brand (script venue mark) ---- */
.brand { display: flex; align-items: center; gap: 11px; min-width: 0; }
.brand-logo { height: 44px; width: auto; display: block; flex: none; }
#sleepveil { position: fixed; inset: 0; background: #000; z-index: 99999; display: none; }
.swatches { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; justify-content: center; }
.sw { width: 50px; height: 50px; border-radius: 12px; border: 2px solid var(--line-2); padding: 0; }
.sw:active { transform: scale(0.93); }
.wheelwrap { display: flex; justify-content: center; margin: 10px 0 4px; }
.wheel {
  position: relative; width: 216px; height: 216px; border-radius: 50%;
  background:
    radial-gradient(circle at center, #fff 0%, rgba(255,255,255,0) 72%),
    conic-gradient(from 0deg, red, #ff0, #0f0, #0ff, #00f, #f0f, red);
  touch-action: none;
  box-shadow: 0 0 0 2px var(--line-2), 0 10px 34px rgba(0,0,0,.55);
}
.wheelthumb {
  position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; border-radius: 50%;
  border: 3px solid #fff; box-shadow: 0 0 0 2px #000, 0 2px 6px rgba(0,0,0,.6);
  transform: translate(-50%, -50%); pointer-events: none; background: #fff;
}
.ltabs { display: flex; gap: 8px; margin: 2px 0 14px; }
.ltab { flex: 1; padding: 13px 8px; border-radius: 10px; border: 2px solid var(--line-2);
  background: var(--panel); color: var(--text-dim); font: 600 15px system-ui; letter-spacing: .03em; }
.ltab.sel { background: var(--panel-2); color: var(--text); border-color: var(--accent);
  box-shadow: 0 0 14px rgba(var(--accent-rgb), .35); }
.dimrow { display: flex; align-items: center; gap: 14px; margin-top: 6px; }
.ltab-body .section:first-child { margin-top: 0; }
.schrow { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); margin-top: 8px; }
.schinfo { display: flex; flex-direction: column; gap: 2px; }
.schinfo b { font-size: 16px; }
.schinfo span { font-size: 13px; color: var(--text-dim); }
.schx { min-width: 46px; padding: 8px 10px; }
.schform { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.schsel { height: 44px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--panel);
  color: var(--text); font-size: 16px; padding: 0 8px; }
.schsel.wide { width: 100%; }
.schtimes { display: flex; align-items: center; gap: 6px; }
.schtimes .c { color: var(--text-dim); }
.scharrow { margin: 0 8px; color: var(--text-dim); font-size: 18px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { padding: 8px 12px; border-radius: 18px; border: 1px solid var(--line-2);
  background: var(--panel); color: var(--text-dim); font-size: 14px; font-weight: 600; }
.chip.sel { background: var(--accent); border-color: var(--accent); color: #fff; }
.set-row.col { flex-direction: column; align-items: stretch; gap: 10px; }
.set-rowt { display: flex; align-items: center; justify-content: space-between; }
.brightsl { width: 100%; height: 38px; accent-color: var(--accent); }
/* ---- video matrix: floor-plan layout ---- */
.vtabs { display: flex; gap: 8px; margin-bottom: 12px; }
.floorwrap { position: relative; width: 100%; margin-top: 6px; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--line); background: var(--panel); }
.floorbg { display: block; width: 100%; height: auto; filter: invert(1) brightness(1.08); }
[data-skin="post"] .floorbg { filter: none; }
/* Vector floor plan (inline SVG, fill=currentColor): themes natively — no filters. */
.floorbg-vec { color: var(--text-dim); }
.floorbg-vec svg { display: block; width: 100%; height: auto; }
/* Dashed arc linking screens that share one matrix output (drawn under the chips). */
.floorlinks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.floorlink { fill: none; stroke: var(--accent); stroke-width: 3; stroke-dasharray: 10 8; opacity: .5; }
.hotspots { position: absolute; inset: 0; }
.hotspot { position: absolute; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  min-width: 54px; padding: 5px 8px; border-radius: 9px;
  border: 2px solid var(--line-2); background: var(--panel-2); color: var(--text-dim);
  box-shadow: 0 2px 8px rgba(0,0,0,.4); }
.hotspot b { font-size: 12px; color: var(--text); font-weight: 700; line-height: 1.1; }
.hotspot span { font-size: 10px; color: var(--text-mute); white-space: nowrap; line-height: 1.1; }
.hotspot.live { border-color: var(--accent); }
.hotspot.live span { color: var(--accent); }
.hotspot.sel { border-color: var(--accent-2); box-shadow: 0 0 14px rgba(var(--accent-rgb), .6); }
.pickpop { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 5;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: 14px; padding: 14px;
  box-shadow: 0 14px 44px rgba(0,0,0,.65); min-width: 280px; text-align: center; }
.pickpop-h { font-size: 13px; color: var(--text-dim); margin-bottom: 10px; letter-spacing: .03em; }
.dimrow .dimmer { flex: 1; height: 40px; }
.dimrow .dimval { min-width: 50px; text-align: right; font: 600 17px system-ui; color: var(--text); }
/* ---- ceiling module: slider labels (fade / speed / level) ---- */
.ceil-lbl { min-width: 56px; font-size: 14px; font-weight: 600; color: var(--text-dim); }
.brand-name {
  font-family: 'Great Vibes', 'Snell Roundhand', 'Apple Chancery', 'URW Chancery L', 'Z003', cursive;
  font-size: 30px; line-height: 1; font-weight: 400; color: var(--accent); white-space: nowrap;
}
.brand-sub { font-size: 13px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--text-dim); font-weight: 700; white-space: nowrap; }
.sep { color: var(--text-mute); opacity: .55; margin: 0 2px; }
.content h2 .on { color: var(--accent); }
.content h2 .off { color: var(--warn); }

/* ============================================================
   SKIN: gold — luxury black + gold (data-skin="gold")
   ============================================================ */
:root[data-skin="gold"] {
  --bg: #0a0908;
  --bg-2: #0e0b07;
  --panel: #131009;
  --panel-2: #1a1409;
  --line: #4a3617;
  --line-2: #7a591f;
  --text: #f6efe2;
  --text-dim: #cdbb98;
  --text-mute: #8c7c63;
  --accent: #e9b15a;
  --accent-2: #ffd98a;
  --ok: #e9b15a;
  --warn: #e0a94e;
  --danger: #e0563b;
  --accent-rgb: 233, 177, 90;
}
[data-skin="gold"] body,
[data-skin="gold"] #app {
  background: radial-gradient(150% 95% at 50% -15%, #1b130b 0%, #0a0908 55%);
}
/* wood-grain header + rail (generated — no image, works offline) */
[data-skin="gold"] .hdr {
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,0) 0 6px, rgba(0,0,0,.10) 6px 7px),
    repeating-linear-gradient(90deg, rgba(150,100,40,.05) 0 15px, rgba(60,40,16,.08) 15px 32px),
    linear-gradient(180deg, #271c0f, #150f08);
  border-bottom: 1px solid #7a591f;
  box-shadow: 0 1px 0 rgba(233,177,90,.18), 0 6px 18px rgba(0,0,0,.55);
}
[data-skin="gold"] .rail {
  background:
    repeating-linear-gradient(180deg, rgba(0,0,0,0) 0 5px, rgba(0,0,0,.12) 5px 6px),
    repeating-linear-gradient(180deg, rgba(150,100,40,.05) 0 16px, rgba(60,40,16,.09) 16px 34px),
    linear-gradient(90deg, #1d1409, #110b06);
  border-right: 1px solid #5a401b;
}
[data-skin="gold"] .brand-name { color: var(--accent-2); text-shadow: 0 0 14px rgba(233,177,90,.45); }
[data-skin="gold"] .sep { color: #7a591f; opacity: 1; }
[data-skin="gold"] .cloud { color: var(--accent); }
[data-skin="gold"] .dot.on { background: var(--accent-2); box-shadow: 0 0 9px var(--accent); }
[data-skin="gold"] .dot.off { background: #6e5a30; }
[data-skin="gold"] .clock { color: #f3ead8; }
[data-skin="gold"] .gear { border-color: #8a5f22; color: var(--accent); background: rgba(22,16,8,.5); }
[data-skin="gold"] .gear.armed { border-color: var(--accent-2); color: var(--accent-2); box-shadow: 0 0 14px rgba(233,177,90,.35); }

[data-skin="gold"] .rail .mod { background: rgba(22,16,9,.55); border-color: #3a2c14; color: var(--text-dim); }
[data-skin="gold"] .rail .mod .ico { color: var(--accent); }
[data-skin="gold"] .rail .mod.sel {
  border-color: var(--accent); color: var(--text);
  box-shadow: inset 0 0 0 1px var(--accent), 0 0 20px rgba(233,177,90,.38), inset 0 0 22px rgba(233,177,90,.08);
}
[data-skin="gold"] .rail .mod.sel .ico { color: var(--accent-2); }

[data-skin="gold"] .scene {
  border: 1px solid #b07e2e; color: #fff;
  background:
    radial-gradient(135% 120% at 50% 135%, rgba(233,177,90,.20), rgba(0,0,0,0) 60%),
    linear-gradient(180deg, #150f06, #0b0906);
  box-shadow: inset 0 1px 0 rgba(255,221,138,.12), inset 0 -14px 28px rgba(233,177,90,.10), 0 5px 16px rgba(0,0,0,.55);
}
[data-skin="gold"] .scene:active { box-shadow: inset 0 0 22px rgba(233,177,90,.28); }
[data-skin="gold"] .scene.active {
  border-color: var(--accent-2); color: var(--accent-2);
  box-shadow: 0 0 22px rgba(233,177,90,.5), inset 0 -16px 30px rgba(233,177,90,.18);
}

[data-skin="gold"] .btn { border-color: #5a401b; background: rgba(22,16,9,.55); color: var(--text); }
[data-skin="gold"] .btn.accent { border-color: var(--accent); color: var(--accent); }
[data-skin="gold"] .btn.danger { border-color: var(--danger); color: #ffb59f; }
[data-skin="gold"] .cell { border-color: #4a3617; background: rgba(22,16,9,.5); color: var(--text-mute); }
[data-skin="gold"] .cell.on { background: var(--accent); border-color: var(--accent-2); color: #1a1206; }
[data-skin="gold"] .pinbox { border-color: #7a591f; background: #15100a; }
[data-skin="gold"] .pinbox .dots { color: var(--accent-2); }
[data-skin="gold"] .key { border-color: #5a401b; background: rgba(26,19,9,.7); }
[data-skin="gold"] .toast { border-color: #7a591f; }
[data-skin="gold"] .zrow { border-color: #3a2c14; background: rgba(22,16,9,.5); }
[data-skin="gold"] select.zsrc, [data-skin="gold"] .zmute { border-color: #5a401b; background: rgba(26,19,9,.6); }
[data-skin="gold"] .zvol-top input[type="range"] { accent-color: var(--accent); }
[data-skin="gold"] .vu { background: rgba(233,177,90,.10); }

/* ============ Skin: steel (POST) — brushed metal + blue glow, glassy cards ============ */
/* Premium but clean: flat dark gradients, no perforated-metal / noise textures. */
:root[data-skin="steel"] {
  --bg: #171d26; --bg-2: #1d2530; --panel: #29313e; --panel-2: #323c4a;
  --line: #3d4959; --line-2: #4f5f74;
  --text: #f1f6fc; --text-dim: #c8d4e2; --text-mute: #8c9bae;
  --accent: #3d9bff; --accent-2: #9ecbff; --ok: #00e08a; --warn: #ffb84d; --danger: #ff6374;
  --accent-rgb: 61, 155, 255;
}
[data-skin="steel"] body,
[data-skin="steel"] #app {
  background: radial-gradient(130% 100% at 50% -12%, #3b4756 0%, #262f3b 72%);
  color: var(--text);
}
/* brushed-steel header: one clean gradient + a thin top sheen */
[data-skin="steel"] .hdr {
  background: linear-gradient(180deg, #45525f 0%, #343f4d 56%, #28323e 100%);
  border-bottom: 1px solid #4c5a6a;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 4px 16px rgba(0,0,0,.35);
}
[data-skin="steel"] .brand { display: flex; align-items: baseline; gap: 9px; }
[data-skin="steel"] .brand-name {
  font-family: -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
  font-size: 26px; font-weight: 800; letter-spacing: .04em; color: #f4f8ff; text-shadow: none;
}
[data-skin="steel"] .brand-sub { font-size: 16px; font-weight: 500; color: var(--text-dim); }
[data-skin="steel"] .brand-sub::before { content: '— '; color: var(--text-mute); }
[data-skin="steel"] .clock { color: #e3ebf6; }
[data-skin="steel"] .cloud { color: var(--text-dim); }
[data-skin="steel"] .dot.on { background: var(--accent); box-shadow: 0 0 9px var(--accent); }
[data-skin="steel"] .sep { color: #46566c; }
[data-skin="steel"] .gear {
  border-color: var(--accent); color: var(--accent);
  background: rgba(20,28,40,.55); box-shadow: 0 0 14px rgba(var(--accent-rgb), .3);
}
[data-skin="steel"] .gear.armed { border-color: var(--accent-2); color: var(--accent-2); box-shadow: 0 0 16px rgba(var(--accent-rgb), .5); }
/* rail: clean dark, no perforation */
[data-skin="steel"] .rail { background: linear-gradient(180deg, #2b3540, #232c37); border-right: 1px solid var(--line); }
[data-skin="steel"] .rail .mod {
  background: linear-gradient(180deg, rgba(54,66,82,.75), rgba(38,46,58,.75));
  border-color: #43505f; color: var(--text-dim);
}
[data-skin="steel"] .rail .mod .ico { color: var(--accent); }
[data-skin="steel"] .rail .mod.sel {
  border-color: var(--accent); color: #fff;
  background: linear-gradient(180deg, rgba(42,68,104,.6), rgba(20,32,50,.6));
  box-shadow: inset 0 0 0 1px var(--accent), 0 0 20px rgba(var(--accent-rgb), .45);
}
/* glassy scene cards: label bottom-left + a short blue underline */
[data-skin="steel"] .scenes { gap: 12px; }
[data-skin="steel"] .scene {
  min-height: 104px; padding: 16px 16px 30px;
  background: linear-gradient(155deg, rgba(134,160,194,.45), rgba(56,70,90,.46));
  border: 1px solid rgba(176,200,232,.30); color: #f3f7fc;
  font-size: 19px; font-weight: 600;
  align-items: flex-end; justify-content: flex-start; text-align: left;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 6px 16px rgba(0,0,0,.34);
  position: relative;
}
[data-skin="steel"] .scene::after {
  content: ''; position: absolute; left: 16px; bottom: 16px;
  width: 34px; height: 3px; border-radius: 2px; background: var(--accent);
  box-shadow: 0 0 8px rgba(var(--accent-rgb), .6);
}
[data-skin="steel"] .scene.active {
  border-color: var(--accent); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 22px rgba(var(--accent-rgb), .45);
}
[data-skin="steel"] .btn { border-color: var(--line-2); background: rgba(26,34,48,.6); color: var(--text); }
[data-skin="steel"] .btn.danger { border-color: var(--danger); color: #ffb3bd; }
[data-skin="steel"] .cell { border-color: var(--line-2); background: rgba(26,34,48,.5); color: var(--text-mute); }
[data-skin="steel"] .cell.on { background: var(--accent); border-color: var(--accent-2); color: #04121f; }

/* ============ Skin: post (official) — LIGHT theme + official POST blue ============ */
:root[data-skin="post"] {
  --bg: #eceef1; --bg-2: #f5f6f8; --panel: #ffffff; --panel-2: #eef1f5;
  --line: #dde2e9; --line-2: #c7ced8;
  --text: #1b2330; --text-dim: #5b6776; --text-mute: #98a1ad;
  --accent: #1e23ca; --accent-2: #4348de; --ok: #15a06a; --warn: #cc8400; --danger: #e23b54;
  --accent-rgb: 30, 35, 202;
}
[data-skin="post"] body,
[data-skin="post"] #app { background: #eceef1; color: var(--text); }
[data-skin="post"] .hdr { background: #ffffff; border-bottom: 1px solid #e2e6ec; box-shadow: 0 2px 10px rgba(20,30,50,.04); }
[data-skin="post"] .brand { display: flex; align-items: baseline; gap: 9px; }
[data-skin="post"] .brand-name {
  font-family: -apple-system, "Segoe UI", Roboto, Arial, system-ui, sans-serif;
  font-size: 27px; font-weight: 800; letter-spacing: .01em; color: var(--accent); text-shadow: none;
}
[data-skin="post"] .brand-sub { font-size: 16px; font-weight: 500; color: var(--text-dim); }
[data-skin="post"] .brand-sub::before { content: '— '; color: var(--text-mute); }
[data-skin="post"] .clock { color: #25303f; }
[data-skin="post"] .cloud { color: var(--text-dim); }
[data-skin="post"] .dot.on { background: var(--accent); box-shadow: 0 0 8px rgba(var(--accent-rgb),.4); }
[data-skin="post"] .sep { color: #c7ced8; }
[data-skin="post"] .gear { border-color: #d3d9e1; color: #3a4150; background: #f6f8fb; }
[data-skin="post"] .gear.armed { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 12px rgba(var(--accent-rgb),.25); }
[data-skin="post"] .rail { background: #e7eaee; border-right: 1px solid #dce1e8; }
[data-skin="post"] .rail .mod { background: #ffffff; border-color: #dde2e9; color: #3c4654; box-shadow: 0 1px 3px rgba(20,30,50,.05); }
[data-skin="post"] .rail .mod .ico { color: #5b6776; }
[data-skin="post"] .rail .mod.sel { background: #e9ecff; border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 4px 14px rgba(var(--accent-rgb),.16); }
[data-skin="post"] .rail .mod.sel .ico { color: var(--accent); }
[data-skin="post"] .content h2 { color: #8a93a0; }
[data-skin="post"] .content h2 .on { color: var(--accent); }
[data-skin="post"] .scenes { gap: 12px; }
[data-skin="post"] .scene {
  min-height: 104px; padding: 16px 16px 30px;
  background: #ffffff; border: 1px solid #e0e5ec; color: #1b2330;
  font-size: 19px; font-weight: 600;
  align-items: flex-end; justify-content: flex-start; text-align: left;
  box-shadow: 0 4px 14px rgba(20,30,50,.06); position: relative;
}
[data-skin="post"] .scene::after {
  content: ''; position: absolute; left: 16px; bottom: 16px;
  width: 34px; height: 3px; border-radius: 2px; background: var(--accent);
}
[data-skin="post"] .scene.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 6px 18px rgba(var(--accent-rgb),.16); }
[data-skin="post"] .btn { border-color: #d3d9e1; background: #ffffff; color: #28313f; }
[data-skin="post"] .btn.danger { border-color: var(--danger); color: var(--danger); }
[data-skin="post"] .cell { border-color: #d3d9e1; background: #f4f6f9; color: #8a93a0; }
[data-skin="post"] .cell.on { background: var(--accent); border-color: var(--accent); color: #fff; }
[data-skin="post"] .sw { border-color: #d3d9e1; }
[data-skin="post"] .wheel { box-shadow: 0 0 0 2px #d3d9e1, 0 8px 26px rgba(20,30,50,.12); }
[data-skin="post"] .ltab { background: #ffffff; border-color: #dde2e9; color: #5b6776; }
[data-skin="post"] .ltab.sel { background: #e9ecff; color: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
[data-skin="post"] .dimval { color: #25303f; }
/* overlays on light */
[data-skin="post"] .sheet, [data-skin="post"] .pinbox { background: #ffffff; border-color: #dde2e9; color: var(--text); }
[data-skin="post"] .set-row, [data-skin="post"] .sheet-h .x { border-color: #dde2e9; background: #f4f6f9; }
[data-skin="post"] .pinbox .dots { color: var(--accent); }
[data-skin="post"] .key, [data-skin="post"] .kk, [data-skin="post"] .kbd-val { background: #f4f6f9; border-color: #d3d9e1; color: var(--text); }
[data-skin="post"] .kbd { background: #eceef1; border-top-color: #d3d9e1; }
[data-skin="post"] .toast { background: #ffffff; border-color: #dde2e9; color: var(--text); }

/* ---- Spotify module: now-playing + transport ---- */
.sp-now { display: flex; gap: 16px; align-items: flex-start; margin-top: 10px; }
.sp-art { width: 120px; height: 120px; flex: 0 0 auto; border-radius: 10px; object-fit: cover; }
.sp-art-empty { display: flex; align-items: center; justify-content: center; font-size: 42px;
  color: var(--muted, #888); background: rgba(128,128,128,.12); border: 1px solid rgba(128,128,128,.28); }
.sp-now-info { flex: 1 1 auto; min-width: 0; }
.sp-track { font-size: 20px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-artist { opacity: .7; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-dev { margin-top: 4px; font-size: 12px; color: var(--accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-transport { display: flex; gap: 10px; margin-top: 14px; }
.sp-transport .btn { flex: 0 0 auto; min-width: 76px; font-size: 22px; }
.sp-transport .sp-play { min-width: 108px; }
.sp-vol { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.sp-vol input[type="range"] { flex: 1 1 auto; }

/* ============================================================
   PHONES (narrow portrait) — the panel was sized for the 800x480
   Pi kiosk and iPads; on a phone the 116px rail + 3-col scene grid
   overflow. Compact rail (icons only) + 2-col grid. Additive: no
   effect at kiosk/iPad widths.
   ============================================================ */
@media (max-width: 560px) {
  .body { grid-template-columns: 64px 1fr; }
  .rail { padding: 8px 5px; }
  .rail .mod { height: 56px; gap: 2px; border-radius: 10px; }
  .rail .mod .ico { font-size: 20px; }
  .rail .mod .lbl { display: none; }
  .hdr { gap: 8px; padding: 0 10px; min-width: 0; }
  .brand-name { font-size: 24px; }
  .brand-sub { display: none; }        /* POST alone carries the brand on a phone */
  .hdr .clock { white-space: nowrap; font-size: 13px; }
  .cloud span { display: none; }       /* keep the dot, drop the 'online' word */
  .content { padding: 10px 10px; }
  .scenes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .scene { min-height: 64px; font-size: 15px; }
  .dimrow .dimval { min-width: 44px; font-size: 15px; }
  .ceil-lbl { min-width: 44px; font-size: 13px; }
}