:root{
  color-scheme:dark;
  --bg:#05070c;--bg-deep:#02040a;
  --panel:rgba(15,20,32,.62);--panel2:rgba(20,27,42,.72);--panel-strong:rgba(10,14,22,.88);
  --line:rgba(120,160,210,.16);--line2:rgba(102,227,255,.38);
  --text:#eef4fb;--muted:#8fa0b8;
  --accent:#5ff2ff;--accent2:#a97bff;
  --good:#3fe6a3;--warn:#ffcf5c;--bad:#ff5c7a;
  --shadow:0 20px 60px rgba(0,0,0,.45);--glow:0 0 22px rgba(95,242,255,.35);
  --radius:18px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-height:100vh;color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--bg-deep);position:relative;overflow-x:hidden}

.bg-field{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 60rem 40rem at 12% -10%,rgba(95,242,255,.10),transparent 60%),
    radial-gradient(ellipse 50rem 40rem at 100% 10%,rgba(169,123,255,.10),transparent 55%),
    radial-gradient(ellipse 60rem 50rem at 50% 120%,rgba(63,230,163,.06),transparent 60%),
    var(--bg);
}
.bg-field::before{content:"";position:absolute;inset:-2px;
  background-image:linear-gradient(rgba(102,227,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(102,227,255,.05) 1px,transparent 1px);
  background-size:42px 42px;mask-image:radial-gradient(ellipse 80% 70% at 50% 20%,black,transparent 78%);
  animation:gridDrift 32s linear infinite;
}
@keyframes gridDrift{from{background-position:0 0,0 0}to{background-position:84px 84px,84px 84px}}
.bg-field::after{content:"";position:absolute;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(95,242,255,.55),transparent);filter:blur(1px);
  animation:scanline 7s ease-in-out infinite;opacity:.5;
}
@keyframes scanline{0%{top:-5%;opacity:0}8%{opacity:.6}50%{top:60%;opacity:.35}92%{opacity:.6}100%{top:105%;opacity:0}}
*{position:relative}
body>*{z-index:1}

button,input,select,textarea{font:inherit}
button{color:var(--text);background:var(--panel2);border:1px solid var(--line);border-radius:14px;padding:11px 16px;cursor:pointer;transition:.15s ease}
button:hover{border-color:var(--line2);box-shadow:var(--glow)}
button:active{transform:translateY(1px)}
button.good{border-color:rgba(63,230,163,.5);color:#d3ffe9}
button.bad{border-color:rgba(255,92,122,.5);color:#ffd7de}

header{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;gap:16px;align-items:center;flex-wrap:wrap;padding:16px 20px;background:rgba(4,6,11,.82);border-bottom:1px solid var(--line);backdrop-filter:blur(20px) saturate(140%)}
.brand{display:flex;align-items:center;gap:.8rem}
.brand-mark{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:conic-gradient(from 220deg,rgba(95,242,255,.9),rgba(169,123,255,.9),rgba(95,242,255,.9));box-shadow:0 0 26px rgba(95,242,255,.45);font-weight:900;color:#01050a;animation:markPulse 4s ease-in-out infinite}
@keyframes markPulse{0%,100%{box-shadow:0 0 18px rgba(95,242,255,.35)}50%{box-shadow:0 0 32px rgba(169,123,255,.55)}}
header b,.eyebrow{color:var(--accent);letter-spacing:.2em;font-size:.7rem;text-transform:uppercase;font-weight:800}
h1{font-size:clamp(1.05rem,3vw,1.5rem);margin:4px 0 0}
h2{font-size:clamp(1.5rem,5vw,2.1rem);margin:6px 0}
small{color:var(--muted)}
.header-right{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}

#dot,.light{display:inline-block;width:11px;height:11px;border-radius:50%;background:var(--bad);margin-right:8px;box-shadow:0 0 10px currentColor;animation:dotPulse 1.8s ease-in-out infinite}
.on{background:var(--good)!important;color:var(--good)}
@keyframes dotPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.82)}}

