:root{color-scheme:dark;--bg:#091a2d;--panel:#10263e;--panel2:#0d2137;--border:#2b425a;--text:#dce7f2;--muted:#849bb2;--accent:#69c9e8}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button,input,select{font:inherit}button{cursor:pointer;border:1px solid var(--border);border-radius:5px;padding:8px 13px;background:#132d46;color:var(--text)}button:hover{background:#203e58;border-color:#6b95b4}button:disabled{opacity:.45;cursor:wait}button.primary{background:#78d5ec;border-color:#78d5ec;color:#062235;font-weight:700}header{height:76px;padding:0 32px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #20374d;background:#0a1d31}.brand{text-decoration:none;color:#cdeefa;display:flex;gap:9px;align-items:center;font-size:28px}.brand img{display:block;width:144px;height:40px;object-fit:contain}.brand span{font-size:10px;letter-spacing:2px;margin-left:14px;color:var(--muted);border-left:1px solid var(--border);padding-left:20px}nav{display:flex;align-items:center;gap:10px}nav #clock{color:var(--muted);font:12px monospace;margin-right:18px}nav button{border:0;background:transparent;padding:26px 14px;border-radius:0}nav .active{background:#122a42;color:#8bdbed}.heading{display:flex;align-items:center;justify-content:space-between;padding:38px 32px 30px}.eyebrow{font-size:10px;letter-spacing:2px;color:var(--accent);font-weight:700}h1{font-size:25px;margin:6px 0 5px;font-weight:600;letter-spacing:.2px}h1 span{font-size:11px;vertical-align:middle;margin-left:14px;padding:4px 10px;background:#1c354d;border-radius:20px;color:#aac1d5}.heading p{margin:0;color:var(--muted);font-size:12px}.toolbar{display:flex;align-items:center;gap:12px}.connection{color:#7cccba;font-size:11px;margin-right:12px}.node{display:grid;grid-template-columns:211.25px minmax(300px,1fr) minmax(300px,.95fr) 115px;gap:30px;align-items:center;padding:20px 32px;min-height:204.8px;background:var(--panel);border-top:1px solid #1c354c}.node:nth-child(even){background:var(--panel2)}.nodeName{font-size:16px;font-weight:600;overflow-wrap:anywhere}.number{font:11px monospace;color:var(--accent);margin-bottom:12px}.nodeID{font:10px monospace;color:#5e7993;margin-top:10px}.endpoint{display:grid;grid-template-columns:72px 58px minmax(0,1fr);align-items:center;gap:10px}.endpoint label{font-size:11px;color:#a8bacb;font-weight:600}.protocol{font:10px monospace;text-align:center;border:1px solid #4c6882;border-radius:4px;padding:5px 3px;color:#bcd6e8}.url{width:100%;text-overflow:ellipsis;border:1px solid #3c5871;border-radius:4px;background:#0b2034;color:#aec8dc;padding:6px 10px;font:11px monospace}.media{display:flex;gap:18px;align-items:flex-start;margin:19.2px 0 19.2px 82px;color:#819bb2;font-size:11px}.media span{flex:1;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.media b{color:#b7c9d8}.chartHead{display:flex;gap:18px;justify-content:space-between;align-items:center;font-size:10px;color:#9db3c6}.chartHead strong{color:#d2e1ed}.chartHead select{background:#0c2135;color:#9ab4ca;border:1px solid #48637b;border-radius:4px;padding:4px;font-size:10px}.chart{width:100%;height:100.8px;display:block;margin-top:9.6px}.chart text{font:9px monospace;fill:#718ba4}.chart line{stroke:#304b63;stroke-width:1}.chart .area{fill:#76b4d5;fill-opacity:.23}.chart .curve{fill:none;stroke:#87c6e7;stroke-width:1.8}.chartFoot{display:flex;justify-content:space-between;font:9px monospace;color:#63819b}.nodeActions{display:flex;flex-direction:column;gap:10px;align-items:stretch}.state{padding:8px 4px;text-align:center;border:1px solid #2b796a;color:#83d9bb;background:#123f3b;border-radius:4px;font-size:12px;font-weight:700;letter-spacing:.6px}.state.running{background:#892f43;border-color:#c65064;color:#ffe2e8}.state.retrying,.state.stalled{background:#523c20;border-color:#8b6831;color:#f0c97d}.state.connecting{color:#8edcf7;border-color:#40748f;background:#183e54}.nodeActions button{font-size:11px;padding:5px}.links{display:flex;gap:8px;justify-content:center}.links button{border:0;background:transparent;padding:0;color:#8fa9c1}.links button:hover{color:#fff}.empty{margin:0 32px;padding:90px 20px;text-align:center;border:1px dashed #355069;border-radius:8px;background:#0d2238}.empty .icon{font-size:36px;color:#76c5df}.empty h2{font-size:20px;font-weight:500}.empty p{color:var(--muted)}footer{display:flex;justify-content:space-between;color:#547089;padding:25px 32px;font-size:10px;letter-spacing:1px}.login{max-width:430px;margin:100px auto;padding:38px;border:1px solid var(--border);border-radius:10px;background:var(--panel)}.login p{color:var(--muted)}.login button{width:100%;margin-top:10px}.login small{font-size:11px;color:#6c8da6}label{display:block;font-size:12px;color:#b5c7d7}label input{display:block;width:100%;margin:8px 0 20px;background:#0b2034;border:1px solid #3d5971;border-radius:5px;padding:11px;color:var(--text);outline:none}input:focus{border-color:#7bcce7;box-shadow:0 0 0 2px #69c9e81a}label small{font-size:9px;margin-left:5px;color:#62869f}dialog{background:transparent;border:1px solid #34516c;color:var(--text);border-radius:10px;width:min(620px,94vw);padding:26px;box-shadow:0 24px 100px #0008}dialog::backdrop{background:#030d19b8;backdrop-filter:blur(4px)}.dialogTitle{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.dialogTitle h2{font-size:19px;margin:0}.dialogTitle button{border:0;background:transparent;font-size:24px;padding:0 5px}.hint{font-size:11px;color:#829fb7;background:#0b2035;padding:12px;border-radius:5px;line-height:1.8}.dialogActions{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}.error{color:#ff9ba6!important;font-size:12px}.error:empty{display:none}pre{white-space:pre-wrap;overflow-wrap:anywhere;max-height:55vh;overflow:auto;font:11px/1.8 monospace}#toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);background:#213c53;border:1px solid #6086a3;padding:12px 24px;border-radius:7px;box-shadow:0 6px 30px #0006;z-index:10}#summary{margin:0 32px 25px;display:flex;gap:20px}#summary[hidden]{display:none}#summary div{background:#142f47;border:1px solid var(--border);padding:16px 24px;border-radius:6px;flex:1;color:var(--muted)}#summary strong{display:block;font:26px monospace;color:#a7e1f0;margin-top:6px}[hidden]{display:none!important}@media(min-width:1650px){.node{min-height:224px;gap:45px}.chart{height:116px}}@media(max-width:1100px){.node{grid-template-columns:152.1px 1fr 100px;column-gap:20px;row-gap:16px}.chartWrap{grid-column:2;grid-row:2}.nodeActions{grid-column:3;grid-row:1 / 3}.heading{gap:20px}.connection{display:none}nav #clock{display:none}}@media(max-width:650px){header{padding:0 16px}.brand span{display:none}nav button{padding:26px 8px;font-size:11px}.heading{padding:25px 16px;display:block}.toolbar{margin-top:20px}.node{padding:17.6px 16px;grid-template-columns:1fr 90px;gap:16px}.identity{grid-column:1}.nodeID{display:none}.number{display:inline;margin-right:10px}.nodeName{display:inline}.details{grid-column:1 / 3}.chartWrap{grid-column:1 / 3;grid-row:auto}.nodeActions{grid-column:2;grid-row:1}.media{margin-left:0}.endpoint{grid-template-columns:45px 45px 1fr;gap:7px}.endpoint label{font-size:9px}h1{font-size:22px}.login{margin:50px 16px}footer{padding:20px 16px;display:block}footer span{display:block}#summary{margin:0 16px 20px;gap:8px}#summary div{padding:10px;font-size:11px}}

/* Keep the header clock visible at all viewport widths. */
nav #clock{display:block;margin-right:0;white-space:nowrap}
@media(max-width:650px){.brand img{width:112px;height:auto}.brand span{display:block;margin-left:0;padding-left:10px}nav #clock{font-size:10px}.toolbar{flex-wrap:wrap}}

/* Viewport shell: only the middle content scrolls; bars reserve their own height. */
html{height:100%;overflow:hidden}body{height:100vh;height:100dvh;min-height:0;overflow:hidden;display:flex;flex-direction:column}header{flex-shrink:0;z-index:40}#pageContent{flex:1;min-height:0;min-width:0;overflow:auto;overscroll-behavior-y:contain}.site-footer{position:relative;z-index:40}.site-footer{display:block;margin-top:auto;text-align:center;padding:22px 16px;color:var(--muted);font-size:11px;line-height:1.9;letter-spacing:.2px}.site-footer span{display:inline}.site-footer time{margin-right:10px}

.login{width:calc(100% - 32px)}

.site-footer{background:#0a1d31;border-top:1px solid #20374d;flex-shrink:0}

.login-title{margin:0 0 26px;font-size:20px;font-weight:600;letter-spacing:1px;color:var(--text)}

.brand span{font-size:28px;font-weight:700;line-height:1;letter-spacing:.5px;color:#f5f6f6}
@media(max-width:650px){.brand span{font-size:22px}}

.login-title{text-align:center}

.header-nav{gap:24px;justify-content:flex-end;flex-wrap:wrap}.header-nav .toolbar{margin:0;gap:12px;flex-wrap:wrap}.header-nav .connection{display:inline;white-space:nowrap;margin-right:0}.header-nav .toolbar button{border:1px solid var(--border);border-radius:5px;padding:8px 13px;background:#132d46;font-size:13px;white-space:nowrap}.header-nav .toolbar button.primary{background:#78d5ec;border-color:#78d5ec;color:#062235}.header-nav .toolbar button:hover{filter:brightness(1.12)}
@media(max-width:1100px){header{height:auto;min-height:76px;gap:16px;padding-top:14px;padding-bottom:14px;flex-wrap:wrap}.header-nav{gap:12px;flex:1}.header-nav .toolbar{justify-content:flex-end}}
@media(max-width:650px){.header-nav{flex-basis:100%;justify-content:flex-end}.header-nav .toolbar{gap:8px}.header-nav .toolbar button{font-size:11px;padding:7px 9px}}

.nodeActions .state{font-size:16px;font-weight:700;padding:14px 4px;min-height:52px;border-radius:5px}.nodeActions .state.ready{background:#16733f;border-color:#28985d;color:#fff}.nodeActions .state.loading{background:#e1b12b;border-color:#f4cb51;color:#302507}.nodeActions .state.running{background:#d72f3f;border-color:#ef5362;color:#fff}.nodeActions .state.disabled{background:#485362;border-color:#626c79;color:#c4cbd3;opacity:1;cursor:default}.nodeActions .state:not(:disabled):hover{filter:brightness(1.12)}

header{position:relative}header #toast{position:absolute;top:50%;bottom:auto;left:50%;transform:translate(-50%,-50%);max-width:calc(100% - 32px);padding:9px 20px;text-align:center;pointer-events:none;font-size:13px;line-height:1.5}

.header-nav .connection.disconnected{color:#f3bf73}

#editor{width:70vw;max-width:70vw}
#settingsDialog hr{border:0;border-top:1px solid var(--border);margin:26px 0}

.settings-dropdown{position:relative}.settings-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:150px;padding:6px;background:#10263e;border:1px solid #34516c;border-radius:6px;box-shadow:0 12px 30px #0006;z-index:30}.header-nav .settings-menu button{display:block;width:100%;text-align:left;padding:10px 14px;border:0;border-radius:4px;background:transparent;white-space:nowrap}.header-nav .settings-menu button:hover,.header-nav .settings-menu button:focus-visible{background:#203e58}

#hostname{font-size:12px;color:var(--text);max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

#serverInfoDialog{width:min(850px,94vw)}.server-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.metric-card{padding:18px;background:#0b2035;border:1px solid var(--border);border-radius:7px;min-width:0}.metric-card h3{margin:0 0 8px;font-size:13px;color:var(--muted)}.metric-card strong{font-size:26px;color:var(--text)}.metric-card p{font-size:12px;color:var(--muted);overflow-wrap:anywhere}.metric-card progress{width:100%;height:8px;accent-color:var(--accent)}@media(max-width:600px){.server-metrics{grid-template-columns:1fr}}

#serverInfoStatus:empty{display:none}

.metric-card.metric-wide{grid-column:1 / -1}.metric-card progress{display:block;margin-top:18px}

/* Center the login card in the space between header and footer. */
#pageContent:has(#login:not([hidden])){display:grid;align-items:safe center;justify-items:center;padding:24px 0}
#pageContent #login{margin:0;width:calc(100% - 32px)}

/* Match HYRAY.CODEC's horizontal cards and workspace gutters. */
#dashboard{min-width:0;padding:16px 24px}
#nodes{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-content:start}
#nodes>.node{min-width:0;background:#10273d;border:1px solid #35516a;border-radius:8px;padding:20px 22px}
.node>div{min-width:0}
.chartHead{flex-wrap:wrap;gap:8px 12px}
.chartHead>span{white-space:nowrap}

/* CODEC header navigation: full-height, borderless text actions. */
header{height:auto;min-height:76px;gap:20px}
.brand{flex-shrink:0}
.header-nav{min-width:0;gap:18px}
.header-nav .toolbar{align-items:stretch;gap:0}
.header-nav .toolbar>.connection{align-self:center;margin-right:18px}
.header-nav .toolbar>button,.header-nav .settings-dropdown>button{display:flex;align-items:center;justify-content:center;min-height:76px;margin:0;padding:25px 14px;border:0;border-radius:0;background:transparent;color:var(--text);font-size:14px;font-weight:500;white-space:nowrap}
.header-nav .toolbar>button:hover,.header-nav .settings-dropdown>button:hover,.header-nav .settings-dropdown>button[aria-expanded=true]{background:#142d47;color:#a5e2f1;filter:none}
.header-nav .toolbar button:focus-visible{outline:2px solid #dce7f2;outline-offset:-4px}
.settings-menu{top:calc(100% - 4px)}
@media(max-width:1450px){
 header{flex-wrap:wrap;padding-top:10px;padding-bottom:10px}
 .header-nav{flex:1;justify-content:flex-end;gap:10px 18px}
 .header-nav .toolbar>button,.header-nav .settings-dropdown>button{min-height:48px;padding:14px 12px}
}
@media(max-width:850px){
 .header-nav{flex-basis:100%}
}
@media(max-width:650px){
 #nodes>.node{padding:18px 16px;grid-template-columns:minmax(0,1fr) 90px}
 .header-nav .toolbar{gap:0}
 #editor{width:calc(100% - 32px);max-width:calc(100% - 32px)}
}
@media(max-width:550px){
 #dashboard{padding:16px 14px}
 .header-nav{justify-content:space-between}
 .header-nav .toolbar{width:100%;justify-content:space-between}
 .header-nav .toolbar>.connection{margin-right:6px}
 .header-nav .toolbar>button,.header-nav .settings-dropdown>button{min-height:44px;padding:12px 8px;font-size:13px}
}

/* HYRAY.HUB header actions and glass overlays. */
:root{--glass-surface:linear-gradient(135deg,#dceeff0d,#152f4826 45%,#b7d8f008);--glass-edge:#e0f2ff52;--glass-menu:linear-gradient(135deg,#ffffff08,#ffffff00)}
.header-nav .toolbar :is(#settings,#logout),.header-nav .toolbar :is(#settings,#logout):is(:hover,:active,:focus,[aria-expanded=true]){background:transparent;color:#dce7f2;box-shadow:none;filter:none;border:0}
.header-nav .toolbar :is(#settings,#logout):focus:not(:focus-visible){outline:none}
@media(max-width:550px){.header-nav .toolbar{justify-content:flex-end}}
header{z-index:10}
body dialog{background:var(--glass-surface);border-color:var(--glass-edge);border-radius:22px;box-shadow:0 24px 80px #0007,inset 0 1px 0 #ffffff66,inset 0 -1px 0 #ffffff14;-webkit-backdrop-filter:blur(8px) saturate(125%);backdrop-filter:blur(8px) saturate(125%)}
body dialog::backdrop{background:#03101d14;-webkit-backdrop-filter:none;backdrop-filter:none}
dialog .dialogTitle{border-bottom:1px solid #d9edff20;padding-bottom:16px}
dialog .dialogActions{border-top:1px solid #d9edff26;padding-top:16px}
dialog[open]{animation:nat-glass-enter 420ms cubic-bezier(.22,.75,.25,1)}
dialog input{background-color:#06182a55;border-color:#c5e0f34d;border-radius:8px;box-shadow:inset 0 1px 0 #ffffff1f}
dialog .hint,dialog pre,dialog .metric-card{background:#06182a33;border-color:#c5e0f333;border-radius:10px;box-shadow:inset 0 1px 0 #ffffff12}
dialog button:not(.primary){background-color:#a2d6f00c;border-color:#c5e0f34d;box-shadow:inset 0 1px 0 #ffffff12}
dialog button:not(.primary):hover{background-color:#a2d6f023}
dialog .dialogTitle button{background:transparent;box-shadow:none}
dialog button.primary{background:linear-gradient(135deg,#9ce5eddd,#78d5ecd9);border-color:#b8f2f8aa;box-shadow:inset 0 1px 0 #ffffff60}
.settings-menu{background:var(--glass-menu);border:1px solid var(--glass-edge);border-radius:12px;box-shadow:0 8px 24px #0002,inset 0 1px 0 #ffffff45;-webkit-backdrop-filter:blur(8px) saturate(125%);backdrop-filter:blur(8px) saturate(125%)}
.header-nav .settings-menu button{display:block;width:100%;margin:0;padding:8px 12px;border:0;border-radius:6px;background:transparent;box-shadow:none;color:var(--text);font:13px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;text-align:left;white-space:nowrap}
.header-nav .settings-menu button:is(:hover,:focus-visible){background:#a2d6f03d;outline:0;filter:none}
@keyframes nat-glass-enter{0%{opacity:0;transform:translateY(18px) scale(.95)}75%{opacity:1;transform:translateY(-2px) scale(1.006)}100%{transform:none}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){:root{--glass-surface:#152d4399;--glass-menu:#152d4399}}
/* Keep the requested translucency while reducing filter strength. */
@media(prefers-reduced-transparency:reduce){dialog,#editor,#serverInfoDialog,#hostnameDialog,#settingsDialog,#rebootDialog,.settings-menu{-webkit-backdrop-filter:blur(2px) saturate(110%);backdrop-filter:blur(2px) saturate(110%)}}
@media(prefers-reduced-motion:reduce){dialog[open]{animation:none}}
/* Retain native select values while rendering HUB's glass option panel. */
.chartHead select{background-color:#06182a55;border-color:#c5e0f34d;border-radius:8px;box-shadow:inset 0 1px 0 #ffffff1f}
.glass-select-menu{position:fixed;inset:auto;margin:0;width:max-content;overflow:auto;z-index:1000;overscroll-behavior:contain;padding:6px;color:var(--text);background:var(--glass-menu);border:1px solid var(--glass-edge);border-radius:12px;box-shadow:0 8px 24px #0002,inset 0 1px 0 #ffffff45;-webkit-backdrop-filter:blur(8px) saturate(125%);backdrop-filter:blur(8px) saturate(125%);animation:nat-menu-enter 150ms ease-out}
.glass-select-menu button{display:block;width:100%;margin:0;padding:8px 12px;border:0;border-radius:6px;background:transparent;box-shadow:none;color:var(--text);font:13px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;text-align:left;white-space:nowrap}
.glass-select-menu button[aria-selected=true]{background:#6fbce530;color:#e7f7ff}
.glass-select-menu button[aria-selected=false]:hover:not(:disabled){color:#e7f7ff}
.glass-select-menu button:focus-visible{outline:1px solid #a5e2f1;outline-offset:-2px}
.glass-select-menu button:disabled{color:#91a3b17d;cursor:default}
@keyframes nat-menu-enter{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.glass-select-menu{animation:none}}
@media(prefers-reduced-transparency:reduce){.glass-select-menu{-webkit-backdrop-filter:blur(2px) saturate(110%);backdrop-filter:blur(2px) saturate(110%)}}

/* Keep axis typography outside the horizontally stretched plot. */
.chartLayout{display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:8px;margin-top:9.6px;padding-right:8px}
.chartAxis{position:relative;min-width:0;color:#718ba4;font:10px/1.2 monospace;font-variant-numeric:tabular-nums}
.chartAxis span{position:absolute;right:0;transform:translateY(-50%);white-space:nowrap}
.chartLayout .chart{margin-top:0;min-width:0}
.chartLayout .chart line,.chartLayout .chart .curve{vector-effect:non-scaling-stroke}
.chartFoot{padding-left:60px;padding-right:8px}

/* Share the same left edge for ON AIR and bandwidth tick labels. */
.chartHead{padding-left:22px;padding-right:8px}
.chartAxis span{left:22px;right:auto}

/* Hover details use server time and remain stable across live chart updates. */
.chartTooltip{position:fixed;z-index:30;pointer-events:none;max-width:calc(100vw - 16px);padding:7px 10px;border:1px solid #6086a3;border-radius:6px;background:#10273df5;color:#dce7f2;box-shadow:0 4px 16px #0005;font:11px/1.5 monospace;font-variant-numeric:tabular-nums}
.chartCursor{position:fixed;z-index:20;pointer-events:none;border-left:1px dashed #bceaff;opacity:.8}
.chartLayout .chart{cursor:crosshair}

/* Distinguish save from save-and-start while retaining translucent glass. */
#editor #save{background:linear-gradient(135deg,#428ee866,#2872c752);border-color:#85bcf580;color:#e5f2ff;box-shadow:inset 0 1px 0 #d7eaff33}
#editor #saveStart{background:linear-gradient(135deg,#e6586866,#bd304752);border-color:#f29aa680;color:#fff0f2;box-shadow:inset 0 1px 0 #ffe0e433}
#editor #save:hover:not(:disabled){background:linear-gradient(135deg,#428ee88c,#2872c775);border-color:#a3d0ffb3}
#editor #saveStart:hover:not(:disabled){background:linear-gradient(135deg,#e658688c,#bd304775);border-color:#ffb1bdb3}
#editor :is(#save,#saveStart):focus-visible{outline:2px solid #dce7f2;outline-offset:2px}