:root {
  color-scheme: dark;
  --bg: #05070b;
  --surface: #0c1119;
  --surface-2: #111824;
  --surface-3: #172131;
  --line: rgba(166, 190, 220, 0.16);
  --line-strong: rgba(176, 207, 240, 0.32);
  --text: #f6f8fc;
  --muted: #8e9caf;
  --cyan: #00d9ff;
  --magenta: #c126ff;
  --violet: #8f39ff;
  --gold: #ffc247;
  --green: #26df94;
  --danger: #ff5d77;
  --shadow: 0 18px 48px rgba(0, 0, 0, 0.34);
}

* { box-sizing: border-box; }

html { min-width: 320px; background: var(--bg); }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background: #05070b;
  font-family: "Segoe UI", Inter, Arial, sans-serif;
  font-size: 15px;
  letter-spacing: 0;
}

.control-boot-screen,
.software-update-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 22% 12%, rgba(0, 217, 255, .16), transparent 34%),
    radial-gradient(circle at 85% 18%, rgba(193, 38, 255, .12), transparent 30%),
    #061329;
}

.control-boot-screen[hidden],
.software-update-overlay[hidden] { display: none !important; }

.control-boot-card,
.software-update-progress-card {
  width: min(460px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 38px 34px;
  text-align: center;
  border: 1px solid rgba(81, 210, 236, .3);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(16, 43, 74, .97), rgba(5, 20, 43, .98));
  box-shadow: 0 26px 80px rgba(0, 0, 0, .48), 0 0 48px rgba(0, 217, 255, .08);
}

.control-boot-card img,
.software-update-progress-card img { width: min(210px, 68%); max-height: 64px; object-fit: contain; }
.control-boot-card strong { margin-top: 4px; font-size: 22px; }
.control-boot-card > span:last-child,
.software-update-progress-card > p,
.software-update-progress-card > small { color: #a9bed0; }

.control-boot-spinner {
  width: 34px;
  height: 34px;
  margin: 8px 0 2px;
  border: 3px solid rgba(255, 255, 255, .16);
  border-top-color: var(--cyan);
  border-radius: 50%;
  animation: control-spin .8s linear infinite;
}

.software-update-progress-card h2,
.software-update-progress-card p { margin: 0; }
.software-update-progress-card h2 { font-size: 26px; }
.software-update-progress-card .eyebrow { color: var(--cyan); }
.software-update-progress-track {
  width: 100%;
  height: 7px;
  margin: 8px 0 4px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
}
.software-update-progress-track span {
  display: block;
  width: 42%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cyan), #54efd0, var(--magenta));
  animation: update-progress 1.25s ease-in-out infinite alternate;
}

body.control-loading .app-shell { visibility: hidden; }
body:not(.control-loading) .control-boot-screen { display: none; }

@keyframes control-spin { to { transform: rotate(360deg); } }
@keyframes update-progress { from { transform: translateX(-92%); } to { transform: translateX(138%); } }

@media (prefers-reduced-motion: reduce) {
  .control-boot-spinner,
  .software-update-progress-track span { animation-duration: 2.5s; }
}

body.setup-pending .topbar,
body.setup-pending .sidebar,
body.setup-pending .sidebar-scrim { display: none !important; }
body.setup-pending main {
  min-height: 100vh;
  margin-left: 0 !important;
  padding: 24px clamp(16px, 4vw, 64px) 56px !important;
  background:
    radial-gradient(circle at 20% 0, rgba(0,217,255,.12), transparent 34%),
    radial-gradient(circle at 90% 12%, rgba(193,38,255,.1), transparent 30%),
    var(--bg);
}
body.setup-pending .page:not([data-page="setup"]) { display: none !important; }
body.setup-pending .page[data-page="setup"] { display: block !important; max-width: 1500px; margin: 0 auto; }
body.setup-pending .page[data-page="setup"] > .section-tabs { display: none; }

button, input, select, textarea { font: inherit; letter-spacing: 0; }
button, a { -webkit-tap-highlight-color: transparent; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 246px minmax(0, 1fr); }

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 10;
  width: 246px;
  padding: 26px 18px 18px;
  display: flex;
  flex-direction: column;
  background: #080c12;
  border-right: 1px solid var(--line);
}

.sidebar::after {
  content: "";
  position: absolute;
  top: 0;
  right: -1px;
  width: 1px;
  height: 160px;
  background: var(--cyan);
  box-shadow: 0 0 14px var(--cyan);
}

.brand {
  min-height: 62px;
  display: flex;
  align-items: center;
  gap: 13px;
  color: var(--text);
  text-decoration: none;
  margin: 0 7px 30px;
}

.brand-mark {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(0, 217, 255, 0.78);
  border-radius: 8px;
  color: var(--gold);
  background: #10101b;
  font-size: 20px;
  font-weight: 900;
  box-shadow: inset 0 0 19px rgba(216, 62, 255, 0.2), 0 0 18px rgba(0, 217, 255, 0.16), -5px -4px 16px rgba(216, 62, 255, 0.16);
}
.brand-mark img { width: 100%; height: 100%; display: block; border-radius: 7px; object-fit: cover; }

