/* ============================================================================
   Lares Console — design system
   macOS System Settings / Apple Health model. Light, calm, graphite + system blue.
   One dark surface: the attack Map (.surface-dark). SF Pro. Tabular numerals.
   ============================================================================ */

:root {
  /* surfaces */
  --bg-app:        #f2f2f5;
  --surface:       #ffffff;
  --surface-2:     #f5f5f7;
  --surface-sunk:  #ececef;
  --sidebar-bg:    rgba(246,246,248,.72);
  --hairline:      rgba(0,0,0,.10);
  --hairline-2:    rgba(0,0,0,.06);
  --separator:     #e5e5ea;

  /* graphite ink */
  --text:   #1c1e24;
  --text-2: #5b6270;
  --text-3: #8a909c;
  --text-4: #aeb3bd;

  /* Apple system blue */
  --accent:       #007aff;
  --accent-hover: #0a6ce0;
  --accent-press: #0a57bf;
  --accent-deep:  #0b62d6;
  --accent-tint:  rgba(0,122,255,.12);

  /* semantics */
  --danger:      #da3633;  --danger-tint: rgba(218,54,51,.10);
  --success:     #248a3d;  --success-tint: rgba(36,138,61,.10);
  --shadow-ai:   #6659d6;  --shadow-tint:  rgba(102,89,214,.10);
  --warn:        #c4610a;  --warn-tint:    rgba(196,97,10,.10);

  /* elevation */
  --shadow-sm: 0 1px 2px rgba(16,18,24,.06), 0 1px 1px rgba(16,18,24,.04);
  --shadow-md: 0 4px 16px rgba(16,18,24,.08), 0 1px 2px rgba(16,18,24,.04);
  --shadow-lg: 0 12px 40px rgba(16,18,24,.16);

  /* radii */
  --r-xs: 6px; --r-sm: 8px; --r-md: 10px; --r-lg: 12px; --r-xl: 16px; --r-pill: 999px;

  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
          "Inter var", "Segoe UI", system-ui, Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  --spring: cubic-bezier(.32,.72,0,1);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg-app); color: var(--text);
  font-family: var(--sans); font-size: 14px; line-height: 1.45;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
.num, .tnum { font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
button { font-family: inherit; }
a { color: var(--accent-deep); text-decoration: none; }

/* ───────────────────────────── app shell ───────────────────────────── */
.app { display: flex; height: 100vh; overflow: hidden; }

.sidebar {
  width: 248px; flex: none; display: flex; flex-direction: column;
  background: var(--sidebar-bg);
  -webkit-backdrop-filter: saturate(180%) blur(30px);
  backdrop-filter: saturate(180%) blur(30px);
  border-right: .5px solid var(--hairline);
  padding: 14px 12px 12px;
}
@supports not (backdrop-filter: blur(1px)) { .sidebar { background: #f6f6f8; } }

.side-brand { display: flex; align-items: center; gap: 10px; padding: 6px 8px 16px; }
.side-brand .mark { width: 30px; height: 30px; color: var(--text); }
.side-brand .mark svg { width: 30px; height: 30px; display: block; }
.side-wordmark { font-size: 18px; font-weight: 600; letter-spacing: -.02em; line-height: 1; }
.side-tag { font-size: 10.5px; color: var(--text-3); letter-spacing: .01em; margin-top: 2px; }

.side-nav { flex: 1; overflow-y: auto; overflow-x: hidden; }
.nav-group { margin-bottom: 14px; }
.nav-group-label { font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-3); padding: 4px 10px; }
.nav-item {
  width: 100%; display: flex; align-items: center; gap: 10px; cursor: pointer;
  border: none; background: none; color: var(--text-2); font-size: 14px; font-weight: 450;
  padding: 7px 10px; border-radius: var(--r-sm); text-align: left; transition: background .14s, color .14s;
}
.nav-item .ico { width: 20px; height: 20px; display: grid; place-items: center; color: var(--text-3); }
.nav-item .ico svg { width: 18px; height: 18px; }
.nav-item .lbl { flex: 1; }
.nav-item:hover { background: rgba(0,0,0,.045); color: var(--text); }
.nav-item.selected { background: var(--accent-tint); color: var(--accent-deep); font-weight: 550; }
.nav-item.selected .ico { color: var(--accent); }
.nav-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.nav-group.lab .nav-item { color: var(--text-3); }
.nav-badge { min-width: 18px; height: 18px; padding: 0 6px; border-radius: var(--r-pill);
  font-size: 11px; font-weight: 600; display: grid; place-items: center; color: #fff; }
.nav-badge.risk { background: var(--danger); } .nav-badge.shadow { background: var(--shadow-ai); }
.nav-badge.dot { min-width: 8px; width: 8px; height: 8px; padding: 0; background: var(--danger); }

.side-foot { border-top: .5px solid var(--hairline); padding-top: 10px; margin-top: 6px; }
.acct-card { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--r-md);
  background: rgba(0,0,0,.03); font-size: 12.5px; }
.acct-tenant { font-weight: 550; display: flex; align-items: center; gap: 5px; }
.acct-role { font-size: 10.5px; font-weight: 600; padding: 2px 7px; border-radius: var(--r-pill);
  text-transform: uppercase; letter-spacing: .03em; }
.acct-role.owner { background: var(--accent-tint); color: var(--accent-deep); }
.acct-role.viewer { background: var(--shadow-tint); color: var(--shadow-ai); }
.acct-role.open { background: rgba(0,0,0,.06); color: var(--text-3); }
.acct-out { margin-left: auto; color: var(--text-3); font-size: 12px; }
.acct-out:hover { color: var(--text); }

/* ───────────────────────────── content / panes ─────────────────────── */
.content { flex: 1; overflow-y: auto; position: relative; }
.pane { min-height: 100%; }
.pane[hidden] { display: none; }
.pane-inner { max-width: 900px; margin: 0 auto; padding: 34px clamp(20px,4vw,44px) 72px; }
.now-inner  { max-width: 820px; margin: 0 auto; padding: 40px clamp(20px,4vw,44px) 80px; }
.pane-title { font-size: 26px; font-weight: 600; letter-spacing: -.02em; margin: 0 0 22px; }
.section-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-3); margin: 0 0 12px 4px; }

