/* Nizhenets Sentinel — application stylesheet on the "Nöbet" design kit.
   Load order (index.html): /nz/fonts.css → /nz/tokens.css → /nz/base.css → /nz/components.css → this file.
   The kit files are never edited; everything Sentinel-specific lives here and is written with the --nz-* tokens.
   CSP (style-src 'self'): no inline styles anywhere. Data-driven colours come from data-* hooks (data-risk,
   data-tone, data-state, data-series, data-score) and bar widths are applied through the CSSOM by app.js.
   Motion only answers user actions (hover/focus/toast, 120–240 ms); there are no ambient animations. */

/* ---------- App tokens: layout + categorical chart series ----------
   The eight series colours are the only colours that are not kit tokens. They were derived from the kit hues
   (teal → amber → plum → olive → blue → green → violet → rust) and validated for CVD/normal-vision separation
   and ≥ 3:1 contrast against the panel surface in both themes. app.js reads them for Chart.js; the legend
   uses them through data-series. */
:root {
  --sx-sidebar: 248px;
  --sx-series-1: #13999f;
  --sx-series-2: #8d5406;
  --sx-series-3: #7c316e;
  --sx-series-4: #85861f;
  --sx-series-5: #478cc4;
  --sx-series-6: #1b683e;
  --sx-series-7: #6e62aa;
  --sx-series-8: #85363a;
}
:root:is([data-theme="dark"],[data-theme="black"]) {
  --sx-series-1: #10a6ad;
  --sx-series-2: #b16f23;
  --sx-series-3: #b87aab;
  --sx-series-4: #868604;
  --sx-series-5: #4493d0;
  --sx-series-6: #3b8d5d;
  --sx-series-7: #8677ce;
  --sx-series-8: #cf686b;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sx-series-1: #10a6ad;
    --sx-series-2: #b16f23;
    --sx-series-3: #b87aab;
    --sx-series-4: #868604;
    --sx-series-5: #4493d0;
    --sx-series-6: #3b8d5d;
    --sx-series-7: #8677ce;
    --sx-series-8: #cf686b;
  }
}

/* ---------- Status hooks (data-risk / data-tone / data-state) → one lamp language ---------- */
[data-risk="critical"] { --risk: var(--nz-bad); --risk-soft: var(--nz-bad-soft); }
[data-risk="high"] { --risk: var(--nz-warn); --risk-soft: var(--nz-warn-soft); }
[data-risk="medium"] { --risk: var(--nz-info); --risk-soft: var(--nz-info-soft); }
[data-risk="low"] { --risk: var(--nz-ink-2); --risk-soft: var(--nz-raised); }
[data-risk="info"] { --risk: var(--nz-ok); --risk-soft: var(--nz-ok-soft); }
[data-tone="ok"] { --risk: var(--nz-ok); --risk-soft: var(--nz-ok-soft); }
[data-tone="bad"] { --risk: var(--nz-bad); --risk-soft: var(--nz-bad-soft); }
[data-tone="info"] { --risk: var(--nz-info); --risk-soft: var(--nz-info-soft); }

