@import"https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap";:root{--bg-base: #0a0e14;--bg-surface: rgba(20, 26, 38, .85);--accent-cyan: #22e6ff;--accent-pink: #ff4d8f;--accent-amber: #ffc93c;--accent-green: #2effb8;--text-primary: #e8edf5;--text-muted: #8b96a8;--text-dim: #6b7688;--font-display: "Space Grotesk", system-ui, sans-serif;--font-mono: "JetBrains Mono", ui-monospace, monospace;--sev: var(--accent-cyan)}*{box-sizing:border-box}body{margin:0;background:var(--bg-base);color:var(--text-primary);font-family:var(--font-display);-webkit-font-smoothing:antialiased}.app{position:relative;max-width:1180px;margin:0 auto;padding:28px;min-height:100vh}.mesh-bg{position:fixed;top:0;right:0;bottom:0;left:0;z-index:-1;pointer-events:none;overflow:hidden}.mesh-bg:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-image:radial-gradient(rgba(139,150,168,.08) 1px,transparent 1px);background-size:26px 26px}.orb{position:absolute;width:46vw;height:46vw;border-radius:50%;filter:blur(80px);opacity:.08}.orb-cyan{background:var(--accent-cyan);top:-8%;left:-6%;animation:orb-drift-a 20s ease-in-out infinite alternate}.orb-pink{background:var(--accent-pink);bottom:-12%;right:-8%;animation:orb-drift-b 24s ease-in-out infinite alternate}.orb-cyan2{background:var(--accent-cyan);top:35%;left:55%;width:34vw;height:34vw;animation:orb-drift-c 22s ease-in-out infinite alternate}@keyframes orb-drift-a{0%{transform:translateZ(0) scale(1)}to{transform:translate3d(12%,10%,0) scale(1.12)}}@keyframes orb-drift-b{0%{transform:translateZ(0) scale(1)}to{transform:translate3d(-14%,-8%,0) scale(1.08)}}@keyframes orb-drift-c{0%{transform:translateZ(0) scale(1)}to{transform:translate3d(-10%,12%,0) scale(.9)}}.app-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}.brand{display:flex;align-items:center;gap:18px}.controls{display:flex;align-items:center;flex-wrap:wrap;gap:14px}.btn-loadtest{font-family:var(--font-display);font-weight:600;font-size:13px;color:var(--bg-base);background:linear-gradient(90deg,var(--accent-cyan),var(--accent-green));border:none;border-radius:10px;padding:9px 18px;cursor:pointer;box-shadow:0 0 16px #22e6ff59;transition:transform .16s ease,box-shadow .16s ease,opacity .16s ease}.btn-loadtest:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 0 26px #22e6ff80}.btn-loadtest:disabled{opacity:.6;cursor:progress}.btn-loadtest.btn-stop{background:linear-gradient(90deg,var(--accent-pink),var(--accent-amber));box-shadow:0 0 16px #ff4d8f66}.btn-loadtest.btn-stop:hover:not(:disabled){box-shadow:0 0 26px #ff4d8f8c}.worker-slider{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-muted)}.worker-slider-label{text-transform:uppercase;letter-spacing:.8px;font-weight:600;color:var(--text-dim)}.worker-slider input[type=range]{width:110px;accent-color:var(--accent-cyan);cursor:pointer}.worker-slider-value{font-family:var(--font-mono);font-size:14px;color:var(--accent-cyan);min-width:22px;text-align:right}.pattern-select{font-family:var(--font-display);font-size:13px;font-weight:500;color:var(--text-primary);background:var(--bg-surface);border:1px solid rgba(139,150,168,.25);border-radius:10px;padding:8px 12px;cursor:pointer}.pattern-select:disabled{opacity:.6;cursor:not-allowed}.health-badge{font-family:var(--font-mono);font-size:12px;font-weight:600;text-transform:uppercase;padding:5px 14px;border-radius:999px;border:1px solid currentColor;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.health-idle{color:var(--text-muted);box-shadow:none}.health-healthy{color:var(--accent-green);box-shadow:0 0 14px color-mix(in srgb,var(--accent-green) 25%,transparent)}.health-warn{color:var(--accent-amber);box-shadow:0 0 14px color-mix(in srgb,var(--accent-amber) 25%,transparent)}.health-critical{color:var(--accent-pink);box-shadow:0 0 14px color-mix(in srgb,var(--accent-pink) 30%,transparent)}.app-title{margin:0;font-size:26px;font-weight:700;letter-spacing:.5px;background:linear-gradient(90deg,var(--accent-cyan),var(--accent-green));-webkit-background-clip:text;background-clip:text;color:transparent}.status-badge{font-family:var(--font-mono);font-size:12px;font-weight:600;text-transform:uppercase;padding:5px 14px;border-radius:999px;border:1px solid rgba(139,150,168,.3);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.status-connected{color:var(--accent-green);border-color:#00e6a880;box-shadow:0 0 16px #00e6a840}.status-connecting{color:var(--accent-amber);border-color:#ffb02080}.status-disconnected{color:var(--accent-pink);border-color:#ff3d8180;box-shadow:0 0 16px #ff3d8140}.heartbeat{width:132px;height:40px;padding:2px 8px;border:2px solid transparent;border-radius:10px;background:linear-gradient(var(--bg-surface),var(--bg-surface)) padding-box,linear-gradient(90deg,var(--accent-cyan),var(--accent-pink)) border-box;--beat-color: var(--accent-green);--beat-duration: 2.4s}.heartbeat.sev-warn{--beat-color: var(--accent-amber)}.heartbeat.sev-critical{--beat-color: var(--accent-pink)}.ecg{width:100%;height:100%;overflow:visible}.ecg-trace{fill:none;stroke:#8b96a826;stroke-width:1.5}.ecg-path{fill:none;stroke:var(--beat-color);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:420;filter:drop-shadow(0 0 4px var(--beat-color));animation:ecg-sweep var(--beat-duration) linear infinite}@keyframes ecg-sweep{0%{stroke-dashoffset:420}to{stroke-dashoffset:0}}.beat-idle{--beat-duration: 3.6s}.beat-idle .ecg-path{opacity:.55}.beat-low{--beat-duration: 2.2s}.beat-med{--beat-duration: 1.3s}.beat-high{--beat-duration: .7s}.beat-high .ecg-path{stroke-width:2.5;filter:drop-shadow(0 0 7px var(--beat-color))}.app-main{display:flex;flex-direction:column;gap:22px}.panel{background:var(--bg-surface);border:1px solid rgba(139,150,168,.12);border-radius:16px;padding:18px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 8px 30px #00000059}.panel-title{margin:0 0 14px;font-size:13px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px}.cards-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.card{display:flex;flex-direction:column;gap:10px;border-color:color-mix(in srgb,var(--sev) 35%,transparent);box-shadow:0 8px 30px #00000059,0 0 18px color-mix(in srgb,var(--sev) 18%,transparent);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}.card:hover{transform:translateY(-4px);box-shadow:0 16px 40px #00000073,0 0 26px color-mix(in srgb,var(--sev) 30%,transparent)}.card-label{font-size:11px;font-weight:600;color:var(--text-dim);text-transform:uppercase;letter-spacing:1.2px}.card-value{font-family:var(--font-mono);font-size:36px;font-weight:600;color:var(--card-accent, var(--accent-cyan));text-shadow:0 0 16px color-mix(in srgb,var(--card-accent, var(--accent-cyan)) 55%,transparent)}.accent-cyan{--card-accent: var(--accent-cyan)}.accent-amber{--card-accent: var(--accent-amber)}.accent-green{--card-accent: var(--accent-green)}.accent-pink{--card-accent: var(--accent-pink)}.sev-healthy{--sev: var(--accent-cyan)}.sev-warn{--sev: var(--accent-amber)}.sev-critical{--sev: var(--accent-pink)}.accent-pink.sev-warn .card-value{color:var(--accent-amber)}.accent-pink.sev-critical .card-value{color:var(--accent-pink)}.chart-panel{width:100%}.chart-panel .recharts-text{font-family:var(--font-mono)}.log-panel{max-height:300px;display:flex;flex-direction:column}.log-list{list-style:none;margin:0;padding:0;overflow-y:auto}.log-item{display:flex;gap:12px;padding:7px 12px;font-size:13px;border-left:3px solid transparent;border-bottom:1px solid rgba(139,150,168,.08);border-radius:4px}.log-ts{font-family:var(--font-mono);color:var(--text-muted);flex-shrink:0;font-variant-numeric:tabular-nums}.log-empty{color:var(--text-muted);font-size:13px;padding:7px 4px}.log-info{border-left-color:var(--accent-cyan)}.log-info .log-message{color:var(--accent-cyan)}.log-warn{border-left-color:var(--accent-amber)}.log-warn .log-message{color:var(--accent-amber)}.log-error{border-left-color:var(--accent-pink)}.log-error .log-message{color:var(--accent-pink)}.worker-grid{display:flex;flex-wrap:wrap;align-items:center;gap:12px}.worker{width:26px;height:26px;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:#8b96a82e;transition:background .22s ease,box-shadow .22s ease}.worker.busy{background:var(--accent-cyan);box-shadow:0 0 12px var(--accent-cyan);animation:worker-pulse 1.2s ease-in-out infinite}@keyframes worker-pulse{0%,to{opacity:.82}50%{opacity:1}}.worker-count{margin-left:8px;font-family:var(--font-mono);font-size:13px;color:var(--text-muted)}.sparkline{display:flex;align-items:center;gap:10px}.sparkline-svg{overflow:visible}.sparkline-line{fill:none;stroke:var(--accent-cyan);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 4px var(--accent-cyan))}.sparkline-value{font-family:var(--font-mono);font-size:13px;color:var(--accent-cyan);white-space:nowrap}.alert-banner{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:18px;padding:11px 18px;border-radius:12px;font-weight:600;font-size:14px;color:var(--accent-amber);background:#ff4d8f14;border:1px solid rgba(255,77,143,.4);box-shadow:0 0 24px #ff4d8f33;animation:alert-slide .32s ease}.alert-dot{width:9px;height:9px;border-radius:50%;background:var(--accent-pink);box-shadow:0 0 10px var(--accent-pink);animation:alert-blink 1s ease-in-out infinite}@keyframes alert-slide{0%{transform:translateY(-12px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes alert-blink{0%,to{opacity:.4}50%{opacity:1}}.flow-track{display:flex;align-items:center;justify-content:space-between}.flow-segment{display:flex;align-items:center;flex:1}.flow-segment:last-child{flex:0 0 auto}.flow-node{font-family:var(--font-display);font-weight:600;font-size:13px;color:var(--text-primary);padding:10px 16px;border-radius:10px;border:1px solid rgba(34,230,255,.3);background:#22e6ff0f;white-space:nowrap}.flow-connector{position:relative;flex:1;height:2px;margin:0 10px;background:linear-gradient(90deg,#22e6ff59,#ff4d8f59);border-radius:2px}.flow-particle{position:absolute;top:50%;left:0;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--accent-cyan);box-shadow:0 0 8px var(--accent-cyan);opacity:0;animation:flow-move var(--flow-duration, 2.4s) linear infinite}.flow-particle:nth-child(2){animation-delay:calc(var(--flow-duration, 2.4s) * .25)}.flow-particle:nth-child(3){animation-delay:calc(var(--flow-duration, 2.4s) * .5)}.flow-particle:nth-child(4){animation-delay:calc(var(--flow-duration, 2.4s) * .75)}@keyframes flow-move{0%{left:0;opacity:0}15%{opacity:1}85%{opacity:1}to{left:100%;opacity:0}}.flow-idle{--flow-duration: 4s}.flow-idle .flow-particle{opacity:0;animation:none}.flow-low{--flow-duration: 2.6s}.flow-med{--flow-duration: 1.5s}.flow-high{--flow-duration: .8s}.history-empty{margin:0;font-size:13px;color:var(--text-muted)}.history-table{width:100%;border-collapse:collapse;font-size:13px}.history-table th{text-align:left;font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.8px;color:var(--text-dim);padding:6px 10px;border-bottom:1px solid rgba(139,150,168,.15)}.history-table td{font-family:var(--font-mono);color:var(--text-primary);padding:8px 10px;border-bottom:1px solid rgba(139,150,168,.08)}@media (max-width: 720px){.cards-grid{grid-template-columns:repeat(2,1fr)}.app-header{flex-direction:column;align-items:flex-start;gap:14px}}@media (prefers-reduced-motion: reduce){.mesh-bg{animation:none}.ecg-path{animation:none;stroke-dasharray:none}.card{transition:none}.card:hover{transform:none}.worker.busy,.alert-banner,.alert-dot{animation:none}.btn-loadtest{transition:none}.btn-loadtest:hover:not(:disabled){transform:none}.orb{animation:none}.flow-particle{animation:none;opacity:0}}