/* ============================================================
   CYBERSECURITY AUDIT MANUAL — DESIGN SYSTEM
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  /* Brand */
  --bg: #0a1220;
  --bg-soft: #0e1830;
  --surface: #121f3a;
  --surface-2: #16284a;
  --surface-3: #1b3057;
  --border: #233a63;
  --border-soft: #1a2c4d;

  --text: #e8eef9;
  --text-dim: #a9bbdb;
  --text-faint: #6f86ad;

  --accent: #2dd4bf;
  --accent-2: #38bdf8;
  --accent-3: #818cf8;
  --gold: #f0b429;
  --saffron: #ff7849;

  --danger: #f3556a;
  --danger-bg: rgba(243, 85, 106, 0.12);
  --warning: #f0b429;
  --warning-bg: rgba(240, 180, 41, 0.12);
  --success: #34d399;
  --success-bg: rgba(52, 211, 153, 0.12);
  --info: #38bdf8;
  --info-bg: rgba(56, 189, 248, 0.12);

  --beginner: #34d399;
  --intermediate: #38bdf8;
  --advanced: #f3556a;
  --all-level: #818cf8;

  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 20px;
  --shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 25px 60px -15px rgba(0, 0, 0, 0.6);

  --sidebar-w: 290px;
  --topbar-h: 64px;
  --toc-w: 250px;

  --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="light"] {
  --bg: #f5f7fb;
  --bg-soft: #ffffff;
  --surface: #ffffff;
  --surface-2: #eef2f9;
  --surface-3: #e3e9f4;
  --border: #d9e1ef;
  --border-soft: #e7ecf5;
  --text: #101729;
  --text-dim: #475374;
  --text-faint: #7e8aa8;
  --shadow: 0 10px 30px -12px rgba(20, 30, 60, 0.18);
  --shadow-lg: 0 25px 60px -15px rgba(20, 30, 60, 0.25);
}

/* ---------- Reset ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: hidden; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  transition: background var(--transition), color var(--transition);
}
img, svg { max-width: 100%; display: block; }
a { color: var(--accent-2); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4, h5 { font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; color: var(--text); }
h1 { font-size: 2.2rem; }
h2 { font-size: 1.6rem; margin-top: 2.6rem; }
h3 { font-size: 1.25rem; margin-top: 1.8rem; }
h4 { font-size: 1.05rem; }
p { color: var(--text-dim); }
code { font-family: var(--font-mono); font-size: 0.88em; background: var(--surface-2); padding: 0.15em 0.4em; border-radius: 4px; color: var(--accent); }
ul, ol { color: var(--text-dim); }
hr { border: none; border-top: 1px solid var(--border-soft); margin: 2.5rem 0; }
::selection { background: var(--accent); color: #06131f; }

/* Background ambient grid */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, var(--border-soft) 1px, transparent 0);
  background-size: 28px 28px;
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}
[data-theme="light"] body::before { opacity: 0.6; }

/* ---------- Layout shell ---------- */
.layout { display: flex; min-height: 100vh; position: relative; z-index: 1; }

#topbar-placeholder { position: sticky; top: 0; z-index: 50; }
.topbar {
  height: var(--topbar-h);
  display: flex; align-items: center; gap: 1rem;
  padding: 0 1.25rem;
  background: color-mix(in srgb, var(--bg-soft) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-soft);
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
}
.topbar .brand { display: flex; align-items: center; gap: 0.6rem; font-weight: 800; font-size: 1.02rem; white-space: nowrap; }
.topbar .brand .badge-mark {
  width: 36px; height: 36px; border-radius: 9px;
  background: #ffffff;
  display: flex; align-items: center; justify-content: center;
  padding: 3px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
  flex-shrink: 0;
}
.topbar .brand .badge-mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
.topbar .crumbs { color: var(--text-faint); font-size: 0.85rem; display: none; }
.topbar .crumbs strong { color: var(--text-dim); }
.topbar-spacer { flex: 1; }
.icon-btn {
  width: 38px; height: 38px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-2); border: 1px solid var(--border-soft);
  color: var(--text-dim); cursor: pointer; transition: var(--transition);
}
.icon-btn:hover { color: var(--accent); border-color: var(--accent); transform: translateY(-1px); }
.menu-toggle { display: none; }

.search-box {
  display: flex; align-items: center; gap: 0.5rem;
  background: var(--surface-2); border: 1px solid var(--border-soft);
  border-radius: 10px; padding: 0.45rem 0.8rem; color: var(--text-faint);
  cursor: pointer; font-size: 0.85rem; min-width: 200px;
}
.search-box kbd { font-family: var(--font-mono); font-size: 0.72rem; background: var(--surface-3); padding: 0.1em 0.45em; border-radius: 4px; margin-left: auto; }

/* Sidebar */
#sidebar-placeholder { width: var(--sidebar-w); flex-shrink: 0; }
.sidebar {
  position: fixed; top: var(--topbar-h); left: 0; bottom: 0;
  width: var(--sidebar-w); overflow-y: auto;
  background: var(--bg-soft); border-right: 1px solid var(--border-soft);
  padding: 1.3rem 1rem 3rem;
}
.sidebar .group-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint); margin: 1.3rem 0.6rem 0.5rem; font-weight: 700; }
.sidebar .group-label:first-child { margin-top: 0.2rem; }
.nav-link {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.55rem 0.7rem; border-radius: 9px; color: var(--text-dim);
  font-size: 0.88rem; font-weight: 500; margin-bottom: 2px; position: relative;
  transition: var(--transition);
}
.nav-link i.fa { width: 18px; text-align: center; color: var(--text-faint); font-size: 0.92em; }
.nav-link:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.nav-link.active { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 16%, transparent), transparent); color: var(--text); font-weight: 700; }
.nav-link.active i.fa { color: var(--accent); }
.nav-link.active::before { content: ""; position: absolute; left: -1rem; top: 8%; bottom: 8%; width: 3px; background: var(--accent); border-radius: 3px; }
.nav-link .pill { margin-left: auto; font-size: 0.62rem; padding: 0.12em 0.5em; border-radius: 99px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.nav-link.sub { margin-left: 1.1rem; font-size: 0.81rem; padding: 0.42rem 0.6rem; }
.nav-link.sub i.fa { font-size: 0.82em; }
.nav-check { width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--border); flex-shrink: 0; }
.nav-check.done { background: var(--success); border-color: var(--success); position: relative; }
.nav-check.done::after { content: "✓"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 9px; color: #06131f; }

.sidebar-progress { margin: 0.4rem 0.6rem 1.1rem; padding: 0.85rem; background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius); }
.sidebar-progress .label { font-size: 0.72rem; color: var(--text-faint); display: flex; justify-content: space-between; margin-bottom: 0.5rem; }
.progress-track { height: 6px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 99px; transition: width 600ms ease; }

/* Main content */
main.content {
  flex: 1; padding: calc(var(--topbar-h) + 2.2rem) clamp(1.2rem, 4vw, 3.5rem) 5rem;
  margin-left: var(--sidebar-w);
  max-width: 920px;
}
.content-wrap { display: flex; gap: 2.5rem; align-items: flex-start; }
.content-wrap main.content { margin-left: 0; max-width: none; flex: 1; }

/* In-page TOC */
.page-toc { width: var(--toc-w); flex-shrink: 0; position: sticky; top: calc(var(--topbar-h) + 2.2rem); display: none; }
.page-toc .toc-title { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint); font-weight: 700; margin-bottom: 0.7rem; }
.page-toc a { display: block; font-size: 0.83rem; color: var(--text-faint); padding: 0.32rem 0 0.32rem 0.7rem; border-left: 2px solid var(--border-soft); transition: var(--transition); }
.page-toc a:hover, .page-toc a.active { color: var(--accent); border-color: var(--accent); text-decoration: none; }

@media (min-width: 1240px) { .page-toc { display: block; } main.content { margin-left: 0; } }

/* Footer */
.site-footer { border-top: 1px solid var(--border-soft); padding: 2rem clamp(1.2rem, 4vw, 3.5rem); margin-left: var(--sidebar-w); color: var(--text-faint); font-size: 0.82rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.6rem; }

/* ---------- Page header ---------- */
.page-kicker { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); margin-bottom: 0.8rem; }
.page-header { margin-bottom: 2.4rem; }
.page-header h1 { margin: 0 0 0.6rem; }
.page-header .lede { font-size: 1.08rem; color: var(--text-dim); max-width: 70ch; }
.meta-row { display: flex; gap: 0.7rem; flex-wrap: wrap; margin-top: 1.1rem; }
.meta-chip { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; padding: 0.32rem 0.7rem; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--border-soft); color: var(--text-dim); }

/* ---------- Badges / level pills ---------- */
.badge { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.72rem; font-weight: 700; padding: 0.22em 0.65em; border-radius: 99px; text-transform: uppercase; letter-spacing: 0.03em; }
.badge.beginner { background: var(--success-bg); color: var(--beginner); }
.badge.intermediate { background: var(--info-bg); color: var(--intermediate); }
.badge.advanced { background: var(--danger-bg); color: var(--advanced); }
.badge.all { background: rgba(129,140,248,0.14); color: var(--all-level); }
.badge.critical { background: var(--danger-bg); color: var(--danger); }
.badge.high { background: rgba(240,180,41,0.16); color: var(--warning); }
.badge.medium { background: var(--info-bg); color: var(--info); }
.badge.low { background: var(--success-bg); color: var(--success); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 0.88rem; padding: 0.65rem 1.2rem; border-radius: 10px; cursor: pointer; border: 1px solid transparent; transition: var(--transition); }
.btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #06131f; box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--accent) 50%, transparent); }
.btn-primary:hover { transform: translateY(-2px); text-decoration: none; }
.btn-ghost { background: var(--surface-2); color: var(--text); border-color: var(--border-soft); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.btn-sm { padding: 0.4rem 0.85rem; font-size: 0.78rem; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none !important; }

/* ---------- Cards ---------- */
.card { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 1.4rem; transition: var(--transition); }
.card:hover { border-color: var(--border); }
.grid { display: grid; gap: 1.1rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.module-card { display: block; padding: 1.5rem; border-radius: var(--radius-lg); position: relative; overflow: hidden; }
.module-card .icon-wrap { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; margin-bottom: 1rem; }
.module-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--accent); }
.module-card .part-no { position: absolute; top: 1.3rem; right: 1.4rem; font-size: 2.1rem; font-weight: 800; color: var(--border); }
.module-card h3 { margin: 0 0 0.4rem; font-size: 1.05rem; }
.module-card p { font-size: 0.86rem; margin: 0 0 0.9rem; }
.module-card .progress-track { margin-top: 0.8rem; }

/* ---------- Callouts ---------- */
.callout { display: flex; gap: 0.9rem; padding: 1.1rem 1.2rem; border-radius: var(--radius); border: 1px solid var(--border-soft); margin: 1.4rem 0; }
.callout i.fa { font-size: 1.05rem; margin-top: 0.15rem; }
.callout .ct-title { font-weight: 700; margin-bottom: 0.25rem; color: var(--text); }
.callout p:last-child { margin-bottom: 0; }
.callout.info { background: var(--info-bg); border-color: color-mix(in srgb, var(--info) 30%, transparent); } .callout.info i.fa { color: var(--info); }
.callout.tip { background: var(--success-bg); border-color: color-mix(in srgb, var(--success) 30%, transparent); } .callout.tip i.fa { color: var(--success); }
.callout.warning { background: var(--warning-bg); border-color: color-mix(in srgb, var(--warning) 30%, transparent); } .callout.warning i.fa { color: var(--warning); }
.callout.danger { background: var(--danger-bg); border-color: color-mix(in srgb, var(--danger) 30%, transparent); } .callout.danger i.fa { color: var(--danger); }
.callout.legal { background: rgba(129,140,248,0.1); border-color: color-mix(in srgb, var(--accent-3) 30%, transparent); } .callout.legal i.fa { color: var(--accent-3); }

/* ---------- Accordion ---------- */
.accordion { border: 1px solid var(--border-soft); border-radius: var(--radius); overflow: hidden; margin: 1.2rem 0; }
.acc-item + .acc-item { border-top: 1px solid var(--border-soft); }
.acc-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.2rem; cursor: pointer; background: var(--surface); font-weight: 700; font-size: 0.95rem; }
.acc-head:hover { background: var(--surface-2); }
.acc-head i.fa-chevron-down { transition: transform var(--transition); color: var(--text-faint); }
.acc-item.open .acc-head i.fa-chevron-down { transform: rotate(180deg); color: var(--accent); }
.acc-body { max-height: 0; overflow: hidden; transition: max-height 300ms ease; background: var(--bg-soft); }
.acc-item.open .acc-body { max-height: 3000px; }
.acc-body-inner { padding: 0 1.2rem 1.2rem; }

/* ---------- Tabs ---------- */
.tabs { margin: 1.2rem 0; }
.tab-nav { display: flex; gap: 0.4rem; border-bottom: 1px solid var(--border-soft); flex-wrap: wrap; }
.tab-btn { padding: 0.65rem 1rem; font-size: 0.85rem; font-weight: 700; color: var(--text-faint); cursor: pointer; border-bottom: 2px solid transparent; }
.tab-btn:hover { color: var(--text); }
.tab-btn.active { color: var(--accent); border-color: var(--accent); }
.tab-panel { display: none; padding-top: 1.3rem; }
.tab-panel.active { display: block; }

/* ---------- Stepper / timeline ---------- */
.stepper { position: relative; padding-left: 2.2rem; margin: 1.6rem 0; }
.stepper::before { content: ""; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 2px; background: var(--border); }
.step { position: relative; padding-bottom: 1.8rem; }
.step:last-child { padding-bottom: 0; }
.step::before { content: ""; position: absolute; left: -2.2rem; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--surface); border: 2px solid var(--accent); }
.step h4 { margin: 0 0 0.3rem; }
.step p { margin: 0; font-size: 0.9rem; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; margin: 1.4rem 0; border: 1px solid var(--border-soft); border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
th, td { padding: 0.7rem 0.9rem; text-align: left; border-bottom: 1px solid var(--border-soft); }
th { background: var(--surface-2); color: var(--text); font-weight: 700; white-space: nowrap; }
tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--surface-2); }

/* ---------- Code / terminal ---------- */
.code-block { position: relative; background: #060c18; border: 1px solid var(--border-soft); border-radius: var(--radius); margin: 1.3rem 0; overflow: hidden; }
[data-theme="light"] .code-block { background: #0d1526; }
.code-block .code-head { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1rem; background: rgba(255,255,255,0.03); border-bottom: 1px solid var(--border-soft); font-size: 0.75rem; color: var(--text-faint); font-family: var(--font-mono); }
.code-block .dot { width: 9px; height: 9px; border-radius: 50%; }
.code-block pre { margin: 0; padding: 1.1rem 1.3rem; overflow-x: auto; font-family: var(--font-mono); font-size: 0.84rem; color: #c9e6ff; line-height: 1.7; }
.code-block .copy-btn { margin-left: auto; cursor: pointer; color: var(--text-faint); }
.code-block .copy-btn:hover { color: var(--accent); }
.term-prompt { color: var(--success); } .term-comment { color: var(--text-faint); } .term-out { color: #c9e6ff; }

/* ---------- Terminal simulator (CYBERSAFE.renderTerminal) ---------- */
.term-sim { position: relative; background: #060c18; border: 1px solid var(--border-soft); border-radius: var(--radius); margin: 1.3rem 0; overflow: hidden; }
[data-theme="light"] .term-sim { background: #0d1526; }
.term-sim-body { padding: 1.1rem 1.3rem 0; font-family: var(--font-mono); font-size: 0.84rem; color: #c9e6ff; line-height: 1.7; max-height: 360px; overflow-y: auto; }
.term-line { white-space: pre-wrap; word-break: break-word; }
.term-out-block { white-space: pre-wrap; word-break: break-word; color: #c9e6ff; padding: 0.2rem 0 0.9rem; }
.term-out-error { color: var(--danger); }
.term-sim-instruction { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.8rem 1.3rem; background: rgba(255,255,255,0.03); border-top: 1px solid var(--border-soft); font-size: 0.83rem; color: var(--text-dim); font-family: var(--font-sans); }
.term-sim-instruction i { color: var(--info); margin-top: 0.15rem; }
.term-sim-inputrow { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 1.3rem 1rem; }
.term-sim-inputrow .term-prompt { font-family: var(--font-mono); font-weight: 700; }
.term-sim-inputrow input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: #e8eef9; font-family: var(--font-mono); font-size: 0.86rem; }
.term-sim-help { padding: 0 1.3rem 1rem; display: flex; gap: 0.5rem; flex-wrap: wrap; }
.term-sim-done { display: flex; align-items: center; gap: 0.6rem; padding: 1rem 1.3rem; color: var(--success); font-weight: 700; font-size: 0.9rem; border-top: 1px solid var(--border-soft); }

/* ---------- Skill radar chart (CYBERSAFE.renderRadarChart) ---------- */
.radar-chart-wrap { display: flex; justify-content: center; padding: 0.5rem 0; }
.radar-chart-svg { width: 100%; max-width: 340px; height: auto; overflow: visible; }
.radar-grid-ring { fill: none; stroke: var(--border-soft); stroke-width: 1; }
.radar-axis-line { stroke: var(--border-soft); stroke-width: 1; }
.radar-data-poly { fill: color-mix(in srgb, var(--accent) 22%, transparent); stroke: var(--accent); stroke-width: 2; transition: all 400ms ease; }
.radar-vertex { fill: var(--accent); }
.radar-label-text { fill: var(--text-dim); font-size: 11px; font-weight: 700; font-family: var(--font-sans); }
.radar-pct-text { fill: var(--accent); font-size: 11px; font-weight: 700; font-family: var(--font-mono); }

/* ---------- Flashcards (CYBERSAFE.renderFlashcards) ---------- */
.flashcard-progress { margin-bottom: 0.8rem; }
.flashcard { perspective: 1200px; max-width: 460px; margin: 0 auto; cursor: pointer; }
.flashcard-inner { position: relative; width: 100%; min-height: 180px; transition: transform 500ms cubic-bezier(.4,.2,.2,1); transform-style: preserve-3d; }
.flashcard-inner.is-flipped { transform: rotateY(180deg); }
.flashcard-face {
  position: absolute; inset: 0; backface-visibility: hidden;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 1.6rem 1.8rem; border-radius: var(--radius-lg); border: 1px solid var(--border-soft);
  font-size: 1.05rem; font-weight: 600; line-height: 1.5;
}
.flashcard-front { background: var(--surface); color: var(--text); }
.flashcard-back { background: linear-gradient(135deg, var(--surface-2), var(--surface-3)); color: var(--text); transform: rotateY(180deg); font-weight: 500; font-size: 0.95rem; }
.flashcard-controls { display: flex; justify-content: center; gap: 0.7rem; margin-top: 1.2rem; }
.flashcard-done { display: flex; flex-direction: column; align-items: center; gap: 0.8rem; text-align: center; padding: 2.2rem 1rem; }
.flashcard-done i { font-size: 2rem; color: var(--gold); }

/* ---------- Checklist items (shared — used by Part 10's checklists and
   by the finding drafter's self-check rubric) ---------- */
.checklist-item { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.5rem 0; border-bottom: 1px solid var(--border-soft); font-size: 0.88rem; }
.checklist-item:last-child { border-bottom: none; }
.checklist-item input { margin-top: 0.2rem; accent-color: var(--accent); flex-shrink: 0; }
.checklist-item span.ref { color: var(--text-faint); font-size: 0.78rem; margin-left: 0.4rem; }

/* ---------- Finding drafter (CYBERSAFE.renderFindingDrafter) ---------- */
.finding-drafter-fields { display: flex; flex-direction: column; gap: 0.3rem; margin-top: 1.2rem; }
.finding-field-label { font-size: 0.82rem; font-weight: 700; color: var(--text-dim); margin-top: 0.8rem; }
.finding-field-input { width: 100%; background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 10px; padding: 0.65rem 0.85rem; font-family: var(--font-sans); font-size: 0.88rem; color: var(--text); resize: vertical; outline: none; transition: var(--transition); }
.finding-field-input:focus { border-color: var(--accent); }
.finding-model-row { padding: 0.6rem 0; border-bottom: 1px solid var(--border-soft); font-size: 0.88rem; line-height: 1.6; }
.finding-model-row:last-child { border-bottom: none; }
.finding-model-row strong { color: var(--accent); }

/* ---------- Risk Register Calculator (CYBERSAFE.renderRiskRegister) ---------- */
.rr-add-form { display: flex; flex-direction: column; gap: .8rem; }
.rr-form-row { display: flex; flex-wrap: wrap; gap: .8rem; }
.rr-field { display: flex; flex-direction: column; gap: .35rem; }
.rr-label { font-size: .8rem; font-weight: 700; color: var(--text-dim); }
.rr-input { background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); color: var(--text); font-size: .87rem; padding: .45rem .75rem; outline: none; transition: var(--transition); font-family: var(--font-sans); }
.rr-input:focus { border-color: var(--accent); }
.rr-select { appearance: none; cursor: pointer; min-width: 160px; }
.rr-wp { width: 9rem; }
.rr-scale-row { display: flex; gap: .3rem; }
.rr-scale-btn { width: 2.2rem; height: 2.2rem; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text-dim); font-size: .88rem; font-weight: 700; cursor: pointer; transition: var(--transition); }
.rr-scale-btn:hover { border-color: var(--accent); color: var(--accent); }
.rr-scale-btn.active { background: var(--accent); border-color: var(--accent); color: #060c18; }
.rr-preview-row { display: flex; align-items: center; gap: .5rem; font-size: .85rem; color: var(--text-dim); }
.rr-score-display { font-family: var(--font-mono); font-weight: 700; color: var(--text); font-size: 1rem; }
.rr-actions-row { display: flex; align-items: center; gap: .8rem; margin-top: 1rem; flex-wrap: wrap; }
.rr-danger-btn { color: var(--danger) !important; }
.rr-table td, .rr-table th { vertical-align: middle; }
.rr-del-btn { background: none; border: none; cursor: pointer; color: var(--text-faint); padding: .2rem .4rem; transition: color .15s; }
.rr-del-btn:hover { color: var(--danger); }
/* Rating badge classes */
.rr-crit { background: rgba(243,85,106,.15); color: #f3556a; border: 1px solid rgba(243,85,106,.35); padding: .15rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 700; display: inline-block; }
.rr-high { background: rgba(240,180,41,.12); color: #f0b429; border: 1px solid rgba(240,180,41,.3); padding: .15rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 700; display: inline-block; }
.rr-med  { background: rgba(56,189,248,.12); color: #38bdf8; border: 1px solid rgba(56,189,248,.3); padding: .15rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 700; display: inline-block; }
.rr-low  { background: rgba(52,211,153,.1); color: #34d399; border: 1px solid rgba(52,211,153,.25); padding: .15rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 700; display: inline-block; }
/* Mini heat map */
.rr-matrix-wrap { margin-top: 1.2rem; }
.rr-matrix-title { margin-bottom: .4rem; }
.rr-matrix { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; max-width: 240px; }
.rr-cell { aspect-ratio: 1; border-radius: 4px; position: relative; display: flex; align-items: center; justify-content: center; }
.rr-cell.rr-crit { background: rgba(243,85,106,.35); }
.rr-cell.rr-high { background: rgba(240,180,41,.25); }
.rr-cell.rr-med  { background: rgba(56,189,248,.2); }
.rr-cell.rr-low  { background: rgba(52,211,153,.12); }
.rr-cell-count { font-size: .72rem; font-weight: 800; font-family: var(--font-mono); color: var(--text); }

/* ---------- Audit Programme Builder (CYBERSAFE.renderAuditProgramme) ---------- */
.ap-form { display: flex; flex-direction: column; gap: 1.2rem; }
.ap-row { display: flex; flex-wrap: wrap; gap: 1.6rem; }
.ap-field { display: flex; flex-direction: column; gap: .45rem; flex: 1 1 240px; }
.ap-label { font-size: .82rem; font-weight: 700; color: var(--text-dim); display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.ap-radio-group { display: flex; flex-direction: column; gap: .35rem; }
.ap-radio-row { flex-direction: row; flex-wrap: wrap; gap: .5rem 1.2rem; }
.ap-opt { display: flex; align-items: center; gap: .55rem; font-size: .87rem; color: var(--text); cursor: pointer; }
.ap-opt input { accent-color: var(--accent); width: 1rem; height: 1rem; flex-shrink: 0; }
.ap-days-input { background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); color: var(--text); font-family: var(--font-mono); font-size: 1.05rem; padding: .45rem .8rem; width: 6rem; outline: none; transition: var(--transition); }
.ap-days-input:focus { border-color: var(--accent); }
.ap-domain-toggle-row { display: inline-flex; gap: .4rem; flex-wrap: wrap; margin-left: .5rem; }
.ap-domain-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .3rem; margin-top: .4rem; }
.ap-domain-opt { display: flex; align-items: flex-start; gap: .55rem; font-size: .85rem; color: var(--text); cursor: pointer; padding: .4rem .5rem; border-radius: var(--radius-sm); transition: background .15s; }
.ap-domain-opt:hover { background: var(--surface-2); }
.ap-domain-opt input { accent-color: var(--accent); width: 1rem; height: 1rem; flex-shrink: 0; margin-top: .1rem; }
.ap-domain-opt[data-type="OT"] { border-left: 2px solid var(--saffron); }
.ap-domain-opt[data-type="IT"] { border-left: 2px solid var(--accent); }
.ap-summary-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: .75rem 1rem; font-size: .88rem; }
.ap-sep { color: var(--text-faint); }
.ap-warn { color: var(--warning); font-size: .82rem; display: flex; align-items: center; gap: .4rem; }

/* ---------- Annotation / My Notes system ---------- */
.notes-section { margin-top: 3rem; padding-top: 1.8rem; border-top: 1px solid var(--border-soft); }
.notes-heading { font-size: 1.1rem; margin-bottom: .9rem; color: var(--text); display: flex; align-items: center; gap: .5rem; }
.notes-heading i { color: var(--gold); }
.notes-panel { display: flex; flex-direction: column; gap: .5rem; }
.notes-textarea { width: 100%; min-height: 140px; background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: var(--radius); color: var(--text); font-family: var(--font-sans); font-size: .9rem; line-height: 1.6; padding: 1rem 1.1rem; resize: vertical; outline: none; transition: border-color .2s; }
.notes-textarea:focus { border-color: var(--gold); }
.notes-meta { font-size: .76rem; color: var(--text-faint); }
/* Sidebar note dot */
.note-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); display: inline-block; flex-shrink: 0; margin-left: auto; }
/* Home page notes card */
.home-notes-list { display: flex; flex-direction: column; gap: .5rem; }
.home-note-item { display: block; padding: .7rem 1rem; background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); text-decoration: none; transition: border-color .15s; }
.home-note-item:hover { border-color: var(--accent); }
.home-note-title { font-size: .85rem; font-weight: 700; color: var(--accent); margin-bottom: .2rem; }
.home-note-preview { font-size: .8rem; color: var(--text-dim); line-height: 1.45; }

/* ---------- Quiz ---------- */
.quiz-card { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: 1.6rem; margin: 1.2rem 0; }
.quiz-q { font-weight: 700; margin-bottom: 0.9rem; }
.quiz-opt { display: flex; align-items: center; gap: 0.7rem; padding: 0.7rem 1rem; border: 1px solid var(--border-soft); border-radius: 10px; margin-bottom: 0.6rem; cursor: pointer; transition: var(--transition); font-size: 0.9rem; }
.quiz-opt:hover { border-color: var(--accent); }
.quiz-opt.correct { background: var(--success-bg); border-color: var(--success); }
.quiz-opt.incorrect { background: var(--danger-bg); border-color: var(--danger); }
.quiz-opt input { accent-color: var(--accent); }
.quiz-explain { display: none; margin-top: 0.8rem; padding: 0.9rem 1rem; border-radius: 10px; background: var(--surface-2); font-size: 0.86rem; }
.quiz-explain.show { display: block; }
.quiz-progress-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.2rem; }
.quiz-score { text-align: center; padding: 2.5rem 1rem; }
.quiz-score .big-score { font-size: 3rem; font-weight: 800; background: linear-gradient(135deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Decision tree / scenario sim ---------- */
.scenario-card { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: 1.7rem; margin: 1.2rem 0; }
.scenario-prompt { font-size: 1rem; font-weight: 600; margin-bottom: 1.1rem; }
.scenario-choices { display: grid; gap: 0.7rem; }
.scenario-choice { text-align: left; background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 10px; padding: 0.85rem 1.1rem; cursor: pointer; font-size: 0.88rem; color: var(--text); transition: var(--transition); }
.scenario-choice:hover { border-color: var(--accent); transform: translateX(3px); }
.scenario-feedback { margin-top: 1.1rem; padding: 1rem 1.2rem; border-radius: 10px; font-size: 0.88rem; }
.scenario-feedback.good { background: var(--success-bg); border: 1px solid color-mix(in srgb, var(--success) 30%, transparent); }
.scenario-feedback.bad { background: var(--danger-bg); border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent); }
.scenario-feedback.warn { background: var(--warning-bg); border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent); }

/* ---------- Official seal icon ---------- */
.seal-card { background: #ffffff; border-radius: 9px; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; padding: 4px; box-shadow: var(--shadow); flex-shrink: 0; }
.seal-card img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ---------- Hero CTA console — frames the two action buttons as a single
   "audit engine" status console rather than two floating buttons, with a
   live status readout and a slow scanning light sweep. ---------- */
.cta-console {
  display: inline-flex; align-items: center; gap: 1rem;
  padding: 0.5rem 1.1rem 0.5rem 1rem; border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 85%, transparent);
  border: 1px solid var(--border-soft);
  backdrop-filter: blur(6px);
  position: relative; overflow: hidden; isolation: isolate;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent), var(--shadow);
}
.cta-console::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 20%, transparent), transparent);
  transform: translateX(-140%); z-index: -1; pointer-events: none;
  animation: ctaScan 7s ease-in-out infinite;
}
@keyframes ctaScan {
  0%, 55% { transform: translateX(-140%); }
  85%, 100% { transform: translateX(280%); }
}
.cta-status {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-mono); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.06em; color: var(--text-faint); white-space: nowrap;
  padding-left: 0.2rem;
}
.status-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--success); flex-shrink: 0;
  animation: statusDotPulse 2s ease-out infinite;
}
@keyframes statusDotPulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 55%, transparent); }
  70% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--success) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.cta-divider { width: 1px; height: 22px; background: var(--border); flex-shrink: 0; }