/* grouped cards (System-Settings style) */
.group { margin-bottom: 26px; }
.group-label { font-size: 12.5px; font-weight: 600; color: var(--text-3); padding: 0 4px 8px;
  display: flex; align-items: center; gap: 8px; }
.group-card { background: var(--surface); border: .5px solid var(--hairline); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm); overflow: hidden; }
.group-card .row { display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  border-bottom: .5px solid var(--hairline-2); }
.group-card .row:last-child { border-bottom: none; }
.tag { margin-left: auto; font-size: 11px; color: var(--text-3); font-weight: 500; }
.tag.link { cursor: pointer; } .tag.link:hover { color: var(--accent-deep); }
.mini-empty { padding: 18px 16px; font-size: 13px; color: var(--text-3); line-height: 1.55; }

/* ───────────────────────────── NOW — verdict ───────────────────────── */
.verdict { background: var(--surface); border: .5px solid var(--hairline); border-radius: var(--r-xl);
  box-shadow: var(--shadow-md); padding: 26px 28px; position: relative; overflow: hidden; }
.verdict::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; }
.verdict.clear::before { background: var(--success); }
.verdict.alert::before { background: var(--danger); }
.verdict-eyebrow { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .07em; color: var(--text-3); }
.verdict-eyebrow .pulse { width: 8px; height: 8px; border-radius: 50%; }
.verdict.clear .pulse { background: var(--success); box-shadow: 0 0 0 0 var(--success-tint); animation: pg 2.6s infinite; }
.verdict.alert .pulse { background: var(--danger); box-shadow: 0 0 0 0 var(--danger-tint); animation: pr 2.6s infinite; }
@keyframes pg { 70% { box-shadow: 0 0 0 9px rgba(36,138,61,0); } 100% { box-shadow: 0 0 0 0 rgba(36,138,61,0); } }
@keyframes pr { 70% { box-shadow: 0 0 0 9px rgba(218,54,51,0); } 100% { box-shadow: 0 0 0 0 rgba(218,54,51,0); } }
.verdict-title { font-size: 30px; font-weight: 600; letter-spacing: -.025em; line-height: 1.12; margin: 14px 0 0; }
.verdict.clear .verdict-title { color: var(--text); }
.verdict-sub { font-size: 16px; color: var(--text-2); margin: 12px 0 0; max-width: 52ch; }
.verdict-metric { display: flex; align-items: baseline; gap: 14px; margin-top: 22px; flex-wrap: wrap; }
.verdict-metric .amt { font-size: 44px; font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.verdict-metric .amt.risk { color: var(--danger); }
.verdict-metric .cap { font-size: 13.5px; color: var(--text-3); }
.verdict-actions { margin-top: 24px; display: flex; gap: 10px; }

/* posture stat strip (Health highlights) */
.stat-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 30px; }
.stat-tile { background: var(--surface); border: .5px solid var(--hairline); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm); padding: 16px 18px; }
.stat-tile b { display: block; font-size: 26px; font-weight: 600; letter-spacing: -.02em; }
.stat-tile small { font-size: 12px; color: var(--text-3); }
.stat-tile.link { cursor: pointer; transition: transform .12s; }
.stat-tile.link:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.stat-tile.risk b { color: var(--danger); } .stat-tile.good b { color: var(--success); }
.stat-tile.shadow b { color: var(--shadow-ai); }