.brand strong { display: block; font-size: 25px; font-style: italic; line-height: 1; white-space: nowrap; }
.brand strong span { color: var(--gold); }
.brand small { display: block; margin-top: 6px; color: var(--cyan); font-size: 10px; font-weight: 800; }
.brand-joke { margin: -10px 8px 20px; font-size: 13px; font-weight: 750; line-height: 1.35; }
.brand-joke .fin { color: var(--cyan); }
.brand-joke .home { color: #ff9e35; }

.tested-source-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.tested-source-grid article { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 86px; padding: 13px; border: 1px solid #26384b; border-radius: 7px; background: rgba(7, 16, 27, .72); }
.tested-source-grid strong, .tested-source-grid small { display: block; }
.tested-source-grid small { margin-top: 5px; color: var(--muted); line-height: 1.35; }
.tested-source-grid em { color: var(--cyan); font-size: 11px; font-style: normal; font-weight: 800; white-space: nowrap; }
.rights-note { margin: 14px 0 0; padding-left: 12px; border-left: 2px solid var(--gold); color: #9aabba; font-size: 12px; line-height: 1.5; }
.rights-note.compact { margin: 14px 0 0; }
.guide-builder { display: grid; grid-template-columns: .72fr 1fr 1.25fr; gap: 12px; margin: 16px 0; }
.guide-builder section { min-width: 0; padding: 13px; border: 1px solid #26384b; border-radius: 7px; background: rgba(6, 14, 24, .78); }
.builder-head strong, .builder-head small { display: block; }
.builder-head small { margin: 5px 0 10px; color: var(--muted); line-height: 1.35; }
.picker-search { display: block; margin-bottom: 8px; color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.picker-search input { width: 100%; margin-top: 5px; }
.picker-grid { display: grid; gap: 6px; max-height: 190px; overflow: auto; padding-right: 4px; }
.picker-grid.tall { max-height: 280px; }
.picker-item { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; align-items: start; padding: 9px; border: 1px solid #223246; border-radius: 5px; background: #0a1420; cursor: pointer; }
.picker-item:has(input:checked) { border-color: var(--magenta); background: rgba(193, 54, 255, .09); }
.picker-item input { margin: 2px 0 0; accent-color: var(--magenta); }
.picker-item span { min-width: 0; color: #f6f8fc; }
.picker-item strong, .picker-item small { display: block; color: #f6f8fc; opacity: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-item small { margin-top: 3px; color: #9eafc4; }

nav { display: grid; gap: 5px; }

.nav-group {
  margin: 12px 13px 2px;
  color: #647286;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .16em;
}

.nav-item, .nav-launch {
  position: relative;
  width: 100%;
  height: 48px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 13px;
  color: #a9b4c3;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-weight: 650;
}

.nav-launch { text-decoration: none; }

.nav-item:hover, .nav-launch:hover { color: var(--text); background: rgba(255, 255, 255, 0.035); }
.nav-item.active {
  color: #fff;
  border-color: rgba(216, 62, 255, 0.54);
  background: #181126;
  box-shadow: inset 3px 0 0 var(--magenta), inset 0 0 18px rgba(138, 77, 255, 0.1), 0 0 14px rgba(216, 62, 255, 0.08);
}

.nav-icon { color: var(--cyan); font-size: 10px; font-weight: 800; font-variant-numeric: tabular-nums; }
.nav-item.active .nav-icon { color: #fff; }

.sidebar-foot {
  margin-top: auto;
  padding: 16px 11px 2px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 1px solid var(--line);
}

.sidebar-foot strong, .sidebar-foot small { display: block; }
.sidebar-foot strong { font-size: 13px; }
.sidebar-foot small { color: var(--muted); margin-top: 2px; font-size: 11px; }
.status-dot { width: 9px; height: 9px; flex: 0 0 9px; border-radius: 50%; background: #566173; }
.status-dot.online { background: var(--green); box-shadow: 0 0 10px rgba(38, 223, 148, 0.72); }

main { grid-column: 2; min-width: 0; padding: 0 34px 50px; }

.topbar {
  min-height: 106px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid var(--line);
}

.topbar h1 { margin: 2px 0 0; font-size: 28px; line-height: 1.15; }
.eyebrow { margin: 0; color: var(--cyan); font-size: 10px; font-weight: 850; text-transform: uppercase; }
.top-actions { display: flex; align-items: center; gap: 10px; }
.power-button { min-height: 32px; padding: 0 11px; border-color: var(--line-strong); background: #101722; color: #dce5ef; font-size: 11px; }
.power-button:hover { border-color: rgba(0, 217, 255, .46); background: #182233; }
.save-state { color: var(--muted); font-size: 12px; margin-right: 4px; }
.save-state.saving { color: var(--gold); }
.advanced-switch { display: inline-flex; align-items: center; gap: 9px; color: #aebaca; font-size: 11px; font-weight: 750; cursor: pointer; }
.advanced-switch input { position: absolute; opacity: 0; pointer-events: none; }
.advanced-switch i { width: 38px; height: 20px; padding: 2px; display: block; border: 1px solid var(--line-strong); border-radius: 999px; background: #080d14; }
.advanced-switch i::after { content: ""; width: 14px; height: 14px; display: block; border-radius: 50%; background: #738096; transition: transform 120ms ease, background 120ms ease; }
.advanced-switch input:checked + i { border-color: color-mix(in srgb,var(--magenta) 62%,transparent); background: color-mix(in srgb,var(--magenta) 18%,var(--deep-bg)); }
.advanced-switch input:checked + i::after { transform: translateX(17px); background: var(--magenta); box-shadow: 0 0 8px color-mix(in srgb,var(--magenta) 72%,transparent); }
.advanced-only { display: none !important; }
body.advanced .advanced-only { display: revert !important; }
body.advanced td.advanced-only, body.advanced th.advanced-only { display: table-cell !important; }

.button {
  min-height: 40px;
  padding: 0 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 5px;
  cursor: pointer;
  font-weight: 750;
}

.button.primary { background: #7d2fdb; border-color: #a955ff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 16px rgba(138, 77, 255, 0.22); }
.button.primary:hover { background: #8d37ed; }
.button.large-action { min-height: 46px; padding: 0 22px; font-size: 13px; white-space: nowrap; }
.button.secondary { background: #101722; border-color: var(--line-strong); color: #dce5ef; }
.button.secondary:hover { background: #182233; border-color: rgba(0, 217, 255, 0.46); }
.button.danger { border-color: rgba(255, 93, 119, 0.4); background: rgba(255, 93, 119, 0.1); color: #ff9cab; }
.button:disabled { opacity: 0.45; cursor: not-allowed; }

.text-button { padding: 0; color: var(--cyan); background: none; border: 0; cursor: pointer; text-decoration: none; font-weight: 750; }
.text-button:hover { color: #82efff; }
.icon-button { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 5px; background: #101722; color: #fff; cursor: pointer; }

.notice { margin: 18px 0 -2px; padding: 13px 16px; border: 1px solid rgba(0, 217, 255, 0.34); border-radius: 5px; color: #dffbff; background: #0b1a22; }
.notice.error { border-color: rgba(255, 93, 119, 0.48); background: #251016; color: #ffdbe1; }

.page { display: none; padding-top: 25px; }
.page.active { display: block; }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.metric {
  min-height: 132px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #0b111a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}
.metric::before { content: ""; display: block; width: 34px; height: 2px; margin-bottom: 19px; background: var(--cyan); box-shadow: 0 0 9px rgba(0, 217, 255, 0.5); }
.metric:nth-child(2)::before { background: var(--magenta); box-shadow: 0 0 9px rgba(216, 62, 255, 0.5); }
.metric:nth-child(3)::before { background: var(--gold); box-shadow: 0 0 9px rgba(255, 194, 71, 0.5); }
.metric:nth-child(4)::before { background: var(--green); box-shadow: 0 0 9px rgba(38, 223, 148, 0.5); }
.metric span, .metric small, .metric strong { display: block; }
.metric span { color: var(--muted); font-size: 10px; font-weight: 850; }
.metric strong { margin: 6px 0 1px; font-size: 31px; line-height: 1; }
.metric strong.metric-text { max-width: 100%; font-size: 17px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.metric small { color: #7c8a9e; font-size: 11px; }
.metric .metric-warning { margin-top: 7px; color: #ffca72; line-height: 1.25; }

.two-column { display: grid; grid-template-columns: 1.35fr 1fr; gap: 16px; margin-bottom: 16px; }
.panel { padding: 21px; border: 1px solid var(--line); border-radius: 7px; background: #0b111a; box-shadow: var(--shadow); }
.panel + .panel { margin-top: 16px; }
.two-column .panel + .panel { margin-top: 0; }
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.panel h2, .section-toolbar h2 { margin: 3px 0 0; font-size: 19px; }
.panel p:not(.eyebrow), .section-toolbar p:not(.eyebrow) { margin: 5px 0 0; color: var(--muted); }
.tuner-status-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.tuner-status-card { min-height: 104px; padding: 14px; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 11px; align-items: start; border: 1px solid var(--line); border-radius: 6px; background: #0d141e; }
.tuner-status-card.offline { border-color: rgba(255, 93, 119, .32); }
.tuner-status-card .source-symbol { grid-row: 1 / 3; }
.tuner-status-card strong, .tuner-status-card small { display: block; }
.tuner-status-card strong { font-size: 12px; }
.tuner-status-card small { margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.35; }
.tuner-status-card .tuner-slots { grid-column: 2 / -1; height: 4px; overflow: hidden; border-radius: 999px; background: #202a37; }
.tuner-status-card .tuner-slots i { display: block; height: 100%; background: var(--cyan); box-shadow: 0 0 8px rgba(0, 217, 255, .5); }
.tuner-status-card.offline .tuner-slots i { background: var(--danger); }
.lead { max-width: 720px; color: #aebaca !important; font-size: 16px; line-height: 1.55; }

.pill { min-height: 25px; padding: 0 9px; display: inline-flex; align-items: center; border: 1px solid var(--line-strong); border-radius: 999px; color: #cbd6e4; background: #111a27; font-size: 10px; font-weight: 800; white-space: nowrap; }
.pill.good { color: #79f6bb; border-color: rgba(38, 223, 148, 0.35); background: rgba(38, 223, 148, 0.08); }
.pill.warn { color: #ffd37c; border-color: rgba(255, 194, 71, 0.38); background: rgba(255, 194, 71, 0.08); }
.status-pill.warn { color: #ffd37c; border-color: rgba(255, 194, 71, 0.38); background: rgba(255, 194, 71, 0.08); }

.signal-path { min-height: 158px; display: grid; grid-template-columns: 1fr 42px 1fr 42px 1fr; align-items: center; }
.signal-path > div { min-width: 0; text-align: center; }
.signal-path strong, .signal-path small { display: block; }
.signal-path strong { margin-top: 10px; font-size: 13px; }
.signal-path small { margin-top: 5px; color: var(--muted); font-size: 10px; line-height: 1.35; }
.signal-path i { height: 1px; background: var(--line-strong); }
.path-icon { width: 47px; height: 47px; display: grid; place-items: center; margin: auto; border: 1px solid currentColor; border-radius: 50%; background: #0d1520; font-size: 10px; font-weight: 900; }
.path-icon.cyan { color: var(--cyan); box-shadow: 0 0 14px rgba(0, 217, 255, 0.17); }
.path-icon.gold { color: var(--gold); box-shadow: 0 0 14px rgba(255, 194, 71, 0.17); }
.path-icon.magenta { color: var(--magenta); box-shadow: 0 0 14px rgba(216, 62, 255, 0.17); }

.check-list { display: grid; gap: 2px; }
.check-row { min-height: 40px; display: flex; align-items: center; gap: 11px; border-bottom: 1px solid rgba(166, 190, 220, 0.08); }
.check-row:last-child { border-bottom: 0; }
.check-mark { width: 19px; height: 19px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--muted); font-size: 10px; font-weight: 900; }
.check-mark.ok { color: var(--green); border-color: rgba(38, 223, 148, 0.46); }
.check-row strong { font-size: 12px; }
.check-row small { margin-left: auto; color: var(--muted); font-size: 10px; }
.command-activity-head { margin-top: 26px; }
.user-metrics .metric { min-height: 112px; }

.empty-state { min-height: 94px; padding: 22px; display: grid; place-items: center; color: var(--muted); border: 1px dashed var(--line-strong); border-radius: 5px; text-align: center; }

.source-avatar, .user-avatar-preview {
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 1px solid rgba(0, 217, 255, .45);
  border-radius: 50%;
  color: #fff;
  background: #131b28;
  box-shadow: inset 0 0 18px rgba(216, 62, 255, .13), 0 0 12px rgba(0, 217, 255, .08);
  font-weight: 850;
}
.source-avatar { width: 42px; height: 42px; font-size: 11px; }
.source-avatar span, .source-avatar img { grid-area: 1 / 1; }
.source-avatar img, .user-avatar-preview img { width: 100%; height: 100%; object-fit: cover; }
.source-avatar img { z-index: 1; }
.user-avatar-editor { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 15px; align-items: center; padding: 13px; border: 1px solid var(--line); border-radius: 6px; background: #0d141e; }
.user-avatar-preview { width: 74px; height: 74px; font-size: 18px; }
.user-avatar-editor strong, .user-avatar-editor small { display: block; }
.user-avatar-editor small { margin-top: 5px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.user-avatar-editor .compact-actions { margin-top: 10px; justify-content: flex-start; }
#editUserAvatar[hidden] { display:none!important; }
.upload-button { cursor: pointer; }
#userAvatarCropDialog { width:min(540px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); overflow-y:auto; border-radius:16px; }
.avatar-crop-dialog-card { display:grid; gap:18px; }
.avatar-crop-dialog-card .panel-head { margin-bottom:0; }
.avatar-crop-stage { position:relative; width:min(100%,340px); aspect-ratio:1; margin:0 auto; overflow:hidden; border:1px solid var(--line-strong); border-radius:14px; background:#0d1726; }
.avatar-crop-stage canvas { display:block; width:100%; height:100%; cursor:grab; touch-action:none; }
.avatar-crop-stage canvas:active { cursor:grabbing; }
.avatar-crop-stage canvas:focus-visible { outline:3px solid var(--accent); outline-offset:-4px; }
.avatar-crop-circle { position:absolute; inset:8px; border:2px solid rgba(255,255,255,.9); border-radius:50%; box-shadow:0 0 0 340px rgba(0,0,0,.42),inset 0 0 0 1px rgba(0,0,0,.2); pointer-events:none; }
.avatar-crop-zoom { display:grid; grid-template-columns:40px auto minmax(90px,1fr) 40px 48px; align-items:center; gap:10px; }
.avatar-crop-zoom .button { min-height:38px; padding:0; font-size:21px; }
.avatar-crop-zoom label { font-size:12px; font-weight:700; }
.avatar-crop-zoom input { width:100%; accent-color:var(--accent); }
.avatar-crop-zoom output { text-align:right; font-size:12px; font-variant-numeric:tabular-nums; }
.avatar-crop-dialog-card .button-row { margin-top:0; }
@media(max-width:480px) { .avatar-crop-zoom { grid-template-columns:38px minmax(70px,1fr) 38px 46px; } .avatar-crop-zoom label { grid-column:1 / -1; } }
.user-library-access { padding: 13px; border: 1px solid var(--line); border-radius: 6px; background: #0d141e; }
.user-library-access > strong, .user-library-access > small { display: block; }
.user-library-access > small { margin-top: 4px; color: var(--muted); font-size: 10px; }
.user-library-access > .selection-row { margin-top: 11px; }
.user-library-access .selection-list { max-height: 210px; overflow-y: auto; }
.user-library-access .selection-list .selection-row { min-height: 48px; }

.setup-layout { display: grid; grid-template-columns: 235px minmax(0, 1fr); gap: 18px; align-items: start; }
.setup-steps { display: grid; align-content: start; grid-auto-rows: minmax(72px, auto); gap: 5px; position: sticky; top: 20px; }
.setup-steps button { min-height: 72px; padding: 12px; display: grid; grid-template-columns: 30px 1fr; column-gap: 10px; align-items: center; color: var(--muted); border: 1px solid var(--line); border-radius: 6px; background: #090e16; cursor: pointer; text-align: left; }
.setup-steps button > span { grid-row: 1 / 3; width: 29px; height: 29px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; font-size: 11px; font-weight: 850; }
.setup-steps strong, .setup-steps small { min-width: 0; }
.setup-steps strong { color: #c4cfdd; font-size: 12px; }
.setup-steps small { font-size: 10px; }
.setup-steps button.active { border-color: color-mix(in srgb,var(--magenta) 52%,var(--line)); background: color-mix(in srgb,var(--magenta) 13%,var(--panel-bg)); }
.setup-steps button.active > span { color: var(--text); border-color: var(--magenta); box-shadow: 0 0 10px color-mix(in srgb,var(--magenta) 36%,transparent); }
.setup-steps button.active strong { color: #fff; }
.setup-content .panel { min-height: 520px; }
.setup-pane { display: none; }
.setup-pane.active { display: block; }
.setup-launch-button {
  border-color: rgba(0, 217, 255, .58);
  background: linear-gradient(135deg, rgba(0, 217, 255, .96), rgba(193, 38, 255, .82));
  color: #061019;
  box-shadow: 0 0 18px rgba(0, 217, 255, .22);
}
.setup-launch-button svg { stroke-width: 2.1; }
.first-run-hero {
  position: relative;
  overflow: hidden;
  min-height: 278px;
  margin-bottom: 18px;
  padding: 28px;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr);
  gap: 24px;
  align-items: end;
  border: 1px solid rgba(0, 217, 255, .28);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(3, 9, 18, .3), rgba(4, 10, 19, .82)),
    linear-gradient(120deg, rgba(0, 217, 255, .22), transparent 44%, rgba(193, 38, 255, .16)),
    #080d15;
  box-shadow: 0 22px 60px rgba(0, 0, 0, .34);
}
.first-run-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(135deg, rgba(0,0,0,.78), transparent 72%);
  pointer-events: none;
}
.first-run-copy, .first-run-scoreboard { position: relative; z-index: 1; }
.first-run-copy h2 { max-width: 720px; margin: 4px 0 0; font-size: 40px; line-height: 1.03; }
.first-run-copy p:not(.eyebrow) { max-width: 700px; margin: 12px 0 0; color: #b9c8dc; font-size: 15px; line-height: 1.55; }
.first-run-actions { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px; }
.first-run-scoreboard {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.first-run-scoreboard article {
  min-height: 104px;
  padding: 14px;
  display: grid;
  align-content: center;
  border: 1px solid rgba(176, 207, 240, .2);
  border-radius: 8px;
  background: rgba(8, 13, 22, .74);
  backdrop-filter: blur(16px);
}
.first-run-scoreboard span,
.first-run-scoreboard small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.first-run-scoreboard span { color: var(--cyan); font-size: 10px; font-weight: 900; text-transform: uppercase; }
.first-run-scoreboard strong { margin-top: 7px; color: #fff; font-size: 30px; line-height: 1; }
.first-run-scoreboard small { margin-top: 8px; color: var(--muted); font-size: 11px; }
.first-run-setup { align-items: stretch; }
.setup-steps button.complete > span {
  color: #061019;
  border-color: rgba(38, 223, 148, .68);
  background: var(--green);
}
.setup-steps button.complete small { color: #93e7c4; }
.setup-pane-head {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 15px;
  align-items: start;
  margin-bottom: 18px;
}
.setup-pane-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(0, 217, 255, .48);
  border-radius: 8px;
  color: var(--cyan);
  background: linear-gradient(145deg, rgba(0, 217, 255, .1), rgba(193, 38, 255, .08));
}
.setup-pane-icon svg { width: 26px; height: 26px; }
.setup-pane-head h2 { margin-top: 2px; font-size: 26px; }
.setup-pane-head .lead {
  max-width: 840px;
  margin: 8px 0 0;
  color: #afbed0;
  font-size: 13px;
  line-height: 1.55;
}
.setup-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
  margin: 18px 0;
}
.setup-status-card {
  min-width: 0;
  min-height: 118px;
  padding: 14px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0c141f;
}
.setup-status-card.good { border-color: rgba(38, 223, 148, .34); }
.setup-status-card.warn { border-color: rgba(255, 194, 71, .38); }
.setup-status-card > svg {
  width: 34px;
  height: 34px;
  padding: 7px;
  border: 1px solid rgba(0, 217, 255, .32);
  border-radius: 7px;
  color: var(--cyan);
  background: rgba(0, 217, 255, .06);
}
.setup-status-card span,
.setup-status-card strong,
.setup-status-card small { display: block; min-width: 0; }
.setup-status-card span { color: var(--muted); font-size: 10px; font-weight: 900; text-transform: uppercase; }
.setup-status-card strong { margin-top: 6px; color: #fff; font-size: 18px; overflow-wrap: anywhere; }
.setup-status-card small { margin-top: 7px; color: var(--muted); font-size: 11px; line-height: 1.45; overflow-wrap: anywhere; }
.setup-action-grid,
.setup-source-choices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}
.setup-source-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.setup-action-card,
.setup-source-choices article {
  min-width: 0;
  min-height: 86px;
  padding: 13px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  color: var(--text);
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0d151f;
}
.setup-action-card { grid-template-columns: 38px minmax(0, 1fr); cursor: pointer; }
button.setup-action-card { width: 100%; text-align: left; }
.setup-action-card:hover,
.setup-source-choices article:hover { border-color: rgba(0, 217, 255, .44); background: #101b28; }
.setup-action-card.muted { border-color: rgba(176, 207, 240, .18); color: #dce6f3; }
.setup-action-card > svg {
  width: 36px;
  height: 36px;
  padding: 8px;
  border: 1px solid rgba(0, 217, 255, .34);
  border-radius: 7px;
  color: var(--cyan);
  background: rgba(0, 217, 255, .07);
}
.setup-action-card strong,
.setup-action-card small,
.setup-source-choices strong,
.setup-source-choices small { display: block; min-width: 0; }
.setup-action-card strong,
.setup-source-choices strong { font-size: 13px; }
.setup-action-card small,
.setup-source-choices small { margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }
.setup-tuner-picker {
  margin-top: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0d151f;
}
.setup-tuner-picker > div:first-child strong,
.setup-tuner-picker > div:first-child small { display: block; }
.setup-tuner-picker > div:first-child small { margin-top: 4px; color: var(--muted); font-size: 11px; }
.setup-tuner-picker .selection-list { margin-top: 12px; }
.setup-tuner-choice { cursor: pointer; }
.setup-guide-card,
.setup-note {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0d151f;
}
.setup-guide-card {
  display: grid;
  grid-template-columns: minmax(250px, .65fr) minmax(380px, 1fr);
  gap: 18px;
  align-items: start;
}
.setup-guide-card .button-row,
.setup-guide-card .selection-list { grid-column: 1 / -1; }
.setup-guide-card h3 { margin: 4px 0 0; font-size: 17px; }
.setup-guide-card p:not(.eyebrow) { margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.setup-note {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 14px;
  color: #b9c8dc;
  font-size: 12px;
  line-height: 1.5;
}
.setup-note strong { color: var(--cyan); text-transform: uppercase; font-size: 10px; letter-spacing: .08em; }
.setup-note.good { border-color: rgba(38, 223, 148, .32); }
.setup-metadata-card {
  margin: 18px 0;
  padding: 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: end;
  border: 1px solid rgba(255, 194, 71, .38);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(255,194,71,.08), rgba(13,21,31,.98));
}
.setup-metadata-card.configured { border-color: rgba(38, 223, 148, .42); background: linear-gradient(135deg, rgba(38,223,148,.07), rgba(13,21,31,.98)); }
.setup-metadata-card.unavailable { border-color: rgba(255, 194, 71, .38); }
.setup-metadata-card h3 { margin: 4px 0 0; font-size: 17px; }
.setup-metadata-card p:not(.eyebrow) { margin: 6px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.setup-metadata-state {
  align-self: center;
  padding: 7px 11px;
  border: 1px solid rgba(255, 194, 71, .42);
  border-radius: 999px;
  color: #ffd77f;
  background: rgba(255, 194, 71, .08);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.setup-metadata-card.configured .setup-metadata-state { border-color: rgba(38, 223, 148, .42); color: #75efbd; background: rgba(38, 223, 148, .08); }
.setup-review-list { display: grid; gap: 8px; margin-top: 18px; }
.setup-review-row {
  min-height: 70px;
  padding: 12px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0d151f;
}
.setup-review-row > span {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(176, 207, 240, .24);
  border-radius: 7px;
  color: var(--cyan);
  background: rgba(0, 217, 255, .06);
}
.setup-review-row.complete > span {
  color: #081018;
  border-color: rgba(38, 223, 148, .6);
  background: var(--green);
}
.setup-review-row strong,
.setup-review-row small { display: block; min-width: 0; }
.setup-review-row strong { font-size: 13px; }
.setup-review-row small { margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.45; overflow-wrap: anywhere; }
.setup-review-row em {
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
}
.setup-review-row.complete em { color: var(--green); }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 25px; }
.form-grid.compact { gap: 12px; margin-top: 0; }
.form-grid label, .filter-bar label { display: grid; gap: 7px; color: #aab7c8; font-size: 11px; font-weight: 750; }
.form-grid label[hidden] { display: none; }
.form-grid .wide { grid-column: 1 / -1; }
input, select, textarea {
  width: 100%;
  padding: 0 12px;
  color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  outline: none;
  background: #080d14;
}
input, select { height: 42px; }
textarea { min-height: 126px; padding-top: 11px; padding-bottom: 11px; resize: vertical; line-height: 1.45; }
input:focus, select:focus, textarea:focus { border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(0, 217, 255, 0.08); }
input:disabled { color: #748196; background: #0a0f17; }
input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--violet); }
input[type="range"] { padding: 0; accent-color: var(--violet); border: 0; background: transparent; }
.source-visibility { min-height: 62px; padding: 11px 13px; display: flex !important; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid var(--line); border-radius: 5px; background: #0e1520; }
.source-visibility strong, .source-visibility small { display: block; }
.source-visibility small { margin-top: 4px; color: var(--muted); line-height: 1.35; }
.source-visibility input { flex: 0 0 auto; }
.adb-editor-heading { padding: 12px 0 2px; border-top: 1px solid var(--line); }
.adb-editor-heading strong, .adb-editor-heading small { display: block; }
.adb-editor-heading small { margin-top: 4px; color: var(--muted); font-size: 10px; font-weight: 500; }
.inline-field-action { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; align-items: center; }
.inline-field-action .button { height: 42px; white-space: nowrap; }
.channel-show-toggle { min-width: 68px; display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; cursor: pointer; }
.channel-show-toggle input { width: 17px; height: 17px; margin: 0; }
.channel-show-toggle:has(input:checked) { color: var(--cyan); }
.button-row { margin-top: 24px; display: flex; justify-content: flex-end; gap: 10px; }
.user-dialog-actions #removeUserProfile { margin-inline-end: auto; }
.user-dialog-actions #removeUserProfile[hidden] { display: none !important; }
.support-workspace { display: grid; grid-template-columns: minmax(540px, 1.45fr) minmax(340px, .8fr); gap: 16px; align-items: start; }
.support-workspace > .panel { min-width: 0; margin: 0; }
.support-panel { max-width: none; }
.support-form-grid { margin-top: 18px; }
.support-metrics .metric-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.support-disclosure { margin-top: 18px; border: 1px solid var(--line); background: #0e1520; }
.support-disclosure div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px; padding: 13px 14px; border-bottom: 1px solid var(--line); }
.support-disclosure div:last-child { border-bottom: 0; }
.support-disclosure strong { color: var(--cyan); font-size: 10px; text-transform: uppercase; }
.support-disclosure span { color: var(--muted); font-size: 11px; line-height: 1.5; }
.support-bundle-panel .panel-head { margin-bottom: 14px; }
.support-disclosure-stacked { margin-top: 0; }
.support-disclosure-stacked div { grid-template-columns: 1fr; gap: 6px; padding: 15px; }
.support-disclosure-stacked strong { letter-spacing: .04em; }
.connection-card, .helper-box, .inline-status, .scan-warning, .scan-status { margin-top: 18px; padding: 14px; border: 1px solid var(--line); border-radius: 5px; background: #0e1520; }
.connection-card { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 13px; }
.connection-card strong, .connection-card small, .helper-box strong, .helper-box span, .scan-warning strong, .scan-warning span { display: block; }
.connection-card small, .helper-box span, .scan-warning span { margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.inline-status { color: #aebaca; font-size: 11px; }
.scan-status.good { color: #79f6bb; border-color: rgba(38,223,148,.35); }
.scan-status.warn, .scan-warning { color: #ffd37c; border-color: rgba(255,194,71,.38); }
.danger-zone { border-color: rgba(255,93,119,.28); }

.device-results { margin-top: 22px; }
.device-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.device-group { padding: 15px; border: 1px solid var(--line); border-radius: 5px; background: #0e1520; }
.device-group h3 { margin: 0 0 10px; font-size: 12px; }
.device-group span { display: block; padding: 7px 0; color: #aab7c8; border-top: 1px solid rgba(166,190,220,.08); font-size: 11px; }

.selection-list { display: grid; gap: 7px; margin-top: 14px; }
.selection-row { min-height: 58px; padding: 10px 13px; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 5px; background: #0d141e; }
.selection-row strong, .selection-row small { display: block; }
.selection-row strong { font-size: 12px; }
.selection-row small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.selection-row em { color: var(--cyan); font-size: 10px; font-style: normal; text-transform: uppercase; }
.dummy-guide-panel { margin-top: 16px; padding: 13px; display: grid; grid-template-columns: 24px minmax(0, 1fr) 112px auto; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 5px; background: #0d141e; }
.dummy-guide-panel strong, .dummy-guide-panel small { display: block; }
.dummy-guide-panel small { margin-top: 3px; color: var(--muted); line-height: 1.4; }
.dummy-guide-panel label { color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.dummy-guide-panel select { width: 100%; margin-top: 4px; }
.dummy-guide-choice:hover { border-color: var(--magenta); background: rgba(193,54,255,.08); }
.dummy-guide-icon { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid rgba(0,217,255,.4); border-radius: 4px; color: var(--cyan); font-size: 8px; font-weight: 900; }
.station-divider { margin: 18px 0 2px; display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.station-divider::before, .station-divider::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.station-recommendation { min-height: 68px; margin: 12px 0; padding: 12px 13px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; border: 1px solid rgba(0,217,255,.3); border-radius: 5px; background: linear-gradient(120deg, rgba(0,217,255,.07), rgba(193,54,255,.06)); }
.station-recommendation strong, .station-recommendation small { display: block; }
.station-recommendation strong { font-size: 12px; }
.station-recommendation small { margin-top: 4px; color: var(--muted); font-size: 10px; }
.station-recommendation .recommendation-label { margin-bottom: 4px; color: var(--cyan); font-size: 9px; font-weight: 900; text-transform: uppercase; }
.station-recommendation.empty { display: block; min-height: 0; color: var(--muted); font-size: 10px; }
.selection-row.lineup-row { grid-template-columns: 22px minmax(0, 1fr) minmax(130px, auto); }
.selection-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.selection-actions .button { min-width: 112px; }
.selection-toolbar, .builder-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.selection-toolbar .picker-search { flex: 1; }
.compact-actions { display: flex; align-items: center; gap: 8px; }
.channel-selection-panel { margin-top: 16px; padding: 14px; border: 1px solid var(--line); border-radius: 5px; background: #0d141e; }
.channel-selection-panel .picker-search { margin-top: 12px; }
.selection-status { margin-top: 9px; color: var(--muted); font-size: 10px; }
.station-picker { width: 100%; max-height: 440px; margin-top: 14px; overflow-x: hidden; }
.station-picker label, .channel-selection-panel .picker-grid label { min-height: 46px; }
.station-picker .picker-item { width: 100%; min-width: 0; box-sizing: border-box; background: #0a1420; }
.station-picker .picker-item:has(input:checked) { background: #201231; }
.picker-item.folder-included { border-color: rgba(0,217,255,.32); background: rgba(0,217,255,.055); }
.picker-item.folder-included small { color: #8edfeb; }
.preview-dialog { width: min(900px, calc(100vw - 48px)); }
.video-preview-shell { position: relative; width: 100%; aspect-ratio: 16 / 9; margin-top: 15px; overflow: hidden; border: 1px solid #31475f; border-radius: 6px; background: #020508; box-shadow: inset 0 0 50px rgba(0, 217, 255, .04); }
.source-preview-video { width: 100%; height: 100%; display: block; object-fit: contain; background: #020508; }
.preview-placeholder { position: absolute; inset: 0; display: grid; place-items: center; color: #91a2b6; pointer-events: none; }
.preview-placeholder[hidden] { display: none; }
.setup-address-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.setup-address-grid article { min-width: 0; padding: 16px; display: grid; gap: 10px; border: 1px solid #293d52; border-radius: 6px; background: #0a131f; }
.setup-address-grid code { min-width: 0; overflow: hidden; color: #c8f8ff; text-overflow: ellipsis; white-space: nowrap; }
.local-roku-address { min-width: 0; margin-top: 18px; padding: 14px 16px; display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 12px; border: 1px solid rgba(38,223,148,.28); border-radius: 6px; background: rgba(38,223,148,.045); }
.local-roku-address code, .remote-result code { min-width: 0; overflow: hidden; color: #c8f8ff; text-overflow: ellipsis; white-space: nowrap; }
.remote-choice-tabs { margin-top: 18px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.remote-choice { min-height: 72px; padding: 13px 15px; text-align: left; border: 1px solid var(--line-strong); border-radius: 6px; background: #0a131f; color: var(--text); cursor: pointer; }
.remote-choice strong, .remote-choice small { display: block; }
.remote-choice small { margin-top: 5px; color: var(--muted); line-height: 1.35; }
.remote-choice.active { border-color: var(--magenta); background: rgba(193,54,255,.1); box-shadow: inset 0 0 24px rgba(193,54,255,.05), 0 0 14px rgba(193,54,255,.12); }
.remote-setup-panel { margin-top: 10px; padding: 16px; border: 1px solid var(--line); border-radius: 6px; background: #0a111b; }
.remote-setup-panel[hidden] { display: none; }
.remote-setup-panel .compact-actions { margin-top: 14px; justify-content: flex-end; }
.manual-address-label { display: grid; gap: 7px; color: #9ca9ba; font-size: 11px; font-weight: 750; }
.remote-setup-panel[data-remote-panel="manual"] .button { margin-top: 12px; margin-right: 8px; }
.remote-setup-panel[data-remote-panel="cloudflare"] .button { margin-top: 12px; margin-right: 8px; }
.remote-help-note { margin: 14px 0 0; padding: 12px 14px; border-left: 3px solid var(--cyan); background: rgba(0, 210, 255, .055); color: var(--muted); line-height: 1.5; }
.remote-help-note strong { color: var(--text); }
.remote-pairing { margin-top: 16px; padding: 14px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; border: 1px solid var(--line-strong); border-radius: 6px; background: rgba(255,255,255,.025); }
.remote-pairing strong, .remote-pairing small { display: block; }
.remote-pairing small { margin-top: 4px; color: var(--muted); }
.remote-pairing .remote-result { grid-column: 1 / -1; }
.user-roku-pairing { margin-top: 0; }
.user-roku-pairing .inline-status { grid-column: 1 / -1; margin-top: 0; }
.remote-result { margin-top: 14px; padding: 12px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; border: 1px solid rgba(0,217,255,.3); border-radius: 5px; background: #08141c; }
.remote-result[hidden] { display: none; }
.remote-monitor-result { margin-top: 14px; padding: 15px; display: grid; grid-template-columns: 142px minmax(0, 1fr); gap: 18px; align-items: center; border: 1px solid rgba(216, 62, 255, .3); border-radius: 6px; background: #0a111b; }
.remote-monitor-result[hidden] { display: none; }
.remote-monitor-result img { width: 142px; height: 142px; padding: 7px; border-radius: 5px; background: #fff; image-rendering: pixelated; }
.remote-monitor-result strong, .remote-monitor-result p, .remote-monitor-result code { display: block; }
.remote-monitor-result strong { margin-top: 9px; font-size: 14px; }
.remote-monitor-result p { margin: 5px 0 9px; color: var(--muted); font-size: 11px; }
.remote-monitor-result code { max-width: 100%; overflow: hidden; color: #c8f8ff; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.remote-monitor-result .compact-actions { margin-top: 11px; }

.mapping-summary { margin-top: 25px; padding: 24px; display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 10px; align-items: end; border: 1px solid var(--line); border-radius: 6px; background: #0e1520; }
.mapping-summary strong { font-size: 32px; }
.mapping-summary span { color: var(--muted); font-size: 12px; padding-bottom: 4px; }

.address-box { margin-top: 22px; min-height: 62px; padding: 10px 11px 10px 17px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid rgba(0,217,255,.35); border-radius: 6px; background: #08141c; box-shadow: inset 0 0 22px rgba(0,217,255,.04); }
.address-box code { color: #c8f8ff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.client-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.client-grid div { padding: 16px; border: 1px solid var(--line); border-radius: 5px; background: #0e1520; }
.client-grid strong, .client-grid small { display: block; }
.client-grid small { margin-top: 5px; color: var(--muted); }

.section-toolbar { min-height: 63px; margin-bottom: 18px; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.section-toolbar > div:last-child { display: flex; gap: 9px; }
.section-tabs { display: flex; gap: 4px; margin: 0 0 22px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.section-tabs button { min-height: 37px; padding: 0 14px; color: var(--muted); border: 1px solid transparent; border-radius: 5px; background: transparent; cursor: pointer; font-weight: 750; }
.section-tabs button:hover { color: var(--text); background: rgba(255,255,255,.035); }
.section-tabs button.active { color: var(--text); border-color: color-mix(in srgb,var(--cyan) 32%,transparent); background: color-mix(in srgb,var(--cyan) 9%,transparent); box-shadow: inset 0 -2px 0 var(--cyan); }
.guide-main-tabs button[data-go="channels"] {
  min-width: 136px;
  color: var(--text);
  border-color: color-mix(in srgb,var(--magenta) 62%,transparent);
  background: linear-gradient(180deg,color-mix(in srgb,var(--magenta) 20%,transparent),color-mix(in srgb,var(--violet) 8%,transparent));
  box-shadow: inset 0 -2px 0 var(--magenta),0 0 18px color-mix(in srgb,var(--magenta) 18%,transparent);
}
.guide-main-tabs button[data-go="channels"]:hover {
  color: var(--text);
  border-color: color-mix(in srgb,var(--magenta) 90%,transparent);
  background: linear-gradient(180deg,color-mix(in srgb,var(--magenta) 28%,transparent),color-mix(in srgb,var(--violet) 12%,transparent));
  box-shadow: inset 0 -2px 0 var(--magenta),0 0 22px color-mix(in srgb,var(--magenta) 24%,transparent);
}
.guide-main-tabs button[data-go="channels"].active {
  color: var(--text);
  border-color: color-mix(in srgb,var(--cyan) 38%,transparent);
  background: color-mix(in srgb,var(--cyan) 9%,transparent);
  box-shadow: inset 0 -2px 0 var(--cyan);
}
.guide-context-panel { margin: 0 0 14px; overflow: hidden; border: 1px solid rgba(0,217,255,.22); border-radius: 7px; background: #0a111b; }
.guide-context-tabs { min-height: 54px; padding: 8px; display: flex; gap: 7px; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: thin; }
.guide-context-tabs button { min-width: max-content; height: 38px; padding: 0 15px; color: #98a8bb; border: 1px solid transparent; border-radius: 5px; background: transparent; cursor: pointer; font-size: 11px; font-weight: 850; }
.guide-context-tabs button:hover { color: #fff; background: rgba(255,255,255,.035); }
.guide-context-tabs button.active { color: #fff; border-color: rgba(0,217,255,.38); background: rgba(0,217,255,.1); box-shadow: inset 0 -2px 0 var(--cyan), 0 0 14px rgba(0,217,255,.08); }
.guide-context-tabs button.inventory { margin-left: auto; color: #b7c1ce; border-color: rgba(166,190,220,.14); }
.guide-context-tabs button.source { color: #c4d3df; border-color: rgba(166,190,220,.14); background: rgba(255,255,255,.018); }
.guide-context-tabs button.first-source { margin-left: 12px; position: relative; }
.guide-context-tabs button.first-source::before { content: ""; position: absolute; left: -10px; top: 7px; bottom: 7px; width: 1px; background: var(--line); }
.guide-context-tabs button.source.active { color: #fff; border-color: rgba(255,184,0,.45); background: rgba(255,184,0,.09); box-shadow: inset 0 -2px 0 var(--gold), 0 0 14px rgba(255,184,0,.07); }
.guide-context-copy { min-height: 48px; padding: 10px 14px; display: flex; align-items: center; gap: 12px; }
.guide-context-copy strong { color: #eaf8ff; font-size: 12px; }
.guide-context-copy span { color: var(--muted); font-size: 10px; }
.primary-guide-action { min-width: 118px; white-space: nowrap; }
.primary-guide-action.ready { color: #baf9e2; border-color: rgba(35,217,152,.34); background: rgba(35,217,152,.06); }
.primary-guide-action.pending { color: #ffcb70; border-color: rgba(255,194,71,.35); background: rgba(255,194,71,.055); }
.guide-status-static { display: grid; gap: 3px; }
.guide-status-static strong { color: #baf9e2; font-size: 10px; text-transform: uppercase; }
.guide-status-static small { color: var(--muted); font-size: 9px; }
.primary-guide-setup-layout { margin-top: 17px; display: grid; grid-template-columns: minmax(230px, .72fr) minmax(420px, 1.28fr); gap: 18px; align-items: stretch; }
.primary-guide-setup-form { padding: 17px; border: 1px solid var(--line); border-radius: 6px; background: #0e1520; }
.primary-guide-setup-form label { display: grid; gap: 7px; color: #b9c6d7; font-size: 10px; font-weight: 850; text-transform: uppercase; }
.primary-guide-setup-form input { height: 47px; color: #fff; border-color: rgba(0,217,255,.38); font-size: 20px; font-weight: 900; }
.primary-guide-setup-form small { color: var(--muted); font-size: 9px; font-weight: 600; line-height: 1.45; text-transform: none; }
.primary-number-status { margin-top: 13px; padding: 10px 11px; color: #aab8c9; border: 1px solid var(--line); border-radius: 5px; background: rgba(255,255,255,.018); font-size: 10px; line-height: 1.35; }
.primary-number-status.ready { color: #baf9e2; border-color: rgba(35,217,152,.3); background: rgba(35,217,152,.055); }
.primary-number-status.conflict { color: #ffb2be; border-color: rgba(255,83,113,.34); background: rgba(255,83,113,.06); }
.primary-mini-guide { min-width: 0; overflow: hidden; border: 1px solid rgba(0,217,255,.24); border-radius: 6px; background: #08141c; }
.primary-mini-guide-head { min-height: 48px; padding: 9px 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); }
.primary-mini-guide-head strong { color: #eafaff; font-size: 11px; }
.primary-mini-guide-head small { color: var(--muted); font-size: 9px; }
.primary-mini-guide-rows { max-height: 318px; overflow-y: auto; }
.primary-mini-guide-row { min-height: 43px; padding: 6px 10px; display: grid; grid-template-columns: 34px 54px minmax(0,1fr); gap: 9px; align-items: center; border-bottom: 1px solid rgba(151,174,205,.1); }
.primary-mini-guide-row:last-child { border-bottom: 0; }
.primary-mini-guide-row > strong { color: var(--cyan); font-size: 11px; text-align: center; }
.primary-mini-guide-row > span { min-width: 0; }
.primary-mini-guide-row b, .primary-mini-guide-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.primary-mini-guide-row b { color: #edf7ff; font-size: 10px; }
.primary-mini-guide-row small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.primary-mini-guide-row.conflict { background: rgba(255,83,113,.075); box-shadow: inset 3px 0 0 #ff5371; }
.primary-mini-guide-logo { width: 34px; height: 28px; padding: 2px; display: grid; place-items: center; overflow: hidden; color: var(--cyan); border: 1px solid rgba(148,175,211,.2); border-radius: 4px; background: #0d1824; font-size: 8px; font-weight: 900; }
.primary-mini-guide-logo img { width: 100%; height: 100%; object-fit: contain; }
.source-flow { margin: 0 0 18px; padding: 12px 16px; display: grid; grid-template-columns: minmax(0,1fr) 28px minmax(0,1fr) 28px minmax(0,1fr) 28px minmax(0,1fr); align-items: center; border: 1px solid var(--line); border-radius: 6px; background: rgba(8,14,22,.64); }
.source-flow div { min-width: 0; display: grid; grid-template-columns: 28px minmax(0,1fr); column-gap: 9px; align-items: center; }
.source-flow div > span { grid-row: 1 / 3; width: 28px; height: 28px; display: grid; place-items: center; color: var(--cyan); border: 1px solid rgba(0,217,255,.3); border-radius: 50%; font-size: 10px; font-weight: 900; }
.source-flow strong, .source-flow small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.source-flow strong { font-size: 11px; }
.source-flow small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.source-flow i { width: 18px; height: 1px; justify-self: center; background: var(--line-strong); }
.source-list { display: grid; gap: 8px; }
.source-row { min-height: 64px; padding: 10px 13px; display: grid; grid-template-columns: 42px minmax(0, 1.2fr) minmax(160px, .8fr) auto; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 5px; background: #0e1520; }
.source-symbol { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 5px; color: var(--cyan); font-size: 10px; font-weight: 900; }
.source-row strong, .source-row small { display: block; }
.source-row strong { font-size: 12px; }
.source-row small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.source-meta { color: #a7b4c5; font-size: 11px; }
.row-actions { display: flex; align-items: center; gap: 8px; }
.source-priority { min-width: 78px; height: 32px; padding: 0 7px; display: inline-flex; align-items: center; gap: 6px; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; background: rgba(9,14,22,.7); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.source-priority input { width: 40px; min-width: 0; height: 24px; padding: 2px 4px; color: var(--cyan); border: 0; background: transparent; font-weight: 900; text-align: center; }
.source-warning { margin-top: 10px; padding: 12px 14px; display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 10px; align-items: center; color: #ffd6a5; border: 1px solid rgba(255,158,53,.35); border-radius: 6px; background: rgba(255,158,53,.07); font-size: 11px; }
.source-warning span { color: #c8b69f; }
.source-warning code { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compact-help { margin-top: 14px; }

.how-panel { margin: 0 0 20px; overflow: hidden; border: 1px solid rgba(45, 213, 255, .36); border-radius: 8px; background: linear-gradient(135deg, rgba(10, 24, 38, .98), rgba(16, 20, 35, .98)); box-shadow: inset 4px 0 0 var(--cyan), 0 12px 32px rgba(0, 0, 0, .22); }
.how-panel summary { display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; align-items: center; gap: 15px; min-height: 82px; padding: 14px 20px; cursor: pointer; list-style: none; }
.how-panel summary::-webkit-details-marker { display: none; }
.how-panel summary > span:nth-child(2) { min-width: 0; }
.how-panel summary strong, .how-panel summary small { display: block; }
.how-panel summary strong { color: var(--text); font-size: 18px; line-height: 1.15; }
.how-panel summary small { margin-top: 6px; color: #b5c2d4; font-size: 14px; line-height: 1.45; }
.how-icon { display: grid; width: 46px; height: 46px; place-items: center; border: 1px solid rgba(45, 213, 255, .62); border-radius: 7px; color: var(--cyan); background: rgba(45, 213, 255, .1); font-size: 15px; font-weight: 900; box-shadow: inset 0 0 14px rgba(45, 213, 255, .08); }
.how-toggle { padding: 8px 12px; border: 1px solid var(--line); border-radius: 5px; color: var(--cyan); font-size: 11px; font-weight: 850; text-transform: uppercase; }
.how-panel[open] .how-toggle { color: var(--muted); }
.how-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.how-step { position: relative; min-height: 146px; padding: 20px 20px 20px 66px; }
.how-step + .how-step { border-left: 1px solid var(--line); }
.how-step > span { position: absolute; top: 21px; left: 20px; width: 32px; height: 26px; display: grid; place-items: center; color: var(--cyan); border: 1px solid rgba(45, 213, 255, .34); border-radius: 5px; background: rgba(45, 213, 255, .06); font-size: 12px; font-weight: 900; }
.how-step strong { display: block; color: var(--text); font-size: 15px; line-height: 1.25; }
.how-step p { margin: 9px 0 0; color: #aebbd0; font-size: 14px; line-height: 1.55; }
.how-step p b { color: #dbeeff; font-weight: 750; }
.how-example { display: flex; align-items: center; gap: 12px; min-height: 62px; padding: 13px 20px; border-top: 1px solid var(--line); background: rgba(45, 213, 255, .055); color: #aebbd0; font-size: 13px; }
.how-example strong { color: var(--text); white-space: nowrap; }
.how-example strong b { color: var(--cyan); }
.how-example i { width: 24px; height: 1px; background: var(--cyan); opacity: .65; }
.how-example small { margin-left: auto; max-width: 42%; color: #b5c2d4; font-size: 12px; line-height: 1.4; }
.example-label { color: var(--cyan); font-size: 11px; font-weight: 900; }
.compact-how-panel { margin-bottom: 14px; }

@media (max-width: 1050px) {
  .how-grid { grid-template-columns: 1fr; }
  .how-step { min-height: 0; }
  .how-step + .how-step { border-top: 1px solid var(--line); border-left: 0; }
  .how-example { align-items: flex-start; flex-wrap: wrap; }
  .how-example small { width: 100%; max-width: none; margin-left: 0; }
}
.dvr-user-policy { padding: 15px; display: grid; gap: 14px; border: 1px solid var(--line); border-radius: 10px; background: linear-gradient(145deg, rgba(18, 36, 52, .96), rgba(10, 24, 37, .98)); box-shadow: 0 8px 24px rgba(0, 0, 0, .16); }
.dvr-user-policy strong, .dvr-user-policy small { display: block; }
.dvr-user-policy small { margin-top: 3px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.dvr-user-policy label { display: grid; gap: 6px; color: #b8c7d5; font-size: 11px; font-weight: 800; }
.dvr-user-policy-head { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 11px; }
.dvr-user-identity strong { color: var(--text); font-size: 14px; }
.dvr-folder-visibility { white-space: nowrap; }
.dvr-user-policy-controls { display: grid; grid-template-columns: minmax(145px, .8fr) minmax(180px, 1.2fr); gap: 12px; }
.dvr-access-static { min-height: 39px; display:flex; align-items:center; padding:0 11px; border:1px solid rgba(80,207,164,.35); border-radius:7px; color:#9ce6cb; background:rgba(32,128,100,.12); }
.dvr-folder-path { overflow:hidden; text-overflow:ellipsis; color:#86a9bf; font:600 10px/1.45 ui-monospace,SFMono-Regular,Consolas,monospace; }
.dvr-folder-sharing { padding:13px; border:1px solid rgba(70, 111, 142, .42); border-radius:9px; background:rgba(1,14,28,.46); }
.dvr-sharing-title strong { color:#dbe9f2; font-size:12px; }
.dvr-sharing-title small { max-width: 560px; }
.dvr-share-picker { display:grid; grid-template-columns:32px minmax(0,1fr) 32px; align-items:center; gap:7px; margin-top:11px; }
.dvr-share-picker.is-short { grid-template-columns:minmax(0,1fr); }
.dvr-share-picker.is-short .dvr-share-scroll { display:none; }
.dvr-share-people { min-width:0; display:flex; flex-wrap:nowrap; gap:8px; overflow-x:auto; overscroll-behavior-inline:contain; scroll-snap-type:x proximity; scrollbar-width:thin; scrollbar-color:#2d6685 transparent; padding:3px 1px 7px; }
.dvr-share-scroll { width:32px; height:38px; display:grid; place-items:center; border:1px solid #294a62; border-radius:8px; color:#bce9f6; background:#0b2234; cursor:pointer; font:800 21px/1 system-ui,sans-serif; }
.dvr-share-scroll:hover { border-color:#42c6e9; background:#103249; }
.dvr-share-person { position:relative; display:inline-grid !important; grid-template-columns:28px minmax(42px, auto) 20px !important; align-items:center; gap:8px !important; min-height:42px; padding:6px 9px 6px 7px; border:1px solid #294a62; border-radius:9px; color:#d8e9f5 !important; background:#0b2234; cursor:pointer; transition:border-color .16s ease, background .16s ease, transform .16s ease; }
.dvr-share-person { flex:0 0 auto; scroll-snap-align:start; }
.dvr-share-person:hover { border-color:#4382a8; transform:translateY(-1px); }
.dvr-share-person input { position:absolute; opacity:0; pointer-events:none; }
.dvr-share-person:has(input:checked) { border-color:#37b8d9; background:linear-gradient(135deg, rgba(24,121,151,.3), rgba(17,75,98,.38)); box-shadow:inset 0 0 0 1px rgba(66,198,233,.12); }
.dvr-share-person:has(input:focus-visible) { outline:2px solid #65d5f0; outline-offset:2px; }
.dvr-share-avatar { width:28px; height:28px; display:grid; place-items:center; border-radius:50%; color:#bdeefa; background:#183f56; font-size:11px; font-weight:900; }
.dvr-share-name { color:#e3eff6; font-size:11px; font-weight:800; }
.dvr-share-check { width:18px; height:18px; display:grid; place-items:center; border:1px solid #49677c; border-radius:5px; color:transparent; background:#071624; font-size:11px; }
.dvr-share-person input:checked ~ .dvr-share-check { border-color:#42c6e9; color:#042432; background:#54d3ee; }
.dvr-sharing-summary { margin-top:11px; padding:8px 10px; border-radius:7px; color:#a9d9e8; background:rgba(47, 140, 170, .11); font-size:11px; font-weight:750; }
.dvr-incoming-access { display:grid; grid-template-columns:26px minmax(0,1fr); align-items:center; gap:9px; padding:10px 12px; border:1px solid rgba(80,207,164,.26); border-radius:8px; color:#8fe2c3; background:rgba(32,128,100,.09); }
.dvr-incoming-access > span { font-size:17px; }
.dvr-incoming-access strong { color:#9ce6cb; font-size:11px; }
.dvr-incoming-access small { color:#83bea9; }
.dvr-row.dvr-conflict { border-color: rgba(255, 194, 71, .4); background: linear-gradient(90deg, rgba(255, 194, 71, .08), #0e1520 45%); }
.dvr-row .row-actions { justify-content: flex-end; flex-wrap: wrap; max-width: min(100%, 520px); }
.dvr-row .row-actions label { display: grid; gap: 3px; color: var(--muted); font-size: 10px; }
.dvr-row .row-actions select { max-width: 230px; min-width: 155px; }
.dvr-row.dvr-conflict .source-symbol { color: #ffd47a; border-color: rgba(255, 194, 71, .45); }

.guide-columns { grid-template-columns: 1.2fr .8fr; }
.roku-guide-panel { padding: 27px; border-color: rgba(0, 217, 255, .28); }
.roku-guide-panel .panel-head h2 { font-size: 22px; }
.roku-guide-panel .channel-editor-action {
  min-width: 150px;
  color: #fff5ff;
  border-color: rgba(193, 38, 255, .72);
  background: linear-gradient(180deg, rgba(193, 38, 255, .22), rgba(143, 57, 255, .08));
  box-shadow: inset 0 -2px 0 rgba(193, 38, 255, .95), 0 0 20px rgba(193, 38, 255, .24);
}
.roku-guide-panel .channel-editor-action:hover {
  border-color: rgba(219, 132, 255, .96);
  background: linear-gradient(180deg, rgba(193, 38, 255, .3), rgba(143, 57, 255, .12));
  box-shadow: inset 0 -2px 0 rgba(219, 132, 255, .98), 0 0 26px rgba(193, 38, 255, .34);
}
.guide-status { margin-top: 20px; padding: 15px; border: 1px solid var(--line); border-radius: 5px; background: #0e1520; }
.guide-status span, .guide-status strong, .guide-status small { display: block; }
.guide-status span { color: var(--muted); font-size: 10px; text-transform: uppercase; }
.guide-status strong { margin-top: 6px; font-size: 13px; }
.guide-status small { margin-top: 4px; color: #7f8da2; }

.filter-bar { min-height: 68px; padding: 12px; display: grid; grid-template-columns: minmax(240px, 1fr) 165px 125px 175px auto; align-items: end; gap: 12px; border: 1px solid var(--line); border-bottom: 0; border-radius: 6px 6px 0 0; background: #0c121c; }
.search-field { position: relative; }
.search-field span { position: absolute; top: 14px; left: 12px; color: var(--cyan); font-size: 9px; z-index: 1; }
.search-field input { padding-left: 68px; }
.result-count { align-self: center; justify-self: end; color: var(--muted); font-size: 11px; }
.table-shell { width: 100%; overflow: auto; border: 1px solid var(--line); border-radius: 0 0 6px 6px; background: #090e16; }
table { width: 100%; min-width: 1290px; border-collapse: collapse; }
.backup-table table { min-width: 900px; }
.backup-table td:last-child, .backup-table th:last-child { text-align: right; }
.vault-storage-metrics { grid-template-columns: repeat(3,minmax(0,1fr)); margin: 14px 0; }
.vault-user-storage-list { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,460px),1fr)); gap: 14px; margin: 16px 0; }
.vault-user-storage { position: relative; overflow: hidden; display: grid; align-content: start; gap: 14px; min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: 10px; background: radial-gradient(circle at 100% 0,color-mix(in srgb,var(--cyan) 6%,transparent),transparent 34%),var(--panel-bg); box-shadow: var(--shadow); }
.vault-user-storage::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: linear-gradient(var(--cyan),var(--magenta)); opacity: .72; }
.vault-user-storage-head { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 11px; }
.vault-user-storage-head strong, .vault-user-storage-head small { display: block; }
.vault-user-storage-head strong { font-size: 13px; }
.vault-user-storage-head small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.vault-user-storage-avatar { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid color-mix(in srgb,var(--cyan) 40%,var(--line)); border-radius: 50%; background: color-mix(in srgb,var(--cyan) 12%,var(--surface-2)); color: var(--text); font-size: 12px; font-weight: 900; }
.vault-user-storage-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.vault-user-storage-stats > span { display: grid; align-content: center; gap: 4px; min-height: 68px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 7px; background: var(--deep-bg); }
.vault-user-storage-stats strong { font-size: 13px; }
.vault-user-storage-stats small { color: var(--muted); font-size: 9px; }
.vault-user-storage > label { display: grid; gap: 5px; color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.vault-user-storage > label input { width: 100%; min-width: 0; text-transform: none; letter-spacing: 0; background: var(--field-bg); border-color: var(--line-strong); }
.vault-user-storage > label input[readonly] { color: var(--text); cursor: default; }
.vault-user-storage > label small { overflow-wrap: anywhere; color: var(--muted); font-weight: 500; text-transform: none; letter-spacing: 0; }
.vault-user-storage .button-row { align-self: end; margin: 0; padding-top: 2px; }
.vault-user-folder-flow { display: grid; grid-template-columns: auto 34px auto minmax(110px,1fr); align-items: center; justify-content: end; gap: 8px; }
.vault-user-folder-flow .vault-user-delete { justify-self: end; }
.vault-user-flow-arrow { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid color-mix(in srgb,var(--cyan) 22%,var(--line)); border-radius: 50%; color: var(--cyan); background: color-mix(in srgb,var(--cyan) 6%,var(--deep-bg)); font-size: 20px; font-weight: 900; transition: .18s ease; }
.vault-user-storage.has-pending-folder .vault-user-flow-arrow { border-color: color-mix(in srgb,var(--cyan) 60%,var(--line)); background: color-mix(in srgb,var(--cyan) 16%,var(--deep-bg)); box-shadow: 0 0 16px color-mix(in srgb,var(--cyan) 14%,transparent); transform: translateX(2px); }
.vault-user-storage.has-pending-folder .vault-user-move { box-shadow: 0 0 0 2px color-mix(in srgb,var(--cyan) 16%,transparent),0 8px 22px color-mix(in srgb,var(--primary-bg) 20%,transparent); }
.vault-folder-dialog-card { display: grid; gap: 14px; }
.vault-folder-toolbar { display: grid; grid-template-columns: auto auto minmax(0,1fr); align-items: center; gap: 8px; }
.vault-folder-toolbar code { min-width: 0; overflow: hidden; padding: 11px 12px; border: 1px solid var(--line); border-radius: 5px; color: var(--text); background: var(--field-bg); text-overflow: ellipsis; white-space: nowrap; }
.vault-folder-list { min-height: 240px; max-height: min(460px,52vh); overflow-y: auto; display: grid; align-content: start; gap: 6px; padding: 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--deep-bg); }
.vault-folder-list > button { width: 100%; min-height: 58px; display: grid; grid-template-columns: 28px minmax(0,1fr) 18px; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid transparent; border-radius: 5px; color: var(--text); background: var(--surface-2); text-align: left; cursor: pointer; }
.vault-folder-list > button:hover, .vault-folder-list > button:focus-visible { outline: 0; border-color: var(--cyan); background: color-mix(in srgb,var(--cyan) 10%,var(--surface-2)); }
.vault-folder-list strong, .vault-folder-list small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vault-folder-list small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.vault-folder-icon { color: var(--cyan); font-size: 17px; }
.setup-library-dialog-card,
.setup-folder-dialog-card { display: grid; gap: 14px; }
.setup-storage-choice { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.setup-storage-choice .setup-action-card { grid-template-columns: 24px minmax(0,1fr); gap: 8px; padding: 12px; }
.setup-storage-choice .setup-action-card > svg { width: 24px; height: 24px; padding: 3px; }
.setup-storage-choice .setup-action-card:disabled { opacity: .55; cursor: not-allowed; }
#setupStorageAvailability[hidden] { display: none; }
.setup-storage-choice [aria-checked="true"] { border-color: var(--cyan); background: color-mix(in srgb,var(--cyan) 10%,var(--panel-bg)); }
.setup-nas-fields { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--deep-bg); }
.setup-nas-fields[hidden], #setupLibraryFolderField[hidden] { display: none; }
.setup-nas-fields > label { display: grid; gap: 7px; }
.setup-nas-fields summary { cursor: pointer; color: var(--text); }
.setup-nas-fields details .form-grid { margin-top: 12px; }
.setup-nas-fields small { color: var(--muted); line-height: 1.5; }
.setup-nas-fields .button { justify-self: start; white-space: normal; }
.setup-library-dialog-card > .panel-head { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: flex-start; }
.setup-library-dialog-card > .panel-head > div { min-width: 0; flex: 1; }
.setup-library-dialog-card > .panel-head > .icon-button { flex-shrink: 0; }
.setup-folder-toolbar { display: grid; grid-template-columns: auto auto minmax(0,1fr); align-items: center; gap: 8px; }
.setup-folder-toolbar code { min-width: 0; overflow: hidden; padding: 11px 12px; border: 1px solid var(--line); border-radius: 5px; color: var(--text); background: var(--field-bg); text-overflow: ellipsis; white-space: nowrap; }
.setup-folder-list { min-height: 240px; max-height: min(460px,52vh); overflow-y: auto; display: grid; align-content: start; gap: 6px; padding: 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--field-bg); }
.setup-folder-list > button { width: 100%; min-height: 58px; display: grid; grid-template-columns: 28px minmax(0,1fr) 18px; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid transparent; border-radius: 5px; color: var(--text); background: #0d1622; text-align: left; cursor: pointer; }
.setup-folder-list > button:hover,
.setup-folder-list > button:focus-visible { outline: 0; border-color: var(--cyan); background: var(--control-bg); }
.setup-folder-list strong,
.setup-folder-list small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.setup-folder-list small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.setup-folder-icon { color: var(--cyan); font-size: 17px; }
.vault-user-result { margin: 0; }
th { height: 42px; padding: 0 12px; color: #8090a4; border-bottom: 1px solid var(--line); background: #0c131d; font-size: 9px; text-align: left; text-transform: uppercase; white-space: nowrap; }
td { min-height: 56px; padding: 10px 12px; border-bottom: 1px solid rgba(166,190,220,.08); color: #cbd5e2; font-size: 11px; vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
tr:hover td { background: rgba(255,255,255,.018); }
.channel-title { display: flex; align-items: center; gap: 10px; }
.channel-logo-button { width: 42px; height: 34px; flex: 0 0 42px; display: grid; place-items: center; overflow: hidden; padding: 3px; border: 1px solid #3c5067; border-radius: 5px; color: var(--cyan); background: linear-gradient(145deg, rgba(255,255,255,.09), rgba(5,12,20,.8)); cursor: pointer; }
.channel-logo-button:hover { border-color: var(--magenta); box-shadow: 0 0 10px rgba(209,63,255,.32); }
.channel-logo-button img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.channel-logo-button span { font-size: 9px; font-weight: 900; }
.channel-logo-dialog .dialog-card { width: min(590px, calc(100vw - 32px)); display: grid; gap: 15px; }
.channel-logo-dialog .panel-head { margin-bottom: 0; }
.channel-logo-dialog .muted { margin: 0; }
.channel-logo-background { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 700; }
.channel-logo-background select { min-width: 220px; max-width: 100%; }
.channel-logo-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-height: 45vh; overflow: auto; }
.channel-logo-style { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11px; white-space: nowrap; }
.channel-logo-style select { min-width: 110px; max-width: 130px; }
.channel-logo-choice { display: grid; gap: 8px; padding: 8px; text-align: center; color: var(--text); background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: 8px; cursor: pointer; }
.channel-logo-choice:hover, .channel-logo-choice:focus-visible { border-color: var(--cyan); }
.channel-logo-choice:disabled { opacity: .45; cursor: default; }
.channel-logo-swatch { height: 90px; display: grid; place-items: center; overflow: hidden; border-radius: 5px; background: #cbd5e1; color: #101820; }
.channel-logo-swatch.dark { background: #101820; }
.channel-logo-swatch.light { background: #f8fafc; }
.channel-logo-swatch img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
@media (max-width: 520px) { .channel-logo-choices { grid-template-columns: 1fr; } }
.reset-channel-logo { padding: 0; border: 0; color: var(--cyan); background: transparent; font: inherit; cursor: pointer; }
.channel-number { width: 58px; min-height: 31px; padding: 5px 7px; color: #fff; border-color: #26394d; background: #09121d; font-size: 12px; font-weight: 850; }
.channel-title strong, .channel-title small { display: block; }
.channel-title small { color: var(--muted); margin-top: 2px; }
.channel-name-stack { min-width: 145px; }
.channel-name-stack small span { display: block; }
.channel-name { width: 100%; min-height: 31px; padding: 5px 8px; color: #f6f8fc; font-weight: 750; background: #09121d; border-color: #26394d; }
.channel-epg-preview { width: 308px; min-height: 48px; display: grid; gap: 5px; }
.channel-epg-preview.empty { padding: 8px 10px; border: 1px solid rgba(166,190,220,.16); border-radius: 5px; background: #0a1420; }
.channel-epg-preview.empty.dummy { border-color: rgba(255,194,71,.28); background: rgba(255,194,71,.055); }
.channel-epg-preview.empty strong, .channel-epg-preview.empty span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.channel-epg-preview.empty strong { color: #dbe8f5; font-size: 10px; }
.channel-epg-preview.empty span { margin-top: 3px; color: var(--muted); font-size: 9px; }
.epg-mini-status { width: 100%; min-width: 0; max-width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 6px; overflow: hidden; color: var(--muted); font-size: clamp(7px, .55vw, 9px); }
.epg-mini-status span { flex: 0 1 auto; min-width: 0; max-width: 42%; overflow: hidden; color: var(--cyan); font-weight: 900; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.epg-mini-status em { flex: 1 1 0; min-width: 0; max-width: 100%; overflow: hidden; text-align: right; text-overflow: ellipsis; white-space: nowrap; font-style: normal; }
.epg-mini-track { height: 42px; display: flex; gap: 4px; overflow: hidden; }
.epg-mini-block { min-width: 56px; height: 42px; padding: 6px 7px; overflow: hidden; border: 1px solid rgba(0,217,255,.2); border-radius: 5px; background: linear-gradient(135deg, rgba(0,217,255,.08), rgba(138,77,255,.08)); }
.epg-mini-block.new { border-color: rgba(0,217,255,.44); box-shadow: inset 0 0 0 1px rgba(0,217,255,.08); }
.epg-mini-block.dummy { border-color: rgba(255,194,71,.28); background: rgba(255,194,71,.06); }
.epg-mini-block strong, .epg-mini-block small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.epg-mini-block strong { color: #fff; font-size: 10px; line-height: 1.05; }
.epg-mini-block small { margin-top: 4px; color: #9fb0c4; font-size: 8px; }
td select { min-width: 105px; height: 34px; font-size: 10px; }
.channel-source-assignment { width: 142px; min-width: 142px; max-width: 150px; }
.map-button, .playback-fix-button { min-width: 132px; max-width: 230px; height: 34px; padding: 0 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #dbe8f5; border: 1px solid var(--line-strong); border-radius: 4px; background: #101925; cursor: pointer; text-align: left; font-size: 10px; }
.map-button.unmapped, .playback-fix-button.unmapped { color: #ffcb70; border-color: rgba(255,194,71,.35); }
.playback-fix-button.configured { color: #baf9e2; border-color: rgba(35,217,152,.38); background: rgba(35,217,152,.07); }
.channel-test-button { min-width: 68px; height: 34px; padding: 0 13px; white-space: nowrap; }
.channel-enabled-stack { width: 82px; display: flex; align-items: center; }
.channel-enabled-stack .channel-show-toggle { width: 82px; min-width: 82px; display: grid; grid-template-columns: 17px minmax(0, 1fr); align-items: center; gap: 7px; }
.channel-not-working-button { display: block; width: 22px; height: 22px; min-width: 22px; margin: auto; padding: 0; transform: none; border: 1px solid rgba(255, 105, 105, .44); border-radius: 5px; background: rgba(255, 75, 75, .07); color: #ff9a9a; font-size: 10px; line-height: 20px; font-weight: 900; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255,255,255,.025); }
.channel-not-working-button:hover, .channel-not-working-button:focus-visible { border-color: #ff6868; background: rgba(255, 75, 75, .2); color: #fff; }
.channel-not-working-button.active { background: #d63b45; border-color: #ff7a82; color: #fff; box-shadow: 0 0 0 3px rgba(214, 59, 69, .16); }
.channel-not-working { background: rgba(214, 59, 69, .045); }
.channel-plus-toggle { width: 72px; min-height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 8px; border: 1px solid rgba(98,232,255,.22); border-radius: 4px; color: #dbe8f5; background: #0b1420; font-size: 10px; font-weight: 850; }
.channel-plus-toggle.premium { border-color: rgba(255,194,71,.38); color: #ffe5a8; background: rgba(255,194,71,.055); }
.channel-plus-toggle input { width: 14px; height: 14px; accent-color: #35ddeb; }
.channel-plus-toggle input:disabled + span { color: #6f7f92; }
.compact-lead { margin: 4px 0 14px; font-size: 11px; }
.auto-playback-fix-source { margin-top: 12px; }
.pagination { margin-top: 14px; display: flex; align-items: center; justify-content: center; gap: 14px; }
.pagination span { color: var(--muted); font-size: 11px; }
.pagination label { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; }
.pagination input { width: 70px; text-align: center; }
.pagination select { min-width: 76px; }
.compact-pagination { margin-top: 8px; gap: 8px; }

.processing-columns { grid-template-columns: 1fr 1fr; }

.transcoder-page-intro {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.transcoder-page-intro > div {
  display: grid;
  gap: 6px;
  min-height: 92px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(32, 200, 193, .08), rgba(255, 255, 255, .025));
}

.transcoder-page-intro strong {
  color: var(--text);
  font-size: 14px;
}

.transcoder-page-intro span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

#transcoderPagePanels {
  display: grid;
  gap: 16px;
}
.server-identity-panel { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(280px, 420px); align-items: center; gap: 24px; }
.server-identity-panel > label { display: grid; gap: 7px; color: var(--muted); font-size: 10px; font-weight: 750; }
.server-identity-panel > label small { color: var(--muted); font-size: 9px; font-weight: 500; }
.server-identity-mark { display: flex; align-items: center; gap: 14px; min-width: 0; }
.server-identity-mark img { width: 54px; height: 54px; border-radius: 7px; object-fit: cover; box-shadow: 0 8px 26px rgba(0, 196, 255, .2); }
.server-identity-mark span, .server-identity-mark small, .server-identity-mark strong { display: block; min-width: 0; }
.server-identity-mark small { color: var(--accent); font-size: 9px; font-weight: 850; }
.server-identity-mark strong { margin-top: 4px; overflow: hidden; color: #f5fbff; font-size: 20px; text-overflow: ellipsis; white-space: nowrap; }
.toggle-list { display: grid; margin-bottom: 18px; }
.toggle-list label { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid rgba(166,190,220,.1); }
.toggle-list strong, .toggle-list small { display: block; }
.toggle-list strong { font-size: 12px; }
.toggle-list small { margin-top: 3px; color: var(--muted); font-size: 10px; }

.compat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.compat-grid label { min-height: 74px; padding: 13px; display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 5px; background: #0e1520; }
.client-letter { width: 39px; height: 39px; display: grid; place-items: center; color: var(--cyan); border: 1px solid rgba(0,217,255,.32); border-radius: 5px; font-size: 11px; font-weight: 900; }
.compat-grid strong, .compat-grid small { display: block; }
.compat-grid strong { font-size: 12px; }
.compat-grid small { margin-top: 4px; color: var(--muted); font-size: 10px; }
.endpoint-list { margin-top: 16px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.endpoint-list div { padding: 12px; border: 1px solid var(--line); border-radius: 4px; background: #0d141e; }
.endpoint-list span, .endpoint-list code { display: block; }
.endpoint-list span { color: var(--muted); font-size: 9px; text-transform: uppercase; }
.endpoint-list code { margin-top: 6px; color: #c7f7ff; font-size: 10px; }
.endpoint-directory { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 8px; margin-top: 12px; }
.endpoint-row { min-width: 0; min-height: 72px; padding: 10px 11px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: start; align-items: center; gap: 7px 9px; border: 1px solid var(--line); border-radius: 6px; background: #0d141e; }
.endpoint-row span, .endpoint-row code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.endpoint-row span { grid-column: 1 / -1; color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.endpoint-row code { color: #c7f7ff; font-size: 11px; }
.arr-settings { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.compact-head { margin-bottom: 12px; }
.compact-head h3 { margin: 3px 0 0; font-size: 15px; }
.arr-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.arr-grid section { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 6px; background: #0d141e; }
.arr-head { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.arr-head strong, .arr-head small { display: block; }
.arr-head small { margin-top: 3px; color: var(--muted); font-size: 11px; }

.state-label { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 850; }
.state-label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.state-label.streaming::before { background: var(--green); box-shadow: 0 0 8px rgba(38,223,148,.6); }
.state-label.listening::before, .state-label.watching::before { background: var(--green); box-shadow: 0 0 8px rgba(38,223,148,.6); }
.state-label.buffering::before, .state-label.starting::before { background: var(--cyan); box-shadow: 0 0 8px rgba(0,217,255,.55); }
.state-label.paused::before { background: var(--gold); box-shadow: 0 0 8px rgba(255,185,77,.45); }
.state-label.failed::before { background: var(--danger); }
.state-label.interrupted::before { background: var(--gold); }
.state-label.completed::before, .state-label.stopped::before, .state-label.ended::before { background: var(--cyan); }
.activity-state-detail { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }
.activity-delivery-detail { display: block; margin-top: 6px; color: var(--muted); line-height: 1.35; white-space: nowrap; }
.activity-state-timer { display: block; margin-top: 8px; color: var(--muted); line-height: 1.45; white-space: nowrap; }
.activity-stream-table td { min-height: 66px; padding-top: 14px; padding-bottom: 14px; vertical-align: middle; }
.activity-stream-table table { min-width:0; table-layout:fixed; }
.activity-stream-table th:nth-child(2) { width:26%; }
.activity-stream-table td { overflow-wrap:anywhere; }
.activity-stream-table .activity-delivery-detail { white-space:normal; }
.activity-stream-table th:nth-child(5), .activity-stream-table td:nth-child(5) { min-width:0; }
.activity-stream-table strong { font-size: 13px; }
.activity-stream-table small { font-size: 11px; line-height: 1.45; }
.activity-desktop-viewer { display:flex; align-items:center; gap:10px; min-width:0; }
.activity-desktop-viewer > div { min-width:0; }
.activity-viewer-avatar { flex:0 0 38px; width:38px; min-width:38px; max-width:38px; height:38px; min-height:38px; max-height:38px; border-radius:50%; display:inline-grid; place-items:center; overflow:hidden; background:var(--surface-3); border:1px solid var(--line); vertical-align:middle; }
.activity-viewer-avatar > span,.activity-viewer-avatar > img { grid-area:1 / 1; }
.activity-viewer-avatar img { width:38px; min-width:38px; max-width:38px; height:38px; min-height:38px; max-height:38px; display:block; object-fit:cover; border-radius:50%; }
.activity-viewer-avatar:has(img) > span { visibility:hidden; }
.activity-mobile-user .activity-viewer-avatar { width:25px; height:25px; margin-right:5px; font-size:10px; }
.activity-desktop-channel-identity { display:flex; align-items:center; gap:11px; min-width:0; }
.activity-desktop-channel-copy { display:grid; gap:3px; min-width:0; }
.activity-desktop-channel-copy strong,.activity-desktop-channel-copy small { display:block; min-width:0; overflow-wrap:anywhere; }
.activity-desktop-channel-logo { flex:0 0 43px; width:43px; height:38px; display:grid; place-items:center; overflow:hidden; border:1px solid var(--line); border-radius:8px; color:var(--cyan); background:rgba(0,0,0,.28); }
.activity-desktop-channel-logo > span { grid-area:1 / 1; font-size:10px; font-weight:850; }
.activity-desktop-channel-logo:has(img) > span { visibility:hidden; }
.activity-desktop-channel-logo img { width:100%; height:100%; grid-area:1 / 1; display:block; padding:3px; object-fit:contain; background:rgba(0,0,0,.25); }
.activity-stream-table tbody tr.activity-has-specs td { border-bottom:0; }
.page[data-page="overview"] .activity-stream-table tbody tr.activity-desktop-specs-row td { padding:0; background:color-mix(in srgb,var(--panel-bg) 92%,#000); }
.activity-desktop-media-poster { flex:0 0 58px; width:58px; height:87px; display:grid; place-items:center; overflow:hidden; border:1px solid var(--line); border-radius:7px; background:var(--panel-bg); color:var(--muted); }
.activity-desktop-media-poster > span,.activity-desktop-media-poster > img { grid-area:1 / 1; }
.activity-desktop-media-poster img { width:100%; height:100%; display:block; object-fit:cover; }
.activity-desktop-media-poster:has(img) > span { visibility:hidden; }
.activity-metadata-source { color:var(--muted); }
.activity-mobile-media-poster { flex:0 0 64px; width:64px; height:96px; object-fit:cover; border-radius:6px; }
.activity-desktop-specs { display:grid; grid-template-columns:repeat(auto-fit,minmax(145px,1fr)); gap:13px 18px; width:100%; padding:13px 17px; border-top:1px solid color-mix(in srgb,var(--line) 35%,transparent); }
.activity-desktop-specs > div { min-width:0; }
.activity-desktop-specs span,.activity-desktop-specs strong { display:block; overflow-wrap:anywhere; }
.activity-desktop-specs span { color:var(--muted); font-size:10px; font-weight:750; text-transform:uppercase; letter-spacing:.045em; }
.activity-desktop-specs strong { margin-top:3px; color:var(--text); font-size:12px; line-height:1.35; }
.activity-desktop-specs .activity-buffer-count.good strong { color:var(--green); }
.activity-desktop-specs .activity-buffer-count.warning strong { color:var(--gold); }
.activity-desktop-specs .activity-buffer-count.critical strong { color:var(--danger); }
.activity-desktop-specs .activity-buffer-count.unknown strong { color:var(--muted); }
@media (min-width:1400px) {
  .page[data-page="overview"] .activity-stream-table tbody tr.activity-desktop-specs-row td { background:color-mix(in srgb,var(--panel-bg) 68%,#000); }
  .activity-desktop-specs { grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:12px; }
  .activity-desktop-specs span,.activity-desktop-specs strong { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .activity-desktop-specs span { font-size:9px; }
}
.activity-stream-table .compact-actions .stop-stream { min-height:35px; gap:8px; padding:0 13px; border:1px solid color-mix(in srgb,var(--danger) 35%,var(--line)); border-radius:9px; background:color-mix(in srgb,var(--danger) 8%,var(--panel-bg)); color:color-mix(in srgb,var(--danger) 55%,var(--text)); font-size:12px; font-weight:800; box-shadow:inset 0 1px 0 rgba(255,255,255,.045); transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease; }
.activity-stream-table .compact-actions .stop-stream::before { content:""; width:9px; height:9px; flex:0 0 9px; border-radius:2px; background:currentColor; }
.activity-stream-table .compact-actions .stop-stream:hover:not(:disabled) { border-color:color-mix(in srgb,var(--danger) 65%,var(--line)); background:color-mix(in srgb,var(--danger) 16%,var(--panel-bg)); color:var(--danger); transform:translateY(-1px); }
.activity-stream-table .compact-actions .stop-stream:focus-visible { outline:2px solid var(--danger); outline-offset:2px; }

.storage-helper code { display: block; margin-top: 5px; overflow-wrap: anywhere; color: #c7f7ff; font-size: 10px; }
.transcoder-storage-grid { margin-top: 13px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.transcoder-storage-grid > div { min-width: 0; padding: 11px 12px; border: 1px solid var(--line); border-radius: 5px; background: #0d141e; }
.transcoder-storage-grid span, .transcoder-storage-grid strong, .transcoder-storage-grid small { display: block; }
.transcoder-storage-grid span { color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.transcoder-storage-grid strong { margin-top: 5px; color: #eefaff; font-size: 12px; }
.transcoder-storage-grid small { margin-top: 4px; overflow-wrap: anywhere; color: var(--muted); font-size: 9px; line-height: 1.35; }

.activity-metric-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: 14px; border: 1px solid var(--line); border-radius: 6px; background: #091019; }
.activity-metric-strip > div { min-width: 0; min-height: 86px; padding: 15px 18px; border-right: 1px solid var(--line); }
.activity-metric-strip > div:last-child { border-right: 0; }
.activity-metric-strip span, .activity-metric-strip strong, .activity-metric-strip small { display: block; }
.activity-metric-strip span { color: #77879b; font-size: 9px; font-weight: 850; }
.activity-metric-strip strong { margin: 8px 0 3px; overflow: hidden; color: #f6f9fc; font-size: 22px; text-overflow: ellipsis; white-space: nowrap; }
.activity-metric-strip small { color: var(--muted); font-size: 10px; }
.activity-metric-strip > div:nth-child(1) strong, .activity-metric-strip > div:nth-child(5) strong { color: var(--cyan); }
.activity-metric-strip > div:nth-child(4) strong { color: #df82ff; }
.activity-tuner-band { margin-bottom: 18px; padding: 13px 15px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(10, 17, 26, .65); }
.activity-band-head, .activity-section-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.activity-band-head { margin-bottom: 10px; }
.activity-band-head h3, .activity-section-head h3 { margin: 2px 0 0; font-size: 15px; }
.activity-tuner-list { width: 100%; display: grid; grid-template-columns: repeat(var(--tuner-columns, 4), minmax(0, 1fr)); gap: 10px; padding-bottom: 2px; }
.activity-tuner { width: 100%; min-width: 0; min-height: 68px; box-sizing: border-box; padding: 9px 10px; display: grid; grid-template-columns: 36px minmax(0, 1fr) 34px; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 5px; background: #0c141f; }
.activity-tuner.offline { border-color: rgba(255, 93, 119, .32); opacity: .78; }
.activity-tuner .source-symbol { width: 34px; height: 34px; font-size: 8px; }
.activity-tuner strong, .activity-tuner small, .tuner-availability b { display: block; }
.activity-tuner strong { min-width: 0; overflow: hidden; font-size: 11px; line-height: 1.18; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.activity-tuner small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.activity-tuner-list[data-density="spacious"] .activity-tuner { min-height: 80px; padding: 13px 15px; grid-template-columns: 50px minmax(0, 1fr) auto; }
.activity-tuner-list[data-density="spacious"] .activity-tuner .source-symbol { width: 48px; height: 48px; font-size: 10px; }
.activity-tuner-list[data-density="spacious"] .activity-tuner strong { font-size: 13px; }
.activity-tuner-list[data-density="compact"] { gap: 7px; }
.activity-tuner-list[data-density="compact"] .activity-tuner { min-height: 56px; padding: 7px 9px; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 8px; }
.activity-tuner-list[data-density="compact"] .activity-tuner .source-symbol { width: 32px; height: 32px; font-size: 8px; }
.activity-tuner-list[data-density="compact"] .activity-tuner strong { font-size: 10px; }
.activity-tuner-list[data-density="compact"] .activity-tuner small { font-size: 8px; }
.tuner-availability { min-width: 34px; text-align: right; }
.tuner-availability b { color: var(--cyan); font-size: 14px; }
.activity-section-head { margin: 20px 0 10px; }
.history-head { margin-top: 28px; }
.activity-filters { display: flex; align-items: end; gap: 8px; }
.activity-filters label { color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.activity-filters select { display: block; min-width: 145px; height: 34px; margin-top: 4px; }
.history-table { max-height: 560px; }
.history-pagination { margin-top: 10px; margin-bottom: 4px; }
.delivery-pill { color: #daf9ff; border-color: rgba(0, 217, 255, .28); background: rgba(0, 217, 255, .06); }
.history-error { display: block; max-width: 310px; color: #ff91a4; line-height: 1.4; }

.overview-status-panel { margin-bottom: 22px; padding: 16px; border: 1px solid var(--line); border-radius: 6px; background: #091019; box-shadow: var(--shadow); }
.overview-status-head { margin-bottom: 13px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.overview-status-head h2 { margin: 2px 0 0; font-size: 20px; }
.overview-status-head p:not(.eyebrow) { margin: 5px 0 0; color: var(--muted); font-size: 11px; }
.command-status-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; }
.command-status-grid .metric { min-height: 96px; padding: 13px 14px; border: 1px solid var(--line); background: #0d1722; }
.command-status-grid .metric::before,
.command-status-grid .metric:nth-child(n)::before { margin-bottom: 10px; background: var(--cyan); box-shadow: 0 0 9px rgba(0, 217, 255, .35); }
.command-status-grid .metric strong { font-size: clamp(18px, 1.45vw, 25px); }
.command-status-grid .metric .metric-text { font-size: 15px; line-height: 1.25; white-space: normal; }
.command-status-grid .metric small { line-height: 1.35; }
.command-status-grid #metricTunerUsage { margin-top: 3px; color: var(--cyan); }
.cpu-metric-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: 8px; }
.cpu-metric-pair > div + div { padding-left: 8px; border-left: 1px solid var(--line); }
.cpu-metric-pair small { margin: 0 0 3px; color: var(--muted); font-size: 8px; text-transform: uppercase; }
.command-status-grid .cpu-metric-pair strong { font-size: clamp(14px, 1.1vw, 20px); white-space: nowrap; }
.command-status-grid .viewer-limit-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 6px; }
.command-status-grid .viewer-limit-pair > div + div { padding-left: 6px; border-left: 1px solid var(--line); }
.command-status-grid .viewer-limit-pair small { margin-top: 3px; font-size: 7px; line-height: 1.1; text-transform: uppercase; white-space: nowrap; }
.command-status-grid .viewer-limit-pair strong { margin-top: 6px; font-size: clamp(14px, 1.1vw, 20px); line-height: 1; white-space: nowrap; }
.overview-status-panel .activity-tuner-band { margin: 12px 0 0; padding: 15px 0 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; }
.overview-connections-panel { margin-top: 22px; }
.viewing-insights-section { --insight-poster-width: clamp(76px, 5vw, 140px); margin-top: 24px; padding: clamp(12px, 1.2vw, 20px); border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(145deg, rgba(12,31,51,.78), rgba(5,17,31,.94)); box-shadow: 0 18px 46px rgba(0,0,0,.2); }
.insights-head { margin-top: 0; }
.insight-subhead { margin: clamp(15px, 1.2vw, 21px) 0 12px; padding-right: clamp(18px, 2vw, 48px); display: flex; align-items: end; justify-content: space-between; gap: 14px; }
.insight-subhead h4 { margin: 0; font-size: clamp(13px, .86vw, 16px); letter-spacing: .01em; }
.top-users-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: clamp(10px, .8vw, 15px); padding: 2px 2px 12px; }
.top-user-card { min-width: 0; min-height: clamp(190px, 11vw, 260px); padding: clamp(15px, 1vw, 22px); display: grid; grid-template-columns: clamp(54px, 3.5vw, 96px) minmax(0, 1fr); align-content: start; column-gap: clamp(11px, .8vw, 18px); color: inherit; border: 1px solid rgba(93,183,225,.22); border-radius: 11px; background: linear-gradient(145deg, #102942, #091a2c 72%); box-shadow: 0 10px 26px rgba(0,0,0,.2), inset 0 1px rgba(255,255,255,.025); font: inherit; text-align: left; cursor: pointer; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.top-user-card:hover, .top-user-card:focus-visible { border-color: var(--cyan); box-shadow: 0 14px 34px rgba(0,0,0,.28), 0 0 0 1px rgba(0,217,255,.12); outline: none; transform: translateY(-2px); }
.insight-avatar { position: relative; width: clamp(54px, 3.5vw, 96px); height: clamp(54px, 3.5vw, 96px); display: grid; place-items: center; overflow: hidden; color: #061018; border: 2px solid rgba(123,222,255,.55); border-radius: 50%; background: linear-gradient(145deg, #67dcff, #15a7d2); box-shadow: 0 7px 18px rgba(0,0,0,.3); font-size: clamp(14px, 1vw, 21px); font-weight: 900; }
.insight-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.top-user-summary { align-self: center; min-width: 0; }
.top-user-summary strong, .top-user-summary span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-user-summary strong { color: #f2f8ff; font-size: clamp(15px, 1vw, 18px); }
.top-user-summary span { margin-top: 5px; color: #9db2c7; font-size: clamp(11px, .7vw, 13px); }
.top-user-breakdown { grid-column: 1 / -1; margin-top: clamp(13px, 1vw, 18px); padding-top: clamp(10px, .8vw, 14px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; border-top: 1px solid rgba(115,164,202,.18); }
.top-user-breakdown span { display: flex; justify-content: space-between; gap: 8px; color: #91a8bd; font-size: clamp(10px, .65vw, 12px); }
.top-user-breakdown b { color: #dce6f1; }
.top-played-heading { margin-top: clamp(24px, 1.8vw, 32px); }
.top-played-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); align-items: stretch; gap: clamp(10px, .8vw, 15px); }
.insight-ranking { min-width: 0; height: 100%; overflow: hidden; display: flex; flex-direction: column; border: 1px solid rgba(93,183,225,.2); border-radius: 11px; background: linear-gradient(155deg, #0d2237, #081624 74%); box-shadow: 0 10px 28px rgba(0,0,0,.2); }
.insight-ranking > :last-child { flex: 1; }
.insight-ranking-head { height: clamp(48px, 3vw, 56px); padding: 0 clamp(13px, .9vw, 17px); display: flex; align-items: center; gap: 10px; border-bottom: 1px solid rgba(115,164,202,.17); background: rgba(16,45,72,.7); }
.insight-ranking-head svg { width: clamp(17px, 1.1vw, 21px); height: clamp(17px, 1.1vw, 21px); color: var(--cyan); }
.insight-ranking-head h5 { margin: 0; color: #edf7ff; font-size: clamp(13px, .85vw, 16px); }
.insight-row { min-width: 0; min-height: calc(var(--insight-poster-width) * 1.45 + 20px); padding: 10px clamp(10px, .8vw, 15px); display: grid; grid-template-columns: var(--insight-poster-width) minmax(0, 1fr); align-items: center; gap: clamp(11px, .8vw, 16px); border-bottom: 1px solid rgba(166,190,220,.09); transition: background .15s ease; }
.insight-row:hover { background: rgba(41,113,154,.12); }
.insight-row:last-child { border-bottom: 0; }
.insight-art { position: relative; width: var(--insight-poster-width); height: calc(var(--insight-poster-width) * 1.45); display: grid; place-items: center; overflow: hidden; color: #9db2c7; border: 1px solid rgba(139,191,226,.28); border-radius: 7px; background: linear-gradient(145deg, #17324a, #0d1c2b); box-shadow: 0 8px 20px rgba(0,0,0,.28); font-size: clamp(13px, .8vw, 16px); font-weight: 850; }
.insight-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.insight-art-fallback { color: #7892a9; font-size: clamp(10px, .7vw, 13px); font-weight: 900; letter-spacing: .12em; }
.channel-ranking .insight-row { min-height: clamp(92px, 6vw, 112px); grid-template-columns: clamp(102px, 7vw, 132px) minmax(0, 1fr); }
.channel-ranking .insight-art { width: clamp(102px, 7vw, 132px); height: clamp(64px, 4.5vw, 82px); padding: 7px; background: #111c28; }
.channel-ranking .insight-art img { object-fit: contain; }
.insight-row strong, .insight-row span, .insight-row small { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.insight-row strong { color: #f0f6fc; font-size: clamp(12px, .76vw, 14px); line-height: 1.3; }
.insight-row span { margin-top: 8px; color: #94aabe; font-size: clamp(10px, .64vw, 12px); }
.insight-row small { margin-top: 5px; color: var(--cyan); font-size: clamp(9px, .58vw, 11px); font-weight: 750; }
.insight-viewer-button { padding: 0; color: var(--cyan); border: 0; border-bottom: 1px solid rgba(0,217,255,.45); background: transparent; font: inherit; cursor: pointer; }
.insight-viewer-button:hover, .insight-viewer-button:focus-visible { color: #bdf8ff; border-bottom-color: #bdf8ff; outline: 0; }
.insight-viewer-button:disabled { color: inherit; border-bottom-color: transparent; cursor: default; }
.insight-ranking .empty-state.compact { min-height: 86px; display: grid; place-items: center; }
.top-user-history-dialog { width: min(1640px, calc(100vw - 32px)); max-width: none; }
.top-user-history-dialog .dialog-card { padding: 20px; }
.user-history-table { max-height: min(650px, calc(100vh - 190px)); }
.user-history-table td strong { color: #eef4fb; }
.user-history-filters { margin: 12px 0; display: flex; justify-content: flex-end; gap: 10px; }
.user-history-filters label { min-width: 150px; color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.user-history-filters select { width: 100%; margin-top: 4px; }

@media (max-width: 820px) {
  .top-played-grid { grid-template-columns: 1fr; }
}

@media (min-width: 1800px) {
  .top-user-breakdown { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .top-user-breakdown span { display: grid; gap: 5px; }
}

@media (max-width: 520px) {
  .viewing-insights-section { --insight-poster-width: 76px; padding: 12px; }
  .top-users-grid { grid-template-columns: 1fr; }
  .top-user-card { min-height: 188px; }
  .insight-subhead { padding-right: 0; display: block; }
}

dialog { width: min(680px, calc(100vw - 32px)); padding: 0; overflow-x: hidden; color: var(--text); border: 1px solid var(--line-strong); border-radius: 7px; background: #0b111a; box-shadow: 0 28px 90px rgba(0,0,0,.72); }
dialog::backdrop { background: rgba(2,4,8,.78); }
.dialog-card { padding: 23px; }
#captureDialog { width: min(820px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: hidden; }
#captureDialog .capture-dialog-card { height: min(860px, calc(100vh - 32px)); max-height: calc(100vh - 32px); padding: 0; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; overflow: hidden; }
#captureDialog [hidden] { display: none !important; }
.capture-dialog-head { margin: 0; padding: 22px 24px 16px; align-items: center; border-bottom: 1px solid rgba(166,190,220,.08); }
.capture-dialog-head h2 { margin: 2px 0 0; }
.capture-dialog-subtitle { max-width: 610px; margin: 7px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.capture-step-strip { padding: 13px 24px 14px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; border-bottom: 1px solid rgba(166,190,220,.08); background: rgba(4,8,13,.44); }
.capture-step-strip button { min-width: 0; min-height: 54px; padding: 9px 11px; display: grid; grid-template-columns: 28px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 9px; align-items: center; color: var(--muted); border: 1px solid var(--line); border-radius: 6px; background: rgba(255,255,255,.018); cursor: pointer; text-align: left; transition: border-color .16s ease, background .16s ease, color .16s ease; }
.capture-step-strip button:hover { color: #d8e1ec; border-color: var(--line-strong); background: rgba(255,255,255,.032); }
.capture-step-strip button > span { grid-row: 1 / 3; width: 27px; height: 27px; display: grid; place-items: center; color: #9eacbd; border: 1px solid var(--line-strong); border-radius: 50%; font-size: 10px; font-weight: 850; }
.capture-step-strip button strong, .capture-step-strip button small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.capture-step-strip button strong { color: #c6d0dd; font-size: 11px; }
.capture-step-strip button small { font-size: 9px; }
.capture-step-strip button.active, .capture-step-strip button[aria-current="step"] { color: #dffaff; border-color: rgba(0,217,255,.52); background: rgba(0,217,255,.075); box-shadow: inset 0 -2px 0 var(--cyan); }
.capture-step-strip button.active > span, .capture-step-strip button[aria-current="step"] > span { color: #061018; border-color: var(--cyan); background: var(--cyan); }
.capture-step-strip button.complete > span { color: #07130e; border-color: #41dda1; background: #41dda1; }
.capture-dialog-scroll { min-height: 0; padding: 0 24px 24px; overflow-y: auto; overflow-x: hidden; scrollbar-gutter: stable; }
.capture-panel { display: block; padding-top: 21px; }
.capture-panel-heading { margin-bottom: 15px; }
.capture-panel-heading h3 { margin: 3px 0 0; font-size: 18px; }
.capture-panel-heading > p:last-child { margin: 6px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.capture-panel .helper-box { margin-top: 0; }
.capture-panel .form-grid { margin-top: 16px; }
.capture-dialog-card .form-grid label > small { color: var(--muted); font-size: 10px; font-weight: 500; line-height: 1.4; }
.capture-recommendation { margin-top: 12px; }
.capture-recommendation article { padding: 14px 15px; border: 1px solid rgba(166,190,220,.18); border-radius: 7px; background: linear-gradient(135deg, rgba(18,29,43,.96), rgba(10,16,25,.96)); }
.capture-recommendation article.network-field { border-color: rgba(0,217,255,.27); background: linear-gradient(135deg, rgba(0,217,255,.065), rgba(10,16,25,.96) 58%); }
.capture-recommendation strong { display: block; margin-top: 6px; color: #eef5fc; font-size: 13px; }
.capture-recommendation p { margin: 5px 0 0; color: #aab8c9; font-size: 11px; line-height: 1.5; }
.capture-recommendation-label { display: inline-flex; padding: 4px 7px; color: #ffd98e; border: 1px solid rgba(255,194,71,.28); border-radius: 999px; background: rgba(255,194,71,.07); font-size: 8px; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.capture-recommendation-label.recommended { color: #a7f7ff; border-color: rgba(0,217,255,.32); background: rgba(0,217,255,.075); }
.capture-hardware-guidance { margin-top: 16px; display: grid; gap: 11px; }
.capture-signal-warning, .capture-address-warning, .capture-known-good { padding: 15px; border-radius: 7px; }
.capture-signal-warning { color: #ffdbe1; border: 1px solid rgba(255,93,119,.5); background: linear-gradient(135deg, rgba(255,93,119,.14), rgba(52,15,23,.2)); }
.capture-signal-warning strong { display: block; color: #ffe5e9; font-size: 14px; }
.capture-signal-warning p { margin: 7px 0 0; color: #e8c5cb; font-size: 11px; line-height: 1.55; }
.capture-address-warning { color: #f7deb0; border: 1px solid rgba(255,174,65,.42); background: linear-gradient(135deg, rgba(255,158,53,.11), rgba(52,35,15,.16)); }
.capture-address-warning strong, .capture-address-warning small { display: block; }
.capture-address-warning strong { color: #ffe2a8; font-size: 13px; }
.capture-address-warning p { margin: 7px 0; color: #d8c7a8; font-size: 11px; line-height: 1.55; }
.capture-address-warning small { color: #bda982; font-size: 10px; line-height: 1.45; }
.capture-known-good { border: 1px solid rgba(0,217,255,.25); background: rgba(0,217,255,.045); }
.capture-known-good > div:first-child > strong { display: block; margin-top: 3px; color: #e7f8fb; font-size: 12px; }
.capture-known-good > p { margin: 10px 0 0; color: #aebdcd; font-size: 11px; line-height: 1.55; }
.capture-known-good > small { display: block; margin-top: 8px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.capture-profile-grid { margin-top: 12px; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
.capture-profile-grid > div { min-width: 0; padding: 11px; border: 1px solid rgba(166,190,220,.13); border-radius: 5px; background: rgba(3,9,15,.42); }
.capture-profile-grid b, .capture-profile-grid span { display: block; }
.capture-profile-grid b { margin-bottom: 6px; color: var(--cyan); font-size: 10px; text-transform: uppercase; }
.capture-profile-grid span { color: #aebdcd; font-size: 10px; line-height: 1.45; }
.capture-advanced { margin-top: 17px; padding: 14px; border: 1px solid rgba(166,190,220,.15); border-radius: 7px; background: rgba(5,10,17,.55); }
.capture-advanced-heading { margin-bottom: 12px; }
.capture-advanced-heading strong, .capture-advanced-heading small { display: block; }
.capture-advanced-heading strong { color: #d9e2ed; font-size: 12px; }
.capture-advanced-heading small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.capture-advanced .form-grid { margin-top: 0; }
#captureDialog .advanced-only.profile-required:not([hidden]) { display: grid !important; }
#captureDialog .capture-advanced.advanced-only.profile-required:not([hidden]) { display: block !important; }
#captureDialog .source-visibility.advanced-only.profile-required:not([hidden]) { display: flex !important; }
.capture-test-status { min-height: 46px; display: flex; align-items: center; line-height: 1.45; }
.capture-panel-actions { margin-top: 11px; display: flex; justify-content: flex-end; gap: 9px; flex-wrap: wrap; }
.capture-control-actions { justify-content: flex-start; }
.developer-support-files { margin-top: 11px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.developer-support-files > strong { color: #d9e2ed; font-size: 11px; white-space: nowrap; }
.developer-support-files > div { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.adb-calibration-dialog { width: min(1040px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; }
.calibration-sample { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.calibration-sample label { display: grid; gap: 6px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.calibration-sample-help { grid-column: 1 / -1; margin: 0; color: #ffd9a0; font-size: 11px; line-height: 1.5; }
.calibration-screen { display: block; width: 100%; padding: 0; overflow: hidden; border: 2px solid color-mix(in srgb, var(--accent) 72%, transparent); border-radius: 14px; background: #000; cursor: crosshair; }
.calibration-screen img { display: block; width: 100%; height: auto; min-height: 240px; object-fit: contain; }
.calibration-super-user { border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: var(--panel-soft); }
.calibration-super-user summary { cursor: pointer; font-weight: 800; }
.calibration-super-user textarea { width: 100%; margin-top: 10px; min-height: 240px; resize: vertical; font: 12px/1.45 ui-monospace, SFMono-Regular, Consolas, monospace; }

@media (max-width: 700px) {
  .calibration-sample { grid-template-columns: 1fr; }
  .calibration-sample-help { grid-column: 1; }
  .adb-calibration-dialog { width: calc(100vw - 18px); max-height: calc(100vh - 18px); }
}
.capture-review { display: grid; gap: 9px; }
.capture-review-empty { padding: 22px; color: var(--muted); border: 1px dashed var(--line-strong); border-radius: 7px; background: rgba(255,255,255,.018); font-size: 11px; line-height: 1.5; text-align: center; }
.capture-review-row { min-height: 58px; padding: 12px 14px; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 14px; border: 1px solid var(--line); border-radius: 6px; background: #0e1520; }
.capture-review-row strong, .capture-review-row small { display: block; }
.capture-review-row small { margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.4; }
.capture-review-row > span:last-child { color: #c9d4df; font-size: 10px; font-weight: 800; }
.capture-review-row.good { border-color: rgba(38,223,148,.34); }
.capture-review-row.good > span:last-child { color: #79f6bb; }
.capture-review-row.warn { border-color: rgba(255,194,71,.38); }
.capture-review-row.warn > span:last-child { color: #ffd37c; }
.capture-dialog-actions { min-height: 70px; padding: 13px 24px; display: flex; align-items: center; gap: 9px; border-top: 1px solid var(--line); background: rgba(7,12,19,.97); box-shadow: 0 -12px 30px rgba(0,0,0,.18); }
.capture-dialog-action-spacer { flex: 1 1 auto; }
.authorization-check { margin-top: 14px; padding: 13px 14px; display: flex !important; flex-direction: row !important; align-items: flex-start; gap: 11px !important; color: var(--text) !important; border: 1px solid rgba(255,158,53,.32); border-radius: 6px; background: rgba(255,158,53,.055); text-transform: none !important; letter-spacing: 0 !important; }
.authorization-check input { margin-top: 3px; flex: 0 0 auto; }
.authorization-check strong, .authorization-check small { display: block; }
.authorization-check small { margin-top: 4px; color: var(--muted); font-weight: 500; line-height: 1.4; }
dialog:has(> .wide-dialog) { width: min(940px, calc(100vw - 32px)); }
.wide-dialog { width: 100%; min-width: 0; box-sizing: border-box; }
#plexMigrationDialog { width:min(720px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); overflow:hidden; border-radius:13px; background:var(--panel-bg); }
.plex-migration-card { width:100%; max-height:calc(100dvh - 24px); padding:0; display:grid; grid-template-rows:auto minmax(0,1fr) auto; }
.plex-migration-head { margin:0; padding:18px 20px 15px; align-items:flex-start; border-bottom:1px solid var(--line); }
.plex-migration-head h2 { margin:3px 0 0; font-size:19px; }
.plex-migration-head p:last-child { max-width:570px; margin:6px 0 0; color:var(--muted); font-size:11px; line-height:1.45; }
.plex-migration-body { min-height:0; padding:13px 20px 16px; display:flex; flex-direction:column; }
.plex-migration-list-head { display:flex; align-items:center; justify-content:space-between; gap:12px; color:var(--text); font-size:12px; }
.plex-migration-list-head span { color:var(--muted); font-size:10px; font-weight:700; }
#plexMigrationProfiles { min-height:0; max-height:390px; margin-top:10px; padding-right:3px; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; overflow-y:auto; scrollbar-gutter:stable; }
#plexMigrationProfiles .selection-row { min-height:51px; padding:6px 9px; grid-template-columns:18px 32px minmax(0,1fr); gap:8px; border-radius:8px; background:color-mix(in srgb,var(--surface-2) 75%,var(--panel-bg)); cursor:pointer; }
#plexMigrationProfiles .selection-row:has(input:checked) { border-color:color-mix(in srgb,var(--cyan) 55%,var(--line)); background:color-mix(in srgb,var(--cyan) 9%,var(--panel-bg)); }
#plexMigrationProfiles .source-avatar { width:32px; height:32px; border-radius:50%; }
#plexMigrationProfiles .source-avatar img { border-radius:50%; }
#plexMigrationProfiles .plex-profile-copy { min-width:0; }
#plexMigrationProfiles .plex-profile-copy strong,#plexMigrationProfiles .plex-profile-copy small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#plexMigrationProfiles .plex-profile-copy strong { font-size:11px; }
#plexMigrationProfiles .plex-profile-copy small { font-size:9px; }
.plex-migration-footer { padding:12px 20px 17px; border-top:1px solid var(--line); background:color-mix(in srgb,var(--panel-bg) 90%,#000); }
.plex-migration-consent { min-height:0; padding:10px 12px; grid-template-columns:22px minmax(0,1fr); gap:12px; border-radius:8px; background:color-mix(in srgb,var(--gold) 7%,var(--panel-bg)); }
.plex-migration-consent small { line-height:1.35; }
.plex-migration-note { margin:10px 2px 0; color:var(--muted-strong); font-size:11px; line-height:1.45; }
.plex-migration-legal { margin:5px 2px 0; color:var(--muted); font-size:10px; line-height:1.4; }
.plex-migration-footer .button-row { margin-top:13px; }
@media (max-width:620px) { #plexMigrationDialog { width:calc(100vw - 16px); max-height:calc(100dvh - 16px); } .plex-migration-card { max-height:calc(100dvh - 16px); } .plex-migration-head { padding:15px 15px 12px; } .plex-migration-body { padding:12px 15px; } #plexMigrationProfiles { grid-template-columns:1fr; } .plex-migration-footer { padding:11px 15px 14px; } }
#guideChannelSelectionDialog .dialog-card { width: 100%; min-width: 0; box-sizing: border-box; overflow-x: hidden; }
#guideProfileDialog { width: min(1180px, calc(100vw - 28px)); }
#guideProfileDialog .dialog-card { max-height: calc(100vh - 42px); overflow: auto; }
#guideProfileDialog .guide-builder .picker-grid.tall { max-height: 360px; }

@media (max-width: 720px) {
  #captureDialog { width: calc(100vw - 18px); max-height: calc(100vh - 18px); }
  #captureDialog .capture-dialog-card { height: calc(100vh - 18px); max-height: calc(100vh - 18px); }
  .capture-dialog-head { padding: 18px 17px 14px; }
  .capture-dialog-subtitle { display: none; }
  .capture-step-strip { padding: 10px 17px 11px; gap: 5px; }
  .capture-step-strip button { min-height: 45px; padding: 7px; grid-template-columns: 25px minmax(0,1fr); column-gap: 7px; }
  .capture-step-strip button > span { width: 24px; height: 24px; }
  .capture-step-strip button small { display: none; }
  .capture-dialog-scroll { padding: 0 17px 19px; }
  .capture-profile-grid { grid-template-columns: 1fr; }
  .capture-dialog-actions { min-height: 64px; padding: 10px 17px; flex-wrap: wrap; }
  .capture-dialog-actions .button { flex: 1 1 auto; }
  .capture-dialog-action-spacer { display: none; }
}

@media (max-width: 1150px) {
  .transcoder-page-intro { grid-template-columns: 1fr; }
  .first-run-hero,
  .setup-guide-card,
  .setup-metadata-card { grid-template-columns: 1fr; }
  .setup-metadata-card .button { justify-self: start; }
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .two-column, .guide-columns, .processing-columns, .guide-builder { grid-template-columns: 1fr; }
  .server-identity-panel { grid-template-columns: 1fr; }
  .two-column .panel + .panel { margin-top: 0; }
  .endpoint-list { grid-template-columns: repeat(2, 1fr); }
  .tuner-status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .activity-metric-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .activity-metric-strip > div:nth-child(3) { border-right: 0; }
  .activity-metric-strip > div:nth-child(n+4) { border-top: 1px solid var(--line); }
  .activity-tuner-list { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
}

@media (max-width: 820px) {
  .app-shell { display: block; }
  .sidebar { position: static; width: 100%; height: auto; padding: 14px; border-right: 0; border-bottom: 1px solid var(--line); }
  .sidebar::after, .sidebar-foot { display: none; }
  .brand { margin: 0 0 12px; min-height: 48px; }
  .brand-mark { width: 44px; height: 44px; flex-basis: 44px; }
  .tuner-status-grid { grid-template-columns: 1fr; }
  .activity-tuner-list { grid-template-columns: 1fr; }
  .transcoder-storage-grid { grid-template-columns: 1fr; }
  .primary-guide-setup-layout { grid-template-columns: 1fr; }
  nav { display: flex; overflow-x: auto; }
  .nav-item, .nav-launch { width: auto; min-width: max-content; height: 40px; }
  main { padding: 0 16px 40px; }
  .topbar { min-height: 84px; }
  .top-actions .save-state, .top-actions a { display: none; }
  .setup-layout { grid-template-columns: 1fr; }
  .setup-steps { position: static; display: flex; overflow-x: auto; }
  .setup-steps button { min-width: 180px; }
  .setup-content .panel { min-height: 0; }
  .setup-action-grid,
  .setup-source-choices,
  .first-run-scoreboard { grid-template-columns: 1fr; }
  .setup-folder-toolbar { grid-template-columns: 1fr 1fr; }
  .setup-folder-toolbar code { grid-column: 1 / -1; }
  .arr-grid, .compat-grid, .client-grid, .device-groups, .tested-source-grid { grid-template-columns: 1fr; }
  .source-flow { grid-template-columns: 1fr; gap: 8px; }
  .source-flow i { width: 1px; height: 12px; }
  .section-tabs { overflow-x: auto; }
  .section-tabs button { min-width: max-content; }
  .filter-bar { grid-template-columns: 1fr 1fr; }
  .result-count { display: none; }
  .activity-metric-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .activity-metric-strip > div { border-top: 1px solid var(--line); }
  .activity-metric-strip > div:nth-child(-n+2) { border-top: 0; }
  .activity-metric-strip > div:nth-child(odd) { border-right: 1px solid var(--line); }
  .activity-metric-strip > div:nth-child(even) { border-right: 0; }
}

@media (max-width: 560px) {
  .metric-grid, .form-grid, .compat-grid, .endpoint-list { grid-template-columns: 1fr; }
  .form-grid .wide { grid-column: auto; }
  .topbar { align-items: flex-start; padding: 18px 0; }
  .topbar h1 { font-size: 23px; }
  .top-actions .secondary { display: none; }
  .top-actions .power-button { display: inline-flex; }
  .local-roku-address, .remote-result, .remote-monitor-result { grid-template-columns: 1fr; }
  .remote-choice-tabs { grid-template-columns: 1fr; }
  .dummy-guide-panel { grid-template-columns: 24px 1fr; }
  .dummy-guide-panel label, .dummy-guide-panel .button { grid-column: 2; }
  .section-toolbar { display: block; }
  .section-toolbar > div:last-child { margin-top: 13px; flex-wrap: wrap; }
  .signal-path { grid-template-columns: 1fr; gap: 12px; }
  .signal-path i { width: 1px; height: 18px; margin: auto; }
  .filter-bar { grid-template-columns: 1fr; }
  .source-row { grid-template-columns: 40px 1fr; }
  .source-meta, .source-row .row-actions { grid-column: 2; }
  .vault-user-storage-head { grid-template-columns: 42px 1fr; }
  .vault-user-storage-head .pill { grid-column: 2; justify-self: start; }
  .vault-user-storage-stats { grid-template-columns: 1fr; }
  .vault-user-folder-flow { min-width: 0; grid-template-columns: minmax(0,1fr) 34px minmax(0,1fr); }
  .vault-user-folder-flow .button { min-width: 0; white-space: normal; }
  .vault-user-folder-flow .vault-user-delete { grid-column: 1 / -1; }
  .vault-user-storage .button-row { justify-content: stretch; }
  .vault-user-storage .button-row .button { flex: 1 1 180px; }
  .mapping-summary { grid-template-columns: auto 1fr; }
  .activity-metric-strip { grid-template-columns: 1fr; }
  .activity-metric-strip > div { border-top: 1px solid var(--line); border-right: 0 !important; }
  .activity-metric-strip > div:first-child { border-top: 0; }
  .activity-section-head { align-items: flex-start; }
  .activity-filters { width: 100%; margin-top: 10px; }
  .history-head { display: block; }
  .first-run-hero { padding: 20px; }
  .first-run-copy h2 { font-size: 30px; }
  .setup-pane-head,
  .setup-note,
  .setup-review-row,
  .connection-card { grid-template-columns: 1fr; }
  .setup-source-choices article { grid-template-columns: 38px minmax(0, 1fr); }
  .setup-source-choices article .button { grid-column: 1 / -1; }
}

/* Unified TideView shell. The Retro palette preserves the original Control skin. */
:root {
  --bg-soft: #080c12;
  --header-bg: rgba(5, 7, 11, .97);
  --panel-bg: #0b111a;
  --field-bg: #080d14;
  --deep-bg: #08141c;
  --control-bg: #101722;
  --muted-strong: #cbd6e4;
  --primary-bg: #7d2fdb;
  --primary-hover: #8d37ed;
  --primary-border: #a955ff;
  --primary-text: #fff;
  --nav-active-bg: #181126;
  --nav-active-line: var(--magenta);
  --sidebar-width: 232px;
  --sidebar-expanded-width: 232px;
  --topbar-height: 68px;
  --content-gutter: 34px;
}

html[data-control-theme="tideview"] {
  --bg: #00143f;
  --bg-soft: #001b4d;
  --header-bg: rgba(0, 14, 49, .97);
  --surface: #06345f;
  --surface-2: #05325e;
  --surface-3: #094474;
  --panel-bg: #032654;
  --field-bg: #001c44;
  --deep-bg: #001a3e;
  --control-bg: #05325e;
  --line: #23658e;
  --line-strong: #3d789f;
  --text: #f6fbff;
  --muted: #97bdd6;
  --muted-strong: #cce2f2;
  --cyan: #3ec6ff;
  --magenta: #c84cff;
  --violet: #8f5cff;
  --gold: #f4c95d;
  --green: #b6f55d;
  --danger: #ff6f7e;
  --primary-bg: #3ec6ff;
  --primary-hover: #75d8ff;
  --primary-border: #75d8ff;
  --primary-text: #001633;
  --nav-active-bg: #054177;
  --nav-active-line: #6bc0e8;
  --shadow: 0 15px 38px rgba(0, 8, 34, .2);
}

html[data-control-theme="midnight"] {
  --bg: #0b1024;
  --bg-soft: #111936;
  --header-bg: rgba(8, 13, 32, .97);
  --surface: #17234a;
  --surface-2: #131d3f;
  --surface-3: #223363;
  --panel-bg: #111a38;
  --field-bg: #0b1432;
  --deep-bg: #080f29;
  --control-bg: #18254b;
  --line: #334a7d;
  --line-strong: #4c6599;
  --text: #f7f8ff;
  --muted: #9cadd2;
  --muted-strong: #cfdbf6;
  --cyan: #78c8ff;
  --magenta: #c084fc;
  --violet: #9b78ff;
  --gold: #ffd166;
  --green: #a7f3d0;
  --danger: #ff7d96;
  --primary-bg: #9b78ff;
  --primary-hover: #b49aff;
  --primary-border: #c4b0ff;
  --primary-text: #0c1024;
  --nav-active-bg: #263568;
  --nav-active-line: #9bdbff;
  --shadow: 0 15px 38px rgba(1, 4, 18, .3);
}

html[data-control-theme="sunset"] {
  --bg: #24100f;
  --bg-soft: #321614;
  --header-bg: rgba(31, 12, 14, .97);
  --surface: #51251f;
  --surface-2: #40201f;
  --surface-3: #6b302b;
  --panel-bg: #361918;
  --field-bg: #271214;
  --deep-bg: #1e0d10;
  --control-bg: #47211f;
  --line: #824539;
  --line-strong: #a45d49;
  --text: #fff8f0;
  --muted: #d8aa98;
  --muted-strong: #f4d5c6;
  --cyan: #ffad6a;
  --magenta: #ff6fae;
  --violet: #e879b9;
  --gold: #ffd166;
  --green: #b8e986;
  --danger: #ff7185;
  --primary-bg: #ff9b62;
  --primary-hover: #ffb27e;
  --primary-border: #ffc098;
  --primary-text: #2a0f0d;
  --nav-active-bg: #71312f;
  --nav-active-line: #ffd080;
  --shadow: 0 15px 38px rgba(20, 4, 5, .3);
}

html[data-control-theme="black"] {
  --bg:#000; --bg-soft:#050506; --header-bg:rgba(0,0,0,.98); --surface:#090a0c; --surface-2:#0d0f12; --surface-3:#171a1f;
  --panel-bg:#090a0c; --field-bg:#050607; --deep-bg:#030304; --control-bg:#101216; --line:#292d33; --line-strong:#414750;
  --text:#f7f8fa; --muted:#90969f; --muted-strong:#d6dae0; --cyan:#e7edf3; --magenta:#61d9f0; --violet:#9aa5b1;
  --gold:#e8c05a; --green:#7cdda9; --danger:#ff667d; --primary-bg:#e7edf3; --primary-hover:#fff; --primary-border:#fff;
  --primary-text:#050607; --nav-active-bg:#171a1f; --nav-active-line:#e7edf3; --shadow:0 16px 42px rgba(0,0,0,.64);
}

html[data-control-theme="cinema"] {
  --bg:#151515; --bg-soft:#1b1b1b; --header-bg:rgba(14,14,14,.98); --surface:#202020; --surface-2:#1d1d1d; --surface-3:#2b2b2b;
  --panel-bg:#1c1c1c; --field-bg:#141414; --deep-bg:#101010; --control-bg:#242424; --line:#3c3c3c; --line-strong:#595959;
  --text:#f2f2f2; --muted:#a1a1a1; --muted-strong:#d8d8d8; --cyan:#e5a00d; --magenta:#f0b532; --violet:#bd7f00;
  --gold:#e5a00d; --green:#79c979; --danger:#e76464; --primary-bg:#e5a00d; --primary-hover:#f3b52d; --primary-border:#f3b52d;
  --primary-text:#17120a; --nav-active-bg:#302716; --nav-active-line:#e5a00d; --shadow:0 16px 42px rgba(0,0,0,.46);
}

html,
body { background: var(--bg); }

body {
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  font-synthesis: none;
}

.app-shell { min-height: 100vh; display: block; }

.topbar {
  position: fixed;
  z-index: 80;
  inset: 0 0 auto 0;
  height: var(--topbar-height);
  min-height: var(--topbar-height);
  display: grid;
  grid-template-columns: minmax(190px, var(--sidebar-width)) minmax(180px, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 0 20px;
  border-bottom: 1px solid var(--line);
  background: var(--header-bg);
  backdrop-filter: blur(16px);
}

.topbar-start,
.top-actions,
.server-connection { display: flex; align-items: center; }
.topbar-start { min-width: 0; gap: 10px; }
.top-actions { min-width: 0; justify-content: flex-end; gap: 7px; }
.top-actions,
.section-tabs { scrollbar-width: none; }
.top-actions::-webkit-scrollbar,
.section-tabs::-webkit-scrollbar { display: none; }

.brand {
  min-width: 0;
  min-height: 0;
  margin: 0;
  gap: 9px;
}
.brand-mark {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  box-shadow: none;
}
.brand-mark img { border-radius: 7px; object-fit: contain; }
.brand-copy { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.brand strong { display: flex; font-size: 18px; font-style: normal; font-weight: 750; line-height: 1; }
.brand strong b { font-weight: inherit; }
.brand-tide { color: #ff8f2f; }
.brand-view { color: #35d6e7; }
.brand small { margin: 0; color: var(--cyan); font-size: 10px; }

.page-context { min-width: 0; }
.page-context .eyebrow { margin-bottom: 2px; }
.topbar h1 {
  margin: 0;
  overflow: hidden;
  font-size: 20px;
  font-weight: 730;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-nav-button { display: none; }
.top-actions .button { min-height: 36px; padding: 0 11px; gap: 7px; white-space: nowrap; }
.top-actions .media-launch-button,
.top-actions .refresh-button { display: inline-flex; }
.top-actions .button svg { width: 16px; height: 16px; }
.save-state { max-width: 132px; overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.save-state.saving { color: var(--gold); }

.theme-picker,
.font-picker {
  height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 5px 0 10px;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--muted-strong);
  background: var(--control-bg);
  font-size: 10px;
  font-weight: 750;
  white-space: nowrap;
}
.theme-picker svg,
.font-picker svg { width: 15px; height: 15px; color: var(--cyan); }
.theme-picker select,
.font-picker select {
  width: auto;
  min-width: 82px;
  height: 28px;
  padding: 0 24px 0 7px;
  border: 0;
  background: var(--deep-bg);
  font-size: 10px;
}
.font-picker select { min-width: 72px; }

.advanced-switch { height: 36px; padding: 0 7px 0 10px; border: 1px solid var(--line); border-radius: 5px; background: var(--control-bg); }
.advanced-switch i { width: 34px; height: 18px; }
.advanced-switch i::after { width: 12px; height: 12px; }
.advanced-switch input:checked + i::after { transform: translateX(15px); }

.server-menu { position: relative; }
.server-menu > summary { list-style: none; }
.server-menu > summary::-webkit-details-marker { display: none; }
.server-menu[open] > summary { border-color: var(--cyan); background: var(--surface-3); }
.server-menu[open] .menu-chevron { transform: rotate(180deg); }
.server-menu-popover {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 230px;
  padding: 13px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--panel-bg);
  box-shadow: 0 20px 55px rgba(0, 0, 0, .48);
}
.server-menu-popover strong,
.server-menu-popover small { grid-column: 1 / -1; }
.server-menu-popover strong { font-size: 12px; }
.server-menu-popover small { margin: -4px 0 3px; color: var(--muted); font-size: 10px; line-height: 1.4; }
.server-menu-popover .button { min-width: 0; padding: 0 9px; }

.sidebar {
  position: fixed;
  z-index: 50;
  top: var(--topbar-height);
  bottom: 0;
  left: 0;
  width: var(--sidebar-width);
  height: auto;
  padding: 0;
  border-right: 1px solid var(--line);
  background: var(--bg-soft);
  transition: width 170ms ease, transform 180ms ease, box-shadow 170ms ease;
}
.sidebar::after { display: none; }
.sidebar nav { min-height: 0; display: grid; gap: 3px; overflow-y: auto; padding: 15px 12px; }
.nav-group { margin: 11px 11px 3px; color: var(--muted); font-size: 9px; letter-spacing: .13em; opacity: .72; }
.nav-item,
.nav-launch {
  width: 100%;
  height: 40px;
  min-height: 40px;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  padding: 0 11px;
  border: 0;
  border-radius: 5px;
  color: var(--muted-strong);
  font-weight: 650;
}
.nav-item span,
.nav-launch span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-icon { width: 18px; height: 18px; color: var(--cyan); font-size: 0; }
.nav-item:hover,
.nav-launch:hover { color: var(--text); background: var(--surface); }
.nav-item.active {
  color: var(--text);
  border: 0;
  background: var(--nav-active-bg);
  box-shadow: inset 3px 0 0 var(--nav-active-line);
}
.nav-item.active .nav-icon { color: var(--text); }

.sidebar-foot {
  margin-top: auto;
  padding: 8px 12px 14px;
  display: grid;
  gap: 5px;
  border-top: 1px solid var(--line);
}
.server-connection { min-width: 0; gap: 10px; padding: 7px 11px; }
.server-connection > span:last-child { min-width: 0; }
.server-connection strong,
.server-connection small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-collapse-button {
  width: 100%;
  height: 38px;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  padding: 0 11px;
  border: 0;
  border-radius: 5px;
  color: var(--muted-strong);
  background: transparent;
  cursor: pointer;
  text-align: left;
}
.sidebar-collapse-button:hover { color: var(--text); background: var(--surface); }
.sidebar-collapse-button svg { width: 18px; height: 18px; }
.sidebar-scrim { display: none; }

main {
  min-height: 100vh;
  margin-left: var(--sidebar-width);
  padding: calc(var(--topbar-height) + 28px) var(--content-gutter) 56px;
  background: var(--bg);
  transition: margin-left 170ms ease;
}
.page { padding-top: 0; }
.notice { margin-top: 0; margin-bottom: 18px; }

html.control-sidebar-collapsed { --sidebar-width: 72px; }
.control-sidebar-collapsed .brand-copy,
.control-sidebar-collapsed .sidebar .nav-group,
.control-sidebar-collapsed .sidebar .nav-item span,
.control-sidebar-collapsed .sidebar .nav-launch span,
.control-sidebar-collapsed .sidebar-foot strong,
.control-sidebar-collapsed .sidebar-foot small,
.control-sidebar-collapsed .sidebar-collapse-button span { display: none; }
.control-sidebar-collapsed .topbar { grid-template-columns: 72px minmax(180px, 1fr) auto; }
.control-sidebar-collapsed .topbar-start { justify-content: flex-start; }
.control-sidebar-collapsed .sidebar .nav-item,
.control-sidebar-collapsed .sidebar .nav-launch,
.control-sidebar-collapsed .sidebar-collapse-button { grid-template-columns: 1fr; justify-items: center; gap: 0; padding: 0; }
.control-sidebar-collapsed .server-connection { justify-content: center; }
.control-sidebar-collapsed .sidebar:hover { width: var(--sidebar-expanded-width); box-shadow: 14px 0 34px rgba(0,0,0,.4); }
.control-sidebar-collapsed .sidebar:hover .nav-group { display: block; }
.control-sidebar-collapsed .sidebar:hover .nav-item span,
.control-sidebar-collapsed .sidebar:hover .nav-launch span,
.control-sidebar-collapsed .sidebar:hover .sidebar-foot strong,
.control-sidebar-collapsed .sidebar:hover .sidebar-foot small,
.control-sidebar-collapsed .sidebar:hover .sidebar-collapse-button span { display: block; }
.control-sidebar-collapsed .sidebar:hover .nav-item,
.control-sidebar-collapsed .sidebar:hover .nav-launch,
.control-sidebar-collapsed .sidebar:hover .sidebar-collapse-button { grid-template-columns: 20px minmax(0, 1fr); justify-items: stretch; gap: 11px; padding: 0 11px; }
.control-sidebar-collapsed .sidebar:hover .server-connection { justify-content: flex-start; }

.button { min-height: 38px; gap: 8px; border-radius: 5px; }
.button svg { width: 17px; height: 17px; }
.button.primary {
  color: var(--primary-text);
  border-color: var(--primary-border);
  background: var(--primary-bg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 8px 22px rgba(0,0,0,.14);
}
.button.primary:hover { background: var(--primary-hover); }
.button.secondary,
.power-button,
.icon-button { color: var(--text); border-color: var(--line); background: var(--control-bg); }
.button.secondary:hover,
.power-button:hover,
.icon-button:hover { border-color: var(--cyan); background: var(--surface-3); }

.metric-grid { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.metric { min-height: 112px; padding: 17px; border-radius: 8px; background: var(--panel-bg); box-shadow: none; }
.metric::before { margin-bottom: 15px; }
.metric strong { font-size: 27px; }
.panel { padding: 20px; border-radius: 8px; background: var(--panel-bg); box-shadow: var(--shadow); }
.panel-head { margin-bottom: 17px; }
.panel h2,
.section-toolbar h2 { font-size: 20px; }
.panel p:not(.eyebrow),
.section-toolbar p:not(.eyebrow) { max-width: 940px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.section-toolbar { min-height: 54px; margin-bottom: 17px; }
.section-toolbar > div:last-child,
.button-row,
.row-actions { flex-wrap: wrap; }
.command-tabs { margin-bottom: 18px; }

input,
select,
textarea { border-color: var(--line-strong); background: var(--field-bg); }
input:disabled { background: var(--deep-bg); }
.filter-bar,
.table-shell,
.setup-steps button,
.activity-metric-strip { background: var(--panel-bg); }
th { color: var(--muted); background: var(--surface-2); }
td { color: var(--muted-strong); }

:is(.picker-item, .tuner-status-card, .user-avatar-editor, .user-library-access, .source-visibility,
.support-disclosure, .connection-card, .helper-box, .inline-status, .scan-warning, .scan-status,
.device-group, .selection-row, .dummy-guide-panel, .channel-selection-panel, .remote-setup-panel,
.mapping-summary, .client-grid div, .primary-guide-setup-form, .source-row, .dvr-user-policy,
.guide-status, .compat-grid label, .endpoint-list div, .endpoint-row, .arr-grid section,
.transcoder-storage-grid > div, .activity-tuner, dialog) { background: var(--surface-2); }
.remote-result,
.address-box,
.primary-mini-guide { background: var(--deep-bg); }
.guide-context-panel { background: var(--panel-bg); }
.how-panel { border-color: var(--line); background: linear-gradient(135deg, var(--panel-bg), var(--surface-2)); box-shadow: none; }
.activity-tuner-band { padding: 15px; border: 1px solid var(--line); border-radius: 6px; background: #091019; }
.overview-status-panel .activity-tuner { border-color: rgba(0, 217, 255, .28); background: #0d1722 !important; }
.activity-tuner .source-symbol { color: var(--cyan); border-color: var(--line); background: #111c28; }
.activity-stream-table,
.history-table { border-radius: 8px; }
.arr-settings { margin-top: 0; padding-top: 0; border-top: 0; }

@media (max-width: 1240px) {
  .topbar { grid-template-columns: minmax(180px, var(--sidebar-width)) minmax(150px, 1fr) auto; gap: 12px; padding: 0 14px; }
  .save-state { display: none; }
  .theme-picker > span,
  .font-picker > span { display: none; }
  .theme-picker,
  .font-picker { padding-left: 8px; }
  .top-actions { gap: 5px; }
  .filter-bar { grid-template-columns: minmax(220px,1fr) repeat(3,minmax(125px,auto)); }
  .result-count { display: none; }
}

@media (max-width: 1080px) {
  .support-workspace { grid-template-columns: 1fr; }
  .support-disclosure-stacked div { grid-template-columns: 150px minmax(0, 1fr); gap: 18px; }
}

@media (max-width: 940px) {
  :root { --sidebar-width: 200px; --sidebar-expanded-width: 232px; --content-gutter: 22px; }
  .page-context .eyebrow,
  .media-launch-button span,
  .refresh-button span { display: none; }
  .topbar h1 { font-size: 17px; }
  .media-launch-button,
  .refresh-button { width: 36px; padding: 0 !important; }
  .advanced-switch > span { display: none; }
  .advanced-switch { padding-left: 7px; }
  .arr-grid { grid-template-columns: 1fr; }
  .section-toolbar { align-items: stretch; flex-direction: column; }
  .section-toolbar > .button { align-self: flex-start; }
  .filter-bar { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 760px) {
  .topbar .mobile-nav-button { display: none; }
  :root { --sidebar-width: 0px; --sidebar-expanded-width: min(290px, 86vw); --topbar-height: 112px; --content-gutter: 16px; }
  html.control-sidebar-collapsed { --sidebar-width: 0px; }
  .topbar,
  .control-sidebar-collapsed .topbar {
    grid-template-columns: auto minmax(0,1fr);
    grid-template-rows: 56px 48px;
    gap: 0 10px;
    height: var(--topbar-height);
    padding: 0 10px 7px;
  }
  .mobile-nav-button { display: inline-grid; }
  .brand-copy { display: flex !important; }
  .page-context { justify-self: end; }
  .page-context .eyebrow { display: none; }
  .page-context h1 { max-width: 42vw; }
  .top-actions {
    grid-column: 1 / -1;
    width: 100%;
    justify-content: flex-start;
    overflow: visible;
    padding-bottom: 3px;
    scrollbar-width: none;
  }
  .top-actions > * { flex: 0 0 auto; }
  .top-actions .button,
  .top-actions a { display: inline-flex !important; }
  .theme-picker > span,
  .font-picker > span,
  .advanced-switch > span,
  .media-launch-button span,
  .refresh-button span { display: inline; }
  .media-launch-button,
  .refresh-button { width: auto; padding: 0 11px !important; }
  .save-state { display: none; }
  .sidebar,
  .control-sidebar-collapsed .sidebar {
    z-index: 110;
    top: var(--topbar-height);
    width: var(--sidebar-expanded-width);
    transform: translateX(-100%);
    box-shadow: 12px 0 40px rgba(0,0,0,.4);
  }
  .sidebar.open { transform: translateX(0); }
  .control-sidebar-collapsed .sidebar .nav-group { display: block; }
  .control-sidebar-collapsed .sidebar .nav-item span,
  .control-sidebar-collapsed .sidebar .sidebar-foot strong,
  .control-sidebar-collapsed .sidebar .sidebar-foot small,
  .control-sidebar-collapsed .sidebar .sidebar-collapse-button span { display: block; }
  .control-sidebar-collapsed .sidebar .nav-item,
  .control-sidebar-collapsed .sidebar .sidebar-collapse-button { grid-template-columns: 20px minmax(0,1fr); justify-items: stretch; gap: 11px; padding: 0 11px; }
  .sidebar-collapse-button { display: none; }
  .sidebar-scrim { position: fixed; z-index: 100; inset: var(--topbar-height) 0 0; border: 0; background: rgba(0,8,30,.58); }
  .control-nav-open .sidebar-scrim { display: block; }
  main { margin-left: 0; padding-top: calc(var(--topbar-height) + 22px); }
  .metric-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .activity-metric-strip { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .section-toolbar > div:last-child { display: flex; margin-top: 0; }
  .panel-head { flex-wrap: wrap; }
}

@media (max-width: 520px) {
  .brand-copy small,
  .theme-picker > span,
  .font-picker > span,
  .advanced-switch > span,
  .server-menu > summary span { display: none; }
  .theme-picker select { min-width: 76px; }
  .font-picker select { min-width: 58px; }
  .metric-grid,
  .form-grid,
  .activity-metric-strip { grid-template-columns: 1fr; }
  .activity-filters { width: 100%; align-items: stretch; flex-direction: column; }
  .activity-filters select { width: 100%; }
  .filter-bar { grid-template-columns: 1fr; }
  .section-tabs { margin-right: -16px; margin-left: -16px; padding-right: 16px; padding-left: 16px; }
  .support-disclosure-stacked div { grid-template-columns: 1fr; gap: 6px; }
}

/* Standalone Remote Access: one clear path with the existing advanced choices retained. */
.remote-page-heading { align-items:center; }
.remote-status-card { display:grid; grid-template-columns:58px minmax(0,1fr) auto; align-items:center; gap:16px; margin-bottom:14px; padding:17px 18px; border:1px solid color-mix(in srgb,var(--cyan) 38%,var(--line)); border-radius:9px; background:linear-gradient(115deg,color-mix(in srgb,var(--cyan) 8%,var(--panel-bg)),var(--panel-bg)); box-shadow:var(--shadow); }
.remote-status-mark { width:52px; height:52px; display:grid; place-items:center; border:1px solid color-mix(in srgb,var(--cyan) 46%,transparent); border-radius:14px; color:var(--cyan); background:color-mix(in srgb,var(--cyan) 12%,transparent); }
.remote-status-mark svg { width:25px; height:25px; }
.remote-status-card h3 { margin:3px 0 8px; font-size:18px; }
.remote-status-card .inline-status { margin:0; padding:9px 11px; }
.remote-status-card[data-state="ready"] { border-color:color-mix(in srgb,var(--green) 65%,var(--line)); background:linear-gradient(115deg,color-mix(in srgb,var(--green) 15%,var(--panel-bg)),var(--panel-bg)); }
.remote-status-card[data-state="ready"] .remote-status-mark { color:var(--green); border-color:color-mix(in srgb,var(--green) 60%,transparent); background:color-mix(in srgb,var(--green) 14%,transparent); box-shadow:0 0 24px color-mix(in srgb,var(--green) 13%,transparent); }
.remote-status-card[data-state="ready"] h3 { color:var(--green); }
.remote-status-card[data-state="error"] { border-color:color-mix(in srgb,var(--danger) 62%,var(--line)); background:linear-gradient(115deg,color-mix(in srgb,var(--danger) 12%,var(--panel-bg)),var(--panel-bg)); }
.remote-status-card[data-state="error"] .remote-status-mark { color:var(--danger); border-color:color-mix(in srgb,var(--danger) 60%,transparent); background:color-mix(in srgb,var(--danger) 12%,transparent); }
.remote-status-card[data-state="checking"] .remote-status-mark svg { animation:remote-status-spin 1.1s linear infinite; }
@keyframes remote-status-spin { to { transform:rotate(360deg); } }
.remote-main-grid { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(300px,.75fr); gap:14px; align-items:start; }
.remote-main-grid > .panel { margin:0; }
.remote-side-stack { min-width:0; display:grid; gap:14px; align-content:start; }
.remote-side-stack > .panel { margin:0; }
.remote-easy-card { padding:22px; border-color:color-mix(in srgb,var(--cyan) 28%,var(--line)); }
.remote-easy-heading { display:grid; grid-template-columns:54px minmax(0,1fr); gap:15px; align-items:start; }
.remote-easy-heading h2 { margin:4px 0 6px; font-size:23px; }
.remote-easy-heading p { margin:0; color:var(--muted); line-height:1.55; }
.remote-easy-icon,.remote-speed-icon { display:grid; place-items:center; color:var(--cyan); border:1px solid color-mix(in srgb,var(--cyan) 45%,transparent); background:color-mix(in srgb,var(--cyan) 10%,transparent); }
.remote-easy-icon { width:52px; height:52px; border-radius:14px; }
.remote-easy-icon svg,.remote-speed-icon svg { width:24px; height:24px; }
.remote-domain-question { margin-top:18px; padding:16px; border:1px solid color-mix(in srgb,var(--cyan) 30%,var(--line)); border-radius:8px; background:var(--deep-bg); }
.remote-domain-question > strong { display:block; margin-bottom:12px; font-size:13px; }
.remote-domain-question > div { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.remote-domain-question span { min-width:0; display:grid; grid-template-columns:22px minmax(0,1fr); gap:2px 8px; padding:12px; border:1px solid var(--line); border-radius:7px; background:var(--surface-2); }
.remote-domain-question svg { grid-row:1 / 3; width:20px; color:var(--green); }
.remote-domain-question span:last-child svg { color:var(--cyan); }
.remote-domain-question b { font-size:12px; }
.remote-domain-question small { color:var(--muted); font-size:10px; line-height:1.45; }
.remote-codex-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:16px 0; padding:0; list-style:none; }
.remote-codex-steps li { min-width:0; display:grid; grid-template-columns:28px minmax(0,1fr); gap:9px; align-items:start; }
.remote-codex-steps li > span { width:27px; height:27px; display:grid; place-items:center; border-radius:50%; color:var(--primary-text); background:var(--primary-bg); font-size:11px; font-weight:900; }
.remote-codex-steps p,.remote-codex-steps strong,.remote-codex-steps small { display:block; margin:0; }
.remote-codex-steps strong { font-size:11px; }
.remote-codex-steps small { margin-top:4px; color:var(--muted); font-size:9px; line-height:1.4; }
.remote-codex-prompt { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center; padding:11px; border:1px solid var(--line); border-radius:7px; background:var(--control-bg); }
.remote-codex-prompt code { min-width:0; overflow:hidden; color:var(--muted-strong); font:10px/1.5 "Cascadia Code",Consolas,monospace; }
.remote-primary-action { margin-top:14px; display:flex; align-items:center; gap:13px; flex-wrap:wrap; }
.remote-primary-action .button.large { min-height:46px; padding:0 20px; }
.remote-primary-action > small { max-width:420px; color:var(--muted); font-size:9px; line-height:1.45; }
.remote-speed-card { display:grid; gap:17px; }
.remote-speed-card .panel-head { align-items:start; }
.remote-speed-icon { width:42px; height:42px; flex:0 0 auto; border-radius:12px; }
.remote-speed-card > label { display:grid; gap:8px; color:var(--muted-strong); font-size:11px; font-weight:750; }
.remote-speed-card > label small { color:var(--muted); font-size:9px; font-weight:500; line-height:1.5; }
.remote-speed-card > .button { justify-self:start; }
.remote-manual-card { display:grid; gap:14px; border-color:color-mix(in srgb,var(--magenta) 26%,var(--line)); background:radial-gradient(circle at 100% 0,color-mix(in srgb,var(--magenta) 8%,transparent),transparent 44%),var(--panel-bg); }
.remote-manual-heading { display:grid; grid-template-columns:42px minmax(0,1fr); gap:12px; align-items:start; }
.remote-manual-heading h2 { margin:3px 0 6px; font-size:17px; }
.remote-manual-heading p { margin:0; color:var(--muted); font-size:10px; line-height:1.5; }
.remote-manual-card > .button { justify-self:start; }
.remote-manual-card > small { color:var(--muted); font-size:9px; line-height:1.5; }
.remote-manual-links { display:flex; gap:12px; flex-wrap:wrap; padding-top:12px; border-top:1px solid var(--line); }
.remote-manual-links a { color:var(--cyan); font-size:10px; font-weight:750; text-decoration:none; }
.remote-manual-links a:hover,.remote-manual-links a:focus-visible { color:var(--text); text-decoration:underline; }
.remote-simple-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:14px; }
.remote-simple-steps article { min-width:0; display:grid; grid-template-columns:36px minmax(0,1fr); gap:11px; padding:17px; border:1px solid var(--line); border-radius:8px; background:var(--panel-bg); }
.remote-simple-steps article > span { width:34px; height:34px; display:grid; place-items:center; border:1px solid color-mix(in srgb,var(--cyan) 44%,transparent); border-radius:50%; color:var(--cyan); background:color-mix(in srgb,var(--cyan) 9%,transparent); font-weight:900; }
.remote-simple-steps strong,.remote-simple-steps p { display:block; }
.remote-simple-steps strong { font-size:13px; }
.remote-simple-steps p { margin:6px 0 0; color:var(--muted); font-size:11px; line-height:1.5; }
.remote-simple-steps code { color:var(--cyan); }
.remote-guide-columns { align-items:stretch; }
.remote-guide-columns > .panel { margin-bottom:0; }
.remote-cloudflare-card { border-color:color-mix(in srgb,var(--green) 30%,var(--line)); background:radial-gradient(circle at 100% 0,color-mix(in srgb,var(--green) 9%,transparent),transparent 35%),var(--panel-bg); }
.remote-codex-card { border-color:color-mix(in srgb,var(--magenta) 24%,var(--line)); }
.remote-owner-needs { display:grid; gap:5px; margin:13px 0; padding:12px 13px; border:1px solid var(--line); border-radius:6px; background:var(--deep-bg); }
.remote-owner-needs strong { color:var(--text); font-size:11px; }
.remote-owner-needs span { color:var(--muted); font-size:10px; line-height:1.5; }
.remote-guide-columns .compact-actions { flex-wrap:wrap; justify-content:flex-start; }
.remote-alternatives { margin-top:14px; overflow:hidden; border:1px solid var(--line); border-radius:8px; background:var(--panel-bg); }
.remote-alternatives summary { min-height:64px; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 16px; cursor:pointer; list-style:none; }
.remote-alternatives summary::-webkit-details-marker { display:none; }
.remote-alternatives summary strong,.remote-alternatives summary small { display:block; }
.remote-alternatives summary small { margin-top:4px; color:var(--muted); font-size:10px; }
.remote-alternatives summary > svg { width:18px; color:var(--cyan); transition:transform .16s ease; }
.remote-alternatives[open] summary > svg { transform:rotate(180deg); }
.remote-alternatives > div { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:14px 16px; border-top:1px solid var(--line); background:var(--surface-2); }
.remote-alternatives .remote-advanced-content > div:first-child { min-width:0; }
.remote-alternatives .remote-advanced-content > div:first-child > strong { display:block; margin-bottom:5px; }
.remote-alternatives .remote-advanced-content .compact-actions { margin-top:10px; }
.remote-alternatives p { max-width:900px; margin:0; color:var(--muted); font-size:11px; line-height:1.55; }
.remote-dialog-explainer { display:grid; gap:5px; margin-bottom:13px; padding:12px 14px; border-left:3px solid var(--cyan); background:color-mix(in srgb,var(--cyan) 7%,transparent); }
.remote-dialog-explainer strong { font-size:12px; }
.remote-dialog-explainer span { color:var(--muted); font-size:10px; line-height:1.5; }
.disable-remote[hidden] { display:none !important; }

/* Keep dense Control pages usable when the browser window is smaller than a full desktop. */
.page[data-page="channels"] { min-width:0; }
.page[data-page="channels"] .filter-bar { grid-template-columns:minmax(260px,620px) 145px 158px 96px minmax(80px,1fr) 170px auto; }
.page[data-page="channels"] .filter-bar > [hidden] { display:none !important; }
.page[data-page="channels"] .channel-source-filter { width:170px; min-width:0; justify-self:end; }
.page[data-page="channels"] .channel-source-filter select { width:100%; min-width:0; }
.page[data-page="channels"] .channel-all-sources-filter { height:40px; padding:0 11px; display:flex; align-items:center; gap:9px; border:1px solid rgba(0,217,255,.26); border-radius:7px; background:linear-gradient(135deg,rgba(0,217,255,.08),rgba(143,57,255,.06)); cursor:pointer; transition:border-color .16s ease,background .16s ease; }
.page[data-page="channels"] .channel-all-sources-filter:hover { border-color:rgba(0,217,255,.5); background:linear-gradient(135deg,rgba(0,217,255,.13),rgba(143,57,255,.1)); }
.page[data-page="channels"] .channel-all-sources-filter input { position:relative; display:inline-block; width:30px; min-width:30px; height:17px; min-height:17px; margin:0; padding:0; appearance:none; -webkit-appearance:none; flex:0 0 30px; border:1px solid rgba(166,190,220,.35); border-radius:999px; outline:0; background:#111b29; cursor:pointer; }
.page[data-page="channels"] .channel-all-sources-filter input::after { content:""; position:absolute; top:2px; left:2px; width:11px; height:11px; border-radius:50%; background:#8291a5; transition:transform .16s ease,background .16s ease; }
.page[data-page="channels"] .channel-all-sources-filter input:checked { border-color:rgba(0,217,255,.7); background:rgba(0,217,255,.2); }
.page[data-page="channels"] .channel-all-sources-filter input:checked::after { transform:translateX(13px); background:var(--cyan); box-shadow:0 0 8px rgba(0,217,255,.6); }
.page[data-page="channels"] .channel-all-sources-filter span { display:grid; gap:1px; }
.page[data-page="channels"] .channel-all-sources-filter strong { color:#dbe9f5; font-size:10px; }
.page[data-page="channels"] .channel-all-sources-filter small { color:var(--muted); font-size:8px; font-weight:650; }
.page[data-page="channels"] .channel-select-page { height:36px; align-self:end; white-space:nowrap; }
.page[data-page="channels"] .channel-select-page[aria-pressed="true"] { border-color:rgba(0,217,255,.55); color:#dffbff; background:rgba(0,217,255,.1); }
.page[data-page="channels"] .channel-selection-hint { align-self:end; padding-bottom:10px; color:var(--muted); font-size:9px; white-space:nowrap; }
.page[data-page="channels"] .table-shell { width:100%; max-width:100%; max-height:calc(100vh - var(--topbar-height) - 190px); overflow-x:scroll; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable both-edges; scrollbar-color:var(--cyan) #0a1018; scrollbar-width:auto; }
.page[data-page="channels"] .table-shell::-webkit-scrollbar { width:14px; height:14px; }
.page[data-page="channels"] .table-shell::-webkit-scrollbar-track { background:#0a1018; border-top:1px solid var(--line); }
.page[data-page="channels"] .table-shell::-webkit-scrollbar-thumb { background:#2a8297; border:3px solid #0a1018; border-radius:999px; }
.page[data-page="channels"] .table-shell::-webkit-scrollbar-thumb:hover { background:var(--cyan); }
.page[data-page="channels"] .table-shell table { width:max-content; min-width:100%; }
.page[data-page="channels"] .table-shell thead { position:sticky; z-index:4; top:0; }

/* Keep controls readable and let the editor scroll horizontally. */
.page[data-page="channels"] .table-shell table { width:2790px; min-width:2790px; table-layout:fixed; }
.page[data-page="channels"] .table-shell th:nth-child(1) { width:108px; text-align:center; }
.page[data-page="channels"] .table-shell th:nth-child(2) { width:132px; text-align:center; }
.page[data-page="channels"] .table-shell th:nth-child(3) { width:520px; }
.page[data-page="channels"] .table-shell th:nth-child(4) { width:260px; }
.page[data-page="channels"] .table-shell th:nth-child(5) { width:230px; }
.page[data-page="channels"] .table-shell th:nth-child(6) { width:195px; }
.page[data-page="channels"] .table-shell th:nth-child(7) { width:100px; padding-left:18px; }
.page[data-page="channels"] .table-shell td:nth-child(7) { padding-left:18px; }
.page[data-page="channels"] .table-shell th:nth-child(8) { width:220px; }
.page[data-page="channels"] .table-shell th:nth-child(9) { width:260px; }
.page[data-page="channels"] .table-shell th:nth-child(10),
.page[data-page="channels"] .table-shell th:nth-child(11) { width:120px; }
.page[data-page="channels"] .table-shell th:nth-child(12) { width:170px; }
.page[data-page="channels"] .table-shell th:nth-child(13) { width:140px; }
.page[data-page="channels"] .table-shell th:nth-child(14) { width:170px; }
.page[data-page="channels"] .table-shell th:nth-child(15) { width:165px; }
.page[data-page="channels"] .channel-title { display:grid; grid-template-columns:42px 58px minmax(0,1fr); min-width:0; }
.page[data-page="channels"] .channel-name-stack,
.page[data-page="channels"] .channel-epg-preview { width:100%; min-width:0; }
.page[data-page="channels"] .channel-epg-preview { max-width:240px; }
.page[data-page="channels"] .table-shell th:nth-child(-n+2) { padding-inline:12px; line-height:1.2; white-space:normal; }
.page[data-page="channels"] .table-shell td:nth-child(4) { overflow:hidden; }
.page[data-page="channels"] #channelRows tr[data-channel-id] { cursor:pointer; transition:background-color .14s ease, box-shadow .14s ease; }
.page[data-page="channels"] #channelRows tr[data-channel-id]:focus { outline:2px solid color-mix(in srgb,var(--cyan) 72%,transparent); outline-offset:-2px; }
.page[data-page="channels"] #channelRows tr[data-channel-id]:hover td { background:rgba(0,217,255,.025); }
.page[data-page="channels"] #channelRows tr.channel-row-selected td { background:rgba(0,217,255,.075); box-shadow:inset 0 1px rgba(0,217,255,.12), inset 0 -1px rgba(0,217,255,.12); }
.page[data-page="channels"] #channelRows tr.channel-row-selected td:first-child { box-shadow:inset 3px 0 var(--cyan), inset 0 1px rgba(0,217,255,.12), inset 0 -1px rgba(0,217,255,.12); }
.page[data-page="channels"] .channel-name-stack small span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.page[data-page="channels"] .channel-source-assignment,
.page[data-page="channels"] .map-button,
.page[data-page="channels"] .playback-fix-button,
.page[data-page="channels"] td select { width:100%; min-width:0; max-width:100%; }

/* The updated Control theme caps ordinary pages at 1760px. The channel editor
   is a wide data workspace, so let it use all space remaining beside the nav. */
html[data-control-ui="updated"] .page[data-page="channels"] {
  width:auto;
  max-width:2200px;
  margin-inline:auto;
}

@media (max-width:1600px) {
  :root { --content-gutter:24px; }
  .command-status-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .page[data-page="channels"] th { height:38px; padding:0 8px; font-size:8px; }
  .page[data-page="channels"] td { padding:8px; font-size:10px; }
  .page[data-page="channels"] .channel-name-stack { min-width:132px; }
  .page[data-page="channels"] .channel-epg-preview { width:248px; }
  .page[data-page="channels"] .channel-source-assignment { width:124px; min-width:124px; }
  .page[data-page="channels"] .map-button,
  .page[data-page="channels"] .playback-fix-button { min-width:110px; max-width:150px; }
  .page[data-page="channels"] .channel-test-button { min-width:58px; padding:0 9px; }
  .page[data-page="channels"] .channel-plus-toggle { width:62px; padding:0 6px; }
  .page[data-page="channels"] td select { min-width:92px; }
}

@media (max-width:1280px) {
  :root { --content-gutter:18px; }
  .page[data-page="channels"] .filter-bar { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .page[data-page="channels"] .channel-source-filter { width:170px; justify-self:end; }
  .page[data-page="channels"] .search-field { grid-column:1 / -1; }
  .page[data-page="channels"] .table-shell { max-height:calc(100vh - var(--topbar-height) - 250px); }
  .page[data-page="channels"] th { height:34px; padding:0 6px; font-size:7px; }
  .page[data-page="channels"] td { padding:6px; font-size:9px; }
  .page[data-page="channels"] .channel-logo-button { width:36px; height:29px; flex-basis:36px; }
  .page[data-page="channels"] .channel-title { gap:7px; }
  .page[data-page="channels"] .channel-name-stack { min-width:126px; }
  .page[data-page="channels"] .channel-epg-preview { width:200px; }
  .page[data-page="channels"] .channel-source-assignment { width:112px; min-width:112px; }
  .page[data-page="channels"] .map-button,
  .page[data-page="channels"] .playback-fix-button { min-width:96px; max-width:120px; }
  .page[data-page="channels"] .channel-test-button { min-width:56px; padding:0 7px; }
  .page[data-page="channels"] .channel-plus-toggle { width:56px; min-height:31px; padding:0 5px; }
  .page[data-page="channels"] td select { min-width:84px; }
}

@media (max-width:900px) {
  .command-status-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .remote-main-grid,
  .remote-simple-steps,
  .remote-guide-columns { grid-template-columns:1fr; }
  .remote-status-card { grid-template-columns:48px minmax(0,1fr); }
  .remote-status-card > .button { grid-column:2; justify-self:start; }
  .remote-alternatives > div { align-items:flex-start; flex-direction:column; }
}

@media (max-width:600px) {
  .command-status-grid { grid-template-columns:1fr; }
  .remote-status-card { grid-template-columns:1fr; }
  .remote-status-card > .button { grid-column:1; }
  .remote-easy-card { padding:17px; }
  .remote-easy-heading { grid-template-columns:44px minmax(0,1fr); gap:12px; }
  .remote-easy-icon { width:42px; height:42px; border-radius:11px; }
  .remote-easy-heading h2 { font-size:20px; }
  .remote-domain-question > div,
  .remote-codex-steps,
  .remote-codex-prompt { grid-template-columns:1fr; }
  .remote-codex-prompt .button { justify-self:start; }
  .remote-primary-action { align-items:stretch; flex-direction:column; }
  .remote-primary-action .button.large { width:100%; }
  .remote-simple-steps article { grid-template-columns:32px minmax(0,1fr); padding:14px; }
  .remote-choice-tabs { grid-template-columns:1fr; }
  .page[data-page="channels"] .filter-bar { grid-template-columns:1fr; }
  .page[data-page="channels"] .search-field { grid-column:auto; }
}

/* Control and Media place the same player in their fixed application headers. */
.topbar:has(.control-music-player:not([hidden])) {
  grid-template-columns:minmax(190px,var(--sidebar-width)) minmax(140px,220px) minmax(420px,1fr) auto;
  gap:14px;
}
.control-sidebar-collapsed .topbar:has(.control-music-player:not([hidden])) {
  grid-template-columns:72px minmax(140px,220px) minmax(420px,1fr) auto;
}
.topbar .control-music-player {
  width:100%;
  grid-column:3;
  grid-row:1;
}
.topbar:has(.control-music-player:not([hidden])) .top-actions {
  grid-column:4;
  grid-row:1;
}

/* Keep the desktop player at the physical center of the screen. The Media and
   Control pages stay open in named tabs, so whichever page owns the audio can
   continue playing while this header mirrors its state. */
@media (min-width:901px) {
  .topbar:has(.control-music-player:not([hidden])) {
    grid-template-columns:minmax(190px,var(--sidebar-width)) minmax(180px,1fr) auto;
    gap:18px;
  }
  .topbar .control-music-player {
    position:fixed;
    inset:8px auto auto 50%;
    width:min(960px,46vw);
    grid-column:1 / -1 !important;
    grid-row:1;
    transform:translateX(-50%);
    z-index:95;
  }
  .topbar:has(.control-music-player:not([hidden])) .top-actions {
    grid-column:3;
  }
}

@media (min-width:761px) and (max-width:1600px) {
  .topbar:has(.control-music-player:not([hidden])),
  .control-sidebar-collapsed .topbar:has(.control-music-player:not([hidden])) {
    grid-template-columns:minmax(180px,var(--sidebar-width)) minmax(300px,1fr) auto;
    gap:10px;
  }
  .control-sidebar-collapsed .topbar:has(.control-music-player:not([hidden])) {
    grid-template-columns:72px minmax(300px,1fr) auto;
  }
  .topbar:has(.control-music-player:not([hidden])) .page-context { display:none; }
  .topbar .control-music-player { grid-column:2; }
  .topbar:has(.control-music-player:not([hidden])) .top-actions { grid-column:3; }
  .topbar:has(.control-music-player:not([hidden])) :is(.theme-picker,.font-picker,.advanced-switch) { display:none; }
}

@media (min-width:761px) and (max-width:1120px) {
  .topbar:has(.control-music-player:not([hidden])),
  .control-sidebar-collapsed .topbar:has(.control-music-player:not([hidden])) {
    grid-template-columns:minmax(150px,var(--sidebar-width)) minmax(230px,1fr) auto;
  }
  .control-sidebar-collapsed .topbar:has(.control-music-player:not([hidden])) {
    grid-template-columns:64px minmax(230px,1fr) auto;
  }
  .topbar:has(.control-music-player:not([hidden])) .setup-launch-button span,
  .topbar:has(.control-music-player:not([hidden])) .theme-picker > span,
  .topbar:has(.control-music-player:not([hidden])) .font-picker > span,
  .topbar:has(.control-music-player:not([hidden])) .advanced-switch > span,
  .topbar:has(.control-music-player:not([hidden])) .media-launch-button span,
  .topbar:has(.control-music-player:not([hidden])) .refresh-button span { display:none; }
}

@media (max-width:760px) {
  html:has(.control-music-player:not([hidden])) { --topbar-height:164px; }
  .topbar:has(.control-music-player:not([hidden])),
  .control-sidebar-collapsed .topbar:has(.control-music-player:not([hidden])) {
    grid-template-columns:auto minmax(0,1fr);
    grid-template-rows:54px 52px 51px;
    gap:0 10px;
  }
  .topbar:has(.control-music-player:not([hidden])) .page-context {
    display:block;
    grid-column:2;
    grid-row:1;
  }
  .topbar .control-music-player {
    grid-column:1 / -1;
    grid-row:2;
  }
  .topbar:has(.control-music-player:not([hidden])) .top-actions {
    grid-column:1 / -1;
    grid-row:3;
  }
}
.task-runtime-notice {
  margin: 0 0 14px;
  border-left: 3px solid var(--accent, #36b7ff);
}

.task-runtime-notice.warn {
  border-left-color: var(--warning, #f0a72f);
}

/* Launch-ready overview: one visual system, fewer nested cards, all data retained. */
.page[data-page="overview"] {
  --overview-hairline: color-mix(in srgb, var(--line) 72%, transparent);
  --overview-surface: color-mix(in srgb, var(--panel-bg) 82%, transparent);
}

.page[data-page="overview"] .overview-status-panel {
  margin: 0 0 30px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.page[data-page="overview"] .overview-status-head {
  margin: 0 2px 17px;
  align-items: flex-end;
}

.page[data-page="overview"] .overview-status-head h2 {
  margin-top: 4px;
  font-size: clamp(22px, 1.35vw, 28px);
  letter-spacing: -.025em;
}

.page[data-page="overview"] .overview-status-head p:not(.eyebrow) {
  max-width: 760px;
  margin-top: 7px;
  color: color-mix(in srgb, var(--muted) 92%, var(--text));
  font-size: 12px;
  line-height: 1.5;
}

.page[data-page="overview"] #refreshActivity {
  min-height: 34px;
  padding: 0 10px;
  color: var(--cyan);
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.page[data-page="overview"] #refreshActivity:hover {
  color: var(--text);
  border-color: var(--overview-hairline);
  background: color-mix(in srgb, var(--surface-2) 72%, transparent);
}

.page[data-page="overview"] .command-status-grid {
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--overview-hairline);
  border-radius: 14px;
  background:
    linear-gradient(110deg, color-mix(in srgb, var(--cyan) 3%, transparent), transparent 36%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 84%, transparent), var(--overview-surface));
  box-shadow: 0 18px 44px rgba(0, 0, 0, .14);
}

.page[data-page="overview"] .command-status-grid .metric {
  position: relative;
  min-height: 118px;
  padding: 18px 19px 16px;
  border: 0;
  border-right: 1px solid var(--overview-hairline);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.page[data-page="overview"] .command-status-grid .metric:last-child { border-right: 0; }

.page[data-page="overview"] .command-status-grid .metric::before,
.page[data-page="overview"] .command-status-grid .metric:nth-child(n)::before {
  width: 24px;
  height: 2px;
  margin: 0 0 14px;
  border-radius: 999px;
  background: var(--cyan);
  box-shadow: 0 0 12px color-mix(in srgb, var(--cyan) 42%, transparent);
}

.page[data-page="overview"] .command-status-grid .metric span {
  color: color-mix(in srgb, var(--muted) 88%, var(--text));
  font-size: 9px;
  letter-spacing: .075em;
}

.page[data-page="overview"] .command-status-grid .metric strong {
  margin: 7px 0 3px;
  color: var(--text);
  font-size: clamp(21px, 1.28vw, 27px);
  letter-spacing: -.035em;
}

.page[data-page="overview"] .command-status-grid .metric .metric-text {
  font-size: clamp(14px, .82vw, 17px);
  letter-spacing: -.015em;
}

.page[data-page="overview"] .command-status-grid .metric small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
}

.page[data-page="overview"] .command-status-grid .cpu-metric-pair {
  gap: 14px;
}

.page[data-page="overview"] .command-status-grid .cpu-metric-pair > div + div {
  padding-left: 14px;
  border-left-color: var(--overview-hairline);
}

.page[data-page="overview"] .overview-status-panel .activity-tuner-band {
  margin: 15px 1px 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.page[data-page="overview"] .activity-tuner-list {
  gap: 1px;
  padding: 1px;
  overflow: hidden;
  border-radius: 13px;
  background: var(--overview-hairline);
  box-shadow: 0 0 0 1px var(--overview-hairline);
}

.page[data-page="overview"] .overview-status-panel .activity-tuner {
  min-height: 68px;
  padding: 11px 13px;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(110deg, color-mix(in srgb, var(--cyan) 3%, transparent), transparent 48%),
    var(--overview-surface) !important;
}

.page[data-page="overview"] .activity-tuner .source-symbol {
  border-color: color-mix(in srgb, var(--cyan) 24%, var(--overview-hairline));
  border-radius: 9px;
  background: color-mix(in srgb, var(--surface-3) 72%, transparent);
}

.page[data-page="overview"] .activity-tuner strong { font-size: 11px; }
.page[data-page="overview"] .activity-tuner small { color: var(--muted); }
.page[data-page="overview"] .activity-tuner .tuner-sharing { color: var(--cyan); font-weight: 700; line-height: 1.2; }
.page[data-page="overview"] .tuner-availability b { font-size: 13px; }

.page[data-page="overview"] .activity-section-head {
  margin: 30px 3px 12px;
}

.page[data-page="overview"] .activity-section-head h3 {
  margin-top: 4px;
  font-size: 18px;
  letter-spacing: -.02em;
}

.page[data-page="overview"] .activity-stream-table,
.page[data-page="overview"] .history-table {
  overflow: hidden;
  border-color: var(--overview-hairline);
  border-radius: 14px;
  background: var(--overview-surface);
  box-shadow: 0 16px 38px rgba(0, 0, 0, .12);
}
.page[data-page="overview"] .activity-stream-table { overflow-x:auto; }

.page[data-page="overview"] .history-table {
  overflow: auto;
  scrollbar-gutter: stable;
}

.page[data-page="overview"] .activity-stream-table th,
.page[data-page="overview"] .history-table th {
  height: 45px;
  color: color-mix(in srgb, var(--muted) 90%, var(--text));
  border-bottom-color: var(--overview-hairline);
  background: color-mix(in srgb, var(--surface-2) 66%, transparent);
  letter-spacing: .065em;
}

.page[data-page="overview"] .activity-stream-table td,
.page[data-page="overview"] .history-table td {
  border-bottom-color: color-mix(in srgb, var(--line) 42%, transparent);
  background: transparent;
}

.page[data-page="overview"] .activity-stream-table tbody tr:last-child td,
.page[data-page="overview"] .history-table tbody tr:last-child td { border-bottom: 0; }

.page[data-page="overview"] .viewing-insights-section {
  margin-top: 38px;
  padding: 0;
  border: 0;
}

.page[data-page="overview"] .insights-head { margin-bottom: 18px; }

.page[data-page="overview"] .top-user-card,
.page[data-page="overview"] .insight-ranking,
.page[data-page="overview"] .overview-connections-panel {
  border-color: var(--overview-hairline);
  border-radius: 14px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--cyan) 2.5%, transparent), transparent 46%),
    var(--overview-surface);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .1);
}

.page[data-page="overview"] .top-user-card {
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
}

.page[data-page="overview"] .top-user-card:hover,
.page[data-page="overview"] .top-user-card:focus-visible {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--cyan) 62%, var(--line));
}

.page[data-page="overview"] .insight-ranking { overflow: hidden; }
.page[data-page="overview"] .insight-ranking-head { background: color-mix(in srgb, var(--surface-2) 66%, transparent); }
.page[data-page="overview"] .overview-connections-panel { margin-top: 38px; }

@media (max-width: 1600px) {
  .page[data-page="overview"] .command-status-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .page[data-page="overview"] .command-status-grid .metric:nth-child(4n) { border-right: 0; }
  .page[data-page="overview"] .command-status-grid .metric:nth-child(-n+4) { border-bottom: 1px solid var(--overview-hairline); }
}

@media (max-width: 900px) {
  .page[data-page="overview"] .command-status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page[data-page="overview"] .command-status-grid .metric:nth-child(n) { border-right: 1px solid var(--overview-hairline); border-bottom: 1px solid var(--overview-hairline); }
  .page[data-page="overview"] .command-status-grid .metric:nth-child(2n) { border-right: 0; }
  .page[data-page="overview"] .command-status-grid .metric:nth-last-child(-n+2) { border-bottom: 0; }
}

@media (max-width: 520px) {
  .page[data-page="overview"] .overview-status-head { align-items: flex-start; }
  .page[data-page="overview"] .command-status-grid { grid-template-columns: 1fr; }
  .page[data-page="overview"] .command-status-grid .metric:nth-child(n) { border-right: 0; border-bottom: 1px solid var(--overview-hairline); }
  .page[data-page="overview"] .command-status-grid .metric:last-child { border-bottom: 0; }
}

/* Remote Access: clearer reading order, larger type, and fewer nested surfaces. */
.page[data-page="remote"] {
  --remote-hairline: color-mix(in srgb, var(--line) 72%, transparent);
  --remote-surface: color-mix(in srgb, var(--panel-bg) 94%, var(--deep-bg));
}

.page[data-page="remote"] .remote-page-heading { min-height: 36px; margin: 2px 0 9px; }
.page[data-page="remote"] .remote-page-heading > div { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.page[data-page="remote"] .remote-page-heading .eyebrow { flex: 0 0 auto; }
.page[data-page="remote"] .remote-page-heading h2 { margin: 0; flex: 0 0 auto; font-size: 27px; letter-spacing: -.025em; }
.page[data-page="remote"] .remote-page-heading p:not(.eyebrow) { margin: 0; min-width: 340px; font-size: 14px; line-height: 1.55; }

.page[data-page="remote"] .remote-status-card {
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 14px;
  margin-bottom: 12px;
  padding: 10px 15px;
  border-color: var(--remote-hairline);
  border-radius: 13px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .1);
}

.page[data-page="remote"] .remote-status-mark { width: 40px; height: 40px; border-radius: 11px; }
.page[data-page="remote"] .remote-status-mark svg { width: 21px; height: 21px; }
.page[data-page="remote"] .remote-status-card h3 { margin: 2px 0 5px; font-size: 21px; letter-spacing: -.015em; }
.page[data-page="remote"] .remote-status-card .inline-status { padding: 0; border: 0; background: transparent; font-size: 14px; line-height: 1.5; }

.page[data-page="remote"] .remote-main-grid { grid-template-columns: minmax(0, 1.48fr) minmax(340px, .72fr); gap: 18px; align-items: stretch; }
.page[data-page="remote"] .remote-easy-card {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(400px, .95fr);
  column-gap: 30px;
  align-content: start;
  height: 100%;
  padding: 21px 24px;
  border-color: var(--remote-hairline);
  border-radius: 15px;
  background: linear-gradient(125deg, color-mix(in srgb, var(--cyan) 4%, transparent), transparent 42%), var(--remote-surface);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .12);
}

.page[data-page="remote"] .remote-easy-heading { grid-column: 1 / -1; grid-template-columns: 48px minmax(0, 1fr); gap: 15px; }
.page[data-page="remote"] .remote-easy-icon { width: 46px; height: 46px; border-radius: 12px; }
.page[data-page="remote"] .remote-easy-heading h2 { margin: 2px 0 7px; font-size: 26px; letter-spacing: -.025em; }
.page[data-page="remote"] .remote-easy-heading p { max-width: 1120px; font-size: 16px; line-height: 1.58; }

.page[data-page="remote"] .remote-domain-question {
  grid-column: 1;
  grid-row: 2;
  margin: 17px 0 0;
  padding: 0 26px 0 0;
  border: 0;
  border-right: 1px solid var(--remote-hairline);
  border-radius: 0;
  background: transparent;
}

.page[data-page="remote"] .remote-domain-question > strong { margin-bottom: 15px; font-size: 16px; }
.page[data-page="remote"] .remote-domain-question > div { grid-template-columns: 1fr; gap: 0; }
.page[data-page="remote"] .remote-domain-question span {
  padding: 7px 0 15px;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.page[data-page="remote"] .remote-domain-question span + span { padding: 15px 0 5px; border-top: 1px solid var(--remote-hairline); border-left: 0; }
.page[data-page="remote"] .remote-domain-question b { font-size: 16px; }
.page[data-page="remote"] .remote-domain-question small { font-size: 14px; line-height: 1.55; }

.page[data-page="remote"] .remote-codex-steps {
  grid-column: 2;
  grid-row: 2 / 5;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 17px 0 0;
  padding: 0;
  border-bottom: 0;
}

.page[data-page="remote"] .remote-codex-steps li { padding: 0 0 11px; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; }
.page[data-page="remote"] .remote-codex-steps li + li { margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--remote-hairline); border-left: 0; }
.page[data-page="remote"] .remote-codex-steps li > span { width: 35px; height: 35px; font-size: 15px; }
.page[data-page="remote"] .remote-codex-steps strong { font-size: 15px; }
.page[data-page="remote"] .remote-codex-steps small { margin-top: 6px; font-size: 13px; line-height: 1.5; }

.page[data-page="remote"] .remote-codex-prompt {
  grid-column: 1;
  grid-row: 3;
  margin-top: 14px;
  padding: 14px 26px 0 0;
  border: 0;
  border-top: 1px solid var(--remote-hairline);
  border-radius: 0;
  background: transparent;
}
.page[data-page="remote"] .remote-codex-prompt code { font-size: 13px; line-height: 1.6; }
.page[data-page="remote"] .remote-primary-action { grid-column: 1; grid-row: 4; margin-top: 14px; padding-right: 26px; gap: 12px; }
.page[data-page="remote"] .remote-primary-action .button.large { min-height: 50px; padding: 0 22px; font-size: 14px; }
.page[data-page="remote"] .remote-primary-action > small { max-width: 620px; font-size: 13px; line-height: 1.52; }

.page[data-page="remote"] .remote-side-stack {
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--remote-hairline);
  border-radius: 15px;
  background: var(--remote-surface);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .1);
  height: 100%;
}

.page[data-page="remote"] .remote-side-stack > .panel {
  padding: 19px 20px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.page[data-page="remote"] .remote-side-stack > .panel + .panel { border-top: 1px solid var(--remote-hairline); }
.page[data-page="remote"] .remote-side-stack .panel-head h2,
.page[data-page="remote"] .remote-manual-heading h2 { font-size: 22px; letter-spacing: -.018em; }
.page[data-page="remote"] .remote-side-stack .panel-head p,
.page[data-page="remote"] .remote-manual-heading p { font-size: 14px; line-height: 1.58; }
.page[data-page="remote"] .remote-speed-card > label { font-size: 14px; }
.page[data-page="remote"] .remote-speed-card > label small,
.page[data-page="remote"] .remote-manual-card > small { font-size: 13px; line-height: 1.58; }
.page[data-page="remote"] .remote-speed-card select { min-height: 46px; font-size: 14px; }
.page[data-page="remote"] .remote-manual-links a { font-size: 13px; }

@media (max-width: 1100px) {
  .page[data-page="remote"] .remote-main-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .page[data-page="remote"] .remote-page-heading > div { display: block; }
  .page[data-page="remote"] .remote-page-heading h2 { margin-top: 3px; }
  .page[data-page="remote"] .remote-page-heading p:not(.eyebrow) { margin-top: 7px; min-width: 0; }
  .page[data-page="remote"] .remote-easy-card { grid-template-columns: 1fr; }
  .page[data-page="remote"] .remote-domain-question { padding-right: 0; padding-bottom: 20px; border-right: 0; border-bottom: 1px solid var(--remote-hairline); }
  .page[data-page="remote"] .remote-domain-question,
  .page[data-page="remote"] .remote-codex-steps,
  .page[data-page="remote"] .remote-codex-prompt,
  .page[data-page="remote"] .remote-primary-action { grid-column: 1; grid-row: auto; }
  .page[data-page="remote"] .remote-codex-prompt,
  .page[data-page="remote"] .remote-primary-action { padding-right: 0; }
}

@media (max-width: 720px) {
  .page[data-page="remote"] .remote-status-card { grid-template-columns: 40px minmax(0, 1fr); }
  .page[data-page="remote"] .remote-status-card > .button { grid-column: 2; justify-self: start; }
  .page[data-page="remote"] .remote-easy-card { padding: 20px; }
  .page[data-page="remote"] .remote-domain-question > div,
  .page[data-page="remote"] .remote-codex-steps { grid-template-columns: 1fr; }
  .page[data-page="remote"] .remote-domain-question span + span,
  .page[data-page="remote"] .remote-codex-steps li + li { margin-top: 14px; padding-top: 14px; padding-left: 0; border-top: 1px solid var(--remote-hairline); border-left: 0; }
  .page[data-page="remote"] .remote-codex-steps li { padding-right: 0; padding-left: 0; }
}

/* Users: responsive profile cards with a clearer identity and action hierarchy. */
.page[data-page="users"] #usersList {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(430px, 1fr));
  gap: 13px;
  padding: 2px;
}

.page[data-page="users"] #usersList > .empty-state { grid-column: 1 / -1; }

.page[data-page="users"] #usersList > .source-row {
  min-width: 0;
  min-height: 158px;
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) auto;
  grid-template-rows: 1fr auto;
  gap: 14px 15px;
  align-items: start;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  border-radius: 14px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--cyan) 4%, transparent), transparent 44%),
    color-mix(in srgb, var(--panel-bg) 95%, var(--deep-bg));
  box-shadow: 0 14px 32px rgba(0, 0, 0, .1);
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
  cursor: pointer;
}

.page[data-page="users"] #usersList > .source-row:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--cyan) 52%, var(--line));
  box-shadow: 0 18px 40px rgba(0, 0, 0, .14);
}

.page[data-page="users"] #usersList > .source-row:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-color: color-mix(in srgb, var(--cyan) 72%, var(--line));
}

.page[data-page="users"] #usersList .source-avatar {
  width: 62px;
  height: 62px;
  grid-row: 1 / 3;
  border: 1px solid color-mix(in srgb, var(--cyan) 36%, var(--line));
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface-3) 76%, transparent);
  box-shadow: 0 9px 22px rgba(0, 0, 0, .18);
}

.page[data-page="users"] #usersList .source-avatar img { border-radius: 17px; }

.page[data-page="users"] #usersList > .source-row > div:nth-child(2) {
  min-width: 0;
  grid-column: 2 / 4;
}

.page[data-page="users"] #usersList > .source-row > div:nth-child(2) > strong {
  display: block;
  margin-bottom: 7px;
  font-size: 19px;
  letter-spacing: -.018em;
}

.page[data-page="users"] #usersList > .source-row > div:nth-child(2) > small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.52;
}

.page[data-page="users"] #usersList .user-backup-summary {
  margin-top: 9px !important;
  padding-top: 9px;
  color: color-mix(in srgb, var(--cyan) 58%, var(--muted)) !important;
  border-top: 1px solid color-mix(in srgb, var(--line) 58%, transparent);
}

.page[data-page="users"] #usersList .source-meta {
  min-width: 0;
  grid-column: 2;
  align-self: end;
  padding-top: 11px;
  color: color-mix(in srgb, var(--muted) 86%, var(--text));
  border-top: 1px solid color-mix(in srgb, var(--line) 62%, transparent);
  font-size: 13px;
  line-height: 1.55;
  text-align: left;
}

.page[data-page="users"] #usersList .row-actions {
  grid-column: 3;
  align-self: end;
  justify-content: flex-end;
  padding-top: 9px;
  border-top: 1px solid color-mix(in srgb, var(--line) 62%, transparent);
}

.page[data-page="users"] #usersList .row-actions .button { min-height: 39px; font-size: 13px; }

.user-authorized-devices {
  margin-top: 4px;
  padding: 17px;
  border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  border-radius: 13px;
  background: color-mix(in srgb, var(--surface-3) 68%, transparent);
}

.user-authorized-devices .panel-head { margin-bottom: 12px; }
.user-authorized-devices .panel-head h3 { margin: 0 0 4px; font-size: 17px; }
.user-authorized-devices .panel-head p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.authorized-device-list { display: grid; gap: 9px; margin-bottom: 10px; }
.authorized-device-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  padding: 11px;
  border: 1px solid color-mix(in srgb, var(--line) 64%, transparent);
  border-radius: 11px;
  background: color-mix(in srgb, var(--panel-bg) 88%, transparent);
}
.authorized-device-row .source-symbol { width: 42px; height: 42px; }
.authorized-device-row .source-symbol svg { width: 20px; height: 20px; }
.authorized-device-row strong,
.authorized-device-row small { display: block; }
.authorized-device-row small { margin-top: 3px; color: var(--muted); }

@media (max-width: 640px) {
  .user-authorized-devices .panel-head { align-items: flex-start; }
  .authorized-device-row { grid-template-columns: 38px minmax(0, 1fr); }
  .authorized-device-row .button { grid-column: 1 / -1; justify-self: start; }
}

@media (max-width: 760px) {
  .page[data-page="users"] #usersList { grid-template-columns: 1fr; }
  .page[data-page="users"] #usersList > .source-row { grid-template-columns: 54px minmax(0, 1fr); }
  .page[data-page="users"] #usersList .source-avatar { width: 54px; height: 54px; border-radius: 15px; }
  .page[data-page="users"] #usersList .source-avatar img { border-radius: 14px; }
  .page[data-page="users"] #usersList > .source-row > div:nth-child(2) { grid-column: 2; }
  .page[data-page="users"] #usersList .source-meta,
  .page[data-page="users"] #usersList .row-actions { grid-column: 1 / -1; }
  .page[data-page="users"] #usersList .row-actions { justify-content: flex-start; }
}

.mobile-control-brand { display: none; }
.activity-mobile-details { display: none; }

/* Transcoder: readable controls arranged for wide screens without empty card space. */
.transcoder-page { --transcoder-hairline: color-mix(in srgb, var(--line) 70%, transparent); }

.transcoder-page > .section-toolbar {
  min-height: 0;
  margin-bottom: 13px;
  align-items: center;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--transcoder-hairline);
}

.transcoder-page > .section-toolbar h2 { font-size: 25px; letter-spacing: -.025em; }
.transcoder-page > .section-toolbar p:not(.eyebrow) { margin-top: 6px; font-size: 14px; line-height: 1.5; }
.transcoder-page > .section-toolbar .button { min-height: 44px; padding-inline: 19px; font-size: 14px; }

#transcoderPagePanels { gap: 13px; }
#transcoderPagePanels > .panel,
#transcoderPagePanels > .transcoder-processing-grid > .panel {
  margin-top: 0;
  padding: 18px 20px;
  border-color: var(--transcoder-hairline);
  border-radius: 11px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .09);
}

#transcoderPagePanels .panel-head { margin-bottom: 14px; }
#transcoderPagePanels .panel-head h2 { font-size: 21px; letter-spacing: -.018em; }
#transcoderPagePanels .panel-head p { font-size: 14px; line-height: 1.5; }

.gpu-selector-panel .panel-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 560px);
  align-items: end;
  gap: 24px;
}

.gpu-selector-panel .panel-head > label,
.transcoder-workspace-location {
  display: grid;
  gap: 7px;
  color: #b7c5d4;
  font-size: 13px;
  font-weight: 800;
}

.gpu-selector-panel .panel-head > label small,
.transcoder-workspace-location small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
}

.gpu-selector-panel select,
.transcoder-workspace-location input,
.transcoder-page .form-grid input,
.transcoder-page .form-grid select {
  min-height: 43px;
  font-size: 14px;
}

.transcoder-storage-grid {
  margin-top: 8px;
  display: grid;
  grid-template-columns: minmax(300px, .75fr) minmax(520px, 1.45fr);
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--transcoder-hairline);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-2) 92%, transparent);
}

.transcoder-storage-grid > div,
.transcoder-storage-grid > label {
  min-width: 0;
  margin: 0;
  padding: 13px 15px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.transcoder-storage-grid > label { border-left: 1px solid var(--transcoder-hairline); }
.transcoder-workspace-status span,
.transcoder-workspace-status strong,
.transcoder-workspace-status code { display: block; }
.transcoder-workspace-status span { color: var(--cyan); font-size: 11px; font-weight: 900; letter-spacing: .05em; }
.transcoder-workspace-status strong { margin-top: 6px; font-size: 15px; }
.transcoder-workspace-status code { margin-top: 5px; color: #b8c8d8; font-size: 12px; overflow-wrap: anywhere; }

.transcoder-policy-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(620px, .88fr);
  column-gap: 24px;
}

.transcoder-policy-panel > .panel-head { grid-column: 1 / -1; }
.transcoder-policy-panel > .toggle-list {
  margin: 0;
  padding-right: 24px;
  border-right: 1px solid var(--transcoder-hairline);
}

.transcoder-page .toggle-list label { min-height: 62px; gap: 18px; }
.transcoder-page .toggle-list strong { font-size: 14px; }
.transcoder-page .toggle-list small { margin-top: 5px; font-size: 12px; line-height: 1.48; }
.transcoder-page .toggle-list input[type="checkbox"] { width: 19px; height: 19px; flex: 0 0 auto; }

.transcoder-policy-panel > .form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 13px;
}

.transcoder-page .form-grid label { gap: 7px; font-size: 13px; }
.transcoder-page .form-grid label > small { font-size: 11px; line-height: 1.45; }

.transcoder-processing-grid {
  grid-template-columns: minmax(520px, .78fr) minmax(0, 1.22fr);
  align-items: stretch;
  gap: 13px;
}

.video-output-panel .form-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.tideview-plus-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(380px, .72fr);
  column-gap: 22px;
  align-content: start;
}

.tideview-plus-panel > .panel-head,
.tideview-plus-panel > .helper-box,
.tideview-plus-panel > .transcoder-benchmark { grid-column: 1 / -1; }
.tideview-plus-panel > .toggle-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding-right: 22px;
  column-gap: 20px;
  border-right: 1px solid var(--transcoder-hairline);
}
.tideview-plus-panel > .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; }
.tideview-plus-panel > .helper-box { margin-top: 14px; }

.transcoder-benchmark {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--transcoder-hairline);
}
.transcoder-benchmark-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.transcoder-benchmark-head span,
.transcoder-benchmark-head strong,
.transcoder-benchmark-head small { display: block; }
.transcoder-benchmark-head strong { font-size: 14px; }
.transcoder-benchmark-head small { margin-top: 4px; color: var(--muted); font-size: 12px; }
.transcoder-benchmark-head em {
  padding: 5px 9px;
  color: #ffd487;
  border: 1px solid color-mix(in srgb, var(--gold) 34%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--gold) 7%, transparent);
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
  white-space: nowrap;
}
.transcoder-benchmark-grid { margin-top: 11px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.transcoder-benchmark-grid > div { min-width: 0; padding: 11px 14px; border-left: 1px solid var(--transcoder-hairline); }
.transcoder-benchmark-grid > div:first-child { padding-left: 0; border-left: 0; }
.transcoder-benchmark-grid span,
.transcoder-benchmark-grid strong,
.transcoder-benchmark-grid small { display: block; }
.transcoder-benchmark-grid span { color: var(--cyan); font-size: 10px; font-weight: 900; letter-spacing: .045em; }
.transcoder-benchmark-grid strong { margin-top: 5px; font-size: 17px; }
.transcoder-benchmark-grid small { margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.4; }
.transcoder-benchmark > p { margin: 10px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }

.transcoder-page .helper-box {
  padding: 13px 15px;
  border-radius: 7px;
}
.transcoder-page .helper-box strong { font-size: 13px; }
.transcoder-page .helper-box span { font-size: 12px; line-height: 1.5; }

.transcoder-diagnostics-panel .panel-head { align-items: center; margin-bottom: 11px; }
.transcoder-diagnostics-panel #playbackDiagnostics { margin-top: 0; }
.transcoder-diagnostics-panel .empty-state { min-height: 54px; padding: 15px; font-size: 13px; }
.transcoder-diagnostics-panel .button { min-height: 42px; font-size: 13px; }

@media (max-width: 1800px) {
  .transcoder-policy-panel { grid-template-columns: minmax(0, 1fr) minmax(480px, .9fr); }
  .transcoder-processing-grid { grid-template-columns: 1fr; }
  .video-output-panel .form-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 1250px) {
  .gpu-selector-panel .panel-head,
  .transcoder-policy-panel,
  .tideview-plus-panel { grid-template-columns: 1fr; }
  .transcoder-policy-panel > .toggle-list,
  .tideview-plus-panel > .toggle-list { padding-right: 0; border-right: 0; }
  .transcoder-policy-panel > .form-grid,
  .tideview-plus-panel > .form-grid { margin-top: 15px; }
  .tideview-plus-panel > .helper-box { grid-column: 1; }
  .tideview-plus-panel > .transcoder-benchmark { grid-column: 1; }
}

@media (max-width: 820px) {
  .transcoder-storage-grid,
  .video-output-panel .form-grid,
  .tideview-plus-panel > .toggle-list { grid-template-columns: 1fr; }
  .transcoder-storage-grid > label { border-top: 1px solid var(--transcoder-hairline); border-left: 0; }
  .transcoder-policy-panel > .form-grid,
  .tideview-plus-panel > .form-grid { grid-template-columns: 1fr; }
  .transcoder-benchmark-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .transcoder-benchmark-grid > div:nth-child(3) { padding-left: 0; border-left: 0; }
}

/* Phone Control is a single dashboard with a logo-only header. */
@media (max-width: 760px), (max-width: 1024px) and (hover: none) and (pointer: coarse) {
  :root, html:has(.control-music-player:not([hidden])) {
    --sidebar-width: 0px;
    --control-mobile-top-inset: max(28px, env(safe-area-inset-top, 0px));
    --topbar-height: calc(64px + var(--control-mobile-top-inset));
  }
  .topbar, .control-sidebar-collapsed .topbar {
    display: flex; align-items: center; height: var(--topbar-height);
    padding: calc(8px + var(--control-mobile-top-inset)) 16px 8px;
  }
  .topbar .topbar-start, .topbar .page-context, .topbar .top-actions,
  .topbar .control-music-player, .sidebar, .sidebar-scrim { display: none !important; }
  .topbar .mobile-control-brand { display: flex; align-items: center; }
  .mobile-control-brand img { display: block; width: 44px; height: 44px; border-radius: 8px; }
  .button, .icon-button, .nav-item, .nav-launch, .theme-picker, .advanced-switch,
  .section-tabs button, .guide-context-tabs button { min-height: 44px; }
  .icon-button { min-width: 44px; }
  .page-context { min-width: 0; }
  .page-context h1 { font-size: 15px; }
  .topbar-start { min-width: 0; gap: 8px; }
  .brand-copy strong { font-size: 18px; }
  .sidebar:not(.open) { visibility: hidden; }
  .sidebar.open { visibility: visible; }
  html.control-nav-open { overflow: hidden; }
  main, .page, .panel, .section-toolbar > div { min-width: 0; max-width: 100%; }
  main { margin-left: 0; padding-top: calc(var(--topbar-height) + 22px); }
  .section-toolbar { gap: 14px; }
  .section-toolbar > div:last-child, .button-row, .row-actions, .pagination { flex-wrap: wrap; }
  .pagination { gap: 8px; justify-content: flex-start; }
  .pagination > span { flex-basis: 100%; }
  .pagination .button { flex: 1 1 auto; }
  .page input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  .page select, .page textarea, dialog input:not([type="checkbox"]):not([type="radio"]),
  dialog select, dialog textarea { min-height: 44px; max-width: 100%; font-size: 16px; }
  .page p, .source-meta, .helper-box, .inline-status, dialog label { overflow-wrap: anywhere; }
  .table-shell { max-width: 100%; overscroll-behavior-x: contain; }
  .page[data-page="channels"] .table-shell { max-height: 65dvh; }
  .page[data-page="overview"] .activity-stream-table { border: 0; background: transparent; overflow: visible; }
  .activity-stream-table table, .activity-stream-table tbody { display: block; width: 100%; min-width: 0; }
  .activity-stream-table thead { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
  .activity-stream-table tbody tr {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 12px; border: 1px solid var(--line); border-radius: 12px;
    background: var(--panel-bg); overflow: hidden;
  }
  .activity-stream-table tbody tr.activity-has-specs { margin-bottom:0; border-radius:12px 12px 0 0; }
  .activity-stream-table tbody tr.activity-desktop-specs-row { display:block; margin-bottom:12px; border-top:0; border-radius:0 0 12px 12px; }
  .activity-stream-table tbody tr.activity-desktop-specs-row td { display:block; padding:0 12px 12px; }
  .activity-desktop-specs { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding:12px 0; }
  .activity-stream-table tbody td {
    display: block; width: auto; min-width: 0; max-width: none;
    padding: 12px; white-space: normal; overflow-wrap: anywhere;
    border: 0; border-bottom: 1px solid var(--line); font-size: 14px;
  }
  .activity-stream-table tbody td:nth-child(-n+3), .activity-stream-table td[colspan] { grid-column: 1 / -1; }
  .activity-stream-table tbody td:nth-child(4), .activity-stream-table tbody td:nth-child(7) { grid-column: 1 / -1; }
  .activity-stream-table td:has(.activity-mobile-details) > .delivery-pill,
  .activity-stream-table td:has(.activity-mobile-details) > .activity-delivery-detail { display: none; }
  .activity-stream-table .activity-mobile-details { display: grid; gap: 10px; margin: 0; }
  .activity-mobile-details > div { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 8px; }
  .activity-mobile-details dt { color: var(--muted); font-size: 12px; }
  .activity-mobile-details dd { min-width: 0; margin: 0; font-size: 13px; overflow-wrap: anywhere; }
  .activity-mobile-details > div:first-child dd { color: var(--cyan); font-weight: 750; }
  .activity-stream-table tbody td::before { display: block; margin-bottom: 6px; color: var(--muted); font-size: 11px; font-weight: 750; }
  .activity-stream-table tbody td:nth-child(1):not([colspan])::before { content: "Viewer"; }
  .activity-stream-table tbody td:nth-child(2)::before { content: "Title & program"; }
  .activity-stream-table tbody td:nth-child(3)::before { content: "Client & source"; }
  .activity-stream-table tbody td:nth-child(4)::before { content: "Playback details"; }
  .activity-stream-table tbody td:nth-child(5)::before { content: "Status"; }
  .activity-stream-table tbody td:nth-child(6)::before { content: "Data sent"; }
  .activity-stream-table tbody td:nth-last-child(-n+2) { border-bottom: 0; }
  .activity-stream-table td small, .activity-stream-table .pill { max-width: 100%; white-space: normal; font-size: 12px; line-height: 1.45; }
  .activity-stream-table .compact-actions { flex-wrap: wrap; gap: 8px; }
  .activity-stream-table .compact-actions .button { width: 100%; min-height: 44px; }
  .dvr-user-policy { padding: 13px; }
  .dvr-user-policy-head { grid-template-columns: 42px minmax(0, 1fr); }
  .dvr-folder-visibility { grid-column: 1 / -1; justify-self: start; }
  .dvr-user-policy-controls { grid-template-columns: minmax(0, 1fr); }
  dialog { width: calc(100vw - 20px); max-width: calc(100vw - 20px); max-height: calc(100dvh - 20px); }
  .dialog-card { padding: 16px; }
  dialog .form-grid { grid-template-columns: minmax(0, 1fr); }
  dialog .button-row { gap: 8px; }
  dialog .button-row .button { flex: 1 1 120px; white-space: normal; }
}

@media (min-width: 360px) and (max-width: 520px) {
  .page[data-page="overview"] .command-status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page[data-page="overview"] .command-status-grid .metric:nth-child(n) { padding: 14px 12px; border-right: 1px solid var(--overview-hairline); border-bottom: 1px solid var(--overview-hairline); }
  .page[data-page="overview"] .command-status-grid .metric:nth-child(2n) { border-right: 0; }
  .page[data-page="overview"] .command-status-grid .metric:nth-last-child(-n+2) { border-bottom: 0; }
  .page[data-page="overview"] .command-status-grid .cpu-metric-pair { gap: 7px; }
  .page[data-page="overview"] .command-status-grid .cpu-metric-pair > div + div { padding-left: 7px; }
}

/* Initial server setup shares the dark TideView activation theme. */
body.setup-pending {
  color-scheme: dark;
  color: #f4f8ff;
  background: #041126;
}
body.setup-pending main {
  display: grid;
  place-items: center;
  padding: clamp(18px, 4vw, 52px) !important;
  background-color: #041126;
  background-image:
    linear-gradient(180deg, rgba(2, 10, 29, .36), rgba(2, 10, 29, .55)),
    url('/assets/setup-backdrop.png');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
body.setup-pending .page[data-page="setup"] {
  width: min(1080px, 100%);
  max-width: 1080px;
}
body.setup-pending .setup-layout {
  display: block;
  overflow: hidden;
  border: 1px solid rgba(97, 163, 226, .4);
  border-radius: 22px;
  background: rgba(5, 17, 39, .88);
  box-shadow: 0 28px 84px rgba(0, 0, 0, .58), 0 0 48px rgba(30, 144, 227, .12);
  backdrop-filter: blur(18px);
}
body.setup-pending .setup-wizard-header {
  min-height: 78px;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  gap: 13px;
  color: #f7faff;
  border-bottom: 1px solid rgba(116, 170, 229, .22);
  background: rgba(7, 19, 43, .91);
}
body.setup-pending .setup-wizard-header img {
  width: 46px;
  height: 46px;
  border-radius: 11px;
  box-shadow: 0 8px 22px rgba(40, 125, 238, .28);
}
body.setup-pending .setup-wizard-header strong,
body.setup-pending .setup-wizard-header span { display: block; }
body.setup-pending .setup-wizard-header strong { font-size: 18px; }
body.setup-pending .setup-wizard-header span { margin-top: 3px; color: #b9cae2; font-size: 12px; }
body.setup-pending .setup-steps {
  position: static;
  padding: 12px 18px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 7px;
  overflow-x: auto;
  border-bottom: 1px solid rgba(116, 170, 229, .22);
  background: rgba(8, 22, 48, .9);
}
body.setup-pending .setup-steps button {
  min-width: 42px;
  min-height: 48px;
  padding: 6px;
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 5px;
  color: #b3c7e1;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  text-align: center;
}
body.setup-pending .setup-steps button > span {
  grid-row: auto;
  width: 27px;
  height: 27px;
  color: #cbdcf3;
  border-color: rgba(144, 188, 234, .48);
  background: rgba(18, 41, 75, .75);
  font-size: 11px;
}
body.setup-pending .setup-steps button:hover,
body.setup-pending .setup-steps button:focus-visible {
  color: #fff;
  border-color: rgba(86, 202, 236, .55);
  background: rgba(34, 134, 216, .16);
}
body.setup-pending .setup-steps button:focus-visible { outline: 2px solid #78f5ff; outline-offset: 2px; }
body.setup-pending .setup-steps button.active {
  color: #f5fbff;
  border-color: rgba(80, 217, 238, .42);
  background: rgba(25, 116, 188, .2);
  box-shadow: inset 0 -3px 0 #3be5ed;
}
body.setup-pending .setup-steps button.active > span {
  color: #06172d;
  border-color: #56eff1;
  background: linear-gradient(145deg, #65f0ef, #3d9dff);
  box-shadow: 0 0 18px rgba(52, 212, 246, .35);
}
body.setup-pending .setup-steps button.complete > span {
  color: #06251e;
  border-color: #52e3af;
  background: #52e3af;
}
body.setup-pending .setup-content { background: rgba(5, 15, 34, .44); }
body.setup-pending .setup-content .panel {
  min-height: 510px;
  padding: clamp(24px, 4vw, 42px);
  color: #f4f8ff;
  border: 0;
  border-radius: 0;
  background: linear-gradient(155deg, rgba(7, 23, 49, .86), rgba(5, 15, 34, .9));
  box-shadow: none;
}
body.setup-pending .setup-pane-head h2,
body.setup-pending .setup-status-card strong,
body.setup-pending .setup-guide-card h3,
body.setup-pending .setup-metadata-card h3,
body.setup-pending .setup-review-row strong,
body.setup-pending .connection-card strong { color: #f7faff; }
body.setup-pending .eyebrow { color: #64e7f1; }
body.setup-pending .setup-pane-head .lead,
body.setup-pending .setup-status-card small,
body.setup-pending .setup-action-card small,
body.setup-pending .setup-source-choices small,
body.setup-pending .setup-guide-card p:not(.eyebrow),
body.setup-pending .setup-metadata-card p:not(.eyebrow),
body.setup-pending .setup-review-row small,
body.setup-pending .connection-card small,
body.setup-pending .rights-note { color: #b4c8df; }
body.setup-pending .setup-pane-head .lead { font-size: 14px; }
body.setup-pending .form-grid label { font-size: 13px; }
body.setup-pending .form-grid label > small { color: #b4c8df; font-size: 12px; line-height: 1.45; }
body.setup-pending .setup-status-card,
body.setup-pending .setup-action-card,
body.setup-pending .setup-source-choices article,
body.setup-pending .setup-tuner-picker,
body.setup-pending .setup-guide-card,
body.setup-pending .setup-note,
body.setup-pending .setup-review-row,
body.setup-pending .connection-card,
body.setup-pending .client-grid div {
  background: rgba(7, 20, 43, .79);
}
body.setup-pending .setup-action-card:hover,
body.setup-pending .setup-action-card:focus-visible,
body.setup-pending .setup-source-choices article:hover {
  border-color: rgba(80, 219, 241, .65);
  background: rgba(13, 46, 83, .88);
}
body.setup-pending input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
body.setup-pending select,
body.setup-pending textarea {
  color: #f7faff;
  border-color: rgba(130, 174, 224, .45);
  background: rgba(3, 13, 31, .91);
}
body.setup-pending input::placeholder,
body.setup-pending textarea::placeholder { color: #a0b7d2; }
body.setup-pending label { color: #c4d5e9; }
body.setup-pending .button.primary {
  color: #05172c;
  border-color: #62e6f2;
  background: linear-gradient(100deg, #38e3e9, #5b9cff 62%, #9a68ef);
  box-shadow: 0 9px 24px rgba(27, 156, 230, .24);
}
body.setup-pending .button.primary:hover { filter: brightness(1.09); }
body.setup-pending .button.secondary,
body.setup-pending .icon-button {
  color: #e4f0ff;
  border-color: rgba(123, 166, 219, .52);
  background: rgba(16, 36, 69, .93);
}
body.setup-pending .button.secondary:hover,
body.setup-pending .icon-button:hover { border-color: #67ddec; background: rgba(26, 59, 101, .95); }
body.setup-pending #setupLibraryDialog,
body.setup-pending #setupFolderDialog { color: #f4f8ff; border-color: rgba(97, 163, 226, .5); background: #08172e; }
body.setup-pending #setupLibraryDialog::backdrop,
body.setup-pending #setupFolderDialog::backdrop { background: rgba(2, 8, 22, .72); backdrop-filter: blur(4px); }
@media (max-width: 720px) {
  body.setup-pending main { padding: 10px !important; place-items: start center; background-attachment: scroll; }
  body.setup-pending .setup-layout { border-radius: 15px; }
  body.setup-pending .setup-wizard-header { min-height: 68px; padding: 12px 16px; }
  body.setup-pending .setup-wizard-header img { width: 40px; height: 40px; }
  body.setup-pending .setup-steps { grid-template-columns: repeat(6, minmax(42px, 1fr)); padding: 8px; }
  body.setup-pending .setup-steps button { min-width: 42px; min-height: 44px; }
  body.setup-pending .setup-content .panel { min-height: 0; padding: 22px 17px 26px; }
}
/* Setup follows the existing Cinema Gold palette used by the PC web shell.
   Keep these overrides inside setup; the shared shell owns the theme tokens. */
html[data-control-theme="cinema"] body.setup-pending { color: var(--text); background: var(--bg); }
html[data-control-theme="cinema"] body.setup-pending main {
  background-color: var(--bg);
  background-image: radial-gradient(ellipse at 50% 0%,color-mix(in srgb,var(--gold) 9%,transparent),transparent 65%);
}
html[data-control-theme="cinema"] body.setup-pending .setup-layout {
  border-color: color-mix(in srgb,var(--gold) 28%,var(--line));
  background: var(--panel-bg); box-shadow: var(--shadow);
}
html[data-control-theme="cinema"] body.setup-pending :is(.setup-wizard-header,.setup-steps) {
  color: var(--text); border-color: var(--line); background: var(--surface-2);
}
html[data-control-theme="cinema"] body.setup-pending .setup-wizard-header img { box-shadow: 0 6px 18px color-mix(in srgb,var(--gold) 16%,transparent); }
html[data-control-theme="cinema"] body.setup-pending .setup-steps button { color: var(--muted); }
html[data-control-theme="cinema"] body.setup-pending .setup-steps button > span { color: var(--muted-strong); border-color: var(--line-strong); background: var(--control-bg); }
html[data-control-theme="cinema"] body.setup-pending .setup-steps button:is(:hover,:focus-visible,.active) {
  color: var(--text); border-color: var(--gold); background: var(--nav-active-bg);
}
html[data-control-theme="cinema"] body.setup-pending .setup-steps button:focus-visible { outline-color: var(--gold); }
html[data-control-theme="cinema"] body.setup-pending .setup-steps button.active { box-shadow: inset 0 -3px 0 var(--gold); }
html[data-control-theme="cinema"] body.setup-pending .setup-steps button.active > span {
  color: var(--primary-text); border-color: var(--primary-border); background: var(--primary-bg);
  box-shadow: 0 0 14px color-mix(in srgb,var(--gold) 20%,transparent);
}
html[data-control-theme="cinema"] body.setup-pending .setup-steps button.complete > span { color: var(--bg); border-color: var(--green); background: var(--green); }
html[data-control-theme="cinema"] body.setup-pending .setup-content,
html[data-control-theme="cinema"] body.setup-pending .setup-content .panel { color: var(--text); background: var(--panel-bg); }
html[data-control-theme="cinema"] :is(.page[data-page="setup"],#setupLibraryDialog,#setupFolderDialog) :is(.setup-action-card,.setup-source-choices article,.setup-status-card,.setup-tuner-picker,.setup-guide-card,.setup-note,.setup-review-row,.connection-card,.client-grid div) { background: var(--surface); }
html[data-control-theme="cinema"] :is(.page[data-page="setup"],#setupLibraryDialog,#setupFolderDialog) :is(.setup-action-card,.setup-source-choices article):is(:hover,:focus-visible,[aria-checked="true"]) { border-color: var(--gold); background: var(--nav-active-bg); }
html[data-control-theme="cinema"] :is(.page[data-page="setup"],#setupLibraryDialog,#setupFolderDialog) :is(.setup-pane-icon,.setup-status-card > svg,.setup-action-card > svg,.setup-review-row > span) { color: var(--gold); border-color: color-mix(in srgb,var(--gold) 35%,var(--line)); background: color-mix(in srgb,var(--gold) 8%,var(--panel-bg)); }
html[data-control-theme="cinema"] .page[data-page="setup"] .setup-metadata-card { border-color: color-mix(in srgb,var(--gold) 35%,var(--line)); background: color-mix(in srgb,var(--gold) 6%,var(--panel-bg)); }
html[data-control-theme="cinema"] .page[data-page="setup"] .setup-metadata-card.configured { border-color: color-mix(in srgb,var(--green) 35%,var(--line)); background: color-mix(in srgb,var(--green) 5%,var(--panel-bg)); }
html[data-control-theme="cinema"] .page[data-page="setup"] .setup-note { color: var(--muted-strong); }
html[data-control-theme="cinema"] body.setup-pending :is(.setup-pane-head h2,.setup-status-card strong,.setup-guide-card h3,.setup-metadata-card h3,.setup-review-row strong,.connection-card strong) { color: var(--text); }
html[data-control-theme="cinema"] body.setup-pending :is(.setup-wizard-header span,.setup-pane-head .lead,.setup-status-card small,.setup-action-card small,.setup-source-choices small,.setup-guide-card p:not(.eyebrow),.setup-metadata-card p:not(.eyebrow),.setup-review-row small,.connection-card small,.rights-note,.form-grid label > small) { color: var(--muted); }
html[data-control-theme="cinema"] body.setup-pending .eyebrow { color: var(--gold); }
html[data-control-theme="cinema"] body.setup-pending :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),select,textarea) { color: var(--text); border-color: var(--line-strong); background: var(--field-bg); }
html[data-control-theme="cinema"] body.setup-pending :is(input,textarea)::placeholder { color: var(--muted); }
html[data-control-theme="cinema"] body.setup-pending label { color: var(--muted-strong); }
html[data-control-theme="cinema"] body.setup-pending .button.primary { color: var(--primary-text); border-color: var(--primary-border); background: var(--primary-bg); box-shadow: none; }
html[data-control-theme="cinema"] body.setup-pending :is(.button.secondary,.icon-button) { color: var(--text); border-color: var(--line-strong); background: var(--control-bg); }
html[data-control-theme="cinema"] body.setup-pending :is(.button.secondary,.icon-button):hover { border-color: var(--gold); background: var(--surface-3); }
html[data-control-theme="cinema"] :is(#setupLibraryDialog,#setupFolderDialog) { color: var(--text); border-color: var(--line-strong); background: var(--panel-bg); }
html[data-control-theme="cinema"] :is(.page[data-page="setup"],#setupLibraryDialog,#setupFolderDialog) :is(input[type="checkbox"],input[type="radio"]) { accent-color: var(--gold); }
html[data-control-theme="cinema"] body.setup-pending :is(#setupLibraryDialog,#setupFolderDialog)::backdrop { background: rgba(0,0,0,.76); }
html[data-control-font="large"] body { font-size: 16px; }
html[data-control-font="xlarge"] body { font-size: 17px; }
html[data-control-font="large"] :where(.topbar, .sidebar, main, dialog) :where(p, span, small, label, button, input, select, textarea, td, th, a, summary, code, em) { font-size: max(12px, 1em); }
html[data-control-font="xlarge"] :where(.topbar, .sidebar, main, dialog) :where(p, span, small, label, button, input, select, textarea, td, th, a, summary, code, em) { font-size: max(14px, 1em); }
html[data-control-font="large"] :where(.topbar, .sidebar, main, dialog) :where(.eyebrow, .save-state, .rights-note, .hint, .helper-text) { font-size: 11px; }
html[data-control-font="xlarge"] :where(.topbar, .sidebar, main, dialog) :where(.eyebrow, .save-state, .rights-note, .hint, .helper-text) { font-size: 12px; }
html[data-control-font="large"] .topbar h1 { font-size: 22px; }
html[data-control-font="xlarge"] .topbar h1 { font-size: 24px; }
html[data-control-font="large"] :where(.panel h2, .section-toolbar h2, .setup-pane-head h2) { font-size: 20px; }
html[data-control-font="xlarge"] :where(.panel h2, .section-toolbar h2, .setup-pane-head h2) { font-size: 22px; }
html[data-control-font="large"] :where(.button, .icon-button, .nav-item, .nav-launch, .theme-picker, .font-picker, .advanced-switch, input, select, textarea) { min-height: 38px; }
html[data-control-font="xlarge"] :where(.button, .icon-button, .nav-item, .nav-launch, .theme-picker, .font-picker, .advanced-switch, input, select, textarea) { min-height: 42px; }
html[data-control-font="large"] .activity-desktop-specs span { font-size:12px; }
html[data-control-font="large"] .activity-desktop-specs strong { font-size:14px; }
html[data-control-font="xlarge"] .activity-desktop-specs span { font-size:14px; }
html[data-control-font="xlarge"] .activity-desktop-specs strong { font-size:16px; }
html[data-control-font="large"] .activity-stream-table .compact-actions .stop-stream { font-size:14px; }
html[data-control-font="xlarge"] .activity-stream-table .compact-actions .stop-stream { font-size:16px; }
html[data-control-font="large"] #plexMigrationDialog .plex-profile-copy strong { font-size:13px; }
html[data-control-font="large"] #plexMigrationDialog .plex-profile-copy small { font-size:11px; }
html[data-control-font="xlarge"] #plexMigrationDialog .plex-profile-copy strong { font-size:14px; }
html[data-control-font="xlarge"] #plexMigrationDialog .plex-profile-copy small { font-size:12px; }
html[data-control-font="large"] #plexMigrationDialog .plex-migration-consent small,
html[data-control-font="large"] #plexMigrationDialog .plex-migration-note { font-size:13px; }
html[data-control-font="xlarge"] #plexMigrationDialog .plex-migration-consent small,
html[data-control-font="xlarge"] #plexMigrationDialog .plex-migration-note { font-size:14px; }
html[data-control-font="large"] #plexMigrationDialog .plex-migration-legal { font-size:11px; }
html[data-control-font="xlarge"] #plexMigrationDialog .plex-migration-legal { font-size:12px; }
/* Owner notices share TideView's quiet surfaces and warm-to-teal accents. */
.viewer-messages-panel { margin-top: 24px; }
.viewer-message-recipients { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; }
.viewer-message-user { display: flex; align-items: center; justify-content: space-between; gap: 18px; border: 1px solid #ffffff15; border-radius: 12px; padding: 16px; background: #ffffff04; }
.viewer-message-user small { display: block; margin-top: 5px; color: #9dafb8; }
.viewer-message-delivery { display: grid; gap: 6px; margin-top: 16px; overflow-wrap: anywhere; }
.viewer-message-delivery small, .viewer-message-hint { color: #9dafb8; font-size: 12px; }
#viewerMessageDialog { width: min(620px, calc(100vw - 32px)); border: 1px solid #ffffff20; border-radius: 18px; background: #172126; color: #f3f7f8; padding: 0; box-shadow: 0 24px 90px #0008; }
#viewerMessageDialog::backdrop { background: #0009; backdrop-filter: blur(4px); }
.viewer-message-compose { display: grid; gap: 18px; border-top: 3px solid #58d4c6; }
.viewer-message-compose label { display: grid; gap: 8px; }
.viewer-message-compose textarea { resize: vertical; min-height: 120px; font: inherit; line-height: 1.5; background: #10191e; color: #fff; border: 1px solid #49616c; border-radius: 10px; padding: 12px; }
.viewer-message-hint { display: flex; gap: 20px; justify-content: space-between; }
#viewerMessageError:empty { display: none; }
#viewerMessageLength { white-space: nowrap; }