/* ---------- Document ---------- */
html { min-width: 320px; }
body { overflow-x: hidden; }
.login-shell svg, .app-shell svg, .modal-card svg { stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.page { display: none; }
.page.active { display: block; }
[hidden] { display: none !important; }

/* Brand mark: shield outline in the accent with a lamp-coloured check. */
.brand-mark {
  position: relative; display: inline-grid; place-items: center; flex: 0 0 auto;
  width: 26px; height: 30px;
  clip-path: polygon(50% 0, 100% 18%, 92% 70%, 50% 100%, 8% 70%, 0 18%);
  background: var(--nz-accent);
}
.brand-mark::before { content: ""; position: absolute; inset: 2px; clip-path: inherit; background: var(--nz-surface); }
.brand-mark span {
  position: relative; width: 8px; height: 11px;
  border-left: 2px solid var(--nz-accent); border-bottom: 2px solid var(--nz-lamp-glow);
  transform: skew(-11deg) rotate(-42deg);
}

/* ---------- Login view: masthead + serif title, quiet plate on the right ---------- */
.login-shell { min-height: 100dvh; display: flex; flex-direction: column; background: var(--nz-canvas); }
.login-masthead { grid-template-columns: auto 1fr auto; }
.login-brand { gap: 12px; }
.login-brand .eyebrow {
  font-family: var(--nz-font-sans); font-size: var(--nz-text-xs); font-weight: 500; letter-spacing: 0.04em;
  color: var(--nz-ink-2); white-space: normal;
}
.login-main {
  flex: 1; width: min(var(--nz-content), 100% - 2 * var(--nz-gutter)); margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: var(--nz-space-12); align-items: center;
  padding-block: var(--nz-space-10) var(--nz-space-12);
}
.login-panel { display: flex; flex-direction: column; min-width: 0; }
.login-panel h1 { margin: 0 0 var(--nz-space-3); font-size: var(--nz-text-3xl); }
.login-copy { max-width: var(--nz-measure); margin: 0 0 var(--nz-space-8); color: var(--nz-ink-2); }
.auth-form { display: grid; gap: 6px; width: 100%; }
.auth-form label, .password-form label { font-size: var(--nz-text-xs); font-weight: 500; color: var(--nz-ink-2); }
.input-shell {
  display: flex; align-items: center; gap: 10px; min-height: 42px; margin-bottom: var(--nz-space-3);
  padding: 0 6px 0 12px; border: 1px solid var(--nz-line-strong); border-radius: var(--nz-radius-control);
  background: var(--nz-surface); transition: border-color var(--nz-fast) var(--nz-ease);
}
.input-shell:hover { border-color: var(--nz-ink-3); }
.input-shell:focus-within { border-color: var(--nz-accent); box-shadow: var(--nz-focus); }
.input-shell > svg { width: 18px; height: 18px; flex: none; color: var(--nz-ink-3); }
.input-shell input { flex: 1; min-width: 0; height: 40px; border: 0; outline: 0; background: transparent; color: var(--nz-ink); font-size: var(--nz-text-md); }
.input-shell input:focus-visible { box-shadow: none; }
.icon-button { flex: none; color: var(--nz-accent); }
.form-error { min-height: 22px; color: var(--nz-bad); font-size: var(--nz-text-sm); }
.login-button { margin-top: var(--nz-space-2); min-height: 42px; }
.primary-button svg, .secondary-button svg { width: 18px; height: 18px; }
.login-foot { display: flex; align-items: center; gap: 8px; margin-top: var(--nz-space-6); color: var(--nz-ink-2); font-size: var(--nz-text-xs); }
.secure-dot { width: 10px; height: 10px; flex: none; border-radius: 50%; border: 2px solid var(--nz-ok); background: var(--nz-ok); }

.login-visual {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 520px; min-width: 0;
  padding: var(--nz-space-8); overflow: hidden;
  border: 1px solid var(--nz-line); border-radius: var(--nz-radius-plate); background: var(--nz-surface);
}
.radar { position: absolute; right: -60px; top: -60px; width: 340px; height: 340px; border: 1px solid var(--nz-line-strong); border-radius: 50%; }
.radar::before, .radar::after { content: ""; position: absolute; background: var(--nz-line); }
.radar::before { left: 50%; top: 0; bottom: 0; width: 1px; }
.radar::after { top: 50%; left: 0; right: 0; height: 1px; }
.radar i { position: absolute; border: 1px solid var(--nz-line); border-radius: 50%; }
.radar i:nth-child(1) { inset: 16%; }
.radar i:nth-child(2) { inset: 32%; }
.radar i:nth-child(3) { inset: 44%; }
.radar b { position: absolute; left: 50%; top: 50%; width: 50%; height: 50%; border-top: 1px solid var(--nz-accent); transform-origin: 0 0; transform: rotate(206deg); }
.visual-copy { position: relative; display: grid; gap: var(--nz-space-2); margin-bottom: var(--nz-space-5); }
.visual-copy span { font-size: var(--nz-text-xs); letter-spacing: 0.04em; color: var(--nz-ink-2); }
.visual-copy strong {
  max-width: 18ch; font-family: var(--nz-font-serif); font-weight: 500; font-size: var(--nz-text-2xl);
  line-height: var(--nz-leading-tight); letter-spacing: -0.01em; color: var(--nz-ink);
}
.signal-card { position: relative; display: flex; align-items: center; gap: 12px; padding: var(--nz-space-3) 0; border-top: 1px solid var(--nz-line); }
.signal-card > span { width: 10px; height: 10px; flex: none; border-radius: 50%; border: 2px solid var(--nz-ok); background: var(--nz-ok); }
.signal-two > span { border-color: var(--nz-lamp-glow); background: var(--nz-lamp-glow); }
.signal-card div { display: grid; gap: 2px; min-width: 0; }
.signal-card small { font-size: var(--nz-text-xs); letter-spacing: 0.04em; color: var(--nz-ink-3); }
.signal-card b { font-size: var(--nz-text-sm); font-weight: 500; }

/* ---------- App shell: left rail + workspace ---------- */
.app-shell { display: grid; grid-template-columns: var(--sx-sidebar) minmax(0, 1fr); min-height: 100dvh; background: var(--nz-canvas); }
.sidebar {
  position: sticky; top: 0; z-index: 30; height: 100dvh; overflow-y: auto;
  display: flex; flex-direction: column; padding: var(--nz-space-5) var(--nz-space-4);
  background: var(--nz-surface); border-right: 1px solid var(--nz-line);
}
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 20px; color: var(--nz-ink); text-decoration: none; }
.brand > span:last-child { display: grid; min-width: 0; }
.brand b { font-family: var(--nz-font-serif); font-size: var(--nz-text-lg); font-weight: 500; letter-spacing: -0.01em; line-height: 1.2; }
.brand small { font-size: var(--nz-text-xs); letter-spacing: 0.04em; color: var(--nz-ink-2); }
.main-nav { display: flex; flex-direction: column; gap: 2px; }
.nav-item {
  position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  width: 100%; min-height: 40px; padding: 8px 10px 8px 12px; border: 0; border-radius: var(--nz-radius-control);
  background: none; color: var(--nz-ink-2); text-align: left; font-size: var(--nz-text-sm); font-weight: 500;
  transition: color var(--nz-fast) var(--nz-ease), background-color var(--nz-fast) var(--nz-ease);
}
.nav-item svg { width: 18px; height: 18px; }
.nav-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-item:hover { color: var(--nz-ink); background: var(--nz-raised); }
.nav-item.active { color: var(--nz-ink); background: var(--nz-raised); }
.nav-item.active::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 2px; background: var(--nz-lamp-glow); }
.nav-item em {
  min-width: 24px; padding: 1px 7px; border-radius: var(--nz-radius-pill);
  background: var(--nz-raised); color: var(--nz-ink-2);
  font-family: var(--nz-font-mono); font-size: var(--nz-text-xs); font-style: normal; font-weight: 500; line-height: 1.5; text-align: center;
}
.nav-item.active em { background: var(--nz-surface); }
.nav-label { margin: var(--nz-space-5) 0 6px; padding: 0 12px; font-size: var(--nz-text-xs); letter-spacing: 0.04em; color: var(--nz-ink-3); }
.sidebar-status { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: var(--nz-space-4) 4px 0; border-top: 1px solid var(--nz-line); }
.sidebar-status > div { display: grid; min-width: 0; }
.sidebar-status b { font-size: var(--nz-text-sm); font-weight: 500; }
.sidebar-status small { font-size: var(--nz-text-xs); color: var(--nz-ink-2); }
.status-orb { width: 10px; height: 10px; flex: none; border-radius: 50%; border: 2px solid var(--nz-ok); background: var(--nz-ok); }
.logout-button { width: 100%; justify-content: flex-start; margin-top: var(--nz-space-2); padding-inline: 10px; color: var(--nz-ink-2); }
.logout-button svg { width: 18px; height: 18px; }
.logout-button:hover { color: var(--nz-bad); background: var(--nz-bad-soft); }
.workspace { display: flex; flex-direction: column; min-width: 0; min-height: 100dvh; }

/* ---------- Topbar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: var(--nz-space-4);
  min-height: 64px; padding: 10px var(--nz-gutter);
  border-bottom: 1px solid var(--nz-line);
  background: color-mix(in srgb, var(--nz-canvas) 92%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.topbar-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.topbar-title > div { display: grid; min-width: 0; }
.topbar-title span { font-size: var(--nz-text-xs); letter-spacing: 0.04em; color: var(--nz-ink-3); }
.topbar-title h1 { margin: 0; font-size: var(--nz-text-xl); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mobile-menu { display: none; font-size: var(--nz-text-lg); }
.topbar-actions { display: flex; align-items: center; gap: var(--nz-space-2); flex: none; }
.live-chip, .listening, .automation-live {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 2px 10px 2px 8px; border-radius: var(--nz-radius-pill);
  background: color-mix(in srgb, var(--nz-lamp-glow) 18%, var(--nz-surface)); color: var(--nz-lamp);
  font-size: var(--nz-text-xs); font-weight: 500; line-height: 1.6; letter-spacing: 0.04em;
}
.live-chip span, .listening i, .automation-live i { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--nz-lamp-glow); }
.range-control { display: inline-flex; align-items: center; gap: 8px; }
.range-control span { font-size: var(--nz-text-xs); color: var(--nz-ink-2); white-space: nowrap; }
.range-control select { width: auto; min-width: 150px; }
.account-chip {
  display: inline-flex; align-items: center; gap: 9px; min-height: 36px; padding: 3px 10px 3px 4px;
  border: 1px solid transparent; border-radius: var(--nz-radius-control); background: transparent; color: var(--nz-ink);
  transition: background-color var(--nz-fast) var(--nz-ease), border-color var(--nz-fast) var(--nz-ease);
}
.account-chip:hover { background: var(--nz-raised); border-color: var(--nz-line); }
.account-chip > span {
  width: 28px; height: 28px; display: grid; place-items: center; border-radius: 7px;
  background: var(--nz-accent); color: var(--nz-accent-ink); font-size: var(--nz-text-sm); font-weight: 600;
}
.account-chip div { display: grid; text-align: left; line-height: 1.25; }
.account-chip b { font-size: var(--nz-text-sm); font-weight: 500; }
.account-chip small { font-size: var(--nz-text-xs); color: var(--nz-ink-2); }
.workspace > main { flex: 1; width: 100%; max-width: 1600px; margin-inline: auto; padding: var(--nz-space-6) var(--nz-gutter) var(--nz-space-12); }

/* Default-password notice (kit .nz-notice.is-warn + layout) */
.password-warning { display: flex; align-items: center; gap: var(--nz-space-3); margin-bottom: var(--nz-space-5); }
.password-warning > svg { width: 22px; height: 22px; flex: none; color: var(--nz-warn); }
.password-warning > div { display: grid; flex: 1; min-width: 0; }
.password-warning b { font-weight: 600; }
.password-warning span { color: var(--nz-ink-2); font-size: var(--nz-text-sm); }

