/* ============================================================
   VIGIL — by Kneuralabs
   Scandinavian ultra-minimalist · structural governance aesthetic.
   Palette + type derived from Kneuralabs Brand Guidelines v2.0.
   Royal Authority Blue · Precision Red · Structural Silver · Deep Navy
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap');

:root{
  /* ---- brand anchors (exact hex from guidelines) ---- */
  --kn-blue:    #1C5CAA;   /* Royal Authority Blue */
  --kn-red:     #C8281E;   /* Precision Red */
  --kn-silver:  #D0D2D6;   /* Structural Silver */
  --kn-navy:    #0D2E5A;   /* Deep Navy */
  --kn-sky:     #4A8BC8;   /* Sky Blue */
  --kn-canvas:  #F7F8FA;   /* Canvas White */
  --kn-ink:     #1A1D23;   /* Ink Charcoal */
  --kn-slate:   #6B7280;   /* Slate Gray */
  --kn-frost:   #E0E4EA;   /* Frost Gray */

  /* ---- LIGHT (default) — Canvas White, airy, structural ---- */
  --bg:        var(--kn-canvas);
  --bg-2:      #EDF0F4;
  --surface:   #FCFDFE;
  --card:      #FFFFFE;
  --card-2:    #F4F6F9;
  --inset:     #F1F4F7;
  --border:    var(--kn-frost);
  --border-soft:#ECEEF2;

  --text:      var(--kn-ink);
  --text-dim:  #3C424C;
  --muted:     var(--kn-slate);
  --faint:     #A2A9B4;

  /* ---- signal palette — restrained, governance-grade ---- */
  --ok:        #2E7D5B;
  --warn:      #A66A12;
  --crit:      var(--kn-red);
  --info:      var(--kn-sky);

  /* brand accent (recolorable via Tweaks) */
  --brand:     var(--kn-blue);
  --brand-ink: #FFFFFF;
  --brand-soft:color-mix(in oklab, var(--brand) 9%, transparent);
  --brand-line:color-mix(in oklab, var(--brand) 26%, transparent);

  --ok-soft:   color-mix(in oklab, var(--ok) 10%, transparent);
  --warn-soft: color-mix(in oklab, var(--warn) 12%, transparent);
  --crit-soft: color-mix(in oklab, var(--crit) 10%, transparent);
  --info-soft: color-mix(in oklab, var(--info) 12%, transparent);
  --ok-line:   color-mix(in oklab, var(--ok) 32%, transparent);
  --warn-line: color-mix(in oklab, var(--warn) 34%, transparent);
  --crit-line: color-mix(in oklab, var(--crit) 34%, transparent);
  --info-line: color-mix(in oklab, var(--info) 34%, transparent);

  /* terminal surface (constant on both themes — institutional console) */
  --term-bg:   #0A1F3C;
  --term-ink:  #CFE0F2;
  --term-dim:  #6F8CB0;

  --font-ui:'Inter',system-ui,-apple-system,sans-serif;
  --font-display:'Inter',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;

  /* sharp, precise radii — Scandinavian minimalism */
  --r-sm:3px; --r:5px; --r-lg:7px; --r-xl:10px;
  --pad:24px;
  --shadow:none;
  --shadow-hover:0 6px 22px -14px color-mix(in oklab, var(--kn-navy) 60%, transparent);
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  background:var(--bg);color:var(--text);font-family:var(--font-ui);
  min-height:100vh;overflow-x:hidden;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-variant-numeric:tabular-nums;
}
/* one quiet structural element: a faint hairline grid, governance not neon */
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(color-mix(in oklab,var(--kn-blue) 4%,transparent) 1px,transparent 1px),
    linear-gradient(90deg,color-mix(in oklab,var(--kn-blue) 4%,transparent) 1px,transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(120% 100% at 80% 0%,#000,transparent 75%);
          mask-image:radial-gradient(120% 100% at 80% 0%,#000,transparent 75%);
  opacity:.5;
}

.wrap{position:relative;z-index:1;max-width:1280px;margin:0 auto;padding:40px 32px 56px;
  padding-left:max(32px,env(safe-area-inset-left));padding-right:max(32px,env(safe-area-inset-right))}

/* ============ HEADER ============ */
header{
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding:0 0 22px;margin-bottom:32px;border-bottom:1px solid var(--border);
}
.logo{display:flex;align-items:center;gap:15px}

/* KN logo mark + radar scope overlay */
.kn-mark{width:50px;height:50px;flex-shrink:0;position:relative;border-radius:9px;overflow:hidden;
  box-shadow:0 1px 3px color-mix(in oklab,var(--kn-navy) 32%,transparent),
             0 0 0 1px color-mix(in oklab,var(--kn-navy) 12%,transparent)}
.kn-logo{display:block;width:100%;height:100%;object-fit:cover}
.radar-overlay{position:absolute;inset:0;border-radius:inherit;pointer-events:none}
/* circular scope vignette so the overlay reads as a radar dish on the mark */
.radar-overlay::after{content:'';position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(circle at 50% 50%, transparent 50%, color-mix(in oklab,var(--kn-navy) 34%,transparent) 100%)}
/* range rings + crosshair */
.radar-rings{position:absolute;inset:10%;border-radius:50%;
  border:1px solid rgba(255,255,255,.32)}
.radar-rings::before{content:'';position:absolute;inset:24%;border-radius:50%;
  border:1px solid rgba(255,255,255,.22)}
.radar-rings::after{content:'';position:absolute;inset:0;
  background:
    linear-gradient(rgba(255,255,255,.16),rgba(255,255,255,.16)) center/100% 1px no-repeat,
    linear-gradient(rgba(255,255,255,.16),rgba(255,255,255,.16)) center/1px 100% no-repeat}
/* rotating sweep beam — leading edge bright, trailing fade; screen-blends over the mark */
.radar-sweep{position:absolute;inset:0;border-radius:50%;mix-blend-mode:screen;
  -webkit-mask-image:radial-gradient(circle at 50% 50%, #000 50%, transparent 51%);
          mask-image:radial-gradient(circle at 50% 50%, #000 50%, transparent 51%);
  background:conic-gradient(from 0deg,
    rgba(170,205,240,0) 0deg,
    rgba(170,205,240,.04) 230deg,
    rgba(200,222,248,.16) 300deg,
    rgba(235,244,255,.46) 348deg,
    rgba(255,255,255,.82) 359deg,
    rgba(255,255,255,0) 360deg);
  animation:radar 3s linear infinite}
/* blip that lights up as the beam passes a contact */
.radar-blip{position:absolute;width:5px;height:5px;border-radius:50%;
  top:31%;left:63%;background:#fff;
  box-shadow:0 0 7px 2px rgba(220,235,255,.75);opacity:0;
  animation:radarBlip 3s ease-out infinite}
@keyframes radar{to{transform:rotate(360deg)}}
@keyframes radarBlip{0%,2%{opacity:0;transform:scale(.3)}9%{opacity:1;transform:scale(1)}46%,100%{opacity:0;transform:scale(.5)}}

.logo .wordmark{display:flex;flex-direction:column;gap:4px}
.logo h1{font-family:var(--font-display);font-size:1.55rem;font-weight:700;letter-spacing:-.03em;line-height:1;color:var(--text)}
.logo h1 .tm{font-size:.4em;font-weight:600;vertical-align:super;color:var(--muted);margin-left:2px}
.logo .tag{font-size:.62rem;color:var(--muted);letter-spacing:.16em;
  font-family:var(--font-mono);text-transform:uppercase;font-weight:700;display:flex;align-items:center}
.tag-pip{width:5px;height:5px;border-radius:50%;background:var(--ok);display:inline-block;
  margin-right:8px;flex-shrink:0;animation:blink 2.6s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}

.hdr-right{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.live-badge{display:flex;align-items:center;gap:7px;font-size:.62rem;color:var(--ok);font-weight:700;
  letter-spacing:.14em;font-family:var(--font-mono);padding:5px 11px;border-radius:var(--r-sm);
  background:var(--ok-soft);border:1px solid var(--ok-line)}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--ok);position:relative}
.live-dot::after{content:'';position:absolute;inset:-4px;border-radius:50%;background:var(--ok);
  opacity:.3;animation:ping 1.8s cubic-bezier(0,0,.2,1) infinite}
@keyframes ping{0%{transform:scale(.6);opacity:.5}100%{transform:scale(2.4);opacity:0}}
.clock{font-size:.7rem;color:var(--text-dim);font-family:var(--font-mono);font-weight:600;
  font-variant-numeric:tabular-nums;letter-spacing:.01em}

/* theme toggle */
.theme-toggle{width:38px;height:38px;display:grid;place-items:center;cursor:pointer;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r);color:var(--text-dim);
  transition:border-color .2s,color .2s,background .2s}
.theme-toggle:hover{border-color:var(--brand);color:var(--brand)}
.theme-toggle svg{width:17px;height:17px;display:block}
.theme-toggle .ico-sun{display:none}
:root[data-theme="dark"] .theme-toggle .ico-sun{display:block}
:root[data-theme="dark"] .theme-toggle .ico-moon{display:none}

.refresh-btn{background:var(--surface);border:1px solid var(--border);color:var(--text-dim);
  padding:9px 15px;border-radius:var(--r);font-size:.72rem;font-family:var(--font-ui);cursor:pointer;
  transition:all .2s;font-weight:600;display:inline-flex;align-items:center;gap:7px}
.refresh-btn:hover{border-color:var(--brand);color:var(--brand)}
.refresh-btn:disabled{opacity:.5;cursor:not-allowed}
.refresh-btn .ico{font-size:.85rem;line-height:1}

/* ============ COMMAND / TARGET BAR ============ */
.command-bar{display:flex;gap:20px;align-items:flex-end;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:22px 24px;margin-bottom:28px}
.cfg-field{display:flex;flex-direction:column;gap:8px;flex:1;min-width:240px}
.cfg-field label{font-size:.6rem;letter-spacing:.12em;color:var(--muted);text-transform:uppercase;
  font-weight:700;font-family:var(--font-mono);display:flex;align-items:center;gap:7px}
.cfg-field label .lk{width:6px;height:6px;border-radius:50%;background:var(--brand)}
.cfg-field label .lk.warn{background:var(--warn)}
.cfg-field input{background:var(--bg);border:1px solid var(--border);border-radius:var(--r);
  padding:11px 13px;color:var(--text);font-size:.82rem;font-family:var(--font-mono);outline:none;
  transition:border-color .2s,box-shadow .2s;width:100%}
.cfg-field input::placeholder{color:var(--faint)}
.cfg-field input:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.scan-btn{background:var(--brand);border:1px solid var(--brand);color:var(--brand-ink);
  padding:12px 28px;border-radius:var(--r);font-size:.78rem;font-family:var(--font-ui);cursor:pointer;
  font-weight:700;white-space:nowrap;letter-spacing:.01em;transition:all .2s;
  display:inline-flex;align-items:center;gap:9px}
.scan-btn:hover{background:var(--kn-navy);border-color:var(--kn-navy);box-shadow:var(--shadow-hover)}
.scan-btn:active{transform:translateY(1px)}
.scan-btn:disabled{opacity:.55;cursor:not-allowed;box-shadow:none;background:var(--brand);border-color:var(--brand)}
.scan-btn .ico{font-size:.66rem}

/* ============ KPI STRIP ============ */
.status-bar{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-bottom:40px}
.stat-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:18px 18px 16px;position:relative;overflow:hidden;transition:border-color .2s,transform .2s,box-shadow .2s;
  display:flex;flex-direction:column;min-height:118px}
.stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover);border-color:var(--border)}
.stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:transparent}
.stat-card.ok::before{background:var(--ok)}
.stat-card.warn::before{background:var(--warn)}
.stat-card.crit::before{background:var(--crit);animation:critFlash 1.1s ease-in-out infinite}
.stat-card.info::before{background:var(--info)}
.stat-card.loading::before{background:linear-gradient(90deg,transparent,var(--brand),transparent);
  background-size:200% 100%;animation:shimmer 1.4s linear infinite}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@keyframes critFlash{0%,100%{opacity:1}50%{opacity:.3}}
