/* StreamServer GUI. Visual language from Dsm.Gui (App.* brushes in Themes/Light.xaml and Dark.xaml), layout tuned for stream hosting. */
:root {
  --window: #F4F4F4; --panel: #FFFFFF; --control: #FDFDFD; --hover: #E3EDF9; --fg: #1B1B1B; --subtle: #666666;
  --border: #C8C8C8; --accent: #0B6EDD; --gridhead: #EAEAEA; --rowalt: #F7F7F7; --selection: #CFE4FA; --running: #1B7A2F;
  --splitter: #DDDDDD; --transitional: #D98E04; --stale: #E05252; --green: #5FD068;
  --chip-on-bg: #DDF3E2; --chip-on-fg: #1B7A2F; --chip-on-border: #8FD6A3;
}
:root[data-theme="dark"] {
  --window: #1F1F1F; --panel: #262626; --control: #2D2D2D; --hover: #3A3F47; --fg: #E6E6E6; --subtle: #9A9A9A;
  --border: #454545; --accent: #4DA3FF; --gridhead: #333333; --rowalt: #2A2A2A; --selection: #2F4A6B; --running: #5FD068;
  --splitter: #3A3A3A;
  --chip-on-bg: #1E3A24; --chip-on-fg: #5FD068; --chip-on-border: #5FD068;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--window); color: var(--fg); font: 12px/1.35 "Segoe UI", system-ui, -apple-system, sans-serif; overflow: hidden; }
h2 { margin: 0 0 10px; font-size: 14px; font-weight: 600; }
code { background: var(--control); border: 1px solid var(--border); padding: 1px 5px; border-radius: 3px; font-size: 11.5px; word-break: break-all; }
.subtle { color: var(--subtle); }
.semibold { font-weight: 600; }
.hidden { display: none !important; }
.empty { padding: 14px; color: var(--subtle); }
.grow { flex: 1; }

/* window chrome */
.window { display: flex; flex-direction: column; height: 100vh; min-width: 960px; }
.titlebar { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; background: var(--panel); border-bottom: 1px solid var(--border); flex: none; }
.titlebar .appicon { width: 16px; height: 16px; }
.titlebar .title-right { margin-left: auto; color: var(--subtle); }
body.desktop .titlebar { display: none; }
.banner { margin: 8px 8px 0; background: #FFF4E0; border: 1px solid #D98E04; color: #7A4D00; padding: 6px 10px; border-radius: 3px; flex: none; }
:root[data-theme="dark"] .banner { background: #3A2A0A; color: #FCD34D; }

/* stat cards + clock */
.row-cards { display: flex; align-items: flex-start; margin: 8px 8px 2px; gap: 8px; flex: none; }
.cards { display: flex; gap: 8px; flex: 1; min-width: 0; }
.card { display: grid; grid-template-columns: 5px 1fr; flex: 1 1 140px; min-width: 130px; max-width: 280px; background: var(--panel); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.card .accent { background: #8A8A8A; }
.card .body { padding: 6px 10px; min-width: 0; }
.card .k { font-size: 11px; color: var(--subtle); text-transform: uppercase; white-space: nowrap; }
.card .v { font-size: 18px; font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .v small { font-size: 12px; font-weight: 400; color: var(--subtle); }
.card .sub { font-size: 10px; color: var(--subtle); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .bar { height: 4px; background: var(--control); margin-top: 4px; border-radius: 2px; overflow: hidden; }
.card .bar > span { display: block; height: 100%; width: 0; transition: width .4s; }
.clock { margin: 0 4px 0 auto; text-align: right; align-self: center; flex: none; }
.clock .time { font: 700 26px/1.1 Consolas, "Cascadia Mono", ui-monospace, monospace; }
.clock .date { font-size: 11px; color: var(--subtle); }

/* toolbar */
.cards { margin: 8px 8px 2px; }

/* compact + hidden stat-cards modes */
.cards-wrap { position: relative; display: flex; align-items: stretch; }
.cards-toggle { position: absolute; top: 2px; right: 10px; width: 20px; height: 18px; padding: 0; font-size: 10px; line-height: 18px; background: var(--control); border: 1px solid var(--border); border-radius: 3px; color: var(--subtle); cursor: pointer; z-index: 2; }
.cards-toggle:hover { color: var(--fg); }
.cards.compact { gap: 4px; margin: 4px 8px 2px; }
.cards.compact .card { flex: 0 0 auto; min-width: 0; max-width: none; grid-template-columns: 3px auto; }
.cards.compact .card .body { padding: 2px 8px; display: flex; align-items: center; gap: 6px; }
.cards.compact .card .k { font-size: 10px; text-transform: uppercase; }
.cards.compact .card .v { font-size: 12px; font-weight: 600; }
.cards.compact .card .v small { font-size: 10px; }
.cards.compact .card .sub, .cards.compact .card .bar { display: none; }
.cards.hidden-mode { display: none; }
.cards-wrap.stub { min-height: 20px; }
.sep { width: 1px; height: 20px; background: var(--border); margin: 0 4px; flex: none; }
.sel-label { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pane-bar label.inline { flex-direction: row; align-items: center; gap: 4px; font-weight: 400; color: var(--subtle); }
.pane-bar label.inline select { width: auto; max-width: 180px; padding: 2px 4px; font-size: 11.5px; color: var(--fg); }
.pane-bar label.target.targeted select { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }   /* an existing channel is the target */
.t-phone { display: none; }
button { background: var(--control); color: var(--fg); border: 1px solid var(--border); border-radius: 3px; padding: 5px 10px; font: inherit; cursor: pointer; white-space: nowrap; }
button:hover { background: var(--hover); }
button:disabled { opacity: .45; cursor: default; }
button:disabled:hover { background: var(--control); }
button.action { color: #fff; font-weight: 600; border-color: transparent; width: 112px; }
button.action:hover { filter: brightness(1.12); }
button.action:disabled:hover { filter: none; }
button.primary { background: var(--accent); color: #fff; border-color: transparent; }
button.sm { padding: 2px 8px; font-size: 11.5px; }
button.danger:hover { background: #FDEAEA; border-color: var(--stale); color: var(--stale); }
.busy { margin-left: 12px; font-style: italic; color: #FF8C00; }

/* pill switches */
.flags { display: flex; align-items: center; gap: 8px; margin: 2px 8px 6px 10px; flex-wrap: wrap; flex: none; }
.flags .sep { margin-left: 14px; }
.pill { display: inline-flex; align-items: center; gap: 7px; background: var(--control); border: 1px solid var(--border); border-radius: 12px; padding: 4px 9px; cursor: pointer; user-select: none; }
.pill:hover { background: var(--hover); }
.pill input { position: absolute; opacity: 0; width: 0; height: 0; }
.pill .track { position: relative; width: 34px; height: 16px; border-radius: 8px; background: var(--border); transition: background .15s; }
.pill .dot { position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; transition: left .15s; }
.pill input:checked ~ .track { background: var(--green); }
.pill input:checked ~ .track .dot { left: 20px; }
.pill:has(input:checked) { border-color: var(--green); }
.pill.disabled { opacity: .4; pointer-events: none; }

/* primary navigation: Channels | Streams | Schedule, one full-width view at a time */
.main-tabstrip { display: flex; align-items: flex-end; margin: 6px 8px 0; gap: 3px; flex: none; }
.main-tab { background: var(--control); border: 1px solid var(--border); border-bottom: 0; border-radius: 4px 4px 0 0;
  padding: 6px 16px; font-size: 12.5px; font-weight: 600; color: var(--subtle); margin-bottom: -1px; position: relative; }
.main-tab:hover { color: var(--fg); background: var(--hover); }
.main-tab.active { background: var(--panel); color: var(--accent); z-index: 1; }
.main-tab .tabcount { font-weight: 400; color: var(--subtle); margin-left: 7px; font-size: 11px; }
.main-tabstrip .busy { margin: 0 0 6px 12px; }
.main-tabstrip > .sm { margin-bottom: 4px; }
.main { display: flex; flex: 1; min-height: 160px; margin: 0 8px; }
.main > .main-panel { display: none; }
.main > .main-panel.active { display: flex; }
.pane { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--panel); border: 1px solid var(--border); flex: 1; }
/* bars at the top of a view: .tools = actions for the view, .filters = search and chips */
.pane-bar { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-bottom: 1px solid var(--border); flex-wrap: wrap; row-gap: 4px; flex: none; }
.pane-bar.tools { background: var(--gridhead); }
.pane-bar input { width: 220px; }
.pane-bar select { width: auto; max-width: 190px; padding: 2px 6px; font-size: 11.5px; }
.pane-bar .meta { white-space: nowrap; }
.toolbar-group { display: flex; align-items: center; gap: 4px; min-width: 0; }
label.row { flex-direction: row; align-items: flex-start; gap: 8px; font-weight: 600; }
label.row input { width: auto; margin-top: 3px; }
label.row span small { display: block; }
.gridwrap { flex: 1; min-height: 0; overflow: auto; }

/* data grid */
.grid { width: 100%; border-collapse: collapse; }
.grid th { position: sticky; top: 0; z-index: 1; background: var(--gridhead); color: var(--fg); text-align: left; font-weight: 600; padding: 5px 8px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); white-space: nowrap; }
.grid th.n, .grid td.n { text-align: right; font-variant-numeric: tabular-nums; }
.grid td .onair { white-space: nowrap; }
/* Fixed widths for the columns whose text ticks every poll (status, viewers, bitrate, uptime), so
   the table does not re-flow its columns as "9.6 Mb/s" becomes "10.2 Mb/s". */
#grid th:nth-child(5) { min-width: 150px; }
#grid th:nth-child(7) { min-width: 64px; }
#grid th:nth-child(8) { min-width: 88px; }
#grid th:nth-child(9) { min-width: 76px; }
.grid td { padding: 4px 6px; border-bottom: 1px solid var(--border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px; }
.grid tbody tr:nth-child(even) { background: var(--rowalt); }
.grid tbody tr { cursor: default; }
.grid tbody tr.selected { background: var(--selection) !important; }
.grid tbody tr.running { color: var(--running); }
.grid tbody tr.transitional { color: var(--transitional); font-style: italic; }
.grid tbody tr.err { color: var(--stale); }
.grid td .sub { color: var(--subtle); font-size: 11px; margin-left: 6px; }
.grid tbody tr.running td .sub, .grid tbody tr.err td .sub { color: inherit; opacity: .75; }
.grid th.c, .grid td.c { width: 30px; text-align: center; padding: 2px 4px; }
.grid input[type=checkbox] { width: auto; margin: 0; vertical-align: middle; }
.bulk { display: inline-flex; align-items: center; gap: 4px; font-weight: 400; }
.switch { display: inline-flex; cursor: pointer; vertical-align: middle; position: relative; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track { position: relative; width: 30px; height: 15px; border-radius: 8px; background: var(--border); transition: background .15s; }
.switch .dot { position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 50%; background: #fff; transition: left .15s; }
.switch input:checked ~ .track { background: var(--green); }
.switch input:checked ~ .track .dot { left: 17px; }
.logo-pick { border: 1px solid var(--border); padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.logo-pick .lp-title { font-weight: 600; }
.logo-pick .lp-title small { font-weight: 400; color: var(--subtle); margin-left: 6px; }
.logo-pick .lp-upload { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.logo-pick .lp-upload input[type=file] { width: auto; flex: 1; }
.logo-pick .chlogo { height: 24px; max-width: 80px; margin-left: 8px; }
.logo-tab { display: grid; grid-template-columns: 260px 1fr; gap: 14px; padding: 12px; align-items: start; }
.logo-tab h3 { margin: 0 0 8px; font-size: 13px; }
.logo-tab .tile { background: #1b2230; border: 1px solid var(--border); border-radius: 6px; height: 150px; display: flex; align-items: center; justify-content: center; padding: 12px; }
.logo-tab .tile img { max-height: 110px; max-width: 220px; object-fit: contain; }
.logo-tab .tile .none { color: #9aa4b2; }
.logo-tab .inuse { margin-top: 6px; color: var(--subtle); font-size: 11.5px; }
.logo-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.logo-slot { border: 1px solid var(--border); padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.logo-slot.active { border-color: var(--green); box-shadow: inset 3px 0 0 var(--green); }
.logo-slot .prev { height: 64px; background: var(--control); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; }
.logo-slot .prev img { max-height: 52px; max-width: 160px; object-fit: contain; }
.logo-slot .row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.logo-slot input[type=file] { width: auto; flex: 1; min-width: 120px; }
.chlogo { height: 18px; max-width: 52px; object-fit: contain; vertical-align: middle; margin-right: 7px; background: #fff; border-radius: 2px; padding: 1px 2px; }
.onair { display: inline-flex; align-items: center; gap: 6px; }
.onair .led { width: 9px; height: 9px; border-radius: 50%; background: var(--subtle); flex: none; }
.onair .led.on { background: var(--green); box-shadow: 0 0 6px var(--green); }
.onair .led.starting { background: var(--transitional); animation: pulse 1s infinite; }
.onair .led.err { background: var(--stale); }
.onair .led.off { background: var(--border); }
.onair .led.queued { background: #4EA7FF; box-shadow: 0 0 5px #4EA7FF; }

/* streams view */
.chips { display: flex; gap: 3px; flex-wrap: wrap; }
.chip { padding: 2px 9px; border-radius: 10px; font-size: 11px; }
.chip.active { background: var(--chip-on-bg); border-color: var(--chip-on-border); color: var(--chip-on-fg); font-weight: 700; }
.progress { flex: 0 1 260px; min-width: 140px; height: 16px; background: var(--control); border: 1px solid var(--border); border-radius: 3px; position: relative; overflow: hidden; }
.progress .bar { height: 100%; width: 0; background: #4472E0; transition: width .4s; }
.progress .label { position: absolute; inset: 0; font-size: 11px; display: flex; align-items: center; justify-content: center; }
.disc-tree { overflow: auto; flex: 1; min-height: 0; }
.pres > summary { padding: 5px 8px; cursor: pointer; display: flex; align-items: center; gap: 8px; list-style: none; font-weight: 600; background: var(--gridhead); border-bottom: 1px solid var(--border); position: sticky; top: 0; }
.pres > summary::-webkit-details-marker { display: none; }
.pres > summary::before { content: "\25B8"; color: var(--subtle); width: 10px; }
.pres[open] > summary::before { content: "\25BE"; }
.pres > summary .counts { margin-left: auto; font-weight: 400; color: var(--subtle); white-space: nowrap; }
.pres > summary .perr { color: var(--stale); font-weight: 400; }
.stream { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 3px 8px 3px 20px; border-bottom: 1px solid var(--border); }
.stream:nth-child(even) { background: var(--rowalt); }
.stream.playing { color: var(--running); }
.stream .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stream .h { font-size: 11px; color: var(--subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stream .h .e { color: var(--stale); }
.stream .acts { display: flex; gap: 4px; align-items: center; }
.stream .acts select { width: auto; padding: 2px 4px; font-size: 11px; max-width: 150px; }
.stream .acts a.sm { padding: 0 5px; text-decoration: none; font-size: 13px; line-height: 17px; color: var(--accent); }
.stream .acts a.sm:hover { background: var(--hover); }
.stream .hd { display: inline-block; margin-left: 6px; padding: 0 4px; background: var(--control); border: 1px solid var(--border); border-radius: 2px; font-size: 9.5px; font-weight: 600; color: var(--subtle); vertical-align: middle; }
.stream .live { display: inline-block; margin-left: 6px; padding: 0 5px; border-radius: 2px; background: var(--stale); color: #fff; font-size: 9.5px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; vertical-align: middle; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--subtle); }
.dot.ok { background: var(--green); } .dot.failed { background: var(--stale); } .dot.checking { background: var(--transitional); animation: pulse 1s infinite; }
.dot.hub { background: #4EA7FF; }
.stream.hub .t { color: var(--subtle); }
@keyframes pulse { 50% { opacity: .3; } }

/* Channels & events: one entry per channel, its streams inside */
.item { border-bottom: 1px solid var(--border); }
.item > summary { display: grid; grid-template-columns: 12px 46px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 4px 8px; cursor: pointer; list-style: none; }
.item > summary::-webkit-details-marker { display: none; }
.item:nth-child(even) > summary { background: var(--rowalt); }
.item > summary:hover { background: var(--hover); }
.item .ilogo { width: 46px; height: 28px; object-fit: contain; background: #fff; border-radius: 2px; padding: 1px; }
.item .ilogo.event { object-fit: cover; background: var(--gridhead); }
.item .ilogo.ph { display: inline-block; background: var(--gridhead); }
.item .ibody { min-width: 0; }
.item .iname { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item .iname .badge { margin-left: 6px; vertical-align: middle; }
.item .imeta { font-size: 11px; color: var(--subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item .iacts { display: flex; gap: 4px; align-items: center; }
.item .opts { padding: 2px 8px 6px 74px; }
.opt { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 6px; align-items: center; padding: 3px 0; border-top: 1px dashed var(--border); font-size: 11.5px; }
.opt .ol { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opt .srcname { font-weight: 600; }
.progress .stop { margin-left: 8px; }
button.stop { color: var(--stale); border-color: var(--stale); }
.opt .meas { font-size: 10.5px; color: var(--subtle); margin-top: 2px; white-space: normal; line-height: 1.5; }
.opt .meas b { color: var(--fg); font-weight: 600; }
.opt .good { color: var(--running); }
.opt.best { background: var(--chip-on-bg); }
.badge.best { background: var(--running); color: #fff; margin-right: 4px; }
.opt .acts { display: flex; gap: 3px; }
.opt .acts .sm { padding: 1px 6px; font-size: 10.5px; }
.opt .acts a.sm { padding: 0 5px; text-decoration: none; font-size: 13px; line-height: 17px; color: var(--accent); }
.badge { display: inline-block; padding: 1px 6px; border-radius: 2px; font-size: 10px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; }
.badge.live { background: var(--stale); color: #fff; animation: pulse 1.5s infinite; }
.badge.replay { background: var(--running); color: #fff; }        /* a re-run: static, never pulses */
.badge.up { background: var(--control); color: var(--subtle); border: 1px solid var(--border); }
.chip .counts { font-weight: 400; opacity: .75; margin-left: 2px; }
.settings-h { margin: 10px 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--subtle); }
.settings-note { margin: 0 0 6px; }
/* phone navigation (hidden on wide screens and in the desktop window) */
.mnav { display: none; }
@media (max-width: 760px) {
  body:not(.desktop) .mnav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--panel); border-top: 1px solid var(--border);
    padding: 4px 0 calc(4px + env(safe-area-inset-bottom)); }
  .mnav button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 48px; background: none; border: 0; color: var(--subtle); font-size: 10.5px; padding: 4px 0; border-radius: 0; }
  .mnav button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .mnav button.active { color: var(--accent); }
  body:not(.desktop) { font-size: 14px; }
  body:not(.desktop) .window { min-width: 0; height: 100dvh; padding-bottom: calc(60px + env(safe-area-inset-bottom)); box-sizing: border-box; }
  body:not(.desktop) .titlebar { height: 40px; }
  body:not(.desktop) .titlebar .title-right { font-size: 11px; max-width: 45vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body:not(.desktop) .cards-wrap { max-width: 100vw; overflow: hidden; }
  body:not(.desktop) .cards { gap: 6px; margin: 6px 8px 2px; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; max-width: calc(100vw - 16px); -webkit-overflow-scrolling: touch; }
  body:not(.desktop) .card { flex: 0 0 auto; min-width: 128px; max-width: none; }
  body:not(.desktop) .cards-toggle { display: none; }
  body:not(.desktop) .main-tabstrip { display: none; }
  body:not(.desktop) .main { margin: 0; min-height: 0; }
  body:not(.desktop) .pane { border-left: 0; border-right: 0; }
  body:not(.desktop) .tabs { display: none; margin: 0; height: auto; flex: 1; min-height: 0; }
  body:not(.desktop).m-more .main, body:not(.desktop).m-more .splitter { display: none; }
  body:not(.desktop).m-more .tabs { display: flex; }
  body:not(.desktop) .tabs .tabstrip { overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
  body:not(.desktop) .tab { padding: 8px 14px; font-size: 13px; }
  body:not(.desktop) .splitter { display: none; }
  body:not(.desktop) .statusbar { display: none; }
  body:not(.desktop) .pane-bar { padding: 6px 8px; row-gap: 6px; }
  body:not(.desktop) .pane-bar input, body:not(.desktop) .pane-bar select { width: 100%; box-sizing: border-box; font-size: 16px; padding: 7px 9px; }
  body:not(.desktop) .pane-bar, body:not(.desktop) .pane, body:not(.desktop) .main-panel { max-width: 100vw; box-sizing: border-box; }
  body:not(.desktop) .pane-bar > * { max-width: 100%; }
  body:not(.desktop) .pane-bar .seg { flex: 0 0 auto; }
  body:not(.desktop) .progress { flex: 1 1 100%; }
  body:not(.desktop) .pane-bar label.inline { width: 100%; }
  body:not(.desktop) .pane-bar .chips { flex: 1 1 100%; min-width: 0; width: 100%; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
  body:not(.desktop) .pane-bar .toolbar-group { min-width: 0; flex-wrap: wrap; }
  body:not(.desktop) .pane-bar .meta, body:not(.desktop) .pane-bar .subtle { white-space: normal; }
  body:not(.desktop) .main > .main-panel { width: 100%; }
  body:not(.desktop) .chip { padding: 6px 12px; font-size: 13px; flex: 0 0 auto; }
  body:not(.desktop) button, body:not(.desktop) button.sm { min-height: 34px; font-size: 13px; }
  body:not(.desktop) input, body:not(.desktop) select, body:not(.desktop) textarea { font-size: 16px; }
  body:not(.desktop) .grid th:nth-child(1), body:not(.desktop) .grid td:nth-child(1),
  body:not(.desktop) .grid th:nth-child(5), body:not(.desktop) .grid td:nth-child(5),
  body:not(.desktop) .grid th:nth-child(7), body:not(.desktop) .grid td:nth-child(7),
  body:not(.desktop) .grid th:nth-child(8), body:not(.desktop) .grid td:nth-child(8),
  body:not(.desktop) .grid th:nth-child(9), body:not(.desktop) .grid td:nth-child(9) { display: none; }
  body:not(.desktop) .grid td { white-space: normal; max-width: none; padding: 8px 6px; }
  /* The On air, Viewers, Bitrate and Uptime columns are hidden on a phone: the same status sits
     under the channel name instead, so nothing needs sideways scrolling. */
  body:not(.desktop) .m-onair { display: block; margin-top: 3px; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
  body:not(.desktop) .m-onair .onair { white-space: nowrap; }
  body:not(.desktop) .m-onair .sub { color: var(--subtle); display: block; margin-left: 0; overflow: hidden; text-overflow: ellipsis; }   /* stats on their own fixed line: no re-wrapping as the numbers tick */
  body:not(.desktop) .rowmenu { display: inline-flex; float: right; min-height: 30px; padding: 0 8px; margin: -2px 0 0 6px; font-size: 16px; line-height: 1; }
  body:not(.desktop) .item > summary { grid-template-columns: 10px 32px minmax(0, 1fr) auto; gap: 6px; padding: 6px 8px; }
  body:not(.desktop) .item > summary .iacts { gap: 3px; }
  body:not(.desktop) .item > summary .iacts button.sm { min-height: 28px; padding: 2px 8px; font-size: 12px; }
  body:not(.desktop) .item > summary .iacts [data-act=cat-measure] { display: none; }   /* Measure shown in the bar covers it */
  body:not(.desktop) .item .imeta { font-size: 11px; }
  body:not(.desktop) .opt { grid-template-columns: 10px minmax(0, 1fr); row-gap: 4px; padding: 6px 0; }
  body:not(.desktop) .opt .acts { grid-column: 2; }
  body:not(.desktop) .sched-row, body:not(.desktop) .sched-row.poster { grid-template-columns: 56px minmax(0, 1fr); row-gap: 4px; padding: 8px 10px; }
  body:not(.desktop) .sched-row .league { grid-column: 1; }
  body:not(.desktop) .sched-row .acts { grid-column: 2; }
  body:not(.desktop) .logo-tab { grid-template-columns: 1fr; }
  body:not(.desktop) .logo-slots { grid-template-columns: 1fr; }
  body:not(.desktop) dialog { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; border: 0; border-radius: 0; padding: 0; }
  body:not(.desktop) dialog .dlg, body:not(.desktop) dialog > form { height: 100%; box-sizing: border-box; overflow: auto; padding: 16px 14px calc(16px + env(safe-area-inset-bottom)); }
  body:not(.desktop) .ctxmenu { font-size: 14px; }
  body:not(.desktop) .toast { left: 10px; right: 10px; bottom: calc(70px + env(safe-area-inset-bottom)); }

  /* Phone: give the lists the screen. Stat cards become one thin strip, every tool bar is one
     horizontally scrolling row, and the catalogue filters fold into two rows: section + search,
     then country and chips in one strip. Meta lines, "Play on" and counts stay off the phone. */
  body:not(.desktop) .cards { margin: 4px 8px 0; gap: 4px; }
  body:not(.desktop) .card { min-width: 0; flex: 1 1 0; grid-template-columns: 3px 1fr; border-radius: 4px; }
  body:not(.desktop) .card .body { padding: 3px 6px; }
  body:not(.desktop) .card .k { font-size: 9px; }
  body:not(.desktop) .card .v { font-size: 13px; }
  body:not(.desktop) .card .v small { font-size: 10px; }
  body:not(.desktop) .card .sub, body:not(.desktop) .card .bar { display: none; }
  body:not(.desktop) .pane-bar.tools { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 6px; padding: 6px 8px; align-items: center; }
  body:not(.desktop) .pane-bar.tools > * { flex: 0 0 auto; }
  body:not(.desktop) .pane-bar.tools .toolbar-group { flex-wrap: nowrap; display: flex; gap: 6px; }
  body:not(.desktop) .pane-bar.tools .sep, body:not(.desktop) .pane-bar.tools .grow,
  body:not(.desktop) .pane-bar.tools .meta, body:not(.desktop) .pane-bar.tools .sel-label { display: none; }
  body:not(.desktop) .pane-bar.tools .chips { flex: 0 0 auto; width: auto; overflow: visible; padding-bottom: 0; }
  body:not(.desktop) .pane-bar.tools button { white-space: nowrap; }
  body:not(.desktop) .pane-bar.tools button.sel:disabled { display: none; }     /* nothing selected: nothing to act on */
  body:not(.desktop) .pane-bar.filters { padding: 4px 8px 6px; row-gap: 4px; }
  body:not(.desktop) #disc-bar-catalog .seg { order: 1; flex: 0 0 auto; }
  body:not(.desktop) #disc-bar-catalog #cat-search { order: 2; flex: 1 1 200px; width: auto; min-width: 150px; }
  body:not(.desktop) #disc-bar-catalog label.inline:has(#cat-country) { order: 3; width: auto; flex: 0 0 auto; }
  body:not(.desktop) #disc-bar-catalog #cat-country { width: auto; max-width: 44vw; font-size: 14px; padding: 6px 8px; }
  body:not(.desktop) #disc-bar-catalog #cat-cat-chips { order: 4; flex: 1 1 0; width: auto; min-width: 120px; }
  /* The target ("Add to": + new channel or an existing one) is a full row of its own on a phone. */
  body:not(.desktop) #disc-bar-catalog label.target { order: 5; }
  body:not(.desktop) label.target { flex: 1 1 100%; width: auto; min-width: 0; font-weight: 600; color: var(--fg); gap: 8px; white-space: nowrap; }
  body:not(.desktop) label.target select { flex: 1 1 0; width: auto; min-width: 0; max-width: none; font-size: 14px; padding: 6px 8px; }
  body:not(.desktop) .t-desk { display: none; }
  body:not(.desktop) .t-phone { display: inline; }
  body:not(.desktop) .item > summary > img, body:not(.desktop) .item > summary .ilogo, body:not(.desktop) .item > summary .logo,
  body:not(.desktop) .item > summary .thumb { width: 32px; max-width: 32px; height: 24px; object-fit: contain; }
  body:not(.desktop) #disc-bar-catalog #cat-live-chips { order: 6; flex: 1 1 100%; }
  body:not(.desktop) #disc-bar-catalog .grow, body:not(.desktop) #disc-bar-catalog #cat-status { display: none; }
  body:not(.desktop) #disc-bar-catalog .progress { order: 7; }
  body:not(.desktop) #pane-channels .pane-bar.filters .subtle { display: none; }
  body:not(.desktop) form.settings { padding: 8px; gap: 10px; }
  body:not(.desktop) .sgroup { padding: 10px 12px 12px; }
  body:not(.desktop) .settings-save { margin: 0 -8px -8px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  /* Guide on a phone: no explainer (the detail box appears once a programme is tapped), a narrow
     channel column without the network line, so two time slots fit beside it. */
  body:not(.desktop) #guide-detail:not(.has-prog) { display: none; }
  body:not(.desktop) .g-chan { width: 120px; padding: 4px 6px; gap: 4px; }
  body:not(.desktop) .g-chan .g-num { width: 16px; font-size: 11px; }
  body:not(.desktop) .g-chan .chlogo { display: none; }
  body:not(.desktop) .g-chan .g-name { font-size: 12.5px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.2; }
  body:not(.desktop) .g-chan .g-src { display: none; }
  body:not(.desktop) .g-prog { padding: 3px 5px; gap: 5px; }
  body:not(.desktop) .g-prog .g-thumb { display: none; }
}
.m-onair { display: none; }
.rowmenu { display: none; }
.chips.leagues label.chip { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.chips.leagues label.chip input { width: auto; margin: 0; }
.seg { display: flex; gap: 0; }
.seg .chip { border-radius: 0; padding: 3px 12px; font-weight: 600; }
.seg .chip:first-child { border-radius: 10px 0 0 10px; }
.seg .chip:last-child { border-radius: 0 10px 10px 0; }
.pres > summary .counts { margin-left: 8px; }
.src-row { grid-template-columns: 40px minmax(0, 1fr) auto !important; }
.src-row .acts { display: flex; gap: 4px; }

/* Built-in streams: match-card grid */
.builtin-head { font-weight: 600; color: var(--fg); margin-right: auto; display: flex; align-items: center; gap: 8px; }
.builtin-head .meta { font-weight: 400; color: var(--subtle); font-size: 11.5px; }
.builtin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 10px; padding: 10px; overflow: auto; flex: 1; min-height: 0; align-content: start; }
.match { display: grid; grid-template-columns: 72px 1fr; gap: 10px; padding: 10px; background: var(--panel); border: 1px solid var(--border); border-radius: 4px; }
.match .poster { width: 72px; height: 96px; object-fit: cover; background: var(--gridhead); border-radius: 3px; }
.match .poster.ph { display: flex; align-items: center; justify-content: center; color: var(--subtle); font-size: 10px; text-align: center; padding: 4px; }
.match .mbody { display: flex; flex-direction: column; min-width: 0; gap: 4px; }
.match .mtitle { font-weight: 600; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25; }
.match .mmeta { display: flex; gap: 6px; align-items: center; font-size: 11px; color: var(--subtle); flex-wrap: wrap; }
.match .badge { display: inline-block; padding: 1px 6px; border-radius: 2px; font-size: 10px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; }
.match .badge.live { background: var(--stale); color: #fff; animation: pulse 1.5s infinite; }
.match .badge.replay { background: var(--running); color: #fff; }
.match .badge.up { background: var(--control); color: var(--subtle); border: 1px solid var(--border); }
.match .badge.cat { background: var(--control); color: var(--fg); border: 1px solid var(--border); }
.match .feeds { display: flex; flex-direction: column; margin-top: 4px; border-top: 1px solid var(--border); }
.match .feed { display: grid; grid-template-columns: 10px 1fr auto; gap: 6px; align-items: center; padding: 4px 0; border-bottom: 1px solid var(--border); font-size: 11.5px; }
.match .feed:last-child { border-bottom: 0; }
.match .feed .fl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.match .feed .fl .lang { font-weight: 500; color: var(--fg); }
.match .feed .fl .hd { display: inline-block; margin-left: 4px; padding: 0 4px; background: var(--control); border-radius: 2px; font-size: 9.5px; font-weight: 600; color: var(--subtle); border: 1px solid var(--border); }
.match .feed .fl .sub { color: var(--subtle); font-size: 10.5px; margin-left: 4px; }
.match .feed .fl .err { color: var(--stale); font-size: 10.5px; }
.match .feed .acts { display: flex; gap: 3px; }
.match .feed .acts .sm { padding: 1px 6px; font-size: 10.5px; }
.match .feed .acts a.sm { padding: 0 5px; text-decoration: none; font-size: 13px; line-height: 17px; color: var(--accent); }
.match .feed .acts a.sm:hover { background: var(--hover); }
.match .mmeta .status { color: var(--fg); font-weight: 600; }
.match .badge.ended { background: var(--control); color: var(--subtle); border: 1px solid var(--border); }
#builtin-cat-chips { gap: 3px; }
#builtin-cat-chips .chip { font-size: 10.5px; padding: 2px 7px; text-transform: capitalize; }
.match.selected { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Schedule view */
.sched-grid { overflow: auto; flex: 1; min-height: 0; padding: 0; }
.sched-day { padding: 4px 10px; background: var(--gridhead); border-bottom: 1px solid var(--border); font-weight: 600; position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 8px; }
.sched-day .count { font-weight: 400; color: var(--subtle); font-size: 11px; margin-left: auto; }
.sched-row { display: grid; grid-template-columns: 62px 72px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 5px 10px; border-bottom: 1px solid var(--border); font-size: 12px; }
.sched-row:hover { background: var(--rowalt); }
.sched-row .time { font-family: Consolas, monospace; font-size: 11px; color: var(--fg); white-space: nowrap; }
.sched-row .time.live { color: var(--stale); font-weight: 600; }
.sched-row .time.span { font-size: 10px; color: var(--subtle); }
.sched-row .sub .preview { color: var(--subtle); font-style: italic; }
.sched-row .league { font-family: Consolas, monospace; font-size: 10px; color: var(--subtle); text-transform: uppercase; }
.sched-row .teams { display: flex; align-items: center; gap: 6px; min-width: 0; }
.sched-row .teams img { width: 18px; height: 18px; object-fit: contain; flex: none; }
.sched-row .teams .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sched-row .teams .score { font-weight: 600; margin-left: 4px; font-family: Consolas, monospace; }
.sched-row .vs { color: var(--subtle); font-size: 10px; margin: 0 4px; }
.sched-row .sub { color: var(--subtle); font-size: 10.5px; }
.sched-row .acts { display: flex; gap: 4px; }
.sched-row .acts .sm { padding: 1px 7px; font-size: 10.5px; }
.sched-row.poster { grid-template-columns: 40px 72px minmax(0, 1fr) auto; }
.sched-row img.poster { width: 40px; height: 56px; object-fit: cover; border-radius: 2px; background: var(--gridhead); }

/* Guide view: EPG grid, sticky channel column and time ruler */
.guide { flex: 1; min-height: 0; overflow: auto; position: relative; }
.guide-detail { min-height: 30px; }
.guide-detail b { margin-right: 6px; }
.g-row { display: flex; min-width: max-content; border-bottom: 1px solid var(--border); }
.g-head { position: sticky; top: 0; z-index: 3; background: var(--gridhead); }
.g-chan { position: sticky; left: 0; z-index: 2; width: 210px; flex: none; display: flex; align-items: center; gap: 6px; padding: 4px 8px; background: var(--panel); border-right: 1px solid var(--border); min-width: 0; }
.g-head .g-chan { background: var(--gridhead); z-index: 4; font-weight: 600; }
.g-chan .g-num { font-family: Consolas, monospace; color: var(--subtle); width: 22px; flex: none; text-align: right; }
.g-chan .chlogo { height: 22px; max-width: 48px; margin-right: 2px; }
.g-chan .g-cn { min-width: 0; }
.g-chan .g-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-chan .g-src { font-size: 10.5px; color: var(--subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-track { position: relative; height: 50px; flex: none; }
.g-head .g-track { height: 26px; }
.g-tick { position: absolute; top: 0; height: 100%; border-left: 1px solid var(--border); padding: 5px 0 0 6px; font-size: 11px; color: var(--fg); white-space: nowrap; box-sizing: border-box; }
.g-tick.half { color: var(--subtle); }
.g-now { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--stale); z-index: 1; pointer-events: none; }
.g-prog { position: absolute; top: 4px; bottom: 4px; overflow: hidden; border: 1px solid var(--border); border-radius: 3px; padding: 4px 7px; background: var(--control); cursor: pointer; box-sizing: border-box; display: flex; align-items: center; gap: 7px; }
.g-prog .g-body { min-width: 0; flex: 1; }
.g-prog .g-thumb { flex: none; height: 32px; width: 57px; object-fit: cover; border-radius: 2px; background: var(--gridhead); }
.guide-detail .g-detail-img { height: 46px; width: 82px; object-fit: cover; border-radius: 3px; margin-right: 4px; }
.g-prog:hover { background: var(--hover); }
.g-prog.scheduled { border-color: var(--chip-on-border); background: var(--chip-on-bg); color: var(--chip-on-fg); }
.g-prog.filler { border-style: dashed; color: var(--subtle); }
.g-prog.offair { border-style: dotted; color: var(--subtle); opacity: .75; font-style: italic; }
.g-prog.cur { box-shadow: inset 0 0 0 1px var(--accent); border-color: var(--accent); }
.g-prog.sel { outline: 2px solid var(--accent); outline-offset: -2px; }
.g-prog .g-t { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-prog .g-s { font-size: 10.5px; color: var(--subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.g-prog.scheduled .g-s { color: inherit; opacity: .8; }
.g-new { display: inline-block; margin-left: 4px; padding: 0 3px; border-radius: 2px; background: var(--accent); color: #fff; font-size: 9px; font-weight: 700; vertical-align: middle; }

/* bottom tabs */
.splitter { height: 6px; margin: 0 8px; cursor: row-resize; flex: none; }
.splitter:hover { background: var(--splitter); }
.tabs { display: flex; flex-direction: column; height: var(--bottom, 240px); min-height: 120px; margin: 0 8px 4px; flex: none; }
.tabstrip { display: flex; flex: none; }
.tab { background: var(--control); border: 1px solid var(--border); border-bottom: 0; border-radius: 3px 3px 0 0; padding: 4px 12px; margin-right: 2px; }
.tab.active { background: var(--panel); color: var(--accent); }
.tabpanel { display: none; flex: 1; min-height: 0; background: var(--panel); border: 1px solid var(--border); overflow: auto; }
.tabpanel.active { display: flex; flex-direction: column; }

/* players / settings */
.plex-line { margin-top: 6px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kv { border-collapse: collapse; width: 100%; }
.kv th { text-align: left; white-space: nowrap; padding: 7px 10px; vertical-align: top; color: var(--subtle); font-weight: 600; width: 170px; border-bottom: 1px solid var(--border); }
.kv td { padding: 7px 10px; border-bottom: 1px solid var(--border); }
form.settings { display: flex; flex-direction: column; gap: 12px; padding: 12px; }
.sgroup { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px 14px; }
.sgroup > h3 { margin: 0 0 2px; font-size: 14px; font-weight: 600; color: var(--fg); }
.sgroup > h4 { margin: 14px 0 2px; font-size: 12.5px; font-weight: 600; color: var(--fg); padding-top: 12px; border-top: 1px solid var(--border); }
.sgroup .sdesc { margin: 0 0 10px; font-size: 12px; color: var(--subtle); line-height: 1.4; }
.sfields { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px 20px; align-items: start; }
.sfields > .chips, .sfields > .buttons, .sfields > .settings-note { grid-column: 1 / -1; }
.settings-save { position: sticky; bottom: 0; display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin: 0 -12px -12px; background: var(--panel); border-top: 1px solid var(--border); }
.buttons { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; }
label { display: flex; flex-direction: column; gap: 3px; font-weight: 600; }
label small { font-weight: 400; color: var(--subtle); }
label.check { flex-direction: row; align-items: center; gap: 6px; font-weight: 400; }
label.check input { width: auto; }
input, select { background: var(--control); color: var(--fg); border: 1px solid var(--border); border-radius: 2px; padding: 4px 6px; font: inherit; width: 100%; caret-color: var(--fg); }
input:focus, select:focus { outline: none; border-color: var(--accent); }
#settings-msg.ok { color: var(--running); } #settings-msg.bad { color: var(--stale); }
.err { color: var(--stale); }

/* log console */
.loghead { display: flex; align-items: center; background: #2A2A2A; padding: 3px 4px 3px 8px; flex: none; }
.loghead .subtle { color: #9A9A9A; font-size: 11px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toggle { background: #2D2D2D; border-color: #454545; color: #9A9A9A; padding: 2px 6px; width: 70px; }
.toggle.on { background: #1E3A24; border-color: #5FD068; color: #5FD068; font-weight: 700; }
.console { flex: 1; margin: 0; padding: 6px 8px; background: #1E1E1E; color: #DCDCDC; font: 12px/1.4 Consolas, "Cascadia Mono", ui-monospace, monospace; overflow: auto; white-space: pre; }

/* status bar */
.statusbar { display: flex; justify-content: space-between; align-items: center; background: var(--gridhead); border-top: 1px solid var(--border); padding: 3px 10px; flex: none; }

/* context menu, message box, dialogs, toast */
.ctxmenu { position: fixed; z-index: 50; background: var(--panel); border: 1px solid var(--border); box-shadow: 0 4px 14px rgba(0,0,0,.25); min-width: 200px; padding: 3px 0; }
.ctxmenu div { padding: 5px 24px 5px 14px; cursor: default; }
.ctxmenu div:hover { background: var(--selection); }
.ctxmenu hr { border: 0; border-top: 1px solid var(--border); margin: 3px 0; }
.ctxmenu div.disabled { opacity: .45; pointer-events: none; }
dialog { background: var(--panel); color: var(--fg); border: 1px solid var(--border); border-radius: 3px; padding: 0; width: min(640px, 94vw); box-shadow: 0 10px 40px rgba(0,0,0,.4); }
dialog::backdrop { background: rgba(0,0,0,.35); }
dialog .dlg { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; }
dialog h2 { padding-bottom: 8px; border-bottom: 1px solid var(--border); }
dialog .two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: end; }
dialog .days { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 8px; }
dialog .sdesc { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
dialog details { border: 1px solid var(--border); padding: 6px 10px; }
dialog details[open] summary { margin-bottom: 8px; }
dialog details label { margin-bottom: 8px; }
dialog summary { cursor: pointer; color: var(--subtle); }
dialog.msgbox { width: min(560px, 94vw); }
dialog.msgbox pre { margin: 0; white-space: pre-wrap; word-break: break-all; font: 12px/1.4 Consolas, ui-monospace, monospace; max-height: 50vh; overflow: auto; }
.pick-list { max-height: 55vh; overflow: auto; border: 1px solid var(--border); }
.pick-row { display: grid; grid-template-columns: 16px 1fr auto; gap: 8px; align-items: center; padding: 5px 10px; border-bottom: 1px solid var(--border); }
.pick-row:nth-child(even) { background: var(--rowalt); }
.pick-row .grp { font-size: 11px; color: var(--subtle); }
.pick-row .h { font-size: 11px; color: var(--subtle); }
.toast { position: fixed; right: 14px; bottom: 34px; z-index: 40; max-width: 520px; margin: 0; padding: 8px 12px; background: var(--panel); border: 1px solid var(--border); box-shadow: 0 4px 14px rgba(0,0,0,.25); white-space: pre-wrap; word-break: break-all; font: 12px/1.4 Consolas, ui-monospace, monospace; }
.toast.ok { border-left: 4px solid var(--green); } .toast.bad { border-left: 4px solid var(--stale); }