/* ───────────────────────────── finding card ───────────────────────── */
.finding { background: var(--surface); border: .5px solid var(--hairline); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm); padding: 18px 20px; margin-bottom: 12px; position: relative; overflow: hidden; }
.finding.enter { animation: rise .32s var(--spring) both; }
@keyframes rise { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.finding::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 3px; background: var(--danger); }
.finding.shadow_agent::before, .finding.shared_credential::before { background: var(--shadow-ai); }
.finding.drift::before { background: var(--warn); }
.finding.observation::before { background: var(--text-4); }
.finding.contained::before { background: var(--success); }
.finding.handled { background: #fcfcfd; box-shadow: none; }

.f-head { display: flex; align-items: center; gap: 8px; }
.f-kind { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  padding: 3px 8px; border-radius: var(--r-xs); background: var(--danger-tint); color: var(--danger); }
.f-kind.shadow_agent, .f-kind.shared_credential { background: var(--shadow-tint); color: var(--shadow-ai); }
.f-kind.drift { background: var(--warn-tint); color: var(--warn); }
.f-kind.observation { background: rgba(0,0,0,.05); color: var(--text-3); }
.f-state { font-size: 10.5px; font-weight: 600; padding: 3px 9px; border-radius: var(--r-pill);
  background: rgba(0,0,0,.05); color: var(--text-2); }
.f-state.pending { background: var(--warn-tint); color: var(--warn); }
.f-state.contained { background: var(--success-tint); color: var(--success); }
.f-status { margin-left: auto; font-size: 11px; font-weight: 550; color: var(--text-3); display: inline-flex; align-items: center; gap: 5px; }
.f-status .d { width: 6px; height: 6px; border-radius: 50%; background: var(--success); }
.f-status.needs .d { background: var(--warn); }

.f-line { font-size: 16px; font-weight: 500; letter-spacing: -.01em; line-height: 1.38; margin: 11px 0 0; }
.f-ids { font-family: var(--mono); font-size: 11px; color: var(--text-4); margin-top: 5px; }

.f-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.f-meta .m { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--text-2);
  background: var(--surface-2); border-radius: var(--r-xs); padding: 4px 9px; }