/* ---------- Summary strip (kit .nz-stats / .nz-stat on the metric cards) ---------- */
.metric-grid { margin-bottom: var(--nz-space-5); }
.metric-card { position: relative; min-width: 0; }
.metric-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--nz-ink-2); font-size: var(--nz-text-xs); letter-spacing: 0.04em; }
.metric-top i { display: inline-grid; place-items: center; width: 20px; height: 20px; color: var(--nz-ink-3); }
.metric-top svg { width: 16px; height: 16px; }
.metric-card > strong {
  display: block; margin-top: 6px; font-size: var(--nz-text-2xl); font-weight: 500; line-height: 1.15;
  letter-spacing: -0.01em; font-variant-numeric: tabular-nums;
}
.metric-foot { display: grid; gap: 2px; margin-top: 8px; font-size: var(--nz-text-xs); color: var(--nz-ink-3); }
.metric-foot small { font-size: var(--nz-text-xs); }
.trend { color: var(--nz-ok); }
.trend.down { color: var(--nz-bad); }
.trend.neutral, .subtle { color: var(--nz-ink-2); }

/* ---------- Panels (plates without the card kit) ---------- */
.panel { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--nz-line); border-radius: var(--nz-radius-plate); background: var(--nz-surface); }
.panel-header { display: flex; align-items: center; justify-content: space-between; gap: var(--nz-space-4); min-height: 60px; padding: var(--nz-space-3) var(--nz-space-5); border-bottom: 1px solid var(--nz-line); }
.panel-header > div:first-child { display: grid; gap: 1px; min-width: 0; }
.panel-header h2 { margin: 0; font-size: var(--nz-text-lg); }
.kicker { font-size: var(--nz-text-xs); letter-spacing: 0.04em; color: var(--nz-ink-3); }
.panel-link {
  width: 100%; min-height: 44px; margin-top: auto; border: 0; border-top: 1px solid var(--nz-line);
  background: transparent; color: var(--nz-accent); font-size: var(--nz-text-sm); font-weight: 500;
  transition: background-color var(--nz-fast) var(--nz-ease);
}
.panel-link:hover { background: var(--nz-raised); }
.panel-link span { margin-left: 4px; }
.text-button { color: var(--nz-accent); }

/* ---------- Overview: map + live feed ---------- */
.overview-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(320px, 0.7fr); gap: var(--nz-space-4); margin-bottom: var(--nz-space-4); }
.map-panel { min-height: 510px; }
.map-legend, .mini-legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nz-space-3); color: var(--nz-ink-2); font-size: var(--nz-text-xs); }
.map-legend span, .mini-legend span { display: inline-flex; align-items: center; gap: 6px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.dot.critical { color: var(--nz-bad); }
.dot.high { color: var(--nz-warn); }
.dot.medium { color: var(--nz-info); }
.map-wrap { position: relative; flex: 1; min-height: 390px; display: grid; place-items: center; overflow: hidden; background: var(--nz-surface); }
#world-map { position: relative; display: block; width: 100%; height: 390px; }
.country { fill: var(--nz-raised); stroke: var(--nz-line-strong); stroke-width: 0.45; transition: fill var(--nz-fast) var(--nz-ease); }
.country:hover { fill: var(--nz-accent-soft); }
.attack-line { fill: none; stroke: var(--nz-accent); stroke-opacity: 0.45; stroke-width: 1; stroke-dasharray: 3 5; }
.attack-point { cursor: pointer; }
.attack-point .pulse { fill: currentColor; fill-opacity: 0.18; stroke: currentColor; stroke-opacity: 0.5; stroke-width: 1; }
.attack-point .core { fill: currentColor; stroke: var(--nz-surface); stroke-width: 1.2; }
.attack-point.critical { color: var(--nz-bad); }
.attack-point.high { color: var(--nz-warn); }
.attack-point.medium { color: var(--nz-info); }
.map-empty { position: absolute; max-width: 320px; padding: var(--nz-space-3) var(--nz-space-4); border-radius: var(--nz-radius-control); background: var(--nz-raised); color: var(--nz-ink-2); text-align: center; font-size: var(--nz-text-sm); }
.map-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--nz-space-4); min-height: 48px; padding: var(--nz-space-2) var(--nz-space-5); border-top: 1px solid var(--nz-line); color: var(--nz-ink-2); font-size: var(--nz-text-xs); }
.map-footer > span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.map-footer > span i { width: 8px; height: 8px; border-radius: 50%; background: var(--nz-accent); }
.map-footer b { color: var(--nz-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.map-footer small { font-size: var(--nz-text-xs); color: var(--nz-ink-3); text-align: right; }

.live-panel { min-height: 510px; }
.live-feed { flex: 1; max-height: 397px; overflow: auto; padding: 4px 0; }
.live-item { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px var(--nz-space-5); border-bottom: 1px solid var(--nz-line); }
.live-item:last-child { border-bottom: 0; }
.live-item:hover { background: var(--nz-raised); }
.live-item > i { width: 10px; height: 10px; margin-top: 5px; border-radius: 50%; border: 2px solid var(--risk, var(--nz-line-strong)); background: var(--risk, transparent); }
.live-item[data-risk="low"] > i { border-color: var(--nz-line-strong); background: transparent; }
.live-item > div { display: grid; gap: 2px; min-width: 0; }
.live-item b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--nz-font-mono); font-size: var(--nz-text-sm); font-weight: 500; }
.live-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--nz-ink-2); font-size: var(--nz-text-xs); }
.live-item time { color: var(--nz-ink-3); font-family: var(--nz-font-mono); font-size: var(--nz-text-xs); white-space: nowrap; }
.empty-state { min-height: 260px; display: grid; place-items: center; align-content: center; gap: 6px; padding: var(--nz-space-6); color: var(--nz-ink-2); text-align: center; }
.empty-state.compact { height: 100%; min-height: 220px; }
.empty-state b { font-weight: 500; color: var(--nz-ink); }
.empty-state small { max-width: 260px; font-size: var(--nz-text-xs); color: var(--nz-ink-3); }
.pulse-ring { width: 14px; height: 14px; margin-bottom: 6px; border: 2px solid var(--nz-warn); border-radius: 50%; }