@media (max-width: 640px) {
  .cta-console { flex-wrap: wrap; justify-content: center; border-radius: var(--radius-lg); padding: 0.9rem; }
  .cta-status { width: 100%; justify-content: center; padding-left: 0; }
  .cta-divider { display: none; }
}

/* ---------- Hero (home page) ---------- */
.hero {
  position: relative; padding: 3.2rem 2rem 2.6rem; overflow: hidden;
  container-type: inline-size; container-name: hero;
  /* Bleed the panel itself outward on both sides equally — the negative
     margins pull the background card left and right while the matching
     padding keeps all the text at its original position, so the panel
     reads as a card with a consistent gap on both edges rather than the
     text sitting flush against one side. */
  margin: 0 -2rem;
}
.hero-bg { position: absolute; inset: -20% -10%; background: radial-gradient(ellipse at 20% 20%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 55%), radial-gradient(ellipse at 80% 0%, color-mix(in srgb, var(--accent-3) 18%, transparent), transparent 55%); z-index: -1; animation: drift 14s ease-in-out infinite alternate; }
@keyframes drift { from { transform: translate(0,0) scale(1); } to { transform: translate(-2%, 2%) scale(1.05); } }
.hero h1 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 1rem; }
.hero .lede { font-size: 1.15rem; max-width: none; }
.hero-stats { display: flex; gap: 2.2rem; margin-top: 2rem; flex-wrap: wrap; justify-content: space-between; }
.hero-stat .num { font-size: 1.8rem; font-weight: 800; color: var(--accent); }
.hero-stat .lbl { font-size: 0.78rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.04em; }

/* ---------- Hero audit radar (wide screens only — reserved gutter, never
   reflows or overlaps the hero text/buttons at any width) ---------- */
.audit-radar { display: none; pointer-events: none; }
@container hero (min-width: 760px) {
  /* Padding must live on a descendant of the container, not the container
     itself — @container rules never match the element that establishes
     the container, so this targets .hero-headline instead of .hero.
     Only the headline (kicker + h1) sits beside the radar vertically — the
     radar's fixed height ends well above the lede/buttons/stats, so those
     stay full-width and reclaim the space below it. */
  .hero-headline { padding-right: 260px; }
  /* The reserved gutter narrows the headline's available width, which made
     "CyberSafe Defender Studio" wrap onto an extra line beyond the
     deliberate <br> before "for Public Cyber Defenders". Scale the heading down only
     here (where the gutter is active) so it keeps to its intended 2 lines. */
  .hero-headline h1 { font-size: clamp(1.6rem, 2.6vw, 2.3rem); }
  .audit-radar {
    display: block; position: absolute; top: 4px; right: 28px;
    width: 240px; height: 240px;
    z-index: 1;
  }
}
@container hero (min-width: 980px) {
  .hero-headline { padding-right: 320px; }
  .hero-headline h1 { font-size: clamp(1.8rem, 2.4vw, 2.6rem); }
  .audit-radar {
    width: 280px; height: 280px; right: 32px;
  }
}
/* Fallback for browsers without container query support: behave like the
   280px/wide-viewport version so the visual still appears somewhere rather
   than never. */
@supports not (container-type: inline-size) {
  @media (min-width: 1300px) {
    .hero-headline { padding-right: 320px; }
    .hero-headline h1 { font-size: clamp(1.8rem, 2.4vw, 2.6rem); }
    .audit-radar { display: block; position: absolute; top: 4px; right: 32px; width: 280px; height: 280px; z-index: 1; }
  }
}
.radar-ring {
  position: absolute; inset: 0; margin: auto; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
}
.radar-ring.ring1 { width: 100%; height: 100%; }
.radar-ring.ring2 { width: 68%; height: 68%; border-style: dashed; opacity: 0.7; }
.radar-ring.ring3 { width: 36%; height: 36%; opacity: 0.5; }
.radar-sweep {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, color-mix(in srgb, var(--accent) 60%, transparent), transparent 26%, transparent 100%);
  animation: radarSpin 4.5s linear infinite;
}
@keyframes radarSpin { to { transform: rotate(360deg); } }
.radar-core {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 62px; height: 62px; border-radius: 50%;
  background: var(--surface-2); border: 2px solid var(--accent);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent); font-size: 1.5rem; z-index: 3;
  animation: radarCorePulse 2.6s ease-in-out infinite;
}
@keyframes radarCorePulse {
  0%, 100% { box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 35%, transparent); }
  50% { box-shadow: 0 0 32px color-mix(in srgb, var(--accent) 60%, transparent); }
}
.radar-ping {
  position: absolute; top: 50%; left: 50%; width: 62px; height: 62px;
  margin: -31px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  animation: radarPing 3s ease-out infinite;
}
.radar-ping.p2 { animation-delay: 1.5s; }
@keyframes radarPing {
  0% { width: 62px; height: 62px; margin: -31px; opacity: 0.8; }
  100% { width: 280px; height: 280px; margin: -140px; opacity: 0; }
}
.radar-node {
  position: absolute; top: 50%; left: 50%; width: 36px; height: 36px;
  margin: -18px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-dim); font-size: 0.9rem; z-index: 2;
  transform: rotate(var(--a)) translateX(120px) rotate(calc(-1 * var(--a)));
  animation: radarNodeBlip 3.6s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
@keyframes radarNodeBlip {
  0%, 80%, 100% { color: var(--text-dim); border-color: var(--border); box-shadow: none; }
  90% { color: var(--accent); border-color: var(--accent); box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 55%, transparent); }
}
.radar-label {
  position: absolute; bottom: -1.6rem; left: 50%; transform: translateX(-50%);
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em;
  color: var(--text-faint); white-space: nowrap;
}

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(28px) scale(0.985); transition: opacity 700ms ease, transform 700ms ease; }
.reveal.in { opacity: 1; transform: translateY(0) scale(1); }

/* ---------- Mermaid diagram wrapper ---------- */
.diagram-wrap { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: 1.3rem; margin: 1.4rem 0; overflow-x: auto; text-align: center; }
.diagram-caption { font-size: 0.82rem; color: var(--text-faint); margin-top: 0.7rem; }

/* ============================================================
   PREMIUM MOTION — restrained, content-aware animation layer.
   Entrance animations on scroll; ambient motion reserved for
   branding/diagrams only. See @media prefers-reduced-motion below.
   ============================================================ */

/* Page-topic icon: gentle float + glow ring, content-relevant since every page's
   page-kicker already carries a unique Font Awesome icon for that topic. */
.page-kicker { gap: 0.65rem; }
.page-kicker i.fa-solid {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.1em; height: 2.1em; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 30%, transparent), transparent 72%);
  animation: kickerFloat 3s ease-in-out infinite, kickerPop 0.6s cubic-bezier(.34,1.56,.64,1) both;
}
.page-kicker i.fa-solid::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%; z-index: -1;
  background: conic-gradient(from 0deg, var(--accent), var(--accent-2), var(--accent-3), var(--accent));
  opacity: 0.55; filter: blur(2.5px);
  animation: spinSlow 5s linear infinite;
}
@keyframes kickerFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes kickerPop { from { transform: scale(0.4) translateY(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes spinSlow { to { transform: rotate(360deg); } }

/* Topbar emblem: subtle "official" pulse ring */
.topbar .brand .badge-mark { animation: badgePulse 2.8s ease-in-out infinite; }
@keyframes badgePulse {
  0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent); }
  50% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--accent) 11%, transparent); }
}

/* Card / icon-wrap idle float (module cards, domain cards, feature cards) */
.icon-wrap { animation: kickerFloat 3.4s ease-in-out infinite; }

/* Per-page ambient icon flourish: 3 floating instances of *that page's own*
   Font Awesome topic icon, injected by main.js into every .page-header. */
.page-header { position: relative; overflow: hidden; }
.header-particles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; }
.header-particles .p {
  position: absolute; bottom: -20%; font-size: 1.6rem;
  color: color-mix(in srgb, var(--accent) 42%, transparent); opacity: 0;
  animation: headerParticleRise 8s ease-in infinite;
}
.header-particles .p1 { left: 4%;  animation-delay: 0s;   font-size: 1.5rem; }
.header-particles .p2 { left: 46%; animation-delay: 2.6s; font-size: 2rem; }
.header-particles .p3 { left: 86%; animation-delay: 5.2s; font-size: 1.3rem; }
@keyframes headerParticleRise {
  0% { opacity: 0; transform: translateY(0) rotate(0deg) scale(0.8); }
  15% { opacity: 0.6; }
  80% { opacity: 0.3; }
  100% { opacity: 0; transform: translateY(-190px) rotate(20deg) scale(1.1); }
}

/* Stepper markers: a one-time "ping" once the step scrolls into view */
.step::before { transition: box-shadow 200ms; }
.step.in::before { animation: stepPing 1.5s ease-out 1; }
@keyframes stepPing {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
  70% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* Warning/danger callouts: a brief emphasis pulse on their icon once revealed */
.callout.warning.in > i.fa-solid, .callout.danger.in > i.fa-solid {
  animation: alertPulse 0.7s ease-in-out 2;
}
@keyframes alertPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }

/* Code block traffic-light dots: soft idle pulse, staggered */
.code-block .dot { animation: dotPulse 2.6s ease-in-out infinite; }
.code-block .dot:nth-child(2) { animation-delay: 0.3s; }
.code-block .dot:nth-child(3) { animation-delay: 0.6s; }
@keyframes dotPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

/* Tab panel + quiz/scenario feedback: short entrance on appearance (plays once per show) */
.tab-panel.active { animation: fadeSlideIn 0.32s ease both; }
.quiz-explain.show, .scenario-feedback { animation: fadeSlideIn 0.35s ease both; }
.quiz-score .big-score { animation: scorePop 0.55s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes fadeSlideIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@keyframes scorePop { from { opacity: 0; transform: scale(0.5); } to { opacity: 1; transform: scale(1); } }

/* Primary buttons: animated gradient sweep on hover only (not a constant loop) */
.btn-primary { background-image: linear-gradient(135deg, var(--accent), var(--accent-2), var(--accent-3), var(--accent-2)); background-size: 250% 250%; background-position: 0% 50%; transition: background-position 500ms ease, transform var(--transition); }
.btn-primary:hover { background-position: 100% 50%; }

/* Progress bars: soft shimmer sweep across the filled portion */
.progress-fill { position: relative; overflow: hidden; }
.progress-fill::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  animation: shimmer 2.2s linear infinite;
}
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* Hero particle flourish (home page only — .hero-particles is empty/no-op elsewhere) */
.hero-particles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; }
.hero-particles .p { position: absolute; bottom: -10%; font-size: 1.1rem; color: color-mix(in srgb, var(--accent) 45%, transparent); opacity: 0; animation: particleRise 13s linear infinite; }
.hero-particles .p1 { left: 8%;  animation-delay: 0s;  font-size: 1rem; }
.hero-particles .p2 { left: 22%; animation-delay: 2.2s; font-size: 1.3rem; }
.hero-particles .p3 { left: 45%; animation-delay: 4.4s; font-size: 0.9rem; }
.hero-particles .p4 { left: 63%; animation-delay: 6.6s; font-size: 1.15rem; }
.hero-particles .p5 { left: 80%; animation-delay: 8.8s; font-size: 1rem; }
.hero-particles .p6 { left: 92%; animation-delay: 11s;  font-size: 1.05rem; }
@keyframes particleRise {
  0% { opacity: 0; transform: translateY(0) rotate(0deg); }
  10% { opacity: 0.5; }
  85% { opacity: 0.25; }
  100% { opacity: 0; transform: translateY(-340px) rotate(25deg); }
}

/* Mermaid diagrams: flowing edges + softly glowing nodes — purely additive properties
   (stroke-dasharray/animation/filter) so Mermaid's own inline colours are untouched. */
.diagram-wrap svg .edgePaths path,
.diagram-wrap svg path[marker-end] {
  stroke-dasharray: 6 4;
  animation: dashFlow 1.6s linear infinite;
}
.diagram-wrap svg .node rect,
.diagram-wrap svg .node polygon,
.diagram-wrap svg .node circle {
  animation: nodeGlow 3s ease-in-out infinite;
}
@keyframes dashFlow { to { stroke-dashoffset: -20; } }
@keyframes nodeGlow {
  0%, 100% { filter: drop-shadow(0 0 0 transparent); }
  50% { filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent) 50%, transparent)); }
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ---------- Back to top ---------- */
#back-to-top { position: fixed; bottom: 1.6rem; left: 1.6rem; width: 44px; height: 44px; border-radius: 50%; background: var(--accent); color: #06131f; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow); cursor: pointer; opacity: 0; pointer-events: none; transition: var(--transition); z-index: 80; }
#back-to-top.show { opacity: 1; pointer-events: auto; }

/* ---------- Search overlay ---------- */
#search-overlay { position: fixed; inset: 0; background: rgba(4,8,16,0.75); backdrop-filter: blur(4px); z-index: 200; display: none; align-items: flex-start; justify-content: center; padding-top: 12vh; }
#search-overlay.show { display: flex; }
.search-modal { width: min(560px, 90vw); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; }
.search-modal input { width: 100%; padding: 1.1rem 1.3rem; font-size: 1rem; background: transparent; border: none; border-bottom: 1px solid var(--border-soft); color: var(--text); outline: none; font-family: var(--font-sans); }
.search-results { max-height: 50vh; overflow-y: auto; }
.search-result { display: flex; align-items: center; gap: 0.8rem; padding: 0.9rem 1.3rem; cursor: pointer; }
.search-result:hover, .search-result.active { background: var(--surface-2); }
.search-result .sr-title { font-weight: 700; font-size: 0.9rem; }
.search-result .sr-sub { font-size: 0.78rem; color: var(--text-faint); }

/* ---------- Mobile ---------- */
@media (max-width: 980px) {
  .menu-toggle { display: inline-flex; }
  #sidebar-placeholder { display: none; }
  .sidebar { display: none; transform: translateX(-100%); transition: transform var(--transition); }
  .sidebar.open { display: block; transform: translateX(0); width: 82vw; z-index: 90; box-shadow: var(--shadow-lg); }
  main.content, .site-footer { margin-left: 0; }
  .topbar .crumbs { display: none !important; }
}
@media (min-width: 981px) { .topbar .crumbs { display: block; } }

/* ---------- Utility ---------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.gap-1 { gap: 0.5rem; } .gap-2 { gap: 1rem; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.small { font-size: 0.85rem; }
.faint { color: var(--text-faint); }
.section-anchor { scroll-margin-top: calc(var(--topbar-h) + 1.2rem); }

/* ============================================================
   NETRAKSHA — built-in manual assistant widget. Rule-based, no
   backend/API key (see netraksha.js for why). Styled to sit
   alongside the rest of the design system: same tokens, same
   restrained-motion philosophy as the PREMIUM MOTION section.
   ============================================================ */
#netraksha-root { position: fixed; z-index: 110; }

#nk-launcher {
  position: fixed; bottom: 1.6rem; right: 1.6rem; width: 58px; height: 58px;
  border-radius: 50%; border: none; cursor: pointer;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 10px 26px -8px color-mix(in srgb, var(--accent) 55%, transparent), var(--shadow);
  display: flex; align-items: center; justify-content: center;
  z-index: 110; transition: transform var(--transition);
}
#nk-launcher:hover { transform: translateY(-2px) scale(1.04); }
.nk-launcher-icon { color: #06131f; font-size: 1.35rem; display: flex; }
.nk-launcher-icon i { animation: nkBlink 5s ease-in-out infinite; }
@keyframes nkBlink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.12); } }
.nk-launcher-dot {
  position: absolute; top: -2px; right: -2px; width: 14px; height: 14px;
  border-radius: 50%; background: var(--danger); border: 2px solid var(--bg);
  animation: statusDotPulse 2.2s ease-out infinite;
}

#nk-panel {
  position: fixed; bottom: 5.6rem; right: 1.6rem; width: 360px; max-width: calc(100vw - 2rem);
  height: 480px; max-height: calc(100vh - 8rem);
  background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); display: flex; flex-direction: column; overflow: hidden;
  z-index: 109; transform-origin: bottom right;
  opacity: 0; transform: translateY(12px) scale(0.96); pointer-events: none;
  transition: opacity 220ms ease, transform 220ms cubic-bezier(.34,1.56,.64,1);
}
#nk-panel.show { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

.nk-header { display: flex; align-items: center; gap: 0.7rem; padding: 0.9rem 1rem; border-bottom: 1px solid var(--border-soft); background: var(--surface-2); flex-shrink: 0; }
.nk-avatar { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #06131f; font-size: 0.95rem; }
.nk-header-text { flex: 1; min-width: 0; }
.nk-title { font-weight: 800; font-size: 0.95rem; }
.nk-subtitle { font-size: 0.72rem; color: var(--text-faint); display: flex; align-items: center; gap: 0.4rem; }
#nk-close { width: 30px; height: 30px; border-radius: 8px; border: none; background: transparent; color: var(--text-faint); cursor: pointer; flex-shrink: 0; transition: var(--transition); }
#nk-close:hover { background: var(--surface-3); color: var(--text); }

.nk-messages { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.8rem; }
.nk-msg { display: flex; gap: 0.55rem; max-width: 100%; animation: fadeSlideIn 0.3s ease both; }
.nk-msg-user { justify-content: flex-end; }
.nk-bot-avatar { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--surface-3); color: var(--accent); font-size: 0.72rem; }
.nk-bubble { background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 12px; padding: 0.6rem 0.8rem; font-size: 0.85rem; line-height: 1.55; max-width: 78%; }
.nk-msg-user .nk-bubble { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #06131f; border-color: transparent; font-weight: 600; }
.nk-msg-bot .nk-bubble strong { color: var(--text); }
.nk-thinking .nk-bubble { display: flex; gap: 0.3rem; align-items: center; padding: 0.75rem 0.9rem; }
.nk-thinking .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-faint); animation: dotPulse 1.1s ease-in-out infinite; }
.nk-thinking .dot:nth-child(2) { animation-delay: 0.15s; }
.nk-thinking .dot:nth-child(3) { animation-delay: 0.3s; }

