:root{--color-navy: #020b18;--color-navy-2: #050f1f;--color-navy-3: #071425;--color-panel: #0a1a2e;--color-blue: #1090c8;--color-blue-bright: #29abe2;--color-cyan: #29abe2;--color-cyan-dim: #1090c8;--color-grid: rgba(41, 171, 226, .06);--color-border: rgba(41, 171, 226, .12);--color-border-bright: rgba(41, 171, 226, .3);--color-text: #e8f4ff;--color-muted: #7a9bb5;--color-warn: #d4a017;--color-crit: #e05a45;--color-maint: #6b8a9a}*{scrollbar-width:thin;scrollbar-color:rgba(41,171,226,.2) transparent}html{background:var(--color-navy);scroll-behavior:smooth}@keyframes scan-line{0%{transform:translateY(-100%)}to{transform:translateY(100vh)}}@keyframes pulse-dot{0%,to{opacity:1}50%{opacity:.3}}@keyframes float-up{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes glow-pulse{0%,to{box-shadow:0 0 20px #29abe233}50%{box-shadow:0 0 40px #29abe280}}.animate-float-up{animation:float-up .7s ease forwards}.glow-ring{animation:glow-pulse 3s ease-in-out infinite}.grid-bg{background-image:linear-gradient(rgba(41,171,226,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(41,171,226,.04) 1px,transparent 1px);background-size:60px 60px}.scanline{position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,rgba(41,171,226,.4),transparent);animation:scan-line 4s linear infinite;pointer-events:none;z-index:2}.tag-mono{font-family:var(--font-mono);font-size:.65rem;letter-spacing:.15em;text-transform:uppercase}:root{--bg-0: var(--color-navy);--bg-1: var(--color-navy-2);--bg-2: var(--color-navy-3);--panel: var(--color-panel);--line: var(--color-border);--text: var(--color-text);--muted: var(--color-muted);--accent: var(--color-blue-bright);--accent-dim: var(--color-blue);--warn: var(--color-warn);--crit: var(--color-crit);--ok: var(--color-cyan);--maint: var(--color-maint);--glow: rgba(41, 171, 226, .12);--font-sans: "IBM Plex Sans", "Segoe UI", sans-serif;--font-mono: "IBM Plex Mono", ui-monospace, monospace}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100%}body{font-family:var(--font-sans);color:var(--text);background:radial-gradient(1200px 600px at 12% -8%,rgba(41,171,226,.1),transparent 55%),radial-gradient(900px 500px at 92% 0%,rgba(16,144,200,.08),transparent 50%),linear-gradient(180deg,#03101f 0%,var(--bg-0) 42%,#01060e 100%);background-attachment:fixed}code{font-family:var(--font-mono);font-size:.9em}.shell{position:relative;max-width:1600px;margin:0 auto;padding:1.25rem 1.5rem 2.5rem}.shell>*{position:relative;z-index:1}.topbar{display:flex;justify-content:space-between;gap:1.5rem;align-items:flex-end;padding-bottom:1.25rem;border-bottom:1px solid var(--line);animation:fade-up .6s ease both}.brand{margin:0;display:inline-block;font-family:var(--font-mono);font-size:.75rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);text-decoration:none}.brand:hover{text-decoration:underline;text-underline-offset:.2em}.brand-block h1{margin:.2rem 0 .35rem;font-size:clamp(1.6rem,3vw,2.2rem);font-weight:600;letter-spacing:-.02em}.sub,.muted{margin:0;color:var(--muted);font-size:.85rem}.top-meta{text-align:right;font-family:var(--font-mono);font-size:.78rem}.lang-switcher{display:inline-flex;align-items:center;gap:.15rem;margin-bottom:.55rem;padding:.18rem;background:#29abe20f;border:1px solid rgba(41,171,226,.2)}.flag-icon{display:block;flex-shrink:0;border-radius:1px;box-shadow:0 0 0 1px #e8f4ff33}.lang-btn{display:inline-flex;align-items:center;justify-content:center;padding:.28rem .38rem;border:1px solid transparent;background:transparent;color:inherit;text-decoration:none;cursor:pointer;transition:background .15s ease,border-color .15s ease}.lang-btn:hover{background:#29abe21a}.lang-btn.active{background:#29abe22e;border-color:#29abe259}.live-badge{display:inline-flex;align-items:center;gap:.45rem;margin-bottom:.35rem;padding:.25rem .55rem;border:1px solid var(--color-border-bright);background:var(--glow);letter-spacing:.08em}.dot{width:.5rem;height:.5rem;border-radius:50%}.dot.on{background:var(--ok);box-shadow:0 0 8px var(--ok);animation:pulse-dot 1.6s ease infinite}.dot.off{background:var(--crit)}.clock{font-size:1rem;font-weight:500}.poll-meta{color:var(--muted);margin-top:.2rem}.load-peak{color:var(--accent)}.load-off{color:var(--muted)}.banner{margin-top:1rem;padding:.75rem 1rem;border:1px solid var(--crit);background:#e05a451a;font-size:.9rem}.kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.75rem;margin:1.25rem 0 .85rem;animation:fade-up .7s .08s ease both}.kpi{padding:.85rem .95rem;background:linear-gradient(180deg,var(--bg-2),var(--panel));border:1px solid var(--line);border-left:3px solid var(--accent-dim)}.kpi.alert{border-left-color:var(--crit)}.kpi-label{display:block;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}.kpi strong{display:block;margin:.35rem 0 .15rem;font-size:1.45rem;font-weight:600;font-variant-numeric:tabular-nums}.kpi-hint{font-size:.75rem;color:var(--muted)}.flow-hint{margin:0 0 1.35rem;color:var(--muted)}.section-divider{display:flex;align-items:center;gap:.85rem;margin:.25rem 0 1.35rem;color:var(--accent)}.section-divider:before,.section-divider:after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--color-border-bright),transparent)}.panel{margin-bottom:1.75rem;animation:fade-up .75s .12s ease both}.panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:.85rem}.panel-head h2{margin:0 0 .2rem;font-size:1.05rem;font-weight:600}.grid{display:grid;gap:.75rem}.grid.servers{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}.grid.llamas{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}.node-card{position:relative;padding:.85rem 2.4rem .85rem .85rem;background:linear-gradient(165deg,#0a1a2ef2,#020b18fa);border:1px solid var(--line);border-top:2px solid var(--accent-dim);transition:border-color .25s ease,transform .25s ease}.rack-icon{position:absolute;top:.65rem;right:.55rem;color:var(--accent);opacity:.55;pointer-events:none}.node-card.status-degraded .rack-icon{color:var(--warn)}.node-card.status-critical .rack-icon{color:var(--crit)}.node-card.status-maintenance .rack-icon{color:var(--maint)}.node-card:hover{border-color:var(--color-border-bright);transform:translateY(-1px)}.node-card.status-degraded{border-top-color:var(--warn)}.node-card.status-critical{border-top-color:var(--crit);background:linear-gradient(165deg,#30161273,#020b18fa)}.node-card.status-maintenance{border-top-color:var(--maint);opacity:.82}.node-card.llama{border-top-color:var(--accent)}.node-head{display:flex;justify-content:space-between;gap:.5rem;margin-bottom:.7rem}.node-head h3{margin:0;font-family:var(--font-mono);font-size:.82rem;font-weight:600;letter-spacing:-.01em}.title-btn{margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;text-align:left;cursor:pointer;text-decoration:underline;text-decoration-color:#29abe259;text-underline-offset:.18em}.title-btn:hover{color:var(--accent);text-decoration-color:var(--accent)}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:40;display:grid;place-items:center;padding:1.25rem;background:#020b18b8;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.modal-panel{width:min(520px,100%);max-height:min(80vh,640px);overflow:auto;padding:1.15rem 1.25rem 1.35rem;background:linear-gradient(165deg,#0a1a2e,#050f1f);border:1px solid var(--color-border-bright);box-shadow:0 18px 50px #00000073;animation:fade-up .25s ease both}.modal-head{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start;margin-bottom:.85rem}.modal-head h2{margin:.25rem 0 0;font-family:var(--font-mono);font-size:1.05rem;font-weight:600}.modal-zone{margin:0;color:var(--accent)}.modal-close{border:1px solid var(--line);background:transparent;color:var(--muted);width:2rem;height:2rem;font-size:1.25rem;line-height:1;cursor:pointer}.modal-close:hover{color:var(--text);border-color:var(--color-border-bright)}.modal-summary{margin:0 0 .85rem;color:var(--text);line-height:1.55;font-size:.92rem}.modal-sub{margin:0 0 .4rem;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}.modal-list{margin:0 0 1rem;padding-left:1.15rem;color:var(--text);line-height:1.5;font-size:.9rem}.modal-list li+li{margin-top:.3rem}.pill{align-self:flex-start;flex-shrink:0;padding:.15rem .4rem;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.06em;border:1px solid currentColor}.pill.status-healthy{color:var(--ok)}.pill.status-degraded{color:var(--warn)}.pill.status-critical{color:var(--crit)}.pill.status-maintenance{color:var(--maint)}.meters{display:grid;gap:.4rem;margin-bottom:.7rem}.meter-head{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:.68rem;color:var(--muted)}.meter-val{font-variant-numeric:tabular-nums}.meter-val.tone-ok,.tone-ok{color:var(--ok)}.meter-val.tone-warn,.tone-warn{color:var(--warn)}.meter-val.tone-crit,.tone-crit{color:var(--crit)}.meter-track{height:4px;background:#29abe214;overflow:hidden}.meter-fill{height:100%;transition:width .8s ease}.meter-fill.tone-ok{background:linear-gradient(90deg,var(--accent-dim),var(--ok))}.meter-fill.tone-warn{background:linear-gradient(90deg,#8a6a12,var(--warn))}.meter-fill.tone-crit{background:linear-gradient(90deg,#8a3228,var(--crit))}.stats{display:grid;grid-template-columns:1fr 1fr;gap:.35rem .6rem;margin:0}.stats dt{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}.stats dd{margin:.05rem 0 0;font-family:var(--font-mono);font-size:.72rem;font-variant-numeric:tabular-nums}.api-link{display:block;margin-top:.75rem;padding-top:.55rem;border-top:1px solid var(--line);font-family:var(--font-mono);font-size:.68rem;color:var(--accent);text-decoration:none;word-break:break-all;letter-spacing:.01em}.api-link:hover{color:var(--color-text);text-decoration:underline}.footer{margin-top:.5rem;padding-top:1rem;border-top:1px solid var(--line);text-align:center;color:var(--muted);font-size:.78rem;font-family:var(--font-mono)}.footer a{color:inherit;text-decoration:none}.footer a:hover{color:var(--color-text);text-decoration:underline}@keyframes fade-up{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media(max-width:1200px){.kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:800px){.shell{padding:1rem}.topbar{flex-direction:column;align-items:flex-start}.top-meta{text-align:left}.kpis{grid-template-columns:1fr 1fr}}@media(max-width:520px){.kpis{grid-template-columns:1fr}}