/* ---------- Overview: timeline + ports ---------- */
.analysis-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(270px, 0.65fr); gap: var(--nz-space-4); margin-bottom: var(--nz-space-4); }
.timeline-panel, .port-panel { min-height: 330px; }
.chart-wrap { position: relative; height: 260px; padding: var(--nz-space-4) var(--nz-space-4) var(--nz-space-3); }
.line { display: inline-block; width: 14px; height: 2px; background: currentColor; }
.line.total { color: var(--nz-accent); }
.line.severe { color: var(--nz-bad); }
.port-list { display: grid; gap: var(--nz-space-3); align-content: start; padding: var(--nz-space-3) var(--nz-space-5) var(--nz-space-5); }
.port-row { display: grid; grid-template-columns: 78px minmax(0, 1fr) 52px; gap: 10px; align-items: center; }
.port-name { display: grid; min-width: 0; }
.port-name b { font-family: var(--nz-font-mono); font-size: var(--nz-text-sm); font-weight: 500; }
.port-name small { font-size: var(--nz-text-xs); color: var(--nz-ink-3); }
.bar-track { height: 6px; overflow: hidden; border-radius: var(--nz-radius-pill); background: var(--nz-raised); }
.bar-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--nz-accent); }
.port-row > b { font-size: var(--nz-text-sm); font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Tables (kit .nz-table on the static tables; generated cells styled here) ---------- */
.top-ip-panel { margin-bottom: var(--nz-space-4); }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.panel table { width: 100%; }
.panel td.mono, .panel .mono { font-family: var(--nz-font-mono); font-size: var(--nz-text-xs); font-weight: 500; color: var(--nz-ink); }
.location-cell { display: grid; min-width: 0; }
.location-cell b { font-size: var(--nz-text-sm); font-weight: 500; }
.location-cell small { max-width: 260px; overflow: hidden; color: var(--nz-ink-3); font-size: var(--nz-text-xs); text-overflow: ellipsis; white-space: nowrap; }
.count-cell { font-weight: 600; font-variant-numeric: tabular-nums; }
.risk-pill, .action-pill {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 2px 10px 2px 8px; border-radius: var(--nz-radius-pill); border: 1px solid transparent;
  background: var(--risk-soft, var(--nz-raised)); color: var(--risk, var(--nz-ink-2));
  font-size: var(--nz-text-xs); font-weight: 500; line-height: 1.6; letter-spacing: 0.02em;
}
.risk-pill::before, .action-pill::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; border: 1.5px solid var(--risk, var(--nz-line-strong)); background: var(--risk, transparent); }
.risk-pill[data-risk="low"]::before { border-color: var(--nz-line-strong); background: transparent; }
.row-action {
  width: 30px; height: 30px; display: inline-grid; place-items: center;
  border: 1px solid var(--nz-line-strong); border-radius: var(--nz-radius-control); background: var(--nz-surface);
  color: var(--nz-ink-2); font-size: var(--nz-text-sm);
  transition: background-color var(--nz-fast) var(--nz-ease), color var(--nz-fast) var(--nz-ease);
}
.row-action:hover { background: var(--nz-raised); color: var(--nz-ink); }

/* ---------- Page intro, filters, toolbars, pagination ---------- */
.page-intro { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--nz-space-3) var(--nz-space-4); margin-bottom: var(--nz-space-5); }
.page-intro > div:first-child { display: grid; gap: 2px; min-width: 0; }
.page-intro h2 { margin: 0; font-size: var(--nz-text-2xl); }
.page-intro p { margin: 4px 0 0; max-width: var(--nz-measure); color: var(--nz-ink-2); font-size: var(--nz-text-md); }
.filters-panel { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--nz-space-2); padding: var(--nz-space-3); margin-bottom: var(--nz-space-4); overflow: visible; }
.search-box {
  flex: 1 1 260px; min-width: 0; display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px;
  border: 1px solid var(--nz-line-strong); border-radius: var(--nz-radius-control); background: var(--nz-surface);
  transition: border-color var(--nz-fast) var(--nz-ease);
}
.search-box:hover { border-color: var(--nz-ink-3); }
.search-box:focus-within { border-color: var(--nz-accent); box-shadow: var(--nz-focus); }
.search-box svg { width: 16px; height: 16px; flex: none; color: var(--nz-ink-3); }
.search-box input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--nz-ink); font-size: var(--nz-text-md); }
.search-box input:focus-visible { box-shadow: none; }
.filters-panel select { width: auto; min-width: 170px; }
.table-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--nz-space-2) var(--nz-space-3); padding: var(--nz-space-3) var(--nz-space-5); border-bottom: 1px solid var(--nz-line); color: var(--nz-ink); font-size: var(--nz-text-sm); font-weight: 500; }
.table-toolbar small { color: var(--nz-ink-2); font-size: var(--nz-text-xs); font-weight: 400; }
.events-table td { max-width: 290px; }
.events-table td:first-child, .blocked-table td:nth-child(4), .blocked-table td:nth-child(6) { white-space: nowrap; }
.event-category { display: grid; min-width: 0; }
.event-category b { overflow: hidden; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.event-category small { overflow: hidden; color: var(--nz-ink-3); font-family: var(--nz-font-mono); font-size: var(--nz-text-xs); text-overflow: ellipsis; white-space: nowrap; }
.pagination { display: flex; align-items: center; justify-content: center; gap: var(--nz-space-3); min-height: 56px; padding: var(--nz-space-2) var(--nz-space-4); border-top: 1px solid var(--nz-line); }
.pagination span { font-family: var(--nz-font-mono); font-size: var(--nz-text-xs); color: var(--nz-ink-2); }

/* ---------- Analytics ---------- */
.analytics-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--nz-space-4); margin-bottom: var(--nz-space-4); }
.ranking-list { padding: var(--nz-space-2) var(--nz-space-5) var(--nz-space-4); }
.rank-row { display: grid; grid-template-columns: 28px minmax(110px, 0.8fr) minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--nz-line); }
.rank-row:last-child { border-bottom: 0; }
.rank-number { color: var(--nz-ink-3); font-family: var(--nz-font-mono); font-size: var(--nz-text-xs); }
.rank-country { display: grid; min-width: 0; }
.rank-country b { overflow: hidden; font-size: var(--nz-text-sm); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.rank-country small { color: var(--nz-ink-3); font-size: var(--nz-text-xs); }
.rank-row > b { min-width: 54px; font-size: var(--nz-text-sm); font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
.donut-layout { min-height: 310px; display: grid; grid-template-columns: 48% minmax(0, 1fr); align-items: center; gap: var(--nz-space-4); padding: var(--nz-space-5); }
.donut-wrap { position: relative; width: 100%; max-width: 240px; aspect-ratio: 1; margin: auto; }
.donut-total { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; pointer-events: none; }
.donut-total b { font-size: var(--nz-text-2xl); font-weight: 500; font-variant-numeric: tabular-nums; }
.donut-total span { color: var(--nz-ink-2); font-size: var(--nz-text-xs); }
.category-legend { display: grid; gap: 8px; min-width: 0; }
.category-item { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 9px; font-size: var(--nz-text-sm); }
.category-item i { width: 10px; height: 10px; border-radius: 50%; background: var(--item, var(--nz-ink-3)); }
.category-item[data-series="0"] { --item: var(--sx-series-1); }
.category-item[data-series="1"] { --item: var(--sx-series-2); }
.category-item[data-series="2"] { --item: var(--sx-series-3); }
.category-item[data-series="3"] { --item: var(--sx-series-4); }
.category-item[data-series="4"] { --item: var(--sx-series-5); }
.category-item[data-series="5"] { --item: var(--sx-series-6); }
.category-item[data-series="6"] { --item: var(--sx-series-7); }
.category-item[data-series="7"] { --item: var(--sx-series-8); }
.category-item span { overflow: hidden; color: var(--nz-ink-2); text-overflow: ellipsis; white-space: nowrap; }
.category-item b { font-weight: 500; font-variant-numeric: tabular-nums; }
.port-matrix { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--nz-space-3); padding: var(--nz-space-5); }
.port-tile { display: grid; align-content: space-between; gap: 4px; min-height: 100px; padding: var(--nz-space-4); border-radius: var(--nz-radius-control); background: var(--nz-raised); }
.port-tile span { font-family: var(--nz-font-mono); font-size: var(--nz-text-sm); font-weight: 500; color: var(--nz-accent); }
.port-tile b { font-size: var(--nz-text-xl); font-weight: 500; font-variant-numeric: tabular-nums; }
.port-tile small { color: var(--nz-ink-3); font-size: var(--nz-text-xs); }

/* ---------- System health ---------- */
.health-badge {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 2px 10px 2px 8px; border-radius: var(--nz-radius-pill); border: 1px solid transparent;
  background: var(--nz-ok-soft); color: var(--nz-ok); font-size: var(--nz-text-xs); font-weight: 500; line-height: 1.6;
}
.health-badge i { width: 8px; height: 8px; flex: none; border-radius: 50%; border: 1.5px solid currentColor; background: currentColor; }
.health-badge.degraded { color: var(--nz-warn); background: var(--nz-warn-soft); }
.health-badge.degraded i { background: transparent; }
.sensor-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--nz-space-4); margin-bottom: var(--nz-space-4); }
.sensor-card { display: flex; flex-direction: column; min-height: 165px; padding: var(--nz-space-5); border: 1px solid var(--nz-line); border-radius: var(--nz-radius-plate); background: var(--nz-surface); }
.sensor-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sensor-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--nz-radius-control); color: var(--nz-accent); background: var(--nz-accent-soft); }
.sensor-icon svg { width: 18px; height: 18px; }
.sensor-state {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 2px 10px 2px 8px; border-radius: var(--nz-radius-pill);
  background: var(--state-soft, var(--nz-raised)); color: var(--state, var(--nz-ink-2));
  font-size: var(--nz-text-xs); font-weight: 500; line-height: 1.6;
}
.sensor-state i { width: 8px; height: 8px; flex: none; border-radius: 50%; border: 1.5px solid var(--state, var(--nz-line-strong)); background: var(--state, transparent); }
.sensor-state[data-state="online"] { --state: var(--nz-ok); --state-soft: var(--nz-ok-soft); }
.sensor-state[data-state="limited"] { --state: var(--nz-warn); --state-soft: var(--nz-warn-soft); }
.sensor-state[data-state="limited"] i { background: transparent; }
.sensor-state[data-state="error"] { --state: var(--nz-bad); --state-soft: var(--nz-bad-soft); }
.sensor-card h3 { margin: var(--nz-space-4) 0 4px; font-size: var(--nz-text-lg); }
.sensor-card p { margin: 0; color: var(--nz-ink-2); font-size: var(--nz-text-sm); }
.sensor-card footer { margin-top: auto; padding-top: var(--nz-space-3); color: var(--nz-ink-3); font-size: var(--nz-text-xs); }
.system-detail-panel { margin-bottom: var(--nz-space-4); }
.detail-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; }
.detail-grid div { min-width: 0; padding: var(--nz-space-4) var(--nz-space-5); border-right: 1px solid var(--nz-line); }
.detail-grid div:last-child { border-right: 0; }
.detail-grid dt { color: var(--nz-ink-2); font-size: var(--nz-text-xs); }
.detail-grid dd { margin: 4px 0 0; font-family: var(--nz-font-mono); font-size: var(--nz-text-sm); word-break: break-word; }
.notice-panel { flex-direction: row; gap: var(--nz-space-4); padding: var(--nz-space-5); border-left-width: 3px; border-left-color: var(--nz-info); }
.notice-panel svg { width: 22px; height: 22px; flex: none; color: var(--nz-info); }
.notice-panel b { font-weight: 600; }
.notice-panel p { margin: 4px 0 0; max-width: var(--nz-measure); color: var(--nz-ink-2); font-size: var(--nz-text-sm); }

