/* n:theme.css:001 */

:root {
  /* n:theme.css:002 */
  --background:#eef2f7;
  --surface:#ffffff;
  --surface-raised:#e3ebf3;
  --rule:#cddae6;
  --ink:#0b1a24;
  --muted:#5b7284;

  /* n:theme.css:003 */
  --hud:#0d7ea6;
  --hud-soft:rgba(13,126,166,.26);
  --line:#0d7ea6;
  --accent:#ddf2fb;
  --accent-ink:#065a79;
  --trace:#0b7ea3;
  --wash:linear-gradient(180deg, rgba(255,255,255,.94), rgba(226,240,249,.78));
  --edge:rgba(13,126,166,.30);
  --glow-s:0 1px 2px rgba(11,26,36,.05), 0 6px 18px rgba(9,60,82,.08);
  --glow-m:0 2px 6px rgba(11,26,36,.06), 0 14px 38px rgba(9,60,82,.12);
  --glow-hot:0 0 0 1px rgba(13,126,166,.45), 0 0 14px rgba(13,126,166,.28);
  --grid:rgba(11,26,36,.06);
  --reticle:rgba(13,126,166,.11);
  --scan:rgba(13,126,166,.00);
  --shadow:var(--glow-s);

  /* n:theme.css:004 */
  --warn:#a32018;
  --warn-soft:#fdeceb;
  --ok:#0f7b52;

  --tick:10px;             /* n:theme.css:005 */
  --pane-r:12px;           /* n:theme.css:006 */
}

:root[data-theme="dark"] {
  /* n:theme.css:007 */
  --background:#000000;
  --surface:#0e0e0e;
  --surface-raised:#181818;
  --rule:#242424;
  --ink:#e7f4fb;
  --muted:#8ba4b2;

  --hud:#3fd2ff;
  --hud-soft:rgba(63,210,255,.22);
  --line:rgba(63,210,255,.38);
  --accent:rgba(63,210,255,.14);
  --accent-ink:#8ce6ff;
  --trace:#4ddcff;
  --wash:linear-gradient(180deg, rgba(63,210,255,.055), rgba(63,210,255,.012));
  --edge:rgba(63,210,255,.26);
  --glow-s:0 0 0 1px rgba(63,210,255,.10), 0 0 16px rgba(63,210,255,.06);
  --glow-m:0 0 0 1px rgba(63,210,255,.16), 0 0 38px rgba(63,210,255,.10);
  --glow-hot:0 0 0 1px rgba(63,210,255,.55), 0 0 20px rgba(63,210,255,.35);
  --grid:rgba(63,210,255,.08);
  --reticle:rgba(63,210,255,.06);
  --scan:rgba(63,210,255,.035);
  --shadow:var(--glow-s);

  --warn:#ff6b6b;
  --warn-soft:rgba(255,107,107,.10);
  --ok:#3ad6a2;
}

* { box-sizing:border-box; }
html, body { height:100%; }
body {
  margin:0;
  background:var(--background);
  color:var(--ink);
  font:14px/1.55 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  /* n:theme.css:008 */
  -webkit-font-smoothing:antialiased;
}
button, input, textarea, select { font:inherit; color:inherit; }
a { color:var(--accent-ink); }
.mono { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
        font-variant-numeric:tabular-nums; }
.spacer { flex:1; }

/* n:theme.css:009 */
.lbl, .card > header h2, #side h3, th, #tabs button, .card > header .sub {
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
}

/* n:theme.css:010 */
#top {
  height:54px; display:flex; align-items:center; gap:12px; padding:0 16px;
  background:
    linear-gradient(180deg, var(--surface-raised), transparent 140%),
    var(--background);
  border-bottom:1px solid var(--rule);
  position:relative; z-index:60;
}
/* n:theme.css:011 */
#top::after {
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:linear-gradient(90deg, var(--hud), transparent 38%, transparent 62%, var(--hud-soft));
  opacity:.75; pointer-events:none;
}
#top h1 {
  font-size:13px; margin:0; letter-spacing:.34em; text-transform:uppercase;
  font-weight:600; color:var(--ink);
}
.dot {
  width:8px; height:8px; border-radius:50%; background:var(--muted); flex:none;
  position:relative;
}
.dot.live { background:var(--hud); box-shadow:0 0 0 3px var(--hud-soft), var(--glow-hot); }
.dot.live::after {
  content:""; position:absolute; inset:-5px; border-radius:50%;
  border:1px solid var(--hud); opacity:.5; animation:ping 2.4s ease-out infinite;
}
.dot.bad { background:var(--warn); box-shadow:0 0 0 3px var(--warn-soft); }
.dot.busy { background:var(--muted); animation:blink 1s infinite; }
@keyframes ping { 0% { transform:scale(.8); opacity:.6; }
                  100% { transform:scale(1.9); opacity:0; } }
