:root {
    color-scheme: dark;
    --bg: #06101d;
    --panel: #0b1929;
    --panel-2: #102237;
    --line: rgba(157, 190, 225, .16);
    --text: #f1f7ff;
    --muted: #8298b2;
    --cyan: #49d9ff;
    --green: #4be38d;
    --yellow: #f8c75b;
    --red: #ff6677;
    --blue: #73a8ff;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: radial-gradient(circle at 20% 0%, #112d4a 0, transparent 34rem), var(--bg); color: var(--text); }
button, input { font: inherit; }
button { cursor: pointer; }
.monitor-shell { width: min(1800px, 100%); margin: 0 auto; padding: 24px clamp(16px, 3vw, 42px) 42px; }
.topbar, .commandbar, .top-actions, .brand-lockup, .view-controls, .dialog-header, .dialog-actions, .switch-row { display: flex; align-items: center; }
.topbar, .commandbar { justify-content: space-between; gap: 20px; }
.topbar { padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.brand-lockup { gap: 12px; }
.brand-mark { display: grid; place-items: center; width: 92px; height: 62px; overflow: hidden; border-radius: 0; background: transparent; box-shadow: none; font-size: 21px; }.brand-mark img { width: 100%; height: 100%; object-fit: contain; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: 19px; letter-spacing: -.02em; }
.brand-lockup p { margin-top: 3px; color: var(--muted); font-size: 12px; }
.top-actions, .view-controls { gap: 8px; }
.system-status { color: var(--green); font-size: 12px; font-weight: 700; }
.system-status i { margin-right: 5px; font-size: 8px; }
.icon-button, .layout-button { border: 1px solid var(--line); border-radius: 9px; background: rgba(16, 34, 55, .75); color: var(--text); }
.icon-button { display: inline-flex; align-items: center; gap: 7px; padding: 9px 11px; font-size: 12px; }
.icon-button:hover, .layout-button:hover { border-color: var(--cyan); color: var(--cyan); }
.commandbar { padding: 26px 0 18px; }
.eyebrow { color: var(--cyan); font-size: 10px; font-weight: 800; letter-spacing: .16em; }
h2 { margin-top: 4px; font-size: 24px; letter-spacing: -.04em; }
.view-label, .refresh-indicator { color: var(--muted); font-size: 12px; }
.layout-button { width: 31px; height: 31px; padding: 0; font-size: 12px; }
.layout-button.active { border-color: var(--cyan); background: rgba(73, 217, 255, .14); color: var(--cyan); }
.refresh-indicator { margin-left: 7px; white-space: nowrap; }
.refresh-indicator i { color: var(--cyan); }
.alert-panel { display: grid; gap: 8px; margin: 0 0 14px; }
.alert-item { display: flex; align-items: center; gap: 10px; padding: 10px 13px; border: 1px solid rgba(255,102,119,.35); border-left: 3px solid var(--red); border-radius: 9px; background: rgba(255,102,119,.1); }
.alert-item strong { color: #ff9ba6; font-size: 12px; }.alert-item span { color: #e8bcc1; font-size: 12px; }.alert-item time { margin-left: auto; color: var(--muted); font-size: 10px; }.alert-ack { margin-left: 8px; border: 1px solid rgba(255,255,255,.25); border-radius: 5px; padding: 3px 6px; color: #fff; background: transparent; font-size: 9px; font-weight: 800; }
.channel-grid { display: grid; gap: 14px; transition: grid-template-columns .2s ease; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-8 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.channel-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: rgba(11, 25, 41, .92); box-shadow: 0 14px 40px rgba(0,0,0,.16); }
.video-wrap { position: relative; aspect-ratio: 16 / 9; background: #02060b; }
.channel-video { display: block; width: 100%; height: 100%; object-fit: contain; }
.video-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.52), transparent 35%, rgba(0,0,0,.64)); }
.channel-audio-meter { position: absolute; right: 11px; bottom: 10px; left: 11px; display: flex; align-items: center; gap: 8px; padding: 7px 9px; border: 1px solid rgba(255,255,255,.14); border-radius: 8px; background: rgba(2,8,15,.72); backdrop-filter: blur(8px); color: #b9c9dd; font-size: 10px; }
.channel-dashboard .channel-audio-meter { position: static; margin-top: 10px; padding: 6px 0 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; backdrop-filter: none; }
.channel-audio-meter > span { white-space: nowrap; }.channel-audio-meter > span i { color: var(--green); margin-right: 3px; }.channel-audio-meter > b { min-width: 30px; color: var(--green); text-align: right; font-size: 10px; }
.audio-bars { display: flex; align-items: end; gap: 2px; height: 17px; flex: 1; }.audio-bars i { flex: 1; height: 4px; max-width: 10px; border-radius: 2px; background: #29405a; transition: height 80ms linear, background 80ms linear; }.audio-bars i.active { background: linear-gradient(180deg, #89f6aa, #25bd72); }.audio-bars i:nth-child(n+10).active { background: linear-gradient(180deg, #ffe38a, #f1a636); }
.channel-top, .channel-bottom { position: absolute; left: 11px; right: 11px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.channel-top { top: 10px; }
.channel-bottom { bottom: 10px; }
.channel-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 800; }
.status-badge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 999px; color: #fff; background: rgba(0,0,0,.58); font-size: 10px; font-weight: 800; white-space: nowrap; }
.status-badge i { font-size: 7px; }
.status-running i { color: var(--green); }.status-offline i { color: var(--red); }.status-audio i { color: var(--yellow); }.status-black i { color: #a8b2c2; }.status-buffering i { color: var(--blue); }
.channel-info { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; padding: 11px; border-top: 1px solid var(--line); }
.channel-dashboard { padding: 12px; border-top: 1px solid var(--line); background: linear-gradient(180deg, rgba(16,34,55,.72), rgba(8,19,32,.92)); }.dashboard-heading { display: flex; justify-content: space-between; color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }.dashboard-heading i { color: var(--cyan); margin-right: 4px; }.dashboard-heading b { color: var(--green); font-size: 9px; }.dashboard-layout { display: grid; grid-template-columns: 1fr 1.35fr; gap: 12px; align-items: center; margin-top: 10px; }.gauge-row { display: flex; justify-content: space-around; gap: 7px; }.mini-gauge { display: grid; justify-items: center; gap: 4px; }.mini-gauge small { color: var(--muted); font-size: 9px; }.gauge-ring { --gauge: 0%; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: conic-gradient(var(--green) var(--gauge), #20364d 0); position: relative; }.gauge-ring::after { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: var(--panel); }.gauge-ring span { position: relative; z-index: 1; color: var(--text); font-size: 9px; font-weight: 800; }.trend-panel { min-width: 0; }.trend-panel > div:first-child { display: flex; justify-content: space-between; color: var(--muted); font-size: 10px; }.trend-panel > div:first-child b { color: var(--cyan); }.trend-bars { display: flex; align-items: end; gap: 2px; height: 48px; margin-top: 7px; padding-bottom: 2px; border-bottom: 1px solid var(--line); }.trend-bars i { flex: 1; min-width: 2px; border-radius: 2px 2px 0 0; background: linear-gradient(180deg, var(--cyan), #356ef3); }
.metric { min-width: 0; }.metric-label { display: block; color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .05em; }.metric-value { display: block; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 800; }
.empty-state { padding: 80px 20px; text-align: center; color: var(--muted); }.empty-state i { color: var(--cyan); font-size: 42px; }.empty-state h3 { margin: 14px 0 6px; color: var(--text); }
.primary-button, .secondary-button { border-radius: 8px; padding: 10px 15px; border: 1px solid transparent; font-weight: 800; font-size: 12px; }.primary-button { color: #031521; background: var(--cyan); }.secondary-button { color: var(--text); background: var(--panel-2); border-color: var(--line); }
dialog { width: min(430px, calc(100% - 24px)); border: 1px solid var(--line); border-radius: 15px; padding: 0; color: var(--text); background: var(--panel); box-shadow: 0 30px 100px #000; }.channel-dialog::backdrop, .settings-dialog::backdrop { background: rgba(0, 0, 0, .7); backdrop-filter: blur(4px); }
dialog form { padding: 20px; }.dialog-header { justify-content: space-between; margin-bottom: 20px; }.dialog-header h3 { margin-top: 4px; font-size: 20px; }.close-button { border: 0; color: var(--muted); background: transparent; }.channel-dialog label { display: block; margin-top: 13px; color: var(--muted); font-size: 12px; font-weight: 700; }.channel-dialog input { width: 100%; margin-top: 6px; padding: 11px; border: 1px solid var(--line); border-radius: 8px; color: var(--text); background: var(--bg); }.dialog-note { margin-top: 14px; color: var(--muted); font-size: 11px; line-height: 1.5; }.dialog-actions { justify-content: flex-end; gap: 8px; margin-top: 22px; }.switch-row { justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 13px; }.switch-row input { display: none; }.switch-ui { width: 38px; height: 21px; border-radius: 99px; background: #25384d; }.switch-row input:checked + .switch-ui { background: var(--cyan); }
@media (max-width: 1050px) { .grid-4, .grid-6, .grid-8 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 650px) { .monitor-shell { padding: 16px 11px 28px; }.topbar, .commandbar { align-items: flex-start; flex-direction: column; }.top-actions { width: 100%; justify-content: flex-end; }.icon-button span { display: none; }.commandbar { gap: 14px; }.view-controls { flex-wrap: wrap; }.grid-2, .grid-4, .grid-6, .grid-8 { grid-template-columns: 1fr; }.channel-info { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.channel-dialog .switch-row input { display: block; width: 18px; height: 18px; }