:root{--bg: #0b0f17;--bg-2: #0f1520;--panel: #111827;--panel-2: #151d2c;--border: #1f2937;--border-2: #283548;--text: #e5e7eb;--text-2: #9ca3af;--text-3: #6b7280;--green: #34d399;--green-2: rgba(52, 211, 153, .12);--red: #f87171;--red-2: rgba(248, 113, 113, .12);--amber: #fbbf24;--amber-2: rgba(251, 191, 36, .12);--blue: #60a5fa;--blue-2: rgba(96, 165, 250, .12);--mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;--sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Helvetica, Arial, sans-serif;--radius: 12px;--shadow: 0 1px 0 rgba(255, 255, 255, .02) inset, 0 8px 30px rgba(0, 0, 0, .35)}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:radial-gradient(1200px 600px at 20% -10%,#121a2b 0%,var(--bg) 55%);color:var(--text);font-family:var(--sans);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased}a{color:var(--blue);text-decoration:none}button{font:inherit}.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}.num{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right}.pos{color:var(--green)}.neg{color:var(--red)}.muted{color:var(--text-2)}.dim{color:var(--text-3)}.small{font-size:12px}.app{display:grid;grid-template-rows:auto 1fr;min-height:100%}.topbar{display:flex;align-items:center;gap:20px;padding:12px 24px;border-bottom:1px solid var(--border);background:#0b0f17cc;backdrop-filter:blur(8px);position:sticky;top:0;z-index:10}.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.02em}.brand .logo{width:28px;height:28px;border-radius:8px;background:var(--panel-2);display:grid;place-items:center;border:1px solid var(--border-2)}.brand .mode{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--amber);background:var(--amber-2);padding:3px 8px;border-radius:999px;font-weight:600}.nav{display:flex;gap:4px;margin-left:12px}.nav button{background:transparent;border:1px solid transparent;color:var(--text-2);padding:7px 12px;border-radius:8px;cursor:pointer}.nav button:hover{color:var(--text);background:var(--panel)}.nav button.active{color:var(--text);background:var(--panel-2);border-color:var(--border-2)}.spacer{flex:1}.userbox{display:flex;align-items:center;gap:12px;color:var(--text-2);font-size:13px}.userbox button{background:transparent;border:1px solid var(--border-2);color:var(--text-2);padding:6px 10px;border-radius:8px;cursor:pointer}.userbox button:hover{color:var(--text);border-color:var(--text-3)}.main{padding:24px;max-width:1400px;width:100%;margin:0 auto;display:grid;gap:20px}.grid{display:grid;gap:16px}.kpis{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}.card{background:linear-gradient(180deg,var(--panel) 0%,var(--bg-2) 100%);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow)}.card h3{margin:0 0 12px;font-size:13px;font-weight:600;color:var(--text-2);letter-spacing:.04em;text-transform:uppercase;display:flex;align-items:center;gap:8px}.card h3 .right{margin-left:auto;font-weight:400;text-transform:none;letter-spacing:0;font-size:12px;color:var(--text-3)}.kpi .label{font-size:12px;color:var(--text-2);text-transform:uppercase;letter-spacing:.06em}.kpi .value{font-family:var(--mono);font-size:24px;font-weight:600;margin-top:6px;font-variant-numeric:tabular-nums}.kpi .sub{font-size:12px;color:var(--text-3);margin-top:4px;font-family:var(--mono)}.two{grid-template-columns:2fr 1fr}@media (max-width: 1000px){.two{grid-template-columns:1fr}}.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600;border:1px solid transparent;white-space:nowrap}.pill .dot{width:7px;height:7px;border-radius:50%;background:currentColor}.pill.ok{color:var(--green);background:var(--green-2);border-color:#34d39940}.pill.warn{color:var(--amber);background:var(--amber-2);border-color:#fbbf2440}.pill.bad{color:var(--red);background:var(--red-2);border-color:#f8717140}.pill.info{color:var(--blue);background:var(--blue-2);border-color:#60a5fa40}.pill.neutral{color:var(--text-2);background:var(--panel-2);border-color:var(--border-2)}.pill.ok .dot{box-shadow:0 0 0 3px #34d3992e;animation:pulse 2s infinite}@keyframes pulse{0%,to{box-shadow:0 0 0 3px #34d3992e}50%{box-shadow:0 0 0 6px #34d3990d}}.table-wrap{overflow-x:auto;margin:0 -18px -16px}table{width:100%;border-collapse:collapse;font-size:13px}th,td{padding:9px 12px;border-top:1px solid var(--border);white-space:nowrap}th{font-weight:600;color:var(--text-3);font-size:11px;text-transform:uppercase;letter-spacing:.06em;text-align:left;border-top:none}th.num,td.num{text-align:right}tbody tr:hover{background:#ffffff05}td:first-child,th:first-child{padding-left:18px}td:last-child,th:last-child{padding-right:18px}.sym{font-weight:600;font-family:var(--mono)}.empty{padding:28px;text-align:center;color:var(--text-3)}.bar{position:relative;height:6px;background:var(--border);border-radius:3px;overflow:hidden;width:80px;display:inline-block;vertical-align:middle;margin-right:8px}.bar>span{position:absolute;inset:0 auto 0 0;background:var(--green)}.bar.warn>span{background:var(--amber)}.bar.bad>span{background:var(--red)}.controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.btn{border:1px solid var(--border-2);background:var(--panel-2);color:var(--text);padding:9px 14px;border-radius:9px;cursor:pointer;font-weight:600;font-size:13px;display:inline-flex;gap:8px;align-items:center}.btn:hover{border-color:var(--text-3)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn.primary{background:var(--green);color:#052e1c;border-color:transparent}.btn.primary:hover{filter:brightness(1.05)}.btn.danger{color:var(--red);border-color:#f8717159;background:var(--red-2)}.btn.warn{color:var(--amber);border-color:#fbbf2459;background:var(--amber-2)}.btn.ghost{background:transparent}.note{font-size:12px;color:var(--text-3)}.login{min-height:100%;display:grid;place-items:center;padding:24px}.login .card{width:100%;max-width:400px;padding:28px}.login h1{font-size:20px;margin:4px 0 6px}.login p{margin:0 0 20px;color:var(--text-2)}.field{display:grid;gap:6px;margin-bottom:14px}.field label{font-size:12px;color:var(--text-2);text-transform:uppercase;letter-spacing:.06em}.field input{background:var(--bg);border:1px solid var(--border-2);color:var(--text);padding:11px 12px;border-radius:9px;font-size:15px;outline:none;width:100%}.field input:focus{border-color:var(--green);box-shadow:0 0 0 3px #34d39926}.field input.code{font-family:var(--mono);font-size:26px;letter-spacing:.4em;text-align:center}.error{color:var(--red);background:var(--red-2);border:1px solid rgba(248,113,113,.3);padding:9px 12px;border-radius:9px;font-size:13px;margin-bottom:14px}.success{color:var(--green);background:var(--green-2);border:1px solid rgba(52,211,153,.3);padding:9px 12px;border-radius:9px;font-size:13px;margin-bottom:14px}.login .btn{width:100%;justify-content:center;padding:12px}.linkbtn{background:none;border:none;color:var(--text-2);cursor:pointer;padding:0;font-size:13px}.linkbtn:hover{color:var(--text);text-decoration:underline}.events{display:grid;gap:2px;font-family:var(--mono);font-size:12.5px}.ev{display:grid;grid-template-columns:130px 60px 80px 1fr;gap:12px;padding:6px 8px;border-radius:6px;align-items:baseline}.ev:hover{background:#ffffff05}.ev .lvl{font-weight:700;text-transform:uppercase;font-size:11px}.ev.info .lvl{color:var(--text-3)}.ev.warn .lvl{color:var(--amber)}.ev.error .lvl{color:var(--red)}.ev .kind{color:var(--blue)}.ev .msg{white-space:pre-wrap;word-break:break-word}.banner{display:flex;gap:12px;align-items:center;padding:12px 16px;border-radius:var(--radius);border:1px solid;font-weight:500}.banner.bad{color:var(--red);background:var(--red-2);border-color:#f871714d}.banner.warn{color:var(--amber);background:var(--amber-2);border-color:#fbbf244d}.banner.info{color:var(--blue);background:var(--blue-2);border-color:#60a5fa4d}.footer{text-align:center;color:var(--text-3);font-size:12px;padding:12px 0 8px}.tooltip{background:var(--panel);border:1px solid var(--border-2);padding:8px 10px;border-radius:8px;font-size:12px;font-family:var(--mono)}.skeleton{height:14px;background:linear-gradient(90deg,var(--panel-2),var(--border),var(--panel-2));background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:4px}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}