.nk-link-row { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.55rem; }
.nk-link { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.8rem; font-weight: 700; color: var(--accent); text-decoration: none; padding: 0.4rem 0.1rem; }
.nk-link:hover { text-decoration: underline; }
.nk-link i { font-size: 0.7rem; }

.nk-quick-replies { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-left: 32px; }
.nk-chip { font-size: 0.76rem; font-weight: 600; color: var(--text-dim); background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 999px; padding: 0.4rem 0.75rem; cursor: pointer; transition: var(--transition); }
.nk-chip:hover { border-color: var(--accent); color: var(--accent); }

.nk-input-row { display: flex; gap: 0.5rem; padding: 0.8rem; border-top: 1px solid var(--border-soft); flex-shrink: 0; background: var(--surface); }
#nk-input { flex: 1; min-width: 0; background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 999px; padding: 0.55rem 0.95rem; font-size: 0.85rem; color: var(--text); outline: none; font-family: var(--font-sans); }
#nk-input:focus { border-color: var(--accent); }
#nk-send { width: 38px; height: 38px; border-radius: 50%; border: none; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #06131f; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: var(--transition); }
#nk-send:hover { transform: scale(1.06); }

@media (max-width: 560px) {
  #nk-panel { right: 1rem; left: 1rem; width: auto; bottom: 5.2rem; height: calc(100vh - 7.5rem); }
  #nk-launcher { right: 1rem; bottom: 1rem; }
}

/* ============================================================
   ROUND 2 — Interview Question Bank
   ============================================================ */