/* ---------- Account ---------- */
.account-grid { display: grid; grid-template-columns: minmax(260px, 0.7fr) minmax(0, 1.2fr); gap: var(--nz-space-4); }
.profile-card { display: grid; align-content: center; justify-items: center; gap: var(--nz-space-2); min-height: 340px; padding: var(--nz-space-8); text-align: center; }
.profile-avatar {
  width: 64px; height: 64px; display: grid; place-items: center; margin-bottom: var(--nz-space-2);
  border-radius: var(--nz-radius-plate); background: var(--nz-accent); color: var(--nz-accent-ink);
  font-family: var(--nz-font-serif); font-size: var(--nz-text-2xl); font-weight: 500;
}
.profile-card > div:nth-child(2) { display: grid; gap: 2px; justify-items: center; }
.profile-card h2 { margin: 2px 0; font-size: var(--nz-text-xl); }
.profile-card p { margin: 0; max-width: 300px; color: var(--nz-ink-2); font-size: var(--nz-text-sm); }
.profile-meta { display: grid; gap: 4px; justify-items: center; margin-top: var(--nz-space-4); }
.profile-meta span { display: inline-flex; align-items: center; gap: 7px; color: var(--nz-ok); font-size: var(--nz-text-sm); font-weight: 500; }
.profile-meta i { width: 8px; height: 8px; border-radius: 50%; background: var(--nz-ok); }
.profile-meta small { color: var(--nz-ink-3); font-size: var(--nz-text-xs); }
.password-form { display: grid; gap: var(--nz-space-3); padding: var(--nz-space-5); }
.password-form label { display: grid; gap: 6px; }
.password-form > small { color: var(--nz-ink-3); font-size: var(--nz-text-xs); }
.strength-meter { height: 6px; overflow: hidden; border-radius: var(--nz-radius-pill); background: var(--nz-raised); }
.strength-meter span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--nz-bad); transition: width 240ms var(--nz-ease), background-color 240ms var(--nz-ease); }
.strength-meter span[data-score="2"], .strength-meter span[data-score="3"] { background: var(--nz-warn); }
.strength-meter span[data-score="4"] { background: var(--nz-info); }
.strength-meter span[data-score="5"] { background: var(--nz-ok); }
.password-form .primary-button { justify-self: start; }

/* ---------- Blocked IPs ---------- */
.automation-strip {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--nz-space-4); align-items: center;
  margin-bottom: var(--nz-space-4); padding: var(--nz-space-4) var(--nz-space-5);
  border: 1px solid var(--nz-line); border-left: 3px solid var(--nz-ok); border-radius: var(--nz-radius-control); background: var(--nz-surface);
}
.automation-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--nz-radius-control); color: var(--nz-ok); background: var(--nz-ok-soft); }
.automation-icon svg { width: 22px; height: 22px; }
.automation-strip b { font-weight: 600; }
.automation-strip p { margin: 4px 0 0; max-width: var(--nz-measure); color: var(--nz-ink-2); font-size: var(--nz-text-sm); }
.block-summary-grid { margin-bottom: var(--nz-space-4); }
.attempt-count { font-weight: 600; font-variant-numeric: tabular-nums; }
.threshold-copy { color: var(--nz-ink-3); font-size: var(--nz-text-xs); }
.block-status {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 2px 10px 2px 8px; border-radius: var(--nz-radius-pill);
  font-size: var(--nz-text-xs); font-weight: 500; line-height: 1.6; letter-spacing: 0.02em;
}
.block-status i { width: 8px; height: 8px; flex: none; border-radius: 50%; border: 1.5px solid currentColor; background: currentColor; }
.block-status.active { color: var(--nz-bad); background: var(--nz-bad-soft); }
.block-status.released { color: var(--nz-ink-2); background: var(--nz-raised); }
.block-status.released i { border-color: var(--nz-line-strong); background: transparent; }
.time-cell { display: grid; }
.time-cell b { font-weight: 500; white-space: nowrap; }
.time-cell small { color: var(--nz-ink-3); font-size: var(--nz-text-xs); }