.f-meta .m .k { color: var(--text-3); }
.f-meta .m.reach { background: var(--danger-tint); color: var(--danger); }
.f-meta .m.dollar { background: var(--danger-tint); color: var(--danger); font-weight: 600; }
.f-meta .m.dollar.handled { background: var(--success-tint); color: var(--success); }
.f-meta .m.mono { font-family: var(--mono); font-size: 11.5px; }
.sig-row { display: inline-flex; gap: 4px; align-items: center; }
.sig { width: 21px; height: 21px; border-radius: 5px; display: grid; place-items: center;
  font-size: 10.5px; font-weight: 700; color: #fff; }
.sig.D { background: #3478f6; } .sig.S { background: var(--danger); }
.sig.P { background: var(--warn); } .sig.I { background: var(--shadow-ai); }

.f-path { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 14px; }
.f-path .node { font-size: 12px; font-family: var(--mono); padding: 4px 9px; border-radius: var(--r-xs);
  background: var(--surface-2); color: var(--text); }
.f-path .node.agent { background: var(--danger-tint); color: var(--danger); }
.f-path .node.crown_jewel { background: var(--accent-tint); color: var(--accent-deep); font-weight: 600; }
.f-path .arw { color: var(--text-4); font-size: 12px; }

.f-actions { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.f-hint { font-size: 13px; color: var(--text-2); }
.f-hint b { color: var(--success); font-weight: 600; }
.why { margin-left: auto; font-size: 12.5px; color: var(--text-3); cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: 4px; background: none; border: none; }
.why:hover { color: var(--text); }

.f-why { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.f-why.open { max-height: 760px; overflow: auto; }
.f-why-in { border-top: .5px solid var(--hairline); margin-top: 16px; padding-top: 16px; }
.f-why-in h6 { margin: 16px 0 7px; font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-3); font-weight: 600; }
.f-why-in h6:first-child { margin-top: 0; }
.assess { font-size: 13px; color: var(--text-2); line-height: 1.55; }
.ev { font-size: 12px; color: var(--text-2); font-family: var(--mono); padding: 5px 0; border-bottom: 1px dashed var(--hairline-2); }
.ev:last-child { border: none; }
.plan-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 5px 0; }
.plan-row .st { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em;
  padding: 2px 7px; border-radius: var(--r-xs); background: var(--surface-2); color: var(--text-2); }
.plan-row .st.fired { background: var(--danger-tint); color: var(--danger); }
.plan-row .st.rolled_back { background: var(--success-tint); color: var(--success); }
.plan-row .rb { color: var(--success); } .plan-row .rb.no { color: var(--text-4); }
.rec-list { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--text-2); }
.rec-list li { margin: 3px 0; }

/* ───────────────────────────── buttons ────────────────────────────── */
.btn { appearance: none; font-size: 14px; font-weight: 550; cursor: pointer; border-radius: var(--r-sm);
  padding: 9px 16px; border: .5px solid transparent; transition: .15s; white-space: nowrap; }
.btn.sm { font-size: 13px; padding: 7px 12px; }
.btn-protect { background: var(--success); color: #fff; }
.btn-protect:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-tint { background: var(--accent-tint); color: var(--accent-deep); }
.btn-tint:hover { background: rgba(0,122,255,.18); }
.btn-quiet { background: transparent; color: var(--text-2); border-color: var(--hairline); }
.btn-quiet:hover { background: rgba(0,0,0,.04); color: var(--text); }
.btn-danger { background: var(--danger-tint); color: var(--danger); }
.btn-danger:hover { background: rgba(218,54,51,.16); }
.btn:active { transform: translateY(.5px) scale(.99); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* segmented control */
.segmented { display: inline-flex; background: var(--surface-sunk); border-radius: var(--r-sm); padding: 2px; gap: 2px; }
.segmented button { appearance: none; border: none; background: none; font-size: 12.5px; font-weight: 500;
  color: var(--text-3); padding: 6px 14px; border-radius: 7px; cursor: pointer; transition: color .16s; }
.segmented button.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); font-weight: 550; }
.segmented button:hover:not(.on) { color: var(--text); }

/* switch */
.switch { width: 40px; height: 24px; border-radius: var(--r-pill); background: var(--separator);
  border: none; padding: 0; cursor: pointer; position: relative; transition: background .2s var(--spring); }
.switch.on { background: var(--success); }
.switch .knob { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: var(--shadow-sm); transition: transform .2s var(--spring); }
.switch.on .knob { transform: translateX(16px); }

/* ───────────────────────── policies / integrations ────────────────── */
.pol-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px;
  border-bottom: .5px solid var(--hairline-2); }
.pol-row:last-child { border: none; }
.pol-name { font-size: 14px; font-weight: 500; }
.pol-cap { font-size: 11.5px; color: var(--text-3); margin-top: 3px; }
.integ-name { font-size: 14px; font-weight: 500; }
.integ-detail { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }
.st-pill { font-size: 10.5px; font-weight: 600; padding: 3px 9px; border-radius: var(--r-pill); margin-left: auto; }
.st-pill.connected { background: var(--success-tint); color: var(--success); }
.st-pill.dry_run { background: var(--warn-tint); color: var(--warn); }
.st-pill.fixture { background: rgba(0,0,0,.05); color: var(--text-3); }

/* ───────────────────────── fleet / activity / shadow / audit ──────── */
.agent-row .pill, .arow .pill { width: 7px; height: 7px; border-radius: 50%; background: var(--success); flex: none; }
.agent-row.flagged .pill { background: var(--danger); }
.agent-row .id { font-family: var(--mono); font-size: 12.5px; }
.agent-row .purpose { font-size: 11.5px; color: var(--text-3); }
.agent-row .rt { margin-left: auto; font-size: 11px; color: var(--text-3); }
.agent-row .n { color: var(--danger); font-weight: 600; font-size: 12px; }
.wk { font-size: 10px; text-transform: uppercase; letter-spacing: .03em; color: var(--text-3);
  background: var(--surface-2); padding: 2px 6px; border-radius: var(--r-xs); }

