:root{--bg:#07142b;--sur:#0d2346;--sur2:#0b1d3b;--bor:#17345f;--bor2:#1f3f6e;--acc:#17a8ff;--acc2:#0d8fe0;--acc-soft:rgba(23,168,255,.14);--ok:#22c55e;--wn:#f59e0b;--al:#ef4444;--tx:#eef5ff;--mu:#8aa4c8;--mu2:#5f7ba3;--r:10px;--r-lg:14px;--ring:0 0 0 3px rgba(23,168,255,.28);--shadow:0 6px 18px rgba(0,0,0,.28)}
@font-face{font-family:"Inter";src:url("/ui-font.woff2") format("woff2");font-weight:400 800;font-style:normal;font-display:swap}
html{-webkit-text-size-adjust:100%;--rail:236px;--top:52px}
html.ss-rail-collapsed{--rail:64px}
body{font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-variant-numeric:tabular-nums;font-feature-settings:"cv11","ss01";padding-left:var(--rail)}
h1,h2,h3,.ss-brand-n{letter-spacing:-.015em}
::selection{background:rgba(23,168,255,.35)}
*{scrollbar-width:thin;scrollbar-color:#1f3f6e transparent}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:#1f3f6e;border-radius:8px;border:2px solid transparent;background-clip:padding-box}::-webkit-scrollbar-thumb:hover{background:#2b528a;background-clip:padding-box}::-webkit-scrollbar-track{background:transparent}
:focus-visible{outline:none;box-shadow:var(--ring)}
svg.ic{display:inline-block;vertical-align:-3px;flex-shrink:0}
/* ── App shell: left rail + slim top bar ──────────────────────────────── */
.ss-rail{position:fixed;left:0;top:0;bottom:0;width:var(--rail);z-index:400;display:flex;flex-direction:column;background:linear-gradient(180deg,#0b1f42 0%,#081736 100%);border-right:1px solid rgba(70,120,190,.22);box-shadow:8px 0 30px -18px rgba(0,0,0,.6);transition:width .18s ease;overflow:hidden}
.ss-rail-brand{display:flex;align-items:center;gap:10px;padding:12px 14px;height:var(--top);border-bottom:1px solid rgba(70,120,190,.18);text-decoration:none;color:var(--tx);min-width:0}
.ss-rail-brand img{height:30px;width:30px;flex-shrink:0;filter:drop-shadow(0 3px 10px rgba(23,168,255,.35))}
.ss-rail-brand .ss-brand-n{font-weight:800;font-size:17px;white-space:nowrap}
.ss-rail-brand .ss-ver{margin-left:auto}
.ss-rail-scroll{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 8px 10px}
.ss-rs{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mu2);padding:12px 10px 4px;white-space:nowrap}
.ss-ri{display:flex;align-items:center;gap:10px;padding:8px 10px;margin:1px 0;border-radius:9px;color:var(--mu);text-decoration:none;font-size:13px;font-weight:600;white-space:nowrap;border:1px solid transparent;transition:background .12s,color .12s}
.ss-ri svg.ic{flex-shrink:0;opacity:.85;width:17px;height:17px}
.ss-ri:hover{background:rgba(255,255,255,.05);color:var(--tx)}
.ss-ri.on{background:var(--acc-soft);color:#bfe6ff;border-color:rgba(23,168,255,.28)}
.ss-ri.on svg.ic{opacity:1;color:#8fd3ff}
.ss-rail-foot{border-top:1px solid rgba(70,120,190,.18);padding:8px}
.ss-rail-toggle{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border-radius:9px;background:transparent;border:1px solid transparent;color:var(--mu2);font:inherit;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap}
.ss-rail-toggle:hover{background:rgba(255,255,255,.05);color:var(--tx)}
.ss-rail-toggle svg.ic{transition:transform .18s}
html.ss-rail-collapsed .ss-rail-toggle svg.ic{transform:rotate(180deg)}
html.ss-rail-collapsed .ss-ri span,html.ss-rail-collapsed .ss-rs,html.ss-rail-collapsed .ss-rail-toggle span,html.ss-rail-collapsed .ss-rail-brand .ss-brand-n,html.ss-rail-collapsed .ss-rail-brand .ss-ver{display:none}
html.ss-rail-collapsed .ss-ri{justify-content:center;padding:9px 0}
html.ss-rail-collapsed .ss-rail-brand{justify-content:center;padding:12px 0}
html.ss-rail-collapsed .ss-rail-toggle{justify-content:center}
header.ss-top{position:sticky;top:0;z-index:300;height:var(--top);display:flex;align-items:center;gap:10px;padding:0 18px;background:rgba(9,26,54,.86);backdrop-filter:blur(12px);border-bottom:1px solid rgba(70,120,190,.22)}
.ss-top-title{font-size:14px;font-weight:700;color:var(--tx);display:inline-flex;align-items:center;gap:8px;min-width:0;white-space:nowrap}
.ss-top-title svg.ic{color:var(--acc)}
.ss-top-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.ss-user{font-size:12px;color:var(--mu);white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.ss-role{background:rgba(255,255,255,.06);border:1px solid var(--bor);border-radius:999px;padding:1px 7px;font-size:10px;color:#b7d8ff;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.ss-ver{padding:2px 8px;border-radius:999px;background:var(--acc-soft);border:1px solid rgba(23,168,255,.30);font-size:11px;font-weight:700;color:#8fd3ff;white-space:nowrap;flex-shrink:0;font-variant-numeric:tabular-nums}
.ss-menu-btn{display:none}
.ss-tabbar{display:none}
.nav-active{background:var(--acc-soft)!important;color:#9fdbff!important}
#hub-mini-player{left:var(--rail)!important}
.hh-bar{top:var(--top)!important}
.sb{top:var(--top)!important;height:calc(100vh - var(--top))!important}
.ss-pdrop{display:none;position:absolute;top:calc(100% + 6px);left:0;min-width:200px;background:var(--sur);border:1px solid var(--bor2);border-radius:12px;box-shadow:0 14px 40px rgba(0,0,0,.55);padding:5px;z-index:1000;flex-direction:column;gap:2px}
.ss-pdrop .btn{display:flex;align-items:center;gap:8px;text-align:left;width:100%;box-sizing:border-box;white-space:nowrap;padding:7px 10px;border-radius:8px}
/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:6px 13px;border-radius:8px;font-size:13px;cursor:pointer;border:1px solid transparent;text-decoration:none;font-weight:600;line-height:1.25;transition:background .15s,box-shadow .15s,border-color .15s,color .15s;white-space:nowrap}
.btn:hover{filter:none}
.btn.bp{background:linear-gradient(180deg,#22b0ff,#0f8fe0);color:#fff;box-shadow:0 2px 10px rgba(23,168,255,.28),inset 0 1px 0 rgba(255,255,255,.15)}.btn.bp:hover{background:linear-gradient(180deg,#38b9ff,#1a9be8);box-shadow:0 4px 14px rgba(23,168,255,.42),inset 0 1px 0 rgba(255,255,255,.18)}
.btn.bd{background:rgba(239,68,68,.16);color:#fca5a5;border-color:rgba(239,68,68,.35)}.btn.bd:hover{background:rgba(239,68,68,.28);color:#fecaca}
.btn.bw{background:rgba(245,158,11,.14);color:#fcd34d;border-color:rgba(245,158,11,.35)}.btn.bw:hover{background:rgba(245,158,11,.24)}
.btn.bg{background:rgba(255,255,255,.06);color:var(--tx);border-color:var(--bor)}.btn.bg:hover{background:rgba(255,255,255,.10);border-color:var(--bor2)}
.btn.bs{padding:4px 10px;font-size:12px;border-radius:7px}
.btn:disabled,.btn[disabled]{opacity:.55;cursor:not-allowed;box-shadow:none}
/* ── Cards — depth ────────────────────────────────────────────────────── */
.card{background:linear-gradient(180deg,#112a52 0%,#0c1f42 100%);border:1px solid rgba(70,120,190,.30);border-radius:var(--r-lg);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 12px 28px -10px rgba(0,0,0,.65),0 2px 6px rgba(0,0,0,.28);overflow:hidden;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.card:hover{transform:translateY(-2px);border-color:rgba(70,120,190,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 20px 40px -12px rgba(0,0,0,.7),0 3px 8px rgba(0,0,0,.3)}
.ch{background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,0)),linear-gradient(180deg,#163b6e,#122f5b);border-bottom:1px solid rgba(70,120,190,.28);letter-spacing:.06em;min-height:42px}
.ch svg.ic{opacity:.9}
.card-grip{display:inline-flex;color:var(--mu2);cursor:grab;touch-action:none;margin-right:-2px;opacity:.7;transition:opacity .15s,color .15s}
.card:hover .card-grip{opacity:1;color:var(--mu)}
.ch{cursor:grab}.ch button,.ch a,.ch .ss-pg{cursor:pointer}
body.ss-dragging{user-select:none;-webkit-user-select:none;cursor:grabbing}
body.ss-dragging .ch,body.ss-dragging .card-grip{cursor:grabbing}
.ss-placeholder{opacity:.35;transform:none!important;box-shadow:none!important;border:2px dashed rgba(23,168,255,.55)!important;background:rgba(23,168,255,.06)!important}
.ss-placeholder>*{visibility:hidden}
.ss-ghost{box-shadow:0 30px 70px -10px rgba(0,0,0,.75),0 0 0 1px rgba(23,168,255,.45)!important;transform-origin:center;transition:none;opacity:.98}
body.ss-dragging .card:hover{transform:none}
/* dashboard: chips, summary, density */
.card-name{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}
.ss-chip{display:inline-flex;align-items:center;padding:2px 8px;border-radius:999px;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;flex-shrink:0;border:1px solid transparent;font-variant-numeric:tabular-nums}
.ss-chip-dab{background:rgba(23,168,255,.14);color:#8fd3ff;border-color:rgba(23,168,255,.35)}
.ss-chip-fm{background:rgba(245,158,11,.14);color:#fcd34d;border-color:rgba(245,158,11,.35)}
.ss-chip-http{background:rgba(34,197,94,.13);color:#86efac;border-color:rgba(34,197,94,.35)}
.ss-chip-rtp{background:rgba(167,139,250,.14);color:#c4b5fd;border-color:rgba(167,139,250,.35)}
.ss-chip-alsa,.ss-chip-src{background:rgba(138,164,200,.12);color:#b7d8ff;border-color:rgba(138,164,200,.3)}
.ss-summary{display:grid;grid-template-columns:repeat(6,minmax(96px,140px)) minmax(220px,1fr);gap:10px;padding:14px 16px 0;max-width:1440px;margin:0 auto}
.ss-tile{background:linear-gradient(180deg,#112a52,#0c1f42);border:1px solid rgba(70,120,190,.28);border-radius:12px;padding:10px 12px;box-shadow:0 8px 20px -12px rgba(0,0,0,.6)}
.ss-tile-n{font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1.1;color:var(--tx)}
.ss-tile-sub{font-size:13px;color:var(--mu);font-weight:600}
.ss-tile-l{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mu);margin-top:4px}
.ss-tile.ok .ss-tile-n{color:#4ade80}.ss-tile.wn .ss-tile-n{color:#fbbf24}.ss-tile.al .ss-tile-n{color:#f87171}
.ss-attn-wrap{background:linear-gradient(180deg,#112a52,#0c1f42);border:1px solid rgba(70,120,190,.28);border-radius:12px;padding:10px 12px;min-width:0}
.ss-attn-wrap .ss-tile-l{margin:0 0 6px}
#ss-attn{display:flex;flex-wrap:wrap;gap:6px}
.ss-attn-ok{font-size:12px;color:#4ade80;display:inline-flex;align-items:center;gap:6px}
.ss-attn-item{font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px;text-decoration:none;border:1px solid transparent}
.ss-attn-item.al{background:rgba(239,68,68,.14);color:#fca5a5;border-color:rgba(239,68,68,.4)}
.ss-attn-item.wn{background:rgba(245,158,11,.12);color:#fcd34d;border-color:rgba(245,158,11,.35)}
.card.ss-flash{box-shadow:0 0 0 3px rgba(23,168,255,.6),0 20px 40px -12px rgba(0,0,0,.7)!important}
.ss-density-btn.on{background:var(--acc-soft)!important;color:#9fdbff!important;border-color:rgba(23,168,255,.35)!important}
#card-grid.compact{gap:10px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
#card-grid.compact .ch{padding:6px 10px;min-height:34px}
#card-grid.compact .lbar-wrap{padding:5px 10px}
#card-grid.compact .np-strip,#card-grid.compact .listen-strip,#card-grid.compact .hist-wrap,#card-grid.compact .aib{display:none}
#card-grid.compact .card:hover{transform:none}
@media (max-width:1100px){.ss-summary{grid-template-columns:repeat(3,1fr)}.ss-attn-wrap{grid-column:1/-1}}
/* dashboard meters — segmented, with a peak-hold marker */
.lbar-track{position:relative;height:10px;border-radius:3px;background:linear-gradient(180deg,#081631,#0e2449);box-shadow:inset 0 1px 3px rgba(0,0,0,.55);overflow:visible}
.lbar-track::after{content:"";position:absolute;inset:0;border-radius:3px;background:repeating-linear-gradient(90deg,transparent 0 5px,rgba(7,20,43,.9) 5px 7px);pointer-events:none}
.lbar-fill{height:10px;border-radius:3px;box-shadow:0 0 12px rgba(34,197,94,.35);transition:width .25s ease-out}
.lbar-peak{position:absolute;top:-1px;bottom:-1px;width:3px;margin-left:-1px;border-radius:1px;background:#bfe6ff;box-shadow:0 0 6px rgba(191,230,255,.8);transition:left .12s linear;z-index:1;pointer-events:none}
.lbar-val{font-weight:700;letter-spacing:.01em}
.dot{box-shadow:0 0 0 2px rgba(0,0,0,.25)}
.dok{box-shadow:0 0 0 2px rgba(0,0,0,.25),0 0 10px rgba(34,197,94,.75)}
.dwn{box-shadow:0 0 0 2px rgba(0,0,0,.25),0 0 10px rgba(245,158,11,.75)}
.dal{box-shadow:0 0 0 2px rgba(0,0,0,.25),0 0 12px rgba(239,68,68,.85)}
.grid{gap:18px}
.card-more-btn,.card-expand-btn{background:transparent!important;border-color:transparent!important;color:var(--mu)!important;padding:3px 6px!important}
.card-more-btn:hover,.card-expand-btn:hover{background:rgba(255,255,255,.08)!important;color:var(--tx)!important}
/* ── Forms ────────────────────────────────────────────────────────────── */
/* !important on purpose: dozens of controls carry inline style="background:#173a69;border:…"
   from the 3.x templates; colour, border and radius are asserted here so every control
   looks the same, while inline widths/padding (which are layout) are left alone. */
input[type=text],input[type=number],input[type=url],input[type=password],input[type=email],input[type=search],input[type=datetime-local],input[type=date],input[type=time],select,textarea{background-color:var(--sur2)!important;border:1px solid var(--bor)!important;border-radius:8px!important;color:var(--tx)!important;font-family:inherit;transition:border-color .15s,box-shadow .15s}
input[type=text]:focus,input[type=number]:focus,input[type=url]:focus,input[type=password]:focus,input[type=email]:focus,input[type=search]:focus,input[type=datetime-local]:focus,input[type=date]:focus,input[type=time]:focus,select:focus,textarea:focus{outline:none;border-color:var(--acc)!important;box-shadow:var(--ring)}
input:disabled,select:disabled,textarea:disabled{opacity:.6}
input::placeholder,textarea::placeholder{color:var(--mu2)}
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 1000px var(--sur2) inset!important;-webkit-text-fill-color:var(--tx)!important;caret-color:var(--tx);transition:background-color 9999s ease-out}
select:not([multiple]):not([size]){appearance:none!important;-webkit-appearance:none!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238aa4c8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 9px center!important;padding-right:30px!important}
input[type=checkbox],input[type=radio]{accent-color:var(--acc);width:15px;height:15px;cursor:pointer}
input[type=range]{accent-color:var(--acc)}
/* ── Tables ───────────────────────────────────────────────────────────── */
table th{color:var(--mu);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
table tbody tr{transition:background .12s}
table tbody tr:hover>td{background:rgba(23,52,95,.35)}
/* ── Pills / badges ───────────────────────────────────────────────────── */
.badge{border-radius:999px;font-weight:700;letter-spacing:.03em}
.hh-bar{background:rgba(9,26,54,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--bor)}
.hh-title{display:inline-flex;align-items:center;gap:7px}
.hh-pill{display:inline-flex;align-items:center;gap:5px;border-radius:999px}
.hh-search{background:var(--sur2);border:1px solid var(--bor);border-radius:999px;padding-left:14px}
/* ── Flash messages ───────────────────────────────────────────────────── */
.fl li{background:rgba(23,168,255,.10);border:1px solid rgba(23,168,255,.28);border-left:3px solid var(--acc);border-radius:8px}
/* ── Settings sidebar ─────────────────────────────────────────────────── */
.sb .tb{display:flex;align-items:center;gap:10px;padding:9px 14px;margin:2px 8px;width:calc(100% - 16px);border-radius:8px;border:1px solid transparent;border-left:none;color:var(--mu);font-size:13px;font-weight:500}
.sb .tb svg.ic{opacity:.8}
.sb .tb:hover{background:rgba(255,255,255,.05);color:var(--tx)}
.sb .tb.on{background:var(--acc-soft);color:#bfe6ff;border-color:rgba(23,168,255,.30);font-weight:600}
.sb .tb.on svg.ic{opacity:1;color:#8fd3ff}
/* map page overlays are positioned from the window edge — keep them off the rail */
#sg-bar-map{left:calc(var(--rail) + 12px)!important;top:calc(var(--top) + 10px)!important;max-width:calc(100vw - var(--rail) - 24px)!important}
#sg-status{top:calc(var(--top) + 10px)!important}
/* ── density: compact scales the content area, tightens the rail ──────── */
html.ss-compact{--top:46px;--rail:212px}
html.ss-compact.ss-rail-collapsed{--rail:60px}
html.ss-compact main,html.ss-compact .hh-bar,html.ss-compact .ss-summary,html.ss-compact .wrap,html.ss-compact .ct{zoom:.86}
/* fixed-position overlays that live inside the scaled area must undo the scale */
html.ss-compact #maint-popover,html.ss-compact #abg-modal{zoom:1.1627907}
html.ss-compact .ss-ri{padding:6px 10px;font-size:12.5px}
html.ss-compact .ss-rs{padding:9px 10px 3px}
html.ss-compact .ss-rail-brand{height:var(--top);padding:8px 12px}
html.ss-compact .ss-rail-brand img{height:26px;width:26px}
html.ss-compact .ss-rail-brand .ss-brand-n{font-size:15px}
.ss-dens-btn.on{background:var(--acc-soft)!important;color:#9fdbff!important;border-color:rgba(23,168,255,.35)!important}
/* ── bare pages (login, setup) ────────────────────────────────────────── */
body.ss-bare{padding-left:0!important;padding-bottom:0!important}
/* ── modal (what's new) ───────────────────────────────────────────────── */
.ss-modal{position:fixed;inset:0;z-index:5000;background:rgba(3,10,24,.72);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:20px;animation:ssFade .2s ease}
.ss-modal[hidden]{display:none}
@keyframes ssFade{from{opacity:0}to{opacity:1}}
.ss-modal-card{width:100%;max-width:560px;max-height:calc(100vh - 40px);display:flex;flex-direction:column;background:linear-gradient(180deg,#112a52,#0b1d3d);border:1px solid rgba(70,120,190,.35);border-radius:16px;box-shadow:0 40px 90px -20px rgba(0,0,0,.8);animation:ssPop .22s ease}
.ss-modal-card>.ss-wn{overflow-y:auto;min-height:0}
@keyframes ssPop{from{transform:translateY(12px) scale(.98);opacity:0}to{transform:none;opacity:1}}
.ss-modal-head{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid rgba(70,120,190,.25);font-size:16px;font-weight:800}
.ss-modal-head svg.ic{color:var(--acc)}.ss-modal-head .btn{margin-left:auto}
.ss-wn{list-style:none;margin:0;padding:8px 18px}
.ss-wn li{display:flex;gap:14px;padding:12px 0;border-bottom:1px solid rgba(70,120,190,.15)}
.ss-wn li:last-child{border-bottom:none}
.ss-wn svg.ic{color:#8fd3ff;margin-top:2px;flex-shrink:0}
.ss-wn b{display:block;font-size:14px;margin-bottom:2px}.ss-wn span{font-size:12.5px;color:var(--mu);line-height:1.5}
.ss-modal-foot{display:flex;justify-content:flex-end;gap:8px;padding:14px 18px;border-top:1px solid rgba(70,120,190,.25)}
/* ── toasts ───────────────────────────────────────────────────────────── */
#ss-toasts{position:fixed;right:18px;bottom:18px;z-index:6000;display:flex;flex-direction:column;gap:8px;max-width:min(420px,calc(100vw - 36px))}
.ss-toast{display:flex;align-items:flex-start;gap:10px;padding:11px 14px;border-radius:12px;background:linear-gradient(180deg,#132f5c,#0d2249);border:1px solid rgba(70,120,190,.4);box-shadow:0 18px 40px -12px rgba(0,0,0,.7);font-size:13px;color:var(--tx);animation:ssToastIn .22s ease;border-left:3px solid var(--acc)}
.ss-toast.ok{border-left-color:var(--ok)}.ss-toast.err{border-left-color:var(--al)}.ss-toast.warn{border-left-color:var(--wn)}
.ss-toast svg.ic{flex-shrink:0;margin-top:1px}
.ss-toast.ok svg.ic{color:#4ade80}.ss-toast.err svg.ic{color:#f87171}.ss-toast.warn svg.ic{color:#fbbf24}
.ss-toast button{margin-left:auto;background:none;border:none;color:var(--mu);cursor:pointer;font-size:16px;line-height:1;padding:0 2px}
.ss-toast.out{animation:ssToastOut .2s ease forwards}
@keyframes ssToastIn{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}
@keyframes ssToastOut{to{transform:translateX(20px);opacity:0}}
.fl.ss-toasted{display:none}
@media (max-width:820px){#ss-toasts{bottom:76px}}
/* ── settings: search + sticky save bar ───────────────────────────────── */
.ss-set-search{padding:8px 10px 4px;position:relative}
.ss-set-search input{width:100%;padding:7px 10px;font-size:12.5px;border-radius:8px!important}
#ss-set-results{position:absolute;left:10px;right:10px;top:calc(100% - 2px);background:var(--sur);border:1px solid var(--bor2);border-radius:10px;box-shadow:0 14px 40px rgba(0,0,0,.55);z-index:900;max-height:320px;overflow-y:auto;padding:4px}
#ss-set-results[hidden]{display:none}
.ss-sr{display:block;width:100%;text-align:left;background:none;border:none;color:var(--tx);font:inherit;font-size:12.5px;padding:7px 9px;border-radius:7px;cursor:pointer}
.ss-sr:hover{background:rgba(255,255,255,.06)}
.ss-sr small{display:block;color:var(--mu2);font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;margin-top:1px}
.ss-sr-empty{padding:8px 9px;font-size:12px;color:var(--mu2)}
.card.ss-flash{box-shadow:0 0 0 3px rgba(23,168,255,.6),0 20px 40px -12px rgba(0,0,0,.7)!important}
#dirty-banner{position:fixed!important;top:auto!important;bottom:18px!important;left:calc(var(--rail) + 24px)!important;right:24px!important;z-index:800!important;margin:0!important;max-width:none;background:linear-gradient(180deg,rgba(15,40,80,.96),rgba(11,29,61,.96))!important;color:var(--tx)!important;border:1px solid rgba(23,168,255,.45)!important;box-shadow:0 20px 50px -12px rgba(0,0,0,.75);padding:10px 16px!important;border-radius:12px!important;backdrop-filter:blur(12px);font-size:13px!important}
@media (max-width:820px){#dirty-banner{left:12px!important;right:12px!important;bottom:72px!important}}
/* ── Small screens: rail becomes a drawer + bottom tab bar ─────────────── */
@media (max-width:820px){
  html,html.ss-rail-collapsed{--rail:0px}
  body{padding-left:0;padding-bottom:64px}
  .ss-rail{width:260px;transform:translateX(-100%);transition:transform .2s ease;box-shadow:0 0 0 100vmax rgba(0,0,0,0)}
  html.ss-rail-open .ss-rail{transform:none;box-shadow:0 0 0 100vmax rgba(0,0,0,.45)}
  html.ss-rail-open .ss-ri span,html.ss-rail-open .ss-rs,html.ss-rail-open .ss-rail-brand .ss-brand-n{display:inline}
  .ss-rail-toggle{display:none}
  .ss-menu-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:8px;background:transparent;border:1px solid transparent;color:var(--mu);cursor:pointer}
  .ss-user{display:none}
  header.ss-top{padding:0 10px}
  .ss-tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;height:60px;z-index:350;background:rgba(9,26,54,.96);backdrop-filter:blur(12px);border-top:1px solid rgba(70,120,190,.25);padding:4px 6px calc(4px + env(safe-area-inset-bottom))}
  .ss-tabbar a,.ss-tabbar button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:10px;font-weight:600;color:var(--mu);text-decoration:none;background:none;border:none;border-radius:8px;font-family:inherit}
  .ss-tabbar a.on{color:#9fdbff}
  #hub-mini-player{left:0!important;bottom:60px!important}
}
/* ── Motion ───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){*{animation-duration:.001s!important;transition-duration:.001s!important}}

/* utilities (5.0) */
/* One class per inline style that used to repeat across the templates.
   Tripled selector (0,3,0) so page rules never outrank them, while a
   JS-set inline style (status colours etc.) still wins — unlike !important. */
.u-mu.u-mu.u-mu{color:var(--mu)}
.u-mu-12.u-mu-12.u-mu-12{color:var(--mu);font-size:12px}
.u-mu-11.u-mu-11.u-mu-11{color:var(--mu);font-size:11px}
.u-mu-10.u-mu-10.u-mu-10{color:var(--mu);font-size:10px}
.u-mb10.u-mb10.u-mb10{margin-bottom:10px}
.u-fs12.u-fs12.u-fs12{font-size:12px}
.u-acc.u-acc.u-acc{color:var(--acc)}
.u-mt10.u-mt10.u-mt10{margin-top:10px}
.u-fs11.u-fs11.u-fs11{font-size:11px}
.u-mt8.u-mt8.u-mt8{margin-top:8px}
.u-mla.u-mla.u-mla{margin-left:auto}
.u-mb12.u-mb12.u-mb12{margin-bottom:12px}
.u-tx.u-tx.u-tx{color:var(--tx)}
.u-al.u-al.u-al{color:var(--al)}
.u-p6-8.u-p6-8.u-p6-8{padding:6px 8px}
.u-mt6.u-mt6.u-mt6{margin-top:6px}
.u-label.u-label.u-label{color:var(--mu);font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase}
.u-tag.u-tag.u-tag{background:#173a69;border-radius:3px;padding:1px 5px}
.u-p4-8.u-p4-8.u-p4-8{padding:4px 8px}
.u-flex1.u-flex1.u-flex1{flex:1}
.u-input.u-input.u-input{background:#0d1e40;border:1px solid var(--bor);border-radius:6px;color:var(--tx);font-size:13px;padding:6px 9px}
.u-th.u-th.u-th{padding:3px 8px;text-align:left}
.u-mb8.u-mb8.u-mb8{margin-bottom:8px}
.u-h13.u-h13.u-h13{font-size:13px;font-weight:600}
.u-wn.u-wn.u-wn{color:var(--wn)}
.u-fs13.u-fs13.u-fs13{font-size:13px}
.u-green.u-green.u-green{color:#86efac}
.u-tag-s.u-tag-s.u-tag-s{background:#173a69;border-radius:3px;padding:1px 4px}
.u-quietlink.u-quietlink.u-quietlink{color:inherit;opacity:.7;text-decoration:none}
.u-pill10.u-pill10.u-pill10{font-size:10px;padding:1px 6px}
.u-mt14.u-mt14.u-mt14{margin-top:14px}
.u-ok.u-ok.u-ok{color:var(--ok)}
.u-nowrap.u-nowrap.u-nowrap{white-space:nowrap}
.u-row-mu.u-row-mu.u-row-mu{color:var(--mu);padding:5px 0}
.u-mono-cell.u-mono-cell.u-mono-cell{font-family:monospace;padding:4px 8px}
.u-m0-tt.u-m0-tt.u-m0-tt{margin:0;text-transform:none}
.u-mt12.u-mt12.u-mt12{margin-top:12px}
.u-h15.u-h15.u-h15{color:#eef5ff;font-size:15px;font-weight:700;margin-bottom:10px}
.u-pill10b.u-pill10b.u-pill10b{font-size:10px;padding:1px 7px}
.u-fs10.u-fs10.u-fs10{font-size:10px}
.u-amber9.u-amber9.u-amber9{color:#f59e0b;font-size:9px}
.u-purple9.u-purple9.u-purple9{color:#a855f7;font-size:9px}
.u-blue9.u-blue9.u-blue9{color:#60a5fa;font-size:9px}
.u-th4.u-th4.u-th4{padding:4px 8px;text-align:left}
.u-py12.u-py12.u-py12{padding:12px 0}
.u-subhead.u-subhead.u-subhead{color:var(--tx);font-size:13px;font-weight:500;margin:0;text-transform:none}
.u-mb14.u-mb14.u-mb14{margin-bottom:14px}
.u-fieldlabel.u-fieldlabel.u-fieldlabel{font-size:13px;font-weight:600;margin-bottom:3px}
.u-noflex.u-noflex.u-noflex{flex:0 0 auto}
.u-cur-def.u-cur-def.u-cur-def{cursor:default}
.u-al10.u-al10.u-al10{color:var(--al);font-size:10px}
.u-btn-red.u-btn-red.u-btn-red{background:#ef4444;border:none;border-radius:7px;color:#fff;cursor:pointer;font-size:13px;font-weight:600;padding:7px 16px}
.u-btn-slate.u-btn-slate.u-btn-slate{background:#17345f;border:none;border-radius:7px;color:#eef5ff;cursor:pointer;font-size:13px;font-weight:600;padding:7px 16px}