/* ---------- IP modal and toast (the only floating surfaces, the only shadows) ---------- */
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: var(--nz-space-5); }
.modal-backdrop { position: absolute; inset: 0; background: color-mix(in srgb, var(--nz-canvas) 70%, transparent); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.modal-card {
  position: relative; width: min(760px, 100%); max-height: min(820px, 92dvh); overflow: auto;
  border: 1px solid var(--nz-line); border-radius: var(--nz-radius-plate); background: var(--nz-surface); color: var(--nz-ink);
  box-shadow: var(--nz-shadow-float);
}
.modal-close { position: absolute; right: 12px; top: 12px; z-index: 2; font-size: var(--nz-text-xl); line-height: 1; }
.ip-detail-head { padding: var(--nz-space-5) var(--nz-space-6) var(--nz-space-4); border-bottom: 1px solid var(--nz-line); }
.ip-detail-head .mono { display: block; margin: 4px 0; font-size: var(--nz-text-2xl); font-weight: 500; }
.ip-detail-head p { margin: 0; color: var(--nz-ink-2); font-size: var(--nz-text-sm); }
.ip-flags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--nz-space-3); }
.ip-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: var(--nz-space-4) var(--nz-space-6); overflow: hidden; border: 1px solid var(--nz-line); border-radius: var(--nz-radius-control); background: var(--nz-line); }
.ip-stat { min-width: 0; padding: var(--nz-space-3) var(--nz-space-4); background: var(--nz-surface); }
.ip-stat span { display: block; color: var(--nz-ink-2); font-size: var(--nz-text-xs); }
.ip-stat b { display: block; margin-top: 2px; font-size: var(--nz-text-lg); font-weight: 500; font-variant-numeric: tabular-nums; }
.ip-stat b[data-risk] { color: var(--risk); }
.ip-detail-section { padding: 0 var(--nz-space-6) var(--nz-space-6); }
.ip-detail-section h3 { margin: var(--nz-space-3) 0 var(--nz-space-2); font-size: var(--nz-text-lg); }
.compact-events { display: grid; max-height: 280px; overflow: auto; border: 1px solid var(--nz-line); border-radius: var(--nz-radius-control); }
.compact-event { display: grid; grid-template-columns: 120px 100px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--nz-line); color: var(--nz-ink-2); font-size: var(--nz-text-xs); }
.compact-event:last-child { border-bottom: 0; }
.compact-event span:nth-child(1), .compact-event span:nth-child(2) { font-family: var(--nz-font-mono); }
.compact-event b { overflow: hidden; color: var(--nz-ink); font-size: var(--nz-text-sm); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.compact-event [data-risk] { color: var(--risk); font-weight: 500; }
.toast {
  position: fixed; right: 20px; bottom: 20px; z-index: 120; max-width: min(420px, calc(100% - 40px));
  padding: 12px 16px; border: 1px solid var(--nz-line); border-left-width: 3px; border-left-color: var(--nz-ok);
  border-radius: var(--nz-radius-control); background: var(--nz-surface); color: var(--nz-ink); font-size: var(--nz-text-sm);
  box-shadow: var(--nz-shadow-float); opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity 240ms var(--nz-ease), transform 240ms var(--nz-ease);
}
.toast.show { opacity: 1; transform: none; }
.toast.error { border-left-color: var(--nz-bad); }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  :root { --sx-sidebar: 224px; }
  .overview-grid { grid-template-columns: minmax(0, 1fr); }
  .live-panel { min-height: 410px; }
  .live-feed { max-height: 300px; }
  .sensor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail-grid div { border-bottom: 1px solid var(--nz-line); }
  .detail-grid div:nth-child(2n) { border-right: 0; }
  .detail-grid div:nth-last-child(-n + 2) { border-bottom: 0; }
}
@media (max-width: 980px) {
  .login-main { grid-template-columns: minmax(0, 1fr); gap: var(--nz-space-8); align-items: start; }
  .login-visual { min-height: 380px; }
}
@media (max-width: 900px) {
  .app-shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: fixed; inset: 0 auto 0 0; width: min(300px, 86vw); height: auto; visibility: hidden; transform: translateX(-100%); transition: transform 200ms var(--nz-ease); }
  .app-shell.menu-open .sidebar { visibility: visible; transform: none; box-shadow: var(--nz-shadow-float); }
  .app-shell.menu-open .workspace::before { content: ""; position: fixed; inset: 0; z-index: 25; background: color-mix(in srgb, var(--nz-canvas) 55%, transparent); }
  .mobile-menu { display: inline-flex; }
  .account-chip div { display: none; }
  .account-chip { padding-right: 4px; }
  .live-chip { display: none; }
  .analysis-grid, .analytics-grid, .account-grid { grid-template-columns: minmax(0, 1fr); }
  .filters-panel select { flex: 1 1 160px; }
}
@media (max-width: 760px) {
  .login-masthead { padding-inline: var(--nz-space-4); }
  .login-main { padding-block: var(--nz-space-6) var(--nz-space-10); }
  .login-panel h1 { font-size: var(--nz-text-2xl); }
  .login-visual { display: none; }
  .topbar { gap: var(--nz-space-2); padding-inline: var(--nz-space-4); }
  .topbar-title { flex: 0 1 auto; }
  .topbar-title span { display: none; }
  .topbar-title h1 { font-size: var(--nz-text-lg); }
  .topbar-actions { flex: 1 1 auto; min-width: 0; justify-content: flex-end; gap: 4px; }
  .range-control { flex: 0 1 auto; min-width: 0; }
  .range-control span { display: none; }
  .range-control select { width: 100%; min-width: 0; max-width: 150px; }
  .square-button { display: none; }
  .workspace > main { padding: var(--nz-space-4) var(--nz-space-4) var(--nz-space-10); }
  .password-warning { flex-wrap: wrap; }
  .password-warning button { width: 100%; }
  .metric-foot small { display: none; }
  .map-panel { min-height: 440px; }
  .map-wrap, #world-map { min-height: 300px; height: 300px; }
  .map-footer { flex-direction: column; align-items: flex-start; padding: var(--nz-space-3) var(--nz-space-4); }
  .map-footer small { text-align: left; }
  .map-legend { display: none; }
  .panel-header { padding-inline: var(--nz-space-4); }
  .page-intro { flex-direction: column; align-items: flex-start; }
  .page-intro .secondary-button { width: 100%; }
  .filters-panel { display: grid; grid-template-columns: minmax(0, 1fr); }
  .search-box, .filters-panel select, .ghost-button { width: 100%; }
  .events-table td:first-child, .blocked-table td:nth-child(6) { white-space: normal; }
  .events-table th:nth-child(4), .events-table td:nth-child(4), .events-table th:nth-child(5), .events-table td:nth-child(5), .events-table th:nth-child(7), .events-table td:nth-child(7) { display: none; }
  .donut-layout { grid-template-columns: minmax(0, 1fr); }
  .donut-wrap { max-width: 200px; }
  .port-matrix { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sensor-grid { grid-template-columns: minmax(0, 1fr); }
  .detail-grid { grid-template-columns: minmax(0, 1fr); }
  .detail-grid div { border-right: 0; border-bottom: 1px solid var(--nz-line); }
  .detail-grid div:nth-last-child(2) { border-bottom: 1px solid var(--nz-line); }
  .detail-grid div:last-child { border-bottom: 0; }
  .ip-detail-head, .ip-detail-section { padding-inline: var(--nz-space-4); }
  .ip-stat-grid { grid-template-columns: 1fr 1fr; margin-inline: var(--nz-space-4); }
  .compact-event { grid-template-columns: 100px minmax(0, 1fr) auto; }
  .compact-event span:nth-child(2) { display: none; }
  .automation-strip { grid-template-columns: auto minmax(0, 1fr); }
  .automation-live { grid-column: 1 / -1; justify-self: start; }
  .blocked-table th:nth-child(2), .blocked-table td:nth-child(2), .blocked-table th:nth-child(4), .blocked-table td:nth-child(4), .blocked-table th:nth-child(6), .blocked-table td:nth-child(6) { display: none; }
  .toast { right: 12px; left: 12px; bottom: 12px; max-width: none; }
}
@media (max-width: 480px) {
  /* Phones: the time-range select moves to its own row so the page title keeps its space. */
  .topbar { flex-wrap: wrap; row-gap: 6px; }
  .topbar-title { flex: 1 1 auto; min-width: 0; }
  .topbar-actions { display: contents; }
  .range-control { order: 10; flex: 1 1 100%; min-width: 0; }
  .range-control select { max-width: none; }
  .nz-theme-toggle, .account-chip { flex: none; }
}

/* ---------- Accessibility helpers (round 2) ---------- */
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 100; padding: 8px 14px; border-radius: var(--nz-radius-control); background: var(--nz-accent); color: var(--nz-accent-ink); font-weight: 500; transform: translateY(-200%); }
.skip-link:focus { transform: none; outline: 2px solid var(--nz-ink); outline-offset: 2px; }
#main-content:focus { outline: none; }

