/* Copyright (c) 2026 Efraim Mazon. All rights reserved. Proprietary — see LICENSE. */
/* Console styles — futuristic console. Hebrew (RTL) by default, English (LTR) via <html dir>. Logical properties mirror the layout;
   the few physical rules that must flip live under [dir=ltr]. Dark only (a security console lives in the dark). */

@font-face { font-family: 'Heebo'; font-weight: 300; font-display: swap; src: url(/fonts/heebo-hebrew-300-normal.woff2) format('woff2'); unicode-range: U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F; }
@font-face { font-family: 'Heebo'; font-weight: 400; font-display: swap; src: url(/fonts/heebo-hebrew-400-normal.woff2) format('woff2'); unicode-range: U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F; }
@font-face { font-family: 'Heebo'; font-weight: 500; font-display: swap; src: url(/fonts/heebo-hebrew-500-normal.woff2) format('woff2'); unicode-range: U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F; }
@font-face { font-family: 'Heebo'; font-weight: 700; font-display: swap; src: url(/fonts/heebo-hebrew-700-normal.woff2) format('woff2'); unicode-range: U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F; }
@font-face { font-family: 'Heebo'; font-weight: 300; font-display: swap; src: url(/fonts/heebo-latin-300-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Heebo'; font-weight: 400; font-display: swap; src: url(/fonts/heebo-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Heebo'; font-weight: 500; font-display: swap; src: url(/fonts/heebo-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Heebo'; font-weight: 700; font-display: swap; src: url(/fonts/heebo-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root {
  color-scheme: dark;
  --bg: #070a12;
  --bg-2: #0b1020;
  --surface: rgba(255, 255, 255, 0.035);
  --surface-2: rgba(255, 255, 255, 0.06);
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.16);
  --text: #eef2ff;
  --text-2: #aab3cc;
  --text-3: #6f7a99;
  --cyan: #22d3ee;
  --violet: #8b5cf6;
  --accent: linear-gradient(135deg, var(--cyan), var(--violet));
  /* status palette (validated for a dark surface) */
  --critical: #d03b3b;
  --high: #ec835a;
  --medium: #fab219;
  --low: #3987e5;
  --info: #7c8aa5;
  --good: #0ca30c;
  --radius: 18px;
  --gutter: 16px;
  font-family: 'Heebo', system-ui, -apple-system, 'Segoe UI', Roboto, 'Liberation Sans', Arial, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; } /* wins over any display: flex/grid on the same element */
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3 { margin: 0; font-weight: 500; }
h2 { font-size: 15px; letter-spacing: 0.01em; color: var(--text); }
h3 { font-size: 13px; color: var(--text-2); }
button { font: inherit; color: inherit; cursor: pointer; }
table { border-collapse: collapse; }

/* ---------- background depth ---------- */
.bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: radial-gradient(1200px 700px at 85% -10%, #141a33 0%, var(--bg) 60%), var(--bg); }
.bg-grid {
  position: absolute; inset: -1px;
  background-image: linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at 50% 0%, #000 20%, transparent 75%);
}
.bg-glow { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.35; animation: drift 24s ease-in-out infinite alternate; }
.bg-glow-a { width: 640px; height: 640px; inset-inline-end: -180px; top: -220px; background: radial-gradient(circle, rgba(34,211,238,0.55), transparent 65%); }
.bg-glow-b { width: 720px; height: 720px; inset-inline-start: -260px; bottom: -320px; background: radial-gradient(circle, rgba(139,92,246,0.5), transparent 65%); animation-delay: -12s; }
@keyframes drift { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(40px, 30px, 0) scale(1.08); } }

/* ---------- header ---------- */
.top {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
  padding: 18px 28px; margin: 14px var(--gutter) 0;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.025));
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 30px 80px -40px rgba(34,211,238,0.25);
}
.brand { display: flex; align-items: center; gap: 14px; }
.brand-mark { width: 40px; height: 40px; }
.brand-mark path { fill: none; stroke: url(#brandGrad); stroke: var(--cyan); stroke-width: 2.5; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(34,211,238,0.6)); }
.brand-mark .brand-mark-2 { stroke: var(--violet); opacity: 0.8; filter: drop-shadow(0 0 6px rgba(139,92,246,0.6)); }
.brand-name { font-size: 20px; font-weight: 700; letter-spacing: 0.02em; background: var(--accent); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand-sub { font-size: 12px; color: var(--text-3); }
.tenant { text-align: center; }
.tenant-name { font-size: 17px; font-weight: 500; }
.tenant-meta { font-size: 12px; color: var(--text-3); }
.top-actions { display: flex; justify-content: flex-end; align-items: center; gap: 16px; }
.live { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-2); padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 0 rgba(34,211,238,0.7); animation: pulse 2.2s ease-out infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(34,211,238,0.6); } 70% { box-shadow: 0 0 0 10px rgba(34,211,238,0); } 100% { box-shadow: 0 0 0 0 rgba(34,211,238,0); } }
.live.busy .live-dot { background: var(--medium); animation-duration: 0.8s; }

.btn { border: 1px solid var(--line-2); background: var(--surface-2); border-radius: 12px; padding: 9px 16px; font-size: 13px; font-weight: 500; transition: transform .15s, box-shadow .15s, background .15s; }
.btn:hover { background: rgba(255,255,255,0.1); transform: translateY(-1px); }
.btn-primary { border: none; background: var(--accent); color: #06080f; box-shadow: 0 10px 30px -10px rgba(34,211,238,0.6); }
.btn-primary:hover { box-shadow: 0 14px 34px -10px rgba(139,92,246,0.7); }
.btn[disabled] { opacity: 0.6; cursor: progress; transform: none; }

/* ---------- grid & panels ---------- */
.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; padding: 14px var(--gutter); max-width: 1600px; margin: 0 auto; }
.span-4 { grid-column: span 4; } .span-8 { grid-column: span 8; } .span-5 { grid-column: span 5; } .span-7 { grid-column: span 7; } .span-12 { grid-column: span 12; }
.panel {
  position: relative; padding: 18px 20px; border-radius: var(--radius);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset;
  min-width: 0;
}
.panel::before { content: ''; position: absolute; inset: 0 auto auto 0; width: 100%; height: 1px; background: linear-gradient(90deg, transparent, rgba(34,211,238,0.35), rgba(139,92,246,0.35), transparent); border-radius: var(--radius) var(--radius) 0 0; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.panel-head.sub { margin-top: 14px; margin-bottom: 6px; }
.hint { font-size: 11.5px; color: var(--text-3); }

/* ---------- score ---------- */
.score-body { display: grid; grid-template-columns: 200px 1fr; gap: 18px; align-items: center; }
.ring-wrap { position: relative; width: 200px; height: 200px; }
.ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-track { fill: none; stroke: rgba(255,255,255,0.08); stroke-width: 10; }
.ring-ticks { fill: none; stroke: rgba(255,255,255,0.14); stroke-width: 2; stroke-dasharray: 1 10.56; }
.ring-value { fill: none; stroke: url(#ringGrad); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 527.8; stroke-dashoffset: 527.8; transition: stroke-dashoffset 1.6s cubic-bezier(.2,.8,.2,1); filter: url(#glow); }
.ring-pulse { fill: none; stroke: rgba(34,211,238,0.35); stroke-width: 1; animation: ringpulse 3s ease-out infinite; transform-origin: center; }
@keyframes ringpulse { 0% { transform: scale(0.85); opacity: 0.7; } 100% { transform: scale(1.22); opacity: 0; } }
.ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.score-num { font-size: 56px; font-weight: 300; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.score-grade { margin-top: 4px; font-size: 13px; color: var(--text-2); padding: 2px 10px; border: 1px solid var(--line-2); border-radius: 999px; }
.score-label { font-size: 14px; font-weight: 500; margin-bottom: 8px; }
.penalties { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 5px; font-size: 12.5px; color: var(--text-2); }
.penalties li { display: flex; justify-content: space-between; gap: 8px; }
.penalties b { color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; }
.spark-title { font-size: 11px; color: var(--text-3); margin-bottom: 4px; }
.spark { width: 100%; height: 56px; display: block; }

/* ---------- severity bars ---------- */
.sev-bars { display: grid; gap: 10px; margin-top: 6px; }
.sev-row { display: grid; grid-template-columns: 92px 1fr 36px; gap: 10px; align-items: center; font-size: 13px; }
.sev-name { display: flex; align-items: center; gap: 8px; color: var(--text-2); }
.sev-icon { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.sev-track { height: 10px; border-radius: 6px; background: rgba(255,255,255,0.06); overflow: hidden; }
.sev-fill { height: 100%; border-radius: 6px; width: 0; transition: width 1.2s cubic-bezier(.2,.8,.2,1); box-shadow: 0 0 12px -2px currentColor; background: currentColor; }
.sev-count { text-align: end; font-variant-numeric: tabular-nums; color: var(--text); }
.sev-byplugin { margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--line); display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font-size: 11.5px; color: var(--text-2); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; background: var(--surface); }
.chip b { color: var(--text); font-weight: 500; }

/* ---------- tiles ---------- */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tile { padding: 16px 18px; border-radius: var(--radius); border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)); backdrop-filter: blur(14px); position: relative; overflow: hidden; }
.tile::after { content: ''; position: absolute; width: 120px; height: 120px; inset-inline-end: -50px; bottom: -70px; border-radius: 50%; background: radial-gradient(circle, rgba(34,211,238,0.18), transparent 70%); }
.tile:nth-child(even)::after { background: radial-gradient(circle, rgba(139,92,246,0.2), transparent 70%); }
.tile-label { font-size: 12px; color: var(--text-3); }
.tile-value { font-size: 34px; font-weight: 300; line-height: 1.15; margin: 4px 0; font-variant-numeric: tabular-nums; }
.tile-foot { font-size: 11.5px; color: var(--text-2); }

/* ---------- charts ---------- */
.legend { display: flex; gap: 14px; font-size: 12px; color: var(--text-2); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 14px; height: 2px; background: currentColor; display: inline-block; border-radius: 1px; }
.chart-wrap { position: relative; }
.chart { width: 100%; height: 240px; display: block; }
.chart-wrap.small .chart { height: 90px; }
.chart .grid-line { stroke: rgba(255,255,255,0.07); stroke-width: 1; }
.chart .axis-text { fill: var(--text-3); font-size: 11px; font-family: inherit; }
.chart .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .area { opacity: 0.9; }
.chart .marker { fill: var(--bg); stroke-width: 2; }
.chart .crosshair { stroke: rgba(255,255,255,0.25); stroke-dasharray: 3 3; }
.chart .flow { stroke-dasharray: 6 10; animation: flow 1.6s linear infinite; opacity: 0.55; }
@keyframes flow { to { stroke-dashoffset: -32; } }
.chart .draw { stroke-dasharray: 2000; stroke-dashoffset: 2000; animation: draw 2.2s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.tooltip { position: absolute; pointer-events: none; background: rgba(10, 14, 28, 0.92); border: 1px solid var(--line-2); border-radius: 10px; padding: 8px 10px; font-size: 12px; color: var(--text); backdrop-filter: blur(8px); white-space: nowrap; z-index: 5; box-shadow: 0 10px 30px -10px rgba(0,0,0,0.8); }
.tooltip b { font-weight: 500; }
.tooltip .muted { color: var(--text-3); }

/* ---------- orbit ---------- */
.orbit-wrap { position: relative; }
.orbit { width: 100%; height: 340px; display: block; }
.orbit .ring-o { fill: none; stroke: rgba(255,255,255,0.1); stroke-width: 1; }
.orbit .ring-o.dashed { stroke-dasharray: 2 6; }
.orbit .sweep { fill: url(#sweepGrad); animation: sweep 9s linear infinite; transform-origin: 0 0; }
@keyframes sweep { to { transform: rotate(360deg); } }
.orbit .node { cursor: default; transition: r .2s; }
.orbit .node.domain { fill: url(#coreGrad); filter: drop-shadow(0 0 14px rgba(34,211,238,0.8)); }
.orbit .node.subdomain { fill: #22d3ee; }
.orbit .node.subdomain.third { fill: none; stroke: #22d3ee; stroke-width: 1.5; stroke-dasharray: 2 2; }
.orbit .node.service { fill: #8b5cf6; }
.orbit .node.ip { fill: #aab3cc; }
.orbit .node.hot { stroke: var(--critical); stroke-width: 2; }
.orbit .node.hot.subdomain { animation: hot 1.8s ease-in-out infinite; }
@keyframes hot { 50% { filter: drop-shadow(0 0 8px rgba(208,59,59,0.9)); } }
.orbit .link { stroke: rgba(255,255,255,0.12); stroke-width: 1; }
.orbit .label { fill: var(--text-2); font-size: 9.5px; font-family: inherit; }
.orbit .orbit-spin { animation: spin 90s linear infinite; transform-origin: 0 0; }
@keyframes spin { to { transform: rotate(360deg); } }
.orbit-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--text-2); margin-top: 4px; }
.orbit-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-inline-end: 6px; vertical-align: middle; }

/* ---------- findings ---------- */
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--surface); }
.seg button { border: none; background: transparent; padding: 5px 12px; font-size: 12px; color: var(--text-2); }
.seg button.on { background: rgba(255,255,255,0.1); color: var(--text); }
.findings { display: grid; gap: 8px; max-height: 520px; overflow: auto; padding-inline-end: 4px; }
.finding { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 10px 14px; display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; cursor: pointer; transition: background .15s, border-color .15s; }
.finding:hover { background: var(--surface-2); border-color: var(--line-2); }
.finding.open-details { grid-template-rows: auto auto; }
.sev-badge { font-size: 11px; font-weight: 500; padding: 3px 9px; border-radius: 999px; border: 1px solid currentColor; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.sev-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.finding-title { font-size: 13.5px; }
.finding-meta { font-size: 11.5px; color: var(--text-3); margin-top: 2px; direction: ltr; text-align: right; unicode-bidi: plaintext; }
.finding-plugin { font-size: 11px; color: var(--text-3); white-space: nowrap; }
.finding-details { grid-column: 1 / -1; font-size: 12.5px; color: var(--text-2); border-top: 1px dashed var(--line); padding-top: 10px; display: grid; gap: 6px; }
.finding-details b { color: var(--text); font-weight: 500; }
.finding-details code { font-size: 11px; color: var(--text-3); direction: ltr; display: block; unicode-bidi: plaintext; text-align: right; white-space: pre-wrap; }
.sev-critical { color: var(--critical); } .sev-high { color: var(--high); } .sev-medium { color: var(--medium); } .sev-low { color: var(--low); } .sev-info { color: var(--info); }
.empty { color: var(--text-3); font-size: 13px; padding: 20px; text-align: center; }

/* ---------- assets ---------- */
.table-wrap { max-height: 520px; overflow: auto; }
table.assets { width: 100%; font-size: 12.5px; table-layout: fixed; }
table.assets col.c-type { width: 80px; } table.assets col.c-parent { width: 23%; } table.assets col.c-src { width: 82px; } table.assets col.c-seen { width: 80px; }
table.assets th { text-align: start; font-weight: 500; color: var(--text-3); font-size: 11.5px; padding: 6px 8px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: rgba(10,14,28,0.9); }
table.assets td { padding: 7px 8px; border-bottom: 1px solid rgba(255,255,255,0.045); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.assets td.ltr { direction: ltr; text-align: right; font-family: ui-monospace, 'Liberation Mono', monospace; font-size: 11.5px; }
.type-pill { font-size: 10.5px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--text-2); }
.type-pill.domain { color: var(--cyan); border-color: rgba(34,211,238,0.4); }
.type-pill.service { color: #b79cff; border-color: rgba(139,92,246,0.5); }
.tp { color: var(--medium); font-size: 10.5px; margin-inline-start: 6px; }

/* ---------- console (rack) ---------- */
.presets { display: flex; gap: 8px; }
.presets button { border: 1px solid var(--line-2); background: var(--surface); border-radius: 999px; padding: 5px 14px; font-size: 12px; color: var(--text-2); }
.presets button.on { background: var(--accent); color: #06080f; border-color: transparent; font-weight: 500; }
.console-body { display: grid; grid-template-columns: 1fr 300px; gap: 18px; align-items: start; }
.modules { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; position: relative; padding: 14px; border-radius: 16px; border: 1px solid var(--line); background: repeating-linear-gradient(90deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 28px), rgba(0,0,0,0.25); }
.modules::before { content: ''; position: absolute; inset: auto 14px 6px 14px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(34,211,238,0.6), rgba(139,92,246,0.6)); filter: blur(1px); }
.module { position: relative; border-radius: 14px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)); padding: 14px 14px 12px; min-height: 196px; display: flex; flex-direction: column; gap: 8px; transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s, opacity .35s; }
.module.on { border-color: rgba(34,211,238,0.45); box-shadow: 0 0 0 1px rgba(34,211,238,0.15) inset, 0 20px 50px -30px rgba(34,211,238,0.6); }
.module.off { opacity: 0.6; transform: translateY(8px); }
.module.off:hover { opacity: 0.85; transform: translateY(4px); }
.module.power { border-color: rgba(139,92,246,0.5); box-shadow: 0 0 0 1px rgba(139,92,246,0.2) inset, 0 20px 50px -30px rgba(139,92,246,0.7); }
.module.suggest { border-color: rgba(250,178,25,0.45); }
.module-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.module-name { font-size: 14px; font-weight: 500; }
.led { width: 9px; height: 9px; border-radius: 50%; background: #3a4258; box-shadow: none; flex: none; }
.module.on .led { background: var(--cyan); box-shadow: 0 0 10px var(--cyan); animation: blink 3s ease-in-out infinite; }
.module.power .led { background: var(--violet); box-shadow: 0 0 10px var(--violet); }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
.module-desc { font-size: 11.5px; color: var(--text-2); flex: 1; }
.module-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.tag { font-size: 10px; padding: 2px 7px; border-radius: 6px; border: 1px solid var(--line); color: var(--text-3); }
.tag.active-mode { color: var(--high); border-color: rgba(236,131,90,0.4); }
.tag.passive-mode { color: var(--cyan); border-color: rgba(34,211,238,0.3); }
.module-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 2px; }
.price { font-size: 13px; font-variant-numeric: tabular-nums; }
.price small { color: var(--text-3); font-size: 10.5px; }
.module button { border: 1px solid var(--line-2); background: var(--surface-2); border-radius: 9px; padding: 4px 10px; font-size: 11.5px; }
.module.on button { border-color: rgba(255,255,255,0.2); }
.module button[disabled] { opacity: 0.5; cursor: not-allowed; }
.module-dep { font-size: 10.5px; color: var(--medium); }

.quote { border-radius: 16px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(139,92,246,0.12), rgba(34,211,238,0.06)); padding: 16px 18px; font-size: 13px; }
.quote h3 { margin-bottom: 10px; color: var(--text); }
.quote-row { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; color: var(--text-2); font-variant-numeric: tabular-nums; }
.quote-row.total { border-top: 1px solid var(--line-2); margin-top: 8px; padding-top: 10px; color: var(--text); font-size: 18px; font-weight: 500; }
.quote-row .good { color: var(--good); }
.quote-note { font-size: 11px; color: var(--text-3); margin-top: 8px; }
.console-foot { margin-top: 12px; font-size: 12px; color: var(--text-3); display: flex; gap: 18px; flex-wrap: wrap; }
.console-foot b { color: var(--text-2); font-weight: 500; }

.foot { display: flex; justify-content: space-between; gap: 16px; padding: 10px 28px 24px; font-size: 11.5px; color: var(--text-3); max-width: 1600px; margin: 0 auto; flex-wrap: wrap; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .span-4, .span-5, .span-7 { grid-column: span 6; }
  .modules { grid-template-columns: repeat(3, 1fr); }
  .console-body { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .top { grid-template-columns: 1fr; text-align: center; }
  .top-actions { justify-content: center; }
  .span-4, .span-5, .span-7, .span-8, .span-12 { grid-column: span 12; }
  .score-body { grid-template-columns: 1fr; justify-items: center; }
  .modules { grid-template-columns: 1fr 1fr; }
  .tiles { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ======================================================================
   Onboarding (signup → code → domain → verify → terms → active)
   ====================================================================== */
.onb-body { display: flex; justify-content: center; }
.onb { width: 100%; max-width: 640px; padding: 24px var(--gutter) 40px; display: grid; gap: 18px; }
.onb-brand { display: flex; align-items: center; gap: 14px; justify-content: center; margin-top: 8px; }
.onb-card { padding: 26px 26px 22px; }
.onb-card h1 { font-size: 22px; font-weight: 500; margin: 6px 0 6px; }
.lead { color: var(--text-2); font-size: 14px; margin: 0 0 18px; line-height: 1.6; }
.lead b { color: var(--text); font-weight: 500; }
.fine { font-size: 12px; color: var(--text-3); margin: 14px 0 0; line-height: 1.6; }
.fine code, .dev-hint code { color: var(--cyan); font-size: 13px; letter-spacing: 0.15em; }
.dev-hint { color: var(--medium); }
.link { background: none; border: none; padding: 0; color: var(--cyan); font-size: inherit; text-decoration: underline dotted; cursor: pointer; }
.link:hover { color: #fff; }
.onb-seg { margin-bottom: 14px; }
.onb-seg button { padding: 7px 18px; font-size: 13px; }

.stepper { list-style: none; margin: 0; padding: 0 6px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; counter-reset: s; position: relative; }
.stepper::before { content: ''; position: absolute; top: 11px; inset-inline: calc(100% / 12); height: 1px; background: var(--line-2); }
.stepper li { position: relative; text-align: center; font-size: 11px; color: var(--text-3); display: grid; justify-items: center; align-content: start; gap: 6px; }
.stepper li i { font-style: normal; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--bg-2); display: grid; place-items: center; font-size: 10px; position: relative; z-index: 1; transition: background .3s, border-color .3s, box-shadow .3s; }
.stepper li i::after { counter-increment: s; content: counter(s); color: var(--text-3); }
.stepper li.current { color: var(--text); }
.stepper li.current i { border-color: var(--cyan); box-shadow: 0 0 0 4px rgba(34,211,238,0.15), 0 0 18px rgba(34,211,238,0.5); }
.stepper li.current i::after { color: var(--cyan); }
.stepper li.done i { background: var(--accent); border-color: transparent; }
.stepper li.done i::after { content: '✓'; color: #06080f; font-weight: 700; }

.form { display: grid; gap: 14px; }
.form.inline { grid-template-columns: 1fr auto; align-items: center; margin-top: 14px; }
.form.inline input { height: 40px; }
.field { display: grid; gap: 6px; font-size: 13px; color: var(--text-2); }
.field[hidden] { display: none; }
input[type=text], input[type=email], .form input { width: 100%; height: 46px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(0,0,0,0.25); color: var(--text); font: inherit; font-size: 15px; padding: 0 14px; outline: none; transition: border-color .15s, box-shadow .15s; }
.form input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(34,211,238,0.15); }
.form input::placeholder { color: var(--text-3); }
.code-field input { font-size: 30px; letter-spacing: 0.45em; text-align: center; height: 64px; font-variant-numeric: tabular-nums; font-weight: 300; }
.btn-wide { width: 100%; height: 46px; font-size: 15px; }
.err { font-size: 13px; color: var(--high); background: rgba(236,131,90,0.08); border: 1px solid rgba(236,131,90,0.3); padding: 9px 12px; border-radius: 10px; }
.err.ok { color: var(--cyan); background: rgba(34,211,238,0.08); border-color: rgba(34,211,238,0.3); }

.verify-list { display: grid; gap: 12px; }
.vcard { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 14px 16px; display: grid; gap: 12px; transition: border-color .3s; }
.vcard.verified { border-color: rgba(12,163,12,0.5); }
.vcard.checking { border-color: rgba(34,211,238,0.5); animation: scanline 1.4s ease-in-out infinite; }
@keyframes scanline { 0%, 100% { box-shadow: 0 0 0 0 rgba(34,211,238,0); } 50% { box-shadow: 0 0 24px -6px rgba(34,211,238,0.7); } }
.vcard-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.vcard-head b { font-weight: 500; font-size: 16px; }
.ltr { direction: ltr; unicode-bidi: isolate; }
.vstatus { font-size: 11.5px; padding: 3px 10px; border-radius: 999px; border: 1px solid currentColor; color: var(--medium); }
.vstatus.verified { color: var(--good); } .vstatus.failed { color: var(--critical); }
.record { display: grid; gap: 8px; padding: 12px; border-radius: 10px; background: rgba(0,0,0,0.3); border: 1px dashed var(--line-2); }
.record-row { display: grid; grid-template-columns: 90px 1fr auto; gap: 10px; align-items: center; font-size: 12.5px; }
.record-label { color: var(--text-3); }
.record code { font-family: ui-monospace, 'Liberation Mono', monospace; font-size: 12.5px; color: var(--cyan); word-break: break-all; text-align: left; direction: ltr; }
.copy { border: 1px solid var(--line-2); background: var(--surface-2); border-radius: 8px; padding: 4px 10px; font-size: 11.5px; white-space: nowrap; }
.copy:hover { background: rgba(255,255,255,0.12); }
.vcard-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.vcard-actions .btn { padding: 8px 18px; }
.vcard.checking .btn-primary { background: var(--surface-2); color: var(--text-2); box-shadow: none; }
.vcard-note { font-size: 12px; color: var(--text-3); }
.vcard-note.ok { color: var(--good); }
.howto { margin: 14px 0 0; font-size: 13px; color: var(--text-2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; }
.howto summary { cursor: pointer; color: var(--text); }
.howto ol { margin: 10px 0 2px; padding-inline-start: 18px; display: grid; gap: 6px; }
.howto code { color: var(--cyan); font-family: ui-monospace, monospace; }

.draft-banner { display: inline-block; font-size: 12px; font-weight: 500; color: var(--medium); border: 1px solid rgba(250,178,25,0.5); background: rgba(250,178,25,0.1); border-radius: 999px; padding: 4px 12px; margin-bottom: 8px; }
.terms { max-height: 300px; overflow: auto; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line); background: rgba(0,0,0,0.25); font-size: 13px; line-height: 1.7; color: var(--text-2); margin-bottom: 16px; }
.terms h3 { color: var(--text); font-size: 13.5px; margin: 10px 0 4px; }
.terms h3:first-child { margin-top: 0; }
.terms p { margin: 0 0 8px; }
.terms .draft-note { color: var(--medium); font-style: italic; }
.check { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; font-size: 13px; color: var(--text-2); line-height: 1.6; }
.check input { width: 18px; height: 18px; margin-top: 3px; accent-color: #22d3ee; }
.check b { color: var(--text); font-weight: 500; }

.activated { display: grid; justify-items: center; text-align: center; gap: 8px; padding: 10px 0 4px; }
.activated-ring { width: 120px; height: 120px; }
.a-track { fill: none; stroke: rgba(255,255,255,0.08); stroke-width: 4; }
.a-value { fill: none; stroke: url(#ringGrad); stroke: var(--cyan); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 327; stroke-dashoffset: 327; transform: rotate(-90deg); transform-origin: center; animation: a-fill 1.4s cubic-bezier(.2,.8,.2,1) forwards; filter: drop-shadow(0 0 10px rgba(34,211,238,0.6)); }
@keyframes a-fill { to { stroke-dashoffset: 0; } }
.a-check { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 80; stroke-dashoffset: 80; animation: a-fill 0.7s 1s ease-out forwards; }
.scan-status { margin: 6px 0 14px; }
.scan-status.done .live-dot { background: var(--good); animation: none; }
.activated .btn-wide { max-width: 320px; text-decoration: none; display: grid; place-items: center; }
.onb-foot { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--text-3); padding: 0 8px; flex-wrap: wrap; }

@media (max-width: 720px) {
  .onb { padding-top: 14px; }
  .onb-card { padding: 20px 16px; }
  .onb-card h1 { font-size: 20px; }
  .stepper li span { font-size: 10px; }
  .record-row { grid-template-columns: 1fr auto; }
  .record-label { grid-column: 1 / -1; }
  .form.inline { grid-template-columns: 1fr; }
}

/* ---------- header: user / logout / warning state ---------- */
.user { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-3); }
.btn-ghost { padding: 6px 12px; font-size: 12px; background: transparent; }
.live.warn { border-color: rgba(236,131,90,0.5); color: var(--high); }
.live.warn .live-dot { background: var(--high); }
.top-actions { flex-wrap: wrap; }
.top-actions .btn { white-space: nowrap; }
.user #user-email { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: middle; }

/* ---------- round 3: real asset mapping ---------- */
.badge { display: inline-block; font-size: 10.5px; padding: 1px 7px; border-radius: 999px; margin-inline-start: 6px; vertical-align: middle; border: 1px solid transparent; white-space: nowrap; }
.badge.tp { color: var(--medium); border-color: rgba(250,178,25,0.45); background: rgba(250,178,25,0.08); }
.badge.oq { color: var(--text-2); border-color: var(--line-2); background: rgba(255,255,255,0.04); }
.badge.dangling { color: var(--high); border-color: rgba(255,120,80,0.45); }
.src { font-size: 10.5px; padding: 2px 7px; border-radius: 6px; border: 1px solid var(--line-2); color: var(--text-2); letter-spacing: .3px; }
.src.ct { color: #b79cff; border-color: rgba(139,92,246,0.5); }
.src.dns-ct { color: var(--cyan); border-color: rgba(34,211,238,0.4); }
tr.over-quota td { opacity: .5; }
tr.over-quota td .badge.oq { opacity: 1; }
.quota-hint { margin: 8px 0 4px; padding: 10px 14px; border-radius: 10px; border: 1px solid rgba(34,211,238,0.3); background: linear-gradient(90deg, rgba(34,211,238,0.08), rgba(139,92,246,0.08)); font-size: 12.5px; color: var(--text-2); display: flex; gap: 10px; align-items: center; }
.quota-hint b { color: var(--text); font-weight: 500; }
.quota-hint .q-bar { flex: 1; height: 6px; border-radius: 999px; background: rgba(255,255,255,0.08); overflow: hidden; min-width: 80px; }
.quota-hint .q-bar i { display: block; height: 100%; background: linear-gradient(90deg, #22d3ee, #8b5cf6); border-radius: 999px; }
.orbit .node.oq { opacity: .3; }
.orbit .label.oq { opacity: .4; }
.orbit .node.ip-ring { fill: #aab3cc; }
.orbit .node.ip-ring.third { fill: none; stroke: #aab3cc; stroke-width: 1.2; stroke-dasharray: 2 2; }
.orbit .ring-o.outer { stroke: rgba(255,255,255,0.06); }
.console-foot .kill { color: var(--medium); }
table.assets td.name { white-space: normal; }
table.assets td.name .nm { display: block; direction: ltr; text-align: right; font-family: ui-monospace, 'Liberation Mono', monospace; font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.assets td.name .badges { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-start; margin-top: 3px; }
table.assets td.name .badges .badge { margin-inline-start: 0; }

/* ---------- round 4: services / open ports ---------- */
.tiles { grid-template-columns: repeat(3, 1fr); }
.tiles .tile { padding: 14px 16px; }
.tiles .tile-value { font-size: 30px; }
.svc-summary { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.svc-hosts { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.svc-host { --risk: transparent; position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; transition: border-color .2s, background .2s; }
.svc-host::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--risk); box-shadow: 0 0 14px var(--risk); }
.svc-host:hover { border-color: var(--line-2); background: var(--surface-2); }
.svc-host.risk-critical { --risk: var(--critical); } .svc-host.risk-high { --risk: var(--high); } .svc-host.risk-medium { --risk: var(--medium); } .svc-host.risk-low { --risk: var(--low); } .svc-host.risk-none { --risk: rgba(34,211,238,0.5); }
.svc-host-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.svc-host-name { font-size: 13.5px; font-weight: 500; direction: ltr; unicode-bidi: plaintext; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.svc-host-ip { font-size: 11px; color: var(--text-3); direction: ltr; font-variant-numeric: tabular-nums; white-space: nowrap; font-family: ui-monospace, 'Liberation Mono', monospace; }
.svc-host-meta { font-size: 11.5px; color: var(--text-3); display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.svc-host-more { font-size: 11px; color: var(--text-3); }
.pchips { display: flex; flex-wrap: wrap; gap: 6px; }
.pchip { --c: var(--text-3); font-size: 11px; padding: 3px 9px 3px 8px; border-radius: 8px; border: 1px solid var(--line-2); background: rgba(255,255,255,0.04); color: var(--text-2); direction: ltr; display: inline-flex; gap: 6px; align-items: center; cursor: pointer; transition: transform .15s, border-color .15s, background .15s; line-height: 1.4; }
.pchip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); flex: none; }
.pchip b { font-weight: 500; font-variant-numeric: tabular-nums; color: var(--text); }
.pchip small { color: var(--text-3); font-size: 10px; }
.pchip:hover { transform: translateY(-1px); border-color: rgba(255,255,255,0.25); }
.pchip.on { border-color: var(--cyan); background: rgba(34,211,238,0.12); }
.pchip.risk-critical { --c: var(--critical); border-color: rgba(208,59,59,0.45); }
.pchip.risk-high { --c: var(--high); border-color: rgba(236,131,90,0.45); }
.pchip.risk-medium { --c: var(--medium); border-color: rgba(250,178,25,0.4); }
.pchip.risk-low { --c: var(--low); border-color: rgba(57,135,229,0.4); }
.pchip.risk-none { --c: var(--cyan); }
.pchip.sm { font-size: 10px; padding: 1px 6px 1px 5px; gap: 4px; cursor: default; }
.pchip.sm::before { width: 5px; height: 5px; box-shadow: none; }
.pchip.stale { opacity: .45; }
.svc-detail { margin-top: 12px; border-top: 1px dashed var(--line); padding-top: 12px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; font-size: 12.5px; color: var(--text-2); }
.svc-detail .kv { display: grid; gap: 3px; }
.svc-detail .kv span { font-size: 10.5px; color: var(--text-3); }
.svc-detail .kv b { color: var(--text); font-weight: 500; unicode-bidi: plaintext; }
.svc-detail .kv code { direction: ltr; unicode-bidi: plaintext; text-align: right; display: block; font-size: 11px; color: var(--text-3); white-space: pre-wrap; word-break: break-all; font-family: ui-monospace, 'Liberation Mono', monospace; }
.svc-detail .wide { grid-column: 1 / -1; }
.svc-detail .fl { display: grid; gap: 4px; }
.svc-detail .fl .sev-badge { justify-self: start; }
.svc-empty { color: var(--text-3); font-size: 13px; padding: 18px; text-align: center; border: 1px dashed var(--line); border-radius: 14px; }
.module-run { font-size: 10.5px; color: var(--text-3); display: flex; justify-content: space-between; gap: 6px; flex-wrap: wrap; border-top: 1px dashed var(--line); padding-top: 6px; }
.module-run .st-done { color: var(--good); } .module-run .st-skipped { color: var(--medium); } .module-run .st-failed { color: var(--critical); } .module-run .st-running { color: var(--cyan); }
table.assets td.name .pchips { margin-top: 4px; gap: 4px; }
@media (max-width: 720px) { .tiles { grid-template-columns: 1fr 1fr; } .svc-hosts { grid-template-columns: 1fr; } }

/* ---------- known vulnerabilities (round 5) ---------- */
.tiles { grid-template-columns: repeat(2, 1fr); }
.tiles .tile { padding: 12px 15px; }
.tiles .tile-value { font-size: 28px; }
.tag.part { font-size: 9.5px; opacity: .9; }
.vuln-status { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 11.5px; color: var(--text-3); margin: -4px 0 12px; }
.vuln-status span, .console-info span { unicode-bidi: plaintext; }
.vuln-status span::before, .console-info span::before { content: '◦ '; color: var(--cyan); }
.vuln-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.vuln-card { gap: 9px; }
.cve-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cve-chip { --c: var(--medium); font: inherit; font-size: 11px; padding: 3px 9px 3px 8px; border-radius: 8px; border: 1px solid var(--line-2); background: rgba(255,255,255,0.04); color: var(--text-2); direction: ltr; display: inline-flex; gap: 6px; align-items: center; cursor: pointer; transition: transform .15s, border-color .15s, background .15s; line-height: 1.4; }
.cve-chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); flex: none; }
.cve-chip b { font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.cve-chip small { color: var(--text-3); font-size: 10px; font-variant-numeric: tabular-nums; }
.cve-chip .kev-mark { font-style: normal; font-size: 9px; font-weight: 600; letter-spacing: .06em; padding: 0 5px; border-radius: 4px; background: var(--critical); color: #fff; }
.cve-chip:hover { transform: translateY(-1px); border-color: rgba(255,255,255,0.25); }
.cve-chip.on { border-color: var(--cyan); background: rgba(34,211,238,0.12); }
.cve-chip.sev-critical { --c: var(--critical); border-color: rgba(208,59,59,0.45); color: var(--text-2); }
.cve-chip.sev-high { --c: var(--high); border-color: rgba(236,131,90,0.45); color: var(--text-2); }
.cve-chip.sev-medium { --c: var(--medium); border-color: rgba(250,178,25,0.4); color: var(--text-2); }
.cve-chip.sev-low { --c: var(--low); border-color: rgba(57,135,229,0.4); color: var(--text-2); }
.cve-chip.sev-info { --c: var(--info); color: var(--text-2); }
.cve-chip.kev { background: rgba(208,59,59,0.12); }
.cve-chip.maybe b { font-style: italic; color: var(--text-2); }
.epss { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--text-3); }
.epss code { direction: ltr; font-size: 10.5px; color: var(--text-2); font-family: ui-monospace, 'Liberation Mono', monospace; }
.epss-label { font-size: 9.5px; letter-spacing: .08em; color: var(--text-3); }
.epss-bar { flex: 1; min-width: 60px; height: 6px; border-radius: 999px; background: rgba(255,255,255,0.08); overflow: hidden; direction: ltr; }
.epss-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--low), var(--cyan)); transition: width .6s ease; }
.epss-bar i.warm { background: linear-gradient(90deg, var(--medium), var(--high)); }
.epss-bar i.hot { background: linear-gradient(90deg, var(--high), var(--critical)); box-shadow: 0 0 10px rgba(208,59,59,0.6); }
.epss b { color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; min-width: 32px; }
.epss small { font-size: 10px; }
.vuln-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.vbadge { font-size: 10.5px; padding: 2px 8px; border-radius: 6px; border: 1px solid var(--line); color: var(--text-2); display: inline-flex; gap: 4px; align-items: center; }
.vbadge code { direction: ltr; font-family: ui-monospace, 'Liberation Mono', monospace; font-size: 10px; }
.vbadge.kev { color: #fff; background: var(--critical); border-color: var(--critical); font-weight: 500; box-shadow: 0 0 14px rgba(208,59,59,0.45); }
.vbadge.maybe { color: var(--medium); border-color: rgba(250,178,25,0.4); border-style: dashed; }
.vbadge.ok { color: var(--cyan); border-color: rgba(34,211,238,0.3); }
.vbadge.eol { color: var(--high); border-color: rgba(236,131,90,0.4); }
.vbadge.eol.sev-medium { color: var(--medium); border-color: rgba(250,178,25,0.4); }
.vbadge.web { cursor: pointer; border-color: rgba(139,92,246,0.4); color: var(--text-2); }
.vbadge.web:hover { background: rgba(139,92,246,0.12); }
.vbadge.web.sev-critical { border-color: rgba(208,59,59,0.5); }
.vuln-detail { margin-top: 12px; border-top: 1px dashed var(--line); padding-top: 12px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; font-size: 12.5px; color: var(--text-2); }
.vuln-detail .kv { display: grid; gap: 3px; }
.vuln-detail .kv span { font-size: 10.5px; color: var(--text-3); }
.vuln-detail .kv b { color: var(--text); font-weight: 500; unicode-bidi: plaintext; }
.vuln-detail .kv code { direction: ltr; unicode-bidi: plaintext; text-align: right; display: block; font-size: 11px; color: var(--text-3); white-space: pre-wrap; word-break: break-word; font-family: ui-monospace, 'Liberation Mono', monospace; }
.vuln-detail .wide { grid-column: 1 / -1; }
.vuln-detail .vd-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vuln-detail .vd-head b { font-size: 15px; direction: ltr; unicode-bidi: plaintext; }
.vuln-detail .vd-head span.sev-badge { font-size: 11px; }
.vuln-detail .fl { display: grid; gap: 6px; line-height: 1.6; }
.vuln-detail .link-row { display: flex; flex-wrap: wrap; gap: 6px; }
.vuln-detail .lnk { font-size: 11px; color: var(--cyan); border: 1px solid rgba(34,211,238,0.3); border-radius: 6px; padding: 2px 8px; text-decoration: none; direction: ltr; }
.vuln-detail .lnk:hover { background: rgba(34,211,238,0.1); }
@media (max-width: 1100px) { .tiles { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 720px) { .tiles { grid-template-columns: 1fr 1fr; } .vuln-cards { grid-template-columns: 1fr; } }
.vuln-card .pchips .pchip.sm b { font-size: 10px; }
.vbadge.web .sev-badge { font-size: 9.5px; padding: 1px 6px; }

/* ---------- certificates & e-mail (round 6) ---------- */
.tls-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; align-items: start; }
.tls-col { min-width: 0; }
.cert-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.cert-card { cursor: pointer; gap: 10px; }
.cert-card.on { border-color: var(--cyan); background: rgba(34,211,238,0.08); }
.cert-top { display: flex; gap: 12px; align-items: center; }
.cert-ring { width: 64px; height: 64px; flex: none; }
.cert-ring .cr-track { fill: none; stroke: rgba(255,255,255,0.08); stroke-width: 4; }
.cert-ring .cr-value { fill: none; stroke: var(--cyan); stroke-width: 4; stroke-linecap: round; transform: rotate(-90deg); transform-origin: center; transition: stroke-dashoffset 1.4s cubic-bezier(.2,.8,.2,1); filter: drop-shadow(0 0 6px rgba(34,211,238,0.5)); }
.cert-ring .cr-value.sev-critical { stroke: var(--critical); filter: drop-shadow(0 0 6px rgba(208,59,59,0.6)); }
.cert-ring .cr-value.sev-high { stroke: var(--high); filter: drop-shadow(0 0 6px rgba(236,131,90,0.6)); }
.cert-ring .cr-value.sev-medium { stroke: var(--medium); filter: drop-shadow(0 0 6px rgba(250,178,25,0.5)); }
.cert-ring .cr-num { fill: var(--text); font-size: 15px; font-weight: 500; font-family: inherit; font-variant-numeric: tabular-nums; }
.cert-ring .cr-lbl { fill: var(--text-3); font-size: 8px; font-family: inherit; }
.cert-info { min-width: 0; display: grid; gap: 5px; flex: 1; }
.cert-sub { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11px; color: var(--text-3); }
.cert-badges, .mail-extra { display: flex; flex-wrap: wrap; gap: 5px; }
.cbadge { font-size: 10.5px; padding: 2px 8px; border-radius: 6px; border: 1px solid var(--line); color: var(--text-2); white-space: nowrap; }
.cbadge.good { color: var(--good); border-color: rgba(12,163,12,0.45); }
.cbadge.warn { color: var(--medium); border-color: rgba(250,178,25,0.45); }
.cbadge.bad { color: var(--critical); border-color: rgba(208,59,59,0.5); background: rgba(208,59,59,0.08); }
.cbadge.off { color: var(--text-3); border-style: dashed; }
.cbadge.src { color: #b79cff; border-color: rgba(139,92,246,0.45); }
.proto-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; border-top: 1px dashed var(--line); padding-top: 8px; }
.pbadge { font-size: 10px; padding: 2px 7px; border-radius: 999px; border: 1px solid var(--line); color: var(--text-3); direction: ltr; letter-spacing: .02em; }
.pbadge.good { color: var(--good); border-color: rgba(12,163,12,0.5); }
.pbadge.bad { color: #fff; background: var(--critical); border-color: var(--critical); box-shadow: 0 0 10px rgba(208,59,59,0.45); }
.pbadge.off { color: var(--text-3); text-decoration: line-through; }
.pbadge.na { color: var(--text-3); border-style: dashed; opacity: .8; }
.proto-row .svc-host-more { margin-inline-start: auto; font-family: ui-monospace, 'Liberation Mono', monospace; font-size: 10px; }
.mail-cards { display: grid; gap: 12px; }
.mail-card { gap: 10px; }
.mail-gauges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gauge { display: flex; gap: 9px; align-items: center; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: rgba(0,0,0,0.2); min-width: 0; }
.gauge .lamp { width: 12px; height: 12px; border-radius: 50%; flex: none; animation: lampglow 2.6s ease-in-out infinite; }
.gauge.off .lamp { animation: none; }
@keyframes lampglow { 50% { filter: brightness(1.25); } }
.gauge-txt { display: grid; min-width: 0; line-height: 1.25; }
.gauge-txt b { font-size: 11px; letter-spacing: .06em; color: var(--text-3); font-weight: 500; }
.gauge-txt span { font-size: 13px; color: var(--text); direction: ltr; text-align: right; unicode-bidi: plaintext; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gauge-txt small { font-size: 10px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gauge.good .gauge-txt span { color: var(--good); } .gauge.warn .gauge-txt span { color: var(--medium); } .gauge.bad .gauge-txt span { color: var(--critical); }
.fixes { display: grid; gap: 6px; padding: 10px 12px; border-radius: 10px; background: rgba(0,0,0,0.3); border: 1px dashed var(--line-2); }
.fix-title { font-size: 11px; color: var(--text-3); }
.fix-row { display: grid; grid-template-columns: 62px 1fr auto; gap: 8px; align-items: center; font-size: 12px; }
.fix-label { color: var(--text-2); font-size: 11px; }
.fix-row code { font-family: ui-monospace, 'Liberation Mono', monospace; font-size: 11px; color: var(--cyan); word-break: break-all; text-align: left; direction: ltr; white-space: pre-wrap; }
.svc-host-more.good { color: var(--good); }
.tls-detail { margin-top: 12px; border-top: 1px dashed var(--line); padding-top: 12px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; font-size: 12.5px; color: var(--text-2); }
.tls-detail .kv { display: grid; gap: 3px; }
.tls-detail .kv span { font-size: 10.5px; color: var(--text-3); }
.tls-detail .kv b { color: var(--text); font-weight: 500; unicode-bidi: plaintext; }
.tls-detail .kv code { direction: ltr; unicode-bidi: plaintext; text-align: right; display: block; font-size: 11px; color: var(--text-3); white-space: pre-wrap; word-break: break-word; font-family: ui-monospace, 'Liberation Mono', monospace; }
.tls-detail .wide { grid-column: 1 / -1; }
.tls-detail .vd-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tls-detail .vd-head b { font-size: 15px; direction: ltr; unicode-bidi: plaintext; }
.tls-detail .fl { display: grid; gap: 6px; }
@media (max-width: 1100px) { .tls-grid { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .cert-cards { grid-template-columns: 1fr; } .mail-gauges { grid-template-columns: 1fr; } .fix-row { grid-template-columns: 1fr auto; } .fix-label { grid-column: 1 / -1; } }

/* ======================================================================
   Round 7 — security score (instrument #5) + docking console
   ====================================================================== */
/* ---------- score panel ---------- */
.score-panel .score-body { grid-template-columns: 200px minmax(0, 1fr) minmax(0, 1.15fr); gap: 22px; align-items: start; }
.score-panel .ring-wrap { align-self: center; }
.score-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.score-head-right { display: flex; align-items: center; gap: 12px; }
.lnk { color: var(--cyan); text-decoration: none; border-bottom: 1px dashed rgba(34,211,238,0.4); }
.lnk:hover { border-bottom-style: solid; }
.score-delta { font-size: 11.5px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--text-2); background: var(--surface); }
.score-delta b { font-weight: 500; }
.score-delta.up { color: var(--good); border-color: rgba(12,163,12,0.45); }
.score-delta.down { color: var(--high); border-color: rgba(236,131,90,0.45); }
.score-grade.capped { border-color: rgba(250,178,25,0.6); color: var(--medium); }
.score-cap { display: flex; gap: 8px; align-items: flex-start; font-size: 11.5px; color: var(--medium); border: 1px solid rgba(250,178,25,0.35); background: rgba(250,178,25,0.07); border-radius: 10px; padding: 7px 10px; margin: -2px 0 10px; line-height: 1.4; }
.cap-lock { flex: none; width: 12px; height: 14px; margin-top: 2px; border: 2px solid currentColor; border-radius: 3px; position: relative; opacity: .9; }
.cap-lock::before { content: ''; position: absolute; left: 1px; right: 1px; top: -7px; height: 6px; border: 2px solid currentColor; border-bottom: none; border-radius: 6px 6px 0 0; }
/* grade tone on the ring: the CSS variable feeds the gradient's glow */
.score-panel.g-a .ring-value, .score-panel.g-b .ring-value { filter: url(#glow) drop-shadow(0 0 6px rgba(12,163,12,0.45)); }
.score-panel.g-d .ring-value { filter: url(#glow) drop-shadow(0 0 6px rgba(250,178,25,0.5)); }
.score-panel.g-e .ring-value, .score-panel.g-f .ring-value { filter: url(#glow) drop-shadow(0 0 8px rgba(208,59,59,0.6)); }
.cats { display: grid; gap: 7px; margin-bottom: 12px; }
.cat-row { display: grid; grid-template-columns: 108px 1fr 54px; gap: 10px; align-items: center; font-size: 12.5px; }
.cat-name { color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cat-track { height: 8px; border-radius: 6px; background: rgba(255,255,255,0.06); overflow: hidden; }
.cat-fill { display: block; height: 100%; width: 0; border-radius: 6px; transition: width 1.2s cubic-bezier(.2,.8,.2,1); background: var(--cyan); box-shadow: 0 0 10px -2px currentColor; }
.cat-fill.tone-a, .cat-fill.tone-b { background: var(--good); color: var(--good); }
.cat-fill.tone-c { background: var(--cyan); color: var(--cyan); }
.cat-fill.tone-d { background: var(--medium); color: var(--medium); }
.cat-fill.tone-f { background: var(--critical); color: var(--critical); }
.cat-val { text-align: end; font-variant-numeric: tabular-nums; color: var(--text); display: flex; gap: 6px; align-items: center; justify-content: flex-start; }
.cat-val.nt { color: var(--text-3); font-size: 11px; }
.cat-row.untested .cat-name { color: var(--text-3); }
.cat-row.untested .cat-track { background: repeating-linear-gradient(90deg, rgba(255,255,255,0.08) 0 6px, transparent 6px 12px); }
.cat-add { border: 1px solid var(--line-2); background: transparent; color: var(--cyan); font-size: 10px; padding: 1px 6px; border-radius: 6px; }
.cat-add:hover { background: rgba(34,211,238,0.1); }
.score-explain { position: relative; display: grid; gap: 14px; align-self: stretch; }
.explain-block h3 { margin-bottom: 6px; font-size: 12.5px; color: var(--text-2); display: flex; align-items: center; gap: 8px; }
.explain-block h3::before { content: ''; width: 8px; height: 8px; border-radius: 2px; background: var(--high); box-shadow: 0 0 8px var(--high); }
.explain-block:nth-child(2) h3::before { background: var(--good); box-shadow: 0 0 8px var(--good); }
.explain-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; counter-reset: ex; }
.explain-list li { display: grid; grid-template-columns: 10px 1fr auto; gap: 9px; align-items: center; font-size: 12.5px; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); }
.explain-list li.lifts { border-color: rgba(12,163,12,0.4); }
.explain-list li.empty-li { grid-template-columns: 1fr; color: var(--text-3); }
.ex-txt { display: grid; min-width: 0; }
.ex-txt span { color: var(--text); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.3; }
.ex-txt small { color: var(--text-3); font-size: 10.5px; }
.explain-list .pts { color: var(--high); font-weight: 500; font-variant-numeric: tabular-nums; }
.explain-list .gain { color: var(--good); font-weight: 500; font-variant-numeric: tabular-nums; }
.sev-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--info); box-shadow: 0 0 8px currentColor; }
.sev-dot.sev-critical { background: var(--critical); color: var(--critical); } .sev-dot.sev-high { background: var(--high); color: var(--high); } .sev-dot.sev-medium { background: var(--medium); color: var(--medium); } .sev-dot.sev-low { background: var(--low); color: var(--low); } .sev-dot.sev-info { background: var(--info); color: var(--info); }
.score-explain.is-locked .explain-list { filter: blur(3px); opacity: .45; pointer-events: none; user-select: none; }
.explain-lock { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; font-size: 12.5px; color: var(--text-2); padding: 16px; border-radius: 14px; border: 1px dashed rgba(139,92,246,0.5); background: rgba(7,10,18,0.55); backdrop-filter: blur(2px); }
.explain-lock .cap-lock { color: var(--violet); width: 16px; height: 18px; }
.score-how { margin-top: 12px; padding: 10px 14px; font-size: 12px; color: var(--text-2); border-top: 1px dashed var(--line); line-height: 1.6; }
.score-how b { color: var(--text); font-weight: 500; }
.score-how code { font-family: ui-monospace, 'Liberation Mono', monospace; font-size: 11px; color: var(--cyan); direction: ltr; unicode-bidi: embed; }
.tiles.span-12 { grid-template-columns: repeat(5, 1fr); }
/* trend: real vs demo points */
.chart .pt.real { fill: #22d3ee; }
.chart .pt.demo { fill: none; stroke: rgba(170,179,204,0.8); stroke-width: 1; stroke-dasharray: 1.5 1.5; }
.chart .grade-text { fill: rgba(255,255,255,0.28); font-size: 9px; }
.legend .dot-real { width: 8px; height: 8px; border-radius: 50%; background: #22d3ee; }
.legend .dot-demo { width: 8px; height: 8px; border-radius: 50%; background: transparent; border: 1px dashed #aab3cc; }
.legend .demo-legend { color: var(--text-3); }
.legend .delta-legend { margin-inline-start: auto; color: var(--text-2); }
.legend .delta-legend.up { color: var(--good); } .legend .delta-legend.down { color: var(--high); }

/* ---------- docking console ---------- */
.console .panel-head { align-items: flex-start; }
.console .panel-head .hint { margin-top: 2px; }
.presets button.saved { border-color: rgba(34,211,238,0.5); color: var(--text); }
.presets button:focus-visible, .mod:focus-visible, .mod-btn:focus-visible, .cat-add:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.console-body { grid-template-columns: minmax(0, 1fr) 272px 288px; gap: 16px; }
.dock-col { display: grid; gap: 12px; align-content: start; }
.dock {
  position: relative; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; padding: 16px 16px 20px; min-height: 230px;
  border-radius: 18px; border: 1px solid rgba(34,211,238,0.22);
  background: radial-gradient(900px 300px at 50% 110%, rgba(34,211,238,0.10), transparent 60%), repeating-linear-gradient(90deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 32px), rgba(0,0,0,0.28);
  box-shadow: 0 0 0 1px rgba(34,211,238,0.06) inset, 0 30px 60px -40px rgba(34,211,238,0.5);
  transition: border-color .25s, box-shadow .25s, background-color .25s;
}
.dock::before { content: ''; position: absolute; inset: auto 16px 8px 16px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(34,211,238,0.7), rgba(139,92,246,0.7)); filter: blur(.6px); }
.dock::after { content: ''; position: absolute; inset: auto 16px 11px 16px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent); }
.dock.drop-ok { border-color: rgba(34,211,238,0.6); box-shadow: 0 0 0 2px rgba(34,211,238,0.25) inset, 0 0 60px -20px rgba(34,211,238,0.6); }
.dock.drop-over { background-color: rgba(34,211,238,0.07); border-color: var(--cyan); }
.dock.drop-hint .dock-slot { border-color: rgba(34,211,238,0.6); color: var(--cyan); }
.dock-slot { border: 1px dashed var(--line-2); border-radius: 14px; min-height: 120px; display: grid; place-items: center; color: var(--text-3); font-size: 12px; background: rgba(255,255,255,0.015); transition: border-color .2s, color .2s; }
.dock.has-pending { border-color: rgba(250,178,25,0.45); }
.bay { border-radius: 18px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015)); padding: 14px; display: grid; gap: 10px; align-content: start; transition: border-color .25s, box-shadow .25s; max-height: 760px; overflow: auto; }
.bay.drop-ok { border-color: rgba(236,131,90,0.55); box-shadow: 0 0 0 2px rgba(236,131,90,0.2) inset; }
.bay.drop-over { background: rgba(236,131,90,0.06); }
.bay-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.bay-head.soon { margin-top: 6px; padding-top: 10px; border-top: 1px dashed var(--line); }
.bay-list { display: grid; gap: 10px; }
.bay-empty { font-size: 12px; color: var(--text-3); padding: 10px; border: 1px dashed var(--line); border-radius: 12px; text-align: center; }
/* the module card */
.mod { position: relative; border-radius: 14px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)); padding: 12px 13px 11px; display: flex; flex-direction: column; gap: 7px; transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s, opacity .35s; cursor: grab; touch-action: none; }
.mod.docked { border-color: rgba(34,211,238,0.45); box-shadow: 0 0 0 1px rgba(34,211,238,0.12) inset, 0 20px 50px -30px rgba(34,211,238,0.6); }
.mod.docked:hover { transform: translateY(-2px); }
.mod.bay-mod { opacity: .85; }
.mod.bay-mod:hover { opacity: 1; transform: translateY(-2px); border-color: var(--line-2); }
.mod.power { border-color: rgba(139,92,246,0.55); box-shadow: 0 0 0 1px rgba(139,92,246,0.2) inset, 0 20px 50px -30px rgba(139,92,246,0.7); cursor: default; }
.mod.soon { cursor: not-allowed; opacity: .6; border-style: dashed; overflow: hidden; }
.mod.soon:hover { opacity: .8; }
.mod.soon::after { content: attr(data-soon); position: absolute; top: 10px; inset-inline-end: -26px; transform: rotate(-35deg); font-size: 9.5px; letter-spacing: .08em; padding: 2px 28px; background: linear-gradient(90deg, rgba(139,92,246,0.9), rgba(34,211,238,0.9)); color: #06080f; font-weight: 700; }
.mod.pend-add { border-color: rgba(12,163,12,0.55); box-shadow: 0 0 0 1px rgba(12,163,12,0.2) inset, 0 20px 50px -30px rgba(12,163,12,0.6); animation: dockin .5s cubic-bezier(.2,.8,.2,1); }
.mod.pend-remove { border-color: rgba(236,131,90,0.55); opacity: .55; border-style: dashed; }
.mod.lifting { opacity: .35; }
.mod.flash { animation: flash 1.4s ease-out; }
.mod.shake { animation: shake .5s ease-in-out; }
@keyframes dockin { from { transform: translateY(-14px) scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes flash { 0%, 100% { box-shadow: 0 0 0 1px rgba(12,163,12,0.2) inset; } 30% { box-shadow: 0 0 0 3px rgba(12,163,12,0.6) inset, 0 0 40px -6px rgba(12,163,12,0.7); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
.mod-top { display: flex; align-items: center; gap: 8px; }
.grip { color: var(--text-3); font-size: 12px; letter-spacing: -2px; line-height: 1; user-select: none; }
.mod-name { font-size: 13.5px; font-weight: 500; flex: 1; }
.mod .led { margin-inline-start: auto; }
.mod.docked .led { background: var(--cyan); box-shadow: 0 0 10px var(--cyan); animation: blink 3s ease-in-out infinite; }
.mod.power .led { background: var(--violet); box-shadow: 0 0 10px var(--violet); }
.mod.pend-add .led { background: var(--good); box-shadow: 0 0 10px var(--good); }
.mod.pend-remove .led { background: var(--high); box-shadow: none; animation: none; }
.mod.soon .led { background: #3a4258; }
.mod-ic { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.mod-ic.power { background: linear-gradient(135deg, var(--violet), var(--cyan)); clip-path: polygon(45% 0, 70% 0, 55% 40%, 85% 40%, 30% 100%, 45% 55%, 15% 55%); width: 14px; height: 14px; }
.mod-ic.lock { width: 10px; height: 9px; border: 2px solid var(--text-3); border-radius: 2px; position: relative; margin-top: 4px; }
.mod-ic.lock::before { content: ''; position: absolute; left: 0; right: 0; top: -6px; height: 5px; border: 2px solid var(--text-3); border-bottom: none; border-radius: 5px 5px 0 0; }
.mod-desc { font-size: 11.5px; color: var(--text-2); flex: 1; }
.tag.power-tag { color: #b79cff; border-color: rgba(139,92,246,0.5); }
.tag.soon-tag { color: var(--text-2); border-style: dashed; }
.tag.pend { color: var(--good); border-color: rgba(12,163,12,0.45); }
.tag.pend.rm { color: var(--high); border-color: rgba(236,131,90,0.45); }
.mod-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 2px; gap: 8px; }
.mod-foot .price { font-size: 13px; font-weight: 500; }
.mod-foot .price small { font-size: 10.5px; color: var(--text-3); font-weight: 400; }
.mod-btn { border: 1px solid var(--line-2); background: var(--surface-2); border-radius: 9px; padding: 4px 11px; font-size: 11.5px; white-space: nowrap; transition: background .15s, border-color .15s; }
.mod-btn.add { border-color: rgba(34,211,238,0.5); color: var(--cyan); }
.mod-btn.add:hover { background: rgba(34,211,238,0.12); }
.mod-btn.rm:hover { border-color: rgba(236,131,90,0.6); color: var(--high); }
.mod-btn[disabled] { opacity: .55; cursor: not-allowed; }
/* ghost while dragging */
.ghost { position: fixed; z-index: 50; pointer-events: none; transform: rotate(-2deg) scale(1.03); box-shadow: 0 30px 60px -20px rgba(0,0,0,0.8), 0 0 0 2px rgba(34,211,238,0.6); opacity: .95; backdrop-filter: blur(6px); background: rgba(12,16,30,0.92); }
body.dragging { cursor: grabbing; user-select: none; }
body.dragging .mod { cursor: grabbing; }
/* pending changes */
.pending { border-radius: 14px; border: 1px solid rgba(250,178,25,0.45); background: linear-gradient(90deg, rgba(250,178,25,0.09), rgba(34,211,238,0.05)); padding: 12px 14px; display: grid; gap: 8px; font-size: 12.5px; animation: dockin .4s cubic-bezier(.2,.8,.2,1); }
.pending-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pending-row b { color: var(--medium); font-weight: 500; }
.chip.add { color: var(--good); border-color: rgba(12,163,12,0.45); }
.chip.rm { color: var(--high); border-color: rgba(236,131,90,0.45); }
.pending-note { display: flex; gap: 8px; align-items: center; color: var(--text-2); font-size: 12px; padding: 6px 10px; border-radius: 10px; background: rgba(34,211,238,0.07); border: 1px solid rgba(34,211,238,0.25); }
.dep-ic { flex: none; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--cyan); position: relative; }
.dep-ic::after { content: ''; position: absolute; left: 50%; top: -8px; width: 2px; height: 8px; background: var(--cyan); transform: translateX(-50%); }
.pending-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.pending-price { flex: 1; font-size: 15px; }
.pending-price .was { color: var(--text-3); text-decoration: line-through; font-size: 13px; }
.pending-price small { color: var(--text-3); font-size: 11px; }
.pending-foot { font-size: 11px; color: var(--text-3); }
.rack-dialog { border-radius: 14px; border: 1px solid rgba(236,131,90,0.5); background: rgba(12,16,30,0.9); padding: 14px 16px; display: grid; gap: 8px; font-size: 13px; animation: dockin .3s ease-out; }
.rack-dialog h3 { color: var(--text); font-size: 14px; }
.rack-dialog p { margin: 0; color: var(--text-2); }
.dialog-actions { display: flex; gap: 10px; }
/* quote extras */
.quote-diff { margin-top: 6px; font-size: 12px; color: var(--text-2); }
.quote-diff.up { color: var(--high); } .quote-diff.down { color: var(--good); }
.quote-ladder { display: flex; gap: 6px; margin-top: 12px; }
.quote-ladder .step { width: 26px; height: 22px; border-radius: 6px; border: 1px solid var(--line); display: grid; place-items: center; font-size: 11px; color: var(--text-3); }
.quote-ladder .step.on { background: rgba(34,211,238,0.15); border-color: rgba(34,211,238,0.5); color: var(--text); }
.quote-note.billing { color: var(--medium); }
/* audit log */
.rack-log { margin-top: 12px; font-size: 12px; color: var(--text-2); }
.rack-log summary { cursor: pointer; color: var(--text-3); }
.rack-log-list { display: grid; gap: 6px; margin-top: 8px; }
.log-row { display: grid; grid-template-columns: 110px 1fr auto; gap: 10px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); align-items: center; }
.log-when { color: var(--text-3); font-variant-numeric: tabular-nums; }
.log-price { color: var(--text); font-variant-numeric: tabular-nums; }
.log-note { grid-column: 1 / -1; color: var(--text-3); font-size: 11px; }
.log-note:empty { display: none; }
/* toast */
.toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 60; max-width: min(92vw, 640px); padding: 12px 18px; border-radius: 14px; border: 1px solid rgba(12,163,12,0.5); background: rgba(10,14,28,0.95); color: var(--text); font-size: 13px; box-shadow: 0 20px 50px -20px rgba(0,0,0,0.9); animation: dockin .3s ease-out; }
.toast.bad { border-color: rgba(208,59,59,0.6); }

/* ---------- responsive (round 7) ---------- */
@media (max-width: 1280px) { .score-panel .score-body { grid-template-columns: 180px minmax(0, 1fr); } .score-explain { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; } .console-body { grid-template-columns: minmax(0, 1fr) 250px; } .quote { grid-column: 1 / -1; } }
@media (max-width: 1100px) { .tiles.span-12 { grid-template-columns: repeat(3, 1fr); } .span-8 { grid-column: span 12; } }
@media (max-width: 860px) { .console-body { grid-template-columns: 1fr; } .bay { max-height: none; } .bay-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } }
@media (max-width: 720px) {
  .score-panel .score-body { grid-template-columns: 1fr; justify-items: stretch; }
  .score-panel .ring-wrap { justify-self: center; }
  .score-explain { grid-template-columns: 1fr; }
  .cat-row { grid-template-columns: 96px 1fr 60px; }
  .tiles.span-12 { grid-template-columns: 1fr 1fr; }
  .dock { grid-template-columns: 1fr; }
  .bay-list { grid-template-columns: 1fr; }
  .log-row { grid-template-columns: 1fr; }
  .pending-actions .btn { flex: 1; }
  .console .panel-head { flex-direction: column; align-items: stretch; }
  .presets { flex-wrap: wrap; }
}

/* ---------- round 8: reports & alerts page ---------- */
.top-actions a.btn, .btn-link { text-decoration: none; color: var(--text); display: inline-flex; align-items: center; }
.report-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.rs-item { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--surface); min-width: 0; }
.rs-k { display: block; font-size: 11px; color: var(--text-3); }
.rs-v { display: block; font-size: 13px; color: var(--text); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.reports-table col.c-period { width: 26%; } table.reports-table col.c-kind { width: 90px; } table.reports-table col.c-status { width: 90px; } table.reports-table col.c-score { width: 100px; } table.reports-table col.c-changes { width: 90px; }
table.alerts-table col.c-sev { width: 80px; } table.alerts-table col.c-kind { width: 150px; } table.alerts-table col.c-asset { width: 18%; } table.alerts-table col.c-status { width: 110px; } table.alerts-table col.c-when { width: 110px; } table.alerts-table col.c-actions { width: 70px; }
table.assets td.actions { display: flex; gap: 10px; white-space: nowrap; }
table.assets td.ltr { direction: ltr; text-align: right; }
.score-cell b { font-weight: 600; font-variant-numeric: tabular-nums; }
.score-cell .delta { font-size: 11px; margin-inline-start: 6px; padding: 1px 6px; border-radius: 999px; border: 1px solid currentColor; }
.score-cell .delta.up { color: var(--good); } .score-cell .delta.down { color: var(--high); }
.chip.st-sent { color: var(--good); border-color: rgba(12,163,12,0.45); }
.chip.st-failed { color: var(--critical); border-color: rgba(208,59,59,0.5); }
.chip.st-skipped, .chip.st-suppressed { color: var(--text-3); }
.chip.st-digested, .chip.st-pending, .chip.st-rendering { color: var(--medium); border-color: rgba(250,178,25,0.45); }
.preview-frame-wrap { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #eef1f8; height: 560px; }
.preview-frame-wrap iframe { width: 100%; height: 100%; border: 0; display: block; }
.settings { display: grid; gap: 14px; }
.settings fieldset.sg { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px 14px; display: grid; gap: 10px; min-width: 0; }
.settings legend { font-size: 12.5px; color: var(--text-2); padding: 0 6px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.settings .field select, .settings .field input[type=number] { width: 100%; height: 40px; border-radius: 10px; border: 1px solid var(--line-2); background: rgba(0,0,0,0.25); color: var(--text); font: inherit; font-size: 13.5px; padding: 0 10px; outline: none; }
.settings .field select:focus, .settings .field input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(34,211,238,0.15); }
.settings select option { background: #0b1020; color: var(--text); }
.switch { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--text); cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .slider { width: 38px; height: 22px; border-radius: 999px; background: rgba(255,255,255,0.12); border: 1px solid var(--line-2); position: relative; transition: background .2s; flex: none; }
.switch .slider::after { content: ''; position: absolute; top: 2px; inset-inline-start: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s; }
.switch input:checked + .slider { background: var(--accent); border-color: transparent; }
.switch input:checked + .slider::after { transform: translateX(-16px); }
[dir=ltr] .switch input:checked + .slider::after { transform: translateX(16px); }
.switch input:disabled + .slider { opacity: .5; }
.recipients { display: grid; gap: 6px; }
.rec-head { font-size: 12.5px; color: var(--text-2); }
.rec-list { display: grid; gap: 4px; }
.rec-members { display: grid; gap: 2px; padding-inline-start: 22px; }
.rec { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text); cursor: pointer; }
.rec input { accent-color: var(--cyan); width: 15px; height: 15px; }
.rec input:disabled + span { opacity: .55; }
.rec .ltr { direction: ltr; unicode-bidi: isolate; font-family: ui-monospace, 'Liberation Mono', monospace; font-size: 12px; }
.settings-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.settings-actions .hint { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1100px) { .reports-page .span-7, .reports-page .span-5 { grid-column: span 12; } .report-strip { grid-template-columns: 1fr 1fr; } }

/* ======================================================================
   Fixes round — less text, two languages
   ====================================================================== */
/* LTR mirror: code/host/number cells keep direction:ltr but align to the text edge of the page */
[dir=ltr] .finding-meta, [dir=ltr] .finding-details code, [dir=ltr] table.assets td.ltr, [dir=ltr] table.assets td.name .nm, [dir=ltr] .svc-host-name,
[dir=ltr] .svc-detail .kv code, [dir=ltr] .vuln-detail .kv code, [dir=ltr] .tls-detail .kv code, [dir=ltr] .gauge-txt span { text-align: left; }
[dir=ltr] .mod.soon::after { transform: rotate(35deg); }
[dir=ltr] .ghost { transform: rotate(2deg) scale(1.03); }
[dir=ltr] .stepper li i::after { content: counter(s); }
[dir=ltr] .stepper li.done i::after { content: '✓'; }

/* the "i" button: everything explanatory sits behind it */
.info-btn { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--surface); color: var(--text-2); font-size: 11.5px; font-weight: 700; font-family: ui-serif, Georgia, serif; font-style: italic; line-height: 1; display: inline-grid; place-items: center; padding: 0; flex: none; transition: background .15s, border-color .15s, color .15s, box-shadow .15s; }
.info-btn:hover { border-color: rgba(34,211,238,0.6); color: var(--cyan); }
.info-btn.on { background: rgba(34,211,238,0.15); border-color: var(--cyan); color: var(--cyan); box-shadow: 0 0 12px -2px rgba(34,211,238,0.6); }
.info-btn.sm { width: 18px; height: 18px; font-size: 10px; }
.info-btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.score-head-right { gap: 10px; }
.score-how[hidden], .console-info[hidden], .vuln-status[hidden] { display: none; }
.settings legend { display: flex; align-items: center; gap: 6px; }
.settings legend .info-btn { width: 18px; height: 18px; font-size: 10px; }
.console-info { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 11.5px; color: var(--text-3); margin: -4px 0 12px; padding: 10px 14px; border: 1px dashed var(--line); border-radius: 12px; }
.console-info span { color: var(--text-2); }

/* language switch */
.lang-switch { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--surface); }
.lang-switch button { border: none; background: transparent; color: var(--text-3); font-size: 11px; font-weight: 500; padding: 5px 10px; letter-spacing: .04em; min-width: 36px; transition: background .15s, color .15s; }
.lang-switch button + button { border-inline-start: 1px solid var(--line); }
.lang-switch button:hover { color: var(--text); }
.lang-switch button.on { background: rgba(255,255,255,0.1); color: var(--text); }
.lang-switch button:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; }
.onb-brand .onb-lang { margin-inline-start: auto; }
.onb-brand { justify-content: flex-start; }

/* tiles: a tone chip in the foot carries the meaning; the sentence lives in the title */
.tile-foot { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text-2); max-width: 100%; }
.tile-foot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); flex: none; }
.tile-foot.good { color: var(--good); border-color: rgba(12,163,12,0.4); } .tile-foot.good::before { background: var(--good); box-shadow: 0 0 8px var(--good); }
.tile-foot.warn { color: var(--medium); border-color: rgba(250,178,25,0.4); } .tile-foot.warn::before { background: var(--medium); box-shadow: 0 0 8px var(--medium); }
.tile-foot.bad { color: var(--high); border-color: rgba(236,131,90,0.45); } .tile-foot.bad::before { background: var(--critical); box-shadow: 0 0 8px var(--critical); }
.tile-foot:empty { display: none; }
.score-delta.flat { color: var(--text-3); }
.score-side { min-width: 0; }

/* module card: name · mode dot · i · led, one line, price. The drawer opens on the "i". */
.mode-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--cyan); box-shadow: 0 0 6px var(--cyan); }
.mode-dot.active { background: var(--high); box-shadow: 0 0 6px var(--high); }
.mod-desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; line-height: 1.4; }
.mod-more { display: none; font-size: 11.5px; color: var(--text-2); border-top: 1px dashed var(--line); padding-top: 8px; gap: 8px; cursor: default; }
.mod-more p { margin: 0; line-height: 1.5; }
.mod.show-info .mod-more { display: grid; animation: dockin .25s ease-out; }
.mod.show-info { border-color: rgba(34,211,238,0.5); }
.mod-more .module-run { padding-top: 6px; }

/* quote: one big number; the breakdown folds */
.quote-total { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-variant-numeric: tabular-nums; margin-bottom: 4px; }
.quote-total b { font-size: 30px; font-weight: 300; letter-spacing: -0.02em; background: var(--accent); -webkit-background-clip: text; background-clip: text; color: transparent; }
.quote-total small { color: var(--text-3); font-size: 11.5px; }
.quote-details { margin-top: 10px; border-top: 1px dashed var(--line); padding-top: 8px; }
.quote-details summary { cursor: pointer; color: var(--text-3); font-size: 12px; list-style: none; display: flex; align-items: center; gap: 6px; }
.quote-details summary::-webkit-details-marker { display: none; }
.quote-details summary::before { content: ''; width: 6px; height: 6px; border-inline-end: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .2s; margin-bottom: 3px; }
.quote-details[open] summary::before { transform: rotate(225deg); margin-bottom: -3px; }
.quote-details .quote-row:first-of-type { margin-top: 8px; }
.quote-ladder .hint { align-self: center; margin-inline-start: 6px; }
.billing-chip { border: 1px dashed rgba(250,178,25,0.5); color: var(--medium); border-radius: 999px; padding: 1px 9px; cursor: help; }
.log-what { color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* panels: compact empty states and folded helpers */
.svc-empty { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; }
.svc-empty.good { color: var(--good); border-color: rgba(12,163,12,0.4); }
.btn.sm { padding: 6px 12px; font-size: 12px; border-radius: 9px; }
.fixes-wrap { font-size: 12px; }
.fixes-wrap summary { cursor: pointer; color: var(--text-3); margin-bottom: 6px; }
.fixes-wrap summary:hover { color: var(--text); }
.finding-details details summary { cursor: pointer; color: var(--text-3); font-size: 11.5px; }
td.num { font-variant-numeric: tabular-nums; direction: ltr; text-align: end; }
.top-actions { gap: 12px; }
@media (max-width: 720px) {
  .top-actions { gap: 8px; }
  .user #user-email { max-width: 120px; }
  .quote-total b { font-size: 26px; }
  .onb-brand { flex-wrap: wrap; justify-content: center; }
  .onb-brand .onb-lang { margin-inline-start: 0; flex-basis: 100%; justify-content: center; }
}

/* ---- reputation & brand (round 9) ---- */
.brand-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; align-items: start; }
.brand-card .brand-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.brand-card .brand-head h3 { margin: 0; font-size: 13.5px; font-weight: 600; }
.brand-card .brand-head .hint { font-size: 11.5px; color: var(--text-3); }
.brand-rows { display: flex; flex-direction: column; gap: 4px; }
.brand-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 12px; min-width: 0; }
.brand-row .nm { direction: ltr; unicode-bidi: plaintext; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 1 150px; }
.brand-row a.nm { color: inherit; }
.brand-row .brand-sub { font-size: 11px; color: var(--text-3); white-space: nowrap; }
.brand-card .svc-empty { padding: 12px; }
.brand-card .brand-note { font-size: 11.5px; color: var(--text-3); }

/* ---- round 10: console without pricing (PRICING_ENABLED=0): installed / running chips, no quote column ---- */
.console.no-pricing .console-body { grid-template-columns: minmax(0, 1fr) 288px; }
.mod-state { font-size: 11.5px; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--line); color: var(--text-2); white-space: nowrap; }
.mod-state.st-done { color: var(--good); border-color: currentColor; }
.mod-state.st-failed { color: var(--critical); border-color: currentColor; }
.mod-state.st-skipped { color: var(--medium); border-color: currentColor; }
.mod-state.st-running { color: var(--cyan); border-color: currentColor; }
@media (max-width: 900px) { .console.no-pricing .console-body { grid-template-columns: 1fr; } }
/* hidden pricing-models backup page */
.pm-page .pm-summary { font-size: 14px; margin: 6px 0 8px; }
.pm-page .pm-points { margin: 0; padding-inline-start: 20px; font-size: 13px; color: var(--text-2); line-height: 1.7; }
.pm-page .pm-newest { border-color: rgba(34, 211, 238, 0.5); }
.pm-page .pm-flag { font-size: 12.5px; color: var(--text-3); }

/* ---------------- round 10: fix block, verify, run proof ---------------- */
.span-9 { grid-column: span 9; } .span-3 { grid-column: span 3; }
.btn-xs { font-size: 11px; padding: 3px 9px; border-radius: 8px; }
.fix { display: grid; gap: 8px; }
.fix-problem { color: var(--text); }
.fix-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fix-meta .btn-verify { margin-inline-start: auto; }
.chip.v-resolved { color: var(--good); border-color: rgba(12,163,12,0.45); }
.chip.v-still-open { color: var(--high); border-color: rgba(255,120,60,0.45); }
.chip.v-not-verified { color: var(--medium); }
.snippet { border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); overflow: hidden; }
.snippet-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 4px 8px; font-size: 11px; color: var(--text-3); border-bottom: 1px solid var(--line); }
.snippet pre, .fix-plan pre { margin: 0; padding: 8px 10px; font-size: 11.5px; direction: ltr; text-align: left; white-space: pre-wrap; word-break: break-word; color: var(--text-2); }
.fix-plan summary { cursor: pointer; font-size: 11.5px; color: var(--text-3); }
.proof-link { display: inline-flex; align-items: center; gap: 6px; }
.proof-link .pl-dot, .pf-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); display: inline-block; }
.proof-link.ok .pl-dot, .lnk.ok .pf-dot { background: var(--good); box-shadow: 0 0 8px var(--good); }
.proof-link.warn .pl-dot, .lnk.warn .pf-dot { background: var(--medium); box-shadow: 0 0 8px var(--medium); }
.proof-top { display: grid; gap: 6px; margin-bottom: 14px; }
.proof-line { font-size: 22px; font-weight: 500; }
.proof-line.ok { color: var(--good); } .proof-line.warn { color: var(--medium); }
.proof-sub { font-size: 12.5px; color: var(--text-3); }
.proof-counts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pf-counts { display: inline-flex; gap: 8px; font-size: 11.5px; }
.pf-n.ran { color: var(--good); } .pf-n.skipped { color: var(--medium); } .pf-n.failed { color: var(--critical); } .pf-n.oos { color: var(--text-3); }
.chip.pf-ran { color: var(--good); } .chip.pf-skipped { color: var(--medium); } .chip.pf-failed { color: var(--critical); } .chip.pf-oos, .chip.pf-mock, .chip.pf-na, .chip.pf-not-applicable { color: var(--text-3); }
.proof-list { display: grid; gap: 8px; }
.pf-inst { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: 8px 12px; }
.pf-inst summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pf-name { font-weight: 500; flex: 1 1 200px; }
.pf-time { font-size: 11px; color: var(--text-3); }
.pf-table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 12px; }
.pf-table td { padding: 4px 6px; border-top: 1px solid var(--line); }
.pf-id { color: var(--text-3); font-family: ui-monospace, monospace; font-size: 11px; direction: ltr; }
.pf-assets { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.pf-asset { font-size: 11px; direction: ltr; border-radius: 6px; padding: 2px 6px; border: 1px solid var(--line); color: var(--text-2); }
.pf-asset.pf-skipped { color: var(--medium); border-style: dashed; } .pf-asset.pf-failed { color: var(--critical); } .pf-asset.pf-oos { color: var(--text-3); border-style: dotted; }
.proof-history { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 12.5px; }
.proof-history li { display: flex; justify-content: space-between; gap: 8px; }
.proof-history li.on a { font-weight: 600; }
.proof-history a { display: inline-flex; gap: 6px; align-items: center; }
.proof-history small { color: var(--text-3); }
.hint.bad { color: var(--critical); }
@media (max-width: 900px) { .span-9, .span-3 { grid-column: span 12; } }

/* round 10: standards picker (reports page) */
.std-form { display: grid; gap: 12px; }
.std-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.std-item { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--surface); cursor: pointer; }
.std-item input { accent-color: var(--cyan); width: 16px; height: 16px; margin-top: 2px; }
.std-txt { display: grid; gap: 2px; font-size: 13px; }
.std-txt small { font-size: 11.5px; color: var(--text-3); }
.std-txt .std-review { color: var(--medium); }
.pf-fold summary { cursor: pointer; font-size: 11.5px; color: var(--text-3); margin-top: 6px; }

/* ---------- round 11: authorization pages (sign, connect, admin, live demo) ---------- */
.authz-main { max-width: 860px; margin: 0 auto; padding: 18px var(--gutter) 40px; }
.authz-card h1 { margin: 0 0 6px; font-size: 24px; font-weight: 600; }
.authz-h2 { font-size: 14px; color: var(--text-2); font-weight: 500; margin: 14px 0 6px; }
.statement { white-space: pre-wrap; font: inherit; font-size: 13.5px; line-height: 1.65; border: 1px solid var(--line-2); background: rgba(0,0,0,0.25); border-radius: 12px; padding: 14px 16px; margin: 0 0 16px; max-height: 360px; overflow: auto; }
.sig-pad { width: 100%; max-width: 640px; height: auto; aspect-ratio: 16 / 5; border-radius: 12px; border: 1px solid var(--line-2); background: #fff; touch-action: none; cursor: crosshair; display: block; }
.typed-sig { font-style: italic; }
.check-line { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text); }
.check-line input { width: 18px; height: 18px; accent-color: var(--cyan); }
.slot-list { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 6px; }
.slot-list .slot { display: flex; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; background: var(--surface); font-size: 13px; }
.slot-list .slot.signed { border-color: rgba(12,163,12,0.5); }
.slot-state { margin-inline-start: auto; color: var(--text-2); font-size: 12px; }
.authz-page select, .authz-page textarea, .authz-page input[type=date], .authz-page input[type=number], .authz-page input[type=tel], .authz-page input[type=file] { width: 100%; min-height: 40px; border-radius: 10px; border: 1px solid var(--line-2); background: rgba(0,0,0,0.25); color: var(--text); font: inherit; font-size: 13.5px; padding: 8px 10px; outline: none; }
.authz-page textarea { resize: vertical; line-height: 1.5; }
.authz-page select option { background: #0b1020; color: var(--text); }
.authz-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 6px; }
.ip-box { border: 1px solid var(--line-2); border-radius: 14px; padding: 16px 18px; margin: 0 0 14px; background: rgba(0,0,0,0.2); }
.ip-label { font-size: 12px; color: var(--text-3); }
.ip-value { font-size: 30px; font-weight: 300; letter-spacing: 0.02em; font-family: ui-monospace, 'Liberation Mono', monospace; }
.nudge { margin-top: 18px; padding: 10px 14px; border-radius: 12px; border: 1px dashed rgba(34,211,238,0.4); color: var(--text-2); font-size: 13px; }
.demo-badge { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; color: #06080f; background: var(--medium); border-radius: 6px; padding: 3px 8px; }
.adm-tabs button { padding: 7px 14px; font-size: 13px; }
.adm-form { margin-bottom: 18px; }
.field-row4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.field-row4 .span-2 { grid-column: span 2; }
.stages { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: grid; gap: 6px; grid-column: span 2; margin: 0; }
.stages legend { font-size: 12px; color: var(--text-3); padding: 0 6px; }
.adm-table { width: 100%; font-size: 12.5px; border-collapse: collapse; }
.adm-table th { text-align: start; font-weight: 500; color: var(--text-3); font-size: 11.5px; padding: 6px 8px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: rgba(10,14,28,0.95); }
.adm-table td { padding: 7px 8px; border-bottom: 1px solid rgba(255,255,255,0.045); vertical-align: middle; }
.adm-actions { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.adm-bar { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.adm-bar select { max-width: 320px; }
.tester-sign { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; }
.demo-ribbon { position: fixed; top: 0; inset-inline: 0; z-index: 70; text-align: center; font-weight: 800; letter-spacing: 0.4em; font-size: 12px; color: #06080f; background: repeating-linear-gradient(135deg, var(--medium) 0 18px, #f6c453 18px 36px); padding: 4px 0; }
.demo-page .top { margin-top: 30px; }
.demo-domain { font-size: 26px; font-weight: 300; text-align: center; }
.demo-grid { min-height: calc(100vh - 140px); }
.demo-step { display: grid; grid-template-columns: auto auto 1fr; gap: 10px; align-items: center; padding: 14px; border-radius: 14px; border: 1px solid var(--line); margin-bottom: 10px; font-size: 15px; }
.demo-step .demo-state { justify-self: end; color: var(--text-2); font-size: 13px; }
.demo-step .led, .demo-jobs .led { width: 10px; height: 10px; border-radius: 50%; background: var(--text-3); display: inline-block; }
.demo-step.ok .led, .demo-jobs .done .led { background: var(--good); box-shadow: 0 0 10px var(--good); }
.demo-step.run .led, .demo-jobs .running .led { background: var(--cyan); animation: blink 1.2s ease-in-out infinite; }
.demo-step.wait .led { background: var(--medium); }
.demo-jobs .failed .led { background: var(--critical); }
.demo-jobs, .demo-findings { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.demo-jobs li { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; font-size: 13px; padding: 6px 10px; border-radius: 10px; background: var(--surface); }
.demo-findings li { display: flex; gap: 8px; align-items: center; font-size: 13px; padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.demo-counts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.sev-strip { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (max-width: 900px) { .field-row4 { grid-template-columns: 1fr 1fr; } .demo-grid > .span-4 { grid-column: span 12; } .top { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .field-row4, .field-row { grid-template-columns: 1fr; } .field-row4 .span-2, .stages { grid-column: span 1; } }
.demo-findings .sev-dot { background: currentColor; flex: none; }
.auth-alt { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; font-size: 13px; color: var(--text-2); margin-top: 14px; } .auth-alt .err { flex-basis: 100%; word-break: break-all; }
.console-nudge { max-width: 1568px; margin: 12px auto 0; margin-inline: max(var(--gutter), calc((100vw - 1568px) / 2)); }

/* ---------------- round 12: industrial controllers (OT) + fix agent ---------------- */
.pbadge.txt { direction: inherit; font-size: 11px; padding: 2px 9px; }
.ot-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 14px; }
.ot-hosts { display: grid; gap: 12px; align-content: start; }
.ot-host { border: 1px solid rgba(208, 59, 59, 0.45); border-radius: 14px; background: linear-gradient(180deg, rgba(208, 59, 59, 0.08), var(--surface)); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.ot-host-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; font-weight: 500; }
.ot-protos { display: grid; gap: 6px; }
.ot-proto { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; font-size: 13px; }
.ot-port { font-family: ui-monospace, 'Liberation Mono', monospace; font-size: 11.5px; color: #fff; background: var(--critical); border-radius: 6px; padding: 1px 7px; }
.cve-chip.kev { --c: var(--critical); }
.ot-side { display: grid; gap: 12px; align-content: start; }
.ot-active, .ot-sensor { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 12px 14px; display: grid; gap: 8px; }
.ot-sensor { border-style: dashed; opacity: .85; }
.ot-gates { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; font-size: 12.5px; }
.ot-gates li { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ot-gate-ic { width: 18px; height: 18px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 11px; flex: none; }
.ot-gates li.ok .ot-gate-ic { background: rgba(12, 163, 12, 0.18); color: var(--good); }
.ot-gates li.no .ot-gate-ic { background: rgba(255, 255, 255, 0.06); color: var(--text-3); }
.ot-gates li.no { color: var(--text-2); }
.ot-active-info { display: grid; gap: 3px; font-size: 12px; color: var(--text-2); }
.fx-stages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.fx-stage { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--surface); font-size: 13px; }
.fx-stage .hint { flex-basis: 100%; }
.fx-led { width: 9px; height: 9px; border-radius: 50%; background: var(--text-3); }
.fx-stage.on .fx-led { background: var(--good); box-shadow: 0 0 8px var(--good); }
.fx-stage.off { opacity: .8; }
.fx-provider { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 13px; margin-bottom: 12px; }
.fx-token { display: flex; gap: 8px; flex-wrap: wrap; }
.fx-token input, .fx-cand-form input, .fx-cand-form select { background: rgba(0, 0, 0, 0.25); border: 1px solid var(--line-2); border-radius: 8px; color: var(--text); padding: 5px 9px; font: inherit; font-size: 12.5px; min-width: 0; }
.fx-token input { width: min(340px, 100%); }
.fx-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 14px; }
.fx-candidates, .fx-changes { display: grid; gap: 10px; align-content: start; }
.fx-cand { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--surface); display: grid; gap: 8px; }
.fx-cand-title { display: flex; gap: 8px; align-items: center; font-size: 13px; }
.fx-cand-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.fx-cand-form input { flex: 1 1 180px; }
.fx-change { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--surface); display: grid; gap: 8px; min-width: 0; }
.fx-change.st-done { border-color: rgba(12, 163, 12, 0.5); }
.fx-change.st-rolled-back, .fx-change.st-failed { border-color: rgba(236, 131, 90, 0.55); }
.fx-change-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.pbadge.fx-st-done { color: var(--good); border-color: rgba(12, 163, 12, 0.5); }
.pbadge.fx-st-rolled-back, .pbadge.fx-st-failed { color: var(--high); border-color: rgba(236, 131, 90, 0.55); }
.pbadge.fx-st-applying, .pbadge.fx-st-verifying, .pbadge.fx-st-proposed { color: var(--cyan); border-color: rgba(34, 211, 238, 0.4); }
.fx-diff { width: 100%; border-collapse: collapse; font-size: 12px; table-layout: fixed; }
.fx-diff th { text-align: start; color: var(--text-3); font-weight: 400; padding: 4px 6px; }
.fx-diff td { vertical-align: top; padding: 6px; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.fx-diff code { font-family: ui-monospace, 'Liberation Mono', monospace; font-size: 11.5px; display: block; }
.fx-diff .fx-k { display: grid; gap: 4px; }
.fx-diff .fx-before code { color: var(--text-3); }
.fx-diff tr.fx-create .fx-after code, .fx-diff tr.fx-update .fx-after code { color: #7ee2a8; }
.fx-diff tr.fx-delete .fx-before code { text-decoration: line-through; color: var(--high); }
.fx-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--text-2); }
.fx-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fx-msg:empty { display: none; }
.fix-panel pre.snippet { margin: 0; padding: 8px 10px; font-size: 11.5px; direction: ltr; text-align: left; color: var(--text-2); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 260px; overflow: auto; }
.spinner { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--line-2); border-top-color: var(--cyan); animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 900px) { .ot-grid, .fx-grid, .fx-stages { grid-template-columns: 1fr; } }
.btn.btn-stop { background: var(--critical); border-color: var(--critical); color: #fff; }
.ot-stop-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.ot-stop-bar input { background: rgba(0, 0, 0, 0.25); border: 1px solid var(--line-2); border-radius: 8px; color: var(--text); padding: 6px 10px; font: inherit; font-size: 13px; flex: 1 1 200px; min-width: 0; }

/* ---------------- round 13: Microsoft 365 monitor ---------------- */
.m365-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 14px; }
.m365-side { display: grid; gap: 12px; align-content: start; }
.m365-score { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 12px 14px; display: grid; gap: 8px; }
.m365-score-head { display: flex; align-items: baseline; gap: 10px; }
.m365-score-n { font-size: 30px; font-weight: 300; }
.m365-bar { height: 8px; border-radius: 6px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.m365-fill { display: block; height: 100%; border-radius: 6px; background: var(--medium); }
.m365-fill.good { background: var(--good); }
.m365-fill.bad { background: var(--high); }
.m365-top { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; font-size: 12.5px; color: var(--text-2); }
.m365-top li { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.m365-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.m365-stat { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: 8px 10px; display: grid; gap: 2px; }
.m365-stat b { font-size: 18px; font-weight: 500; }
.m365-stat.warn { border-color: rgba(236, 131, 90, 0.55); }
.m365-stat.warn b { color: var(--high); }
.m365-areas { display: grid; gap: 8px; align-content: start; }
.m365-area { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.m365-area.has { border-color: rgba(236, 131, 90, 0.4); }
.m365-area summary { cursor: pointer; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 9px 12px; font-size: 13.5px; }
.m365-area-name { font-weight: 500; }
.m365-counts { display: flex; gap: 6px; flex-wrap: wrap; margin-inline-start: auto; }
.m365-area-body { display: grid; gap: 6px; padding: 0 12px 10px; }
.m365-finding { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.m365-checks { list-style: none; margin: 4px 0 0; padding: 6px 0 0; border-top: 1px solid var(--line); display: grid; gap: 4px; font-size: 12px; color: var(--text-2); }
.m365-checks li { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.m365-sync { font-size: 12px; }
.m365-state { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 4px 0 14px; }
.m365-state .hint, .m365-state .err { flex-basis: 100%; }
.m365-card h2 { font-size: 15px; font-weight: 600; margin: 18px 0 4px; }
.m365-step { border: 1px solid var(--line-2); border-radius: 14px; padding: 4px 16px 12px; background: rgba(0, 0, 0, 0.2); }
.m365-hint-row { display: grid; gap: 4px; font-size: 12.5px; color: var(--text-2); margin-top: 8px; }
.m365-hint-row input, .m365-link-row input { min-height: 38px; border-radius: 10px; border: 1px solid var(--line-2); background: rgba(0, 0, 0, 0.25); color: var(--text); font: inherit; font-size: 13px; padding: 7px 10px; min-width: 0; }
.m365-link { display: grid; gap: 6px; margin-top: 8px; }
.m365-link-row { display: flex; gap: 8px; }
.m365-link-row input { flex: 1; font-family: ui-monospace, 'Liberation Mono', monospace; font-size: 12px; }
.m365-perms { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.m365-perms td { padding: 6px; border-top: 1px solid var(--line); vertical-align: top; }
.m365-perms code { font-family: ui-monospace, 'Liberation Mono', monospace; font-size: 11.5px; white-space: nowrap; }
.m365-remove { margin-top: 16px; font-size: 13px; color: var(--text-2); }
.m365-remove summary { cursor: pointer; }
.m365-remove ol { margin: 8px 0 0; padding-inline-start: 20px; display: grid; gap: 4px; }
@media (max-width: 900px) { .m365-grid { grid-template-columns: 1fr; } .m365-perms code { white-space: normal; overflow-wrap: anywhere; } }
.m365-link .btn, .m365-side > .btn { justify-self: start; }

/* ---------------- round 14: admin control panel ---------------- */
.pbadge.warn { color: var(--medium); border-color: rgba(250,178,25,0.55); }
.cp-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.cp-head h2 { font-size: 18px; margin: 0 0 4px; }
.cp-head-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cp-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); gap: 14px; }
.cp-group { border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; background: rgba(255,255,255,0.02); backdrop-filter: blur(8px); }
.cp-group-h { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); margin: 2px 0 6px; }
.cp-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'name ctl' 'meta meta'; gap: 4px 12px; padding: 9px 0; border-top: 1px solid var(--line); align-items: center; }
.cp-row:first-of-type { border-top: none; }
.cp-row > .cp-name { grid-area: name; }
.cp-row > .cp-meta { grid-area: meta; }
.cp-row > :nth-child(2) { grid-area: ctl; justify-self: end; }
.cp-row.risky .cp-label::after { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--high); margin-inline-start: 6px; vertical-align: middle; box-shadow: 0 0 8px var(--high); }
.cp-name { display: flex; flex-direction: column; min-width: 0; }
.cp-label { font-size: 13.5px; color: var(--text); }
.cp-key { font-size: 10.5px; color: var(--text-3); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.cp-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 11px; color: var(--text-3); }
.cp-risk { color: var(--high); cursor: help; }
.cp-select { background: rgba(255,255,255,0.04); color: var(--text); border: 1px solid var(--line-2); border-radius: 8px; padding: 4px 8px; font: inherit; font-size: 12.5px; direction: ltr; }
.cp-list { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; max-width: 320px; }
.cp-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; border: 1px solid var(--line-2); border-radius: 999px; padding: 2px 8px; cursor: pointer; }
.cp-chip:has(input:checked) { border-color: rgba(34,211,238,0.55); color: var(--cyan); }
.cp-sub { font-size: 14px; margin: 22px 0 6px; }
.cp-keys { display: grid; gap: 6px; }
.cp-keyrow { display: grid; grid-template-columns: minmax(0, 1.4fr) auto minmax(0, 1.2fr) auto auto; gap: 10px; align-items: center; padding: 7px 10px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,0.02); }
.cp-secret { background: rgba(0,0,0,0.25); color: var(--text); border: 1px solid var(--line-2); border-radius: 8px; padding: 5px 8px; font: inherit; font-size: 12.5px; direction: ltr; min-width: 0; }
.cp-dialog { border: 1px solid rgba(236,131,90,0.5); border-radius: 16px; background: rgba(12,16,30,0.96); color: var(--text); padding: 18px 20px; max-width: min(520px, 92vw); box-shadow: 0 30px 80px -20px rgba(0,0,0,0.8), 0 0 40px -10px rgba(139,92,246,0.4); }
.cp-dialog::backdrop { background: rgba(4,6,12,0.65); backdrop-filter: blur(3px); }
.cp-dialog h3 { margin: 0 0 8px; font-size: 15px; }
.cp-dialog p { white-space: pre-line; color: var(--text-2); font-size: 13px; line-height: 1.55; margin: 0 0 14px; }
@media (max-width: 720px) {
  .cp-keyrow { grid-template-columns: 1fr auto; }
  .cp-keyrow .cp-secret { grid-column: 1 / -1; }
}

/* ---------------- round 14: metadata + brand-social cards ---------------- */
.md-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 4px 0 8px; }
.md-kpi { border: 1px solid var(--line); border-radius: 10px; padding: 6px 8px; display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: var(--text-3); }
.md-kpi b { font-size: 17px; color: var(--text-2); font-weight: 600; }
.md-kpi.hit b { color: var(--medium); }
.bs-off { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border: 1px dashed rgba(139,92,246,0.45); border-radius: 12px; background: rgba(139,92,246,0.06); font-size: 12.5px; color: var(--text-2); }
.bs-off b { color: var(--violet); font-size: 13px; }
.bs-acts { display: inline-flex; gap: 4px; margin-inline-start: auto; }
.bs-manual { margin-top: 8px; font-size: 12px; color: var(--text-3); }
.bs-manual summary { cursor: pointer; }
.bs-manual-row { display: flex; gap: 8px; flex-wrap: wrap; padding: 3px 0; }
.bs-manual-row a { color: var(--cyan); font-size: 11.5px; }

/* ---------------- round 14: wide console ---------------- */
@media (min-width: 1700px) { body.console-wide .grid, body.console-wide .foot { max-width: min(2800px, 100%); } }
.wide-console { container-type: inline-size; container-name: wc; }
.wc-toolbar { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; margin-bottom: 10px; }
.wc-toolbar h2 { margin: 0; }
.wc-tools { display: flex; gap: 8px; flex-wrap: wrap; margin-inline-start: auto; align-items: center; }
.wc-search { min-width: 200px; background: rgba(0,0,0,0.25); color: var(--text); border: 1px solid var(--line-2); border-radius: 10px; padding: 6px 10px; font: inherit; font-size: 13px; }
.wc-search:focus, .wc-select:focus { outline: none; border-color: rgba(34,211,238,0.6); box-shadow: 0 0 0 3px rgba(34,211,238,0.15); }
.wc-select { background: rgba(255,255,255,0.04); color: var(--text); border: 1px solid var(--line-2); border-radius: 10px; padding: 5px 8px; font: inherit; font-size: 12.5px; }
.wc-select option { background: #0c1020; }
.wc-tools .btn[aria-pressed="true"] { border-color: rgba(34,211,238,0.55); color: var(--cyan); }
.wc-groups { display: flex; flex-direction: column; gap: 12px; }
.wc-group-h { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: none; border-bottom: 1px solid var(--line); color: var(--text-2); font: inherit; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; padding: 4px 2px 6px; cursor: pointer; text-align: start; }
.wc-group-h:focus-visible { outline: 2px solid rgba(34,211,238,0.6); outline-offset: 2px; border-radius: 6px; }
.wc-chev { display: inline-block; transition: transform .2s; transform: rotate(90deg); color: var(--cyan); }
.wc-group.collapsed .wc-chev { transform: rotate(0deg); }
[dir=rtl] .wc-group.collapsed .wc-chev { transform: rotate(180deg); }
.wc-gcount { color: var(--text-3); font-size: 11px; }
.wc-gsev { margin-inline-start: auto; font-size: 11px; text-transform: none; letter-spacing: 0; }
.wc-gsev.bad { color: var(--high); }
/* the grid: 1 column on a phone, 2 on a tablet, 3 at ~1440, 4 at ~1920, 5–6 at 2560+ (container width, not the window) */
.wc-grid { display: grid; grid-template-columns: 1fr; gap: 10px; padding-top: 10px; grid-auto-flow: dense; }
@container wc (min-width: 560px) { .wc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container wc (min-width: 1000px) { .wc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container wc (min-width: 1500px) { .wc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@container wc (min-width: 2050px) { .wc-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@container wc (min-width: 2550px) { .wc-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@container wc (min-width: 560px) { .wc-card.wide { grid-column: span 2; } }
.wc-card { position: relative; border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px 9px; background: linear-gradient(160deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01)); backdrop-filter: blur(10px); cursor: pointer; display: flex; flex-direction: column; gap: 6px; min-width: 0; transition: border-color .2s, transform .2s, box-shadow .2s; contain: layout paint; }
.wc-card::before { content: ''; position: absolute; inset-inline-start: 0; top: 10px; bottom: 10px; width: 2px; border-radius: 2px; background: var(--line-2); }
.wc-card.st-bad::before { background: var(--critical); box-shadow: 0 0 10px var(--critical); }
.wc-card.st-warn::before { background: var(--medium); }
.wc-card.st-ok::before { background: var(--cyan); }
.wc-card.st-policy::before { background: var(--violet); }
.wc-card:hover, .wc-card:focus-visible { border-color: rgba(34,211,238,0.45); box-shadow: 0 10px 30px -18px rgba(34,211,238,0.6); outline: none; transform: translateY(-1px); }
.wc-card.st-off, .wc-card.st-soon { opacity: .62; }
.wc-card.ph { border-style: dashed; }
.wc-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.wc-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--text-3); }
.st-ok .wc-dot { background: var(--cyan); box-shadow: 0 0 8px rgba(34,211,238,0.8); }
.st-bad .wc-dot { background: var(--critical); box-shadow: 0 0 10px var(--critical); animation: pulse 2.2s ease-out infinite; }
.st-warn .wc-dot { background: var(--medium); }
.st-policy .wc-dot { background: var(--violet); }
.st-idle .wc-dot { background: transparent; border: 1px solid var(--text-3); }
.st-soon .wc-dot { background: transparent; border: 1px dashed var(--violet); }
.wc-name { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.wc-pin { background: none; border: none; color: var(--text-3); font-size: 14px; cursor: pointer; padding: 0 2px; line-height: 1; }
.wc-pin.on { color: var(--cyan); text-shadow: 0 0 8px rgba(34,211,238,0.7); }
.wc-pin:focus-visible { outline: 2px solid rgba(34,211,238,0.6); border-radius: 4px; }
.wc-meta { display: flex; gap: 8px; font-size: 11px; color: var(--text-3); }
.wc-state { text-transform: lowercase; }
.st-bad .wc-state { color: var(--high); }
.st-policy .wc-state { color: var(--violet); }
.wc-last { margin-inline-start: auto; }
.wc-bars { display: flex; height: 6px; gap: 2px; border-radius: 3px; overflow: hidden; background: rgba(255,255,255,0.04); }
.wc-bar { width: var(--w); min-width: 0; height: 100%; position: relative; }
.wc-bar i { position: absolute; inset: -9px auto auto 0; font-size: 0; }
.wc-bar.sev-critical { background: var(--critical); } .wc-bar.sev-high { background: var(--high); } .wc-bar.sev-medium { background: var(--medium); } .wc-bar.sev-low { background: var(--low); }
.wc-line { margin: 0; font-size: 12px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wc-grid.compact { gap: 6px; }
.wc-grid.compact .wc-card { padding: 6px 10px; gap: 4px; }
.wc-grid.compact .wc-meta { display: none; }
.wc-grid.compact .wc-name { font-size: 12.5px; }
.wc-keys { margin: 10px 0 0; font-size: 11px; }
/* the drawer: the module's own panel slides in; the page stays where it was */
.wc-drawer { position: fixed; inset: 0; z-index: 60; background: rgba(4,6,12,0.55); backdrop-filter: blur(3px); display: flex; justify-content: flex-end; }
.wc-drawer[hidden] { display: none; }
.wc-sheet { width: min(1100px, 96vw); height: 100%; overflow: auto; background: rgba(9,12,24,0.97); border-inline-start: 1px solid rgba(34,211,238,0.25); box-shadow: -30px 0 80px -30px rgba(139,92,246,0.5); padding: 14px 18px 24px; animation: wcin .25s ease-out; }
@keyframes wcin { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }
[dir=rtl] .wc-sheet { box-shadow: 30px 0 80px -30px rgba(139,92,246,0.5); }
.wc-sheet-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; position: sticky; top: -14px; padding: 6px 0 10px; background: rgba(9,12,24,0.97); z-index: 2; }
.wc-sheet-head h2 { margin: 0; font-size: 17px; }
.wc-sheet-body > .panel { grid-column: auto; margin: 0; }
.wc-generic { display: grid; gap: 10px; font-size: 13.5px; color: var(--text-2); }
.wc-desc { margin: 0; line-height: 1.6; }
.wc-headline { margin: 0; color: var(--text); }
.wc-flist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.wc-flist li { display: flex; gap: 8px; align-items: center; }
body.wc-drawer-open { overflow: hidden; }
/* wall mode: full screen, no controls, larger type, the critical items rotate */
.wall { position: fixed; inset: 0; z-index: 80; background: radial-gradient(1200px 700px at 20% 10%, rgba(34,211,238,0.10), transparent 60%), radial-gradient(1000px 700px at 85% 90%, rgba(139,92,246,0.14), transparent 60%), #05070e; color: var(--text); padding: 3vh 3vw; display: grid; grid-template-rows: auto auto 1fr; gap: 3vh; cursor: none; }
.wall[hidden] { display: none; }
body.wall-on { overflow: hidden; }
.wall-top { display: flex; align-items: center; gap: 4vw; }
.wall-score b { font-size: clamp(64px, 9vw, 180px); font-weight: 700; background: var(--accent); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; }
.wall-score span { display: block; font-size: clamp(16px, 1.6vw, 30px); color: var(--text-2); }
.wall-sev { display: flex; gap: 2vw; margin-inline-start: auto; }
.wall-sevc { display: flex; flex-direction: column; align-items: center; min-width: 6vw; }
.wall-sevc b { font-size: clamp(32px, 4vw, 84px); line-height: 1; }
.wall-sevc span { font-size: clamp(13px, 1.1vw, 22px); color: var(--text-3); }
.wall-sevc.sev-critical b { color: var(--critical); } .wall-sevc.sev-high b { color: var(--high); } .wall-sevc.sev-medium b { color: var(--medium); } .wall-sevc.sev-low b { color: var(--low); }
.wall-highlight { min-height: 18vh; }
.wall-item { border: 1px solid rgba(208,59,59,0.45); border-radius: 22px; padding: 2.4vh 2.4vw; background: rgba(208,59,59,0.07); box-shadow: 0 0 60px -20px rgba(208,59,59,0.6); animation: wcin .5s ease-out; display: grid; gap: 1vh; }
.wall-item.sev-high { border-color: rgba(236,131,90,0.45); background: rgba(236,131,90,0.06); box-shadow: 0 0 60px -20px rgba(236,131,90,0.5); }
.wall-item .sev-badge { justify-self: start; font-size: clamp(13px, 1vw, 20px); }
.wall-item-t { font-size: clamp(24px, 2.6vw, 54px); font-weight: 600; line-height: 1.2; }
.wall-item-w { font-size: clamp(15px, 1.3vw, 26px); color: var(--text-2); }
.wall-item-i { font-size: clamp(12px, .9vw, 18px); color: var(--text-3); }
.wall-calm { font-size: clamp(22px, 2.2vw, 44px); color: var(--cyan); }
.wall-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(180px, 13vw, 300px), 1fr)); gap: 1vh 1vw; align-content: start; overflow: hidden; }
.wall-mod { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 12px; padding: 1vh 1vw; font-size: clamp(14px, 1.05vw, 22px); background: rgba(255,255,255,0.02); }
.wall-mod .wc-dot { width: 12px; height: 12px; }
.wall-mod-n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 720px) { .wc-tools { margin-inline-start: 0; width: 100%; } .wc-search { flex: 1; min-width: 0; } .wall-top { flex-direction: column; align-items: flex-start; } }
.pf-stats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; font-size: 11px; }

/* ---------------- round 15: grid-first dashboard — compact strip, module pages, sample tags ---------------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.top-strip { display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap; padding: 10px 14px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(160deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)); }
.ts-score { display: flex; align-items: baseline; gap: 6px; }
.ts-score b { font-size: 26px; font-weight: 700; color: var(--cyan); font-variant-numeric: tabular-nums; }
.ts-score span { font-size: 12px; color: var(--text-2); }
.ts-sev, .ts-kpis { display: flex; gap: 6px 12px; flex-wrap: wrap; align-items: baseline; }
.ts-chip, .ts-kpi { display: inline-flex; align-items: baseline; gap: 5px; font-size: 12px; color: var(--text-2); }
.ts-chip b, .ts-kpi b { font-size: 15px; color: var(--text); font-variant-numeric: tabular-nums; }
.ts-chip.sev-critical b { color: var(--critical); } .ts-chip.sev-high b { color: var(--high); } .ts-chip.sev-medium b { color: var(--medium); } .ts-chip.sev-low b { color: var(--low); }
.ts-kpis { padding-inline-start: 14px; border-inline-start: 1px solid var(--line); }
.ts-more { margin-inline-start: auto; }
body.ov-collapsed .ov-item { display: none; }
.wc-sample { flex: none; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; padding: 1px 6px; border-radius: 6px; border: 1px dashed var(--violet); color: var(--violet); }
.wc-sample[hidden] { display: none; }

body.mp-on main.grid > :not(#module-page):not(#toast) { display: none !important; }
.module-page[hidden] { display: none; }
.mp-top { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.mp-top h2 { margin: 0; font-size: 19px; outline: none; }
.mp-arrow { display: inline-block; }
[dir=rtl] .mp-arrow { transform: scaleX(-1); }
.mp-status { font-size: 11.5px; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--text-2); }
.mp-status.st-bad { color: var(--high); border-color: rgba(236,131,90,0.5); }
.mp-status.st-ok { color: var(--cyan); border-color: rgba(34,211,238,0.4); }
.mp-status.st-policy { color: var(--violet); border-color: rgba(139,92,246,0.5); }
.mp-top-actions { display: flex; gap: 8px; margin-inline-start: auto; }
.mp-top-actions [hidden] { display: none; }
.mp-line { margin: 6px 0 12px; color: var(--text-2); font-size: 13px; }
.mp-body { display: grid; gap: 14px; }
.mp-cols { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.mp-main, .mp-side { display: grid; gap: 14px; min-width: 0; }
.mp-box { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: rgba(255,255,255,0.02); min-width: 0; }
.mp-h { margin: 0 0 8px; font-size: 13px; letter-spacing: .04em; color: var(--text-2); font-weight: 600; }
.mp-empty { margin: 0; color: var(--text-3); font-size: 13px; }
.mp-desc { margin: 0 0 8px; line-height: 1.6; color: var(--text-2); font-size: 13.5px; }
.mp-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.mp-chip { font: inherit; font-size: 11.5px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line-2); background: none; color: var(--text-2); cursor: pointer; }
.mp-chip.on { border-color: rgba(34,211,238,0.6); color: var(--cyan); background: rgba(34,211,238,0.08); }
.mp-chip.sev-critical.on { color: var(--critical); border-color: var(--critical); } .mp-chip.sev-high.on { color: var(--high); border-color: var(--high); }
.mp-flist { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.mp-f-row { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; background: none; border: 1px solid transparent; border-radius: 9px; padding: 6px 8px; color: var(--text); font: inherit; font-size: 13px; text-align: start; cursor: pointer; }
.mp-f-row:hover, .mp-f-row:focus-visible, .mp-f-row[aria-expanded="true"] { border-color: var(--line-2); background: rgba(255,255,255,0.03); outline: none; }
.mp-f-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-f-a { font-size: 11.5px; color: var(--text-3); direction: ltr; unicode-bidi: isolate; }
.mp-f-body { padding: 6px 10px 10px; display: grid; gap: 8px; }
.mp-f-body[hidden] { display: none; }
.mp-fix p { margin: 0 0 6px; font-size: 13px; line-height: 1.6; color: var(--text-2); }
.mp-fix .mp-fix-text { color: var(--text); }
.mp-snip { margin: 0 0 6px; padding: 8px 10px; border-radius: 8px; background: rgba(0,0,0,0.3); font-size: 11.5px; white-space: pre-wrap; overflow-wrap: anywhere; text-align: left; }
.mp-f-actions { display: flex; gap: 8px; }
.mp-trend-wrap { display: grid; gap: 4px; }
.mp-trend { width: 100%; height: 70px; }
.mp-trend-area { fill: rgba(34,211,238,0.12); }
.mp-trend-line { fill: none; stroke: var(--cyan); stroke-width: 2; vector-effect: non-scaling-stroke; }
.mp-trend-dot { fill: var(--cyan); }
[dir=rtl] .mp-trend { transform: scaleX(-1); }
.mp-trend-cap { font-size: 11.5px; color: var(--text-3); }
.mp-kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; margin-bottom: 8px; }
.mp-kv > div { display: flex; flex-direction: column; gap: 1px; }
.mp-k { font-size: 11px; color: var(--text-3); }
.mp-kv b { font-size: 13px; font-weight: 600; }
.mp-checks, .mp-targets { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 3px; font-size: 12.5px; max-height: 260px; overflow: auto; }
.mp-checks li, .mp-targets li { display: flex; gap: 8px; align-items: baseline; }
.mp-check-s { flex: none; font-size: 10.5px; padding: 0 6px; border-radius: 6px; border: 1px solid var(--line-2); color: var(--text-2); }
.ps-ran .mp-check-s { color: var(--cyan); border-color: rgba(34,211,238,0.4); }
.ps-failed .mp-check-s { color: var(--critical); border-color: var(--critical); }
.ps-skipped .mp-check-s { color: var(--violet); border-color: rgba(139,92,246,0.5); }
.mp-type { flex: none; font-size: 10.5px; color: var(--text-3); min-width: 44px; }
.mp-targets bdi { direction: ltr; }
.mp-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.mp-table-wrap { overflow-x: auto; }
.mp-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.mp-table th { text-align: start; font-weight: 500; color: var(--text-3); font-size: 11.5px; padding: 6px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.mp-table td { padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.mp-marks { display: inline-flex; gap: 4px; }
.mp-marks .btn.on { border-color: rgba(34,211,238,0.6); color: var(--cyan); }
.mp-panel > .panel { grid-column: auto; margin: 0; }
.mp-sample-bars { display: flex; gap: 14px; }
.mp-sevc { display: flex; flex-direction: column; } .mp-sevc b { font-size: 20px; }
@media (max-width: 900px) { .mp-cols { grid-template-columns: 1fr; } .ts-kpis { padding-inline-start: 0; border-inline-start: none; } .ts-more { margin-inline-start: 0; } }

/* ---------- round 15: admin — go-live, system health, import, onboarding, two-factor ---------- */
.gl-bar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; margin-bottom: 14px; }
.gl-bar i { display: block; height: 100%; background: var(--accent); transition: width .3s; }
.gl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.gl-item { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--surface); border-inline-start: 4px solid var(--line); }
.gl-item.gl-ok { border-inline-start-color: var(--good); }
.gl-item.gl-warn, .gl-item.gl-manual { border-inline-start-color: var(--medium); }
.gl-item.gl-fail { border-inline-start-color: var(--critical); }
.gl-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gl-facts { margin-top: 6px; overflow-wrap: anywhere; }
.gl-act { margin: 6px 0 0; }
.gl-tick { margin-top: 8px; }
.gl-tick input { flex: 1 1 220px; min-width: 0; }
.sys-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.sys-card { display: grid; gap: 6px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); border-top: 3px solid var(--line); }
.sys-card.sys-ok { border-top-color: var(--good); }
.sys-card.sys-warn { border-top-color: var(--medium); }
.sys-card.sys-fail { border-top-color: var(--critical); }
.sys-card .sys-name { font-size: 12px; opacity: .75; }
.sys-card strong { font-size: 16px; overflow-wrap: anywhere; }
.sys-card .pbadge { justify-self: start; }
.imp-sum { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; align-items: center; }
.imp-stat { display: inline-flex; gap: 6px; align-items: baseline; padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.imp-stat b { font-size: 16px; }
.field.chk { display: flex; flex-direction: row; align-items: center; gap: 8px; align-self: end; padding-bottom: 12px; }
.field.chk input { width: 18px; height: 18px; min-height: 0; padding: 0; flex: none; accent-color: var(--cyan); }
.mfa-panel { max-width: 720px; margin-inline: auto; }
.mfa-setup { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 10px 0; }
.mfa-secret { padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; letter-spacing: .08em; overflow-wrap: anywhere; }
.mfa-codes pre { padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.ob-dialog { width: min(760px, calc(100vw - 32px)); }

/* Ownership mark (src/brand/owner.ts) — on every page, whatever the brand. Do not hide or remove (LICENSE). */
.owner-mark { margin: 8px auto 18px; padding: 0 16px; text-align: center; font-size: 11px; line-height: 1.5; color: var(--text-3); opacity: .85; }