:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bg: #080d16;
  --panel: #101827;
  --panel-raised: #151f31;
  --panel-soft: #0c1320;
  --border: #25334a;
  --border-strong: #344764;
  --text: #edf3fb;
  --muted: #94a3b8;
  --primary: #4f8cff;
  --primary-hover: #6ca0ff;
  --success: #39d98a;
  --warning: #f5bd4f;
  --danger: #ff647c;
  --radius: 14px;
  --shadow: 0 16px 40px rgba(0, 0, 0, .22);
  color: var(--text);
  background: var(--bg);
}

* { box-sizing: border-box; }
html { min-width: 320px; }
body {
  margin: 0;
  min-height: 100vh;
  line-height: 1.55;
  background:
    radial-gradient(circle at 85% -10%, rgba(79, 140, 255, .11), transparent 32rem),
    var(--bg);
}
body.menu-open { overflow: hidden; }
a { color: #8eb6ff; text-decoration: none; }
a:hover { color: #b9d2ff; }
button, input, select, textarea { font: inherit; }
button, summary, a { -webkit-tap-highlight-color: transparent; }

.shell {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  min-height: 100vh;
}
.navigation {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: rgba(12, 19, 32, .96);
  border-right: 1px solid var(--border);
  z-index: 30;
}
.navigation a {
  min-height: 44px;
  padding: 11px 13px;
  display: flex;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 10px;
  color: #a4b1c3;
  font-size: 14px;
  font-weight: 600;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.navigation a:hover { background: var(--panel-raised); color: var(--text); }
.navigation a[aria-current="page"] {
  background: linear-gradient(90deg, rgba(79, 140, 255, .22), rgba(79, 140, 255, .08));
  border-color: rgba(79, 140, 255, .26);
  color: #fff;
}
.navigation .brand {
  min-height: 52px;
  margin-bottom: 19px;
  padding: 8px 10px;
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.02em;
}
.navigation .brand::before {
  content: "R";
  width: 35px;
  height: 35px;
  margin-right: 10px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 10px;
  background: linear-gradient(135deg, #4f8cff, #7458ea);
  box-shadow: 0 8px 20px rgba(79, 140, 255, .25);
}
.content { min-width: 0; padding: 0; }
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: 68px;
  padding: 0 clamp(18px, 3vw, 38px);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 13px;
  border-bottom: 1px solid rgba(37, 51, 74, .8);
  background: rgba(8, 13, 22, .78);
  backdrop-filter: blur(14px);
  color: var(--muted);
  font-size: 13px;
}
.content > section {
  width: min(1380px, 100%);
  margin: 0 auto;
  padding: clamp(28px, 4vw, 48px) clamp(18px, 3vw, 38px) 64px;
}
h1 {
  margin: 0 0 8px;
  font-size: clamp(29px, 3vw, 40px);
  line-height: 1.15;
  letter-spacing: -.035em;
}
h2 { letter-spacing: -.02em; }
section > p { max-width: 760px; margin: 0 0 26px; color: var(--muted); }
code {
  padding: .2em .4em;
  border: 1px solid rgba(90, 113, 146, .25);
  border-radius: 6px;
  background: #080d16;
  color: #cbdaf0;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: .88em;
  overflow-wrap: anywhere;
}

.status-card, .login-card, .warning-card, .credential-card,
.source-create, .storage-card, .player-card {
  padding: clamp(18px, 2.2vw, 24px);
  background: linear-gradient(145deg, rgba(21, 31, 49, .96), rgba(15, 23, 38, .96));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .025);
}
.status-card, .login-card, .warning-card, .credential-card, .source-create { max-width: 820px; }
.status-ok {
  display: inline-flex;
  margin-left: 9px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(57, 217, 138, .1);
  color: #68e6aa;
  font-size: 12px;
  font-weight: 700;
}
.status-planned { color: var(--warning); }
.status-disabled { color: var(--muted); }

button, .button-link {
  min-height: 42px;
  padding: 9px 15px;
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  background: #1b2940;
  color: var(--text);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.2;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
button:hover, .button-link:hover {
  transform: translateY(-1px);
  border-color: #4a6388;
  background: #22334f;
  color: #fff;
}
button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 3px solid rgba(79, 140, 255, .35);
  outline-offset: 2px;
}
.link-button { min-height: 36px; padding: 7px 10px; border-color: transparent; background: transparent; color: #8eb6ff; }
.menu-button { display: none; padding: 0; border: 0; background: transparent; box-shadow: none; color: var(--text); font-size: 23px; }

input, select, textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  background: var(--panel-soft);
  color: var(--text);
}
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--primary); }
label { color: #aebacd; font-size: 13px; font-weight: 650; }
input[type="checkbox"] { width: 18px; min-height: 18px; accent-color: var(--primary); }
summary { color: #b9c8dc; font-weight: 700; cursor: pointer; }

.login-page {
  display: grid;
  place-items: center;
  padding: 18px;
  background: radial-gradient(circle at 50% 0, rgba(79, 140, 255, .2), transparent 38rem), var(--bg);
}
.login-card { width: min(430px, 100%); padding: clamp(25px, 5vw, 38px); box-shadow: var(--shadow); }
.login-card h1 { font-size: 28px; }
.login-card p { color: var(--muted); }
.login-card form, .login-card label { display: grid; gap: 7px; }
.login-card form { gap: 17px; }
.login-card button { width: 100%; background: linear-gradient(135deg, #477ff6, #6658e7); border-color: #6d8cf0; }
.error {
  margin: 14px 0;
  padding: 11px 13px;
  border: 1px solid rgba(255, 100, 124, .25);
  border-radius: 9px;
  background: rgba(255, 100, 124, .11);
  color: #ffc3cd;
}

@media (max-width: 900px) {
  .shell { display: block; }
  .navigation {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(84vw, 300px);
    height: 100dvh;
    transform: translateX(-105%);
    transition: transform .2s ease;
    box-shadow: 20px 0 50px rgba(0, 0, 0, .45);
  }
  .navigation.is-open { transform: translateX(0); }
  body.menu-open::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 25;
    background: rgba(2, 6, 12, .68);
  }
  .topbar { min-height: 62px; justify-content: space-between; }
  .menu-button { display: inline-grid; place-items: center; width: 44px; height: 44px; z-index: 26; }
}

@media (max-width: 620px) {
  .topbar { padding: 0 12px; }
  .topbar > span { display: none; }
  .content > section { padding: 24px 14px 48px; }
  h1 { font-size: 30px; }
  .status-card, .warning-card, .credential-card, .source-create, .storage-card, .player-card { padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}

/* Compact operational dashboard */
.dashboard-page { max-width: 1380px; }
.dashboard-heading { margin-bottom: 22px; display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }
.dashboard-heading > div > span { color: #7186a5; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.dashboard-heading h1 { margin: 3px 0 4px; }
.dashboard-heading p { margin: 0; color: var(--muted); }
.dashboard-primary-action, .dashboard-actions a { min-height: 40px; padding: 9px 13px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border-strong); border-radius: 9px; background: #1b2940; color: #dce7f5; font-size: 12px; font-weight: 750; }
.dashboard-primary-action { border-color: #5d82d7; background: linear-gradient(135deg, #477ff6, #6658e7); color: #fff; }
.dashboard-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
.dashboard-card, .dashboard-hero { min-width: 0; padding: 17px; border: 1px solid var(--border); border-radius: 13px; background: linear-gradient(145deg, rgba(21, 31, 49, .96), rgba(14, 22, 36, .96)); }
.dashboard-card { grid-column: span 4; }
.dashboard-hero { grid-column: span 8; position: relative; overflow: hidden; }
.dashboard-hero::after { content: ""; position: absolute; width: 240px; height: 240px; right: -90px; top: -120px; border-radius: 50%; background: rgba(79, 140, 255, .09); }
.dashboard-hero.is-live { border-color: rgba(57, 217, 138, .32); }
.dashboard-hero.is-live::after { background: rgba(57, 217, 138, .08); }
.dashboard-alerts { grid-column: span 4; }
.dashboard-storage { grid-column: span 4; }
.dashboard-card-title { min-height: 25px; display: flex; align-items: center; gap: 8px; color: #dce6f3; font-size: 12px; }
.dashboard-card-title > a { margin-left: auto; color: #7fa9f4; font-size: 10px; font-weight: 700; }
.dashboard-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #75849a; box-shadow: 0 0 0 4px rgba(117, 132, 154, .12); }
.is-live .dashboard-live-dot { background: var(--success); box-shadow: 0 0 0 4px rgba(57, 217, 138, .12); }
.dashboard-count { min-width: 22px; padding: 2px 6px; border-radius: 999px; background: var(--panel-soft); color: var(--muted); text-align: center; font-size: 10px; }
.dashboard-hero h2 { margin: 15px 0 13px; font-size: clamp(21px, 2.3vw, 29px); }
.dashboard-hero > p { margin: 4px 0 0; color: var(--muted); }
.dashboard-hero-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.dashboard-hero-metrics div { min-width: 0; padding: 9px 10px; border: 1px solid rgba(70, 91, 122, .45); border-radius: 8px; background: rgba(7, 12, 20, .42); }
.dashboard-hero-metrics span, .dashboard-stats span, .dashboard-summary span { display: block; color: #7e90a8; font-size: 9px; font-weight: 700; text-transform: uppercase; }
.dashboard-hero-metrics strong { display: block; overflow: hidden; margin-top: 2px; color: #edf3fb; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-stats { margin: 13px 0; display: grid; gap: 6px; }
.dashboard-stats-4 { grid-template-columns: repeat(4, 1fr); }
.dashboard-stats-3 { grid-template-columns: repeat(3, 1fr); }
.dashboard-stats div { padding: 8px 5px; border: 1px solid var(--border); border-radius: 8px; background: rgba(8, 13, 22, .42); text-align: center; }
.dashboard-stats strong { display: block; color: #e4edf8; font-size: 17px; line-height: 1.2; }
.dashboard-stats .stat-good strong { color: #64dfa4; }
.dashboard-list { margin-top: 10px; display: grid; gap: 6px; }
.dashboard-list > a { min-height: 36px; padding: 7px 8px; display: flex; align-items: center; gap: 8px; border-radius: 7px; background: rgba(8, 13, 22, .4); color: #d5e0ed; }
.dashboard-list > a:hover { background: rgba(29, 43, 65, .72); }
.compact-list > a strong { min-width: 0; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.compact-list > a small { min-width: 0; margin-left: auto; overflow: hidden; color: #71839b; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.source-state-dot { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: #6f7d91; }
.source-state-dot.online { background: var(--success); }
.dashboard-alert { font-size: 10px; }
.dashboard-alert i { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--warning); }
.dashboard-alert.alert-danger i { background: var(--danger); }
.dashboard-alert span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-alert b { margin-left: auto; }
.dashboard-empty { min-height: 75px; display: grid; place-items: center; align-content: center; color: var(--muted); text-align: center; }
.dashboard-empty p { margin: 3px; font-size: 10px; }
.dashboard-ok span { color: var(--success); font-size: 19px; }
.dashboard-summary { margin: 13px 0 8px; display: flex; align-items: baseline; gap: 7px; }
.dashboard-summary strong { font-size: 24px; }
.dashboard-storage-track { height: 7px; margin: 13px 0 6px; overflow: hidden; border-radius: 999px; background: #070b12; }
.dashboard-storage-track i { display: block; height: 100%; border-radius: inherit; background: var(--success); }
.dashboard-storage-track.storage-warning i { background: var(--warning); }
.dashboard-storage-track.storage-high i { background: #ee8843; }
.dashboard-storage-track.storage-critical i { background: var(--danger); }
.dashboard-storage-label { display: flex; justify-content: space-between; color: #71839b; font-size: 9px; }
.dashboard-latest { margin-top: 11px; padding: 8px; display: grid; grid-template-columns: auto 1fr; gap: 1px 8px; border-radius: 8px; background: rgba(8, 13, 22, .42); }
.dashboard-latest span { grid-row: span 2; align-self: center; color: #71839b; font-size: 9px; text-transform: uppercase; }
.dashboard-latest strong { overflow: hidden; color: #dce6f3; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-latest small { color: #71839b; font-size: 8px; }
.dashboard-services { margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.dashboard-services > div { padding: 8px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 8px; background: rgba(8, 13, 22, .42); }
.service-dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: #75849a; }
.service-dot.good { background: var(--success); }.service-dot.bad { background: var(--danger); }
.dashboard-services p { min-width: 0; margin: 0; display: grid; }
.dashboard-services strong { font-size: 10px; }.dashboard-services small { color: #71839b; font-size: 8px; }
.dashboard-actions { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.dashboard-actions a { min-height: 36px; padding: 7px 11px; background: var(--panel); }
.dashboard-card-note { margin-left: auto; color: #667a96; font-size: 8px; font-weight: 700; text-transform: uppercase; }
.machine-metrics { margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.machine-metric { min-width: 0; padding: 9px; border: 1px solid var(--border); border-radius: 8px; background: rgba(8, 13, 22, .42); }
.machine-metric > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.machine-metric span { color: #8698af; font-size: 9px; font-weight: 750; text-transform: uppercase; }
.machine-metric strong { color: #e3edf8; font-size: 13px; }
.machine-metric small { display: block; margin-top: 4px; overflow: hidden; color: #6f829b; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.machine-track { height: 5px; margin-top: 6px; overflow: hidden; border-radius: 999px; background: #070b12; }
.machine-track i { display: block; height: 100%; border-radius: inherit; background: var(--success); }
.machine-metric.metric-warning .machine-track i { background: var(--warning); }
.machine-metric.metric-critical .machine-track i { background: var(--danger); }
.machine-metric.metric-warning strong { color: var(--warning); }
.machine-metric.metric-critical strong { color: var(--danger); }
@media (max-width: 420px) { .machine-metrics { grid-template-columns: 1fr; } }
.dashboard-refresh-meta { margin-left: auto; display: flex; align-items: center; gap: 8px; color: #71839b; font-size: 9px; }
.dashboard-refresh-meta a { font-weight: 700; }
.dashboard-refresh-meta .is-error { color: var(--warning); }
.settings-card { gap: 18px; }
.settings-card h2 { margin: 0 0 5px; font-size: 18px; }
.settings-card p { margin: 0; color: var(--muted); font-size: 12px; }
.settings-number { display: flex; align-items: center; gap: 9px; }
.settings-number input { max-width: 150px; }
.settings-number span { color: var(--muted); font-size: 12px; }
.settings-card small { color: var(--muted); font-weight: 500; }
.settings-card button { justify-self: start; }
.settings-saved { max-width: 820px; margin-bottom: 12px; padding: 10px 13px; border: 1px solid rgba(57, 217, 138, .28); border-radius: 9px; background: rgba(57, 217, 138, .1); color: #68e6aa; font-size: 12px; }
@media (max-width: 760px) { .dashboard-refresh-meta { margin-left: 0; } }
@media (max-width: 1120px) { .dashboard-hero { grid-column: span 7; }.dashboard-alerts { grid-column: span 5; }.dashboard-card { grid-column: span 6; } }
@media (max-width: 760px) { .dashboard-heading { align-items: stretch; flex-direction: column; }.dashboard-primary-action { width: 100%; }.dashboard-hero, .dashboard-alerts, .dashboard-card { grid-column: 1 / -1; }.dashboard-hero-metrics { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) { .dashboard-hero-metrics { grid-template-columns: 1fr 1fr; }.dashboard-stats-4 { grid-template-columns: 1fr 1fr; }.dashboard-services { grid-template-columns: 1fr; }.dashboard-actions { display: grid; grid-template-columns: 1fr 1fr; }.dashboard-actions a { text-align: center; } }
/* OBS control */
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.page-heading h1 { margin: 0; }
.eyebrow, .card-kicker { color: var(--muted); font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.obs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.obs-program-card { background: linear-gradient(145deg, rgba(29, 185, 84, .12), transparent 55%), var(--panel); }
.obs-scene-name { display: block; margin: .65rem 0 1.25rem; font-size: clamp(1.6rem, 4vw, 2.7rem); }
.obs-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin: 0; }
.obs-metrics div { padding: .8rem; border: 1px solid var(--border); border-radius: .75rem; }
.obs-metrics dt { color: var(--muted); font-size: .78rem; }
.obs-metrics dd { margin: .25rem 0 0; font-weight: 700; }
.obs-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.obs-actions form, .obs-actions button { width: 100%; }
.obs-scene-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.obs-scene-buttons form, .obs-scene-button { width: 100%; }
.obs-scene-button { min-height: 52px; border-color: rgba(79, 140, 255, .55); background: rgba(79, 140, 255, .2); color: #dce9ff; }
.obs-scene-button:hover { background: rgba(79, 140, 255, .34); }
.obs-scene-button.is-active { border-color: rgba(57, 217, 138, .65); background: rgba(57, 217, 138, .24); color: #baf7d8; box-shadow: inset 0 0 0 1px rgba(57, 217, 138, .16); }
.obs-scene-button.is-active:hover { background: rgba(57, 217, 138, .32); }
.obs-notice { margin-bottom: 1rem; }
.obs-submenu { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4rem; margin-bottom: 1rem; padding: .35rem; border: 1px solid var(--border); border-radius: .8rem; background: var(--panel-soft); }
.obs-submenu button { min-height: 44px; border: 1px solid transparent; background: transparent; color: var(--muted); }
.obs-submenu button[aria-selected="true"] { border-color: rgba(79, 140, 255, .35); background: rgba(79, 140, 255, .18); color: var(--text); }
.obs-tab-panel[hidden] { display: none; }
.obs-vnc-card, .obs-route-card { margin: 0; }
.obs-vnc-card .source-heading { align-items: center; }
.obs-vnc-card h2 { margin: .2rem 0 0; }
.obs-vnc-frame-wrap { overflow: hidden; aspect-ratio: 16 / 9; min-height: 360px; border: 1px solid var(--border); border-radius: .8rem; background: #05080d; }
.obs-vnc-frame { width: 100%; height: 100%; border: 0; }
@media (max-width: 700px) { .obs-submenu { grid-template-columns: 1fr 1fr; } .obs-grid { grid-template-columns: 1fr; } .obs-metrics, .obs-actions { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .obs-vnc-frame-wrap { min-height: 240px; } }
@media (max-width: 420px) { .obs-metrics, .obs-actions, .obs-scene-buttons { grid-template-columns: 1fr; } .obs-vnc-frame-wrap { min-height: 190px; } }
/* OBS media library */
.media-page { max-width: 1180px; }
.media-free { color: var(--muted); font-size: .82rem; }
.media-upload-card { margin-bottom: 1.25rem; }
.media-upload-card h2 { margin-top: 0; }
.media-upload-card > p, .media-upload-card > small { color: var(--muted); }
.media-upload-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: .8rem; margin: 1rem 0 .65rem; }
.media-upload-form label { display: grid; gap: .4rem; }
.media-list-heading { display: flex; align-items: center; gap: .6rem; }
.media-list-heading span { padding: .15rem .5rem; border-radius: 99px; background: var(--panel-soft); color: var(--muted); font-size: .75rem; }
.media-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.media-card { min-width: 0; }
.media-card h3 { overflow: hidden; margin: .45rem 0; text-overflow: ellipsis; white-space: nowrap; }
.media-card > p { color: var(--muted); font-size: .78rem; }
.media-card label { display: grid; gap: .35rem; }
.media-card input[readonly] { font-family: monospace; font-size: .75rem; }
.media-kind { color: #8eb6ff; font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.media-actions { display: flex; gap: .65rem; margin-top: .85rem; }
.media-actions .button-link, .media-actions button { min-height: 40px; }
@media (max-width: 700px) { .media-grid { grid-template-columns: 1fr; } .media-upload-form { grid-template-columns: 1fr; } }