/* XLX474 · Glass Depth · 2026-10-18
   Presentation only. Preserve all protocol variables, live values and states.
   Rollback: remove the single stylesheet link from index.html. */
:root{
  --bg:#080e1b;--bg2:#0e1930;--panel:#132239;--panel2:#172b44;
  --line:#2c4561;--line2:#4b718e;--text:#eef6ff;--muted:#a8bdd2;
  --cyan:#79ddf5;--cyan2:#b0f0ff;
  --depth-shadow:0 18px 38px -22px #000c,0 4px 9px #02071166,
    inset 0 1px 0 #e0f7ff1c,inset 0 -1px 0 #03091780;
}
html{scroll-padding-top:88px}
body{
  background:radial-gradient(ellipse at 78% 0%,#24336377,transparent 43%),
    radial-gradient(ellipse at 20% 33%,#13647c33,transparent 40%),
    linear-gradient(140deg,#0d1627,#080e1b 60%,#10182e);
  color:var(--text);line-height:1.55;-webkit-font-smoothing:antialiased;
  font-feature-settings:"ss01";font-variant-numeric:tabular-nums;
}
body::before{opacity:.22;background-size:56px 56px;
  background-image:linear-gradient(#8cc9ee12 1px,transparent 1px),
    linear-gradient(90deg,#8cc9ee12 1px,transparent 1px)}
::selection{background:#6cd9f54d;color:#fff}
.sidebar{
  background:linear-gradient(165deg,#15243aeb,#0a1223f5 62%);
  border-right-color:#9fd5ff20;
  box-shadow:12px 0 44px -26px #000c,inset -1px 0 0 #c4eaff09;
}
.brand{border-bottom-color:#a7cdff17;padding-bottom:25px}
.brand-mark{
  border-color:#8be7ff99;
  background:radial-gradient(circle at 30% 20%,#a9edff55,transparent 50%),
    linear-gradient(145deg,#214862,#0b1b33);
  box-shadow:0 8px 20px #0006,0 0 25px #70dfff22,inset 0 1px 1px #d1f9ff66;
}
.brand b{letter-spacing:1px;font-weight:800}
.brand span{color:#95e4f6}
.brand small,.sidebar-foot,.sidebar-foot small{color:#a2b6cc}
nav{gap:8px}
.nav{
  min-height:44px;color:#a8bed3;border:1px solid transparent;border-radius:12px;
  transition:background-color .2s,border-color .2s,color .2s,transform .2s;
}
.nav.active,.nav:hover{
  color:#effaff;border-color:#9bdef531;
  background:linear-gradient(110deg,#73d8f51d,#8a9dff10);
  box-shadow:inset 3px 0 #8ce7fa,inset 0 1px #e1f8ff0d,0 4px 14px #0002;
}
.nav i{color:#a1acc6}
header{background:#0d1729ed;border-bottom-color:#afd9ff1c;box-shadow:0 8px 24px #03081522}
.crumb{color:#a7bbd0}.crumb span{color:#7893af}
.readonly,.badge{border-color:#8fdcff33;background:#1c34454d;color:#b5eafa}
.alpha{background:#8475cd15;color:#d1c7ff;border-color:#c2b6ff35}
select,input{
  background:#0d1c30;color:#e3f2ff;border-color:#8cb7dc38;
  min-height:38px;box-shadow:inset 0 1px 3px #0004;
  transition:border-color .18s,box-shadow .18s;
}
input::placeholder{color:#98aec4;opacity:1}
button:focus-visible,select:focus-visible,input:focus-visible,#adminPassword:focus-visible{
  outline:2px solid #b0f0ff;outline-offset:4px;box-shadow:0 0 0 5px #79ddf522;
}
.page{padding:30px clamp(18px,2.4vw,40px);max-width:1740px}
.hero{position:relative;gap:24px;padding:22px 2px 30px;isolation:isolate}
.hero::before{
  content:"";position:absolute;inset:-16px -10px 0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at 35% 30%,#88beff0e,transparent 67%);
}
.eyebrow{font-size:10px;font-weight:650;letter-spacing:2px;color:#9fe3f5}
.hero h1{
  font-size:clamp(29px,3.2vw,43px);line-height:1.16;font-weight:750;
  letter-spacing:-1.6px;margin:12px 0 12px;color:#f1f7ff;
  text-shadow:0 2px 22px #bedaff15;
}
.hero p{font-size:14px;line-height:1.7;color:#adbed4;max-width:720px}
.hero-state{
  flex-shrink:0;padding:12px 16px;border-radius:16px;border-color:#b2dbff2c;
  background:linear-gradient(145deg,#b3eaff13,#15233a99);box-shadow:var(--depth-shadow);
}
.hero-state small{font-size:9px;letter-spacing:1.1px;color:#adbed4}
.gauges{gap:16px;grid-template-columns:repeat(6,minmax(0,1fr))}
.gauge-card,.protocols article,.panel,.onair-strip{
  position:relative;isolation:isolate;border:1px solid #9fcfff2b;
  border-radius:20px;
  background:linear-gradient(135deg,#b9d9ff0e,transparent 48%),
    linear-gradient(165deg,#17283be8,#0f1a2eea);
  box-shadow:var(--depth-shadow);
}
.gauge-card::after,.protocols article::after,.panel::after,.onair-strip::after{
  content:"";position:absolute;z-index:5;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(120deg,#dbf3ff0a,transparent 32%);
  box-shadow:inset 0 1px 0 #e3f6ff12,inset 1px 0 0 #e3f6ff06;
}
.gauge-card{padding:22px 10px 17px;overflow:hidden}
.gauge-card::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% -20%,#86d9ff24,transparent 67%);
}
.gauge-card:nth-child(2)::before,.gauge-card:nth-child(4)::before{
  background:radial-gradient(ellipse at 50% -20%,#a39aff25,transparent 67%);
}
.gauges .ring{
  width:100px;height:100px;max-width:100%;filter:none;
  background:radial-gradient(circle at 26% 16%,#fff9,transparent 35%),
    conic-gradient(var(--ring) calc(var(--v)*1%),#29425d 0);
  box-shadow:0 15px 20px -5px #020612b3,0 0 24px #87dfff0b,
    inset 2px 2px 3px #dffaff77,inset -3px -4px 7px #0008;
}
.gauges .ring::before{
  inset:4px;
  background:radial-gradient(ellipse at 29% 19%,#e1f7ff8c,#9ddcfd19 16%,transparent 34%),
    radial-gradient(circle at 36% 25%,#315b79,#1c3753 38%,#101f38 67%,#070e1d 96%);
  box-shadow:inset 3px 3px 9px #c6e9ff1f,inset -7px -11px 15px #0009;
}
.gauges .ring>div{text-shadow:0 2px 5px #030919}
.gauges .ring strong{font-size:25px;font-weight:750;letter-spacing:-.7px}
.gauges .ring small{color:#c3d9ed;font-size:8px;letter-spacing:.8px}
.gauge-card p{font-size:11px;color:#a9bed4;margin-top:14px}
.protocols{gap:16px;margin-top:18px}
.protocols article{padding:17px 15px;gap:12px;min-width:0;border-radius:17px}
.protocols article>div{min-width:0}
.protocols small{font-size:10px;color:#afbed3}
.protocols b{font-size:14px;letter-spacing:-.15px;overflow-wrap:anywhere}
.protocols p{font-size:11px;color:#a2bad0}
.proto-icon{flex-shrink:0;
  background:radial-gradient(ellipse at 30% 14%,#fff2,transparent 56%),#0c182a;
}
.protocols .state{right:12px;top:12px}
.grid.two{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:18px;margin-top:18px}
.panel{min-width:0;margin-top:18px}
.panel-head{
  min-height:72px;gap:14px;padding:16px 20px;flex-wrap:wrap;
  border-bottom-color:#afd7ff1b;background:linear-gradient(110deg,#d9eeff06,transparent);
}
.panel-head small{color:#9fb5ce;font-size:9px;letter-spacing:1.35px}
.panel-head h2{font-size:17px;font-weight:700;letter-spacing:-.35px;margin:3px 0 0}
.panel-head>span{font-size:11px;color:#b9ccdf}
.panel-head>.live-pulse{flex-shrink:0}
.filters{max-width:100%;flex-wrap:wrap}
.filters input{min-width:0;max-width:100%;flex:1}
.onair-strip{margin-bottom:18px;padding:13px 16px;border-radius:16px}
.onair-icon{box-shadow:inset 0 1px #c0efff22,0 5px 9px #0004;background:#162e44;border-color:#a4ddff44}
.onair-main small{color:#a3b9d0;font-size:9px}.onair-main span{color:#b4c9dd}
.onair-timer{font-size:14px}
.connect-jump{
  border-color:#a5e5ff55;background:linear-gradient(130deg,#8ae6ff20,#8394ff10);
  color:#c7f3ff;min-height:36px;box-shadow:inset 0 1px #e5fbff12,0 4px 10px #0003;
  transition:transform .18s,border-color .18s;
}
.orbit{
  height:360px;min-height:360px;
  background:radial-gradient(ellipse at 50% 50%,#6b95ee1b,transparent 62%),
    linear-gradient(160deg,#112438b3,#0a1427e6);
}
.orbit::before{
  content:"";position:absolute;left:8%;right:8%;top:25%;height:82%;pointer-events:none;
  transform:perspective(460px) rotateX(58deg);
  background-image:linear-gradient(#87b9ed16 1px,transparent 1px),
    linear-gradient(90deg,#87b9ed16 1px,transparent 1px);
  background-size:30px 30px;
  mask-image:radial-gradient(ellipse,#0009,transparent 72%);
}
.orbit-line{
  border-color:#b1dfff30;
  box-shadow:0 2px 1px #030b1655,inset 0 1px 1px #c4eaff0d;
  transform:translate(-50%,-50%) perspective(600px) rotateX(25deg) rotate(-12deg);
}
.o1{width:55%;height:53%}.o2{width:87%;height:83%}
.core{
  width:108px;height:108px;border-color:#b0eaffb3;
  background:radial-gradient(ellipse at 29% 18%,#dafaff66,transparent 38%),
    radial-gradient(circle at 37% 30%,#34617e,#173955 43%,#0b1c33 80%);
  box-shadow:0 20px 25px -9px #000b,0 0 40px #76dfff24,
    inset 1px 2px 3px #e0ffff44,inset -8px -10px 16px #030d1a99;
}
.core strong{font-size:17px;letter-spacing:.4px}.core small{color:#c1dcec;letter-spacing:2px;font-size:8px}
.core i{inset:-10px;border-color:#a5deff26;border-top-color:#b9efff80;
  animation:spin 24s linear infinite;pointer-events:none}
.orbit-node{background:linear-gradient(145deg,#243c56,#102138);border-color:#8ebce755;
  box-shadow:0 6px 12px #0007,inset 0 1px #dcf5ff1c;color:#dbecff}
.orbit-node small{color:#abc6dd}
#liveRows{padding:12px 18px}
#x7Freshness{display:block;margin:0;padding:12px 20px;color:#bdd1e6;font-size:11px;border-bottom:1px solid #b3dcff12}
.live-row{padding-top:13px;padding-bottom:13px}
.empty{color:#a7bed3}
th,td{border-bottom-color:#b0d9ff12}
th{font-size:10px;color:#aac0d7;padding-top:14px;padding-bottom:14px}
td{color:#c2d4e7;padding-top:12px;padding-bottom:12px}
#heardBody td:first-child{font-variant-numeric:tabular-nums}
.lh-mini-row{grid-template-columns:60px 62px minmax(0,1fr) minmax(0,1fr) 42px}
.lh-mini-row>*{min-width:0;overflow:hidden;text-overflow:ellipsis}
.lh-mini-row time{color:#a7bbd0}.lh-mini-row span{color:#abc2d9}
.activity-legend{color:#afc2d8}
.activity24{background:repeating-linear-gradient(to top,transparent 0,transparent 43px,#afd7ff0a 44px)}
.hour-stack i{border-top:1px solid #fff3}
.today-chips span{color:#b2c6da;background:#162b40;border-color:#90bfe92c}
.today-chips span span{border:0;background:none;padding:0}
.services{padding:14px 20px}
.service{border-bottom-color:#acd7ff12;padding:10px 2px}
.quality{gap:12px;padding:18px 20px}
.quality>div{background:#0d1d31;border-color:#a0cfff24}
.quality small{color:#aac1d9}.quality ul{color:#afc3d8;line-height:1.8}
.connect-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:18px}
.connect-grid article{min-width:0;background:linear-gradient(135deg,#b2dbff08,#0d1c30b3);border-color:#9ccfff26;border-radius:14px}
.connect-grid small{color:#afc5da;font-size:9px}
.connect-grid p{color:#abc0d5;font-size:11px}
.connect-grid b{overflow-wrap:anywhere}
.admin-login p{color:#aec2d7}
footer{color:#94adc8;padding-top:24px}
@supports(backdrop-filter:blur(10px)){
  .panel,.gauge-card,.onair-strip,.protocols article{backdrop-filter:blur(12px)}
}
@media(hover:hover) and (pointer:fine){
  .gauge-card,.protocols article{
    transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
  }
  .gauge-card:hover,.protocols article:hover{
    transform:translateY(-3px);border-color:#b0e9ff66;
    box-shadow:0 24px 38px -19px #000c,0 7px 18px #02071166,inset 0 1px #e0f7ff38;
  }
  .nav:hover{transform:translateX(2px)}
  .connect-jump:hover{transform:translateY(-1px);border-color:#b8edff}
}
@media(max-width:1250px){
  .grid.two{grid-template-columns:minmax(0,1fr)}
}
/* Six existing LIVE fields wrap into two lines in a narrow desktop panel. */
@media(min-width:1251px) and (max-width:1600px){
  #live .live-row{grid-template-columns:56px 100px minmax(0,1fr);gap:8px}
  #live .live-row>div:nth-child(n+4){font-size:10px;color:#afc5da}
  #live .live-row>div:last-child{text-align:right}
}
@media(min-width:761px) and (max-width:1150px){
  .gauges{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:760px){
  .page{padding:20px 14px}
  header{height:62px;padding:0 14px;gap:10px}
  #menu{min-width:40px;min-height:40px;border-radius:10px;background:#b3dcff0c}
  .hero{align-items:flex-start;gap:18px;padding:12px 2px 24px;flex-wrap:wrap}
  .hero h1{font-size:32px;letter-spacing:-1px}
  .hero p{font-size:13px}.hero-state{padding:9px 13px}
  .hero-state small{font-size:8px}
  .eyebrow{font-size:9px;letter-spacing:1.1px}
  .gauges{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .gauge-card{padding:18px 8px 15px;border-radius:17px}
  .protocols{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .protocols article{align-items:flex-start;flex-direction:column;padding:14px;gap:10px}
  .protocols b{font-size:13px}.proto-icon{width:42px;height:42px}
  .protocols p{font-size:10px}
  .panel-head{padding:14px 16px;gap:12px}
  .panel-head h2{font-size:16px}
  .filters{width:100%;gap:8px}
  .filters input{flex-basis:100%;width:100%}
  .onair-strip{grid-template-columns:auto minmax(0,1fr) auto;gap:9px;padding:12px}
  .onair-main{display:grid;gap:2px}
  .onair-main strong{font-size:14px}
  .onair-main span{font-size:11px}
  .onair-timer{font-size:11px}
  .connect-jump{grid-column:1/-1}
  .orbit{height:340px;min-height:340px}
  .core{width:84px;height:84px}.core strong{font-size:14px}
  .orbit-node{min-width:66px;max-width:82px;padding:7px 4px}
  .orbit-node b{font-size:8px}.orbit-node small{font-size:6px}
  .connect-grid{grid-template-columns:minmax(0,1fr);padding:14px}
  .connect-grid .proto-icon{width:45px;height:45px}
  .admin-login{padding:15px;min-width:0}
  .admin-login form{width:100%;min-width:0;flex-wrap:wrap}
  .admin-login form input{min-width:0!important;width:100%;flex:1 1 150px}
  .admin-login>div:nth-child(2){min-width:0;flex-basis:180px}
  .admin-login #adminLoginMsg{min-width:0}
  .lh-mini-row{grid-template-columns:52px 58px minmax(0,1fr)}
  .lh-mini-row>*:nth-child(n+4){display:none}
  #liveRows{padding:10px 12px}
  #x7Freshness{padding:12px 16px}
}
@media(max-width:350px){.hero h1{font-size:29px}.protocols{grid-template-columns:minmax(0,1fr)}}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
@media(prefers-reduced-transparency:reduce){
  .sidebar,header,.panel,.gauge-card,.onair-strip,.protocols article{
    backdrop-filter:none;background-color:#112138;
  }
}