.stat-label{font-size:.58rem;letter-spacing:.1em;color:var(--muted);text-transform:uppercase;
  font-weight:700;font-family:var(--font-mono);display:flex;align-items:center;justify-content:space-between;gap:6px}
.stat-val{font-family:var(--font-display);font-size:2rem;font-weight:700;line-height:1;
  letter-spacing:-.03em;margin-top:12px;font-variant-numeric:tabular-nums;color:var(--text)}
.stat-sub{font-size:.64rem;color:var(--muted);margin-top:auto;padding-top:10px;
  font-family:var(--font-mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ok .stat-val{color:var(--ok)}.warn .stat-val{color:var(--warn)}
.crit .stat-val{color:var(--crit)}.info .stat-val{color:var(--text)}
.loading .stat-val{color:var(--faint)}
.kpi-track{height:3px;border-radius:3px;background:var(--inset);margin-top:11px;overflow:hidden}
.kpi-track i{display:block;height:100%;border-radius:3px;width:0;transition:width 1s cubic-bezier(.2,.7,.2,1)}
.ok .kpi-track i{background:var(--ok)}.warn .kpi-track i{background:var(--warn)}.crit .kpi-track i{background:var(--crit)}.info .kpi-track i{background:var(--info)}

/* ============ TERMINAL (constant monitor) ============ */
.terminal{background:var(--term-bg);border:1px solid color-mix(in oklab,var(--kn-navy) 60%,#000);
  border-radius:var(--r-lg);overflow:hidden;margin-bottom:40px;
  box-shadow:0 10px 30px -18px color-mix(in oklab,var(--kn-navy) 80%,transparent)}
.term-bar{display:flex;align-items:center;gap:10px;padding:10px 15px;
  background:color-mix(in oklab,var(--term-bg) 80%,#000);border-bottom:1px solid color-mix(in oklab,var(--kn-navy) 50%,#000)}
.term-dots{display:flex;gap:6px}
.term-dots span{width:9px;height:9px;border-radius:50%;background:color-mix(in oklab,var(--term-ink) 25%,transparent)}
.term-dots span:nth-child(1){background:#E0564C}
.term-dots span:nth-child(2){background:#D9A23B}
.term-dots span:nth-child(3){background:#4FB286}
.term-title{font-family:var(--font-mono);font-size:.66rem;color:var(--term-dim);font-weight:700;
  letter-spacing:.06em}
.term-stat{margin-left:auto;display:flex;align-items:center;gap:7px;font-family:var(--font-mono);
  font-size:.6rem;color:#4FB286;font-weight:700;letter-spacing:.1em}
.term-stat .term-pulse{width:7px;height:7px;border-radius:50%;background:#4FB286;animation:blink 1.6s ease-in-out infinite}
.term-body{padding:13px 16px;font-family:var(--font-mono);font-size:.72rem;line-height:1.75;
  color:var(--term-ink);height:188px;overflow-y:auto;scrollbar-width:thin;
  scrollbar-color:color-mix(in oklab,var(--term-ink) 30%,transparent) transparent;
  display:block}
.term-line{white-space:pre-wrap;word-break:break-word;animation:termIn .18s ease-out;
  display:flex;gap:10px}
@keyframes termIn{from{opacity:0;transform:translateY(2px)}to{opacity:1;transform:none}}
.term-line .t{color:var(--term-dim);flex-shrink:0}
.term-line .m{color:var(--term-ink)}
.term-line.ok .m{color:#5FC394}
.term-line.info .m{color:#7FB6E8}
.term-line.warn .m{color:#E2B25C}
.term-line.crit{background:color-mix(in oklab,var(--kn-red) 22%,transparent);margin:1px -16px;padding:1px 16px}
.term-line.crit .m{color:#FF8A7E;font-weight:700}
.term-line .pfx{color:#5FC394;flex-shrink:0}
.term-cursor{display:inline-block;width:8px;height:1em;background:#5FC394;
  vertical-align:text-bottom;margin-left:2px;animation:cursorBlink 1.05s steps(1) infinite}
@keyframes cursorBlink{0%,50%{opacity:1}50.01%,100%{opacity:0}}
.term-body::-webkit-scrollbar{width:6px}
.term-body::-webkit-scrollbar-thumb{background:color-mix(in oklab,var(--term-ink) 28%,transparent);border-radius:6px}

/* ============ SECTIONS / PANELS ============ */
.section-label{font-size:.62rem;letter-spacing:.14em;color:var(--muted);text-transform:uppercase;
  margin:0 0 16px;display:flex;align-items:center;gap:12px;font-weight:700;font-family:var(--font-mono)}
.section-label .idx{color:var(--brand);font-weight:700}
.section-label .dom{color:var(--text-dim);text-transform:none;letter-spacing:.01em}
.section-label::after{content:'';flex:1;height:1px;background:var(--border)}
.real-badge,.sim-badge{font-size:.54rem;padding:3px 8px;border-radius:var(--r-sm);letter-spacing:.07em;
  font-weight:700;font-family:var(--font-mono)}
.real-badge{background:var(--ok-soft);border:1px solid var(--ok-line);color:var(--ok)}
.sim-badge{background:var(--warn-soft);border:1px solid var(--warn-line);color:var(--warn)}

.main-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.main-grid>*{min-width:0}
.panel{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:var(--pad);overflow:hidden;position:relative}
.panel-hdr{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.panel-title{font-size:.82rem;font-weight:700;letter-spacing:-.01em;display:flex;align-items:center;gap:10px;color:var(--text)}
.panel-title .dot{width:7px;height:7px;border-radius:2px;background:var(--brand);flex-shrink:0}
.panel-title .dot.info{background:var(--info)}
.panel-title .dot.warn{background:var(--warn)}
.panel-title .src{font-family:var(--font-mono);font-size:.58rem;color:var(--muted);font-weight:600;letter-spacing:.02em}

/* ---------- Code Check Status panel ---------- */
.sentinel-open{font-family:var(--font-mono);font-weight:700;color:var(--info);
  text-decoration:none;letter-spacing:.02em;white-space:nowrap}
.sentinel-open:hover{text-decoration:underline}

.badge{font-size:.56rem;font-weight:700;padding:3px 9px;border-radius:var(--r-sm);border:1px solid;
  font-family:var(--font-mono);letter-spacing:.05em;white-space:nowrap;display:inline-flex;align-items:center;gap:5px}
.badge.ok{color:var(--ok);border-color:var(--ok-line);background:var(--ok-soft)}
.badge.warn{color:var(--warn);border-color:var(--warn-line);background:var(--warn-soft)}
.badge.crit{color:var(--crit);border-color:var(--crit-line);background:var(--crit-soft)}
.badge.info{color:var(--info);border-color:var(--info-line);background:var(--info-soft)}

/* ============ CERT / KEY-VALUE ROWS ============ */
.cert-info{display:flex;flex-direction:column;gap:5px}
.cert-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 13px;
  background:var(--inset);border:1px solid var(--border-soft);border-radius:var(--r-sm);font-size:.74rem}
.cert-key{color:var(--muted);font-size:.62rem;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;font-family:var(--font-mono);white-space:nowrap}
.cert-val{font-size:.72rem;font-weight:600;font-family:var(--font-mono);text-align:right;
  overflow-wrap:anywhere;color:var(--text-dim)}
.cert-val.ok{color:var(--ok)}.cert-val.warn{color:var(--warn)}.cert-val.crit{color:var(--crit)}

/* cert validity timeline */
.timeline{margin:4px 0 12px;padding:16px;background:var(--inset);border:1px solid var(--border-soft);border-radius:var(--r-sm)}
.timeline-meta{display:flex;justify-content:space-between;font-size:.58rem;color:var(--muted);
  font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.07em;margin-bottom:11px}
.timeline-bar{position:relative;height:8px;border-radius:5px;background:var(--card-2);overflow:hidden}
.timeline-bar i{display:block;height:100%;width:0;border-radius:5px;
  background:linear-gradient(90deg,var(--ok),var(--warn));transition:width 1.1s cubic-bezier(.2,.7,.2,1)}
.timeline-now{position:absolute;top:-4px;width:2px;height:16px;background:var(--text);border-radius:2px;
  box-shadow:0 0 0 3px var(--card);transition:left 1.1s cubic-bezier(.2,.7,.2,1)}
.timeline-labels{display:flex;justify-content:space-between;font-size:.6rem;margin-top:11px;font-family:var(--font-mono)}
.timeline-labels b{display:block;color:var(--text-dim);font-weight:700}
.timeline-labels span{color:var(--faint);font-size:.55rem}

/* ============ CT HISTOGRAM ============ */
.histo{display:flex;align-items:flex-end;gap:3px;height:60px;padding:12px 13px 6px;
  background:var(--inset);border:1px solid var(--border-soft);border-radius:var(--r-sm);margin:4px 0 10px}
.histo .bar{flex:1;min-width:0;border-radius:2px 2px 0 0;background:var(--brand-line);
  position:relative;height:0;transition:height .9s cubic-bezier(.2,.7,.2,1)}
.histo .bar:hover{background:var(--brand)}
.histo .bar::after{content:attr(data-c);position:absolute;top:-15px;left:50%;transform:translateX(-50%);
  font-size:.5rem;color:var(--muted);font-family:var(--font-mono);opacity:0;transition:opacity .15s}
.histo .bar:hover::after{opacity:1}
.histo-axis{display:flex;justify-content:space-between;font-size:.55rem;color:var(--faint);
  font-family:var(--font-mono);padding:0 2px;margin:-4px 0 10px;letter-spacing:.03em}

/* ============ DNS ============ */
.dns-list{display:flex;flex-direction:column;gap:5px}
.dns-row{display:flex;gap:11px;padding:9px 13px;background:var(--inset);border:1px solid var(--border-soft);
  border-radius:var(--r-sm);font-size:.7rem;align-items:flex-start}
.dns-type{color:#fff;background:var(--brand);font-weight:700;
  font-family:var(--font-mono);font-size:.56rem;letter-spacing:.03em;border-radius:3px;
  padding:3px 8px;min-width:44px;text-align:center;flex-shrink:0;align-self:center}
.dns-val{color:var(--text-dim);word-break:break-all;font-family:var(--font-mono);font-size:.68rem;line-height:1.5}

/* ============ EVENT FEED ============ */
.event-feed{max-height:300px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--border) transparent;
  display:flex;flex-direction:column;gap:6px;padding-right:2px}
.event{display:flex;align-items:flex-start;gap:12px;padding:10px 12px;border-radius:var(--r-sm);
  border:1px solid var(--border-soft);border-left-width:2px;
  animation:slideIn .3s cubic-bezier(0,0,.2,1) forwards;opacity:0;font-size:.7rem;
  transition:background .2s;background:var(--inset)}
.event:hover{background:var(--card-2)}
@keyframes slideIn{from{transform:translateX(-8px);opacity:0}to{transform:translateX(0);opacity:1}}
.event.info{border-left-color:var(--info)}
.event.warn{border-left-color:var(--warn)}
.event.crit{border-left-color:var(--crit);background:var(--crit-soft)}
.event.ok{border-left-color:var(--ok)}
.event-time{color:var(--muted);white-space:nowrap;margin-top:1px;font-size:.6rem;font-weight:600;
  font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.event-body{flex:1;min-width:0}
.event-body strong{color:var(--text);font-weight:700;display:block;margin-bottom:2px;font-size:.7rem;overflow-wrap:anywhere}
.event-body p{color:var(--muted);font-size:.65rem;overflow-wrap:anywhere;font-family:var(--font-mono);line-height:1.5}

/* ============ SERVICE / ALARM ROWS (intranet) ============ */
.alarm-list{display:flex;flex-direction:column;gap:6px}
.alarm{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--r-sm);
  background:var(--inset);border:1px solid var(--border-soft);transition:border-color .2s;font-size:.7rem}
.alarm:hover{border-color:var(--border)}
.alarm .badge{flex-shrink:0}
.alarm-icon{font-family:var(--font-mono);font-size:.54rem;font-weight:700;letter-spacing:.03em;
  min-width:42px;height:25px;display:grid;place-items:center;border-radius:var(--r-sm);flex-shrink:0;
  background:var(--card-2);border:1px solid var(--border);color:var(--text-dim)}
.alarm-body{flex:1;min-width:0}
.alarm-body strong{font-size:.71rem;font-weight:700;display:block;overflow-wrap:anywhere;color:var(--text)}
.alarm-body p{color:var(--muted);font-size:.62rem;margin-top:2px;overflow-wrap:anywhere;font-family:var(--font-mono)}
.lat{height:3px;border-radius:3px;background:var(--card-2);margin-top:6px;overflow:hidden;max-width:160px}
.lat i{display:block;height:100%;width:0;border-radius:3px;transition:width .8s cubic-bezier(.2,.7,.2,1)}
.lat i.ok{background:var(--ok)}.lat i.warn{background:var(--warn)}.lat i.crit{background:var(--crit)}

/* ============ INTRANET PROBE HERO ============ */
.probe-hero{display:flex;align-items:center;gap:16px;padding:17px 18px;border-radius:var(--r);
  background:var(--inset);border:1px solid var(--border-soft);margin-bottom:16px}
.radar{width:46px;height:46px;flex-shrink:0;border-radius:50%;position:relative;
  border:1px solid var(--border);background:var(--card-2)}
.radar::before,.radar::after{content:'';position:absolute;inset:0;margin:auto;border-radius:50%;
  border:1px solid var(--warn-line)}
.radar::before{width:30px;height:30px}.radar::after{width:16px;height:16px}
.radar b{position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg, transparent 0deg, var(--warn-soft) 50deg, transparent 100deg);
  animation:radar 4.5s linear infinite}
.radar.live::before,.radar.live::after{border-color:var(--brand-line)}
.radar.live b{background:conic-gradient(from 0deg, transparent 0deg, var(--brand-soft) 50deg, transparent 100deg);animation-duration:2.6s}
.probe-hero-title{font-size:.84rem;font-weight:700;margin-bottom:5px}
.probe-hero-note{font-size:.66rem;color:var(--muted);line-height:1.6}
.sub-head{font-size:.58rem;color:var(--muted);font-weight:700;text-transform:uppercase;
  letter-spacing:.09em;margin-bottom:10px;font-family:var(--font-mono)}

/* ============ CORS / NOTES ============ */
.cors-note{padding:16px;background:var(--warn-soft);border:1px solid var(--warn-line);border-radius:var(--r);
  font-size:.7rem;line-height:1.75;color:var(--text-dim)}
.cors-note a{color:var(--brand);text-decoration:none;font-family:var(--font-mono);font-size:.66rem;word-break:break-all}
.cors-note a:hover{text-decoration:underline}
.cors-note code{font-family:var(--font-mono);font-size:.63rem;background:var(--inset);
  padding:2px 6px;border-radius:3px;color:var(--brand)}
.cors-note strong{color:var(--text)}

/* ============ SKELETON / SPINNER ============ */
.loading-skeleton{background:linear-gradient(90deg,var(--inset) 25%,var(--card-2) 50%,var(--inset) 75%);
  background-size:200% 100%;animation:shimmer 1.4s linear infinite;border-radius:var(--r-sm);height:36px;margin-bottom:6px}
.spinner{display:inline-block;width:9px;height:9px;border:1.5px solid var(--brand-line);
  border-top-color:var(--brand);border-radius:50%;animation:spin .7s linear infinite;vertical-align:middle}
@keyframes spin{to{transform:rotate(360deg)}}

/* ============ MATRIX OVERLAY (while searching) ============ */
.matrix-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;
  opacity:0;transition:opacity .4s ease;border-radius:inherit}
.matrix-canvas.on{opacity:1}

/* ============ AGENT CONNECT ============ */
.col-stack{display:flex;flex-direction:column;gap:16px}
.oneclick{background:var(--brand-soft);border:1px solid var(--brand-line);border-radius:var(--r);padding:16px 17px;margin-bottom:12px}
.oneclick h4{font-size:.76rem;font-weight:700;color:var(--brand);margin-bottom:5px;display:flex;align-items:center;gap:8px}
.oneclick p{font-size:.65rem;color:var(--muted);line-height:1.65;margin-bottom:10px}
.oneclick p code,.agent-step code{font-family:var(--font-mono);font-size:.6rem;background:var(--inset);padding:1px 5px;border-radius:3px;color:var(--brand)}
.cmd-row{display:flex;gap:8px;align-items:stretch;margin-bottom:8px}
.cmd-row .os{font-size:.54rem;color:var(--muted);min-width:64px;display:flex;align-items:center;
  font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-family:var(--font-mono)}
.step-cmd{display:block;background:var(--inset);border:1px solid var(--border-soft);border-radius:var(--r-sm);
  padding:9px 11px;font-family:var(--font-mono);font-size:.6rem;color:var(--brand);overflow-x:auto;white-space:nowrap}
.cmd-row .step-cmd{flex:1;min-width:0}
.copy-btn{background:var(--card-2);border:1px solid var(--border);color:var(--text-dim);border-radius:var(--r-sm);
  padding:0 13px;font-size:.58rem;font-family:var(--font-ui);font-weight:700;cursor:pointer;white-space:nowrap;transition:all .2s}
.copy-btn:hover{border-color:var(--brand);color:var(--brand)}
details.manual{margin-top:2px}
details.manual>summary{font-size:.64rem;color:var(--brand);cursor:pointer;font-weight:600;list-style:none;padding:6px 0;outline:none;font-family:var(--font-mono)}
details.manual>summary::-webkit-details-marker{display:none}
details.manual>summary::before{content:'\25B8  '}
details.manual[open]>summary::before{content:'\25BE  '}
details.manual>div{margin-top:8px;display:flex;flex-direction:column;gap:8px}
.agent-step{display:flex;gap:12px;align-items:flex-start;padding:12px 13px;background:var(--inset);
  border-radius:var(--r-sm);border:1px solid var(--border-soft)}
.agent-step-num{width:24px;height:24px;flex-shrink:0;border-radius:50%;background:var(--brand-soft);
  border:1px solid var(--brand-line);display:grid;place-items:center;font-size:.64rem;font-weight:700;
  color:var(--brand);font-family:var(--font-mono)}
.agent-step>div{flex:1;min-width:0}
.agent-step-t{font-size:.72rem;font-weight:700;margin-bottom:4px}
.agent-step-d{font-size:.63rem;color:var(--muted);line-height:1.6}
.agent-step .step-cmd{margin-top:7px;max-width:100%}
.agent-row{display:flex;gap:8px;margin-top:4px}
#webhook-url{flex:1;min-width:0;background:var(--inset);border:1px solid var(--border);border-radius:var(--r-sm);
  padding:10px 12px;color:var(--text);font-size:.66rem;font-family:var(--font-mono);outline:none;transition:border-color .2s}
#webhook-url:focus{border-color:var(--brand)}
.agent-btn{padding:10px 17px;border-radius:var(--r-sm);font-size:.66rem;font-family:var(--font-ui);cursor:pointer;
  font-weight:700;white-space:nowrap;border:1px solid;transition:all .2s}
.agent-btn.go{background:var(--brand);border-color:var(--brand);color:#fff}
.agent-btn.go:hover{background:var(--kn-navy);border-color:var(--kn-navy)}
.agent-btn.stop{background:var(--crit-soft);border-color:var(--crit-line);color:var(--crit)}
#agent-conn-status{font-size:.6rem;color:var(--muted);min-height:.9rem;margin-top:4px;
  font-family:var(--font-mono);overflow-wrap:anywhere}
#agent-conn-status code{background:var(--inset);padding:1px 4px;border-radius:3px;color:var(--brand)}
#intranet-probe-note,#intranet-probe-title{overflow-wrap:anywhere}

/* ============ RESPONSIVE ============ */
@media(max-width:1100px){
  .status-bar{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:860px){
  .main-grid{grid-template-columns:1fr}
  .status-bar{grid-template-columns:repeat(3,1fr)}
  .wrap{padding:28px 20px 40px}
}
@media(max-width:560px){
  .wrap{padding:20px 14px 32px}
  .cfg-field{flex:1 1 100%}
  .scan-btn{width:100%;justify-content:center}
  .status-bar{grid-template-columns:repeat(2,1fr);gap:10px}
  .stat-val{font-size:1.6rem}
  .cfg-field input,#webhook-url{font-size:16px}
  .cmd-row{flex-wrap:wrap}
  .cmd-row .os{min-width:100%}
  .cmd-row .step-cmd,.copy-btn{flex:1 1 100%}
  .copy-btn{padding:9px}
  .agent-row{flex-wrap:wrap}
  #webhook-url{flex:1 1 100%}
  .clock{display:none}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important}
}
::-webkit-scrollbar{width:7px;height:7px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:7px}
::-webkit-scrollbar-thumb:hover{background:var(--faint)}

/* ============================================================
   TWEAKS — accent / theme / density / motion
   ============================================================ */
:root[data-accent="royal"]  {--brand:var(--kn-blue)}
:root[data-accent="navy"]   {--brand:var(--kn-navy)}
:root[data-accent="sky"]    {--brand:var(--kn-sky)}
:root[data-accent="red"]    {--brand:var(--kn-red)}

/* --- DARK THEME: Deep Navy boardroom --- */
:root[data-theme="dark"]{
  --bg:        #07182F;
  --bg-2:      #0A2042;
  --surface:   #0C2750;
  --card:      #0D2E5A;
  --card-2:    #123667;
  --inset:     #0A2547;
  --border:    #1E456F;
  --border-soft:#163758;

  --text:      var(--kn-canvas);
  --text-dim:  #C2D2E6;
  --muted:     #8AA1BE;
  --faint:     #5C779C;

  --ok:        #4FB286;
  --warn:      #E0A93B;
  --crit:      #EC6055;
  --info:      #6FAEE6;

  --brand:     var(--kn-sky);
  --brand-ink: #07182F;
  --shadow-hover:0 8px 26px -14px #000;
  --term-bg:   #050F22;
}
:root[data-theme="dark"][data-accent="royal"]  {--brand:#5C9BD8}
:root[data-theme="dark"][data-accent="navy"]   {--brand:#7FB2E0}
:root[data-theme="dark"][data-accent="sky"]    {--brand:var(--kn-sky)}
:root[data-theme="dark"][data-accent="red"]    {--brand:#EC6055}
:root[data-theme="dark"] .dns-type{color:#07182F}
:root[data-theme="dark"] body::before{
  background-image:
    linear-gradient(color-mix(in oklab,var(--kn-sky) 7%,transparent) 1px,transparent 1px),
    linear-gradient(90deg,color-mix(in oklab,var(--kn-sky) 7%,transparent) 1px,transparent 1px);
  opacity:.6;
}
:root[data-theme="dark"] .scan-btn{color:#fff}
:root[data-theme="dark"] .scan-btn:hover{background:var(--kn-sky);border-color:var(--kn-sky);color:#07182F}
:root[data-theme="dark"] .agent-btn.go{color:#07182F}

/* --- DENSITY --- */
:root[data-density="compact"]{--pad:16px}
:root[data-density="compact"] .wrap{padding:28px 24px}
:root[data-density="compact"] .status-bar,
:root[data-density="compact"] .main-grid{gap:11px}
:root[data-density="compact"] .status-bar{margin-bottom:28px}
:root[data-density="compact"] .stat-card{min-height:100px;padding:14px 15px}
:root[data-density="compact"] .stat-val{font-size:1.65rem}
:root[data-density="compact"] .cert-row{padding:8px 11px}
:root[data-density="compact"] .terminal{margin-bottom:28px}

:root[data-density="spacious"]{--pad:30px}
:root[data-density="spacious"] .wrap{padding:52px 40px 64px;max-width:1340px}
:root[data-density="spacious"] .status-bar,
:root[data-density="spacious"] .main-grid{gap:22px}
:root[data-density="spacious"] .status-bar{margin-bottom:52px}
:root[data-density="spacious"] .stat-card{min-height:132px;padding:22px 22px}
:root[data-density="spacious"] .stat-val{font-size:2.25rem}

/* --- MOTION OFF --- */
:root[data-motion="off"] .kn-mark .radar-sweep,
:root[data-motion="off"] .kn-mark .radar-blip,
:root[data-motion="off"] .radar b,
:root[data-motion="off"] .live-dot::after,
:root[data-motion="off"] .term-stat .term-pulse,
:root[data-motion="off"] .stat-card.crit::before,
:root[data-motion="off"] .stat-card.loading::before{animation:none}
:root[data-motion="off"] .live-dot::after,
:root[data-motion="off"] .tag-pip{display:none}
:root[data-motion="off"] .matrix-canvas{display:none}