:root {
  --bg: #07090f; --panel: #0e131c; --panel2: #121926; --line: rgba(148, 163, 184, .11); --text: #e6edf6; --muted: #8b98ab; --dim: #5d6a7e;
  --sol: #9945ff; --mint: #14f195; --cyan: #00c2ff; --amber: #f5b942; --red: #ff5d6c; --r: 16px;
  --grad: linear-gradient(120deg, var(--sol), var(--cyan) 55%, var(--mint));
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; }
html { color-scheme: dark; }
body { font: 14px/1.5 Inter, system-ui, sans-serif; color: var(--text); background: var(--bg); min-height: 100vh; overflow-x: hidden; font-feature-settings: "cv11", "ss01"; }
.mono { font-family: "JetBrains Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; }
a { color: inherit; text-decoration: none; }

/* ambient background: drifting aurora + fine grid */
.bgfx { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.bgfx::before { content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
  background-size: 44px 44px; mask-image: radial-gradient(ellipse at 50% 0%, #000 30%, transparent 75%); }
.blob { position: absolute; width: 46vw; height: 46vw; border-radius: 50%; filter: blur(90px); opacity: .16; animation: drift 26s ease-in-out infinite alternate; }
.blob.a { background: var(--sol); top: -18vw; left: -10vw; }
.blob.b { background: var(--cyan); top: -22vw; right: -14vw; animation-delay: -9s; opacity: .11; }
.blob.c { background: var(--mint); bottom: -26vw; left: 30vw; animation-delay: -16s; opacity: .07; }
@keyframes drift { to { transform: translate(6vw, 5vw) scale(1.12); } }

.wrap { max-width: 1320px; margin: 0 auto; padding: 22px 20px 60px; }
header.top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.logo { width: 38px; height: 38px; border-radius: 11px; background: var(--grad); display: grid; place-items: center; box-shadow: 0 6px 30px -6px rgba(153,69,255,.55); }
.title h1 { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.title p { font-size: 12px; color: var(--muted); }
.spacer { flex: 1; }
.badge { font: 600 11px/1 Inter; letter-spacing: .06em; padding: 7px 9px; border-radius: 8px; border: 1px solid; text-transform: uppercase; }
.badge.mode { color: var(--amber); border-color: rgba(245,185,66,.35); background: rgba(245,185,66,.08); }
.badge.live { color: var(--mint); border-color: rgba(20,241,149,.35); background: rgba(20,241,149,.08); }
.btn { font: 500 12px Inter; color: var(--muted); border: 1px solid var(--line); background: var(--panel); padding: 7px 11px; border-radius: 9px; cursor: pointer; transition: .2s; }
.btn:hover { color: var(--text); border-color: rgba(148,163,184,.3); }

/* status orb (radar) */
.orb { position: relative; width: 34px; height: 34px; }
.orb i { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--c, var(--mint)); opacity: 0; animation: ping 2.4s ease-out infinite; }
.orb i:nth-child(2) { animation-delay: .8s; } .orb i:nth-child(3) { animation-delay: 1.6s; }
.orb .sweep { position: absolute; inset: 4px; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 280deg, color-mix(in srgb, var(--c, var(--mint)) 60%, transparent) 360deg); animation: spin 2.2s linear infinite; }
.orb b { position: absolute; inset: 13px; border-radius: 50%; background: var(--c, var(--mint)); box-shadow: 0 0 14px var(--c, var(--mint)); }
.orb.idle { --c: var(--amber); } .orb.idle i { animation-duration: 4.5s; } .orb.idle .sweep { animation-duration: 6s; opacity: .5; }
.orb.down { --c: var(--red); } .orb.down i, .orb.down .sweep { animation: none; opacity: 0; }
@keyframes ping { 0% { transform: scale(.35); opacity: .9; } 100% { transform: scale(1); opacity: 0; } }
@keyframes spin { to { transform: rotate(360deg); } }

/* cards */
.grid { display: grid; gap: 14px; grid-template-columns: repeat(12, 1fr); }
.card { position: relative; grid-column: span 12; background: linear-gradient(180deg, rgba(255,255,255,.03), transparent 40%), var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; overflow: hidden; animation: rise .55s cubic-bezier(.16,1,.3,1) both; }
.card.g::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, var(--c, var(--sol)), transparent 45%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .6; pointer-events: none; }
.card h2 { font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.card h2 .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c, var(--sol)); box-shadow: 0 0 10px var(--c, var(--sol)); }
@media (min-width: 900px) { .s3 { grid-column: span 3; } .s4 { grid-column: span 4; } .s5 { grid-column: span 5; } .s6 { grid-column: span 6; } .s7 { grid-column: span 7; } .s8 { grid-column: span 8; }
.s12 { grid-column: span 12; } }
@media (min-width: 600px) and (max-width: 899px) { .s3 { grid-column: span 6; } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.grid > .card:nth-child(2) { animation-delay: .05s; } .grid > .card:nth-child(3) { animation-delay: .1s; } .grid > .card:nth-child(4) { animation-delay: .15s; }

.kpi .v { font: 700 30px/1.1 "JetBrains Mono", monospace; letter-spacing: -.02em; margin-top: 2px; }
.kpi .v.gradtext { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kpi .sub { color: var(--muted); font-size: 12px; margin-top: 6px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.chip { font-size: 11.5px; color: var(--muted); background: var(--panel2); border: 1px solid var(--line); padding: 4px 8px; border-radius: 7px; }
.chip b { color: var(--text); font-weight: 600; }

/* gate rings */
.rings { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ring { text-align: center; }
.ring svg { width: 96px; height: 96px; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 8; }
.ring .bg { stroke: rgba(148,163,184,.12); }
.ring .fg { stroke: url(#rg); stroke-linecap: round; transition: stroke-dashoffset 1.2s cubic-bezier(.16,1,.3,1); }
.ring .lbl { margin-top: -66px; height: 40px; font: 700 15px "JetBrains Mono"; }
.ring .cap { font-size: 11.5px; color: var(--muted); margin-top: 24px; }

/* bars chart */
.bars { display: flex; align-items: flex-end; gap: 3px; height: 120px; padding-top: 8px; }
.bars .col { flex: 1; display: flex; flex-direction: column-reverse; gap: 1px; height: 100%; justify-content: flex-start; position: relative; }
.bars .seg { border-radius: 3px 3px 1px 1px; transform-origin: bottom; animation: grow .8s cubic-bezier(.16,1,.3,1) both; }
.bars .k2 { background: linear-gradient(180deg, var(--cyan), rgba(0,194,255,.35)); }
.bars .k3 { background: linear-gradient(180deg, var(--mint), rgba(20,241,149,.35)); } .bars .k1 { background: linear-gradient(180deg, var(--sol), rgba(153,69,255,.35)); }
.bars .col:hover::after { content: attr(data-tip); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 11px; background: #000c; padding: 3px 6px; border-radius: 5px; }
.bars .empty { height: 2px; background: rgba(148,163,184,.12); border-radius: 2px; }
@keyframes grow { from { transform: scaleY(0); } }
.axis { display: flex; justify-content: space-between; color: var(--dim); font-size: 10.5px; margin-top: 6px; }
.legend { display: flex; gap: 12px; font-size: 11.5px; color: var(--muted); } .legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; }

/* tables / lists */
table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
th { text-align: left; color: var(--dim); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; padding: 0 8px 8px; border-bottom: 1px solid var(--line); }
td { padding: 9px 8px; border-bottom: 1px solid rgba(148,163,184,.06); white-space: nowrap; }
tr.new td { animation: flash 2s ease; }
@keyframes flash { 0% { background: rgba(20,241,149,.14); } 100% { background: transparent; } }
.scroll { overflow-x: auto; max-height: 420px; overflow-y: auto; scrollbar-width: thin; }
.tag { font: 600 10.5px Inter; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; }
.tag.K2 { color: var(--cyan); background: rgba(0,194,255,.12); }
.tag.K3 { color: var(--mint); background: rgba(20,241,149,.1); } .tag.K1 { color: #c59bff; background: rgba(153,69,255,.14); }
.tag.ok { color: var(--mint); background: rgba(20,241,149,.1); } .tag.bad { color: var(--red); background: rgba(255,93,108,.1); } .tag.warn { color: var(--amber); background: rgba(245,185,66,.1); }
.pos { color: var(--mint); } .neg { color: var(--red); } .muted { color: var(--muted); } .dim { color: var(--dim); }
.ext { color: var(--cyan); opacity: .8; } .ext:hover { opacity: 1; text-decoration: underline; }

/* radar rows with threshold bar */
.prog { height: 6px; border-radius: 6px; background: rgba(148,163,184,.12); overflow: hidden; min-width: 90px; }
.prog > div { height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--sol), var(--mint)); position: relative; overflow: hidden; transition: width .8s cubic-bezier(.16,1,.3,1); }
.prog > div::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent); transform: translateX(-100%); animation: shimmer 1.6s infinite; }
.prog.full > div { background: linear-gradient(90deg, var(--mint), var(--cyan)); box-shadow: 0 0 12px rgba(20,241,149,.6); }
@keyframes shimmer { to { transform: translateX(100%); } }

.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 12.5px; } .kv dt { color: var(--muted); } .kv dd { text-align: right; }
.empty-note { color: var(--dim); font-size: 12.5px; padding: 18px 4px; text-align: center; }
.addr { font: 500 12px "JetBrains Mono"; word-break: break-all; background: var(--panel2); border: 1px solid var(--line); padding: 8px 10px; border-radius: 9px; cursor: pointer; }
.addr:hover { border-color: var(--sol); }

.toasts { position: fixed; right: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 8px; z-index: 50; }
.toast { background: rgba(14,19,28,.92); backdrop-filter: blur(10px); border: 1px solid rgba(20,241,149,.35); border-radius: 12px; padding: 11px 14px; font-size: 12.5px; min-width: 260px; box-shadow: 0 10px 40px -10px #000; animation: toastIn .45s cubic-bezier(.16,1,.3,1) both; }
.toast.out { animation: toastOut .4s ease forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateX(30px); } }
.live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--mint); margin-right: 6px; animation: blink 1.2s infinite; }
@keyframes blink { 50% { opacity: .3; } }
footer { color: var(--dim); font-size: 11.5px; text-align: center; margin-top: 26px; }

/* login */
.login { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.login .box { width: min(380px, 100%); background: rgba(14,19,28,.8); backdrop-filter: blur(16px); border: 1px solid var(--line); border-radius: 20px; padding: 30px 26px; animation: rise .6s cubic-bezier(.16,1,.3,1) both; position: relative; }
.login .box::before { content: ""; position: absolute; inset: -1px; border-radius: 21px; padding: 1px; background: var(--grad); opacity: .5;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.login h1 { font-size: 20px; margin: 16px 0 4px; } .login p { color: var(--muted); font-size: 13px; margin-bottom: 20px; }
.login input { width: 100%; font: 500 14px "JetBrains Mono"; color: var(--text); background: var(--panel2); border: 1px solid var(--line); border-radius: 11px; padding: 12px 13px; outline: none; transition: .2s; }
.login input:focus { border-color: var(--sol); box-shadow: 0 0 0 4px rgba(153,69,255,.15); }
.login button { width: 100%; margin-top: 12px; font: 600 14px Inter; color: #05070b; background: var(--grad); border: 0; border-radius: 11px; padding: 12px; cursor: pointer; transition: .2s; background-size: 200% 100%; }
.login button:hover { background-position: 100% 0; filter: brightness(1.08); }
.login .err { color: var(--red); font-size: 12.5px; min-height: 18px; margin-top: 10px; }
.shake { animation: shake .4s; } @keyframes shake { 25% { transform: translateX(-7px); } 75% { transform: translateX(7px); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

.rec { padding: 10px 0 12px; border-top: 1px solid rgba(255,255,255,.06); }
.rec:first-child { border-top: 0; padding-top: 0; }
.rec h3 { margin: 0 0 8px; font-size: 13px; font-weight: 600; display: flex; gap: 8px; align-items: center; }
#cmp td { white-space: nowrap; }