/* ---------- Alert notifications card ---------- */
.notify-card { margin-top: var(--nz-space-4); }
.login-hint { font-size: var(--nz-text-xs); line-height: 1.5; color: var(--nz-ink-3); }
.auth-form .nz-select { width: 100%; min-height: 42px; }
.sessions-card { margin-top: var(--nz-space-4); }
.sessions-intro, .sessions-shared p { margin: 0 0 var(--nz-space-3); font-size: var(--nz-text-sm); color: var(--nz-ink-2); }
.sessions-table td { overflow-wrap: anywhere; }
.notify-form { display: grid; gap: var(--nz-space-4); padding: var(--nz-space-5); }
.notify-intro { margin: 0; max-width: var(--nz-measure); color: var(--nz-ink-2); font-size: var(--nz-text-sm); }
.notify-group { display: grid; gap: var(--nz-space-3); margin: 0; padding: var(--nz-space-4); border: 1px solid var(--nz-line); border-radius: var(--nz-radius-control); min-width: 0; }
.notify-group legend { padding: 0 6px; font-size: var(--nz-text-xs); font-weight: 600; color: var(--nz-ink-2); }
.notify-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--nz-space-3); }
.notify-form .nz-field { font-size: var(--nz-text-xs); font-weight: 500; color: var(--nz-ink-2); }
.notify-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nz-space-3); }
.notify-log h3 { margin: 0 0 var(--nz-space-2); font-size: var(--nz-text-sm); }
.notify-recent { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; color: var(--nz-ink-2); font-size: var(--nz-text-sm); }
.notify-recent li[data-ok="false"] { color: var(--nz-bad); }
.notify-recent li[data-ok="true"] { color: var(--nz-ok); }
/* NOBET VISUAL 20261011 START */
/* Nöbet / Architecture of connection — shared visual layer, 2026-10-11.
   Master source. Distributed by visual-20261011/build_visuals.py; never edit generated copies.
   Artwork is decorative. Controls, text, state classes and all form contracts stay in the app. */
:root {
  --nz-canvas: #eaf0e9;
  --nz-surface: #f8faf6;
  --nz-raised: #e0e9df;
  --nz-line: #cbd7cb;
  --nz-line-strong: #9faf9f;
  --nz-ink: #1d302b;
  --nz-ink-2: #52685b;
  --nz-ink-3: #596a60;
  --nz-accent: #286d5e;
  --nz-accent-hover: #205747;
  --nz-accent-soft: #dcece1;
  --nz-radius-plate: 20px;
  --nz-radius-control: 10px;
  --nv-art-day: url("./art/nobet-day.jpg?v=20261011");
  --nv-art-night: url("./art/nobet-night.jpg?v=20261011");
  --nv-art: var(--nv-art-day);
  --nv-shadow: 0 12px 32px -22px #31543d55, 0 1px 0 #ffffffa6 inset;
  --nv-shadow-large: 0 30px 80px -36px #294b386b, 0 1px 0 #ffffffb3 inset;
  --nv-grid: #36684708;
  --nv-hero-wash: #f0f5ed;
  --nv-hero-ink: #20372c;
  --nv-metal: #b99450;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --nz-accent-ink: #122b21;
  --nz-canvas: #162725;
  --nz-surface: #203430;
  --nz-raised: #2a4039;
  --nz-line: #38524a;
  --nz-line-strong: #597669;
  --nz-ink: #e8efe4;
  --nz-ink-2: #aec2b3;
  --nz-ink-3: #93ac9c;
  --nz-accent: #8acbb1;
  --nz-accent-hover: #a1d8c1;
  --nz-accent-soft: #29463b;
  --nv-art: var(--nv-art-night);
  --nv-shadow: 0 16px 36px -25px #030c0799, 0 1px 0 #c9ebc710 inset;
  --nv-shadow-large: 0 32px 80px -36px #020905cf, 0 1px 0 #d9efd014 inset;
  --nv-grid: #a0c49a05;
  --nv-hero-wash: #192e27;
  --nv-hero-ink: #e8efe4;
  --nv-metal: #d6b875;
}
:root[data-theme="black"] {
  color-scheme: dark;
  --nz-accent-ink: #04110f;
  --nz-canvas: #0a0a0a;
  --nz-surface: #121212;
  --nz-raised: #1b1b1b;
  --nz-line: #2a2a2a;
  --nz-line-strong: #6b6b6b;
  --nz-ink: #ededed;
  --nz-ink-2: #b3b3b3;
  --nz-ink-3: #8f8f8f;
  --nz-accent: #5ec2b5;
  --nz-accent-hover: #80d4c9;
  --nz-accent-soft: #0f2a27;
  --nv-art: var(--nv-art-night);
  --nv-shadow: 0 16px 36px -25px #000000d9, 0 1px 0 #ffffff0d inset;
  --nv-shadow-large: 0 32px 80px -36px #000000f2, 0 1px 0 #ffffff12 inset;
  --nv-grid: #ffffff05;
  --nv-hero-wash: #0f0f0f;
  --nv-hero-ink: #ededed;
  --nv-metal: #d6b875;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="black"]) {
    color-scheme: dark; --nz-accent-ink: #122b21;
    --nz-canvas: #162725; --nz-surface: #203430; --nz-raised: #2a4039;
    --nz-line: #38524a; --nz-line-strong: #597669;
    --nz-ink: #e8efe4; --nz-ink-2: #aec2b3; --nz-ink-3: #93ac9c;
    --nz-accent: #8acbb1; --nz-accent-hover: #a1d8c1; --nz-accent-soft: #29463b;
    --nv-art: var(--nv-art-night);
    --nv-shadow: 0 16px 36px -25px #030c0799, 0 1px 0 #c9ebc710 inset;
    --nv-shadow-large: 0 32px 80px -36px #020905cf, 0 1px 0 #d9efd014 inset;
    --nv-grid: #a0c49a05; --nv-hero-wash: #192e27; --nv-hero-ink: #e8efe4; --nv-metal: #d6b875;
  }
}
body {
  background-color: var(--nz-canvas);
  background-image: radial-gradient(ellipse at 0 0, color-mix(in srgb, var(--nz-accent) 9%, transparent), transparent 58%), linear-gradient(var(--nv-grid) 1px, transparent 1px), linear-gradient(90deg, var(--nv-grid) 1px, transparent 1px);
  background-size: 100% 900px, 48px 48px, 48px 48px;
  background-repeat: no-repeat, repeat, repeat;
}
.nz-masthead { background: color-mix(in srgb, var(--nz-surface) 94%, transparent); border-bottom-color: var(--nz-line); box-shadow: 0 3px 18px #122d1907; }
:is(.nz-button,.button,.primary-button,.secondary-button) { border-radius: var(--nz-radius-control); }
:is(.nz-button.is-primary,.button.primary,.button-primary,.primary-button) { box-shadow: 0 3px 9px #0b33291a, 0 1px 0 #ffffff1f inset; }
:is(.nz-input,.nz-select,.nz-textarea) { background: color-mix(in srgb, var(--nz-surface) 94%, var(--nz-canvas)); }
:is(.nz-plate,.nz-dialog) { box-shadow: var(--nv-shadow); }
:is(.nz-stats) { border: 1px solid var(--nz-line); border-radius: 16px; background: var(--nz-surface); padding: 16px 0; box-shadow: var(--nv-shadow); }
.nz-table thead th { background: var(--nz-raised); }
/* One rail treatment across the three dense applications; semantic status colors are preserved. */
:is(.shared-sidebar,.app-rail,.sidebar) {
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--nz-accent-soft) 80%, var(--nz-surface)), var(--nz-surface) 290px);
  border-right-color: var(--nz-line);
}
:is(.shared-brand,.app-rail>.brand,.sidebar>.brand) { border-bottom: 1px solid var(--nz-line); padding-bottom: 22px; margin-bottom: 14px; }
:is(.shared-mark,.brand-mark,.card-mark) { box-shadow: 0 0 0 5px color-mix(in srgb, var(--nz-accent) 7%, transparent); border: 1px solid color-mix(in srgb, var(--nz-accent) 26%, transparent); }
:is(.shared-nav a.active,.nz-rail-nav a.active,.nav-item.active) { border-radius: 10px; background: var(--nz-accent-soft); box-shadow: inset 3px 0 var(--nv-metal); }
@media (max-width: 600px) { :root { --nz-radius-plate: 16px; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto !important; } }