@keyframes blink { 50% { opacity:.25; } }

.chip {
  font-size:11px; padding:3px 10px; border-radius:999px; white-space:nowrap;
  border:1px solid var(--rule); background:var(--surface); color:var(--muted);
  letter-spacing:.06em;
}
.chip b { color:var(--ink); font-weight:600;
          font-family:ui-monospace,Menlo,Consolas,monospace;
          font-variant-numeric:tabular-nums; }
select.chip { max-width:280px; cursor:pointer; padding:3px 8px; }
.iconbtn {
  width:30px; height:30px; display:grid; place-items:center; cursor:pointer;
  border:1px solid var(--rule); border-radius:8px; background:var(--surface);
  color:var(--muted); transition:box-shadow .15s, color .15s, border-color .15s;
}
.iconbtn:hover { color:var(--accent-ink); border-color:var(--edge); box-shadow:var(--glow-hot); }
#nav { display:flex; gap:6px; }
#nav a {
  font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  padding:4px 11px; border-radius:999px; text-decoration:none;
  border:1px solid var(--rule); color:var(--muted); background:transparent;
  transition:color .15s, border-color .15s, box-shadow .15s;
}
#nav a:hover { color:var(--ink); border-color:var(--edge); }
#nav a.here { border-color:var(--edge); color:var(--accent-ink);
              background:var(--accent); box-shadow:var(--glow-hot); }

/* n:theme.css:012 */
.card {
  position:relative;
  background:var(--wash), var(--surface);
  border:1px solid var(--rule);
  border-radius:var(--pane-r);
  box-shadow:var(--glow-m);
}
.card::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  border-radius:inherit; opacity:.75;
  background:
    linear-gradient(var(--hud),var(--hud)) 0 0/var(--tick) 1px no-repeat,
    linear-gradient(var(--hud),var(--hud)) 0 0/1px var(--tick) no-repeat,
    linear-gradient(var(--hud),var(--hud)) 100% 0/var(--tick) 1px no-repeat,
    linear-gradient(var(--hud),var(--hud)) 100% 0/1px var(--tick) no-repeat,
    linear-gradient(var(--hud),var(--hud)) 0 100%/var(--tick) 1px no-repeat,
    linear-gradient(var(--hud),var(--hud)) 0 100%/1px var(--tick) no-repeat,
    linear-gradient(var(--hud),var(--hud)) 100% 100%/var(--tick) 1px no-repeat,
    linear-gradient(var(--hud),var(--hud)) 100% 100%/1px var(--tick) no-repeat;
}
.card > header {
  display:flex; align-items:center; gap:8px; padding:0 10px;
  border-bottom:1px solid var(--rule);
  background:linear-gradient(180deg, var(--surface-raised), transparent);
}
.card > header h2 { margin:0; color:var(--muted); font-weight:600; }
.card > header .sub { color:var(--muted); letter-spacing:.08em; opacity:.85; }

/* n:theme.css:013 */
.btn {
  padding:9px 15px; border:1px solid var(--rule); border-radius:9px;
  background:var(--surface); cursor:pointer; letter-spacing:.06em;
  transition:box-shadow .15s, border-color .15s, color .15s, background .15s;
}
.btn:hover { border-color:var(--edge); box-shadow:var(--glow-hot); color:var(--accent-ink); }
.btn.primary {
  background:var(--accent); color:var(--accent-ink); font-weight:600;
  border-color:var(--edge); box-shadow:var(--glow-hot);
}
.btn.danger { border-color:var(--warn); color:var(--warn); background:transparent; }
.btn.danger:hover { background:var(--warn-soft); box-shadow:none; }
.btn:disabled { opacity:.45; cursor:default; box-shadow:none; }
.mini {
  font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  padding:4px 9px; border-radius:999px; cursor:pointer;
  border:1px solid var(--rule); background:transparent; color:var(--muted);
  transition:color .15s, border-color .15s, background .15s;
}
.mini:hover { color:var(--ink); border-color:var(--edge); background:var(--surface-raised); }
.mini.on { border-color:var(--edge); color:var(--accent-ink); background:var(--accent); }
.mini:disabled { opacity:.4; cursor:default; }
:focus-visible { outline:2px solid var(--hud); outline-offset:2px; }