.shadow-row { flex-direction: column; align-items: stretch; gap: 8px; }
.shadow-top { display: flex; align-items: center; gap: 8px; }
.shadow-fp { font-family: var(--mono); font-size: 12.5px; }
.shadow-sens { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em;
  color: var(--danger); background: var(--danger-tint); padding: 2px 6px; border-radius: var(--r-xs); }
.shadow-obs { font-size: 12px; color: var(--text-2); }

.tick { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 12px;
  border-bottom: .5px solid var(--hairline-2); }
.tick:last-child { border: none; }
.tick.rogue { color: var(--danger); }
.tick .cap { font-weight: 600; min-width: 66px; }
.tick .who { font-family: var(--mono); color: var(--text-2); }
.tick .tool { margin-left: auto; color: var(--text-3); font-size: 11px; }
.tick .taint { color: var(--warn); }

.arow { font-size: 12.5px; }
.arow .a-act { font-weight: 550; }
.arow .a-actor { font-size: 10px; text-transform: uppercase; letter-spacing: .03em; padding: 2px 6px;
  border-radius: var(--r-xs); }
.arow .a-actor.human { background: var(--accent-tint); color: var(--accent-deep); }
.arow .a-actor.lares { background: var(--surface-2); color: var(--text-2); }
.arow .a-why { color: var(--text-3); margin-left: auto; font-size: 11.5px; font-family: var(--mono);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 44%; }

/* proving range */
.scn { cursor: pointer; transition: background .14s; }
.scn:hover { background: var(--accent-tint); }
.scn .rid { font-family: var(--mono); font-size: 11px; color: var(--text-3); width: 42px; flex: none; }
.scn .scn-name { font-size: 13.5px; }
.scn .scn-klass { font-size: 11px; color: var(--text-3); }
.demo-note { padding: 14px 16px; font-size: 12.5px; color: var(--text-3); border-bottom: .5px solid var(--hairline-2); }

/* ───────────────────────────── MAP (dark) ─────────────────────────── */
.surface-dark {
  --map-red: #ff4d4d; --map-violet: #b98cff; --map-teal: #2fd6a6; --map-cyan: #45e0c0;
  --map-accent: #0a84ff; --map-edge: #2a3346; --map-text: #e8ecf5; --map-muted: #8a93a8;
  background: radial-gradient(1200px 700px at 78% -10%, #142032, #0a0e17 62%), #0a0e17;
  color: var(--map-text);
}
.map-inner { max-width: 1180px; margin: 0 auto; padding: 30px clamp(20px,4vw,40px) 60px; }
.map-title { font-size: 26px; font-weight: 600; letter-spacing: -.02em; color: var(--map-text); margin: 0 0 4px; }
.map-lede { font-size: 13.5px; color: var(--map-muted); margin: 0 0 22px; }
.map-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 16px; }
.map-stats { display: flex; gap: 28px; }
.mstat b { font-size: 24px; font-weight: 600; letter-spacing: -.02em; color: var(--map-text); }
.mstat.risk b { color: var(--map-red); }
.mstat small { display: block; font-size: 11px; color: var(--map-muted); margin-top: 1px; }
.legend { display: flex; gap: 16px; font-size: 12px; color: var(--map-muted); flex-wrap: wrap; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.lg { width: 10px; height: 10px; border-radius: 3px; }
.lg.rogue { background: var(--map-red); } .lg.shadow { background: var(--map-violet); }
.lg.jewel { background: var(--map-cyan); } .lg.safe { background: var(--map-teal); }

.map-body { display: grid; grid-template-columns: 1fr 300px; gap: 16px; align-items: start; }
.map-canvas { background: rgba(20,26,38,.5); border: .5px solid var(--map-border,rgba(255,255,255,.08));
  border-radius: var(--r-xl); padding: 10px; overflow: auto; min-height: 440px; }
.map-detail { background: rgba(20,26,38,.72); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border: .5px solid rgba(255,255,255,.08); border-radius: var(--r-xl); padding: 20px; min-height: 220px; color: var(--map-text); }
.map-detail .ph { font-size: 13px; color: var(--map-muted); line-height: 1.6; }
.map-detail h4 { margin: 0 0 3px; font-size: 17px; letter-spacing: -.01em; }
.map-detail .mono { font-family: var(--mono); font-size: 11px; color: var(--map-muted); }
.map-detail .k { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--map-muted); margin-top: 14px; }