/* Sentinel: artwork stays away from the live map and charts. */
.table-scroll { position: relative; }
.login-panel { padding: 30px; border: 1px solid var(--nz-line); border-radius: 20px; background: var(--nz-surface); box-shadow: var(--nv-shadow); }
.login-panel h1 { font-size: 40px; }
.login-visual { min-height: 620px; background: var(--nv-art) 75% 20% / cover; border-radius: 24px; box-shadow: var(--nv-shadow-large); justify-content: flex-end; }
.login-visual::before { content: ""; position: absolute; inset: 35% 0 0; background: linear-gradient(0deg,var(--nv-hero-wash) 0%,color-mix(in srgb,var(--nv-hero-wash) 90%,transparent) 45%,transparent); }
.login-visual .radar { opacity: .16; width: 210px; height: 210px; right: -70px; top: -70px; }
.visual-copy { padding-top: 160px; }
.visual-copy strong { font-size: 30px; }
.signal-card { border-color: color-mix(in srgb,var(--nz-ink) 20%,transparent); }
.topbar { background: color-mix(in srgb,var(--nz-surface) 96%,transparent); }
.page.active > .page-intro { position: relative; overflow: hidden; padding: 26px; min-height: 150px; border: 1px solid var(--nz-line); border-radius: 20px; background: linear-gradient(90deg,var(--nv-hero-wash) 25%,color-mix(in srgb,var(--nv-hero-wash) 92%,transparent) 58%,color-mix(in srgb,var(--nv-hero-wash) 60%,transparent)),var(--nv-art) right 42% / auto 240%; box-shadow: var(--nv-shadow); }
#page-overview::before { content: ""; display: block; height: 132px; margin-bottom: 24px; border: 1px solid var(--nz-line); border-radius: 20px; background: linear-gradient(90deg,var(--nv-hero-wash),transparent 72%),var(--nv-art) 72% 48% / cover; box-shadow: var(--nv-shadow); }
:is(.panel,.metric-card,.sensor-card,.account-card) { box-shadow: var(--nv-shadow); }
.metric-card { border-top: 2px solid color-mix(in srgb,var(--nz-accent) 55%,var(--nz-line)); }
.metric-card .metric-icon { border-radius: 12px; background: var(--nz-accent-soft); }
@media (max-width: 900px) { .login-main { gap: 24px; } .login-visual { min-height: 590px; padding: 24px; } }
@media (max-width: 760px) { .login-panel { padding: 24px; } .page.active > .page-intro { padding: 20px; min-height: 132px; } #page-overview::before { height: 100px; } }
@media (max-width: 760px) { .login-panel::before { content:""; display:block; height:150px; border:1px solid var(--nz-line); border-radius:14px; margin-bottom:22px; background:var(--nv-art) 80% 45% / cover; } }

/* NOBET VISUAL 20261011 END */

/* DESIGN POLISH 20261021 — app-owned refinements after the generated visual layer. */
/* Summary card labels: three were written in capitals and "Blocked" was not; all four now read the same. */
.metric-top > span:first-child { text-transform:uppercase; }
/* 22 Oct 2026: weekly summary + read-only block suggestions (Threat analytics page). */
.weekly-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--nz-space-3); padding: var(--nz-space-4) var(--nz-space-5); }
.weekly-stat .nz-stat-value { display: block; font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.weekly-stat .trend { display: block; margin-top: 2px; font-size: var(--nz-text-sm); }
.weekly-stat .trend.up { color: var(--nz-bad); }
.weekly-stat .trend.down { color: var(--nz-ok); }
.weekly-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--nz-space-5); padding: 0 var(--nz-space-5) var(--nz-space-4); }
.weekly-subtitle { margin: 0 0 var(--nz-space-2); font-size: var(--nz-text-sm); font-weight: 600; color: var(--nz-ink-2); }
.weekly-days { display: grid; gap: 6px; }
.day-row { display: grid; grid-template-columns: minmax(48px, 38%) minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: var(--nz-text-sm); }
.day-row > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.day-row > b { min-width: 40px; text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; }
.panel-note { margin: 0; padding: var(--nz-space-3) var(--nz-space-5); color: var(--nz-ink-2); font-size: var(--nz-text-sm); border-bottom: 1px solid var(--nz-line); }
.evidence-cell { font-size: var(--nz-text-sm); line-height: 1.5; white-space: nowrap; }
.suggestions-panel .risk-pill { margin: 2px 0; }