.view-toggle{display:flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.view-toggle button{border:none;border-radius:0;background:transparent;padding:.45rem .8rem;font-size:.76rem;color:var(--muted)}
.view-toggle button.vt-active{background:rgba(95,242,255,.16);color:var(--text)}

nav{position:sticky;top:74px;z-index:15;display:flex;gap:.5rem;overflow-x:auto;padding:.7rem 20px;background:rgba(4,6,11,.74);border-bottom:1px solid var(--line);backdrop-filter:blur(16px);scrollbar-width:thin}
nav button{flex:none;padding:.5rem .85rem;color:var(--muted);border-color:var(--line);font-size:.85rem}
nav button.active{color:var(--text);border-color:var(--line2);background:rgba(95,227,255,.1);box-shadow:var(--glow)}

main{max-width:1560px;margin:0 auto;padding:1.1rem clamp(1rem,4vw,2rem) 5rem}
.page{display:none;animation:fadeIn .25s ease}
.page.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.muted{color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:16px 0}

.metric,.card,.panel,.event{border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(165deg,var(--panel2),var(--panel-strong));backdrop-filter:blur(14px);box-shadow:var(--shadow);padding:18px}
.metric label,.detail{display:block;color:var(--muted);font-size:.82rem}
.metric strong{display:block;font-size:1.8rem;margin:6px 0;text-shadow:0 0 18px rgba(95,242,255,.18)}

.head{display:flex;justify-content:space-between;gap:12px;align-items:center}
.rows{display:grid;gap:9px}
.row{display:flex;justify-content:space-between;gap:15px;padding:12px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.02)}
.row span:last-child{text-align:right;font-weight:700;overflow-wrap:anywhere}

.badge{border:1px solid var(--warn);color:var(--warn);border-radius:999px;padding:5px 10px;font-size:.76rem;display:inline-flex;align-items:center;gap:.35rem}
.badge::before{content:"";width:.4rem;height:.4rem;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}
.good{border-color:var(--good)!important;color:var(--good)!important}
.bad{border-color:var(--bad)!important;color:var(--bad)!important}