.map-svg { width: 100%; height: auto; display: block; }
.gnode { cursor: pointer; }
.gnode rect { fill: rgba(30,38,54,.9); stroke: rgba(255,255,255,.14); stroke-width: 1; rx: 9; }
.gnode .glabel { font: 600 12px var(--sans); fill: var(--map-text); }
.gnode .gsub { font: 11px var(--sans); fill: var(--map-muted); }
.gnode .gdollar { font: 700 11px var(--mono); fill: var(--map-red); }
.gnode.healthy rect { stroke: rgba(47,214,166,.55); }
.gnode.agent.rogue rect, .gnode.at_risk rect { stroke: var(--map-red); stroke-width: 1.7;
  filter: drop-shadow(0 0 6px rgba(255,77,77,.55)); }
.gnode.agent.rogue rect { fill: rgba(255,77,77,.14); }
.gnode.agent.shadow rect { stroke: var(--map-violet); fill: rgba(185,140,255,.14);
  filter: drop-shadow(0 0 6px rgba(185,140,255,.5)); }
.gnode.crown_jewel rect { stroke: var(--map-cyan); fill: rgba(69,224,192,.12); }
.gnode.crown_jewel.at_risk rect { stroke: var(--map-red); filter: drop-shadow(0 0 7px rgba(255,77,77,.6)); }
.gnode.sel rect { stroke: var(--map-accent); stroke-width: 2; filter: drop-shadow(0 0 7px rgba(10,132,255,.6)); }
.gcol-label { font: 600 11px var(--sans); fill: var(--map-muted); text-transform: uppercase; letter-spacing: .06em; }
.gedge { fill: none; stroke: var(--map-edge); stroke-width: 1.4; }
.gedge.hot { stroke: var(--map-red); stroke-width: 2.2; stroke-dasharray: 5 4; filter: drop-shadow(0 0 4px rgba(255,77,77,.6));
  animation: flow 1s linear infinite; }
.gedge.hot.shadow { stroke: var(--map-violet); filter: drop-shadow(0 0 4px rgba(185,140,255,.6)); }
@keyframes flow { to { stroke-dashoffset: -18; } }

/* ───────────────────────────── toast / misc ───────────────────────── */
.toast { position: fixed; left: 50%; bottom: 30px; transform: translate(-50%,20px); background: #1c1e24;
  color: #fff; font-size: 13.5px; padding: 12px 20px; border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  opacity: 0; pointer-events: none; transition: .26s; z-index: 90; max-width: 90vw; }
.toast.show { opacity: 1; transform: translate(-50%,0); }
.toast.err { background: var(--danger); }

.empty { text-align: center; color: var(--text-3); padding: 40px 20px; }
.empty .ico { width: 44px; height: 44px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center;
  background: var(--success-tint); color: var(--success); font-size: 22px; }
.empty .big { font-size: 17px; color: var(--text); font-weight: 550; margin-bottom: 5px; }
.empty .small { font-size: 13px; }

.skeleton { background: linear-gradient(100deg, var(--surface-2) 30%, #eee 50%, var(--surface-2) 70%);
  background-size: 200% 100%; animation: sk 1.2s infinite; border-radius: var(--r-md); }
@keyframes sk { to { background-position: -200% 0; } }

/* read-only */
body.viewer .btn-protect, body.viewer .btn-primary, body.viewer .btn-danger, body.viewer .btn-tint,
body.viewer .segmented, body.viewer .switch, body.viewer .scn {
  opacity: .45; pointer-events: none; cursor: not-allowed; }

/* ───────────────────────────── responsive ─────────────────────────── */
.side-toggle { display: none; }
@media (max-width: 1024px) {
  .sidebar { width: 66px; padding: 14px 8px; }
  .side-wordmark, .side-tag, .nav-group-label, .nav-item .lbl, .acct-tenant span, .acct-out { display: none; }
  .side-brand { justify-content: center; padding: 6px 0 16px; }
  .nav-item { justify-content: center; padding: 9px 0; }
  .nav-badge:not(.dot) { position: absolute; }
  .acct-card { justify-content: center; padding: 8px 0; }
}
@media (max-width: 720px) {
  .app { flex-direction: column; }
  .sidebar { width: 100%; height: auto; flex-direction: row; align-items: center; overflow: visible;
    border-right: none; border-bottom: .5px solid var(--hairline); padding: 8px 12px; }
  .side-brand { padding: 0 8px 0 0; }
  .side-wordmark { display: block; } .side-nav { display: flex; overflow-x: auto; }
  .nav-group { display: flex; margin: 0; } .nav-group-label { display: none; }
  .side-foot { display: none; }
  .stat-strip { grid-template-columns: repeat(2,1fr); }
  .map-body { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}