*{box-sizing:border-box}body{margin:0;padding:0;background:#0f0f13;color:#e0e0e0;font-family:Space Grotesk,-apple-system,BlinkMacSystemFont,sans-serif;overflow:hidden}@keyframes pulse{0%,to{opacity:.3}50%{opacity:1}}@keyframes chartBarGrow{0%{height:4px}to{height:var(--bar-height, 60%)}}.app-root{display:flex;flex-direction:column;height:100vh;background:#0f0f13;position:relative}.background-grid{position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.12) 1px,transparent 1px);background-size:32px 32px;pointer-events:none;z-index:0}.page-container{flex:1;display:flex;overflow:hidden;position:relative;z-index:1}.main-content{flex:1;padding:18px 24px 24px;display:flex;flex-direction:column;gap:14px;overflow-y:auto}.alert-strip{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:#14141999;border:1px solid rgba(200,200,200,.12);border-radius:4px;padding:10px 14px;flex-shrink:0}.alert-strip-label{font-family:JetBrains Mono,monospace;font-size:10px;text-transform:uppercase;letter-spacing:1.5px;color:#707080;padding-right:12px;border-right:1px solid rgba(200,200,200,.12)}.alert-chip{display:inline-flex;align-items:center;gap:7px;font-family:JetBrains Mono,monospace;font-size:11px;letter-spacing:.4px;text-decoration:none;padding:5px 11px;border-radius:3px;transition:all .16s ease}.alert-chip .dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}.alert-chip.warning{background:#eab30814;border:1px solid rgba(234,179,8,.28);color:#eab308}.alert-chip.warning .dot{background:#eab308;box-shadow:0 0 6px #eab30899}.alert-chip.danger{background:#ef444414;border:1px solid rgba(239,68,68,.28);color:#ef4444}.alert-chip.danger .dot{background:#ef4444;box-shadow:0 0 6px #ef444499}.alert-chip.ok{background:#22c55e0f;border:1px solid rgba(34,197,94,.22);color:#22c55e}.alert-chip.ok .dot{background:#22c55e;box-shadow:0 0 6px #22c55e99}.alert-chip.warning:hover,.alert-chip.danger:hover{filter:brightness(1.25)}.content-grid{display:grid;grid-template-columns:210px 1fr 210px;gap:18px;flex:1;min-height:0}.visualization-center{position:relative;display:flex;align-items:center;justify-content:center;background:#14141966;border:1px solid rgba(200,200,200,.1);border-radius:4px;overflow:hidden;min-height:400px}.viz-legend{position:absolute;bottom:12px;left:14px;display:flex;gap:16px;font-family:JetBrains Mono,monospace;font-size:10px;letter-spacing:.8px;color:#808090;z-index:6;pointer-events:none}.viz-legend span{display:inline-flex;align-items:center;gap:6px}.legend-sq{width:9px;height:9px;border:1.5px solid #9aa0b0}.legend-ci{width:9px;height:9px;border-radius:50%;border:1.5px solid #9aa0b0}.side-panel{display:flex;flex-direction:column;gap:12px;overflow-y:auto}.panel-heading{font-family:JetBrains Mono,monospace;font-size:10px;text-transform:uppercase;letter-spacing:1.5px;color:#707080;margin:2px 0 -2px}.column-metric{position:relative;background:#14141999;border:1px solid rgba(200,200,200,.15);border-radius:3px;padding:12px;flex:1;min-height:130px;display:flex;flex-direction:column;overflow:hidden}.column-metric:before{content:"";position:absolute;top:0;left:0;width:2px;height:2px;border-right:1px solid rgba(200,200,200,.5);border-bottom:1px solid rgba(200,200,200,.5)}.column-metric:after{content:"";position:absolute;bottom:0;right:0;width:2px;height:2px;border-left:1px solid rgba(200,200,200,.5);border-top:1px solid rgba(200,200,200,.5)}.metric-label{font-family:JetBrains Mono,monospace;font-size:9px;text-transform:uppercase;letter-spacing:.8px;color:#808090;font-weight:600;display:flex;align-items:center;justify-content:space-between}.metric-value{font-size:17px;font-weight:700;color:#d0d0d0;font-family:Orbitron,monospace;margin-top:6px}.metric-sub{font-family:JetBrains Mono,monospace;font-size:9px;color:#707080;letter-spacing:.4px;margin-top:4px}.status-good{color:#22c55e}.status-warn{color:#eab308}.status-bad{color:#ef4444}.pill{font-family:JetBrains Mono,monospace;font-size:8px;letter-spacing:.5px;padding:2px 7px;border-radius:999px}.pill.good{background:#22c55e1a;color:#22c55e;border:1px solid rgba(34,197,94,.28)}.pill.warn{background:#eab3081a;color:#eab308;border:1px solid rgba(234,179,8,.28)}.chart-container{display:flex;align-items:flex-end;justify-content:space-around;gap:4px;height:56px;margin-top:auto}.chart-bar{flex:1;background:linear-gradient(180deg,#22c55e99,#22c55e33);border:1px solid rgba(34,197,94,.5);border-radius:2px;min-height:4px;animation:chartBarGrow 1.6s ease-out var(--bar-delay, 0s) forwards}.sync-indicator{display:flex;align-items:center;gap:5px;font-family:JetBrains Mono,monospace;font-size:8px;color:#808090;margin-top:8px;letter-spacing:.5px}.sync-dot{width:4px;height:4px;border-radius:50%;background:#22c55e;animation:pulse 1.5s ease-in-out infinite}.launcher{display:flex;gap:8px;flex-wrap:wrap;flex-shrink:0}.launcher a{font-family:JetBrains Mono,monospace;font-size:10px;text-transform:uppercase;letter-spacing:.8px;color:#9aa0b0;text-decoration:none;padding:6px 11px;background:#ffffff06;border:1px solid rgba(200,200,200,.12);border-radius:3px;transition:all .16s ease}.launcher a:hover{color:#00b8d4;border-color:#00b8d459;background:#00b8d40d}.launcher a .n{color:#d0d0d0;font-weight:700}.jnav{position:relative;z-index:200;display:flex;align-items:stretch;height:50px;background:#080809;border-bottom:1px solid rgba(255,255,255,.08);flex-shrink:0;-webkit-user-select:none;user-select:none}.jnav-logo{display:flex;align-items:center;padding:0 22px;font-family:Orbitron,sans-serif;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:4px;color:#ffffffbf;border-right:1px solid rgba(255,255,255,.08);flex-shrink:0;white-space:nowrap;text-decoration:none;transition:color .18s ease}.jnav-logo:hover{color:#fff}.jnav-logo img{height:18px;width:auto;display:block;filter:brightness(0) invert(1);opacity:.82}.jnav-groups{display:flex;align-items:stretch}.jnav-group{position:relative;display:flex;align-items:stretch}.jnav-group:after{content:"";position:absolute;top:100%;left:0;right:0;height:10px;z-index:299}.jnav-tab{display:flex;align-items:center;gap:5px;padding:0 18px;font-family:JetBrains Mono,monospace;font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.1em;color:#ffffff52;background:transparent;border:none;border-right:1px solid rgba(255,255,255,.07);border-bottom:2px solid transparent;cursor:pointer;transition:color .18s ease,border-bottom-color .18s ease,background .18s ease;white-space:nowrap;outline:none}.jnav-group:hover .jnav-tab{color:#ffffffd1;background:#ffffff06}.jnav-tab[data-active=true]{color:#00b8d4;border-bottom-color:#00b8d4;background:#00b8d40a}.jnav-chevron{width:8px;height:5px;opacity:.35;transition:transform .18s ease,opacity .18s ease;flex-shrink:0}.jnav-group:hover .jnav-chevron{opacity:.6;transform:rotate(180deg)}.jnav-dropdown{position:absolute;top:calc(100% + 6px);left:0;min-width:248px;background:#111113;border:1px solid rgba(255,255,255,.1);border-radius:6px;box-shadow:0 24px 56px #000c,0 2px 8px #0006;padding:6px;opacity:0;pointer-events:none;transform:translateY(-6px);transition:opacity .16s ease,transform .16s ease;z-index:300}.jnav-group:hover .jnav-dropdown{opacity:1;pointer-events:all;transform:translateY(0)}.jnav-item{display:flex;align-items:center;gap:12px;padding:7px;border-radius:4px;text-decoration:none;color:#ffffff94;border:1px solid transparent;transition:background .14s ease,border-color .14s ease,color .14s ease;margin-bottom:3px}.jnav-item:last-child{margin-bottom:0}.jnav-item:hover{background:#ffffff0a;color:#ffffffe0}.jnav-item[data-active=true]{background:#00b8d412;border-color:#00b8d447;color:#00b8d4}.jnav-icon{width:46px;height:46px;flex-shrink:0;background:#1a1a1d;border:1px solid rgba(255,255,255,.08);border-radius:4px;display:flex;align-items:center;justify-content:center;transition:border-color .14s ease}.jnav-item:hover .jnav-icon{border-color:#ffffff29}.jnav-item[data-active=true] .jnav-icon{border-color:#00b8d461}.jnav-label{font-family:Space Grotesk,sans-serif;font-size:13px;font-weight:500;line-height:1.2}.jnav-status{display:flex;align-items:center;gap:8px;padding:0 20px;margin-left:auto;font-family:JetBrains Mono,monospace;font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:#fff3;flex-shrink:0;border-left:1px solid rgba(255,255,255,.07)}.jnav-dot{width:6px;height:6px;border-radius:50%;background:#22c55e;box-shadow:0 0 6px #22c55e80;flex-shrink:0;animation:jnav-pulse 2s ease-in-out infinite}.jnav-dot.offline{background:#ef4444;box-shadow:0 0 6px #ef444480;animation:none}@keyframes jnav-pulse{0%,to{opacity:.7;box-shadow:0 0 4px #22c55e59}50%{opacity:1;box-shadow:0 0 10px #22c55ebf}}