input[type=text], input[type=number], textarea, select:not(.chip) {
  background:var(--surface); border:1px solid var(--rule); border-radius:9px;
  padding:8px 11px; color:var(--ink);
}
input[type=text]:focus, textarea:focus, select:focus {
  outline:none; border-color:var(--edge); box-shadow:var(--glow-hot);
}
input[type=range] { width:100%; accent-color:var(--hud); }

/* n:theme.css:014 */
.kv {
  display:flex; justify-content:space-between; gap:10px; font-size:12px;
  padding:5px 0; border-bottom:1px solid var(--rule); color:var(--muted);
}
.kv span:last-child { color:var(--ink);
  font-family:ui-monospace,Menlo,Consolas,monospace; font-variant-numeric:tabular-nums; }
.foot { font-size:11px; color:var(--muted); margin-top:10px;
        border-top:1px solid var(--rule); padding-top:8px; }
.empty { color:var(--muted); font-size:12px; padding:10px 0; }
.pill2 {
  display:inline-block; font-size:10px; padding:2px 8px; border-radius:999px;
  border:1px solid var(--rule); color:var(--muted); letter-spacing:.1em;
  text-transform:uppercase;
}
.note {
  border-left:2px solid var(--hud); background:var(--surface-raised);
  padding:10px 14px; border-radius:0 10px 10px 0; margin:10px 0; font-size:13px;
}
.note.warn { border-left-color:var(--warn); background:var(--warn-soft); color:var(--warn); }
.note b { color:var(--ink); }
.note.warn b { color:inherit; }
.out {
  background:var(--background); border:1px solid var(--rule); border-radius:10px;
  padding:12px; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12px;
  min-height:56px; word-break:break-all; white-space:pre-wrap;
}
.metric {
  border:1px solid var(--rule); border-radius:12px; background:var(--background);
  padding:14px; text-align:center; position:relative; box-shadow:var(--glow-s);
}
.metric .v { font-size:26px; font-weight:700; line-height:1.15;
             font-family:ui-monospace,Menlo,Consolas,monospace;
             font-variant-numeric:tabular-nums; }
.metric .l { margin-top:5px; font-size:10px; color:var(--muted);
             letter-spacing:.12em; text-transform:uppercase; }

table { width:100%; border-collapse:collapse; font-size:12px; }
th, td { text-align:left; padding:6px 8px; border-bottom:1px solid var(--rule); }
th { color:var(--muted); font-weight:600; }
td.num { text-align:right; font-variant-numeric:tabular-nums;
         font-family:ui-monospace,Menlo,Consolas,monospace; }
tr.fail td { color:var(--warn); }
tr.pass td.verdict { color:var(--ok); font-weight:600; }

/* n:theme.css:015 */
dialog {
  border:1px solid var(--edge); border-radius:var(--pane-r); padding:0;
  background:var(--wash), var(--surface); color:var(--ink);
  max-width:min(940px,94vw); width:100%; box-shadow:var(--glow-m);
}
dialog::backdrop { background:rgba(0,0,0,.55); }
dialog header {
  display:flex; align-items:center; gap:10px; padding:12px 14px;
  border-bottom:1px solid var(--rule);
  background:linear-gradient(180deg, var(--surface-raised), transparent);
}
dialog header h2 { margin:0; font-size:13px; letter-spacing:.16em;
                   text-transform:uppercase; }
dialog .dbody { padding:14px; max-height:70vh; overflow:auto; }

/* n:theme.css:016 */
@media (prefers-reduced-motion: reduce) {
  /* n:theme.css:017 */
  *, *::before, *::after { animation:none !important; transition:none !important; }
  .dot.live::after { display:none; }
}