.bar-track{height:8px;border-radius:999px;background:rgba(255,255,255,.06);overflow:hidden;border:1px solid var(--line);margin-top:8px}
.bar-fill{height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent),var(--accent2));box-shadow:0 0 12px rgba(95,242,255,.4);transition:width .5s ease}
.bar-fill.bad{background:linear-gradient(90deg,var(--bad),#ff9f6b)}
.bar-fill.warn{background:linear-gradient(90deg,var(--warn),var(--bad))}

/* operations world map */
.world{position:relative;overflow:hidden;padding:2rem 1rem;display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;align-items:center;min-height:220px;border:1px solid var(--line);border-radius:26px;background:radial-gradient(circle,rgba(95,242,255,.08),transparent 55%),#030a12}
.wnode{display:flex;flex-direction:column;align-items:center;gap:.4rem;text-align:center}
.wnode .dotcore{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line2);background:radial-gradient(circle,rgba(95,242,255,.18),rgba(10,14,22,.9));box-shadow:0 0 20px rgba(95,242,255,.3);font-size:1.3rem;animation:nodeBreath 3.4s ease-in-out infinite}
.wnode:nth-child(2n) .dotcore{animation-delay:.6s}
.wnode:nth-child(3n) .dotcore{animation-delay:1.1s}
@keyframes nodeBreath{0%,100%{box-shadow:0 0 16px rgba(95,242,255,.25);transform:scale(1)}50%{box-shadow:0 0 30px rgba(169,123,255,.45);transform:scale(1.05)}}
.wnode .wlabel{font-size:.78rem;font-weight:700}
.wnode .wsub{font-size:.68rem;color:var(--muted)}
.wcore .dotcore{width:76px;height:76px;font-size:1.6rem;border-color:var(--accent2);background:conic-gradient(from 0deg,rgba(95,242,255,.35),rgba(169,123,255,.35),rgba(95,242,255,.35));animation:coreSpin 10s linear infinite,nodeBreath 3.4s ease-in-out infinite}
@keyframes coreSpin{from{filter:hue-rotate(0deg)}to{filter:hue-rotate(360deg)}}
.flowtrack{position:relative;height:2px;background:linear-gradient(90deg,transparent,var(--line2),transparent);margin:0 -.5rem}
.flowtrack::after{content:"";position:absolute;top:-3px;left:0;width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent),0 0 20px var(--accent);animation:flowMove 2.6s linear infinite}
@keyframes flowMove{from{left:0%;opacity:0}10%{opacity:1}90%{opacity:1}to{left:96%;opacity:0}}

/* connector traffic */
.traffic{margin-top:.5rem;height:26px;display:flex;align-items:flex-end;gap:2px}
.traffic span{flex:1;background:linear-gradient(180deg,var(--accent),transparent);border-radius:2px 2px 0 0;opacity:.55;animation:barBounce 2.2s ease-in-out infinite}
@keyframes barBounce{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}

/* pipeline stage track */
.pipeline{display:grid;grid-template-columns:repeat(7,1fr);gap:.5rem;margin:1rem 0}
.pstage{border:1px solid var(--line);border-radius:14px;padding:.7rem .5rem;background:rgba(255,255,255,.02);text-align:center;font-size:.7rem;color:var(--muted);position:relative}
.pstage strong{display:block;color:var(--text);font-size:.95rem;margin-top:.2rem}
.pstage.active{border-color:var(--line2);background:rgba(95,242,255,.08);box-shadow:var(--glow);color:var(--text)}

/* gauges */
.gauges{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1rem;margin:1rem 0}
.gauge{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1rem}
.gauge-ring{position:relative;width:104px;height:104px}
.gauge-ring svg{transform:rotate(-90deg);width:104px;height:104px}
.gauge-track{fill:none;stroke:rgba(255,255,255,.08);stroke-width:10}
.gauge-value{fill:none;stroke:var(--accent);stroke-width:10;stroke-linecap:round;transition:stroke-dashoffset .6s ease}
.gauge-value.warn{stroke:var(--warn)}
.gauge-value.bad{stroke:var(--bad)}
.gauge-num{position:absolute;inset:0;display:grid;place-items:center;font-weight:800;font-size:1.05rem}
.gauge-label{color:var(--muted);font-size:.75rem}

.world{}
.node{position:absolute;padding:9px 12px;border:1px solid var(--line);border-radius:999px;background:#091421}
.n1{top:10%;left:5%}.n2{top:10%;right:5%}.n3{bottom:10%;left:5%}.n4{bottom:10%;right:5%}
.flow{display:flex;gap:9px;overflow:auto;align-items:center}
.flow div{flex:none;padding:13px;min-width:130px;text-align:center;border:1px solid var(--line);border-radius:14px}

.event{border-left:4px solid var(--accent);margin:10px 0;animation:feedIn .35s ease}
@keyframes feedIn{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:translateX(0)}}
.warning{border-left-color:var(--warn)}
.issue{border-left-color:var(--bad)}

textarea{width:100%;min-height:110px;background:rgba(4,6,10,.7);color:var(--text);border:1px solid var(--line);border-radius:14px;padding:13px}
input,select{width:100%;border:1px solid var(--line);border-radius:12px;background:rgba(4,6,10,.7);color:var(--text);padding:.72rem}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--line2);box-shadow:var(--glow)}
label{display:grid;gap:.35rem;color:var(--muted);font-size:.85rem;margin-bottom:.7rem}

.chat{padding:12px;border-left:3px solid var(--good);background:var(--panel);border-radius:12px;margin:9px 0}
.user{border-left-color:var(--accent)}

#toast{display:none;position:fixed;right:16px;bottom:16px;z-index:50;padding:12px 16px;background:rgba(10,14,22,.95);border:1px solid var(--line2);border-radius:12px;box-shadow:var(--shadow),var(--glow)}
.show{display:block!important}

.actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.6rem}
.actions button{padding:.5rem .85rem;font-size:.8rem}

@media(max-width:1050px){
  .world{grid-template-columns:repeat(3,1fr)}
  .pipeline{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:720px){
  nav{top:104px}
  .grid{grid-template-columns:1fr}
  .world{grid-template-columns:repeat(2,1fr);min-height:auto}
  .pipeline{grid-template-columns:repeat(2,1fr)}
  header{align-items:flex-start}
  #conn{display:none}
}

/* explicit device preview modes (Desktop/Mobile toggle in header) */
body.force-mobile main{max-width:480px}
body.force-mobile .grid,body.force-mobile .world,body.force-mobile .pipeline{grid-template-columns:1fr!important}
body.force-mobile #conn{display:none}
body.force-desktop main{max-width:1560px}
body.force-desktop .grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))!important}
body.force-desktop .world{grid-template-columns:repeat(5,1fr)!important}
body.force-desktop .pipeline{grid-template-columns:repeat(7,1fr)!important}