.iq-controls { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-bottom: 1.4rem; align-items: center; }
.iq-select { background: var(--surface); border: 1px solid var(--border-soft); color: var(--text); border-radius: var(--radius); padding: 0.45rem 0.75rem; font-size: 0.85rem; font-family: var(--font-sans); cursor: pointer; }
.iq-select:focus { outline: none; border-color: var(--accent); }
.iq-search { flex: 1; min-width: 180px; background: var(--surface); border: 1px solid var(--border-soft); color: var(--text); border-radius: var(--radius); padding: 0.45rem 0.75rem; font-size: 0.85rem; font-family: var(--font-sans); }
.iq-search::placeholder { color: var(--text-faint); }
.iq-search:focus { outline: none; border-color: var(--accent); }
.iq-count { font-size: 0.8rem; color: var(--text-faint); margin-left: auto; white-space: nowrap; }
.iq-grid { display: flex; flex-direction: column; gap: 0.5rem; }
.iq-card { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 0.9rem 1rem; display: flex; align-items: flex-start; gap: 0.9rem; transition: border-color 0.15s; }
.iq-card.asked { background: color-mix(in srgb, var(--success) 8%, var(--surface)); border-color: var(--success); }
.iq-card:hover { border-color: var(--accent); }
.iq-cb { width: 18px; height: 18px; accent-color: var(--success); cursor: pointer; flex-shrink: 0; margin-top: 2px; }
.iq-meta { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.35rem; }
.iq-domain-tag { font-size: 0.7rem; font-weight: 600; background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); border-radius: 99px; padding: 0.15rem 0.6rem; }
.iq-role-tag { font-size: 0.7rem; color: var(--text-faint); border: 1px solid var(--border-soft); border-radius: 99px; padding: 0.15rem 0.6rem; }
.iq-q { font-size: 0.9rem; color: var(--text); line-height: 1.55; }
.iq-empty { text-align: center; padding: 3rem 1rem; color: var(--text-faint); font-size: 0.9rem; }
.iq-actions { display: flex; gap: 0.6rem; margin-bottom: 1.2rem; flex-wrap: wrap; }
.iq-btn-sm { background: var(--surface); border: 1px solid var(--border-soft); color: var(--text-dim); border-radius: var(--radius); padding: 0.4rem 0.8rem; font-size: 0.8rem; cursor: pointer; }
.iq-btn-sm:hover { background: var(--surface-2); }
@media print {
  .iq-controls, .iq-actions { display: none; }
  .iq-card { border: 1px solid #ccc; break-inside: avoid; page-break-inside: avoid; }
  .iq-domain-tag, .iq-role-tag { border: 1px solid #ccc; }
}

/* ============================================================
   ROUND 2 — Cyber Maturity Scorecard
   ============================================================ */
.ms-layout { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 900px) { .ms-layout { grid-template-columns: 1fr 320px; } }
.ms-dims { display: flex; flex-direction: column; gap: 0.75rem; }
.ms-dim { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 0.85rem 1rem; }
.ms-dim-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.55rem; }
.ms-dim-label { font-size: 0.88rem; font-weight: 600; color: var(--text); }
.ms-dim-score { font-size: 0.82rem; font-weight: 700; color: var(--accent); }
.ms-levels { display: flex; gap: 4px; }
.ms-lvl { flex: 1; padding: 0.35rem 0.25rem; text-align: center; border-radius: 6px; border: 1.5px solid var(--border-soft); cursor: pointer; font-size: 0.72rem; font-weight: 600; color: var(--text-faint); transition: all 0.12s; }
.ms-lvl:hover { border-color: var(--accent); color: var(--text); }
.ms-lvl.active-1 { background: #7f1d1d; border-color: #ef4444; color: #fca5a5; }
.ms-lvl.active-2 { background: #78350f; border-color: #f59e0b; color: #fcd34d; }
.ms-lvl.active-3 { background: #1e3a5f; border-color: #60a5fa; color: #bfdbfe; }
.ms-lvl.active-4 { background: #14532d; border-color: #34d399; color: #6ee7b7; }
.ms-lvl.active-5 { background: #312e81; border-color: #a78bfa; color: #ddd6fe; }
.ms-sidebar { display: flex; flex-direction: column; gap: 1rem; }
.ms-radar-wrap { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: 1rem; }
.ms-radar-title { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); margin-bottom: 0.75rem; }
.ms-score-panel { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: 1rem 1.2rem; }
.ms-score-big { font-size: 2.8rem; font-weight: 800; color: var(--accent); line-height: 1; }
.ms-score-sub { font-size: 0.78rem; color: var(--text-faint); margin-top: 0.25rem; }
.ms-score-label { font-size: 0.9rem; font-weight: 700; color: var(--text); margin-top: 0.4rem; }
.ms-summary-wrap { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 1rem; }
.ms-summary-text { font-size: 0.82rem; color: var(--text-dim); line-height: 1.6; white-space: pre-wrap; }
.ms-copy-btn { margin-top: 0.6rem; background: var(--accent); color: #fff; border: none; border-radius: var(--radius); padding: 0.4rem 0.9rem; font-size: 0.8rem; cursor: pointer; width: 100%; }
.ms-copy-btn:hover { opacity: 0.88; }
.ms-reset-btn { background: var(--surface); border: 1px solid var(--border-soft); color: var(--text-faint); border-radius: var(--radius); padding: 0.35rem 0.8rem; font-size: 0.78rem; cursor: pointer; }
.ms-reset-btn:hover { background: var(--surface-2); }

/* ============================================================
   ROUND 2 — Regulatory Compliance Matrix
   ============================================================ */
.cm-filter-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.2rem; align-items: center; }
.cm-chip { padding: 0.3rem 0.75rem; border-radius: 99px; border: 1.5px solid var(--border-soft); font-size: 0.8rem; cursor: pointer; color: var(--text-dim); background: var(--surface); transition: all 0.12s; }
.cm-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.cm-wrap { overflow-x: auto; border: 1px solid var(--border-soft); border-radius: var(--radius-lg); }
.cm-table { width: 100%; border-collapse: collapse; min-width: 600px; }
.cm-table th { background: var(--surface-2); padding: 0.75rem 0.9rem; font-size: 0.78rem; font-weight: 700; text-align: left; color: var(--text-dim); border-bottom: 1px solid var(--border-soft); white-space: nowrap; }
.cm-table th.law-col { text-align: center; min-width: 110px; }
.cm-table td { padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--border-soft); vertical-align: top; }
.cm-table tr:last-child td { border-bottom: none; }
.cm-area-cell { font-size: 0.85rem; font-weight: 600; color: var(--text); }
.cm-area-sub { font-size: 0.75rem; color: var(--text-faint); margin-top: 0.15rem; }
.cm-law-cell { text-align: center; }
.cm-clause { display: inline-block; font-size: 0.72rem; font-weight: 700; padding: 0.2rem 0.45rem; border-radius: 6px; cursor: pointer; transition: opacity 0.12s; margin: 2px; }
.cm-clause:hover { opacity: 0.75; }
.cm-clause.it-act { background: color-mix(in srgb, #3b82f6 18%, transparent); color: #60a5fa; border: 1px solid #3b82f6; }
.cm-clause.incident-service { background: color-mix(in srgb, #f59e0b 18%, transparent); color: #fbbf24; border: 1px solid #f59e0b; }
.cm-clause.dpdp { background: color-mix(in srgb, #ec4899 18%, transparent); color: #f472b6; border: 1px solid #ec4899; }
.cm-clause.iso { background: color-mix(in srgb, #34d399 18%, transparent); color: #34d399; border: 1px solid #34d399; }
.cm-clause.nist { background: color-mix(in srgb, #a78bfa 18%, transparent); color: #a78bfa; border: 1px solid #a78bfa; }
.cm-nil { color: var(--text-faint); font-size: 0.75rem; }
.cm-detail-box { display: none; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.2rem 1.4rem; margin: 1.2rem 0; }
.cm-detail-box.open { display: block; }
.cm-detail-title { font-weight: 700; font-size: 0.95rem; color: var(--text); margin-bottom: 0.6rem; }
.cm-detail-body { font-size: 0.85rem; color: var(--text-dim); line-height: 1.65; }
.cm-detail-close { float: right; background: none; border: none; color: var(--text-faint); cursor: pointer; font-size: 1rem; margin-top: -4px; }

/* ============================================================
   ROUND 2 — Case Study Walkthroughs
   ============================================================ */
.cs-tabs { display: flex; gap: 0.5rem; margin-bottom: 1.4rem; flex-wrap: wrap; }
.cs-tab { padding: 0.5rem 1.1rem; border-radius: var(--radius); border: 1.5px solid var(--border-soft); background: var(--surface); color: var(--text-dim); font-size: 0.87rem; font-weight: 600; cursor: pointer; transition: all 0.12s; }
.cs-tab:hover { border-color: var(--accent); color: var(--text); }
.cs-tab.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.cs-panel { display: none; }
.cs-panel.active { display: block; }
.cs-entity { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: 1.2rem 1.4rem; margin-bottom: 1.2rem; }
.cs-entity-title { font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: 0.5rem; }
.cs-entity-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.6rem; }
.cs-entity-item { font-size: 0.82rem; color: var(--text-dim); }
.cs-entity-item strong { color: var(--text); display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.1rem; color: var(--text-faint); }
.cs-steps { display: flex; flex-direction: column; gap: 0; }
.cs-step-row { border: 1px solid var(--border-soft); border-radius: var(--radius); margin-bottom: 0.7rem; overflow: hidden; }
.cs-step-header { display: flex; align-items: center; gap: 0.8rem; padding: 0.85rem 1rem; cursor: pointer; user-select: none; background: var(--surface); transition: background 0.12s; }
.cs-step-header:hover { background: var(--surface-2); }
.cs-step-num { width: 28px; height: 28px; border-radius: 50%; background: var(--surface-3); color: var(--text-faint); font-size: 0.78rem; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cs-step-row.open .cs-step-num { background: var(--accent); color: #fff; }
.cs-step-title { font-size: 0.9rem; font-weight: 600; color: var(--text); flex: 1; }
.cs-step-chevron { font-size: 0.75rem; color: var(--text-faint); transition: transform 0.2s; }
.cs-step-row.open .cs-step-chevron { transform: rotate(180deg); }
.cs-step-body { display: none; padding: 1rem 1.2rem 1.1rem; border-top: 1px solid var(--border-soft); background: color-mix(in srgb, var(--surface) 60%, var(--bg)); }
.cs-step-row.open .cs-step-body { display: block; }
.cs-finding { background: var(--surface); border-left: 3px solid var(--border-soft); border-radius: 0 var(--radius) var(--radius) 0; padding: 0.75rem 1rem; margin: 0.6rem 0; }
.cs-finding.critical { border-color: #ef4444; }
.cs-finding.high { border-color: #f59e0b; }
.cs-finding.medium { border-color: #60a5fa; }
.cs-finding-title { font-size: 0.85rem; font-weight: 700; color: var(--text); margin-bottom: 0.35rem; }
.cs-finding-row { font-size: 0.8rem; color: var(--text-dim); margin-bottom: 0.2rem; }
.cs-finding-row strong { color: var(--text-faint); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; margin-right: 0.3rem; }
.cs-report-para { background: #060c18; border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 1rem 1.2rem; font-family: var(--font-mono); font-size: 0.82rem; color: #c9e6ff; line-height: 1.7; white-space: pre-wrap; margin: 0.6rem 0; }
.cs-next-btn { margin-top: 0.8rem; background: var(--accent); color: #fff; border: none; border-radius: var(--radius); padding: 0.5rem 1.2rem; font-size: 0.85rem; font-weight: 600; cursor: pointer; }
.cs-next-btn:hover { opacity: 0.88; }
.cs-progress-row { display: flex; gap: 0.4rem; margin-bottom: 1rem; }
.cs-progress-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--surface-3); transition: background 0.15s; }
.cs-progress-dot.done { background: var(--accent); }

/* ============================================================
   ROUND 2 — Final Assessment & Certificate
   ============================================================ */
.fa-intro { text-align: center; padding: 2rem 1rem 1.5rem; }
.fa-intro-icon { font-size: 3rem; color: var(--accent); margin-bottom: 0.8rem; }
.fa-name-row { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; margin-top: 1rem; }
.fa-name-input { background: var(--surface); border: 1px solid var(--border-soft); color: var(--text); border-radius: var(--radius); padding: 0.6rem 1rem; font-size: 0.95rem; font-family: var(--font-sans); width: min(360px, 90%); text-align: center; }
.fa-name-input:focus { outline: none; border-color: var(--accent); }
.fa-start-btn { background: var(--accent); color: #fff; border: none; border-radius: var(--radius); padding: 0.65rem 2rem; font-size: 0.95rem; font-weight: 700; cursor: pointer; margin-top: 0.5rem; }
.fa-start-btn:hover { opacity: 0.88; }
.fa-round-header { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1.2rem; padding-bottom: 0.8rem; border-bottom: 1px solid var(--border-soft); }
.fa-round-badge { background: var(--accent); color: #fff; font-size: 0.75rem; font-weight: 800; padding: 0.2rem 0.7rem; border-radius: 99px; }
.fa-round-title { font-size: 1rem; font-weight: 700; color: var(--text); }
.fa-q-block { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 1.1rem 1.2rem; margin-bottom: 0.8rem; }
.fa-q-text { font-size: 0.92rem; color: var(--text); font-weight: 600; margin-bottom: 0.75rem; line-height: 1.55; }
.fa-options { display: flex; flex-direction: column; gap: 0.45rem; }
.fa-opt { display: flex; align-items: flex-start; gap: 0.7rem; background: var(--surface-2); border: 1.5px solid var(--border-soft); border-radius: var(--radius); padding: 0.55rem 0.85rem; cursor: pointer; font-size: 0.87rem; color: var(--text-dim); transition: all 0.12s; }
.fa-opt:hover:not(.locked) { border-color: var(--accent); color: var(--text); }
.fa-opt.correct { background: color-mix(in srgb, var(--success) 15%, var(--surface)); border-color: var(--success); color: var(--text); }
.fa-opt.wrong { background: color-mix(in srgb, #ef4444 12%, var(--surface)); border-color: #ef4444; color: var(--text); }
.fa-opt.locked { cursor: default; }
.fa-explain { font-size: 0.82rem; color: var(--text-dim); margin-top: 0.6rem; padding: 0.6rem 0.8rem; background: color-mix(in srgb, var(--accent) 8%, transparent); border-radius: var(--radius); border-left: 3px solid var(--accent); }
.fa-nav-row { display: flex; justify-content: space-between; align-items: center; margin-top: 1.2rem; }
.fa-next-btn { background: var(--accent); color: #fff; border: none; border-radius: var(--radius); padding: 0.55rem 1.5rem; font-size: 0.88rem; font-weight: 700; cursor: pointer; }
.fa-next-btn:hover { opacity: 0.88; }
.fa-next-btn:disabled { opacity: 0.4; cursor: default; }
.fa-score-bar { height: 6px; border-radius: 99px; background: var(--surface-3); margin-bottom: 0.4rem; overflow: hidden; }
.fa-score-fill { height: 100%; border-radius: 99px; background: var(--accent); transition: width 0.3s; }
.fa-result { text-align: center; padding: 2rem 1rem 1rem; }
.fa-result-big { font-size: 3.5rem; font-weight: 900; color: var(--accent); line-height: 1; }
.fa-result-sub { font-size: 1rem; color: var(--text-dim); margin-top: 0.4rem; }
.fa-result-verdict { font-size: 1.15rem; font-weight: 700; margin-top: 0.8rem; color: var(--text); }
.fa-retry-btn { background: var(--surface); border: 1px solid var(--border-soft); color: var(--text-dim); border-radius: var(--radius); padding: 0.5rem 1.2rem; font-size: 0.88rem; cursor: pointer; margin-top: 1rem; }
.fa-cert-btn { background: var(--accent); color: #fff; border: none; border-radius: var(--radius); padding: 0.6rem 1.5rem; font-size: 0.9rem; font-weight: 700; cursor: pointer; margin-top: 1rem; margin-left: 0.5rem; }
/* Certificate print overlay */
.fa-cert-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.75); z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.fa-cert-sheet { background: #fff; color: #1a2035; width: min(700px, 96vw); padding: 3rem 3.5rem; border-radius: 8px; text-align: center; position: relative; font-family: 'Inter', sans-serif; }
.fa-cert-close { position: absolute; top: 1rem; right: 1.2rem; background: none; border: none; font-size: 1.3rem; cursor: pointer; color: #777; }
.fa-cert-header { font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: #64748b; margin-bottom: 0.5rem; }
.fa-cert-title { font-size: 1.8rem; font-weight: 900; color: #1e293b; margin: 0.3rem 0 0.6rem; }
.fa-cert-body { font-size: 1rem; color: #475569; margin: 0.5rem 0; }
.fa-cert-name { font-size: 2rem; font-weight: 800; color: #0f172a; border-bottom: 2px solid #e2e8f0; padding-bottom: 0.3rem; margin: 0.6rem auto; display: inline-block; min-width: 220px; }
.fa-cert-score { font-size: 1.5rem; font-weight: 800; color: #0d9488; margin: 0.6rem 0; }
.fa-cert-footer { font-size: 0.78rem; color: #94a3b8; margin-top: 1.5rem; }
.fa-cert-border { border: 6px double #cbd5e1; border-radius: 4px; padding: 2rem; }
.fa-cert-print-btn { margin-top: 1.2rem; background: #1e293b; color: #fff; border: none; border-radius: 6px; padding: 0.55rem 1.5rem; font-size: 0.9rem; cursor: pointer; }
@media print {
  .fa-cert-overlay { position: static; background: none; padding: 0; display: block; }
  .fa-cert-sheet { box-shadow: none; width: 100%; padding: 1cm 1.5cm; }
  .fa-cert-close, .fa-cert-print-btn { display: none; }
}

/* ============================================================
   ROUND 3 CSS — Audit Programme Builder, Risk Register,
   Fieldwork Print Cards, Observation Drafter, Penalty Calc
   ============================================================ */

/* ---- Observation Drafter (.od-*) ---- */
.od-wrap { display: flex; flex-direction: column; gap: 1.4rem; }
.od-step-nav { display: flex; gap: 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border-soft); }
.od-step-btn { flex: 1; background: var(--surface-2); border: none; border-right: 1px solid var(--border-soft); color: var(--text-dim); font-size: .78rem; font-weight: 700; padding: .55rem .4rem; cursor: pointer; transition: var(--transition); text-align: center; line-height: 1.3; }
.od-step-btn:last-child { border-right: none; }
.od-step-btn.active { background: var(--accent); color: #060c18; }
.od-step-btn.done { background: color-mix(in srgb, var(--accent) 18%, var(--surface-2)); color: var(--accent); }
.od-panel { display: flex; flex-direction: column; gap: 1rem; }
.od-field { display: flex; flex-direction: column; gap: .4rem; }
.od-label { font-size: .82rem; font-weight: 700; color: var(--text-dim); }
.od-sublabel { font-size: .78rem; color: var(--text-faint); margin-top: -.2rem; }
.od-select { background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); color: var(--text); font-size: .87rem; padding: .45rem .75rem; outline: none; transition: var(--transition); font-family: var(--font-sans); appearance: none; cursor: pointer; width: 100%; }
.od-select:focus { border-color: var(--accent); }
.od-textarea { background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); color: var(--text); font-size: .87rem; padding: .6rem .8rem; outline: none; resize: vertical; min-height: 90px; font-family: var(--font-sans); transition: var(--transition); width: 100%; box-sizing: border-box; }
.od-textarea:focus { border-color: var(--accent); }
.od-template-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .3rem; }
.od-chip { background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 999px; color: var(--text-dim); font-size: .76rem; padding: .22rem .65rem; cursor: pointer; transition: var(--transition); }
.od-chip:hover { border-color: var(--accent); color: var(--accent); }
.od-sev-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.od-sev-btn { padding: .35rem .9rem; border-radius: 999px; border: 2px solid var(--border-soft); background: var(--surface-2); color: var(--text-dim); font-size: .82rem; font-weight: 700; cursor: pointer; transition: var(--transition); }
.od-sev-btn[data-sev="Critical"].active { background: rgba(243,85,106,.15); border-color: #f3556a; color: #f3556a; }
.od-sev-btn[data-sev="High"].active { background: rgba(240,180,41,.12); border-color: #f0b429; color: #f0b429; }
.od-sev-btn[data-sev="Medium"].active { background: rgba(56,189,248,.12); border-color: #38bdf8; color: #38bdf8; }
.od-sev-btn[data-sev="Low"].active { background: rgba(52,211,153,.1); border-color: #34d399; color: #34d399; }
.od-output { background: var(--surface-2); border: 1px solid var(--accent); border-radius: var(--radius); padding: 1.4rem 1.6rem; display: flex; flex-direction: column; gap: 1.1rem; }
.od-out-section { display: flex; flex-direction: column; gap: .35rem; }
.od-out-label { font-size: .72rem; font-weight: 800; color: var(--accent); text-transform: uppercase; letter-spacing: .08em; }
.od-out-text { font-size: .9rem; color: var(--text); line-height: 1.65; }
.od-para-box { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 1rem 1.2rem; font-size: .88rem; line-height: 1.75; color: var(--text); white-space: pre-wrap; }
.od-nav-btns { display: flex; gap: .8rem; flex-wrap: wrap; }

/* ---- Penalty & Liability Calculator (.pc-*) ---- */
.pc-wrap { display: flex; flex-direction: column; gap: 1.4rem; }
.pc-law-tabs { display: flex; flex-wrap: wrap; gap: .4rem; }
.pc-law-btn { background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 999px; color: var(--text-dim); font-size: .82rem; font-weight: 700; padding: .4rem 1rem; cursor: pointer; transition: var(--transition); }
.pc-law-btn.active { background: var(--accent); border-color: var(--accent); color: #060c18; }
.pc-violation-field { display: flex; flex-direction: column; gap: .4rem; }
.pc-label { font-size: .82rem; font-weight: 700; color: var(--text-dim); }
.pc-select { background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); color: var(--text); font-size: .87rem; padding: .5rem .8rem; outline: none; transition: var(--transition); font-family: var(--font-sans); appearance: none; cursor: pointer; width: 100%; max-width: 520px; }
.pc-select:focus { border-color: var(--accent); }
.pc-result { background: var(--surface-2); border-radius: var(--radius); border: 1px solid var(--border-soft); overflow: hidden; }
.pc-result-header { background: var(--surface); border-bottom: 1px solid var(--border-soft); padding: 1rem 1.4rem; display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.pc-law-badge { font-size: .75rem; font-weight: 800; padding: .25rem .7rem; border-radius: 999px; }
.pc-law-badge.it-act  { background: rgba(99,102,241,.15); color: #818cf8; border: 1px solid rgba(99,102,241,.3); }
.pc-law-badge.incident-service { background: rgba(251,146,60,.12); color: #fb923c; border: 1px solid rgba(251,146,60,.3); }
.pc-law-badge.dpdp    { background: rgba(52,211,153,.1); color: #34d399; border: 1px solid rgba(52,211,153,.25); }
.pc-law-badge.iso     { background: rgba(240,180,41,.12); color: #f0b429; border: 1px solid rgba(240,180,41,.3); }
.pc-law-badge.nist    { background: rgba(56,189,248,.12); color: #38bdf8; border: 1px solid rgba(56,189,248,.3); }
.pc-section-ref { font-family: var(--font-mono); font-size: .88rem; font-weight: 700; color: var(--text); }
.pc-result-body { padding: 1.2rem 1.4rem; display: flex; flex-direction: column; gap: 1rem; }
.pc-row { display: flex; flex-direction: column; gap: .25rem; }
.pc-row-label { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--text-faint); }
.pc-row-val { font-size: .9rem; color: var(--text); line-height: 1.6; }
.pc-penalty-val { font-size: 1rem; font-weight: 700; color: var(--danger); }
.pc-placeholder { color: var(--text-dim); font-size: .9rem; padding: 1.4rem; text-align: center; }

/* === CYBERSAFE Audit Intelligence Roadmap Suites === */
.rm-context{display:flex;gap:.55rem;align-items:center;flex-wrap:wrap;padding:.68rem .9rem;margin-bottom:1rem;border:1px solid color-mix(in srgb,var(--accent) 35%,var(--border-soft));background:color-mix(in srgb,var(--accent) 9%,var(--surface));border-radius:var(--radius-sm);font-size:.82rem}.rm-context i{color:var(--accent)}.rm-context span{color:var(--text-dim)}.rm-card{padding:1.25rem 0;border-bottom:1px solid var(--border-soft)}.rm-card:last-child{border-bottom:0}.rm-card h2{font-size:1.05rem;margin:0 0 .65rem;display:flex;gap:.55rem;align-items:center}.rm-card h2 i{color:var(--accent)}.rm-sub,.rm-disclaimer{font-size:.84rem;line-height:1.55;color:var(--text-dim);margin:.2rem 0 .9rem}.rm-disclaimer{font-size:.76rem;color:var(--text-faint)}.rm-form{display:grid;gap:.75rem}.rm-grid3{grid-template-columns:repeat(3,minmax(0,1fr))}.rm-form label{display:grid;gap:.33rem;font-size:.77rem;font-weight:700;color:var(--text-dim)}.rm-form input,.rm-form select,.rm-inline input,.rm-inline select,#cmd-search,#fq-input,#diary{width:100%;background:var(--surface-2);border:1px solid var(--border-soft);border-radius:8px;color:var(--text);padding:.58rem .7rem;font:inherit}.rm-form input:focus,.rm-form select:focus,.rm-inline input:focus,.rm-inline select:focus,#cmd-search:focus,#fq-input:focus,#diary:focus{outline:0;border-color:var(--accent)}.rm-action{display:flex;align-items:center;gap:.65rem;flex-wrap:wrap;margin-top:.8rem}.rm-btn{border:1px solid var(--accent);background:var(--accent);color:#06121b;border-radius:8px;padding:.55rem .78rem;font-weight:800;font-size:.8rem;cursor:pointer}.rm-btn.secondary{background:var(--surface-2);color:var(--text);border-color:var(--border-soft)}.rm-btn.small{font-size:.72rem;padding:.38rem .58rem}.rm-note{font-size:.8rem;color:var(--text-dim)}.rm-paper{white-space:pre-wrap;background:#fff;color:#17212e;border:1px solid #d9e1ea;border-radius:9px;padding:1.25rem;line-height:1.65;font:13px/1.65 Georgia,serif;max-height:560px;overflow:auto}.rm-paper table{width:100%;border-collapse:collapse;font:12px Arial}.rm-paper th,.rm-paper td{border:1px solid #bdc7d2;padding:.45rem;text-align:left;vertical-align:top}.rm-paper h3,.rm-paper h4{margin:.8rem 0 .35rem}.rm-finding{border-top:1px solid #d7dee7;margin-top:.8rem;padding-top:.7rem}.rm-checklist{display:grid;gap:.4rem}.rm-checklist label{display:flex;gap:.55rem;align-items:flex-start;padding:.45rem .55rem;background:var(--surface-2);border:1px solid var(--border-soft);border-radius:7px;font-size:.82rem;line-height:1.4}.rm-checklist input{margin-top:.13rem;accent-color:var(--accent)}.rm-inline{display:grid;grid-template-columns:1fr 2fr 1fr auto;gap:.55rem}.rm-table-wrap{overflow:auto;margin-top:.8rem}.rm-table{width:100%;border-collapse:collapse;font-size:.8rem}.rm-table th,.rm-table td{padding:.55rem;border-bottom:1px solid var(--border-soft);text-align:left}.rm-table th{color:var(--text-dim);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em}.rm-pill{font-size:.7rem;border:1px solid var(--border-soft);border-radius:999px;padding:.18rem .45rem;color:var(--text-dim)}.rm-icon{background:transparent;border:0;color:var(--text-dim);cursor:pointer}.rm-empty{font-size:.82rem;color:var(--text-faint);padding:.8rem 0}.rm-timeline{display:grid;gap:.45rem}.rm-timeline div,.rm-deck div,.rm-index div{display:flex;gap:.7rem;align-items:flex-start;background:var(--surface-2);padding:.6rem .7rem;border-radius:7px;border:1px solid var(--border-soft);font-size:.82rem}.rm-timeline strong,.rm-deck span{color:var(--accent);min-width:50px}.rm-timeline span,.rm-index span{color:var(--text-dim);line-height:1.45}.rm-quality{margin-top:.8rem;display:grid;gap:.4rem}.rm-quality>div{padding:.55rem .7rem;border-radius:7px;font-size:.82rem}.rm-quality .pass{background:rgba(52,211,153,.1);color:#4ade80}.rm-quality .fail{background:rgba(248,113,113,.1);color:#fb7185}.rm-deck{display:grid;gap:.45rem}.rm-score{font-size:1rem;font-weight:800;color:var(--accent)}.rm-warning{display:flex;gap:.6rem;line-height:1.45;font-size:.82rem;padding:.65rem .75rem;border-left:3px solid #fbbf24;background:rgba(251,191,36,.08);margin-bottom:.8rem}.rm-command-list{display:grid;gap:.65rem;margin-top:.8rem}.rm-command{border:1px solid var(--border-soft);background:var(--surface-2);border-radius:8px;padding:.75rem}.rm-command header{display:flex;justify-content:space-between;gap:.6rem;align-items:center}.rm-command code{display:block;margin:.55rem 0;padding:.55rem;background:var(--surface);border-radius:6px;font-size:.75rem;word-break:break-word;color:var(--accent-2)}.rm-command p{font-size:.78rem;color:var(--text-dim);line-height:1.45;margin:.35rem 0}.rm-redflags{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem}.rm-redflags>div{padding:.75rem;border-radius:8px;border:1px solid var(--border-soft);background:var(--surface-2);display:grid;gap:.3rem}.rm-redflags strong{font-size:.83rem}.rm-redflags span{color:var(--text-dim);font-size:.78rem;line-height:1.45}.rm-status{display:flex;gap:.55rem;align-items:center;padding:.75rem;border:1px solid var(--border-soft);background:var(--surface-2);border-radius:8px;font-size:.82rem}.rm-status i{color:var(--accent)}.rm-status span{color:var(--text-dim)}.rm-upload{display:inline-flex;align-items:center;gap:.4rem;border:1px solid var(--border-soft);padding:.52rem .7rem;border-radius:8px;cursor:pointer;font-size:.8rem}.rm-upload input{display:none}.rm-device-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}.rm-device-grid article{padding:.8rem;border:1px solid var(--border-soft);background:var(--surface-2);border-radius:8px}.rm-device-icon{font-size:1.25rem;color:var(--accent);margin-bottom:.45rem}.rm-device-grid strong,.rm-device-grid em{display:block}.rm-device-grid em{font-size:.72rem;color:var(--text-faint);margin:.2rem 0 .5rem}.rm-device-grid p{font-size:.76rem;line-height:1.45;color:var(--text-dim)}.rm-sketch{min-height:150px;display:flex;gap:.55rem;flex-wrap:wrap;padding:.75rem;margin-top:.7rem;border:1px dashed var(--border-soft);background:var(--surface-2);border-radius:8px;align-content:flex-start}.rm-node{position:relative;display:grid;gap:.18rem;min-width:145px;max-width:200px;padding:.65rem;border:1px solid color-mix(in srgb,var(--accent) 40%,var(--border-soft));background:var(--surface);border-radius:8px;font-size:.78rem}.rm-node>i{color:var(--accent)}.rm-node span{font-size:.68rem;color:var(--text-faint)}.rm-node button{position:absolute;right:.35rem;top:.25rem;background:transparent;border:0;color:var(--text-faint);cursor:pointer}.rm-scenario{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 12%,var(--surface)),var(--surface-2));border:1px solid var(--border-soft);padding:1rem;border-radius:8px;margin-bottom:.7rem}.rm-scenario strong{color:var(--accent)}.rm-scenario p{font-size:.84rem;line-height:1.55;color:var(--text-dim);margin:.4rem 0 0}.rm-heatmap{display:grid;gap:.55rem}.rm-heatmap div{display:grid;grid-template-columns:150px 1fr 38px;gap:.6rem;align-items:center;font-size:.8rem}.rm-heatmap span{height:9px;background:var(--surface-2);border-radius:999px;overflow:hidden}.rm-heatmap i{display:block;height:100%;background:var(--accent);border-radius:999px}.rm-heatmap em{font-style:normal;color:var(--text-dim)}.rm-diary-list{margin-top:.7rem;display:grid;gap:.5rem}.rm-diary-list article{border-left:2px solid var(--accent);padding:.45rem .7rem;background:var(--surface-2);font-size:.8rem}.rm-diary-list time{font-size:.7rem;color:var(--text-faint)}.rm-diary-list p{margin:.35rem 0 0;line-height:1.45}.rm-flash-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem;margin-top:.7rem}.rm-flash{position:relative;min-height:90px;padding:.75rem;text-align:left;border:1px solid var(--border-soft);background:var(--surface-2);color:var(--text);border-radius:8px;cursor:pointer}.rm-flash strong{display:block}.rm-flash span{display:none;font-size:.8rem;color:var(--text-dim);line-height:1.45;margin-top:.4rem}.rm-flash.show strong{color:var(--accent)}.rm-flash.show span{display:block}.rm-flash i{position:absolute;bottom:.5rem;right:.55rem;color:var(--text-faint)}.rm-precedents{display:grid;gap:.65rem}.rm-precedents article{padding:.8rem;border:1px solid var(--border-soft);background:var(--surface-2);border-radius:8px}.rm-precedents p{font-size:.8rem;line-height:1.55;color:var(--text-dim)}
@media(max-width:850px){.rm-grid3,.rm-device-grid{grid-template-columns:1fr 1fr}.rm-inline{grid-template-columns:1fr 1fr}.rm-inline .rm-btn{grid-column:span 2}.rm-redflags{grid-template-columns:1fr}}@media(max-width:560px){.rm-grid3,.rm-device-grid,.rm-flash-list{grid-template-columns:1fr}.rm-inline{grid-template-columns:1fr}.rm-inline .rm-btn{grid-column:auto}.rm-heatmap div{grid-template-columns:100px 1fr 34px}.rm-context{align-items:flex-start}}
.cybersafe-engagement-strip{display:flex;gap:.55rem;align-items:center;flex-wrap:wrap;margin-top:1rem;padding:.6rem .75rem;background:color-mix(in srgb,var(--accent) 10%,var(--surface));border:1px solid color-mix(in srgb,var(--accent) 35%,var(--border-soft));border-radius:8px;font-size:.8rem;color:var(--text-dim)}.cybersafe-engagement-strip i{color:var(--accent)}.cybersafe-engagement-strip a{margin-left:auto;color:var(--accent);font-weight:700;text-decoration:none;font-size:.76rem}@media(max-width:550px){.cybersafe-engagement-strip a{margin-left:0}}

/* ============================================================
   AUDIT INTELLIGENCE WORKSPACE — REFINED APPLICATION SHELL
   The original roadmap screens rendered without the global shell and
   left the primary content constrained to the edge of the viewport.
   These rules make every content-wrap a true flex item and give the six
   workflow suites a compact, work-first interface.
   ============================================================ */
.content-wrap {
  flex: 1 1 auto;
  min-width: 0;
  width: calc(100% - var(--sidebar-w));
}
.content-wrap > main.content { min-width: 0; }
html { scroll-behavior: smooth; }

.roadmap-page .content-wrap.suite-layout-wrap {
  display: block;
  margin-left: var(--sidebar-w) !important;
  width: calc(100% - var(--sidebar-w)) !important;
  padding: calc(var(--topbar-h) + 1.35rem) clamp(1.15rem, 3vw, 2.6rem) 4rem !important;
}
.roadmap-page main.suite-content {
  margin-left: 0 !important;
  padding: 0 !important;
  max-width: 1360px !important;
  width: 100%;
}
.roadmap-page .site-footer { margin-left: var(--sidebar-w); }

.suite-page-header {
  position: relative;
  overflow: hidden;
  margin-bottom: 1.2rem;
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  padding: 1.45rem 1.55rem 1.05rem;
  background:
    radial-gradient(circle at 95% 0%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 30%),
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 95%, #07101e), var(--surface));
  box-shadow: var(--shadow);
}
.suite-page-header::after {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  right: -95px;
  bottom: -150px;
  border: 1px solid color-mix(in srgb, var(--accent) 44%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 0 28px color-mix(in srgb, var(--accent) 8%, transparent), 0 0 0 56px color-mix(in srgb, var(--accent) 5%, transparent);
  opacity: .8;
  pointer-events: none;
}
.suite-eyebrow { display:flex; align-items:center; gap:.7rem; margin-bottom:.85rem; color:var(--accent); font-size:.74rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.suite-eyebrow > span:last-child { display:flex; gap:.35rem; align-items:center; }
.suite-round { padding:.25rem .55rem; color:#031822; background:var(--accent); border-radius:999px; font-size:.68rem; letter-spacing:.075em; }
.suite-head-grid { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr) minmax(250px, 355px); gap:1.2rem; align-items:end; }
.suite-head-grid h1 { font-size:clamp(1.75rem,3.2vw,2.45rem); margin:0; max-width:760px; }
.suite-head-grid p { margin:.5rem 0 0; max-width:760px; color:var(--text-dim); font-size:1rem; line-height:1.65; }
.suite-safeguard { display:grid; gap:.35rem; padding:.8rem .9rem; border-radius:12px; background:color-mix(in srgb, var(--bg-soft) 65%, transparent); border:1px solid color-mix(in srgb, var(--accent) 28%, var(--border-soft)); color:var(--text-dim); font-size:.78rem; line-height:1.45; }
.suite-safeguard-title { display:flex; align-items:center; gap:.42rem; color:var(--text); font-weight:800; }
.suite-safeguard-title i { color:var(--accent); }
.suite-action-strip { position:relative; z-index:1; display:flex; gap:.45rem; flex-wrap:wrap; padding-top:1.15rem; margin-top:1rem; border-top:1px solid color-mix(in srgb,var(--border-soft) 85%, transparent); }
.suite-action { display:inline-flex; align-items:center; gap:.45rem; padding:.45rem .62rem; border-radius:9px; font-size:.76rem; font-weight:700; color:var(--text-dim); border:1px solid var(--border-soft); background:color-mix(in srgb,var(--surface-2) 76%, transparent); text-decoration:none; transition:var(--transition); }
.suite-action i:first-child { color:var(--accent); }
.suite-action i:last-child { color:var(--text-faint); margin-left:.18rem; font-size:.68rem; }
.suite-action:hover { color:var(--text); border-color:color-mix(in srgb,var(--accent) 60%,var(--border-soft)); text-decoration:none; transform:translateY(-1px); }

.roadmap-tool-root { min-width:0; }
.ai-suite-workspace { display:grid; grid-template-columns:195px minmax(0,1fr); align-items:start; gap:1rem; }
.ai-suite-rail { position:sticky; top:calc(var(--topbar-h) + 1rem); border:1px solid var(--border-soft); border-radius:15px; padding:.85rem .65rem; background:color-mix(in srgb,var(--bg-soft) 91%, transparent); box-shadow:var(--shadow); }
.ai-rail-label { display:block; margin:.1rem .35rem .55rem; color:var(--text-faint); font-size:.66rem; letter-spacing:.1em; font-weight:800; }
.ai-suite-rail nav { display:grid; gap:.18rem; }
.ai-suite-rail a { display:grid; grid-template-columns:21px 16px minmax(0,1fr); align-items:center; gap:.45rem; padding:.48rem .4rem; color:var(--text-dim); border-radius:9px; font-size:.76rem; font-weight:700; line-height:1.25; text-decoration:none; transition:var(--transition); }
.ai-suite-rail a:hover { background:color-mix(in srgb,var(--accent) 12%, transparent); color:var(--text); text-decoration:none; }
.ai-suite-rail a i { color:var(--accent); font-size:.78rem; text-align:center; }
.ai-rail-no { color:var(--text-faint); font-size:.62rem; font-family:var(--font-mono); }
.ai-rail-note { display:flex; align-items:flex-start; gap:.42rem; margin-top:.7rem; padding:.65rem .46rem .15rem; border-top:1px solid var(--border-soft); color:var(--text-faint); font-size:.68rem; line-height:1.45; }
.ai-rail-note i { color:var(--accent); margin-top:.13rem; }
.ai-suite-canvas { min-width:0; }
.ai-suite-cards { display:grid; gap:.9rem; }

.rm-context { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:.75rem; margin:0 0 .9rem; padding:.83rem .95rem; border:1px solid color-mix(in srgb,var(--accent) 42%,var(--border-soft)); background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 11%,var(--surface)),var(--surface)); border-radius:14px; box-shadow:var(--shadow); }
.rm-context.rm-context-empty { border-color:color-mix(in srgb,var(--gold) 48%,var(--border-soft)); background:linear-gradient(90deg,color-mix(in srgb,var(--gold) 8%,var(--surface)),var(--surface)); }
.rm-context-icon { width:34px; height:34px; display:grid; place-items:center; border-radius:10px; background:color-mix(in srgb,var(--accent) 18%,transparent); color:var(--accent); }
.rm-context-empty .rm-context-icon { background:color-mix(in srgb,var(--gold) 14%,transparent); color:var(--gold); }
.rm-context > div:nth-child(2) { display:grid; gap:.1rem; min-width:0; }
.rm-context-label { color:var(--text-faint); font-size:.62rem; letter-spacing:.09em; font-weight:800; }
.rm-context strong { color:var(--text); font-size:.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rm-context-copy { color:var(--text-dim); font-size:.75rem; line-height:1.35; }
.rm-context-cta { display:inline-flex; align-items:center; gap:.38rem; padding:.45rem .65rem; border-radius:8px; border:1px solid color-mix(in srgb,var(--accent) 46%,var(--border-soft)); background:color-mix(in srgb,var(--accent) 14%,transparent); color:var(--text); font-size:.74rem; font-weight:800; white-space:nowrap; text-decoration:none; }
.rm-context-cta:hover { color:var(--text); text-decoration:none; border-color:var(--accent); }
.rm-context-empty .rm-context-cta { border-color:color-mix(in srgb,var(--gold) 52%,var(--border-soft)); background:color-mix(in srgb,var(--gold) 13%,transparent); }

.rm-card { scroll-margin-top:calc(var(--topbar-h) + 1rem); padding:1.1rem 1.15rem 1.2rem; border:1px solid var(--border-soft); border-radius:15px; background:var(--surface); box-shadow:var(--shadow); }
.rm-card + .rm-card { margin-top:0; }
.rm-card-heading { display:flex; align-items:center; gap:.65rem; margin-bottom:.75rem; }
.rm-card-icon { width:34px; height:34px; display:grid; place-items:center; flex:0 0 auto; border-radius:10px; color:var(--accent); background:color-mix(in srgb,var(--accent) 15%,transparent); }
.rm-card h2 { margin:0; font-size:1.03rem; line-height:1.2; }
.rm-card-kicker { display:block; color:var(--text-faint); font-size:.62rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; margin-top:.16rem; }
.rm-sub { margin:.15rem 0 .9rem; max-width:900px; font-size:.82rem; line-height:1.55; }
.rm-form label { font-size:.73rem; }
.rm-form input,.rm-form select,.rm-inline input,.rm-inline select,#cmd-search,#fq-input,#diary { min-height:39px; background:color-mix(in srgb,var(--surface-2) 88%,var(--bg)); }
.rm-form input,.rm-form select,.rm-inline input,.rm-inline select,#cmd-search,#fq-input,#diary { border-color:var(--border); }
.rm-btn { min-height:38px; display:inline-flex; align-items:center; justify-content:center; gap:.4rem; box-shadow:0 5px 14px -9px rgba(45,212,191,.85); }
.rm-btn:hover { filter:brightness(1.04); transform:translateY(-1px); }
.rm-btn.secondary { box-shadow:none; }
.rm-metric-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.55rem; margin:.35rem 0 1rem; }
.rm-metric-grid > div { min-width:0; padding:.65rem .7rem; border:1px solid var(--border-soft); border-radius:10px; background:color-mix(in srgb,var(--surface-2) 82%,transparent); }
.rm-metric-grid span { display:block; color:var(--text-faint); font-size:.61rem; font-weight:800; letter-spacing:.08em; }
.rm-metric-grid strong { display:block; margin-top:.19rem; color:var(--text); font-size:.83rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rm-metric-grid-report > div:nth-child(4) strong { color:var(--gold); }
.rm-paper { border-radius:11px; border:1px solid #d2d9e2; box-shadow:0 8px 26px -18px #000; }
.rm-paper h3 { margin:.1rem 0 .55rem; }
.rm-paper h4 { color:#17212e; }
.rm-checklist { gap:.5rem; }
.rm-checklist label { padding:.58rem .65rem; }
.rm-table-wrap { border:1px solid var(--border-soft); border-radius:10px; overflow:auto; }
.rm-table { margin:0; }
.rm-table th { background:color-mix(in srgb,var(--surface-2) 88%,transparent); }
.rm-timeline div,.rm-deck div,.rm-index div { padding:.72rem .75rem; }
.rm-quality { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.5rem; }
.rm-quality > div { display:flex; align-items:flex-start; gap:.45rem; min-height:58px; padding:.65rem .7rem; border-radius:10px; border:1px solid transparent; }
.rm-quality .pass { border-color:rgba(52,211,153,.3); }
.rm-quality .fail { border-color:rgba(251,113,133,.3); }
.rm-quality .warn { background:rgba(251,191,36,.1); border-color:rgba(251,191,36,.32); color:#fbd34d; }
.rm-quality small { display:block; margin-top:.14rem; color:var(--text-dim); font-size:.68rem; font-weight:500; }
.rm-quality-note { margin:.75rem 0 0; color:var(--text-faint); font-size:.73rem; }
.rm-command { box-shadow:none; }
.rm-command header strong { font-size:.85rem; }
.rm-redflags > div { min-height:124px; }
.rm-device-grid article { position:relative; overflow:hidden; min-height:185px; }
.rm-device-grid article::after { content:""; position:absolute; width:74px;height:74px;right:-26px;bottom:-35px;border-radius:18px;border:1px solid color-mix(in srgb,var(--accent) 44%,transparent);transform:rotate(30deg);opacity:.5; }
.rm-device-icon { width:34px; height:34px; display:grid; place-items:center; border-radius:10px; background:color-mix(in srgb,var(--accent) 14%,transparent); }
.rm-status { border-color:color-mix(in srgb,var(--accent) 38%,var(--border-soft)); }

@media (max-width: 1239px) {
  .content-wrap { width:calc(100% - var(--sidebar-w)); }
  .roadmap-page .content-wrap.suite-layout-wrap { width:calc(100% - var(--sidebar-w)) !important; }
}
@media (max-width: 980px) {
  .content-wrap, .roadmap-page .content-wrap.suite-layout-wrap { margin-left:0 !important; width:100% !important; }
  .roadmap-page .site-footer { margin-left:0; }
  .suite-head-grid { grid-template-columns:1fr; }
  .ai-suite-workspace { grid-template-columns:1fr; }
  .ai-suite-rail { position:static; padding:.55rem; }
  .ai-suite-rail nav { display:flex; overflow:auto; gap:.25rem; padding-bottom:.1rem; }
  .ai-suite-rail a { flex:0 0 auto; grid-template-columns:16px minmax(0,1fr); padding:.42rem .5rem; }
  .ai-suite-rail a .ai-rail-no { display:none; }
  .ai-rail-note { display:none; }
}
@media (max-width: 720px) {
  .roadmap-page .content-wrap.suite-layout-wrap { padding:calc(var(--topbar-h) + .85rem) .85rem 2.5rem !important; }
  .suite-page-header { padding:1.1rem .95rem .85rem; border-radius:14px; }
  .suite-head-grid h1 { font-size:1.62rem; }
  .suite-head-grid p { font-size:.9rem; }
  .suite-action-strip { padding-top:.8rem; margin-top:.75rem; }
  .suite-action { font-size:.7rem; }
  .rm-context { grid-template-columns:auto minmax(0,1fr); padding:.7rem; }
  .rm-context-cta { grid-column:2; justify-self:start; }
  .rm-card { padding:.92rem .8rem 1rem; border-radius:13px; }
  .rm-metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .rm-grid3 { grid-template-columns:1fr; }
  .rm-inline { grid-template-columns:1fr; }
  .rm-inline .rm-btn { grid-column:auto; }
  .rm-quality { grid-template-columns:1fr; }
}


/* ──────────────────────────────────────────────────────────────────────
   CYBERSAFE Comprehensive Manual Expansion
   Practical workspaces and doctrine reading layer
────────────────────────────────────────────────────────────────────── */
.command-hero{position:relative;display:grid;grid-template-columns:minmax(310px,.88fr) minmax(420px,1.12fr);gap:clamp(1.5rem,4vw,4.8rem);align-items:center;min-height:448px;padding:clamp(1.25rem,3vw,2.5rem);overflow:hidden;border:1px solid color-mix(in srgb,var(--accent) 28%,var(--border-soft));border-radius:20px;background:linear-gradient(132deg,rgba(12,24,48,.94),rgba(9,18,37,.93) 55%,rgba(14,33,58,.86));isolation:isolate}
.command-hero:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 24%,rgba(45,212,191,.045),transparent 70%),radial-gradient(circle at 80% 15%,rgba(129,140,248,.12),transparent 24%);z-index:-1}
.nexus-visual{position:relative;align-self:stretch;min-height:358px;display:flex;align-items:center}
.nexus-frame{position:relative;width:100%;height:356px;border-radius:18px;overflow:hidden;border:1px solid rgba(45,212,191,.19);background:radial-gradient(ellipse at center,rgba(22,50,77,.78),rgba(6,16,33,.25));box-shadow:inset 0 0 0 1px rgba(129,140,248,.07),0 24px 60px rgba(0,0,0,.18)}
.nexus-frame:before{content:"";position:absolute;inset:13px;z-index:2;pointer-events:none;border:1px solid rgba(153,189,255,.08);border-radius:12px}
#auditNexusCanvas{display:block;width:100%;height:100%}
.nexus-caption{position:absolute;left:22px;bottom:19px;z-index:3;display:flex;align-items:center;gap:.55rem;color:#aebee2;font:600 .7rem/1.2 var(--font-mono,monospace);letter-spacing:.09em;text-transform:uppercase}.nexus-caption .status-dot{width:7px;height:7px;background:#2dd4bf;border-radius:50%;box-shadow:0 0 14px #2dd4bf}
.command-copy{max-width:650px}.command-copy h1{font-size:clamp(2.2rem,4vw,4.25rem);line-height:1.03;letter-spacing:-.055em;margin:.7rem 0 1rem;max-width:720px}.command-copy .lede{font-size:1.05rem;line-height:1.72;max-width:610px;color:var(--text-secondary)}
.command-actions{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1.45rem}.command-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin-top:1.45rem;max-width:580px}.command-metrics div{padding:.74rem .72rem;border-radius:10px;border:1px solid rgba(141,164,214,.14);background:rgba(15,32,60,.5)}.command-metrics strong{display:block;color:var(--accent);font-size:1.3rem}.command-metrics span{display:block;color:var(--text-faint);font-size:.69rem;margin-top:.18rem;text-transform:uppercase;letter-spacing:.05em}
.home-doctrine-strip{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1rem;padding:1rem 1.15rem;margin-top:1rem;border-radius:14px;border:1px solid color-mix(in srgb,var(--accent-3) 25%,var(--border-soft));background:linear-gradient(105deg,rgba(67,56,202,.13),rgba(16,32,60,.6));}.home-doctrine-strip .strip-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:rgba(129,140,248,.14);color:#a6a5ff}.home-doctrine-strip h3{font-size:1rem;margin:0 0 .2rem}.home-doctrine-strip p{font-size:.82rem;margin:0;color:var(--text-secondary)}
.kb-page{max-width:1280px;margin:0 auto;padding:clamp(1.1rem,2.8vw,2.6rem) clamp(.9rem,3vw,2.4rem) 3rem}.kb-header{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.25rem;align-items:flex-start;padding:clamp(1.3rem,3vw,2.25rem);border:1px solid color-mix(in srgb,var(--accent) 26%,var(--border-soft));border-radius:18px;background:radial-gradient(circle at 95% 0,rgba(45,212,191,.11),transparent 28%),linear-gradient(130deg,rgba(16,32,60,.9),rgba(10,21,43,.78));}.kb-orb{width:56px;height:56px;display:grid;place-items:center;flex:0 0 auto;border-radius:16px;background:linear-gradient(135deg,rgba(45,212,191,.25),rgba(129,140,248,.2));border:1px solid rgba(45,212,191,.35);font-size:1.35rem;color:#63f7e7;box-shadow:0 0 0 5px rgba(45,212,191,.05)}.kb-header h1{font-size:clamp(1.8rem,3.6vw,3rem);line-height:1.08;margin:.45rem 0 .6rem;letter-spacing:-.045em}.kb-header>div:last-child>p{max-width:1000px;line-height:1.68;color:var(--text-secondary);margin:0}.kb-tags{display:flex;gap:.48rem;flex-wrap:wrap;margin-top:1rem}.kb-tags span{font-size:.72rem;padding:.36rem .58rem;border-radius:999px;background:rgba(33,54,95,.72);border:1px solid rgba(137,159,217,.16);color:#c1cde9}
.kb-guidebar{margin-top:1rem;padding:1.05rem 1.2rem;border:1px solid var(--border-soft);border-radius:14px;background:var(--surface)}.kb-flow{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}.kb-flow-step{display:flex;align-items:center;gap:.42rem;min-height:34px;padding:.38rem .65rem;border:1px solid rgba(144,170,228,.15);border-radius:9px;background:rgba(20,39,72,.52);font-size:.75rem;color:var(--text-secondary)}.kb-flow-step span{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:rgba(45,212,191,.16);color:var(--accent);font-weight:800;font-size:.65rem}.kb-flow-step:not(:last-child):after{content:"→";margin-left:.25rem;color:var(--accent);opacity:.65}
.kb-stats-wrap{margin-top:1rem}.kb-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem}.kb-stats div{padding:1rem;border-radius:13px;border:1px solid var(--border-soft);background:linear-gradient(135deg,var(--surface),var(--surface-2))}.kb-stats strong{display:block;font-size:1.42rem;color:var(--accent);font-weight:800}.kb-stats span{display:block;margin-top:.15rem;font-size:.74rem;text-transform:uppercase;letter-spacing:.07em;color:var(--text-faint)}
.kb-content{margin-top:1.25rem;display:grid;gap:1rem}.kb-section{display:grid;grid-template-columns:70px minmax(0,1fr);gap:1.1rem;padding:1.35rem;border:1px solid var(--border-soft);border-radius:16px;background:linear-gradient(132deg,rgba(16,31,59,.7),rgba(13,25,49,.55))}.kb-section-index{display:grid;place-items:center;align-self:start;width:52px;height:52px;border-radius:14px;background:rgba(129,140,248,.13);border:1px solid rgba(129,140,248,.27);color:#b6b6ff;font-family:var(--font-mono,monospace);font-size:.85rem;font-weight:800}.kb-section-main h2{font-size:1.28rem;margin:.1rem 0 .5rem}.kb-section-intro{max-width:1020px;margin:0 0 1rem;color:var(--text-secondary);line-height:1.68}.kb-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.72rem}.kb-card{padding:1rem 1rem .95rem;border-radius:12px;border:1px solid rgba(143,170,222,.13);background:rgba(6,17,36,.34);transition:transform .18s ease,border-color .18s ease}.kb-card:hover{transform:translateY(-2px);border-color:rgba(45,212,191,.34)}.kb-card h4{font-size:.92rem;margin:0 0 .37rem;color:#dce7ff}.kb-card p{font-size:.81rem;line-height:1.58;margin:0;color:var(--text-secondary)}
.kb-action-card{display:grid;grid-template-columns:minmax(0,.92fr) minmax(280px,1.08fr);gap:1.35rem;align-items:start;margin-top:1.25rem;padding:1.4rem;border-radius:16px;border:1px solid color-mix(in srgb,var(--accent) 32%,var(--border-soft));background:linear-gradient(120deg,rgba(45,212,191,.11),rgba(17,31,60,.72))}.kb-action-card h2{margin:.4rem 0;font-size:1.32rem}.kb-action-card p{margin:0;color:var(--text-secondary);line-height:1.62}.kb-action-card ol{margin:0;padding:0;list-style:none;counter-reset:field}.kb-action-card li{counter-increment:field;display:flex;gap:.62rem;padding:.55rem 0;border-bottom:1px solid rgba(149,173,226,.11);font-size:.82rem;line-height:1.5;color:var(--text-secondary)}.kb-action-card li:last-child{border-bottom:0}.kb-action-card li:before{content:counter(field);display:grid;place-items:center;min-width:20px;height:20px;border-radius:50%;background:rgba(45,212,191,.16);color:var(--accent);font-size:.65rem;font-weight:800}.kb-disclaimer{display:flex;gap:.55rem;align-items:flex-start;margin-top:1.25rem;padding:.9rem 1rem;border:1px solid rgba(251,191,36,.22);border-radius:12px;background:rgba(251,191,36,.06);font-size:.79rem;line-height:1.56;color:var(--text-secondary)}.kb-disclaimer i{color:#fbbf24;margin-top:.17rem}
.kb-toolbar{position:sticky;top:calc(var(--topbar-h) + .65rem);z-index:6;display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;margin:1rem 0;padding:.9rem;border:1px solid rgba(45,212,191,.2);border-radius:14px;background:rgba(12,25,50,.93);backdrop-filter:blur(16px);box-shadow:0 10px 26px rgba(0,0,0,.15)}.kb-toolbar>div{display:flex;align-items:center;gap:.45rem;flex:1;min-width:210px;color:var(--text-secondary);font-size:.85rem}.kb-toolbar>div>i{color:var(--accent)}.kb-toolbar input,.kb-toolbar select{height:38px;border-radius:9px;border:1px solid rgba(145,172,227,.23);background:rgba(6,16,35,.65);color:var(--text-primary);padding:0 .75rem;outline:none}.kb-toolbar input{min-width:250px;flex:1}.kb-toolbar select{min-width:150px}.kb-toolbar input:focus,.kb-toolbar select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(45,212,191,.1)}
.kb-control-grid,.kb-source-grid,.kb-sector-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem}.kb-control,.kb-source-card,.kb-sector-card{display:flex;flex-direction:column;min-height:208px;padding:1.05rem;border:1px solid var(--border-soft);border-radius:14px;background:linear-gradient(145deg,rgba(17,34,65,.8),rgba(10,21,43,.75));transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease}.kb-control:hover,.kb-source-card:hover,.kb-sector-card:hover{transform:translateY(-3px);border-color:rgba(45,212,191,.36);box-shadow:0 15px 32px rgba(0,0,0,.16)}.kb-control-top,.kb-source-code{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.7rem;font-size:.72rem}.kb-control-top span,.kb-source-code{font-family:var(--font-mono,monospace);color:var(--accent);font-weight:700}.kb-control-top em,.kb-source-code span{font-style:normal;color:#aebbe0;font-family:var(--font-sans,Inter,sans-serif);font-size:.66rem;font-weight:600;padding:.24rem .42rem;border-radius:99px;background:rgba(129,140,248,.11)}.kb-control h3,.kb-source-card h3,.kb-sector-card h3{font-size:1rem;line-height:1.28;margin:0 0 .48rem;color:#e4edff}.kb-control>p,.kb-source-card>p{font-size:.8rem;line-height:1.55;color:var(--text-secondary);margin:0}.kb-control .btn,.kb-source-card .btn{margin-top:auto;align-self:flex-start}.kb-control[hidden],.kb-source-card[hidden],.kb-sector-card[hidden]{display:none!important}
.kb-source-notice{display:flex;gap:.7rem;margin-top:1rem;padding:1rem 1.1rem;border:1px solid rgba(45,212,191,.24);border-radius:13px;background:rgba(45,212,191,.065);color:var(--text-secondary);font-size:.83rem;line-height:1.55}.kb-source-notice i{color:var(--accent);font-size:1.05rem;margin-top:.15rem}.kb-source-notice strong{color:var(--text-primary)}.kb-source-org{color:#aab7da!important;font-weight:650!important;font-size:.74rem!important;margin-top:-.2rem!important;margin-bottom:.55rem!important}.kb-source-card{min-height:224px}.kb-sector-card{min-height:260px}.kb-sector-card .kb-sector-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;margin-bottom:.7rem;background:rgba(45,212,191,.13);color:var(--accent)}.kb-sector-card div{margin-top:.62rem;padding-top:.62rem;border-top:1px solid rgba(149,173,226,.11)}.kb-sector-card small{display:block;color:var(--accent);font-size:.63rem;text-transform:uppercase;letter-spacing:.075em;font-weight:750}.kb-sector-card p{margin:.24rem 0 0;font-size:.76rem;line-height:1.5;color:var(--text-secondary)}
.kb-modal{display:none;position:fixed;inset:0;z-index:10060}.kb-modal.show{display:block}.kb-modal-backdrop{position:absolute;inset:0;background:rgba(2,8,20,.76);backdrop-filter:blur(5px)}.kb-modal-dialog{position:relative;max-width:670px;max-height:calc(100vh - 3rem);overflow:auto;margin:1.5rem auto;padding:1.55rem;border-radius:18px;border:1px solid rgba(45,212,191,.35);background:linear-gradient(145deg,#14284c,#09172e);box-shadow:0 25px 80px rgba(0,0,0,.45)}.kb-modal-dialog h3{font-size:1.45rem;line-height:1.2;margin:.55rem 2rem .55rem 0}.kb-modal-dialog>p{color:var(--text-secondary);line-height:1.62}.kb-close{position:absolute;top:14px;right:14px;width:32px;height:32px;border:1px solid rgba(153,178,232,.28);border-radius:9px;background:rgba(4,14,31,.45);color:#d8e5ff;font-size:1.4rem;line-height:1;cursor:pointer}.kb-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-top:1rem}.kb-detail-grid>div{padding:.9rem;border:1px solid rgba(149,173,226,.16);border-radius:11px;background:rgba(5,15,33,.32)}.kb-detail-grid small{color:var(--accent);text-transform:uppercase;letter-spacing:.07em;font-size:.65rem}.kb-detail-grid p{margin:.4rem 0 0;color:var(--text-secondary);font-size:.82rem;line-height:1.55}.kb-modal-actions{display:flex;gap:.65rem;flex-wrap:wrap;margin-top:1rem}.kb-modal-note{font-size:.75rem!important;padding-top:.9rem;border-top:1px solid rgba(149,173,226,.13);margin-top:1rem!important}.kb-modal-note i{color:#fbbf24;margin-right:.3rem}
@media(max-width:1120px){.command-hero{grid-template-columns:minmax(280px,.85fr) minmax(350px,1.15fr);gap:1.5rem}.command-copy h1{font-size:clamp(2.2rem,5vw,3.4rem)}.kb-control-grid,.kb-source-grid,.kb-sector-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:820px){.command-hero{grid-template-columns:1fr;min-height:auto}.nexus-visual{order:2;min-height:270px}.nexus-frame{height:300px}.command-copy{order:1}.home-doctrine-strip{grid-template-columns:auto 1fr}.home-doctrine-strip .btn{grid-column:2}.kb-header{grid-template-columns:1fr;gap:.8rem}.kb-orb{width:48px;height:48px}.kb-section{grid-template-columns:1fr;gap:.85rem}.kb-section-index{width:44px;height:44px}.kb-grid,.kb-action-card,.kb-detail-grid{grid-template-columns:1fr}.kb-stats{grid-template-columns:repeat(3,1fr)}.kb-toolbar{top:calc(var(--topbar-h) + .35rem)}.kb-toolbar input{min-width:100%;order:3}.kb-toolbar select{flex:1}.kb-control-grid,.kb-source-grid,.kb-sector-grid{grid-template-columns:1fr}.kb-modal-dialog{margin:.75rem;max-height:calc(100vh - 1.5rem);padding:1.2rem}.kb-modal-actions .btn{width:100%;justify-content:center}}
@media(max-width:520px){.command-hero{padding:1rem;border-radius:15px}.nexus-frame{height:260px}.command-metrics{grid-template-columns:1fr 1fr}.command-metrics div:last-child{grid-column:1/-1}.command-copy h1{font-size:2.25rem}.home-doctrine-strip{padding:.9rem}.kb-page{padding:.85rem .7rem 2rem}.kb-header{padding:1.1rem}.kb-stats{gap:.48rem}.kb-stats div{padding:.72rem}.kb-stats strong{font-size:1.12rem}.kb-stats span{font-size:.6rem}.kb-section{padding:1rem}.kb-action-card{padding:1.05rem}.kb-toolbar{padding:.72rem}.kb-toolbar>div{min-width:100%}.kb-toolbar select{min-width:0}.kb-flow-step{font-size:.69rem}.kb-flow-step:not(:last-child):after{display:none}}

/* ──────────────────────────────────────────────────────────────────────
   Standalone Manual Edition — Original Source Reader + refined front visual
────────────────────────────────────────────────────────────────────── */
.source-reader-page{max-width:1320px;margin:0 auto;padding:clamp(1rem,2.8vw,2.6rem) clamp(.85rem,3vw,2.35rem) 3rem}.source-reader-head{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:1.1rem;padding:clamp(1.2rem,2.8vw,2.25rem);border-radius:18px;border:1px solid color-mix(in srgb,var(--accent) 28%,var(--border-soft));background:radial-gradient(circle at 95% 0,rgba(45,212,191,.11),transparent 28%),linear-gradient(130deg,rgba(16,32,60,.92),rgba(10,21,43,.80))}.source-reader-symbol{display:grid;place-items:center;width:58px;height:58px;border-radius:16px;background:linear-gradient(135deg,rgba(45,212,191,.27),rgba(129,140,248,.24));border:1px solid rgba(45,212,191,.36);color:#78f9e9;font-size:1.35rem;box-shadow:0 0 0 5px rgba(45,212,191,.045)}.source-reader-head h1{margin:.45rem 0 .55rem;font-size:clamp(1.7rem,3.5vw,2.8rem);line-height:1.08;letter-spacing:-.045em}.source-reader-head p{max-width:960px;margin:0;color:var(--text-secondary);line-height:1.64}.source-reader-meta{display:flex;gap:.45rem;flex-wrap:wrap;margin-top:1rem}.source-reader-meta span,.kb-source-mode{display:inline-flex;align-items:center;width:max-content;padding:.34rem .55rem;border-radius:999px;background:rgba(33,54,95,.72);border:1px solid rgba(137,159,217,.17);color:#c6d4f1;font-size:.69rem;font-weight:650}.source-reader-callout{display:flex;gap:.7rem;margin-top:1rem;padding:1rem 1.1rem;border-radius:13px;border:1px solid rgba(45,212,191,.24);background:rgba(45,212,191,.065);color:var(--text-secondary);font-size:.83rem;line-height:1.56}.source-reader-callout i{color:var(--accent);font-size:1.05rem;margin-top:.16rem}.source-reader-callout strong{color:var(--text-primary)}.source-reader-actions{display:flex;gap:.7rem;flex-wrap:wrap;margin:1rem 0}.source-reader-stage{overflow:hidden;border:1px solid rgba(129,140,248,.25);border-radius:16px;background:var(--surface);box-shadow:0 15px 34px rgba(0,0,0,.14)}.source-reader-stagebar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.78rem 1rem;border-bottom:1px solid rgba(145,172,227,.16);background:rgba(13,28,57,.85);font-size:.76rem;color:var(--text-secondary)}.source-reader-stagebar>span:first-child{display:flex;align-items:center;gap:.45rem;font-weight:700;color:#dce7ff}.source-reader-stagebar i{color:var(--accent)}.source-reader-stage iframe{display:block;width:100%;height:min(72vh,860px);border:0;background:#fff}.source-reader-fallback{display:flex;gap:.55rem;align-items:flex-start;padding:.8rem 1rem;background:rgba(251,191,36,.06);border-top:1px solid rgba(251,191,36,.15);font-size:.76rem;line-height:1.52;color:var(--text-secondary)}.source-reader-fallback i{color:#fbbf24;margin-top:.16rem}.source-reader-citation{margin-top:1rem;padding:1rem 1.1rem;border-radius:13px;border:1px solid var(--border-soft);background:linear-gradient(145deg,rgba(17,34,65,.78),rgba(10,21,43,.74))}.source-reader-citation code{display:block;margin-top:.55rem;white-space:normal;overflow-wrap:anywhere;color:#c9d8f7;font:500 .77rem/1.6 var(--font-mono,monospace)}.kb-source-mode{margin-top:.2rem;background:rgba(129,140,248,.12);color:#c8c8ff}.kb-modal-dialog .kb-source-mode{margin-top:.35rem}

/* Enhanced canvas hero framing. The animation remains usable with reduced motion. */
.nexus-frame{background:radial-gradient(ellipse at 50% 45%,rgba(22,58,84,.90),rgba(7,17,36,.62) 52%,rgba(5,12,27,.75));}.nexus-frame:before{background:linear-gradient(90deg,transparent 0,transparent 49.8%,rgba(89,185,255,.05) 50%,transparent 50.2%),linear-gradient(0deg,transparent 0,transparent 49.8%,rgba(89,185,255,.05) 50%,transparent 50.2%)}.nexus-caption{padding:.38rem .55rem;border:1px solid rgba(45,212,191,.14);border-radius:7px;background:rgba(5,15,33,.38)}
@media(max-width:820px){.source-reader-head{grid-template-columns:1fr;gap:.75rem}.source-reader-symbol{width:48px;height:48px}.source-reader-stage iframe{height:64vh}.source-reader-actions .btn{flex:1;justify-content:center}.source-reader-stagebar{align-items:flex-start;flex-direction:column;gap:.3rem}}
@media(max-width:520px){.source-reader-page{padding:.75rem .65rem 2rem}.source-reader-head{padding:1rem}.source-reader-actions .btn{width:100%;flex:auto}.source-reader-stage iframe{height:60vh}.source-reader-stagebar{font-size:.71rem}.source-reader-citation{padding:.9rem}}

/* Verified original-source workspace — v7 */
.kb-source-availability{display:inline-flex;align-items:center;gap:.38rem;margin:.15rem 0 .75rem;padding:.3rem .5rem;border-radius:999px;border:1px solid rgba(123,164,233,.18);background:rgba(26,48,88,.55);color:#b6c9ed;font-size:.66rem;font-weight:700;letter-spacing:.02em}
.kb-source-availability .fa-box-archive{color:#68e8d8}.kb-source-availability .fa-arrow-up-right-from-square{color:#a5b7f3}
.source-reader-object{display:block;width:100%;height:min(72vh,860px);border:0;background:#eef2f7}.source-reader-object-fallback{min-height:360px;padding:2rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.85rem;text-align:center;background:linear-gradient(145deg,#f5f7fb,#e6ecf7);color:#1d2940}.source-reader-object-fallback i{font-size:2.25rem;color:#cc3e54}.source-reader-object-fallback span{max-width:560px;color:#54627a;line-height:1.55}.source-reader-external-content{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1rem;align-items:start;padding:clamp(1.2rem,3vw,2.1rem);min-height:370px;background:radial-gradient(circle at 88% 12%,rgba(79,125,255,.15),transparent 30%),linear-gradient(145deg,rgba(12,29,59,.96),rgba(8,18,39,.92))}.source-reader-external-icon{display:grid;place-items:center;width:58px;height:58px;border-radius:17px;border:1px solid rgba(92,165,255,.36);background:rgba(48,102,188,.2);color:#a2d1ff;font-size:1.3rem}.source-reader-external-content h2{margin:.5rem 0 .65rem;font-size:clamp(1.25rem,2.6vw,1.7rem);line-height:1.2;color:#eff5ff}.source-reader-external-content p{max-width:780px;margin:0;color:var(--text-secondary);line-height:1.68}.source-reader-external-actions{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.25rem}.source-reader-inline-meta{display:flex;align-items:center;gap:.45rem;margin-top:1rem!important;font-size:.75rem;color:#b8c8e7!important}.source-reader-inline-meta i{color:var(--accent)}
@media(max-width:820px){.source-reader-object{height:64vh}.source-reader-external-content{grid-template-columns:1fr;min-height:unset}.source-reader-external-icon{width:48px;height:48px}.source-reader-external-actions .btn{flex:1;justify-content:center}}
@media(max-width:520px){.source-reader-object{height:60vh}.source-reader-external-actions .btn{width:100%;flex:auto}}


/* === HOME SHELL & RED/BLUE HERO STABILITY PATCH ===
   The sidebar is injected as a fixed element, so it no longer reserves flex width
   after injection. The home page therefore uses an explicit content rail at desktop
   widths. This keeps the hero inside the page canvas and clear of the sidebar. */
.home-content-wrap{
  margin-left:var(--sidebar-w);
  width:calc(100% - var(--sidebar-w));
  min-width:0;
}
.home-content-wrap > main.content{
  width:100%;
  max-width:1420px !important;
  margin-left:0 !important;
}
.home-content-wrap .command-hero{width:100%;}
.nexus-caption{
  max-width:calc(100% - 28px);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  bottom:11px;
  left:14px;
  font-size:.60rem;
  letter-spacing:.055em;
}
.nexus-caption .status-dot{width:6px;height:6px;flex:0 0 auto;}
@media (max-width: 1239px){
  .home-content-wrap{margin-left:var(--sidebar-w);width:calc(100% - var(--sidebar-w));}
}
@media (max-width: 800px){
  .home-content-wrap{margin-left:0;width:100%;}
}

/* === ORIGINAL PDF VAULT PATCH === */
.source-reader-pdf-note{display:flex;gap:.55rem;align-items:flex-start;padding:.78rem 1rem;border-bottom:1px solid rgba(120,160,220,.14);background:rgba(45,212,191,.055);font-size:.78rem;line-height:1.5;color:var(--text-secondary)}
.source-reader-pdf-note i{color:var(--accent);margin-top:.13rem}
.source-reader-pdf-stage .source-reader-object{height:min(72vh,900px);min-height:480px;background:#f4f7fb}
.source-reader-direct-panel{display:flex;gap:1rem;align-items:center;justify-content:space-between;padding:1rem;border-top:1px solid rgba(120,160,220,.17);background:linear-gradient(105deg,rgba(8,25,51,.94),rgba(15,34,67,.82))}
.source-reader-direct-panel>div:first-child{display:grid;gap:.24rem;max-width:680px}.source-reader-direct-panel strong{font-size:.88rem;color:#e7f1ff}.source-reader-direct-panel span{font-size:.77rem;line-height:1.48;color:var(--text-secondary)}
.source-reader-direct-actions{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:flex-end}
.kb-source-availability i{margin-right:.35rem;color:var(--accent)}
@media(max-width:820px){.source-reader-pdf-stage .source-reader-object{height:64vh;min-height:380px}.source-reader-direct-panel{align-items:flex-start;flex-direction:column}.source-reader-direct-actions{width:100%;justify-content:flex-start}.source-reader-direct-actions .btn{flex:1;justify-content:center}}
@media(max-width:520px){.source-reader-pdf-stage .source-reader-object{height:58vh;min-height:320px}.source-reader-direct-actions .btn{width:100%;flex:auto}}

.source-content-wrap{
  margin-left:var(--sidebar-w) !important;
  width:calc(100% - var(--sidebar-w)) !important;
  padding:calc(var(--topbar-h) + .8rem) 0 3rem !important;
  min-width:0;
}
.source-content-wrap > main.content{margin-left:0!important;max-width:none!important;min-width:0;}
@media(max-width:800px){.source-content-wrap{margin-left:0!important;width:100%!important;}}

/* ═══════════════════════════════════════════════════════════════════════════
   CYBERSAFE ADAPTIVE READING CANVAS + SCROLL STUDIO
   A single responsive system shared by learning pages, audit workspaces and
   reference pages. It deliberately prevents expansive empty rails from
   separating the reader from diagrams, callouts and evidence tools.
═══════════════════════════════════════════════════════════════════════════ */
:root{
  --cybersafe-reading-measure: 900px;
  --cybersafe-reading-gap: clamp(1rem,2.4vw,2.15rem);
  --cybersafe-scroll-accent: var(--accent);
}

/* Normalize the older inline layout declarations into a centred reading canvas. */
body:not([data-page="home"]) .content-wrap.cybersafe-adaptive-wrap:not(.suite-layout-wrap):not(.source-content-wrap){
  display:grid !important;
  grid-template-columns:minmax(0,var(--cybersafe-reading-measure)) minmax(210px,var(--toc-w));
  justify-content:center;
  align-items:start;
  gap:var(--cybersafe-reading-gap) !important;
  width:calc(100% - var(--sidebar-w)) !important;
  margin-left:var(--sidebar-w) !important;
  padding:calc(var(--topbar-h) + 1.65rem) clamp(1rem,3.8vw,3.25rem) 5rem !important;
}
body:not([data-page="home"]) .content-wrap.cybersafe-adaptive-wrap.cybersafe-no-native-toc:not(.suite-layout-wrap):not(.source-content-wrap){
  grid-template-columns:minmax(0,min(100%, 980px));
}
body:not([data-page="home"]) .content-wrap.cybersafe-adaptive-wrap > main.content{
  width:100% !important;
  min-width:0;
  max-width:var(--cybersafe-reading-measure) !important;
  margin:0 !important;
  padding:0 !important;
}
body:not([data-page="home"]) .content-wrap.cybersafe-adaptive-wrap.cybersafe-no-native-toc > main.content{
  max-width:980px !important;
}
body:not([data-page="home"]) .content-wrap.cybersafe-adaptive-wrap .page-toc{
  width:100%;
  min-width:0;
  max-width:var(--toc-w);
  margin:0;
  padding:.85rem .8rem .9rem;
  display:block;
  border:1px solid color-mix(in srgb,var(--accent) 18%,var(--border-soft));
  border-radius:15px;
  background:linear-gradient(155deg,color-mix(in srgb,var(--surface) 96%,transparent),color-mix(in srgb,var(--bg-soft) 88%,transparent));
  box-shadow:var(--shadow);
}
body:not([data-page="home"]) .content-wrap.cybersafe-adaptive-wrap .page-toc::before{
  content:"PAGE NAVIGATOR";
  display:block;
  margin:0 0 .68rem;
  color:var(--accent);
  font:800 .61rem/1 var(--font-mono);
  letter-spacing:.12em;
}
body:not([data-page="home"]) .content-wrap.cybersafe-adaptive-wrap .page-toc .toc-title{display:none;}
body:not([data-page="home"]) .content-wrap.cybersafe-adaptive-wrap .page-toc > a{
  position:relative;
  padding:.48rem .42rem .48rem .74rem;
  border-left-color:color-mix(in srgb,var(--border) 90%,transparent);
  line-height:1.35;
}
body:not([data-page="home"]) .content-wrap.cybersafe-adaptive-wrap .page-toc > a::before{
  content:"";
  position:absolute;
  left:-4px;
  top:50%;
  width:5px;height:5px;border-radius:50%;
  background:var(--surface-3);
  transform:translateY(-50%);
}
body:not([data-page="home"]) .content-wrap.cybersafe-adaptive-wrap .page-toc > a.active::before{background:var(--accent);box-shadow:0 0 12px var(--accent);}

/* Header becomes a contained control-room card: visually rich without text collision. */
.cybersafe-adaptive-header{
  position:relative;
  isolation:isolate;
  min-height:clamp(210px,24vw,300px);
  margin:0 0 2rem !important;
  padding:clamp(1.35rem,3vw,2.25rem) clamp(1.2rem,3vw,2.2rem);
  padding-right:clamp(1.2rem,21vw,15rem);
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--accent) 26%,var(--border-soft));
  border-radius:20px;
  background:
    radial-gradient(circle at 88% 40%,color-mix(in srgb,var(--accent-2) 16%,transparent),transparent 20%),
    radial-gradient(circle at 72% 105%,color-mix(in srgb,var(--accent) 11%,transparent),transparent 34%),
    linear-gradient(135deg,color-mix(in srgb,var(--surface) 96%,transparent),color-mix(in srgb,var(--bg-soft) 88%,transparent));
  box-shadow:var(--shadow-lg);
}
.cybersafe-adaptive-header::before{
  content:"";
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(90deg,transparent 0 95%,rgba(146,187,255,.07) 95%),linear-gradient(0deg,transparent 0 95%,rgba(146,187,255,.06) 95%);
  background-size:34px 34px;
  mask-image:linear-gradient(90deg,#000 0%,#000 47%,transparent 97%);
}
.cybersafe-adaptive-header .lede{max-width:min(67ch,100%);font-size:clamp(1rem,1.4vw,1.17rem);line-height:1.7;}
.cybersafe-adaptive-header h1{max-width:min(16ch,100%);font-size:clamp(2rem,4vw,3.45rem);letter-spacing:-.052em;}
.cybersafe-header-orbit{
  position:absolute;right:clamp(1rem,4.5vw,4.5rem);top:50%;z-index:-1;
  width:clamp(145px,19vw,238px);aspect-ratio:1;
  transform:translateY(-50%);
  border:1px solid color-mix(in srgb,var(--accent) 56%,transparent);border-radius:50%;
  box-shadow:0 0 0 22px color-mix(in srgb,var(--accent-2) 5%,transparent),0 0 0 48px color-mix(in srgb,var(--accent) 3%,transparent),inset 0 0 48px color-mix(in srgb,var(--accent-2) 14%,transparent);
}
.cybersafe-header-orbit::before,.cybersafe-header-orbit::after{content:"";position:absolute;inset:15%;border:1px dashed color-mix(in srgb,var(--accent-2) 58%,transparent);border-radius:50%;}
.cybersafe-header-orbit::after{inset:33%;border-style:solid;border-color:color-mix(in srgb,var(--accent) 76%,transparent);}
.cybersafe-header-orbit i{position:absolute;inset:0;display:grid;place-items:center;color:var(--accent);font-size:clamp(1.45rem,3.2vw,2.6rem);text-shadow:0 0 28px color-mix(in srgb,var(--accent) 68%,transparent);}
.cybersafe-header-orbit span{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--accent-2);box-shadow:0 0 15px var(--accent-2);top:17%;right:6%;animation:cybersafe-orbit-ping 2.8s ease-in-out infinite;}
@keyframes cybersafe-orbit-ping{0%,100%{transform:scale(.75);opacity:.55}50%{transform:scale(1.3);opacity:1}}
.cybersafe-adaptive-header .header-particles{opacity:.45;}

/* The TOC becomes a genuine scroll-atlas, rather than a spare column. */
.cybersafe-atlas-spine{display:grid;gap:.35rem;margin-top:.9rem;padding-top:.85rem;border-top:1px solid var(--border-soft);}
.cybersafe-atlas-label{display:flex;align-items:center;gap:.4rem;color:var(--text-faint);font:800 .61rem/1 var(--font-mono);letter-spacing:.11em;}
.cybersafe-atlas-label i{color:var(--accent);}
.cybersafe-atlas-item{display:grid;grid-template-columns:12px minmax(0,1fr);gap:.48rem;align-items:start;width:100%;padding:.35rem .15rem;border:0;background:transparent;color:var(--text-faint);font:600 .68rem/1.35 var(--font-sans);text-align:left;cursor:pointer;transition:var(--transition);}
.cybersafe-atlas-item span:first-child{width:7px;height:7px;margin:.27rem 0 0;border-radius:50%;background:var(--surface-3);box-shadow:0 0 0 2px color-mix(in srgb,var(--border) 70%,transparent);transition:var(--transition);}
.cybersafe-atlas-item:hover,.cybersafe-atlas-item.active{color:var(--text);}
.cybersafe-atlas-item.active span:first-child{background:var(--accent);box-shadow:0 0 14px color-mix(in srgb,var(--accent) 82%,transparent);}
.cybersafe-atlas-more{padding:.25rem .15rem 0;color:var(--text-faint);font:600 .65rem/1.35 var(--font-mono);}

/* Global top reading progress and a compact, configurable scroll cockpit. */
.cybersafe-scroll-meter{position:fixed;left:0;right:0;top:var(--topbar-h);height:3px;z-index:99;background:color-mix(in srgb,var(--bg) 72%,transparent);pointer-events:none;}
.cybersafe-scroll-meter i{display:block;width:100%;height:100%;transform:scaleX(var(--cybersafe-progress,0));transform-origin:left center;background:linear-gradient(90deg,var(--accent),var(--accent-2),var(--accent-3));box-shadow:0 0 18px color-mix(in srgb,var(--accent) 70%,transparent);transition:transform .12s linear;}
.cybersafe-scroll-deck{position:fixed;right:1rem;bottom:96px;z-index:92;display:grid;justify-items:center;gap:.45rem;width:58px;padding:.48rem .38rem;border:1px solid color-mix(in srgb,var(--accent) 30%,var(--border-soft));border-radius:18px;background:color-mix(in srgb,var(--bg-soft) 88%,transparent);backdrop-filter:blur(14px);box-shadow:0 15px 38px rgba(0,0,0,.32);transition:width .22s ease,transform .22s ease;}
.cybersafe-scroll-deck:hover{width:164px;transform:translateY(-2px);}
.cybersafe-scroll-deck button{width:36px;height:32px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--border) 90%,transparent);border-radius:10px;background:var(--surface-2);color:var(--text-dim);cursor:pointer;transition:var(--transition);}
.cybersafe-scroll-deck button:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px);}
.cybersafe-scroll-stage{position:relative;width:42px!important;height:42px!important;border-radius:50%!important;background:conic-gradient(var(--accent) var(--cybersafe-progress,0%),color-mix(in srgb,var(--surface-3) 88%,transparent) 0)!important;border:0!important;}
.cybersafe-scroll-stage::before{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--bg-soft);border:1px solid color-mix(in srgb,var(--accent) 25%,transparent);}
.cybersafe-scroll-stage span{position:relative;z-index:1;font:800 .58rem/1 var(--font-mono);color:var(--text);}
.cybersafe-scroll-caption{display:none;min-width:116px;padding:0 .18rem;color:var(--text-faint);font:700 .59rem/1.28 var(--font-mono);letter-spacing:.045em;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cybersafe-scroll-deck:hover .cybersafe-scroll-caption{display:block;}
.cybersafe-scroll-actions{display:grid;grid-template-columns:repeat(2,1fr);gap:.35rem;}
.cybersafe-scroll-actions button{font-size:.75rem;}
.cybersafe-scroll-deck .cybersafe-scroll-top{display:none;}
.cybersafe-scroll-deck:hover .cybersafe-scroll-top{display:grid;}
.cybersafe-scroll-deck[data-waypoints="1"] .cybersafe-scroll-actions button[data-cybersafe-scroll="prev"],.cybersafe-scroll-deck[data-waypoints="1"] .cybersafe-scroll-actions button[data-cybersafe-scroll="next"]{opacity:.45;pointer-events:none;}

/* Gentle guided navigation is opt-in—not forced—so audit reading remains predictable. */
html.cybersafe-guided-scroll{scroll-snap-type:y proximity;scroll-padding-top:calc(var(--topbar-h) + 1.15rem);}
html.cybersafe-guided-scroll .cybersafe-waypoint{scroll-snap-align:start;scroll-margin-top:calc(var(--topbar-h) + 1.15rem);}
.cybersafe-waypoint{transition:color .24s ease,filter .24s ease;}
.cybersafe-waypoint.cybersafe-active-waypoint{color:var(--text);}

/* Focus Lane lets officers temporarily remove secondary navigation and read at a controlled measure. */
body.cybersafe-focus-lane .page-toc{display:none!important;}
body.cybersafe-focus-lane .content-wrap.cybersafe-adaptive-wrap:not(.suite-layout-wrap):not(.source-content-wrap){grid-template-columns:minmax(0,980px)!important;}
body.cybersafe-focus-lane .content-wrap.cybersafe-adaptive-wrap > main.content{max-width:980px!important;}
body.cybersafe-focus-lane .cybersafe-scroll-deck{border-color:var(--accent-2);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent-2) 8%,transparent),0 15px 38px rgba(0,0,0,.32);}

/* A safer visual treatment for diagrams and tables: no media may exceed its reading frame. */
.cybersafe-adaptive-main .diagram-wrap,.cybersafe-adaptive-main .table-wrap,.cybersafe-adaptive-main .code-block,.cybersafe-adaptive-main .callout{max-width:100%;}
.cybersafe-adaptive-main .mermaid,.cybersafe-adaptive-main .diagram-wrap svg{max-width:100%!important;height:auto!important;}
.cybersafe-adaptive-main img,.cybersafe-adaptive-main video,.cybersafe-adaptive-main canvas{max-inline-size:100%;}

@media (max-width:1299px){
  body:not([data-page="home"]) .content-wrap.cybersafe-adaptive-wrap:not(.suite-layout-wrap):not(.source-content-wrap){grid-template-columns:minmax(0,min(100%,940px));}
  body:not([data-page="home"]) .content-wrap.cybersafe-adaptive-wrap:not(.suite-layout-wrap):not(.source-content-wrap) .page-toc{display:none!important;}
  .cybersafe-header-orbit{right:1.6rem;width:172px;opacity:.75;}
  .cybersafe-adaptive-header{padding-right:min(28vw,11.5rem);}
}
@media (max-width:980px){
  body:not([data-page="home"]) .content-wrap.cybersafe-adaptive-wrap:not(.suite-layout-wrap):not(.source-content-wrap){width:100%!important;margin-left:0!important;padding:calc(var(--topbar-h) + 1rem) clamp(.85rem,3.4vw,1.35rem) 4rem!important;}
  .cybersafe-adaptive-header{min-height:unset;padding:1.15rem 1rem 1.2rem!important;border-radius:15px;}
  .cybersafe-adaptive-header h1{max-width:100%;font-size:clamp(1.7rem,8vw,2.45rem);}
  .cybersafe-header-orbit{display:none;}
  .cybersafe-scroll-deck{right:.7rem;bottom:82px;}
}
@media (max-width:580px){
  .cybersafe-scroll-meter{height:2px;}
  .cybersafe-scroll-deck{width:48px;padding:.33rem;border-radius:15px;gap:.32rem;right:.52rem;bottom:70px;}
  .cybersafe-scroll-deck:hover{width:48px;transform:none;}
  .cybersafe-scroll-deck button{width:30px;height:28px;border-radius:8px;}
  .cybersafe-scroll-stage{width:35px!important;height:35px!important;}
  .cybersafe-scroll-stage::before{inset:4px;}
  .cybersafe-scroll-caption,.cybersafe-scroll-deck:hover .cybersafe-scroll-caption,.cybersafe-scroll-deck:hover .cybersafe-scroll-top{display:none!important;}
}
/* Keep the orbit illustrative, never over the reading layer. */
.cybersafe-adaptive-header > :not(.cybersafe-header-orbit):not(.header-particles){position:relative;z-index:1;}
.cybersafe-header-orbit{z-index:0;pointer-events:none;}

/* Universal keyboard navigation feedback — the Scroll Studio arrows respond
   whenever ↑/← or ↓/→ moves the reader between sections. */
.cybersafe-scroll-actions button.cybersafe-keyboard-pulse{
  animation:cybersafe-keyboard-navigation-pulse .26s ease-out;
  border-color:rgba(94,211,255,.88)!important;
  box-shadow:0 0 0 4px rgba(71,194,255,.13),0 0 22px rgba(71,194,255,.24);
}
@keyframes cybersafe-keyboard-navigation-pulse{
  0%{transform:scale(1)}
  45%{transform:scale(1.08)}
  100%{transform:scale(1)}
}

/* ============================================================
   CINEMATIC GATEWAY — first-load CYBERSAFE entry sequence
   Pure local CSS and Canvas. The scene remains a professional audit
   briefing: red = threat activity, blue = defensive response, teal = audit lens.
   ============================================================ */
body.cybersafe-cinematic-active{overflow:hidden!important;}
.cinematic-intro{
  --ci-shift-x:0px;
  --ci-shift-y:0px;
  --ci-door-x:0px;
  --ci-door-y:0px;
  position:fixed; inset:0; z-index:12000; overflow:hidden;
  min-height:100svh; isolation:isolate; background:#050b16; color:#ecf3ff;
  font-family:var(--font-sans,Inter,sans-serif); opacity:1; visibility:visible;
  transition:opacity .8s cubic-bezier(.55,.08,.2,1),visibility .8s linear;
}
.cinematic-intro::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(circle at 50% 48%,rgba(26,80,120,.18),transparent 24%),
  linear-gradient(115deg,rgba(102,24,41,.12),transparent 31%,transparent 67%,rgba(27,72,148,.13)),
  radial-gradient(ellipse at 50% 120%,rgba(34,106,141,.15),transparent 52%);
}
.cinematic-intro.is-exiting{opacity:0;visibility:hidden;pointer-events:none;}
.cinematic-stars{position:absolute;inset:0;z-index:0;opacity:.72;background-image:
  radial-gradient(circle at 1px 1px,rgba(93,148,222,.45) 1px,transparent 1.4px),
  radial-gradient(circle at 1px 1px,rgba(42,205,191,.18) 1px,transparent 1.5px);
  background-size:42px 42px,96px 96px;background-position:0 0,18px 17px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.85),transparent 94%);}
.cinematic-stars::before{content:"";position:absolute;inset:-10%;background:radial-gradient(circle,rgba(121,189,255,.38) 0 1px,transparent 1.8px) 0 0/172px 172px;opacity:.36;animation:ciStarDrift 18s linear infinite;}
@keyframes ciStarDrift{to{transform:translate3d(42px,28px,0)}}
#cinematicBattleCanvas{position:absolute;inset:0;z-index:1;width:100%;height:100%;pointer-events:none;opacity:.25;filter:saturate(1.15) contrast(1.05);transition:opacity 1.1s ease,transform 1.1s ease;}
.cinematic-intro.is-open #cinematicBattleCanvas{opacity:.92;transform:scale(1.015);}
.cinematic-scanline{position:absolute;left:-10%;right:-10%;top:48%;height:1px;z-index:3;opacity:0;background:linear-gradient(90deg,transparent,rgba(107,243,236,.8),transparent);box-shadow:0 0 18px rgba(107,243,236,.8);transform:translateY(-8px);}
.cinematic-intro.is-scanning .cinematic-scanline{animation:ciScan 1.1s cubic-bezier(.15,.75,.32,1) forwards;}
@keyframes ciScan{0%{opacity:0;transform:translateY(-42vh)}15%{opacity:1}85%{opacity:.85}100%{opacity:0;transform:translateY(42vh)}}
.cinematic-topline{position:absolute;z-index:12;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:clamp(1rem,2.3vw,2rem) clamp(1rem,4vw,4.6rem);pointer-events:none;}
.cinematic-brandmark{display:flex;align-items:center;gap:.62rem;color:#76f2e2;font:800 clamp(.66rem,1.05vw,.86rem)/1 var(--font-mono,monospace);letter-spacing:.14em;text-transform:uppercase;pointer-events:auto;text-shadow:0 0 18px rgba(45,212,191,.32);}
.cinematic-brandmark i{display:grid;place-items:center;width:34px;height:34px;border:1px solid rgba(78,235,222,.36);border-radius:10px;background:rgba(23,150,151,.18);box-shadow:0 0 25px rgba(38,214,203,.14);}
.cinematic-utility{display:flex;align-items:center;gap:.55rem;pointer-events:auto;}
.cinematic-utility-btn{display:inline-flex;align-items:center;gap:.45rem;min-height:36px;border:1px solid rgba(158,187,243,.2);border-radius:999px;padding:.48rem .7rem;background:rgba(8,19,42,.7);color:#b9c8e8;font:700 .68rem/1 var(--font-mono,monospace);letter-spacing:.04em;cursor:pointer;backdrop-filter:blur(12px);transition:transform .18s ease,border-color .18s ease,color .18s ease,background .18s ease;}
.cinematic-utility-btn:hover,.cinematic-utility-btn:focus-visible{transform:translateY(-2px);border-color:rgba(91,226,216,.7);color:#eafffb;background:rgba(13,44,67,.82);outline:none;}
.cinematic-utility-btn.is-on{border-color:rgba(81,234,221,.72);color:#69f1df;background:rgba(15,109,108,.18);}
.cinematic-skip{color:#c5d4ef;}
.cinematic-door-stage{position:absolute;z-index:6;inset:0;perspective:1700px;transform:translate3d(var(--ci-door-x),var(--ci-door-y),0);transition:transform .45s ease;pointer-events:none;}
.cinematic-door{position:absolute;top:0;bottom:0;width:50.4%;overflow:hidden;backface-visibility:hidden;will-change:transform;transition:transform 1.7s cubic-bezier(.74,.02,.19,1),filter 1.2s ease,opacity .7s ease;box-shadow:inset 0 0 0 1px rgba(128,175,237,.11),inset 0 0 120px rgba(4,11,28,.82);}
.cinematic-door::before{content:"";position:absolute;inset:0;background:
  linear-gradient(145deg,rgba(26,53,91,.94),rgba(7,16,37,.95) 48%,rgba(5,10,24,.98)),
  repeating-linear-gradient(90deg,rgba(82,136,206,.075) 0 1px,transparent 1px 44px),
  repeating-linear-gradient(0deg,rgba(82,136,206,.058) 0 1px,transparent 1px 44px);}
.cinematic-door::after{content:"";position:absolute;inset:16px;border:1px solid rgba(129,177,240,.16);border-radius:8px;background:linear-gradient(90deg,transparent 49.6%,rgba(84,167,250,.08) 50%,transparent 50.4%),linear-gradient(0deg,transparent 49.6%,rgba(84,167,250,.06) 50%,transparent 50.4%);}
.cinematic-door-left{left:0;transform-origin:left center;border-right:1px solid rgba(83,186,228,.22);}
.cinematic-door-right{right:0;transform-origin:right center;border-left:1px solid rgba(83,186,228,.22);}
.cinematic-door-left .door-engraving{left:clamp(1.5rem,6vw,7rem);align-items:flex-start;}
.cinematic-door-right .door-engraving{right:clamp(1.5rem,6vw,7rem);align-items:flex-end;}
.door-engraving{position:absolute;top:50%;z-index:3;display:flex;flex-direction:column;gap:1rem;transform:translateY(-50%);font:800 clamp(.7rem,1.1vw,.95rem)/1 var(--font-mono,monospace);letter-spacing:.22em;color:rgba(161,193,243,.58);text-shadow:0 0 16px rgba(104,164,246,.15);}
.door-engraving span{position:relative;display:block;}
.door-engraving span::after{content:"";position:absolute;top:50%;width:78px;border-top:1px solid rgba(45,212,191,.24);}
.cinematic-door-left .door-engraving span::after{left:calc(100% + 12px)}
.cinematic-door-right .door-engraving span::after{right:calc(100% + 12px)}
.door-circuit{position:absolute;z-index:3;width:34%;height:70%;top:15%;opacity:.6;border-top:2px solid rgba(69,209,204,.31);border-bottom:2px solid rgba(96,135,255,.22);}
.door-circuit-left{right:9%;border-right:2px solid rgba(69,209,204,.31);}
.door-circuit-right{left:9%;border-left:2px solid rgba(69,209,204,.31);}
.door-circuit::before,.door-circuit::after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:#57e7d8;box-shadow:0 0 15px #57e7d8;}
.door-circuit::before{top:-4px;right:-4px}.door-circuit::after{bottom:-4px;left:-4px}
.cinematic-lock{position:absolute;z-index:9;left:50%;top:50%;display:grid;place-items:center;gap:.4rem;width:92px;height:92px;transform:translate(-50%,-50%);border:1px solid rgba(108,248,235,.58);border-radius:50%;background:radial-gradient(circle,rgba(21,97,104,.52),rgba(10,26,52,.9));color:#a8fff0;box-shadow:0 0 0 10px rgba(45,212,191,.05),0 0 44px rgba(45,212,191,.25);font:800 .6rem/1 var(--font-mono,monospace);letter-spacing:.12em;transition:transform .8s cubic-bezier(.73,.08,.3,1),opacity .5s ease,filter .5s ease;}
.cinematic-lock i{font-size:1.25rem;}
.cinematic-intro.is-unlocked .cinematic-lock{transform:translate(-50%,-50%) scale(.58) rotate(130deg);opacity:0;filter:blur(5px);}
.cinematic-intro.is-open .cinematic-door-left{transform:translateX(-17%) rotateY(77deg);filter:brightness(.65);}
.cinematic-intro.is-open .cinematic-door-right{transform:translateX(17%) rotateY(-77deg);filter:brightness(.65);}
.cinematic-content{position:absolute;z-index:10;inset:50% auto auto 50%;width:min(880px,calc(100% - 2.25rem));text-align:center;transform:translate(calc(-50% + var(--ci-shift-x)),calc(-46% + var(--ci-shift-y))) scale(.98);opacity:0;filter:blur(7px);transition:opacity .75s ease .1s,transform .9s cubic-bezier(.22,.8,.22,1) .1s,filter .75s ease .1s;}
.cinematic-intro.is-revealed .cinematic-content{opacity:1;filter:none;transform:translate(calc(-50% + var(--ci-shift-x)),calc(-50% + var(--ci-shift-y))) scale(1);}
.cinematic-clearance{display:inline-flex;align-items:center;gap:.55rem;color:#7ff2e2;font:800 clamp(.62rem,1vw,.78rem)/1 var(--font-mono,monospace);letter-spacing:.12em;text-transform:uppercase;}
.cinematic-clearance span{width:8px;height:8px;border-radius:50%;background:#42dec8;box-shadow:0 0 16px #42dec8;animation:ciPulse 1.65s ease-in-out infinite;}
@keyframes ciPulse{50%{opacity:.35;transform:scale(.72)}}
.cinematic-pretitle{margin:1rem 0 .55rem;color:#b8c9eb;font-size:clamp(.8rem,1.2vw,1rem);letter-spacing:.03em;}
.cinematic-title-action{display:block;margin:0 auto;padding:0;border:0;background:none;color:inherit;cursor:pointer;position:relative;max-width:100%;}
.cinematic-title-action::before{content:"";position:absolute;inset:5% -4%;border-radius:50%;background:radial-gradient(ellipse,rgba(110,234,222,.12),transparent 69%);opacity:0;transition:opacity .2s ease;}
.cinematic-title-action:hover::before,.cinematic-title-action:focus-visible::before{opacity:1}.cinematic-title-action:focus-visible{outline:2px solid #65f2e2;outline-offset:10px;border-radius:10px;}
.cinematic-title-action span{position:relative;display:block;color:#e2eaff;font-family:"Segoe Script","Snell Roundhand","URW Chancery L",cursive;font-size:clamp(1.7rem,4.1vw,4rem);font-weight:600;line-height:.9;letter-spacing:.015em;text-shadow:0 0 22px rgba(199,227,255,.16);}
.cinematic-title-action strong{position:relative;display:block;margin-top:.12em;color:#fff8e6;font-family:"Segoe Script","Snell Roundhand","URW Chancery L",cursive;font-size:clamp(3rem,7.7vw,7.3rem);font-weight:700;line-height:.87;letter-spacing:-.035em;background:linear-gradient(100deg,#f6f8ff 0%,#b6f7ef 32%,#fff8e4 54%,#8bdbff 80%,#fbfdff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 0 20px rgba(86,226,215,.18));}
.cinematic-title-action strong::after{content:"";position:absolute;left:9%;right:9%;bottom:-.18em;height:2px;background:linear-gradient(90deg,transparent,rgba(113,244,230,.95),rgba(139,184,255,.8),transparent);box-shadow:0 0 16px rgba(95,224,220,.75);}
.cinematic-subtitle{max-width:690px;margin:1.5rem auto 0;color:#c6d3ed;font-size:clamp(.92rem,1.35vw,1.14rem);line-height:1.65;text-wrap:balance;}
.cinematic-actions{display:flex;flex-direction:column;align-items:center;gap:1rem;margin-top:1.75rem;}
.cinematic-enter-btn{display:inline-flex;align-items:center;justify-content:center;gap:.72rem;min-height:56px;padding:.85rem 1.3rem;border:1px solid rgba(79,234,220,.72);border-radius:14px;background:linear-gradient(105deg,#1ecbbd,#4aa9ff);color:#061626;font:800 clamp(.8rem,1.1vw,.95rem)/1 var(--font-sans,Inter,sans-serif);cursor:pointer;box-shadow:0 0 0 7px rgba(64,213,197,.06),0 15px 35px rgba(27,185,188,.18);transition:transform .2s ease,box-shadow .2s ease,filter .2s ease;}
.cinematic-enter-btn:hover,.cinematic-enter-btn:focus-visible{transform:translateY(-3px) scale(1.01);box-shadow:0 0 0 9px rgba(64,213,197,.08),0 22px 48px rgba(27,185,188,.32);filter:brightness(1.08);outline:none;}
.cinematic-enter-btn .fa-arrow-right{font-size:.8rem;transition:transform .2s ease}.cinematic-enter-btn:hover .fa-arrow-right{transform:translateX(4px)}
.cinematic-finale{position:absolute;z-index:30;left:50%;top:54%;width:min(650px,calc(100% - 2rem));transform:translate(-50%,-50%) scale(.94);padding:1.4rem 1.5rem;text-align:center;opacity:0;pointer-events:none;border:1px solid rgba(106,237,220,.58);border-radius:20px;background:linear-gradient(135deg,rgba(5,25,48,.96),rgba(11,67,87,.9));box-shadow:0 0 0 8px rgba(74,218,207,.05),0 0 70px rgba(62,220,204,.25);transition:opacity .8s ease,transform .8s ease}.cinematic-finale.is-visible{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}.cinematic-finale span{display:block;color:#67eee0;font:700 .64rem/1 var(--font-mono,"JetBrains Mono",monospace);letter-spacing:.2em}.cinematic-finale strong{display:block;margin:.4rem 0 .35rem;color:#f4fffe;font-size:clamp(1.45rem,2.9vw,2.35rem);letter-spacing:.04em}.cinematic-finale p{margin:0 auto;color:#d7edf3;font-size:clamp(.78rem,1.3vw,.98rem);line-height:1.55;max-width:550px}.cinematic-finale-enter{display:inline-flex;align-items:center;gap:.55rem;margin-top:1rem;padding:.74rem 1rem;border:1px solid rgba(132,255,237,.85);border-radius:10px;background:#61e5d7;color:#052037;font:800 .78rem/1 var(--font-sans,Inter,sans-serif);cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.22)}.cinematic-finale-enter:hover,.cinematic-finale-enter:focus-visible{filter:brightness(1.08);transform:translateY(-1px);outline:none}.cinematic-intro.is-complete #cinematicBattleCanvas{opacity:.32;transition:opacity .8s ease}
.cinematic-key-hints{display:flex;align-items:center;justify-content:center;gap:.45rem;flex-wrap:wrap;color:#8298bd;font:600 .63rem/1 var(--font-mono,monospace);letter-spacing:.035em;}
.cinematic-key-hints kbd{display:inline-grid;place-items:center;min-width:22px;height:20px;padding:0 .35rem;border:1px solid rgba(157,181,230,.24);border-radius:5px;background:rgba(16,34,68,.68);color:#c9d8f8;font:700 .6rem/1 var(--font-mono,monospace);}
.cinematic-statusbar{position:absolute;z-index:11;left:50%;bottom:clamp(1rem,2.5vh,1.8rem);display:flex;align-items:center;gap:.52rem;max-width:calc(100% - 2rem);padding:.55rem .8rem;border:1px solid rgba(138,165,215,.16);border-radius:999px;background:rgba(6,16,35,.62);backdrop-filter:blur(14px);color:#9daed0;font:700 clamp(.56rem,.76vw,.68rem)/1 var(--font-mono,monospace);letter-spacing:.055em;text-transform:uppercase;transform:translateX(-50%);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cinematic-status-pulse{width:7px;height:7px;border-radius:50%;background:#46e0c9;box-shadow:0 0 13px #46e0c9;flex:0 0 auto;}
.cinematic-status-divider{height:12px;border-left:1px solid rgba(147,174,227,.32);margin:0 .15rem;}
body.cybersafe-cinematic-active .topbar,body.cybersafe-cinematic-active .sidebar,body.cybersafe-cinematic-active .scroll-studio{pointer-events:none;}
@media(max-width:820px){
  .cinematic-topline{padding:1rem;align-items:flex-start;}.cinematic-brandmark span{display:none}.cinematic-utility-btn span{display:none}.cinematic-utility-btn{width:36px;justify-content:center;padding:.48rem;}
  .door-engraving{opacity:.54;font-size:.62rem;gap:.75rem}.door-engraving span::after{width:42px}.door-circuit{opacity:.35;width:44%}
  .cinematic-content{width:min(680px,calc(100% - 1.5rem));}.cinematic-pretitle{font-size:.72rem;margin-top:.8rem}.cinematic-subtitle{font-size:.85rem;max-width:560px;margin-top:1.2rem}.cinematic-actions{margin-top:1.25rem}.cinematic-enter-btn{min-height:52px;padding:.75rem 1rem;font-size:.78rem;}
  .cinematic-statusbar{bottom:.7rem;font-size:.52rem;max-width:calc(100% - 1rem);}.cinematic-status-divider,.cinematic-statusbar>span:last-child{display:none}
}
@media(max-width:520px){
  .cinematic-door::after{inset:10px}.cinematic-door-left .door-engraving{left:.7rem}.cinematic-door-right .door-engraving{right:.7rem}.door-engraving{font-size:.54rem;letter-spacing:.12em}.door-engraving span::after{display:none}.door-circuit{display:none}.cinematic-lock{width:66px;height:66px;font-size:.48rem}.cinematic-lock i{font-size:1rem}.cinematic-title-action span{font-size:1.55rem}.cinematic-title-action strong{font-size:3.4rem;line-height:.92}.cinematic-pretitle{max-width:310px;margin-left:auto;margin-right:auto;line-height:1.5}.cinematic-subtitle{max-width:330px;line-height:1.48}.cinematic-key-hints{display:none}.cinematic-statusbar{width:calc(100% - 1rem);justify-content:center;padding:.5rem .6rem}.cinematic-enter-btn{width:min(330px,100%);}.cinematic-intro.is-open .cinematic-door-left{transform:translateX(-12%) rotateY(79deg)}.cinematic-intro.is-open .cinematic-door-right{transform:translateX(12%) rotateY(-79deg)}
}
@media(prefers-reduced-motion:reduce){
  .cinematic-stars::before,.cinematic-clearance span{animation:none}.cinematic-intro,.cinematic-door,.cinematic-content,#cinematicBattleCanvas,.cinematic-lock{transition-duration:.01ms!important;}.cinematic-scanline{display:none}.cinematic-door-left,.cinematic-intro.is-open .cinematic-door-left{transform:translateX(-23%) rotateY(77deg)}.cinematic-door-right,.cinematic-intro.is-open .cinematic-door-right{transform:translateX(23%) rotateY(-77deg)}.cinematic-content,.cinematic-intro.is-revealed .cinematic-content{opacity:1;filter:none;transform:translate(-50%,-50%)}
}


/* Cinematic audio assurance: an explicit, high-visibility user-gesture control.
   Audio playback is not permitted by browsers until an officer clicks or presses a key. */
.cinematic-audio-cue{display:inline-flex;align-items:center;gap:.72rem;max-width:100%;margin:1.1rem auto -.15rem;padding:.58rem .92rem .58rem .6rem;border:1px solid rgba(108,245,230,.55);border-radius:999px;background:linear-gradient(105deg,rgba(13,107,111,.72),rgba(28,78,147,.74));box-shadow:0 0 0 7px rgba(45,212,191,.055),0 0 26px rgba(45,212,191,.18);color:#ecfffc;cursor:pointer;transition:opacity .28s ease,transform .2s ease,filter .2s ease,border-color .2s ease;animation:ciAudioCue 1.85s ease-in-out infinite;}
.cinematic-audio-cue:hover,.cinematic-audio-cue:focus-visible{transform:translateY(-2px) scale(1.015);filter:brightness(1.12);border-color:#a8fff3;outline:none;}
.cinematic-audio-cue.is-hidden{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-5px) scale(.98);animation:none;}
.cinematic-audio-cue-icon{display:grid;place-items:center;flex:0 0 auto;width:31px;height:31px;border-radius:50%;background:rgba(221,255,250,.15);box-shadow:inset 0 0 0 1px rgba(183,255,246,.18);color:#7cf7e5;font-size:.8rem;}
.cinematic-audio-cue>span:last-child{display:grid;gap:.12rem;text-align:left;}
.cinematic-audio-cue strong{font:800 .72rem/1 var(--font-mono,monospace);letter-spacing:.055em;text-transform:uppercase;}
.cinematic-audio-cue small{color:#c3d9fb;font:600 .62rem/1.2 var(--font-sans,Inter,sans-serif);}
@keyframes ciAudioCue{0%,100%{box-shadow:0 0 0 7px rgba(45,212,191,.055),0 0 20px rgba(45,212,191,.14)}50%{box-shadow:0 0 0 11px rgba(45,212,191,.025),0 0 36px rgba(45,212,191,.30)}}
@media(max-width:520px){.cinematic-audio-cue{margin-top:.9rem;padding:.52rem .72rem .52rem .54rem}.cinematic-audio-cue strong{font-size:.64rem}.cinematic-audio-cue small{font-size:.56rem}.cinematic-audio-cue-icon{width:28px;height:28px}}
@media(prefers-reduced-motion:reduce){.cinematic-audio-cue{animation:none}}


/* ============================================================
   CINEMATIC GATEWAY — NO-OVERLAP COMPOSITION PATCH
   The battle canvas is deliberately graphic-only. All readable copy is
   contained in one protected editorial stack, so it stays clear at any
   screen width, aspect ratio or system font fallback.
   ============================================================ */
.cinematic-intro.is-open #cinematicBattleCanvas{
  opacity:.66;
  filter:saturate(.92) contrast(.94);
}
.cinematic-content{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  justify-items:center;
  align-content:center;
  gap:clamp(.5rem,1.35vh,1rem);
  width:min(940px,calc(100% - 2.5rem));
  padding:clamp(.9rem,2vh,1.45rem) clamp(.85rem,2.6vw,2.1rem) clamp(1rem,2.35vh,1.6rem);
  isolation:isolate;
}
.cinematic-content::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:clamp(-3rem,-5vh,-1.4rem) clamp(-4rem,-6vw,-1.25rem);
  pointer-events:none;
  background:radial-gradient(ellipse at center,
    rgba(4,12,29,.94) 0%,
    rgba(5,15,34,.84) 44%,
    rgba(5,15,34,.42) 65%,
    rgba(5,15,34,0) 86%);
  filter:blur(2px);
}
.cinematic-content > *{
  position:relative;
  z-index:1;
  margin:0!important;
}
.cinematic-clearance{
  max-width:100%;
  justify-content:center;
  flex-wrap:wrap;
  row-gap:.35rem;
  line-height:1.35;
  text-wrap:balance;
}
.cinematic-pretitle{
  max-width:720px;
  font-size:clamp(.82rem,1.18vw,1rem);
  line-height:1.5;
  text-wrap:balance;
}
.cinematic-title-action{
  width:100%;
  padding:clamp(.12rem,.45vw,.35rem) 0 clamp(.32rem,.75vw,.68rem);
  text-wrap:balance;
}
.cinematic-title-action span{
  font-size:clamp(1.75rem,3.75vw,3.55rem);
  line-height:1.07;
  letter-spacing:.005em;
  text-wrap:balance;
}
.cinematic-title-action strong{
  max-width:100%;
  margin-top:.13em;
  padding:.045em .08em .17em;
  font-size:clamp(3.1rem,6.05vw,6.25rem);
  line-height:1.06;
  letter-spacing:-.025em;
  text-wrap:balance;
}
.cinematic-title-action strong::after{
  left:15%;
  right:15%;
  bottom:.02em;
}
.cinematic-subtitle{
  max-width:700px;
  font-size:clamp(.9rem,1.27vw,1.08rem);
  line-height:1.52;
  text-wrap:balance;
}
.cinematic-audio-cue{
  margin:.1rem auto 0!important;
}
.cinematic-actions{
  margin-top:.12rem!important;
  gap:.78rem;
}
@media (max-width:820px){
  .cinematic-content{
    width:min(660px,calc(100% - 1.5rem));
    gap:.58rem;
    padding:.8rem .72rem 1rem;
  }
  .cinematic-content::before{inset:-2rem -1rem;}
  .cinematic-title-action span{font-size:clamp(1.65rem,6.3vw,2.75rem);}
  .cinematic-title-action strong{font-size:clamp(3rem,10.3vw,4.7rem);line-height:1.07;}
  .cinematic-subtitle{max-width:570px;line-height:1.5;}
}
@media (max-width:520px){
  .cinematic-content{gap:.5rem;width:calc(100% - 1rem);padding:.72rem .4rem .92rem;}
  .cinematic-content::before{inset:-1.6rem -.35rem;}
  .cinematic-clearance{font-size:.55rem;letter-spacing:.09em;}
  .cinematic-pretitle{max-width:335px;font-size:.7rem;line-height:1.48;}
  .cinematic-title-action span{font-size:1.5rem;line-height:1.1;}
  .cinematic-title-action strong{font-size:clamp(2.8rem,13vw,3.85rem);line-height:1.08;letter-spacing:-.02em;}
  .cinematic-subtitle{max-width:340px;font-size:.77rem;line-height:1.45;}
  .cinematic-audio-cue{max-width:calc(100% - .45rem);}
}
/* Short landscape screens keep every text block inside the viewport. */
@media (max-height:760px) and (min-width:700px){
  .cinematic-content{gap:.42rem;padding:.45rem 1.15rem .65rem;}
  .cinematic-pretitle{font-size:.74rem;}
  .cinematic-title-action span{font-size:clamp(1.55rem,3.2vw,2.55rem);}
  .cinematic-title-action strong{font-size:clamp(2.9rem,5.05vw,4.65rem);}
  .cinematic-subtitle{font-size:.8rem;line-height:1.38;max-width:590px;}
  .cinematic-audio-cue{display:none;}
  .cinematic-actions{gap:.55rem;}
  .cinematic-enter-btn{min-height:48px;}
  .cinematic-key-hints{display:none;}
}

/* ============================================================
   35-SECOND AUDIT SINGULARITY — cinematic extension
   The sequence atlas stays outside the protected text stack. Canvas effects
   use no readable labels, preserving a clean, non-overlapping composition.
   ============================================================ */
.cinematic-sequence-atlas{
  position:absolute;
  z-index:12;
  top:clamp(4.25rem,8.5vh,6.45rem);
  left:clamp(1rem,4vw,4.6rem);
  display:grid;
  gap:.52rem;
  width:min(280px,calc(100% - 2rem));
  padding:.72rem .8rem .68rem;
  border:1px solid rgba(134,175,239,.17);
  border-radius:12px;
  background:linear-gradient(135deg,rgba(7,18,40,.70),rgba(9,30,59,.42));
  box-shadow:0 10px 30px rgba(0,0,0,.15),inset 0 1px 0 rgba(176,219,255,.05);
  backdrop-filter:blur(14px);
  pointer-events:none;
}
.cinematic-sequence-copy{display:flex;align-items:center;gap:.48rem;min-width:0;color:#b9c9e9;font:700 .61rem/1 var(--font-mono,monospace);letter-spacing:.075em;text-transform:uppercase;white-space:nowrap;overflow:hidden;}
.cinematic-sequence-copy #cinematicTimecode{color:#6cf1df;flex:0 0 auto;}
.cinematic-sequence-copy strong{overflow:hidden;text-overflow:ellipsis;color:#c7d7f2;font:800 .61rem/1 var(--font-mono,monospace);letter-spacing:.075em;}
.cinematic-sequence-divider{width:1px;height:13px;background:rgba(142,176,230,.3);flex:0 0 auto;}
.cinematic-sequence-rail{position:relative;overflow:hidden;height:3px;border-radius:999px;background:rgba(142,176,230,.14);}
.cinematic-sequence-rail i{position:absolute;inset:0;transform:scaleX(0);transform-origin:left center;border-radius:inherit;background:linear-gradient(90deg,#3fdac8,#78d3ff 70%,#fff0b2);box-shadow:0 0 12px rgba(88,228,221,.65);will-change:transform;}

/* Cinematic phase grading: the central editorial stack remains protected by
   its readability veil while the surrounding graphic field becomes richer. */
.cinematic-intro::after{content:"";position:absolute;z-index:2;inset:-12%;pointer-events:none;opacity:0;transform:scale(.9) rotate(0deg);background:conic-gradient(from 0deg at 50% 50%,transparent 0 8%,rgba(91,232,219,.08) 12%,transparent 20% 37%,rgba(114,153,255,.08) 43%,transparent 52% 69%,rgba(255,104,127,.07) 76%,transparent 84% 100%);filter:blur(14px);transition:opacity 1.2s ease,transform 4s cubic-bezier(.2,.85,.2,1);mix-blend-mode:screen;}
.cinematic-intro.is-battle #cinematicBattleCanvas{opacity:.73;filter:saturate(1.03) contrast(1.01);}
.cinematic-intro.is-singularity #cinematicBattleCanvas{opacity:.91;filter:saturate(1.16) contrast(1.05);}
.cinematic-intro.is-singularity::after{opacity:.72;transform:scale(1.12) rotate(72deg);}
.cinematic-intro.is-constellation #cinematicBattleCanvas{opacity:.87;filter:saturate(1.05) contrast(1.03);}
.cinematic-intro.is-constellation::after{opacity:.54;transform:scale(1.28) rotate(138deg);}
.cinematic-intro.is-aurora #cinematicBattleCanvas{opacity:.94;filter:saturate(1.05) brightness(1.14) contrast(.98);}
.cinematic-intro.is-aurora::after{opacity:.84;transform:scale(1.54) rotate(216deg);}
.cinematic-intro.is-complete #cinematicBattleCanvas{opacity:.78;filter:saturate(.98) brightness(1.11);}
.cinematic-intro.is-aurora .cinematic-content::before,.cinematic-intro.is-complete .cinematic-content::before{background:radial-gradient(ellipse at center,rgba(3,11,28,.95) 0%,rgba(6,18,39,.86) 46%,rgba(5,15,34,.45) 67%,rgba(5,15,34,0) 88%);}
.cinematic-intro.is-aurora .cinematic-enter-btn,.cinematic-intro.is-complete .cinematic-enter-btn{animation:ciGatewayReady 1.7s ease-in-out infinite;}
@keyframes ciGatewayReady{50%{box-shadow:0 0 0 10px rgba(64,213,197,.055),0 20px 55px rgba(76,189,255,.42);filter:brightness(1.10);}}

/* The door field recedes during the evidence / assurance stages so the visual
   reads as a portal rather than a competing text panel. */
.cinematic-intro.is-singularity .cinematic-door,.cinematic-intro.is-constellation .cinematic-door,.cinematic-intro.is-aurora .cinematic-door,.cinematic-intro.is-complete .cinematic-door{opacity:.26;filter:brightness(.42) saturate(.82);}
.cinematic-intro.is-aurora .cinematic-door-stage,.cinematic-intro.is-complete .cinematic-door-stage{transform:translate3d(var(--ci-door-x),var(--ci-door-y),0) scale(1.04);}
.cinematic-intro.is-aurora .cinematic-stars,.cinematic-intro.is-complete .cinematic-stars{opacity:.92;filter:brightness(1.18);}

@media(max-width:820px){
  .cinematic-sequence-atlas{top:4.1rem;left:.85rem;width:min(230px,calc(100% - 1.7rem));padding:.58rem .65rem;}
  .cinematic-sequence-copy,.cinematic-sequence-copy strong{font-size:.53rem;}
}
@media(max-width:520px){.cinematic-sequence-atlas{display:none;}.cinematic-intro::after{filter:blur(20px);}}
@media(max-height:720px) and (min-width:700px){.cinematic-sequence-atlas{top:3.95rem;padding:.52rem .64rem;}}
@media(prefers-reduced-motion:reduce){.cinematic-intro::after,.cinematic-intro.is-singularity::after,.cinematic-intro.is-constellation::after,.cinematic-intro.is-aurora::after{animation:none;transition:none;opacity:.22;transform:none;}.cinematic-intro.is-aurora .cinematic-enter-btn,.cinematic-intro.is-complete .cinematic-enter-btn{animation:none;}}

/* ============================================================
   KINETIC ASSURANCE ODYSSEY — performance / choreography pass
   The cinematic uses a light retained Canvas, a capped render density and
   compositor-friendly transforms. No phase uses a frozen holding frame.
   ============================================================ */
.cinematic-intro{
  contain:layout paint style;
  transform:translateZ(0);
}
.cinematic-intro::after{
  inset:0!important;
  opacity:.12!important;
  transform:none!important;
  filter:none!important;
  background:radial-gradient(ellipse at 50% 50%,rgba(72,216,205,.045),transparent 52%)!important;
  mix-blend-mode:normal!important;
  transition:opacity .65s ease!important;
}
#cinematicBattleCanvas{
  opacity:.84!important;
  filter:none!important;
  transform:translateZ(0)!important;
  will-change:transform,opacity;
  contain:strict;
}
.cinematic-intro.is-open #cinematicBattleCanvas,
.cinematic-intro.is-duel #cinematicBattleCanvas,
.cinematic-intro.is-cascade #cinematicBattleCanvas,
.cinematic-intro.is-harvest #cinematicBattleCanvas,
.cinematic-intro.is-synthesis #cinematicBattleCanvas,
.cinematic-intro.is-corridor #cinematicBattleCanvas,
.cinematic-intro.is-horizon #cinematicBattleCanvas,
.cinematic-intro.is-ready #cinematicBattleCanvas{
  opacity:.96!important;
  filter:none!important;
  transform:translateZ(0)!important;
}
.cinematic-door-stage{
  transform:translate3d(var(--ci-door-x),var(--ci-door-y),0) translateZ(0)!important;
  will-change:transform;
  transition:transform .28s ease-out!important;
}
.cinematic-door{
  transform:translateZ(0);
  will-change:transform,opacity;
  transition:transform 2.35s cubic-bezier(.17,.82,.18,1),opacity .8s ease,filter .8s ease!important;
}
.cinematic-intro.is-open .cinematic-door-left{transform:translate3d(-19%,0,0) rotateY(77deg)!important;filter:brightness(.62)!important;}
.cinematic-intro.is-open .cinematic-door-right{transform:translate3d(19%,0,0) rotateY(-77deg)!important;filter:brightness(.62)!important;}
.cinematic-intro.is-duel .cinematic-door{opacity:.52;}
.cinematic-intro.is-cascade .cinematic-door{opacity:.42;}
.cinematic-intro.is-harvest .cinematic-door{opacity:.30;filter:brightness(.48)!important;}
.cinematic-intro.is-synthesis .cinematic-door{opacity:.22;filter:brightness(.42)!important;}
.cinematic-intro.is-corridor .cinematic-door{opacity:.13;filter:brightness(.34)!important;}
.cinematic-intro.is-horizon .cinematic-door,.cinematic-intro.is-ready .cinematic-door{opacity:.09;filter:brightness(.30)!important;}
.cinematic-intro.is-corridor .cinematic-door-stage,.cinematic-intro.is-horizon .cinematic-door-stage,.cinematic-intro.is-ready .cinematic-door-stage{transform:translate3d(var(--ci-door-x),var(--ci-door-y),0) scale(1.035) translateZ(0)!important;}
.cinematic-intro.is-harvest::after{opacity:.18!important;}
.cinematic-intro.is-synthesis::after{opacity:.24!important;}
.cinematic-intro.is-corridor::after{opacity:.31!important;}
.cinematic-intro.is-horizon::after,.cinematic-intro.is-ready::after{opacity:.36!important;}
.cinematic-stars{will-change:opacity,transform;transform:translateZ(0);}
.cinematic-stars::before{animation-duration:30s!important;will-change:transform;}
.cinematic-content{
  will-change:transform,opacity;
  transition:opacity .55s ease .05s,transform .72s cubic-bezier(.22,.78,.22,1) .05s,filter .55s ease .05s!important;
}
.cinematic-intro.is-duel .cinematic-content::before{background:radial-gradient(ellipse at center,rgba(3,11,27,.95) 0%,rgba(5,15,34,.84) 48%,rgba(5,15,34,.34) 69%,rgba(5,15,34,0) 88%)!important;}
.cinematic-intro.is-corridor .cinematic-content::before,.cinematic-intro.is-horizon .cinematic-content::before,.cinematic-intro.is-ready .cinematic-content::before{background:radial-gradient(ellipse at center,rgba(3,11,28,.96) 0%,rgba(5,16,35,.89) 47%,rgba(5,15,34,.40) 68%,rgba(5,15,34,0) 89%)!important;}
.cinematic-intro.is-synthesis .cinematic-title-action strong,.cinematic-intro.is-corridor .cinematic-title-action strong,.cinematic-intro.is-horizon .cinematic-title-action strong,.cinematic-intro.is-ready .cinematic-title-action strong{animation:ciKineticCalligraphy 5.4s ease-in-out infinite;}
@keyframes ciKineticCalligraphy{0%,100%{filter:drop-shadow(0 0 16px rgba(86,226,215,.15));}50%{filter:drop-shadow(0 0 28px rgba(124,222,255,.38));}}
.cinematic-sequence-atlas{will-change:transform;transform:translateZ(0);}
.cinematic-sequence-rail i{transition:transform .18s linear!important;}
.cinematic-intro.is-ready .cinematic-enter-btn{animation:ciGatewayReady 1.7s ease-in-out infinite!important;}
@media(max-width:520px){
  #cinematicBattleCanvas{opacity:.78!important;}
  .cinematic-intro.is-open .cinematic-door-left{transform:translate3d(-13%,0,0) rotateY(79deg)!important;}
  .cinematic-intro.is-open .cinematic-door-right{transform:translate3d(13%,0,0) rotateY(-79deg)!important;}
}
@media(prefers-reduced-motion:reduce){
  #cinematicBattleCanvas{opacity:.72!important;}
  .cinematic-intro.is-synthesis .cinematic-title-action strong,.cinematic-intro.is-corridor .cinematic-title-action strong,.cinematic-intro.is-horizon .cinematic-title-action strong,.cinematic-intro.is-ready .cinematic-title-action strong{animation:none!important;}
}


/* === CINEMATIC OFFICIAL IDENTITY PATCH === */
.cinematic-brandmark{gap:.82rem;}
.cinematic-brandmark-logos{display:inline-flex;align-items:center;gap:.42rem;padding:.26rem .38rem;border-radius:999px;border:1px solid rgba(91,230,219,.18);background:rgba(7,20,41,.52);box-shadow:0 0 18px rgba(45,212,191,.08) inset;}
.cinematic-logo-badge{display:block;object-fit:cover;box-shadow:0 0 14px rgba(8,17,37,.18);}
.cinematic-logo-node{width:36px;height:36px;border-radius:50%;padding:2px;background:rgba(255,255,255,.08);}
.cinematic-logo-institutional{width:36px;height:36px;border-radius:11px;padding:3px;background:rgba(255,255,255,.96);}
.cinematic-official-seals{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.7rem;align-self:center;margin:0 auto .6rem;padding:.42rem .82rem;border-radius:999px;border:1px solid rgba(113,189,255,.16);background:linear-gradient(180deg,rgba(7,17,36,.72),rgba(7,18,38,.48));box-shadow:0 0 26px rgba(45,212,191,.08);backdrop-filter:blur(10px);}
.cinematic-seal-pill{display:inline-flex;align-items:center;gap:.45rem;color:#d7e4ff;font:700 .7rem/1 var(--font-mono,monospace);letter-spacing:.08em;text-transform:uppercase;}
.cinematic-seal-pill img{display:block;object-fit:cover;flex:0 0 auto;}
.cinematic-seal-pill:first-child img{width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.08);padding:1px;}
.cinematic-seal-pill:last-child img{width:24px;height:24px;border-radius:8px;background:rgba(255,255,255,.98);padding:2px;}
.cinematic-seal-pill em{font-style:normal;color:#e5f8ff;}
.cinematic-seal-divider{width:1px;height:20px;background:linear-gradient(180deg,transparent,rgba(99,244,229,.58),transparent);}
@media(max-width:860px){.cinematic-brandmark-logos{padding:.18rem .24rem;gap:.3rem}.cinematic-logo-node,.cinematic-logo-institutional{width:30px;height:30px}.cinematic-official-seals{gap:.48rem;padding:.34rem .62rem;margin-bottom:.45rem}.cinematic-seal-pill{font-size:.62rem;letter-spacing:.06em}.cinematic-seal-pill:first-child img,.cinematic-seal-pill:last-child img{width:20px;height:20px}}
@media(max-width:560px){.cinematic-brandmark-logos{padding:.12rem .18rem}.cinematic-official-seals{gap:.4rem;padding:.28rem .52rem;margin-bottom:.35rem}.cinematic-seal-pill em{display:none}.cinematic-seal-divider{height:16px}.cinematic-brandmark span{display:none}}


/* ============================================================
   ASSURANCE ODYSSEY — editorial timing and cinematic phase styling
   The narrative graphics remain behind a single protected text layer.
   The title is intentionally held until the final 32-second reveal.
   ============================================================ */
.cinematic-intro.is-national #cinematicBattleCanvas{opacity:.82!important;}
.cinematic-intro.is-city #cinematicBattleCanvas,.cinematic-intro.is-threat #cinematicBattleCanvas,.cinematic-intro.is-defence #cinematicBattleCanvas{opacity:.95!important;}
.cinematic-intro.is-prism #cinematicBattleCanvas,.cinematic-intro.is-lens #cinematicBattleCanvas,.cinematic-intro.is-constellation #cinematicBattleCanvas,.cinematic-intro.is-reveal #cinematicBattleCanvas,.cinematic-intro.is-ready #cinematicBattleCanvas{opacity:.98!important;}
.cinematic-intro.is-city .cinematic-door{opacity:.78!important;}
.cinematic-intro.is-threat .cinematic-door{opacity:.57!important;filter:brightness(.56)!important;}
.cinematic-intro.is-defence .cinematic-door{opacity:.43!important;filter:brightness(.49)!important;}
.cinematic-intro.is-prism .cinematic-door{opacity:.26!important;filter:brightness(.39)!important;}
.cinematic-intro.is-lens .cinematic-door{opacity:.18!important;filter:brightness(.33)!important;}
.cinematic-intro.is-constellation .cinematic-door,.cinematic-intro.is-reveal .cinematic-door,.cinematic-intro.is-ready .cinematic-door{opacity:.08!important;filter:brightness(.28)!important;}
.cinematic-intro:not(.is-story-reveal) .cinematic-content{opacity:0!important;pointer-events:none;filter:blur(8px)!important;transform:translate(calc(-50% + var(--ci-shift-x)),calc(-46% + var(--ci-shift-y))) scale(.98)!important;}
.cinematic-intro.is-story-reveal .cinematic-content{opacity:1!important;pointer-events:auto;filter:none!important;transform:translate(calc(-50% + var(--ci-shift-x)),calc(-50% + var(--ci-shift-y))) scale(1)!important;}
.cinematic-intro.is-story-reveal .cinematic-content::before{background:radial-gradient(ellipse at center,rgba(3,11,28,.97) 0%,rgba(5,16,35,.9) 48%,rgba(5,15,34,.46) 69%,rgba(5,15,34,0) 89%)!important;}
.cinematic-intro.is-reveal .cinematic-title-action strong,.cinematic-intro.is-ready .cinematic-title-action strong{animation:ciOdysseyCalligraphy 5.6s ease-in-out infinite!important;}
@keyframes ciOdysseyCalligraphy{0%,100%{filter:drop-shadow(0 0 16px rgba(86,226,215,.18));}50%{filter:drop-shadow(0 0 32px rgba(124,222,255,.42));}}
.cinematic-intro.is-reveal .cinematic-enter-btn,.cinematic-intro.is-ready .cinematic-enter-btn{animation:ciGatewayReady 1.7s ease-in-out infinite!important;}
.cinematic-intro.is-constellation::after,.cinematic-intro.is-reveal::after,.cinematic-intro.is-ready::after{opacity:.32!important;background:radial-gradient(ellipse at 50% 52%,rgba(75,226,207,.12),rgba(50,127,224,.05) 35%,transparent 68%)!important;}
@media(max-width:760px){
  .cinematic-intro.is-story-reveal .cinematic-content{transform:translate(calc(-50% + var(--ci-shift-x)),calc(-49% + var(--ci-shift-y))) scale(1)!important;}
}
@media(prefers-reduced-motion:reduce){
  .cinematic-intro:not(.is-story-reveal) .cinematic-content,.cinematic-intro.is-story-reveal .cinematic-content{opacity:1!important;filter:none!important;transform:translate(-50%,-50%)!important;}
  .cinematic-intro.is-reveal .cinematic-title-action strong,.cinematic-intro.is-ready .cinematic-title-action strong,.cinematic-intro.is-reveal .cinematic-enter-btn,.cinematic-intro.is-ready .cinematic-enter-btn{animation:none!important;}
}


/* === NEUTRAL NETWORK INTRO PASS === */
.cinematic-vulnerability-readout{display:flex;align-items:flex-start;gap:.42rem;min-height:1.75rem;padding-top:.18rem;color:#a9badd;font:700 .53rem/1.38 var(--font-mono,monospace);letter-spacing:.055em;text-transform:uppercase;transition:color .28s ease;}
.cinematic-vulnerability-readout i{margin-top:.06rem;color:#6cf1df;font-size:.72rem;filter:drop-shadow(0 0 7px rgba(86,241,222,.48));}
.cinematic-vulnerability-readout span{display:block;min-width:0;overflow-wrap:anywhere;}
.cinematic-vulnerability-readout.is-risk{color:#ffc3cc;}.cinematic-vulnerability-readout.is-risk i{color:#ff7084;animation:ciRiskPulse 1.15s ease-in-out infinite;}
.cinematic-vulnerability-readout.is-evidence{color:#ffe4ad;}.cinematic-vulnerability-readout.is-evidence i{color:#ffd483;}
.cinematic-vulnerability-readout.is-audit{color:#bceaff;}.cinematic-vulnerability-readout.is-audit i{color:#8bc8ff;}
.cinematic-vulnerability-readout.is-assurance{color:#bbf7ea;}.cinematic-vulnerability-readout.is-assurance i{color:#7ef2df;}
@keyframes ciRiskPulse{50%{filter:drop-shadow(0 0 12px rgba(255,94,120,.98));transform:scale(1.17);}}
@media(max-width:820px){.cinematic-vulnerability-readout{font-size:.48rem;line-height:1.34;min-height:1.62rem;}.cinematic-vulnerability-readout i{font-size:.63rem;}}
@media(max-width:520px){.cinematic-vulnerability-readout{display:none;}}


/* Entity spotlight panel for Network Constellation */
.cinematic-entity-panel{position:absolute;z-index:9;top:7.95rem;right:1rem;width:min(340px,calc(100% - 2rem));padding:.9rem .95rem 1rem;border-radius:20px;border:1px solid rgba(120,188,255,.16);background:linear-gradient(180deg,rgba(7,18,39,.80),rgba(7,20,44,.54));box-shadow:0 18px 50px rgba(2,8,21,.35),inset 0 0 0 1px rgba(90,240,225,.05);backdrop-filter:blur(16px);opacity:0;transform:translateY(-12px) scale(.98);pointer-events:none;transition:opacity .28s ease,transform .28s ease,border-color .28s ease;overflow:hidden;}
.cinematic-entity-panel::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at top right,rgba(99,240,225,.12),transparent 36%),radial-gradient(circle at bottom left,rgba(255,130,146,.10),transparent 40%);pointer-events:none;}
.cinematic-intro.has-entity-active .cinematic-entity-panel{opacity:1;transform:translateY(0) scale(1);}
.cinematic-entity-eyebrow{position:relative;z-index:1;display:flex;align-items:center;gap:.45rem;color:#8ef4e7;font:700 .62rem/1 var(--font-mono,monospace);text-transform:uppercase;letter-spacing:.08em;}
.cinematic-entity-panel h3{position:relative;z-index:1;margin:.58rem 0 .18rem;color:#f4fbff;font:800 1.24rem/1.08 var(--font-sans,sans-serif);letter-spacing:-.02em;}
.cinematic-entity-sector{position:relative;z-index:1;margin:0 0 .85rem;color:#b8cae8;font-size:.82rem;line-height:1.45;}
.cinematic-entity-row{position:relative;z-index:1;display:grid;gap:.22rem;padding:.6rem .68rem;border-radius:14px;background:rgba(9,26,53,.56);border:1px solid rgba(130,176,245,.12);margin-top:.55rem;}
.cinematic-entity-row span{color:#7ef1df;font:700 .55rem/1.2 var(--font-mono,monospace);text-transform:uppercase;letter-spacing:.08em;}
.cinematic-entity-row strong{color:#eef6ff;font-size:.78rem;line-height:1.42;font-weight:700;}
@media(max-width:980px){.cinematic-entity-panel{top:auto;bottom:3.4rem;right:.9rem;width:min(320px,calc(100% - 1.8rem));}}
@media(max-width:760px){.cinematic-entity-panel{display:none;}}


/* Network Constellation recovery: keep the abstract network remains visible throughout the entry sequence. */
.cinematic-intro.is-national #cinematicBattleCanvas,.cinematic-intro.is-city #cinematicBattleCanvas,.cinematic-intro.is-threat #cinematicBattleCanvas{opacity:1!important;transition:opacity .35s ease;}
.cinematic-intro.is-national .cinematic-door-stage,.cinematic-intro.is-city .cinematic-door-stage{will-change:transform,opacity;}


/* smoother/faster door and integrated node zoom */
.cinematic-door-stage{transition:transform .22s ease-out!important;}
.cinematic-door{transition:transform 1.45s cubic-bezier(.22,.78,.24,1),opacity .65s ease,filter .9s ease!important;backface-visibility:hidden;}
.cinematic-lock{transition:transform .52s cubic-bezier(.4,0,.2,1),opacity .34s ease,filter .34s ease!important;}
.cinematic-intro.is-open .cinematic-door-left{transform:translate3d(-22%,0,0) rotateY(80deg)!important;filter:brightness(.64)!important;}
.cinematic-intro.is-open .cinematic-door-right{transform:translate3d(22%,0,0) rotateY(-80deg)!important;filter:brightness(.64)!important;}
.cinematic-entity-panel{display:none!important;}


/* v28 smoother and faster cinematic door opening */
.cinematic-door-stage{
  transform:translate3d(var(--ci-door-x),var(--ci-door-y),0) translateZ(0)!important;
  transition:transform .16s linear!important;
  will-change:transform,opacity;
  transform-style:preserve-3d;
}
.cinematic-door{
  transition:transform .92s cubic-bezier(.18,.84,.24,1), opacity .42s ease-out, filter .58s ease-out!important;
  will-change:transform,opacity,filter;
  backface-visibility:hidden;
  transform-style:preserve-3d;
}
.cinematic-lock{
  transition:transform .32s cubic-bezier(.22,.86,.28,1), opacity .26s ease-out, filter .26s ease-out!important;
  will-change:transform,opacity,filter;
}
.cinematic-intro.is-open .cinematic-door-left{
  transform:translate3d(-24%,0,0) rotateY(82deg)!important;
  filter:brightness(.60)!important;
}
.cinematic-intro.is-open .cinematic-door-right{
  transform:translate3d(24%,0,0) rotateY(-82deg)!important;
  filter:brightness(.60)!important;
}
@media (max-width: 860px){
  .cinematic-intro.is-open .cinematic-door-left{transform:translate3d(-16%,0,0) rotateY(82deg)!important;}
  .cinematic-intro.is-open .cinematic-door-right{transform:translate3d(16%,0,0) rotateY(-82deg)!important;}
}