/*
 * ClarityCommand Operations — shared CSS
 *
 * Extracted from per-lesson HTML files. All ten Operations lessons reference
 * this via <link rel="stylesheet" href="/operations-styles.css"> in their <head>.
 *
 * Editing this file changes the look of every Operations lesson at once.
 *
 * Source provenance: the ten lesson <style> blocks were byte-identical
 * (MD5 f81ab8d42384f1857c5a7a5bd8635660, 174,726 chars each) when this
 * file was extracted, so there was no canonical-version decision to make.
 *
 * v1.0 — May 2026
 */

:root {
    --ink: #0a0906; --ink2: #131109;
    --fog: #f5f3ef; --fog2: #edeae4; --fog3: #e5e1d9;
    --gold: #c49a2e; --gold2: #e0b840; --gold-pale: #f7f0e0; --gold-deep: #7a5a0a;
    --white: #fff; --muted: #6b6560; --border: #ddd9d2; --border2: #ccc6bc;
    --success-bg: #edf7f0; --success: #1a5c3a;
    --warn-bg: #fff9ec; --warn: #7a5000;
    --red-bg: #fdf1f0; --red: #8b1a1a;
    --shadow-sm: 0 4px 16px rgba(15,15,15,.06);
    --shadow: 0 12px 40px rgba(15,15,15,.10);
    --shadow-lg: 0 24px 70px rgba(15,15,15,.14);
    --r: 14px; --rl: 20px; --rxl: 26px;
    --dur: .22s; --ease: cubic-bezier(.4,0,.2,1);
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body { font-family: "DM Sans", Arial, sans-serif; background: var(--fog); color: var(--ink); line-height: 1.65; overflow-x: hidden; }
  a { text-decoration: none; color: inherit; }
  button { font-family: inherit; cursor: pointer; }

  /* -- ANIMATIONS -- */
  @keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
  @keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(196,154,46,.35); } 50% { box-shadow: 0 0 0 8px rgba(196,154,46,0); } }
  @keyframes waveform { 0%,100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
  @keyframes unlockPop { 0% { transform: scale(.85); opacity: 0; } 60% { transform: scale(1.05); } 100% { transform: scale(1); opacity: 1; } }
  @keyframes radarSweep { 0% { transform: rotate(0deg); opacity: .35; } 50% { opacity: .55; } 100% { transform: rotate(360deg); opacity: .35; } }
  @keyframes signalTick { 0% { transform: translateX(-110%); opacity: 0; } 8% { opacity: 1; } 50% { opacity: .9; } 92% { opacity: 1; } 100% { transform: translateX(110%); opacity: 0; } }
  @keyframes scanShimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
  @keyframes signalDetected { 0% { box-shadow: 0 0 0 0 rgba(196,154,46,.55), 0 0 0 0 rgba(196,154,46,.35); } 60% { box-shadow: 0 0 0 12px rgba(196,154,46,0), 0 0 0 24px rgba(196,154,46,0); } 100% { box-shadow: 0 0 0 0 rgba(196,154,46,0), 0 0 0 0 rgba(196,154,46,0); } }
  @keyframes observeBlink { 0%, 92%, 100% { opacity: 1; } 96% { opacity: .35; } }
  @keyframes incomingRing { 0% { transform: rotate(-6deg); } 8% { transform: rotate(6deg); } 16% { transform: rotate(-6deg); } 24% { transform: rotate(6deg); } 32%, 100% { transform: rotate(0deg); } }
  @keyframes dollarFlash { 0%, 100% { color: var(--gold); } 50% { color: var(--red); } }
  /* -- WAR ROOM ANIMATIONS -- */
  @keyframes scanLine { 0% { top: -2px; opacity: 0; } 5% { opacity: .25; } 95% { opacity: .15; } 100% { top: 100%; opacity: 0; } }
  @keyframes gridPulse { 0%,100% { opacity: .04; } 50% { opacity: .07; } }
  @keyframes threatBlink { 0%,94%,100% { opacity: 1; } 97% { opacity: 0; } }
  @keyframes statusTyping { from { width: 0; } to { width: 100%; } }
  @keyframes nodeUnlock { 0% { box-shadow: 0 0 0 0 rgba(196,154,46,.8); } 100% { box-shadow: 0 0 0 20px rgba(196,154,46,0); } }
  @keyframes goldGlow { 0%,100% { box-shadow: 0 0 12px rgba(196,154,46,.3), 0 0 30px rgba(196,154,46,.12); } 50% { box-shadow: 0 0 20px rgba(196,154,46,.55), 0 0 50px rgba(196,154,46,.25); } }
  @keyframes radarRing { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(2.2); opacity: 0; } }

  /* -- LAYOUT -- */
  .shell { display: grid; grid-template-columns: 270px 1fr; min-height: 100vh; }
  .main { padding: 36px; max-width: 1180px; width: 100%; margin: 0 auto; animation: fadeIn .5s var(--ease); }

  /* ═════ SIDEBAR ═════ */
  .sidebar { background: linear-gradient(180deg, #0a0906 0%, #0f0c08 40%, #12100b 100%); color: var(--white); padding: 0; position: sticky; top: 0; height: 100vh; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.1) transparent; display: flex; flex-direction: column; animation: fadeIn .5s var(--ease); border-right: 1px solid rgba(196,154,46,.08); }
  .sidebar::-webkit-scrollbar { width: 4px; }
  .sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 99px; }

  .sidebar-brand { padding: 28px 24px 24px; border-bottom: 2px solid rgba(196,154,46,.2); position: relative; overflow: visible; background: #0a0906; min-height: 110px; z-index: 1; }
  .sidebar-brand::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, var(--gold) 30%, var(--gold2) 50%, var(--gold) 70%, transparent 100%); animation: signalTick 9s ease-in-out infinite; pointer-events: none; }
  .brand-row { display: flex; gap: 13px; align-items: center; margin-bottom: 8px; overflow: visible; }
  .mark { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--gold); display: grid; place-items: center; color: var(--gold); font-family: "DM Serif Display", serif; font-weight: 700; font-size: 15px; transition: box-shadow var(--dur) var(--ease); flex-shrink: 0; position: relative; overflow: hidden; background: rgba(196,154,46,.08); }
  .mark:hover { animation: pulse 1.5s infinite; }
  .mark::after { content: ""; position: absolute; inset: -50%; background: conic-gradient(from 0deg, transparent 0deg, transparent 320deg, rgba(196,154,46,.5) 350deg, transparent 360deg); animation: radarSweep 6s linear infinite; pointer-events: none; opacity: .55; }
  .brand-name { font-family: "DM Serif Display", serif; font-size: 20px; font-weight: 400; letter-spacing: .3px; color: #ffffff; text-shadow: 0 1px 12px rgba(196,154,46,.4); line-height: 1.1; white-space: nowrap; overflow: visible; padding-right: 6px; }
  .brand-sub { font-size: 10px; color: var(--gold); letter-spacing: 2.5px; text-transform: uppercase; opacity: .8; }
  .back-link { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: rgba(255,255,255,.45); transition: color var(--dur); margin-top: 10px; letter-spacing: .3px; }
  .back-link:hover { color: var(--gold); }

  /* Language switcher (Phase 1: EN/ES, persistent via localStorage) */
  .lang-switcher { padding: 14px 20px 12px; border-top: 1px solid rgba(255,255,255,.06); background: rgba(255,255,255,.015); }
  .lang-switcher-label { font-size: 9px; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: 9px; font-weight: 900; }
  .lang-buttons { display: flex; gap: 6px; }
  .lang-btn { flex: 1; padding: 8px 6px; border-radius: 8px; border: 1px solid rgba(255,255,255,.08); background: transparent; color: rgba(255,255,255,.55); font-size: 11px; font-weight: 900; letter-spacing: .6px; text-transform: uppercase; cursor: pointer; transition: all var(--dur) var(--ease); white-space: nowrap; font-family: inherit; }
  .lang-btn:hover { color: rgba(255,255,255,.9); border-color: rgba(196,154,46,.35); }
  .lang-btn.active { background: var(--gold); color: var(--ink); border-color: var(--gold); }
  .lang-notice { font-size: 10px; color: rgba(255,255,255,.4); line-height: 1.4; font-style: italic; min-height: 1.2em; transition: opacity var(--dur); }
  .lang-notice.visible { opacity: 1; }
  .lang-notice.hidden { opacity: 0; }

  .status-panel { padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,.06); background: rgba(255,255,255,.025); }
  .status-label { font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,.32); margin-bottom: 10px; }
  .status-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; font-size: 12px; }
  .status-key { color: rgba(255,255,255,.45); }
  .status-val { color: var(--white); font-weight: 700; font-size: 11px; text-align: right; max-width: 130px; }
  .status-val.gold { color: var(--gold); }
  .status-val.active { color: #6fcf97; }
  .dot-pulse { width: 7px; height: 7px; border-radius: 50%; background: #6fcf97; display: inline-block; margin-right: 5px; animation: pulse 2s infinite; }

  .observer-panel { padding: 14px 20px; border-bottom: 1px solid rgba(255,255,255,.06); background: linear-gradient(180deg, rgba(111,207,151,.04), rgba(255,255,255,.015)); }
  .observer-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .observer-left { display: flex; align-items: center; gap: 9px; }
  .observer-dot { width: 8px; height: 8px; border-radius: 50%; background: #6fcf97; box-shadow: 0 0 8px rgba(111,207,151,.7), 0 0 16px rgba(111,207,151,.35); animation: observeBlink 4s ease-in-out infinite; flex-shrink: 0; }
  .observer-title { font-size: 9px; letter-spacing: 2.2px; text-transform: uppercase; color: rgba(255,255,255,.42); font-weight: 900; }
  .observer-status { font-size: 10px; font-weight: 900; letter-spacing: 1.2px; color: #6fcf97; text-transform: uppercase; }
  .observer-tagline { font-family: "DM Serif Display", serif; font-style: italic; font-size: 12px; line-height: 1.45; color: rgba(255,255,255,.65); margin-top: 8px; }

  .victory-mini { padding: 14px 20px; border-bottom: 1px solid rgba(255,255,255,.06); }
  .vm-row { display: flex; justify-content: space-between; align-items: center; }
  .vm-count { font-family: "DM Serif Display", serif; font-size: 22px; color: var(--gold); }
  .vm-label { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,.4); }

  .timeline-mini { padding: 14px 20px; border-bottom: 1px solid rgba(255,255,255,.06); }
  .tm-mini-label { font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,.3); margin-bottom: 10px; }
  .tm-mini-track { display: flex; gap: 3px; align-items: center; }
  .tm-mini-seg { flex: 1; height: 4px; border-radius: 99px; background: rgba(255,255,255,.1); transition: background var(--dur); position: relative; }
  .tm-mini-seg.done { background: var(--gold); }
  .tm-mini-seg.current { background: var(--gold); animation: pulse 2s infinite; }
  .tm-mini-seg.signal { animation: signalDetected 1.6s ease-out 1; }
  .tm-mini-caption { font-size: 11px; color: rgba(255,255,255,.5); margin-top: 8px; }
  .tm-mini-caption strong { color: var(--gold); }

  /* OPS HEALTH PANEL — replaces strategic state pill for Operations */
  .ops-health { padding: 14px 20px; border-bottom: 1px solid rgba(255,255,255,.06); }
  .oh-label { font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,.3); margin-bottom: 10px; }
  .oh-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .oh-cell { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); border-radius: 8px; padding: 7px 9px; }
  .oh-cell small { font-size: 8px; letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,.4); display: block; margin-bottom: 3px; }
  .oh-cell strong { font-family: "DM Serif Display", serif; font-size: 13px; color: var(--gold); font-weight: 400; }
  .oh-cell.green strong { color: #6fcf97; }
  .oh-cell.amber strong { color: var(--gold); }
  .oh-cell.red strong { color: #ff9d9d; }

  .progress-section { padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,.06); }
  .progress-header { display: flex; justify-content: space-between; font-size: 11px; color: rgba(255,255,255,.45); margin-bottom: 9px; }
  .progress-header strong { color: var(--gold); }
  .prog-bar { height: 6px; background: rgba(255,255,255,.09); border-radius: 99px; overflow: hidden; margin-bottom: 14px; }
  .prog-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--gold), var(--gold2)); width: 0%; transition: width .6s var(--ease); }
  .lesson-steps { display: grid; gap: 3px; }
  .lstep { display: flex; align-items: center; gap: 8px; padding: 6px 9px; border-radius: 9px; font-size: 11px; color: rgba(255,255,255,.5); cursor: pointer; transition: background var(--dur), color var(--dur), transform var(--dur); }
  .lstep:hover { background: rgba(255,255,255,.05); color: rgba(255,255,255,.85); transform: translateX(2px); }
  .lstep.active { background: rgba(184,146,42,.14); color: var(--gold); }
  .lstep.done .lnum { background: var(--success); border-color: var(--success); color: var(--white); }
  .lnum { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.2); display: grid; place-items: center; font-size: 9px; font-weight: 900; flex-shrink: 0; transition: background var(--dur), border-color var(--dur); }
  .lstep.active .lnum { background: var(--gold); border-color: var(--gold); color: var(--ink); }

  .pattern-section { padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,.06); }
  .pattern-card { background: rgba(184,146,42,.09); border: 1px solid rgba(184,146,42,.18); border-radius: 12px; padding: 13px; }
  .pattern-title { font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,.4); margin-bottom: 6px; }
  .pattern-name { font-family: "DM Serif Display", serif; font-size: 17px; color: var(--gold); margin-bottom: 4px; font-style: italic; }
  .pattern-desc { font-size: 11px; color: rgba(255,255,255,.5); line-height: 1.55; }

  .reset-section { padding: 14px 20px; border-bottom: 1px solid rgba(255,255,255,.06); }
  .reset-card { background: rgba(255,255,255,.04); border-radius: 12px; padding: 13px; border-left: 3px solid var(--gold); cursor: pointer; transition: background var(--dur); }
  .reset-card:hover { background: rgba(255,255,255,.07); }
  .reset-quote { font-family: "DM Serif Display", serif; font-style: italic; font-size: 13px; color: rgba(255,255,255,.78); line-height: 1.55; transition: opacity .2s ease, transform .2s ease; }
  .reset-meta { font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,.3); margin-top: 7px; }
  .reset-arrow { float: right; color: rgba(255,255,255,.28); font-size: 14px; margin-top: -2px; transition: transform var(--dur); }
  .reset-card:hover .reset-arrow { transform: translateX(3px); color: var(--gold); }

  /* SIDEBAR GROUP HEADERS */
  .sidebar-group-header { padding: 10px 20px 5px; font-size: 8px; letter-spacing: 3px; text-transform: uppercase; color: rgba(255,255,255,.2); display: flex; align-items: center; gap: 8px; }
  .sidebar-group-header::before { content: ""; flex: 0 0 16px; height: 1px; background: rgba(255,255,255,.1); }
  .sidebar-group-header::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,.1); }

  /* THREAT DETECTION FLAGS */
  .threat-strip { padding: 12px 20px; border-bottom: 1px solid rgba(255,255,255,.06); background: rgba(139,26,26,.06); }
  .threat-strip-label { font-size: 8px; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(255,100,100,.5); margin-bottom: 8px; display: flex; align-items: center; gap: 5px; }
  .threat-strip-label::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #ff6b6b; animation: threatBlink 3s ease-in-out infinite; flex-shrink: 0; }
  .threat-item { font-size: 10px; color: rgba(255,180,180,.8); padding: 4px 0; display: flex; align-items: flex-start; gap: 6px; line-height: 1.4; }
  .threat-item::before { content: "⚠"; font-size: 9px; flex-shrink: 0; margin-top: 1px; }

  /* MISSION BRIEF BLOCK */
  .mission-brief { background: linear-gradient(135deg, rgba(196,154,46,.08) 0%, rgba(196,154,46,.03) 100%); border: 1px solid rgba(196,154,46,.2); border-radius: var(--rl); padding: 20px 24px; margin-bottom: 18px; position: relative; overflow: hidden; }
  .mission-brief::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
  .mission-brief small { font-size: 9px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--gold); font-weight: 900; display: block; margin-bottom: 8px; }
  .mission-brief h3 { font-family: "DM Serif Display", serif; font-size: 22px; font-weight: 400; margin-bottom: 10px; line-height: 1.2; }
  .mission-brief p { font-size: 14px; color: #3d3935; line-height: 1.7; margin: 0; }

  .map-section { padding: 14px 20px; }
  .map-label { font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,.3); margin-bottom: 10px; }
  .track-map { display: flex; flex-direction: column; gap: 4px; }
  .track-node { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 9px; font-size: 11px; color: rgba(255,255,255,.32); transition: all var(--dur); }
  .track-node.current { background: rgba(196,154,46,.12); color: var(--white); border: 1px solid rgba(196,154,46,.25); }
  .track-node-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.15); flex-shrink: 0; }
  .track-node.current .track-node-dot { background: var(--gold); animation: pulse 2s infinite; }
  .track-node.locked { opacity: .38; }
  .track-node.done { opacity: 1; background: rgba(196,154,46,.07); border: 1px solid rgba(196,154,46,.18); color: rgba(255,255,255,.75); border-radius: 9px; animation: goldGlow 4s ease-in-out infinite; }
  .track-node.done .track-node-dot { background: var(--gold); box-shadow: 0 0 6px rgba(196,154,46,.8); }
  .track-node.done::after { content: " ✓"; font-size: 9px; color: var(--gold); margin-left: auto; }
  .track-connector { width: 1px; height: 8px; background: rgba(255,255,255,.08); margin-left: 12px; }

  .portal-cta { margin: 16px; border-radius: 12px; background: var(--gold); color: var(--ink); padding: 13px 16px; text-align: center; font-weight: 900; font-size: 11px; text-transform: uppercase; letter-spacing: .8px; transition: background var(--dur), transform var(--dur), box-shadow var(--dur); display: block; }
  .portal-cta:hover { background: var(--gold2); transform: translateY(-1px); box-shadow: 0 8px 24px rgba(184,146,42,.35); }
  .portal-cta:active { transform: scale(.98); }

  /* TOP PORTAL CTA */
  .portal-cta-top { display: block; margin: 0; padding: 12px 20px; background: linear-gradient(135deg, rgba(196,154,46,.18), rgba(196,154,46,.08)); border-bottom: 2px solid rgba(196,154,46,.3); border-top: 1px solid rgba(196,154,46,.1); text-decoration: none; transition: background var(--dur); }
  .portal-cta-top:hover { background: linear-gradient(135deg, rgba(196,154,46,.28), rgba(196,154,46,.14)); }
  .pct-eyebrow { font-size: 8px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--gold); font-weight: 900; margin-bottom: 3px; }
  .pct-label { font-size: 12px; font-weight: 900; color: #ffffff; letter-spacing: .3px; }

  /* ═════ PILL / EYEBROW ═════ */
  .pill { display: inline-flex; background: var(--gold-pale); border: 1px solid #e8d5a3; color: #725104; border-radius: 999px; padding: 8px 14px; font-size: 11px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 18px; animation: fadeUp .5s var(--ease); }

  /* ═════ HERO — WAR ROOM BRIEFING ═════ */
  .hero { background: linear-gradient(135deg, var(--ink) 0%, #14110d 60%, #1a1509 100%); border: 1px solid rgba(196,154,46,.15); border-radius: var(--rxl); padding: 48px; box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(196,154,46,.08); margin-bottom: 22px; position: relative; overflow: hidden; animation: fadeUp .6s var(--ease); color: var(--white); }
  /* grid overlay */
  .hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(196,154,46,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(196,154,46,.04) 1px, transparent 1px); background-size: 40px 40px; pointer-events: none; animation: gridPulse 6s ease-in-out infinite; }
  /* scan line */
  .hero::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent 0%, rgba(196,154,46,.4) 30%, rgba(196,154,46,.6) 50%, rgba(196,154,46,.4) 70%, transparent 100%); animation: scanLine 8s ease-in-out infinite; pointer-events: none; z-index: 2; }
  .hero-inner { position: relative; z-index: 3; max-width: 820px; }
  .hero-status-bar { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; }
  .hero-status-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 9px; letter-spacing: 2.5px; text-transform: uppercase; color: #6fcf97; font-weight: 900; }
  .hero-status-dot { width: 6px; height: 6px; border-radius: 50%; background: #6fcf97; animation: observeBlink 3s ease-in-out infinite; flex-shrink: 0; }
  .hero-status-div { width: 1px; height: 12px; background: rgba(255,255,255,.15); }
  .hero-coord { font-size: 9px; letter-spacing: 1.5px; color: rgba(255,255,255,.3); font-family: monospace; }
  .eyebrow { font-size: 10px; color: var(--gold); font-weight: 900; text-transform: uppercase; letter-spacing: 3px; margin-bottom: 14px; }
  .hero h1, .hero h2 { font-family: "DM Serif Display", Georgia, serif; font-size: clamp(40px, 5.5vw, 68px); line-height: 1.0; font-weight: 400; letter-spacing: -1.5px; margin-bottom: 22px; color: var(--white); }
  .hero h1 em, .hero h2 em { font-style: italic; color: var(--gold); }
  .hero-threat-list { margin: 18px 0; display: grid; gap: 6px; }
  .hero-threat-item { display: flex; align-items: center; gap: 10px; font-size: 13px; color: rgba(255,255,255,.65); font-family: monospace; letter-spacing: .3px; }
  .hero-threat-marker { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
  .hero-threat-marker.red { background: #ff6b6b; animation: threatBlink 2s ease-in-out infinite; }
  .hero-threat-marker.gold { background: var(--gold); animation: threatBlink 3s ease-in-out infinite; }
  .hero-threat-marker.green { background: #6fcf97; }
  .hero-cta-label { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,.35); margin: 20px 0 10px; }
  .lead { font-size: 16px; color: rgba(255,255,255,.6); line-height: 1.8; max-width: 760px; }
  .actions { display: flex; gap: 11px; flex-wrap: wrap; margin-top: 22px; }
  .btn { border: none; border-radius: 12px; padding: 13px 18px; font-weight: 900; font-size: 12px; text-transform: uppercase; letter-spacing: .7px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; transition: opacity .15s, transform var(--dur); text-decoration: none; }
  .btn:hover { opacity: .9; transform: translateY(-1px); }
  .btn.dark { background: rgba(255,255,255,.1); color: white; border: 1px solid rgba(255,255,255,.15); }
  .btn.gold { background: var(--gold); color: var(--ink); }
  .btn.light { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.7); }

  /* ═════ METRICS ═════ */
  .metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 22px; }
  .metric { background: var(--white); border: 1px solid var(--border); border-radius: 16px; padding: 16px; transition: transform var(--dur), box-shadow var(--dur); }
  .metric:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
  .metric small { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 1.6px; }
  .metric strong { display: block; font-family: "DM Serif Display", Georgia, serif; font-size: 22px; font-weight: 400; margin-top: 5px; color: var(--ink); }

  /* ═════ TAB BAR ═════ */
  .tab-bar { display: flex; gap: 4px; margin-bottom: 24px; background: var(--white); border: 1px solid var(--border); border-radius: 16px; padding: 6px; flex-wrap: nowrap; overflow-x: auto; overflow-y: visible; scrollbar-width: none; -ms-overflow-style: none; position: relative; z-index: 30; }
  .tab-bar::-webkit-scrollbar { display: none; }
  .tab { padding: 9px 13px; border-radius: 11px; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); cursor: pointer; transition: all .2s; white-space: nowrap; border: none; background: transparent; flex-shrink: 0; }
  .tab:hover { color: var(--ink); background: var(--fog); }
  .tab.active { background: var(--ink); color: var(--gold); }

  /* ═════ PANEL ═════ */
  .lesson-panel { display: none; animation: fadeUp .4s var(--ease); }
  .lesson-panel.active { display: block; }

  /* ═════ CARDS ═════ */
  .card { background: var(--white); border: 1px solid var(--border); border-radius: var(--rl); padding: 28px; margin-bottom: 18px; box-shadow: var(--shadow-sm); }
  .section-label { display: inline-flex; background: var(--ink); color: var(--gold); border-radius: 999px; padding: 7px 12px; font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px; font-weight: 900; margin-bottom: 14px; }
  .card h2 { font-family: "DM Serif Display", Georgia, serif; font-size: 30px; font-weight: 400; line-height: 1.15; margin-bottom: 12px; }
  .card h3 { font-family: "DM Serif Display", Georgia, serif; font-size: 22px; font-weight: 400; line-height: 1.2; margin: 22px 0 10px; }
  .card p { margin-bottom: 13px; color: #3d3935; }

  /* ═════ QUOTE ═════ */
  .quote { border-left: 4px solid var(--gold); background: var(--gold-pale); padding: 18px 20px; border-radius: 0 12px 12px 0; font-family: "DM Serif Display", Georgia, serif; font-size: 19px; line-height: 1.6; color: var(--ink); margin: 16px 0; font-style: italic; }
  .quote-attr { font-size: 11px; letter-spacing: .6px; text-transform: none; color: var(--gold); font-weight: 700; font-style: normal; margin-top: 10px; display: block; font-family: "DM Sans", sans-serif; }

  /* ═════ CONTENT GRID ═════ */
  .content-grid { display: grid; grid-template-columns: 1fr 320px; gap: 20px; align-items: start; }
  .side-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--rl); padding: 22px; box-shadow: var(--shadow-sm); position: sticky; top: 24px; transition: box-shadow var(--dur); }
  .side-card:hover { box-shadow: var(--shadow); }
  .score-mini { border: 1px solid var(--border); background: var(--fog); border-radius: var(--r); padding: 16px; text-align: center; margin-bottom: 14px; transition: all var(--dur); }
  .score-mini:hover { border-color: var(--gold); background: var(--gold-pale); }
  .score-mini small { display: block; text-transform: uppercase; letter-spacing: .8px; color: var(--muted); font-size: 10px; margin-bottom: 6px; }
  .score-number { font-family: "DM Serif Display", Georgia, serif; font-size: 44px; line-height: 1; color: var(--gold); }
  .score-note { font-size: 11px; color: var(--muted); margin-top: 6px; }
  .mini-list { list-style: none; margin-top: 12px; }
  .mini-list li { display: flex; justify-content: space-between; border-bottom: 1px solid var(--fog2); padding: 10px 0; font-size: 13px; color: var(--muted); gap: 10px; }
  .mini-list li:last-child { border-bottom: none; }
  .mini-list strong { color: var(--ink); }

  /* ═════ SYSTEM STRIP ═════ */
  .system-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
  .sys-card { background: var(--white); border: 1px solid var(--border); border-radius: 14px; padding: 15px; transition: transform var(--dur); }
  .sys-card:hover { transform: translateY(-2px); border-color: var(--gold); }
  .sys-card small { display: block; font-size: 10px; letter-spacing: .8px; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
  .sys-card strong { font-family: "DM Serif Display", Georgia, serif; font-size: 16px; font-weight: 400; color: var(--ink); }

  /* ═════ STATUS BOXES ═════ */
  .truth-box { background: var(--success-bg); border: 1px solid #b4d4b4; color: var(--success); border-radius: var(--r); padding: 14px 16px; margin: 15px 0; font-weight: 700; font-size: 14px; display: flex; gap: 10px; align-items: flex-start; }
  .warn-box { background: var(--warn-bg); border: 1px solid #ead49a; border-radius: var(--r); padding: 14px 16px; margin: 15px 0; color: var(--warn); font-size: 14px; }
  .warn-box strong { color: #3d2c00; }
  .danger-box { background: var(--red-bg); border: 1px solid #e8b4b4; border-radius: var(--r); padding: 14px 16px; margin: 15px 0; color: var(--red); font-size: 14px; }
  .danger-box strong { color: #6a0a0a; }
  .ink-box { background: var(--ink); color: white; border-radius: var(--r); padding: 16px 18px; margin: 15px 0; }
  .ink-box strong { color: var(--gold); }
  .ink-box p { color: rgba(255,255,255,.78); margin: 6px 0 0; font-size: 14px; }

  /* ═════ COMPARE / DO-DONT ═════ */
  .compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0; }
  .compare-card { background: var(--fog); border: 1px solid var(--border); border-radius: var(--r); padding: 16px; }
  .cc-label { display: inline-flex; background: var(--ink); color: var(--gold); border-radius: 999px; padding: 5px 10px; font-size: 10px; text-transform: uppercase; letter-spacing: 1.2px; font-weight: 900; margin-bottom: 10px; }
  .compare-card h4 { font-family: "DM Serif Display", Georgia, serif; font-size: 18px; font-weight: 400; margin-bottom: 8px; }
  .compare-card p { font-size: 13px; color: var(--muted); margin: 0; }
  .do-dont { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0; }
  .do-card { background: var(--success-bg); border: 1px solid #b4d4b4; border-radius: var(--r); padding: 16px; }
  .do-card h4 { font-family: "DM Serif Display", Georgia, serif; font-size: 17px; font-weight: 400; color: var(--success); margin-bottom: 8px; }
  .dont-card { background: var(--red-bg); border: 1px solid #e8b4b4; border-radius: var(--r); padding: 16px; }
  .dont-card h4 { font-family: "DM Serif Display", Georgia, serif; font-size: 17px; font-weight: 400; color: var(--red); margin-bottom: 8px; }
  .do-card ul, .dont-card ul { list-style: none; font-size: 13px; }
  .do-card ul li { padding: 5px 0; border-bottom: 1px solid rgba(26,92,58,.12); color: #1a3a28; }
  .dont-card ul li { padding: 5px 0; border-bottom: 1px solid rgba(139,26,26,.12); color: #5a0000; }
  .do-card ul li:last-child, .dont-card ul li:last-child { border-bottom: none; }

  /* ═════ STEP LIST ═════ */
  .step-list { display: grid; gap: 10px; margin: 14px 0; }
  .step-item { background: var(--fog); border: 1px solid var(--border); border-radius: var(--r); padding: 16px; display: grid; grid-template-columns: 38px 1fr; gap: 14px; align-items: start; }
  .step-num { width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: var(--gold); display: grid; place-items: center; font-weight: 900; font-size: 14px; flex-shrink: 0; }
  .step-item strong { display: block; font-family: "DM Serif Display", serif; font-size: 17px; font-weight: 400; margin-bottom: 4px; }
  .step-item .tr { display: block; color: var(--gold); font-size: 11px; text-transform: none; letter-spacing: .2px; font-weight: 700; margin-bottom: 6px; font-style: italic; }
  .step-item span { font-size: 13px; color: var(--muted); line-height: 1.6; }

  /* ═════ AUDIO ═════ */
  .audio-card { background: var(--ink); border-radius: var(--rl); padding: 20px 22px; margin: 0 0 20px; display: flex; align-items: center; gap: 18px; transition: all var(--dur); cursor: pointer; position: relative; overflow: hidden; }
  .audio-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(184,146,42,.1) 0%, transparent 60%); pointer-events: none; }
  .audio-card.playing::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(184,146,42,.08) 50%, transparent 100%); background-size: 200% 100%; animation: scanShimmer 5s linear infinite; pointer-events: none; z-index: 0; }
  .audio-play-btn { width: 48px; height: 48px; border-radius: 50%; background: var(--gold); border: none; display: grid; place-items: center; flex-shrink: 0; cursor: pointer; transition: all var(--dur); position: relative; font-size: 17px; color: var(--ink); z-index: 1; }
  .audio-play-btn:hover { background: var(--gold2); transform: scale(1.08); }
  .audio-info { flex: 1; position: relative; z-index: 1; }
  .audio-tag { font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,.4); margin-bottom: 4px; }
  .audio-title { color: var(--white); font-weight: 700; font-size: 14px; margin-bottom: 6px; }
  .audio-duration { font-size: 11px; color: rgba(255,255,255,.5); }
  .waveform { display: flex; gap: 2.5px; align-items: center; height: 28px; position: relative; z-index: 1; }
  .wave-bar { width: 3px; border-radius: 99px; background: rgba(255,255,255,.22); transition: background var(--dur); }
  .audio-card.playing .wave-bar { background: var(--gold); animation: waveform .8s ease-in-out infinite; }
  .wave-bar:nth-child(1) { height: 40%; animation-delay: 0s; }
  .wave-bar:nth-child(2) { height: 70%; animation-delay: .1s; }
  .wave-bar:nth-child(3) { height: 55%; animation-delay: .2s; }
  .wave-bar:nth-child(4) { height: 90%; animation-delay: .05s; }
  .wave-bar:nth-child(5) { height: 65%; animation-delay: .15s; }
  .wave-bar:nth-child(6) { height: 45%; animation-delay: .25s; }
  .wave-bar:nth-child(7) { height: 80%; animation-delay: .08s; }
  .wave-bar:nth-child(8) { height: 55%; animation-delay: .18s; }
  .wave-bar:nth-child(9) { height: 35%; animation-delay: .12s; }
  .wave-bar:nth-child(10) { height: 70%; animation-delay: .22s; }
  .audio-pause-prompt { background: var(--gold-pale); border: 1px solid #e8d5a3; border-left: 4px solid var(--gold); border-radius: 0 var(--r) var(--r) 0; padding: 18px 22px; margin: 16px 0; display: none; animation: fadeUp .5s var(--ease); }
  .audio-pause-prompt.show { display: block; }
  .app-eyebrow { color: var(--gold-deep); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; font-weight: 900; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
  .app-eyebrow::before { content: "⏸"; }
  .audio-pause-prompt h4 { font-family: "DM Serif Display", serif; font-size: 19px; font-weight: 400; color: var(--ink); margin-bottom: 10px; font-style: italic; line-height: 1.4; }
  .audio-pause-prompt p { color: #3b3327; font-size: 14px; line-height: 1.7; margin: 0; }
  .audio-pause-prompt .app-actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
  .app-btn { background: none; border: 1px solid var(--gold); color: var(--gold-deep); padding: 8px 14px; border-radius: 8px; font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .8px; cursor: pointer; transition: all var(--dur); font-family: inherit; }
  .app-btn:hover { background: var(--gold); color: var(--ink); }
  .app-btn.dark { background: var(--ink); border-color: var(--ink); color: white; }
  .app-btn.dark:hover { background: var(--ink2); }

  /* ═════ WORKSHEET ═════ */
  .worksheet { background: var(--fog); border: 1px solid var(--border); border-radius: var(--rl); padding: 22px; margin: 12px 0 14px; }
  .worksheet-title { display: flex; justify-content: space-between; gap: 12px; align-items: center; border-bottom: 1px solid var(--border); padding-bottom: 13px; margin-bottom: 17px; flex-wrap: wrap; }
  .worksheet-title h3 { margin: 0; font-family: "DM Serif Display", Georgia, serif; font-size: 20px; font-weight: 400; }
  .save-badge { background: var(--gold); color: var(--ink); font-size: 10px; text-transform: uppercase; letter-spacing: 1px; font-weight: 900; padding: 6px 10px; border-radius: 999px; white-space: nowrap; }
  .field-group { background: var(--white); border: 1px solid var(--border); border-radius: var(--r); padding: 14px; margin-bottom: 11px; transition: border-color var(--dur), box-shadow var(--dur); }
  .field-group:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(184,146,42,.1); }
  .field-group label { display: block; font-size: 12px; text-transform: none; letter-spacing: .2px; color: var(--muted); font-weight: 700; margin-bottom: 8px; }
  .input-field { width: 100%; height: 42px; border: 1px dashed #c6bcae; background: #fbfaf7; border-radius: 10px; font-family: inherit; font-size: 14px; color: var(--ink); padding: 0 12px; transition: border-color var(--dur), background var(--dur); outline: none; }
  .input-field:focus { border-color: var(--gold); background: var(--gold-pale); }
  .textarea-field { width: 100%; min-height: 80px; border: 1px dashed #c6bcae; background: #fbfaf7; border-radius: 10px; font-family: inherit; font-size: 14px; color: var(--ink); padding: 10px 12px; transition: border-color var(--dur), background var(--dur); outline: none; resize: vertical; line-height: 1.6; }
  .textarea-field:focus { border-color: var(--gold); background: var(--gold-pale); }
  .checkbox-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .check-option { background: var(--white); border: 1.5px solid var(--border); border-radius: 10px; padding: 11px 13px; font-size: 13px; color: #3d3935; cursor: pointer; transition: all var(--dur); display: flex; align-items: center; gap: 8px; user-select: none; }
  .check-option:hover { border-color: var(--gold); background: var(--gold-pale); color: var(--gold-deep); }
  .check-option.selected { border-color: var(--gold); background: var(--gold-pale); color: var(--gold-deep); font-weight: 700; }
  .check-option.selected::before { content: "✓"; font-weight: 900; color: var(--gold); }
  .save-reflection-btn { display: flex; align-items: center; gap: 10px; background: none; border: 1px solid var(--border); border-radius: var(--r); padding: 12px 16px; font-size: 13px; color: var(--muted); transition: all var(--dur); width: 100%; margin-top: 12px; font-family: inherit; justify-content: center; }
  .save-reflection-btn:hover { border-color: var(--gold); color: var(--gold-deep); background: var(--gold-pale); }
  .save-reflection-btn.saved { background: var(--success-bg); border-color: #b4d4b4; color: var(--success); }

  /* ═════ PORTAL ═════ */
  .portal-panel { background: var(--ink); color: var(--white); border-radius: var(--rl); padding: 26px; margin-top: 18px; }
  .portal-panel h2 { font-family: "DM Serif Display", Georgia, serif; font-size: 28px; font-weight: 400; color: var(--white); margin-bottom: 8px; }
  .portal-panel > p { color: rgba(255,255,255,.65); margin-bottom: 0; font-size: 15px; }
  .portal-steps { display: grid; gap: 10px; margin-top: 14px; }
  .portal-step { display: flex; gap: 12px; align-items: flex-start; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.07); border-radius: var(--r); padding: 14px; transition: all var(--dur); }
  .portal-step:hover { background: rgba(255,255,255,.08); border-color: rgba(184,146,42,.25); }
  .ps-num { width: 28px; height: 28px; border-radius: 50%; background: var(--gold); color: var(--ink); display: grid; place-items: center; font-weight: 900; flex-shrink: 0; font-size: 12px; }
  .portal-step strong { color: var(--white); display: block; margin-bottom: 3px; }
  .portal-step p { color: rgba(255,255,255,.6); margin: 0; font-size: 13px; }

  /* ═════ MILESTONE / RESET / NEXT-LESSON ═════ */
  .milestone { background: var(--ink); border: 1px solid rgba(184,146,42,.3); border-radius: var(--rl); padding: 26px; margin: 20px 0; text-align: center; position: relative; overflow: hidden; }
  .milestone-glow { position: absolute; inset: 0; background: radial-gradient(circle at 50% 30%, rgba(184,146,42,.12), transparent 65%); pointer-events: none; }
  .milestone-badge { display: inline-flex; align-items: center; gap: 7px; background: rgba(184,146,42,.15); border: 1px solid rgba(184,146,42,.3); border-radius: 99px; padding: 8px 14px; margin-bottom: 14px; font-size: 11px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; color: var(--gold); position: relative; z-index: 1; }
  .milestone h3 { font-family: "DM Serif Display", Georgia, serif; font-size: 24px; font-weight: 400; color: var(--white); margin-bottom: 8px; line-height: 1.2; position: relative; z-index: 1; }
  .milestone p { color: rgba(255,255,255,.65); font-size: 14px; max-width: 460px; margin: 0 auto; position: relative; z-index: 1; }
  .milestone.show { animation: unlockPop .6s var(--ease) both; }
  .identity-reset { background: var(--gold-pale); border: 1px solid #e8d5a3; border-radius: var(--rl); padding: 30px; margin-top: 18px; text-align: center; position: relative; overflow: hidden; }
  .ir-orb { position: absolute; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, rgba(184,146,42,.13), transparent); right: -80px; bottom: -80px; pointer-events: none; }
  .identity-reset h2 { font-family: "DM Serif Display", Georgia, serif; font-size: 28px; font-weight: 400; margin-bottom: 10px; color: var(--ink); position: relative; z-index: 1; }
  .identity-reset > p { color: #3b3327; font-size: 15px; position: relative; z-index: 1; }
  .reset-lines { display: grid; gap: 8px; margin-top: 14px; max-width: 520px; margin-left: auto; margin-right: auto; position: relative; z-index: 1; }
  .reset-line { background: var(--white); border: 1px solid #eadfc8; border-radius: 999px; padding: 11px 18px; font-weight: 700; color: #33281a; font-size: 14px; transition: all var(--dur); }
  .reset-line:hover { background: #fff8e6; border-color: #d4a83c; transform: scale(1.01); }
  .next-lesson-card { background: var(--ink); color: white; border-radius: var(--rl); padding: 24px; margin-top: 18px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; cursor: pointer; transition: all var(--dur); }
  .next-lesson-card:hover { background: var(--ink2); transform: translateY(-2px); box-shadow: var(--shadow); }
  .nl-eyebrow { color: rgba(255,255,255,.5); font-size: 10px; letter-spacing: .8px; text-transform: uppercase; margin-bottom: 6px; }
  .nl-title { font-family: "DM Serif Display", Georgia, serif; font-size: 21px; color: white; }

  /* ═════ DISCLAIMER ═════ */
  .disclaimer { font-size: 12px; color: var(--muted); background: white; border: 1px solid var(--border); border-radius: var(--r); padding: 16px; margin-top: 18px; line-height: 1.75; }
  .disclaimer strong { color: var(--ink); display: block; margin-bottom: 4px; }
  .disclaimer-v2 { background: var(--white); border: 1px solid var(--border); border-radius: var(--r); padding: 20px; margin-top: 18px; font-size: 12px; color: var(--muted); line-height: 1.75; }
  .disclaimer-v2 strong { color: var(--ink); display: block; margin-bottom: 6px; font-size: 13px; }
  .disclaimer-v2 .scope-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 12px 0; }
  .scope-pill { background: var(--fog); border: 1px solid var(--border); border-radius: 10px; padding: 10px; text-align: center; }
  .scope-pill.is { background: var(--success-bg); border-color: #b4d4b4; }
  .scope-pill.is-not { background: var(--red-bg); border-color: #e8b4b4; }
  .scope-pill small { font-size: 9px; letter-spacing: 1.2px; text-transform: uppercase; font-weight: 900; display: block; margin-bottom: 4px; }
  .scope-pill.is small { color: var(--success); }
  .scope-pill.is-not small { color: var(--red); }
  .scope-pill strong { font-family: "DM Serif Display", serif; font-size: 13px; font-weight: 400; margin: 0; }
  @media (max-width: 640px) { .disclaimer-v2 .scope-grid { grid-template-columns: 1fr 1fr; } }

  /* ═════ METHODOLOGY ═════ */
  .methodology-card { background: linear-gradient(135deg, var(--ink) 0%, #14110d 100%); border: 1px solid rgba(184,146,42,.25); border-radius: var(--rxl); padding: 32px 30px; margin: 22px 0; position: relative; overflow: hidden; color: var(--white); }
  .methodology-card::before { content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(184,146,42,.12), transparent 65%); right: -180px; top: -180px; pointer-events: none; }
  .methodology-card::after { content: ""; position: absolute; width: 280px; height: 280px; border-radius: 50%; border: 1px solid rgba(184,146,42,.08); right: -110px; top: -110px; pointer-events: none; }
  .meth-eyebrow { font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--gold); font-weight: 900; margin-bottom: 14px; display: inline-flex; align-items: center; gap: 8px; position: relative; z-index: 1; }
  .meth-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px rgba(184,146,42,.6); }
  .methodology-card h2 { font-family: "DM Serif Display", serif; font-size: clamp(28px, 4vw, 38px); font-weight: 400; line-height: 1.1; letter-spacing: -.5px; margin-bottom: 8px; color: var(--white); position: relative; z-index: 1; }
  .meth-tm { font-size: 14px; color: var(--gold); font-weight: 900; vertical-align: super; margin-left: 2px; }
  .meth-sub { font-family: "DM Serif Display", serif; font-style: italic; font-size: 16px; color: rgba(255,255,255,.7); margin-bottom: 18px; position: relative; z-index: 1; }
  .meth-body { color: rgba(255,255,255,.78); font-size: 14px; line-height: 1.7; max-width: 680px; position: relative; z-index: 1; }
  .meth-body strong { color: var(--gold); }
  .meth-pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 20px; position: relative; z-index: 1; }
  .meth-pillar { background: rgba(255,255,255,.04); border: 1px solid rgba(184,146,42,.18); border-radius: var(--r); padding: 14px; }
  .meth-pillar-num { font-family: "DM Serif Display", serif; font-size: 22px; color: var(--gold); line-height: 1; margin-bottom: 6px; }
  .meth-pillar-name { font-family: "DM Serif Display", serif; font-size: 14px; color: var(--white); font-weight: 400; margin-bottom: 4px; }
  .meth-pillar-desc { font-size: 11px; color: rgba(255,255,255,.55); line-height: 1.5; }
  @media (max-width: 760px) { .meth-pillars { grid-template-columns: repeat(2, 1fr); } }

  /* MASTER BRAND CALLOUT */
  .master-brand-callout { background: rgba(255,255,255,.04); border: 1px solid rgba(184,146,42,.18); border-radius: var(--r); padding: 14px 16px; margin-top: 16px; position: relative; z-index: 1; }
  .mbc-eyebrow { font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,.4); font-weight: 700; margin-bottom: 8px; }
  .mbc-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
  .mbc-item { background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.06); border-radius: 8px; padding: 9px 8px; text-align: center; transition: all var(--dur); }
  .mbc-item.current { background: rgba(184,146,42,.14); border-color: rgba(184,146,42,.35); }
  .mbc-item.done { background: rgba(26,92,58,.12); border-color: rgba(26,92,58,.3); }
  .mbc-num { font-family: "DM Serif Display", serif; font-size: 16px; color: var(--gold); line-height: 1; margin-bottom: 3px; }
  .mbc-item.done .mbc-num { color: #6fcf97; }
  .mbc-name { font-size: 9px; color: rgba(255,255,255,.55); letter-spacing: .3px; text-transform: none; font-weight: 700; }
  .mbc-item.current .mbc-name { color: var(--gold); }
  @media (max-width: 760px) { .mbc-grid { grid-template-columns: repeat(2, 1fr); } }

  /* ═════ THE $20K REVEAL TABLE ═════ */
  .reveal-table { background: var(--white); border: 1px solid var(--border); border-radius: var(--rl); margin: 18px 0; overflow: hidden; box-shadow: var(--shadow-sm); }
  .rt-header { background: var(--ink); color: var(--white); padding: 16px 20px; }
  .rt-header h4 { font-family: "DM Serif Display", serif; font-size: 18px; font-weight: 400; color: var(--white); }
  .rt-header small { font-size: 10px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--gold); display: block; margin-bottom: 4px; }
  .rt-row { display: grid; grid-template-columns: 1fr 130px; padding: 12px 20px; border-bottom: 1px solid var(--fog2); font-size: 14px; align-items: center; }
  .rt-row:last-child { border-bottom: none; }
  .rt-row.contract { background: var(--gold-pale); font-weight: 700; }
  .rt-row.deduct { color: #5a0000; }
  .rt-row.deduct .rt-amt { color: var(--red); }
  .rt-row.total { background: var(--ink); color: var(--white); font-weight: 900; }
  .rt-row.total .rt-amt { color: var(--gold); font-family: "DM Serif Display", serif; font-size: 22px; font-weight: 400; }
  .rt-label { font-weight: 700; }
  .rt-amt { text-align: right; font-family: "DM Serif Display", serif; font-size: 16px; font-weight: 400; }

  /* ═════ OPS MAP DIAGRAM (8 rings) ═════ */
  .ops-map { background: linear-gradient(135deg, #1a1814 0%, #100e0a 100%); border: 1px solid rgba(184,146,42,.22); border-radius: var(--rxl); padding: 32px; margin: 22px 0; position: relative; overflow: hidden; color: var(--white); }
  .ops-map::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 0%, rgba(184,146,42,.08), transparent 60%); pointer-events: none; }
  .ops-map-eyebrow { font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--gold); font-weight: 900; margin-bottom: 10px; position: relative; z-index: 1; }
  .ops-map h3 { font-family: "DM Serif Display", serif; font-size: 28px; font-weight: 400; line-height: 1.15; margin-bottom: 6px; color: var(--white); position: relative; z-index: 1; }
  .ops-map > p { color: rgba(255,255,255,.6); font-size: 14px; margin-bottom: 22px; position: relative; z-index: 1; }
  .om-rings { display: grid; place-items: center; padding: 18px 0; position: relative; z-index: 1; min-height: 380px; }
  .om-ring { position: absolute; border: 1px dashed rgba(184,146,42,.2); border-radius: 50%; pointer-events: none; }
  .om-ring.r1 { width: 360px; height: 360px; }
  .om-ring.r2 { width: 260px; height: 260px; }
  .om-ring.r3 { width: 160px; height: 160px; }
  .om-core { position: relative; z-index: 2; width: 140px; height: 140px; border-radius: 50%; background: linear-gradient(135deg, var(--gold), var(--gold2)); display: grid; place-items: center; text-align: center; color: var(--ink); box-shadow: 0 0 30px rgba(184,146,42,.4); }
  .om-core-label { font-size: 9px; letter-spacing: 2px; text-transform: uppercase; font-weight: 900; margin-bottom: 4px; }
  .om-core-name { font-family: "DM Serif Display", serif; font-size: 16px; line-height: 1.1; padding: 0 8px; }
  .om-node { position: absolute; background: rgba(255,255,255,.06); border: 1px solid rgba(184,146,42,.3); border-radius: 12px; padding: 9px 12px; text-align: center; min-width: 110px; backdrop-filter: blur(4px); transition: all var(--dur); }
  .om-node:hover { background: rgba(184,146,42,.12); border-color: var(--gold); transform: scale(1.04); }
  .om-node small { display: block; font-size: 8px; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,.45); margin-bottom: 2px; }
  .om-node strong { font-family: "DM Serif Display", serif; font-size: 13px; color: var(--white); font-weight: 400; }
  .om-node.pos-n { top: 30px; left: 50%; transform: translateX(-50%); }
  .om-node.pos-ne { top: 90px; right: 30px; }
  .om-node.pos-e { top: 50%; right: 0; transform: translateY(-50%); }
  .om-node.pos-se { bottom: 90px; right: 30px; }
  .om-node.pos-s { bottom: 30px; left: 50%; transform: translateX(-50%); }
  .om-node.pos-sw { bottom: 90px; left: 30px; }
  .om-node.pos-w { top: 50%; left: 0; transform: translateY(-50%); }
  .om-node.pos-nw { top: 90px; left: 30px; }
  @media (max-width: 720px) {
    .om-rings { min-height: auto; flex-direction: column; display: flex; padding: 0; }
    .om-ring { display: none; }
    .om-core { margin-bottom: 16px; }
    .om-node { position: relative; top: auto; right: auto; bottom: auto; left: auto; transform: none; margin: 5px 0; width: 100%; }
  }

  /* ═════ PATTERN INTERRUPT ═════ */
  .pattern-interrupt { background: linear-gradient(135deg, var(--ink) 0%, #1e1a14 100%); border: 1px solid rgba(184,146,42,.3); border-radius: var(--rl); padding: 24px; margin: 18px 0; position: relative; overflow: hidden; }
  .pattern-interrupt::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--gold); }
  .pi-eyebrow { color: var(--gold); font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase; font-weight: 900; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
  .pi-eyebrow::before { content: "⏸"; font-size: 14px; }
  .pattern-interrupt h3 { font-family: "DM Serif Display", serif; font-size: 22px; font-weight: 400; color: var(--white); margin-bottom: 12px; line-height: 1.25; }
  .pattern-interrupt p { color: rgba(255,255,255,.78); font-size: 14px; line-height: 1.7; margin-bottom: 10px; }
  .pattern-interrupt p:last-of-type { margin-bottom: 0; }
  .pattern-interrupt em { color: var(--gold); font-style: italic; }
  .pi-behaviors { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: var(--r); padding: 14px; margin: 12px 0; }
  .pi-behaviors ul { list-style: none; }
  .pi-behaviors li { color: rgba(255,255,255,.7); font-size: 13px; padding: 5px 0; padding-left: 18px; position: relative; }
  .pi-behaviors li::before { content: "→"; position: absolute; left: 0; color: var(--gold); }
  .pi-why { color: var(--gold); font-family: "DM Serif Display", serif; font-style: italic; font-size: 16px; margin-top: 14px; }

  /* SYSTEM WANTS / YOU ARE BUILDING */
  .system-vs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0; }
  .sv-col { border-radius: var(--rl); padding: 14px 16px; }
  .sv-col.wants { background: #fcf8f7; border: 1px solid var(--border); border-left: 3px solid #e8b4b4; }
  .sv-col.wants .sv-label { color: var(--red); }
  .sv-col.wants ul li { color: #5a0000; }
  .sv-col.wants ul li::before { content: "✕"; color: var(--red); font-weight: 900; }
  .sv-col.building { background: #f7faf8; border: 1px solid var(--border); border-left: 3px solid #b4d4b4; }
  .sv-col.building .sv-label { color: var(--success); }
  .sv-col.building ul li { color: #1a3a28; }
  .sv-col.building ul li::before { content: "✓"; color: var(--success); font-weight: 900; }
  .sv-label { font-size: 10px; letter-spacing: .5px; text-transform: none; font-weight: 700; margin-bottom: 6px; color: var(--muted); }
  .sv-col h4 { font-family: inherit; font-size: 14px; font-weight: 700; margin-bottom: 10px; color: var(--ink); }
  .sv-col ul { list-style: none; }
  .sv-col ul li { padding: 5px 0; padding-left: 22px; position: relative; font-size: 13px; line-height: 1.5; }
  .sv-col ul li::before { position: absolute; left: 0; }

  /* ═════ OPERATIONAL ARTIFACTS (opx-*) — shared document-fragment language ═════ */
  /* One styling system for all embedded artifacts (rejection notices, routing
     chains, ledgers, trackers). Illustrative, partial, non-usable by design. */
  .opx { background: var(--white); border: 1px solid var(--border); border-radius: var(--r); margin: 16px 0; overflow: hidden; font-size: 13px; }
  .opx-tag { display: inline-block; font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); font-family: monospace; background: var(--fog, #f4f1ea); border: 1px solid var(--border); border-radius: 4px; padding: 2px 7px; margin: 0 0 8px; }
  .opx-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 13px; border-bottom: 1px solid var(--border); font-family: monospace; }
  .opx-head .opx-h-title { font-weight: 700; color: var(--ink); font-size: 12px; letter-spacing: .3px; }
  .opx-head .opx-h-meta { font-size: 11px; color: var(--muted); }
  .opx-body { padding: 12px 13px; }
  /* operational status stamps — operators scan symbols faster than paragraphs */
  .opx-stamp { display: inline-block; font-size: 10px; font-weight: 900; letter-spacing: .8px; padding: 3px 9px; border-radius: 4px; font-family: monospace; }
  .opx-stamp.rejected { background: var(--red-bg); color: var(--red); }
  .opx-stamp.approved { background: var(--success-bg); color: var(--success); }
  .opx-stamp.hold,
  .opx-stamp.pending { background: var(--warn-bg); color: var(--warn); }
  .opx-fail-row { display: flex; align-items: flex-start; gap: 9px; padding: 4px 0; color: var(--ink); }
  .opx-fail-row .opx-x { color: var(--red); font-weight: 900; line-height: 1.4; }
  /* routing / gate chain */
  .opx-chain { display: flex; gap: 6px; flex-wrap: wrap; }
  .opx-gate { flex: 1; min-width: 88px; text-align: center; border-radius: 10px; padding: 9px 6px; border: 1px solid var(--border); background: var(--fog, #f4f1ea); }
  .opx-gate .opx-g-name { font-size: 11px; font-weight: 700; color: var(--muted); line-height: 1.2; }
  .opx-gate .opx-g-mark { font-size: 15px; margin-top: 3px; color: var(--muted); }
  .opx-gate.pass { background: var(--success-bg); border-color: #b4d4b4; }
  .opx-gate.pass .opx-g-name, .opx-gate.pass .opx-g-mark { color: var(--success); }
  .opx-gate.fail { background: var(--red-bg); border-color: #e8b4b4; }
  .opx-gate.fail .opx-g-name, .opx-gate.fail .opx-g-mark { color: var(--red); }
  .opx-note { font-size: 12px; color: var(--muted); margin-top: 8px; line-height: 1.5; }
  .opx-note strong { color: var(--ink); font-weight: 700; }

  /* ═════ VICTORY ═════ */
  .victory-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--rl); padding: 22px; margin-top: 14px; }
  .victory-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; flex-wrap: wrap; gap: 10px; }
  .victory-title { font-family: "DM Serif Display", serif; font-size: 20px; font-weight: 400; color: var(--ink); }
  .victory-count { background: var(--gold); color: var(--ink); border-radius: 999px; padding: 6px 14px; font-size: 12px; font-weight: 900; letter-spacing: .5px; }
  .victory-list { display: grid; gap: 8px; }
  .victory-item { display: flex; align-items: center; gap: 12px; padding: 11px 14px; background: var(--fog); border: 1px solid var(--border); border-radius: 10px; cursor: pointer; transition: all var(--dur); }
  .victory-item:hover { border-color: var(--gold); background: var(--gold-pale); }
  .victory-item.claimed { background: var(--success-bg); border-color: #b4d4b4; }
  .victory-check { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--border); display: grid; place-items: center; font-size: 11px; flex-shrink: 0; transition: all var(--dur); }
  .victory-item:hover .victory-check { border-color: var(--gold); }
  .victory-item.claimed .victory-check { background: var(--success); border-color: var(--success); color: white; }
  .victory-item.claimed .victory-check::before { content: "✓"; font-weight: 900; }
  .victory-text { font-size: 13px; color: #3d3935; flex: 1; }
  .victory-item.claimed .victory-text { color: var(--success); text-decoration: line-through; text-decoration-color: rgba(26,92,58,.4); }
  .victory-cat { font-size: 9px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); font-weight: 900; }
  .victory-item.claimed .victory-cat { color: var(--success); }

  /* ═════ TIMELINE VIZ ═════ */
  .timeline-viz { background: var(--white); border: 1px solid var(--border); border-radius: var(--rl); padding: 28px; margin: 18px 0; }
  .timeline-title { font-family: "DM Serif Display", serif; font-size: 24px; font-weight: 400; margin-bottom: 6px; }
  .timeline-sub { color: var(--muted); font-size: 14px; margin-bottom: 22px; }
  .timeline-track { display: grid; grid-template-columns: repeat(8, 1fr); gap: 0; position: relative; }
  .timeline-track::before { content: ""; position: absolute; top: 22px; left: 6%; right: 6%; height: 2px; background: var(--fog2); border-radius: 99px; z-index: 0; }
  .timeline-track .tl-fill { position: absolute; top: 22px; left: 6%; height: 2px; background: linear-gradient(90deg, var(--gold), var(--gold2)); border-radius: 99px; z-index: 1; transition: width .8s var(--ease); width: 0%; }
  .tl-node { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; }
  .tl-dot { width: 40px; height: 40px; border-radius: 50%; background: var(--white); border: 2px solid var(--fog2); display: grid; place-items: center; font-family: "DM Serif Display", serif; font-size: 13px; color: var(--muted); transition: all var(--dur); margin-bottom: 8px; }
  .tl-node.done .tl-dot { background: var(--success); border-color: var(--success); color: white; }
  .tl-node.done .tl-dot::before { content: "✓"; font-weight: 900; }
  .tl-node.done .tl-dot-num { display: none; }
  .tl-node.current .tl-dot { background: var(--gold); border-color: var(--gold); color: var(--ink); animation: pulse 2s infinite; }
  .tl-label { font-size: 9px; text-transform: uppercase; letter-spacing: .8px; color: var(--muted); font-weight: 900; }
  .tl-node.done .tl-label { color: var(--success); }
  .tl-node.current .tl-label { color: var(--gold); }
  @media (max-width: 900px) {
    .timeline-track { grid-template-columns: repeat(4, 1fr); row-gap: 18px; }
    .timeline-track::before, .timeline-track .tl-fill { display: none; }
  }
  @media (max-width: 540px) {
    .timeline-track { grid-template-columns: repeat(2, 1fr); }
  }

  /* ═════ OVERVIEW LESSON CARDS ═════ */
  .lesson-overview-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 22px; }
  .lesson-overview-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--rl); padding: 22px; box-shadow: var(--shadow-sm); transition: transform .15s, box-shadow .15s; cursor: pointer; }
  .lesson-overview-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: #cbc4b6; }
  .loc-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 13px; flex-wrap: wrap; gap: 8px; }
  .badge { background: var(--ink); color: var(--gold); border-radius: 999px; padding: 6px 10px; font-size: 10px; font-weight: 900; letter-spacing: 1.2px; text-transform: uppercase; }
  .status-pill { background: var(--gold-pale); color: #6e500c; border: 1px solid #e8d5a3; border-radius: 999px; padding: 6px 10px; font-size: 10px; font-weight: 900; text-transform: uppercase; }
  .lesson-overview-card h4 { font-family: "DM Serif Display", Georgia, serif; font-size: 22px; line-height: 1.15; font-weight: 400; margin-bottom: 7px; }
  .lesson-overview-card .sub { color: var(--muted); font-style: italic; font-size: 13px; margin-bottom: 13px; }
  .flow { display: grid; gap: 8px; margin-top: 14px; }
  .flow-row { display: grid; grid-template-columns: 90px 1fr; gap: 10px; background: var(--fog); border: 1px solid var(--border); border-radius: 12px; padding: 10px; }
  .flow-row span { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--gold); font-weight: 900; }
  .flow-row strong { font-size: 13px; }
  .loc-cta { margin-top: 15px; padding-top: 13px; border-top: 1px dashed var(--border); font-size: 12px; color: var(--gold); font-weight: 900; text-transform: uppercase; letter-spacing: 1px; }
  .loc-cta::after { content: " →"; }

  /* WORKSHEET CENTER */
  .worksheet-center { background: var(--ink); color: white; border-radius: var(--rxl); padding: 28px; margin-top: 18px; }
  .worksheet-center h3 { font-family: "DM Serif Display", Georgia, serif; font-size: 28px; font-weight: 400; margin-bottom: 8px; color: white; }
  .worksheet-center > p { color: rgba(255,255,255,.65); max-width: 780px; }
  .ws-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; }
  .ws { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); border-radius: 15px; padding: 16px; transition: all var(--dur); cursor: pointer; }
  .ws:hover { background: rgba(255,255,255,.1); border-color: rgba(184,146,42,.3); }
  .ws small { color: var(--gold); font-size: 10px; text-transform: uppercase; letter-spacing: 1.4px; font-weight: 900; }
  .ws strong { display: block; color: white; margin: 6px 0 5px; font-family: "DM Serif Display", Georgia, serif; font-size: 16px; font-weight: 400; }
  .ws span { color: rgba(255,255,255,.6); font-size: 12px; line-height: 1.5; }

  /* TOAST */
  .toast { position: fixed; bottom: 24px; right: 24px; z-index: 100; background: var(--ink); color: var(--white); border-radius: var(--r); padding: 14px 18px; font-size: 13px; display: flex; align-items: center; gap: 10px; box-shadow: var(--shadow-lg); border: 1px solid rgba(184,146,42,.3); transform: translateY(80px); opacity: 0; transition: all .3s var(--ease); pointer-events: none; max-width: 320px; }
  .toast.show { transform: translateY(0); opacity: 1; }
  .toast-gold { color: var(--gold); font-size: 16px; }

  /* ═════ SIMULATION ═════ */
  .sim-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--rxl); padding: 28px; margin: 20px 0; position: relative; box-shadow: var(--shadow); overflow: hidden; }
  .sim-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--gold), var(--gold2), var(--gold)); background-size: 200% 100%; animation: scanShimmer 4s linear infinite; }
  .sim-eyebrow { display: inline-flex; align-items: center; gap: 9px; background: var(--ink); color: var(--gold); border-radius: 999px; padding: 8px 14px; font-size: 10px; font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 12px; }
  .sim-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px rgba(184,146,42,.7); animation: pulse 2s infinite; }
  .sim-card h3 { font-family: "DM Serif Display", serif; font-size: 26px; font-weight: 400; line-height: 1.2; margin-bottom: 8px; }
  .sim-card > p { color: var(--muted); font-size: 14px; margin-bottom: 14px; }
  .sim-disclaimer { background: var(--gold-pale); border: 1px dashed #d4a83c; border-radius: var(--r); padding: 11px 14px; font-size: 12px; color: var(--gold-deep); margin-bottom: 18px; display: flex; align-items: flex-start; gap: 8px; }
  .sim-disclaimer strong { color: var(--gold-deep); }
  .sim-stage { display: none; animation: fadeUp .4s var(--ease); }
  .sim-stage.active { display: block; }
  .sim-intro { background: var(--fog); border: 1px solid var(--border); border-radius: var(--rl); padding: 22px; }
  .sim-intro h4 { font-family: "DM Serif Display", serif; font-size: 19px; font-weight: 400; margin-bottom: 10px; }
  .sim-intro ul { list-style: none; margin: 12px 0 14px; }
  .sim-intro ul li { padding: 7px 0 7px 22px; font-size: 13px; color: #3d3935; position: relative; }
  .sim-intro ul li::before { content: "→"; position: absolute; left: 0; color: var(--gold); font-weight: 900; }
  .sim-start-btn { background: var(--ink); color: var(--gold); border: none; border-radius: 12px; padding: 14px 22px; font-family: inherit; font-size: 12px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; transition: all var(--dur); display: inline-flex; align-items: center; gap: 9px; }
  .sim-start-btn:hover { background: var(--ink2); transform: translateY(-1px); }
  .sim-start-btn::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px rgba(184,146,42,.6); }
  .sim-round-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
  .sim-round-pill { background: var(--ink); color: var(--gold); border-radius: 999px; padding: 5px 12px; font-size: 10px; font-weight: 900; letter-spacing: 1.2px; text-transform: uppercase; }
  .sim-round-segs { display: flex; gap: 4px; flex: 1; }
  .sim-round-seg { flex: 1; height: 4px; border-radius: 99px; background: var(--fog2); transition: background var(--dur); }
  .sim-round-seg.done { background: var(--success); }
  .sim-round-seg.current { background: var(--gold); animation: pulse 2s infinite; }
  .sim-incoming { background: linear-gradient(135deg, var(--ink) 0%, #1c1814 100%); border-radius: var(--rl); padding: 22px; position: relative; overflow: hidden; margin-bottom: 14px; }
  .sim-incoming::before { content: ""; position: absolute; top: -40px; right: -40px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, rgba(139,26,26,.22), transparent 65%); pointer-events: none; }
  .sim-incoming.calm::before { background: radial-gradient(circle, rgba(184,146,42,.16), transparent 65%); }
  .sim-incoming-header { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; position: relative; z-index: 1; }
  .sim-incoming-icon { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,107,107,.18); border: 1px solid rgba(255,107,107,.35); display: grid; place-items: center; font-size: 16px; color: #ff9d9d; animation: incomingRing 3.5s ease-in-out infinite; }
  .sim-incoming.calm .sim-incoming-icon { background: rgba(184,146,42,.16); border-color: rgba(184,146,42,.35); color: var(--gold); animation: none; }
  .sim-incoming-meta { flex: 1; }
  .sim-incoming-tag { font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,.4); font-weight: 900; }
  .sim-incoming-caller { font-family: "DM Serif Display", serif; font-size: 17px; color: var(--white); margin-top: 2px; }
  .sim-script { background: rgba(255,255,255,.04); border-left: 3px solid var(--gold); border-radius: 0 var(--r) var(--r) 0; padding: 16px 18px; font-family: "DM Serif Display", serif; font-style: italic; font-size: 16px; line-height: 1.55; color: rgba(255,255,255,.92); position: relative; z-index: 1; }
  .sim-script::before { content: "“"; color: var(--gold); font-size: 28px; line-height: 0; vertical-align: -10px; margin-right: 4px; }
  .sim-question { font-size: 13px; font-weight: 700; letter-spacing: .2px; text-transform: none; color: var(--muted); margin: 16px 0 10px; }
  .sim-options { display: grid; gap: 9px; }
  .sim-option { background: var(--fog); border: 1.5px solid var(--border); border-radius: var(--r); padding: 13px 16px; cursor: pointer; transition: all var(--dur); font-family: inherit; text-align: left; color: var(--ink); font-size: 13px; line-height: 1.5; display: flex; gap: 12px; align-items: flex-start; width: 100%; }
  .sim-option-letter { width: 24px; height: 24px; border-radius: 50%; background: var(--white); border: 1.5px solid var(--border); display: grid; place-items: center; font-weight: 900; font-size: 11px; color: var(--muted); flex-shrink: 0; transition: all var(--dur); }
  .sim-option:hover { border-color: var(--gold); background: var(--gold-pale); }
  .sim-option:hover .sim-option-letter { border-color: var(--gold); color: var(--gold-deep); }
  .sim-option.picked { border-color: var(--gold); background: var(--gold-pale); }
  .sim-option.picked .sim-option-letter { background: var(--gold); border-color: var(--gold); color: var(--ink); }
  .sim-option:disabled { opacity: .55; cursor: not-allowed; }
  .sim-option:disabled:hover { border-color: var(--border); background: var(--fog); }
  .sim-feedback { background: var(--fog); border-radius: var(--rl); padding: 20px; margin-top: 16px; border-left: 4px solid var(--gold); display: none; animation: fadeUp .4s var(--ease); }
  .sim-feedback.show { display: block; }
  .sim-feedback-row { display: grid; grid-template-columns: 120px 1fr; gap: 14px; padding: 9px 0; border-bottom: 1px solid rgba(0,0,0,.06); font-size: 13px; }
  .sim-feedback-row:last-child { border-bottom: none; }
  .sim-feedback-row strong { color: var(--gold-deep); font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; font-weight: 900; }
  .sim-feedback-row span { color: #3d3935; line-height: 1.6; }
  .sim-feedback-verdict { display: inline-flex; align-items: center; gap: 7px; background: var(--white); border: 1px solid var(--border); border-radius: 999px; padding: 5px 11px; font-size: 11px; font-weight: 900; letter-spacing: .8px; text-transform: uppercase; margin-bottom: 12px; }
  .sim-feedback-verdict.protects { background: var(--success-bg); border-color: #b4d4b4; color: var(--success); }
  .sim-feedback-verdict.costs { background: var(--red-bg); border-color: #e8b4b4; color: var(--red); }
  .sim-feedback-verdict.mixed { background: var(--warn-bg); border-color: #ead49a; color: var(--warn); }
  .sim-pause { background: var(--gold-pale); border: 1px solid #e8d5a3; border-left: 4px solid var(--gold); border-radius: 0 var(--rl) var(--rl) 0; padding: 18px 22px; margin: 14px 0; text-align: center; }
  .sim-pause h5 { font-family: "DM Serif Display", serif; font-style: italic; font-size: 17px; font-weight: 400; color: var(--ink); margin-bottom: 8px; }
  .sim-pause p { font-size: 13px; color: #3b3327; line-height: 1.6; margin: 0; }
  .pause-dot { width: 50px; height: 50px; border-radius: 50%; background: var(--gold); margin: 10px auto 12px; transition: transform 4s ease-in-out; opacity: .9; }
  .pause-dot.expand { transform: scale(1.5); }
  .sim-actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
  .sim-doc { background: var(--ink); color: var(--white); border-radius: var(--rl); padding: 24px; margin-top: 16px; }
  .sim-doc h4 { font-family: "DM Serif Display", serif; font-size: 22px; font-weight: 400; color: var(--white); margin-bottom: 8px; }
  .sim-doc > p { color: rgba(255,255,255,.65); font-size: 14px; margin-bottom: 14px; }
  .sim-doc-field { background: rgba(255,255,255,.04); border: 1px dashed rgba(184,146,42,.35); border-radius: 10px; padding: 12px; margin-bottom: 10px; }
  .sim-doc-field label { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold); font-weight: 900; display: block; margin-bottom: 6px; }
  .sim-doc-field textarea, .sim-doc-field input { width: 100%; background: transparent; border: none; color: var(--white); font-family: inherit; font-size: 13px; outline: none; resize: vertical; min-height: 36px; }
  .sim-doc-field textarea::placeholder, .sim-doc-field input::placeholder { color: rgba(255,255,255,.3); }
  .sim-complete { background: linear-gradient(135deg, var(--success-bg), #d5ead9); border: 1px solid #b4d4b4; border-radius: var(--rl); padding: 24px; text-align: center; }
  .sim-complete h4 { font-family: "DM Serif Display", serif; font-size: 22px; font-weight: 400; color: var(--success); margin-bottom: 8px; }
  .sim-complete p { color: #1a3a28; font-size: 14px; margin-bottom: 14px; }
  @media (max-width: 640px) {
    .sim-feedback-row { grid-template-columns: 1fr; gap: 4px; }
    .sim-feedback-row strong { font-size: 9px; }
  }

  /* ═════ RESPONSIVE ═════ */
  @media (max-width: 1050px) {
    .shell { grid-template-columns: 1fr; }
    .sidebar { position: relative; height: auto; }
    .content-grid { grid-template-columns: 1fr; }
    .side-card { position: relative; top: auto; }
    .system-strip { grid-template-columns: repeat(2, 1fr); }
    .metrics { grid-template-columns: repeat(2, 1fr); }
    .lesson-overview-grid { grid-template-columns: 1fr; }
    .ws-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 640px) {
    .main { padding: 18px; }
    .hero { padding: 26px; }
    .system-strip, .metrics, .ws-grid { grid-template-columns: 1fr; }
    .checkbox-grid, .compare-grid, .do-dont { grid-template-columns: 1fr; }
    .next-lesson-card { flex-direction: column; align-items: flex-start; }
    .tab-bar { gap: 4px; }
    .tab { padding: 8px 10px; font-size: 10px; }
  }

  /* ═══════════════════════════════════════════
     LIVE OPERATIONS SCOREBOARD
  ═══════════════════════════════════════════ */
  @keyframes scoreboardBoot { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  @keyframes alertPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(139,26,26,.4); } 60% { box-shadow: 0 0 0 10px rgba(139,26,26,0); } }
  @keyframes warnPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(184,146,42,.35); } 60% { box-shadow: 0 0 0 8px rgba(184,146,42,0); } }
  @keyframes trendBounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
  @keyframes leakDetected { 0% { opacity: 0; transform: scale(.96); } 100% { opacity: 1; transform: none; } }
  @keyframes barFill { from { width: 0; } to { width: var(--w); } }
  @keyframes clockTick { 0%,100% { opacity: 1; } 50% { opacity: .5; } }
  @keyframes scanLine { 0% { top: 0; opacity: .08; } 100% { top: 100%; opacity: 0; } }

  .scoreboard-section { margin-bottom: 22px; animation: scoreboardBoot .5s var(--ease); }
  .scoreboard-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 12px; flex-wrap: wrap; }
  .scoreboard-eyebrow { display: flex; align-items: center; gap: 10px; }
  .scoreboard-dot { width: 10px; height: 10px; border-radius: 50%; background: #6fcf97; box-shadow: 0 0 10px rgba(111,207,151,.7); animation: observeBlink 3s ease-in-out infinite; }
  .scoreboard-title { font-family: "DM Serif Display", serif; font-size: 20px; font-weight: 400; color: var(--ink); }
  .scoreboard-sub { font-size: 11px; color: var(--muted); text-transform: none; letter-spacing: .3px; margin-top: 2px; }
  .scoreboard-timestamp { font-size: 10px; color: var(--muted); letter-spacing: .5px; text-transform: none; animation: clockTick 2s ease-in-out infinite; }

  /* — ALERT STRIP — */
  .ops-alert-strip { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
  .ops-alert { border-radius: 14px; padding: 14px 18px; display: flex; flex-direction: column; gap: 4px; position: relative; overflow: hidden; }
  .ops-alert::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: 4px 0 0 4px; }
  .ops-alert.critical { background: #1a0505; border: 1px solid rgba(220,80,80,.35); animation: alertPulse 3s ease-in-out infinite; }
  .ops-alert.critical::before { background: #e05252; }
  .ops-alert.critical small { color: #e05252; }
  .ops-alert.critical strong { color: #ffbbbb; }
  .ops-alert.critical p { color: rgba(255,200,200,.6); }
  .ops-alert.warning { background: #1a1200; border: 1px solid rgba(184,146,42,.3); animation: warnPulse 4s ease-in-out infinite; }
  .ops-alert.warning::before { background: var(--gold); }
  .ops-alert.warning small { color: var(--gold); }
  .ops-alert.warning strong { color: #ffe4a0; }
  .ops-alert.warning p { color: rgba(255,224,150,.55); }
  .ops-alert.healthy { background: #041a0a; border: 1px solid rgba(111,207,151,.25); }
  .ops-alert.healthy::before { background: #6fcf97; }
  .ops-alert.healthy small { color: #6fcf97; }
  .ops-alert.healthy strong { color: #b0f0c8; }
  .ops-alert.healthy p { color: rgba(150,230,180,.6); }
  .ops-alert small { font-size: 9px; letter-spacing: 2.5px; text-transform: uppercase; font-weight: 900; }
  .ops-alert strong { font-size: 14px; font-weight: 900; }
  .ops-alert p { font-size: 12px; margin: 0; line-height: 1.5; }

  /* — MAIN SCOREBOARD GRID — */
  .scoreboard-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
  .score-tile { background: var(--white); border: 1px solid var(--border); border-radius: 16px; padding: 16px 18px; position: relative; overflow: hidden; transition: transform var(--dur), box-shadow var(--dur); cursor: default; }
  .score-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
  .score-tile::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 16px 16px 0 0; }
  .score-tile.st-green::after { background: linear-gradient(90deg, #6fcf97, #27ae60); }
  .score-tile.st-gold::after { background: linear-gradient(90deg, var(--gold), var(--gold2)); }
  .score-tile.st-red::after { background: linear-gradient(90deg, #e05252, #c0392b); }
  .score-tile.st-orange::after { background: linear-gradient(90deg, #f0a030, #e07020); }

  .st-label { font-size: 9px; text-transform: uppercase; letter-spacing: 2px; color: var(--muted); margin-bottom: 8px; font-weight: 900; display: flex; align-items: center; justify-content: space-between; }
  .st-value { font-family: "DM Serif Display", serif; font-size: 28px; font-weight: 400; line-height: 1; margin-bottom: 4px; }
  .st-value.green { color: #27ae60; }
  .st-value.gold { color: var(--gold); }
  .st-value.red { color: #c0392b; }
  .st-value.orange { color: #e07020; }
  .st-caption { font-size: 11px; color: var(--muted); line-height: 1.4; margin-bottom: 8px; }
  .st-consequence { font-size: 11px; font-weight: 700; padding: 5px 8px; border-radius: 7px; display: inline-block; }
  .st-consequence.c-green { background: var(--success-bg); color: var(--success); }
  .st-consequence.c-gold { background: var(--warn-bg); color: var(--warn); }
  .st-consequence.c-red { background: var(--red-bg); color: var(--red); }

  /* trend arrows */
  .trend { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 900; padding: 2px 6px; border-radius: 6px; }
  .trend.up-good { background: #edf7f0; color: #1a5c3a; }
  .trend.down-bad { background: var(--red-bg); color: var(--red); animation: trendBounce 2s ease-in-out infinite; }
  .trend.up-bad { background: var(--red-bg); color: var(--red); animation: trendBounce 2s ease-in-out infinite; }
  .trend.down-good { background: #edf7f0; color: #1a5c3a; }
  .trend.flat { background: var(--fog2); color: var(--muted); }

  /* — MINI BAR METRICS — */
  .score-bar-list { display: flex; flex-direction: column; gap: 7px; margin-top: 8px; }
  .score-bar-item { display: flex; flex-direction: column; gap: 3px; }
  .sbi-header { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); }
  .sbi-header strong { color: var(--ink); }
  .sbi-track { height: 6px; background: var(--fog2); border-radius: 99px; overflow: hidden; }
  .sbi-fill { height: 100%; border-radius: 99px; --w: 50%; animation: barFill .8s var(--ease) forwards; }
  .sbi-fill.green { background: linear-gradient(90deg, #6fcf97, #27ae60); }
  .sbi-fill.gold { background: linear-gradient(90deg, var(--gold), var(--gold2)); }
  .sbi-fill.red { background: linear-gradient(90deg, #e05252, #c0392b); }
  .sbi-fill.orange { background: linear-gradient(90deg, #f0a030, #e07020); }

  /* — PIPELINE FUNNEL — */
  .pipeline-tile { grid-column: span 2; }
  .pipeline-stages { display: flex; gap: 6px; align-items: flex-end; margin-top: 10px; height: 70px; }
  .pipe-stage { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
  .pipe-bar-wrap { width: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
  .pipe-bar { border-radius: 6px 6px 0 0; width: 100%; transition: height .5s var(--ease); }
  .pipe-label { font-size: 9px; color: var(--muted); text-align: center; letter-spacing: .5px; white-space: nowrap; }
  .pipe-val { font-size: 10px; font-weight: 900; color: var(--ink); text-align: center; }

  /* — CREW UTILIZATION — */
  .crew-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; margin-top: 10px; }
  .crew-block { aspect-ratio: 1; border-radius: 8px; display: grid; place-items: center; font-size: 9px; font-weight: 900; transition: transform .15s; cursor: default; }
  .crew-block:hover { transform: scale(1.15); }
  .crew-block.active { background: linear-gradient(135deg, #6fcf97, #27ae60); color: white; }
  .crew-block.partial { background: linear-gradient(135deg, var(--gold), var(--gold2)); color: var(--ink); }
  .crew-block.idle { background: var(--fog2); color: var(--muted); }
  .crew-block.over { background: linear-gradient(135deg, #e05252, #c0392b); color: white; }

  /* — AR AGING HEATMAP — */
  .ar-aging-row { display: flex; gap: 6px; margin-top: 10px; align-items: stretch; }
  .ar-bucket { flex: 1; border-radius: 10px; padding: 10px 8px; text-align: center; display: flex; flex-direction: column; gap: 3px; }
  .ar-bucket.current { background: #edf7f0; border: 1px solid #b4d4b4; }
  .ar-bucket.mild { background: var(--warn-bg); border: 1px solid #ead49a; }
  .ar-bucket.warm { background: #fff3e0; border: 1px solid #f0c060; }
  .ar-bucket.hot { background: #fff0e0; border: 1px solid #e09040; }
  .ar-bucket.critical { background: var(--red-bg); border: 1px solid #e8b4b4; animation: alertPulse 4s ease-in-out infinite; }
  .ar-bucket-label { font-size: 9px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); font-weight: 700; }
  .ar-bucket-val { font-family: "DM Serif Display", serif; font-size: 16px; font-weight: 400; }
  .ar-bucket.current .ar-bucket-val { color: #27ae60; }
  .ar-bucket.mild .ar-bucket-val { color: var(--warn); }
  .ar-bucket.warm .ar-bucket-val { color: #c07010; }
  .ar-bucket.hot .ar-bucket-val { color: #b05010; }
  .ar-bucket.critical .ar-bucket-val { color: var(--red); }
  .ar-bucket-days { font-size: 9px; color: var(--muted); }

  /* — SCOREBOARD FOOTER — */
  .scoreboard-footer { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--border); margin-top: 8px; }
  .sf-left { font-size: 11px; color: var(--muted); font-style: italic; }
  .sf-right { display: flex; gap: 10px; }
  .sf-badge { font-size: 9px; text-transform: uppercase; letter-spacing: 1.5px; padding: 4px 8px; border-radius: 6px; font-weight: 900; }
  .sf-badge.critical { background: var(--red-bg); color: var(--red); }
  .sf-badge.healthy { background: var(--success-bg); color: var(--success); }
  .sf-badge.watch { background: var(--warn-bg); color: var(--warn); }

  /* — SIMULATE BUTTON ON TILES — */
  .st-sim-btn { font-size: 10px; padding: 4px 8px; border: 1px solid var(--border2); border-radius: 7px; background: transparent; color: var(--muted); cursor: pointer; font-family: inherit; transition: all var(--dur); display: block; margin-top: 8px; width: 100%; text-align: left; letter-spacing: .3px; }
  .st-sim-btn:hover { border-color: var(--gold); color: var(--gold); background: var(--gold-pale); }

  /* — FULL-WIDTH TILES — */
  .score-tile.full { grid-column: span 3; }
  .score-tile.span2 { grid-column: span 2; }

  @media (max-width: 900px) {
    .scoreboard-grid { grid-template-columns: repeat(2, 1fr); }
    .score-tile.full { grid-column: span 2; }
    .score-tile.pipeline-tile { grid-column: span 2; }
    .crew-grid { grid-template-columns: repeat(4, 1fr); }
  }
  @media (max-width: 640px) {
    .scoreboard-grid { grid-template-columns: 1fr; }
    .score-tile.full, .score-tile.span2, .score-tile.pipeline-tile { grid-column: span 1; }
    .ar-aging-row { flex-wrap: wrap; }
    .ar-bucket { min-width: 60px; }
  }

  /* ═══════════════════════════════════════════
     COST OF CHAOS VISUALIZATION
  ═══════════════════════════════════════════ */
  @keyframes bleedIn { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
  @keyframes countUp { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: scale(1); } }
  @keyframes drip { 0% { transform: scaleY(0); transform-origin: top; opacity: 0; } 60% { opacity: 1; } 100% { transform: scaleY(1); transform-origin: top; opacity: 1; } }
  @keyframes totalReveal { 0% { opacity: 0; transform: translateY(12px) scale(.96); } 100% { opacity: 1; transform: none; } }
  @keyframes hemorrhage { 0%,100% { box-shadow: 0 0 0 0 rgba(192,57,43,.3); } 60% { box-shadow: 0 0 0 16px rgba(192,57,43,0); } }

  .chaos-section { margin-bottom: 22px; }
  .chaos-card { background: linear-gradient(135deg, var(--ink) 0%, #14110d 100%); border-radius: var(--rxl); overflow: hidden; position: relative; box-shadow: var(--shadow-lg), 0 0 0 1px rgba(196,154,46,.08); }
  .chaos-card::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(196,154,46,.015) 0px, rgba(196,154,46,.015) 1px, transparent 1px, transparent 32px); pointer-events: none; }

  .chaos-header { padding: 32px 36px 24px; border-bottom: 1px solid rgba(255,255,255,.07); position: relative; }
  .chaos-eyebrow { font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: rgba(255,255,255,.35); margin-bottom: 8px; font-weight: 900; }
  .chaos-title { font-family: "DM Serif Display", serif; font-size: clamp(28px, 4vw, 44px); color: var(--white); line-height: 1.05; margin-bottom: 10px; }
  .chaos-title span { color: #e05252; font-style: italic; }
  .chaos-subtitle { font-size: 14px; color: rgba(255,255,255,.5); max-width: 560px; line-height: 1.6; }
  .chaos-scenario-label { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; font-size: 10px; letter-spacing: 1.8px; text-transform: uppercase; color: rgba(255,255,255,.3); }
  .chaos-scenario-dot { width: 6px; height: 6px; border-radius: 50%; background: #e05252; animation: observeBlink 2s ease-in-out infinite; }

  .chaos-body { padding: 28px 36px; display: grid; grid-template-columns: 1fr 320px; gap: 28px; align-items: start; }

  /* — LEAK ROWS — */
  .chaos-leaks { display: flex; flex-direction: column; gap: 0; }
  .leak-row { display: flex; align-items: stretch; gap: 0; border-bottom: 1px solid rgba(255,255,255,.05); padding: 16px 0; opacity: 0; transition: opacity .3s; position: relative; }
  .leak-row.visible { opacity: 1; animation: bleedIn .4s var(--ease) forwards; }
  .leak-num { width: 32px; flex-shrink: 0; display: flex; align-items: flex-start; padding-top: 3px; }
  .leak-num span { font-size: 10px; color: rgba(255,255,255,.2); font-weight: 900; letter-spacing: 1px; }
  .leak-content { flex: 1; padding-right: 16px; }
  .leak-category { font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,.3); margin-bottom: 4px; font-weight: 900; }
  .leak-title { font-size: 15px; font-weight: 700; color: var(--white); margin-bottom: 4px; line-height: 1.3; }
  .leak-desc { font-size: 12px; color: rgba(255,255,255,.45); line-height: 1.55; }
  .leak-lesson { display: inline-flex; margin-top: 6px; font-size: 9px; padding: 2px 7px; border-radius: 5px; background: rgba(184,146,42,.15); color: var(--gold2); letter-spacing: 1px; text-transform: uppercase; font-weight: 900; }
  .leak-amount { width: 120px; flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-start; padding-top: 3px; gap: 5px; }
  .leak-dollar { font-family: "DM Serif Display", serif; font-size: 22px; font-weight: 400; color: #e05252; line-height: 1; }
  .leak-bar-wrap { width: 100%; display: flex; justify-content: flex-end; }
  .leak-bar { height: 3px; border-radius: 99px; background: linear-gradient(90deg, rgba(224,82,82,.2), #e05252); --lw: 60%; width: 0; transition: width .8s var(--ease); }
  .leak-bar.animate { width: var(--lw); }
  .leak-connector { position: absolute; left: 47px; bottom: -1px; width: 2px; height: 17px; background: linear-gradient(to bottom, rgba(224,82,82,.4), transparent); }

  /* — RUNNING TOTAL — */
  .chaos-running { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.08); }
  .cr-label { font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,.3); font-weight: 900; }
  .cr-value { font-family: "DM Serif Display", serif; font-size: 38px; color: #e05252; line-height: 1; }
  .cr-note { font-size: 11px; color: rgba(255,255,255,.35); font-style: italic; }

  /* — RIGHT PANEL: TOTAL + RECOVERY — */
  .chaos-total-panel { position: sticky; top: 24px; }
  .chaos-total { background: rgba(224,82,82,.06); border: 1px solid rgba(224,82,82,.2); border-radius: 18px; padding: 24px; text-align: center; margin-bottom: 14px; animation: hemorrhage 4s ease-in-out infinite; }
  .ct-eyebrow { font-size: 9px; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(224,82,82,.6); margin-bottom: 10px; font-weight: 900; }
  .ct-amount { font-family: "DM Serif Display", serif; font-size: 52px; color: #e05252; line-height: 1; margin-bottom: 6px; }
  .ct-label { font-size: 12px; color: rgba(255,255,255,.5); line-height: 1.5; }
  .ct-label strong { color: rgba(255,255,255,.85); display: block; margin-bottom: 4px; }
  .chaos-recovery { background: rgba(184,146,42,.07); border: 1px solid rgba(184,146,42,.2); border-radius: 14px; padding: 18px; }
  .recovery-title { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; font-weight: 900; }
  .recovery-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.05); }
  .recovery-item:last-child { border-bottom: none; }
  .recovery-fix { font-size: 12px; color: rgba(255,255,255,.7); flex: 1; line-height: 1.4; }
  .recovery-save { font-size: 12px; font-weight: 900; color: #6fcf97; white-space: nowrap; }
  .chaos-cta { margin-top: 14px; }
  .chaos-cta-btn { width: 100%; padding: 13px; background: linear-gradient(135deg, var(--gold), var(--gold2)); color: var(--ink); border: none; border-radius: 12px; font-family: inherit; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; transition: transform var(--dur), box-shadow var(--dur); }
  .chaos-cta-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(184,146,42,.4); }

  /* — TOGGLE SCENARIO — */
  .chaos-scenario-toggle { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
  .cst-btn { padding: 7px 12px; border: 1px solid rgba(255,255,255,.12); background: transparent; border-radius: 8px; font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: rgba(255,255,255,.45); cursor: pointer; font-family: inherit; font-weight: 900; transition: all .2s; }
  .cst-btn:hover { border-color: rgba(255,255,255,.3); color: rgba(255,255,255,.8); }
  .cst-btn.active { background: rgba(224,82,82,.15); border-color: rgba(224,82,82,.4); color: #ffbbbb; }

  @media (max-width: 860px) {
    .chaos-body { grid-template-columns: 1fr; }
    .chaos-total-panel { position: static; }
    .chaos-header, .chaos-body { padding-left: 22px; padding-right: 22px; }
  }
  @media (max-width: 640px) {
    .chaos-header, .chaos-body { padding: 20px; }
    .ct-amount { font-size: 40px; }
  }

  /* ═══════════════════════════════════════════
     OPERATOR MODE vs SURVIVAL MODE
  ═══════════════════════════════════════════ */
  @keyframes modeReveal { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  @keyframes survivalShake { 0%,100% { transform: translateX(0); } 10%,30%,50%,70%,90% { transform: translateX(-1px); } 20%,40%,60%,80% { transform: translateX(1px); } }
  @keyframes operatorGlow { 0%,100% { box-shadow: 0 0 0 0 rgba(184,146,42,.3); } 50% { box-shadow: 0 0 0 8px rgba(184,146,42,0); } }
  @keyframes toggleSlide { from { transform: translateX(0); } to { transform: translateX(100%); } }

  .mode-section { margin-bottom: 22px; }
  .mode-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--rxl); overflow: hidden; box-shadow: var(--shadow); }

  .mode-header { padding: 32px 36px 24px; border-bottom: 1px solid var(--border); background: linear-gradient(135deg, var(--fog) 0%, var(--white) 100%); position: relative; overflow: hidden; }
  .mode-header::after { content: ""; position: absolute; width: 300px; height: 300px; background: var(--gold-pale); border-radius: 50%; right: -120px; top: -120px; pointer-events: none; opacity: .6; }
  .mode-header-inner { position: relative; z-index: 1; }
  .mode-eyebrow { font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; font-weight: 900; }
  .mode-title { font-family: "DM Serif Display", serif; font-size: clamp(26px, 4vw, 40px); line-height: 1.1; margin-bottom: 10px; }
  .mode-title .survival { color: #c0392b; font-style: italic; }
  .mode-title .operator { color: var(--gold-deep); }
  .mode-desc { font-size: 15px; color: var(--muted); max-width: 600px; line-height: 1.7; }
  .mode-trademark { font-size: 10px; color: var(--muted); margin-top: 10px; letter-spacing: .5px; }
  .mode-trademark span { color: var(--gold); font-weight: 900; }

  /* — SELF-ASSESSMENT TOGGLE — */
  .mode-self-check { display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; background: var(--fog2); border: 1px solid var(--border); border-radius: 99px; padding: 8px 16px; cursor: pointer; transition: all .2s; user-select: none; }
  .mode-self-check:hover { border-color: var(--gold); background: var(--gold-pale); }
  .msc-label { font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: 1.2px; color: var(--muted); }
  .msc-state { font-size: 11px; font-weight: 900; color: var(--gold); }

  /* — THE COMPARISON TABLE — */
  .mode-body { padding: 0; }
  .mode-columns { display: grid; grid-template-columns: 1fr 1fr; }
  .mode-col { padding: 0; }
  .mode-col-header { padding: 18px 28px 16px; display: flex; align-items: center; gap: 12px; border-bottom: 2px solid; }
  .mode-col.survival .mode-col-header { background: #1a0505; border-color: #c0392b; }
  .mode-col.operator .mode-col-header { background: #0f0c00; border-color: var(--gold); }
  .mode-col-icon { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 16px; flex-shrink: 0; }
  .mode-col.survival .mode-col-icon { background: rgba(192,57,43,.2); }
  .mode-col.operator .mode-col-icon { background: rgba(184,146,42,.2); }
  .mode-col-title { font-family: "DM Serif Display", serif; font-size: 18px; font-weight: 400; }
  .mode-col.survival .mode-col-title { color: #ffbbbb; }
  .mode-col.operator .mode-col-title { color: #ffe4a0; }
  .mode-col-sub { font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px; margin-top: 2px; }
  .mode-col.survival .mode-col-sub { color: rgba(255,180,180,.5); }
  .mode-col.operator .mode-col-sub { color: rgba(255,228,160,.5); }

  .mode-rows { display: flex; flex-direction: column; }
  .mode-row-pair { display: contents; }
  .mode-cell { padding: 14px 28px; border-bottom: 1px solid; font-size: 13px; line-height: 1.5; display: flex; align-items: flex-start; gap: 10px; transition: background .15s; }
  .mode-col.survival .mode-cell { background: #0d0303; border-color: rgba(192,57,43,.1); color: rgba(255,200,200,.7); }
  .mode-col.operator .mode-cell { background: #080700; border-color: rgba(184,146,42,.1); color: rgba(255,232,160,.7); }
  .mode-col.survival .mode-cell:hover { background: rgba(192,57,43,.08); }
  .mode-col.operator .mode-cell:hover { background: rgba(184,146,42,.08); }
  .mode-cell-marker { flex-shrink: 0; font-size: 11px; margin-top: 2px; }
  .mode-col.survival .mode-cell-marker { color: #e05252; }
  .mode-col.operator .mode-cell-marker { color: var(--gold); }
  .mode-cell-text { flex: 1; }
  .mode-cell strong { display: block; font-size: 13px; font-weight: 900; margin-bottom: 2px; }
  .mode-col.survival .mode-cell strong { color: #ffbbbb; }
  .mode-col.operator .mode-cell strong { color: #ffe4a0; }
  .mode-cell small { font-size: 11px; opacity: .65; }

  /* highlighted rows */
  .mode-col.survival .mode-cell.highlight { background: rgba(192,57,43,.14); }
  .mode-col.operator .mode-cell.highlight { background: rgba(184,146,42,.14); }

  /* — MODE ASSESSMENT FOOTER — */
  .mode-footer { padding: 24px 36px; background: var(--fog); border-top: 1px solid var(--border); }
  .mode-footer-question { font-family: "DM Serif Display", serif; font-size: 20px; color: var(--ink); margin-bottom: 14px; }
  .mode-assessment-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .ma-item { background: var(--white); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; cursor: pointer; transition: all .2s; text-align: center; }
  .ma-item:hover { border-color: var(--gold); background: var(--gold-pale); transform: translateY(-1px); }
  .ma-item.selected-survival { border-color: #c0392b; background: #fdf1f0; }
  .ma-item.selected-operator { border-color: var(--gold); background: var(--gold-pale); }
  .ma-emoji { font-size: 22px; display: block; margin-bottom: 5px; }
  .ma-label { font-size: 11px; font-weight: 900; color: var(--ink); text-transform: uppercase; letter-spacing: .8px; }
  .ma-sub { font-size: 10px; color: var(--muted); margin-top: 3px; line-height: 1.4; }
  .mode-result { margin-top: 16px; padding: 16px 18px; border-radius: 14px; display: none; animation: modeReveal .4s var(--ease); }
  .mode-result.show { display: block; }
  .mode-result.survival-result { background: #fdf1f0; border: 1px solid #e8b4b4; }
  .mode-result.operator-result { background: var(--gold-pale); border: 1px solid #e8d5a3; }
  .mr-title { font-family: "DM Serif Display", serif; font-size: 18px; margin-bottom: 6px; }
  .mode-result.survival-result .mr-title { color: #8b1a1a; }
  .mode-result.operator-result .mr-title { color: var(--gold-deep); }
  .mr-body { font-size: 13px; color: var(--muted); line-height: 1.65; }
  .mr-cta { display: inline-flex; margin-top: 10px; padding: 8px 14px; background: var(--ink); color: var(--gold); border-radius: 9px; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .8px; cursor: pointer; border: none; font-family: inherit; transition: background .2s; }
  .mr-cta:hover { background: var(--gold); color: var(--ink); }

  .mode-trademark-bar { padding: 14px 36px; background: var(--ink2); display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
  .mtb-left { font-family: "DM Serif Display", serif; font-style: italic; font-size: 15px; color: rgba(255,255,255,.6); }
  .mtb-right { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,.3); }

  @media (max-width: 760px) {
    .mode-columns { grid-template-columns: 1fr; }
    .mode-col.survival { order: 1; }
    .mode-col.operator { order: 2; }
    .mode-assessment-grid { grid-template-columns: repeat(2, 1fr); }
    .mode-header, .mode-footer { padding-left: 20px; padding-right: 20px; }
    .mode-trademark-bar { padding-left: 20px; padding-right: 20px; }
    .mode-col-header, .mode-cell { padding-left: 20px; padding-right: 20px; }
  }

  /* ═══════════════════════════════════════════
     COMMAND CENTER DRILL-DOWNS
  ═══════════════════════════════════════════ */
  @keyframes drillIn { from { opacity:0; transform:translateY(8px) scale(.98); } to { opacity:1; transform:none; } }
  @keyframes drillOut { from { opacity:1; transform:none; } to { opacity:0; transform:translateY(-6px); } }
  @keyframes itemReveal { from { opacity:0; transform:translateX(-8px); } to { opacity:1; transform:none; } }

  .score-tile.drillable { cursor: pointer; transition: transform var(--dur), box-shadow var(--dur), border-color var(--dur); }
  .score-tile.drillable:hover { border-color: var(--gold); box-shadow: var(--shadow); }
  .score-tile.drillable:hover .drill-hint { opacity:1; }
  .drill-hint { font-size:9px; letter-spacing:1.5px; text-transform:uppercase; color:var(--gold); opacity:0; transition:opacity var(--dur); margin-top:8px; display:flex;align-items:center;gap:4px; }
  .drill-hint::before { content:""; width:12px;height:1px;background:var(--gold); }

  /* Drill modal overlay */
  .drill-overlay { position:fixed;inset:0;background:rgba(10,10,10,.72);z-index:900;display:none;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(4px); }
  .drill-overlay.open { display:flex;animation:fadeIn .25s var(--ease); }
  .drill-modal { background:var(--white);border-radius:var(--rxl);width:100%;max-width:720px;max-height:88vh;overflow-y:auto;box-shadow:0 40px 100px rgba(0,0,0,.35);animation:drillIn .3s var(--ease); }
  .drill-modal-header { padding:22px 26px 16px;border-bottom:1px solid var(--border);display:flex;align-items:flex-start;justify-content:space-between;gap:12px;position:sticky;top:0;background:var(--white);z-index:1;border-radius:var(--rxl) var(--rxl) 0 0; }
  .drill-modal-eyebrow { font-size:9px;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold);font-weight:900;margin-bottom:4px; }
  .drill-modal-title { font-family:"DM Serif Display",serif;font-size:24px;font-weight:400;color:var(--ink); }
  .drill-modal-close { width:32px;height:32px;border-radius:50%;border:1px solid var(--border);background:var(--fog);display:grid;place-items:center;cursor:pointer;font-size:16px;color:var(--muted);flex-shrink:0;transition:all var(--dur); }
  .drill-modal-close:hover { background:var(--ink);color:var(--white);border-color:var(--ink); }
  .drill-modal-body { padding:20px 26px 26px; }
  .drill-section { margin-bottom:20px; }
  .drill-section-title { font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);font-weight:900;margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid var(--border); }
  .drill-item { display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-radius:10px;border:1px solid var(--border);margin-bottom:7px;transition:background var(--dur),border-color var(--dur);animation:itemReveal .3s var(--ease) both; }
  .drill-item:hover { background:var(--fog);border-color:var(--border2); }
  .drill-item-left { display:flex;flex-direction:column;gap:2px; }
  .drill-item-label { font-size:13px;font-weight:700;color:var(--ink); }
  .drill-item-sub { font-size:11px;color:var(--muted); }
  .drill-item-right { text-align:right; }
  .drill-item-val { font-family:"DM Serif Display",serif;font-size:18px;font-weight:400; }
  .drill-item-val.red { color:#c0392b; }
  .drill-item-val.gold { color:var(--gold); }
  .drill-item-val.green { color:#27ae60; }
  .drill-item-val.orange { color:#e07020; }
  .drill-item-badge { font-size:10px;font-weight:900;padding:3px 7px;border-radius:5px;margin-top:3px;display:inline-block; }
  .drill-item-badge.critical { background:var(--red-bg);color:var(--red); }
  .drill-item-badge.warning { background:var(--warn-bg);color:var(--warn); }
  .drill-item-badge.healthy { background:var(--success-bg);color:var(--success); }
  .drill-insight { background:var(--ink);color:var(--white);border-radius:var(--r);padding:14px 16px;margin-top:12px; }
  .drill-insight-label { font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:4px;font-weight:900; }
  .drill-insight-text { font-family:"DM Serif Display",serif;font-style:italic;font-size:14px;color:rgba(255,255,255,.85);line-height:1.55; }

  /* ═══════════════════════════════════════════
     LIVE SYSTEM FEED
  ═══════════════════════════════════════════ */
  @keyframes feedSlide { from { opacity:0;transform:translateX(-12px); } to { opacity:1;transform:none; } }
  @keyframes feedPulse { 0%,100%{opacity:1} 50%{opacity:.6} }
  @keyframes newItemHighlight { 0%{background:rgba(184,146,42,.18)} 100%{background:transparent} }

  .system-feed-section { margin-bottom:22px; }
  .feed-header { display:flex;align-items:center;justify-content:space-between;margin-bottom:12px; }
  .feed-header-left { display:flex;align-items:center;gap:10px; }
  .feed-live-dot { width:8px;height:8px;border-radius:50%;background:#6fcf97;box-shadow:0 0 8px rgba(111,207,151,.7);animation:feedPulse 2s ease-in-out infinite; }
  .feed-title { font-family:"DM Serif Display",serif;font-size:18px;font-weight:400;color:var(--ink); }
  .feed-sub { font-size:10px;color:var(--muted);letter-spacing:1.5px;text-transform:uppercase;margin-top:2px; }
  .feed-count { background:var(--ink);color:var(--gold);border-radius:999px;padding:3px 9px;font-size:10px;font-weight:900;letter-spacing:.5px; }

  .system-feed { display:flex;flex-direction:column;gap:0;border:1px solid var(--border);border-radius:var(--rl);overflow:hidden;background:var(--white); }
  .feed-item { display:flex;align-items:flex-start;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border);transition:background var(--dur);cursor:default;animation:feedSlide .4s var(--ease) both; }
  .feed-item:last-child { border-bottom:none; }
  .feed-item:hover { background:var(--fog); }
  .feed-item.new { animation:feedSlide .4s var(--ease) both,newItemHighlight 2s var(--ease) both; }
  .feed-dot { width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:5px; }
  .feed-item.warning .feed-dot { background:#e07020;box-shadow:0 0 6px rgba(224,112,32,.5); }
  .feed-item.critical .feed-dot { background:#c0392b;box-shadow:0 0 6px rgba(192,57,43,.6);animation:feedPulse 1.5s ease-in-out infinite; }
  .feed-item.success .feed-dot { background:#27ae60;box-shadow:0 0 6px rgba(39,174,96,.4); }
  .feed-item.info .feed-dot { background:var(--gold);box-shadow:0 0 6px rgba(184,146,42,.4); }
  .feed-item-body { flex:1; }
  .feed-item-text { font-size:13px;color:var(--ink);line-height:1.5;font-weight:600; }
  .feed-item-meta { font-size:11px;color:var(--muted);margin-top:2px; }
  .feed-item-time { font-size:10px;color:var(--muted);white-space:nowrap;flex-shrink:0;letter-spacing:.5px; }
  .feed-tag { font-size:9px;font-weight:900;letter-spacing:1.5px;text-transform:uppercase;padding:2px 7px;border-radius:4px;display:inline-block;margin-left:6px; }
  .feed-tag.warn { background:var(--warn-bg);color:var(--warn); }
  .feed-tag.danger { background:var(--red-bg);color:var(--red); }
  .feed-tag.ok { background:var(--success-bg);color:var(--success); }
  .feed-tag.info { background:var(--gold-pale);color:var(--gold-deep); }
  .feed-add-btn { width:100%;padding:10px;background:var(--fog);border:none;font-family:inherit;font-size:11px;font-weight:900;color:var(--muted);letter-spacing:1px;text-transform:uppercase;cursor:pointer;transition:background var(--dur),color var(--dur); }
  .feed-add-btn:hover { background:var(--fog2);color:var(--ink); }

  /* ═══════════════════════════════════════════
     ROLE-BASED PERSPECTIVES
  ═══════════════════════════════════════════ */
  @keyframes roleSwitch { from{opacity:0;transform:scale(.97)} to{opacity:1;transform:none} }

  .role-switcher { background:var(--white);border:1px solid var(--border);border-radius:var(--rl);margin-bottom:22px;overflow:hidden;box-shadow:var(--shadow-sm); }
  .role-switcher-header { padding:16px 20px 12px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px; }
  .role-switcher-icon { width:32px;height:32px;border-radius:50%;background:var(--ink);display:grid;place-items:center;color:var(--gold);font-size:14px;flex-shrink:0; }
  .role-switcher-title { font-family:"DM Serif Display",serif;font-size:16px;font-weight:400; }
  .role-switcher-sub { font-size:11px;color:var(--muted); }
  .role-tabs { display:flex;gap:0;border-bottom:1px solid var(--border); }
  .role-tab { flex:1;padding:11px 8px;background:none;border:none;font-family:inherit;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.7px;cursor:pointer;color:var(--muted);transition:all var(--dur);border-bottom:2px solid transparent;text-align:center; }
  .role-tab:hover { color:var(--ink);background:var(--fog); }
  .role-tab.active { color:var(--ink);border-bottom-color:var(--gold);background:var(--gold-pale); }
  .role-content { padding:20px;animation:roleSwitch .3s var(--ease); }
  .role-perspective { display:none; }
  .role-perspective.active { display:block; }
  .role-eyebrow { display:inline-flex;align-items:center;gap:7px;background:var(--ink);color:var(--gold);border-radius:999px;padding:6px 12px;font-size:10px;font-weight:900;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:12px; }
  .role-eyebrow::before { content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 6px rgba(184,146,42,.6);animation:pulse 2s infinite; }
  .role-headline { font-family:"DM Serif Display",serif;font-size:22px;font-weight:400;margin-bottom:8px;color:var(--ink); }
  .role-lead { font-size:14px;color:var(--muted);line-height:1.7;margin-bottom:14px; }
  .role-metrics { display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px; }
  .role-metric { background:var(--fog);border:1px solid var(--border);border-radius:12px;padding:12px; }
  .role-metric small { font-size:9px;text-transform:uppercase;letter-spacing:1.5px;color:var(--muted);display:block;margin-bottom:4px; }
  .role-metric strong { font-family:"DM Serif Display",serif;font-size:18px;font-weight:400;color:var(--ink); }
  .role-metric strong.red { color:#c0392b; }
  .role-metric strong.gold { color:var(--gold); }
  .role-metric strong.green { color:#27ae60; }
  .role-watchlist { background:var(--fog);border-radius:var(--r);padding:14px 16px; }
  .role-watchlist-title { font-size:10px;letter-spacing:1.8px;text-transform:uppercase;color:var(--muted);font-weight:900;margin-bottom:8px; }
  .role-watch-item { display:flex;align-items:flex-start;gap:8px;padding:7px 0;border-bottom:1px solid var(--border);font-size:13px; }
  .role-watch-item:last-child { border-bottom:none; }
  .rwi-dot { width:6px;height:6px;border-radius:50%;flex-shrink:0;margin-top:5px; }
  .rwi-dot.red { background:#c0392b; }
  .rwi-dot.gold { background:var(--gold); }
  .rwi-dot.green { background:#27ae60; }
  .role-watch-item strong { color:var(--ink); }
  .role-watch-item span { color:var(--muted); }
  @media(max-width:640px) { .role-metrics{grid-template-columns:1fr 1fr} .role-tab{font-size:9px;padding:9px 4px} }

  /* ═══════════════════════════════════════════
     MISSION MODE
  ═══════════════════════════════════════════ */
  @keyframes missionUnlock { 0%{transform:scale(.9);opacity:0} 60%{transform:scale(1.04)} 100%{transform:scale(1);opacity:1} }
  @keyframes objectiveTick { 0%{transform:scale(.8);opacity:0} 100%{transform:scale(1);opacity:1} }
  @keyframes rewardGlow { 0%,100%{box-shadow:0 0 0 0 rgba(184,146,42,.5)} 50%{box-shadow:0 0 0 14px rgba(184,146,42,0)} }

  .mission-section { margin-bottom:22px; }
  .mission-header { display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;flex-wrap:wrap;gap:10px; }
  .mission-eyebrow { display:flex;align-items:center;gap:9px; }
  .mission-icon { width:36px;height:36px;border-radius:50%;background:var(--ink);display:grid;place-items:center;color:var(--gold);font-size:16px;box-shadow:0 0 0 3px rgba(184,146,42,.2);animation:rewardGlow 4s ease-in-out infinite; }
  .mission-title { font-family:"DM Serif Display",serif;font-size:20px;font-weight:400;color:var(--ink); }
  .mission-subtitle { font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:1.5px;margin-top:2px; }
  .mission-mode-toggle { display:flex;gap:6px; }
  .mission-view-btn { padding:7px 12px;border-radius:9px;font-family:inherit;font-size:10px;font-weight:900;letter-spacing:.8px;text-transform:uppercase;cursor:pointer;border:1px solid var(--border);background:var(--white);color:var(--muted);transition:all var(--dur); }
  .mission-view-btn.active { background:var(--ink);color:var(--gold);border-color:var(--ink); }

  .mission-cards { display:grid;grid-template-columns:repeat(2,1fr);gap:12px; }
  .mission-card { background:var(--white);border:1px solid var(--border);border-radius:var(--rl);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform var(--dur),box-shadow var(--dur); }
  .mission-card:hover { transform:translateY(-2px);box-shadow:var(--shadow); }
  .mission-card.locked { opacity:.55;pointer-events:none; }
  .mission-card.completed .mission-card-banner { background:linear-gradient(135deg,#1a5c3a,#27ae60); }
  .mission-card-banner { background:linear-gradient(135deg,var(--ink),#1c1814);padding:16px 18px;position:relative;overflow:hidden; }
  .mission-card-banner::after { content:"";position:absolute;top:-30px;right:-30px;width:100px;height:100px;border-radius:50%;background:radial-gradient(circle,rgba(184,146,42,.18),transparent 65%); }
  .mission-card-number { font-size:9px;letter-spacing:2.5px;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:4px; }
  .mission-card-name { font-family:"DM Serif Display",serif;font-size:18px;color:var(--white);line-height:1.2;font-style:italic; }
  .mission-card-body { padding:16px 18px; }
  .mission-objectives { margin-bottom:12px; }
  .mission-obj-title { font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);font-weight:900;margin-bottom:8px; }
  .mission-obj { display:flex;align-items:flex-start;gap:9px;padding:6px 0;border-bottom:1px solid var(--border);font-size:12px;cursor:pointer;transition:color var(--dur); }
  .mission-obj:last-child { border-bottom:none; }
  .mission-obj-check { width:18px;height:18px;border-radius:50%;border:1.5px solid var(--border);display:grid;place-items:center;flex-shrink:0;transition:all var(--dur);font-size:10px; }
  .mission-obj.done .mission-obj-check { background:var(--success);border-color:var(--success);color:var(--white);animation:objectiveTick .3s var(--ease); }
  .mission-obj.done span { text-decoration:line-through;color:var(--muted); }
  .mission-reward { background:linear-gradient(135deg,var(--gold-pale),#fff);border:1px solid #e8d5a3;border-radius:var(--r);padding:12px 14px;text-align:center;margin-top:4px; }
  .mission-reward-label { font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--gold-deep);font-weight:900;margin-bottom:4px; }
  .mission-reward-text { font-family:"DM Serif Display",serif;font-size:14px;color:var(--ink);font-style:italic; }
  .mission-complete-badge { background:linear-gradient(135deg,rgba(196,154,46,.15),rgba(196,154,46,.05));border:1px solid rgba(196,154,46,.5);border-radius:var(--r);padding:12px 16px;display:flex;align-items:center;gap:10px;margin-top:8px;animation:goldGlow 3s ease-in-out infinite; }
  .mission-complete-badge span { font-size:18px; }
  .mission-complete-badge strong { font-size:11px;font-weight:900;color:var(--gold);text-transform:uppercase;letter-spacing:1.5px; }
  @media(max-width:640px) { .mission-cards{grid-template-columns:1fr} }

  /* ═══════════════════════════════════════════
     EXECUTIVE INTELLIGENCE
  ═══════════════════════════════════════════ */
  @keyframes execReveal { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none} }

  .exec-intel-section { margin-bottom:22px; }
  .exec-intel-header { margin-bottom:16px; }
  .exec-intel-eyebrow { font-size:10px;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold);font-weight:900;margin-bottom:6px; }
  .exec-intel-title { font-family:"DM Serif Display",serif;font-size:26px;font-weight:400;color:var(--ink);line-height:1.15; }
  .exec-intel-lead { font-size:14px;color:var(--muted);line-height:1.7;margin-top:6px;max-width:700px; }

  .exec-intel-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:12px; }
  .exec-card { background:var(--white);border:1px solid var(--border);border-radius:var(--rl);overflow:hidden;box-shadow:var(--shadow-sm);animation:execReveal .5s var(--ease) both; }
  .exec-card-top { padding:18px 20px 14px;border-bottom:1px solid var(--border); }
  .exec-card-lens { font-size:9px;letter-spacing:2.5px;text-transform:uppercase;font-weight:900;margin-bottom:5px; }
  .exec-card.amazon .exec-card-lens { color:#ff9900; }
  .exec-card.ibm .exec-card-lens { color:#0f62fe; }
  .exec-card.cfo .exec-card-lens { color:#c0392b; }
  .exec-card.bank .exec-card-lens { color:#1a5c3a; }
  .exec-card-question { font-family:"DM Serif Display",serif;font-size:18px;font-weight:400;color:var(--ink);line-height:1.25; }
  .exec-card-body { padding:14px 20px 18px; }
  .exec-signal { display:flex;align-items:flex-start;gap:10px;padding:9px 0;border-bottom:1px solid var(--border);font-size:13px; }
  .exec-signal:last-child { border-bottom:none; }
  .exec-signal-marker { width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:11px;flex-shrink:0;margin-top:1px; }
  .exec-card.amazon .exec-signal-marker { background:#fff3e0;color:#ff9900; }
  .exec-card.ibm .exec-signal-marker { background:#e8f1ff;color:#0f62fe; }
  .exec-card.cfo .exec-signal-marker { background:var(--red-bg);color:var(--red); }
  .exec-card.bank .exec-signal-marker { background:var(--success-bg);color:var(--success); }
  .exec-signal-text strong { color:var(--ink);display:block;margin-bottom:2px; }
  .exec-signal-text span { color:var(--muted);font-size:12px; }
  .exec-card-footer { padding:10px 20px 14px;background:var(--fog);font-size:12px;color:var(--muted);font-style:italic;line-height:1.55;border-top:1px solid var(--border); }
  @media(max-width:640px) { .exec-intel-grid{grid-template-columns:1fr} }

  /* ═══════════════════════════════════════════
     MARGIN PROTECTION BANNER
  ═══════════════════════════════════════════ */
  @keyframes mpPulse { 0%,100%{border-color:rgba(184,146,42,.3)} 50%{border-color:rgba(184,146,42,.7)} }

  .margin-protection-banner { background:linear-gradient(135deg,var(--ink) 0%,#14110d 60%,#1a1409 100%);border:1px solid rgba(196,154,46,.3);border-radius:var(--rl);padding:28px 32px;margin-bottom:22px;position:relative;overflow:hidden;animation:mpPulse 4s ease-in-out infinite; }
  .margin-protection-banner::before { content:"";position:absolute;top:-60px;right:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(196,154,46,.18),transparent 65%); }
  .margin-protection-banner::after { content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(196,154,46,.02) 0px,transparent 1px,transparent 40px);pointer-events:none; }
  .mpb-label { font-size:9px;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold);font-weight:900;margin-bottom:8px; }
  .mpb-title { font-family:"DM Serif Display",serif;font-size:24px;color:var(--white);line-height:1.15;margin-bottom:6px;position:relative; }
  .mpb-sub { font-size:13px;color:rgba(255,255,255,.6);line-height:1.65;margin-bottom:16px;max-width:600px;position:relative; }
  .mpb-stats { display:flex;gap:20px;flex-wrap:wrap;position:relative; }
  .mpb-stat { display:flex;flex-direction:column;gap:2px; }
  .mpb-stat-val { font-family:"DM Serif Display",serif;font-size:22px;color:var(--gold); }
  .mpb-stat-label { font-size:10px;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,.45); }
  .mpb-divider { width:1px;background:rgba(255,255,255,.1);align-self:stretch; }

  /* ═══════════════════════════════════════════
     LAYERED UX — COLLAPSIBLE SECTIONS
  ═══════════════════════════════════════════ */
  @keyframes collapseOpen { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }

  .collapse-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 22px; background: var(--white); border: 1px solid var(--border);
    border-radius: var(--rl); cursor: pointer; user-select: none;
    transition: background var(--dur), box-shadow var(--dur), border-radius var(--dur);
    gap: 12px; position: relative; z-index: 1;
  }
  .collapse-header:hover { background: var(--fog); box-shadow: var(--shadow-sm); }
  .collapse-header.open { border-radius: var(--rl) var(--rl) 0 0; border-bottom-color: transparent; }
  .collapse-header-left { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
  .collapse-icon { width: 32px; height: 32px; border-radius: 50%; background: var(--fog); border: 1px solid var(--border); display: grid; place-items: center; font-size: 15px; flex-shrink: 0; transition: background var(--dur); }
  .collapse-header.open .collapse-icon { background: var(--gold-pale); border-color: #e8d5a3; }
  .collapse-title { font-family: "DM Serif Display", serif; font-size: 18px; font-weight: 400; color: var(--ink); }
  .collapse-sub { font-size: 11px; color: var(--muted); margin-top: 1px; }
  .collapse-meta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
  .collapse-badge { font-size: 9px; font-weight: 900; letter-spacing: 1.2px; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; }
  .collapse-badge.warn { background: var(--warn-bg); color: var(--warn); }
  .collapse-badge.danger { background: var(--red-bg); color: var(--red); }
  .collapse-badge.healthy { background: var(--success-bg); color: var(--success); }
  .collapse-badge.info { background: var(--gold-pale); color: var(--gold-deep); }
  .collapse-badge.neutral { background: var(--fog2); color: var(--muted); }
  .collapse-chevron { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--border); display: grid; place-items: center; color: var(--muted); font-size: 11px; flex-shrink: 0; transition: transform var(--dur), background var(--dur), color var(--dur); }
  .collapse-header.open .collapse-chevron { transform: rotate(180deg); background: var(--ink); color: var(--gold); border-color: var(--ink); }
  .collapse-body { display: none; border: 1px solid var(--border); border-top: none; border-radius: 0 0 var(--rl) var(--rl); background: var(--white); overflow: hidden; }
  .collapse-body.open { display: block; animation: collapseOpen .25s var(--ease); }
  .collapse-body-inner { padding: 22px; }
  .collapse-header.compact { padding: 12px 18px; }
  .collapse-header.compact .collapse-title { font-family: "DM Sans", sans-serif; font-size: 14px; font-weight: 700; }
  .section-block { margin-bottom: 14px; }

  /* ═══ COMMAND DASHBOARD — COMPACT COMPONENTS ═══ */
  .cmd-metrics { display: flex; align-items: center; background: var(--white); border: 1px solid var(--border); border-radius: var(--rl); padding: 16px 24px; margin-bottom: 14px; gap: 0; }
  .cmd-metric { flex: 1; text-align: center; }
  .cmd-metric-val { display: block; font-family: "DM Serif Display", serif; font-size: 26px; font-weight: 400; color: var(--gold); line-height: 1; }
  .cmd-metric-lbl { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--muted); margin-top: 3px; }
  .cmd-metric-div { width: 1px; background: var(--border); align-self: stretch; margin: 0 4px; }

  /* ACCORDION */
  .cmd-accordion { background: var(--white); border: 1px solid var(--border); border-radius: var(--rl); margin-bottom: 10px; overflow: hidden; }
  .cmd-acc-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; cursor: pointer; transition: background var(--dur); user-select: none; }
  .cmd-acc-header:hover { background: var(--fog); }
  .cmd-acc-header.open { background: var(--fog); border-bottom: 1px solid var(--border); }
  .cmd-acc-left { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
  .cmd-acc-icon { font-size: 18px; flex-shrink: 0; }
  .cmd-acc-title { font-family: "DM Serif Display", serif; font-size: 17px; font-weight: 400; color: var(--ink); }
  .cmd-acc-sub { font-size: 11px; color: var(--muted); margin-top: 1px; }
  .cmd-acc-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
  .cmd-acc-badge { font-size: 9px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; }
  .cmd-acc-badge.danger { background: var(--red-bg); color: var(--red); }
  .cmd-acc-badge.warn { background: var(--warn-bg); color: var(--warn); }
  .cmd-acc-badge.neutral { background: var(--fog2); color: var(--muted); }
  .cmd-acc-chevron { color: var(--muted); font-size: 14px; transition: transform var(--dur); width: 24px; text-align: center; }
  .cmd-acc-header.open .cmd-acc-chevron { transform: rotate(180deg); color: var(--gold); }
  .cmd-acc-body { display: none; }
  .cmd-acc-body.open { display: block; animation: fadeUp .2s var(--ease); }
  .cmd-acc-inner { padding: 18px 20px; }

  /* ALERT ROWS */
  .acc-alert-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--fog2); font-size: 13px; }
  .acc-alert-row:last-child { border-bottom: none; }
  .acc-alert-row span:first-child { flex-shrink: 0; font-size: 14px; margin-top: 1px; }
  .acc-alert-row.critical { color: var(--red); }
  .acc-alert-row.critical strong { color: var(--red); }
  .acc-alert-row.warn strong { color: var(--warn); }
  .acc-alert-row.ok { color: var(--muted); }
  .acc-alert-row.ok strong { color: var(--success); }
  .cmd-acc-grid4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
  .cag-cell { background: var(--fog); border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; }
  .cag-cell small { font-size: 9px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); display: block; margin-bottom: 3px; }
  .cag-cell strong { font-family: "DM Serif Display", serif; font-size: 14px; }
  .cag-cell.green strong { color: #1a5c3a; }
  .cag-cell.amber strong { color: var(--warn); }
  .cag-cell.red strong { color: var(--red); }

  /* LEAK COMPACT LIST */
  .leak-compact-list { display: flex; flex-direction: column; gap: 0; }
  .lcl-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--fog2); }
  .lcl-num { font-size: 10px; font-weight: 900; color: var(--muted); width: 20px; flex-shrink: 0; }
  .lcl-content { flex: 1; }
  .lcl-content strong { display: block; font-size: 13px; font-weight: 700; color: var(--ink); }
  .lcl-content span { font-size: 11px; color: var(--muted); }
  .lcl-val { font-family: "DM Serif Display", serif; font-size: 16px; color: var(--red); flex-shrink: 0; }
  .lcl-total { display: flex; justify-content: space-between; align-items: center; padding: 12px 0 0; font-size: 12px; color: var(--muted); }
  .lcl-total strong { font-family: "DM Serif Display", serif; font-size: 22px; color: var(--red); }

  /* LESSON COMPACT GRID */
  .lesson-compact-grid { display: flex; flex-direction: column; }
  .lcg-row { display: flex; align-items: center; gap: 14px; padding: 12px 20px; border-bottom: 1px solid var(--fog2); cursor: pointer; transition: background var(--dur); }
  .lcg-row:last-child { border-bottom: none; }
  .lcg-row:hover { background: var(--fog); }
  .lcg-num { font-size: 11px; font-weight: 900; color: var(--muted); width: 22px; flex-shrink: 0; }
  .lcg-info { flex: 1; }
  .lcg-info strong { display: block; font-size: 13px; font-weight: 700; color: var(--ink); }
  .lcg-info small { font-size: 11px; color: var(--muted); }
  .lcg-tag { font-size: 9px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; padding: 3px 7px; border-radius: 999px; background: var(--fog2); color: var(--muted); white-space: nowrap; flex-shrink: 0; }
  .lcg-tag.start { background: var(--gold-pale); color: var(--gold-deep); }
  .lcg-tag.sim { background: var(--ink); color: var(--gold); }

  /* MISSION COMPACT */
  .mission-compact { display: flex; flex-direction: column; }
  .mc-item { border-bottom: 1px solid var(--fog2); padding: 14px 20px; }
  .mc-item:last-child { border-bottom: none; }
  .mc-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
  .mc-num { font-size: 9px; font-weight: 900; letter-spacing: 1.5px; background: var(--ink); color: var(--gold); border-radius: 999px; padding: 2px 7px; }
  .mc-header strong { font-size: 13px; font-weight: 700; }
  .mc-obj { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 12px; color: var(--muted); cursor: pointer; transition: color var(--dur); }
  .mc-obj:hover { color: var(--ink); }
  .mc-obj.done { color: var(--success); text-decoration: line-through; opacity: .6; }
  .mc-check { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--border2); flex-shrink: 0; transition: all var(--dur); }
  .mc-obj.done .mc-check { background: var(--success); border-color: var(--success); }

  /* WIN LIST */
  .win-list { display: flex; flex-direction: column; }
  .win-item { display: flex; align-items: center; gap: 12px; padding: 11px 20px; border-bottom: 1px solid var(--fog2); cursor: pointer; font-size: 13px; color: var(--muted); transition: background var(--dur), color var(--dur); }
  .win-item:last-child { border-bottom: none; }
  .win-item:hover { background: var(--fog); color: var(--ink); }
  .win-item.claimed { color: var(--success); background: var(--success-bg); }
  .win-check { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--border2); flex-shrink: 0; transition: all .2s; display: grid; place-items: center; }
  .win-item.claimed .win-check { background: var(--success); border-color: var(--success); }
  .win-item.claimed .win-check::after { content: "✓"; font-size: 10px; color: white; font-weight: 900; }

  /* CMD ACTION BTN */
  .cmd-action-btn { display: block; width: 100%; margin-top: 14px; padding: 12px; background: var(--gold); color: var(--ink); border: none; border-radius: var(--r); font-family: inherit; font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .8px; cursor: pointer; transition: background var(--dur), transform var(--dur); }
  .cmd-action-btn:hover { background: var(--gold2); transform: translateY(-1px); }

  /* ═══ LESSON STEP PAGINATION ═══ */
  .lesson-step-nav { display: flex; align-items: center; gap: 0; background: var(--white); border: 1px solid var(--border); border-radius: var(--rl); margin-bottom: 20px; overflow: hidden; }
  .lesson-step { flex: 1; padding: 12px 8px; text-align: center; cursor: pointer; border-right: 1px solid var(--border); transition: background var(--dur), color var(--dur); position: relative; }
  .lesson-step:last-child { border-right: none; }
  .lesson-step.active { background: var(--ink); }
  .lesson-step.done { background: var(--fog); }
  .lesson-step-num { font-size: 9px; font-weight: 900; letter-spacing: 1.5px; color: var(--muted); text-transform: uppercase; display: block; }
  .lesson-step.active .lesson-step-num { color: var(--gold); }
  .lesson-step.done .lesson-step-num { color: var(--success); }
  .lesson-step-label { font-size: 11px; font-weight: 700; color: var(--ink); display: block; margin-top: 2px; }
  .lesson-step.active .lesson-step-label { color: var(--white); }
  .lesson-step.done .lesson-step-label { color: var(--muted); }
  .lesson-step-panel { display: none; }
  .lesson-step-panel.active { display: block; animation: fadeUp .3s var(--ease); }
  .step-nav-row { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
  .step-nav-btn { padding: 10px 18px; border-radius: var(--r); font-family: inherit; font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .6px; cursor: pointer; transition: all var(--dur); border: 1px solid var(--border); background: var(--fog); color: var(--muted); }
  .step-nav-btn:hover { border-color: var(--gold); color: var(--gold); }
  .step-nav-btn.primary { background: var(--gold); color: var(--ink); border-color: var(--gold); }
  .step-nav-btn.primary:hover { background: var(--gold2); }

  /* Scoreboard summary pills (shown in collapsed header) */
  .sss-pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; font-size: 10px; font-weight: 700; border: 1px solid var(--border); background: var(--fog2); }
  .sss-pill .sss-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
  .sss-pill.critical { background: var(--red-bg); border-color: #e8b4b4; color: var(--red); }
  .sss-pill.critical .sss-dot { background: var(--red); }
  .sss-pill.warn { background: var(--warn-bg); border-color: #ead49a; color: var(--warn); }
  .sss-pill.warn .sss-dot { background: var(--gold); }
  .sss-pill.ok { background: var(--success-bg); border-color: #b4d4b4; color: var(--success); }
  .sss-pill.ok .sss-dot { background: #27ae60; }

  /* ═══════════════════════════════════════════
     LAYERED UX — PROGRESSIVE REVEAL CARDS
  ═══════════════════════════════════════════ */
  @keyframes revealLayer { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

  .reveal-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--rl); margin-bottom: 14px; box-shadow: var(--shadow-sm); overflow: hidden; }
  .reveal-summary { display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 18px 22px; gap: 16px; cursor: pointer; transition: background var(--dur); }
  .reveal-summary:hover { background: var(--fog); }
  .reveal-label { font-size: 10px; text-transform: uppercase; letter-spacing: 1.8px; color: var(--muted); font-weight: 900; margin-bottom: 4px; }
  .reveal-headline { font-family: "DM Serif Display", serif; font-size: 20px; font-weight: 400; color: var(--ink); line-height: 1.2; }
  .reveal-tagline { font-size: 13px; color: var(--muted); margin-top: 4px; line-height: 1.5; }
  .reveal-summary-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
  .reveal-stat { font-family: "DM Serif Display", serif; font-size: 26px; font-weight: 400; text-align: right; }
  .reveal-stat.red { color: #c0392b; } .reveal-stat.gold { color: var(--gold); } .reveal-stat.green { color: #27ae60; }
  .reveal-expand-btn { display: flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; color: var(--gold); background: var(--gold-pale); border: 1px solid #e8d5a3; border-radius: 999px; padding: 5px 10px; transition: all var(--dur); white-space: nowrap; cursor: pointer; }
  .reveal-expand-btn.expanded { background: var(--ink); color: var(--gold); border-color: var(--ink); }
  .reveal-detail { display: none; border-top: 1px solid var(--border); padding: 18px 22px; background: var(--fog); }
  .reveal-detail.open { display: block; animation: revealLayer .25s var(--ease); }

  /* ═══════════════════════════════════════════
     LAYERED UX — LESSON SUB-TABS
  ═══════════════════════════════════════════ */
  .lesson-tab-bar { display: flex; border: 1px solid var(--border); border-radius: var(--rl) var(--rl) 0 0; overflow: hidden; background: var(--white); flex-wrap: wrap; }
  .lesson-tab { flex: 1; min-width: 80px; padding: 13px 8px; background: none; border: none; font-family: inherit; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .6px; cursor: pointer; color: var(--muted); transition: all var(--dur); border-bottom: 2px solid transparent; text-align: center; border-right: 1px solid var(--border); }
  .lesson-tab:last-child { border-right: none; }
  .lesson-tab:hover { background: var(--fog); color: var(--ink); }
  .lesson-tab.active { color: var(--ink); border-bottom-color: var(--gold); background: var(--gold-pale); }
  .lesson-tab-count { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; background: var(--fog2); color: var(--muted); border-radius: 50%; font-size: 8px; margin-left: 4px; }
  .lesson-tab.active .lesson-tab-count { background: var(--gold); color: var(--ink); }
  .lesson-tab-panel { display: none; }
  .lesson-tab-panel.active { display: block; animation: revealLayer .2s var(--ease); }
  .lesson-tab-wrap { border: 1px solid var(--border); border-top: none; border-radius: 0 0 var(--rl) var(--rl); padding: 24px; margin-bottom: 22px; background: var(--white); }

  /* ═══════════════════════════════════════════
     LAYERED UX — HOVER INTELLIGENCE
  ═══════════════════════════════════════════ */
  @keyframes tooltipPop { from { opacity:0; transform:translateX(-50%) translateY(4px) scale(.97); } to { opacity:1; transform:translateX(-50%) translateY(0) scale(1); } }

  .has-intel { position: relative; }
  .has-intel::after { content: attr(data-intel); position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(4px); background: var(--ink); color: var(--white); font-size: 12px; line-height: 1.5; padding: 10px 14px; border-radius: 10px; width: max-content; max-width: 280px; pointer-events: none; opacity: 0; transition: opacity .18s var(--ease), transform .18s var(--ease); border: 1px solid rgba(184,146,42,.25); font-family: "DM Sans", sans-serif; font-weight: 400; z-index: 50; box-shadow: 0 8px 24px rgba(0,0,0,.3); white-space: normal; }
  .has-intel::before { content: ""; position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--ink); pointer-events: none; opacity: 0; transition: opacity .18s; z-index: 51; }
  .has-intel:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); animation: tooltipPop .18s var(--ease); }
  .has-intel:hover::before { opacity: 1; }

  .key-term { border-bottom: 1.5px dashed var(--gold); cursor: help; transition: color var(--dur); position: relative; }
  .key-term:hover { color: var(--gold-deep); }
  .key-term::after { content: attr(data-def); position: absolute; bottom: calc(100% + 8px); left: 0; background: var(--ink); color: var(--white); font-size: 12px; line-height: 1.5; padding: 9px 12px; border-radius: 9px; width: max-content; max-width: 260px; pointer-events: none; opacity: 0; transition: opacity .18s; border: 1px solid rgba(184,146,42,.3); font-style: normal; font-weight: 400; z-index: 40; box-shadow: 0 8px 24px rgba(0,0,0,.3); white-space: normal; }
  .key-term:hover::after { opacity: 1; }

  /* ═══════════════════════════════════════════
     LAYERED UX — WHY THIS MATTERS TOGGLES
  ═══════════════════════════════════════════ */
  .why-wrap { margin-bottom: 14px; }
  .why-toggle { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; background: var(--gold-pale); border: 1px solid #e8d5a3; border-radius: 999px; font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .8px; color: var(--gold-deep); cursor: pointer; transition: all var(--dur); margin-top: 6px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
  .why-toggle:hover { background: var(--ink); color: var(--gold); border-color: var(--ink); }
  .why-toggle.open { background: var(--ink); color: var(--gold); border-color: var(--ink); }
  .why-toggle::before { content: "▸ "; font-size: 9px; }
  .why-toggle.open::before { content: "▾ "; }
  .why-body { display: none; background: var(--ink); color: rgba(255,255,255,.82); border-radius: 0 10px 10px 10px; padding: 14px 16px; font-size: 13px; line-height: 1.65; border-left: 3px solid var(--gold); }
  .why-body.open { display: block; animation: revealLayer .2s var(--ease); }
  .why-body strong { color: var(--gold); }

  /* ═══════════════════════════════════════════
     LAYERED UX — STICKY LESSON HEADER
  ═══════════════════════════════════════════ */
  .lesson-sticky-header { position: sticky; top: 0; z-index: 10; background: rgba(245,243,239,.96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); padding: 10px 36px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -36px -36px 24px; flex-wrap: wrap; }
  .lsh-left { display: flex; align-items: center; gap: 10px; }
  .lsh-badge { background: var(--ink); color: var(--gold); border-radius: 999px; padding: 4px 10px; font-size: 9px; font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase; }
  .lsh-title { font-family: "DM Serif Display", serif; font-size: 16px; color: var(--ink); }
  .lsh-right { display: flex; align-items: center; gap: 6px; }
  .lsh-tab { padding: 6px 12px; border-radius: 8px; font-family: inherit; font-size: 10px; font-weight: 900; letter-spacing: .7px; text-transform: uppercase; cursor: pointer; border: 1px solid var(--border); background: var(--white); color: var(--muted); transition: all var(--dur); }
  .lsh-tab:hover { background: var(--fog2); color: var(--ink); }
  .lsh-tab.active { background: var(--ink); color: var(--gold); border-color: var(--ink); }
  @media(max-width:768px) { .lesson-sticky-header { padding: 10px 18px; margin: -18px -18px 18px; } .lsh-title { display: none; } }

  /* ═══════════════════════════════════════════
     LAYERED UX — EXPANDABLE TABLE ROWS
  ═══════════════════════════════════════════ */
  .intel-table { width: 100%; border-collapse: separate; border-spacing: 0; }
  .intel-table th { font-size: 9px; text-transform: uppercase; letter-spacing: 1.8px; color: var(--muted); padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--border); font-weight: 900; background: var(--fog); }
  .intel-table td { padding: 11px 12px; border-bottom: 1px solid var(--border); font-size: 13px; color: var(--ink); vertical-align: middle; }
  .intel-table tr:last-child td { border-bottom: none; }
  .intel-table tbody tr { transition: background var(--dur); cursor: pointer; }
  .intel-table tbody tr:hover td { background: var(--fog); }
  .intel-table .row-expand { display: none; background: var(--fog); cursor: default; }
  .intel-table .row-expand td { border-bottom: 1px solid var(--border2); }
  .intel-table .row-expand.open { display: table-row; animation: revealLayer .2s var(--ease); }
  .expand-inner { padding: 4px 0 4px 12px; font-size: 12px; color: var(--muted); line-height: 1.65; border-left: 3px solid var(--gold); }
  .it-status { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 5px; font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .8px; }
  .it-status.red { background: var(--red-bg); color: var(--red); }
  .it-status.gold { background: var(--warn-bg); color: var(--warn); }
  .it-status.green { background: var(--success-bg); color: var(--success); }
  .it-expand-icon { color: var(--muted); font-size: 10px; transition: transform var(--dur); display: inline-block; }
  .it-expand-icon.open { transform: rotate(90deg); color: var(--gold); }


  /* ═══ HARVARD CASE METHOD CSS ═══ */
  .case-screen { display:none }
  .case-screen.active { display:block; animation:fadeUp .4s var(--ease) }

  .case-cover { background:linear-gradient(135deg,var(--ink) 0%,#14110d 100%); color:var(--white); padding:52px 44px; position:relative; overflow:hidden; border-radius:var(--rxl); margin-bottom:20px }
  .case-cover::before { content:""; position:absolute; inset:0; background:repeating-linear-gradient(0deg,rgba(255,255,255,.015) 0,rgba(255,255,255,.015) 1px,transparent 1px,transparent 40px),repeating-linear-gradient(90deg,rgba(255,255,255,.015) 0,rgba(255,255,255,.015) 1px,transparent 1px,transparent 40px); pointer-events:none }
  .case-cover-label { font-size:9px; letter-spacing:3px; text-transform:uppercase; color:rgba(255,255,255,.35); margin-bottom:24px; font-family:monospace }
  .case-cover-num { font-family:"DM Serif Display",serif; font-size:clamp(52px,8vw,80px); line-height:1; font-style:italic; color:var(--white); margin-bottom:8px }
  .case-cover-title { font-family:"DM Serif Display",serif; font-size:clamp(17px,2.5vw,24px); color:rgba(255,255,255,.65); font-weight:400; margin-bottom:32px; line-height:1.3 }
  .case-cover-meta { display:flex; gap:28px; flex-wrap:wrap; margin-bottom:36px }
  .case-meta-item { display:flex; flex-direction:column; gap:3px }
  .case-meta-label { font-size:9px; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,.3); font-family:monospace }
  .case-meta-val { font-size:12px; color:rgba(255,255,255,.8); font-weight:500 }
  .case-cover-quote { border-left:2px solid rgba(255,255,255,.2); padding-left:18px; font-family:"DM Serif Display",serif; font-style:italic; font-size:15px; color:rgba(255,255,255,.55); max-width:480px; line-height:1.7; margin-bottom:36px }
  .case-quote-attr { font-size:11px; font-style:normal; display:block; margin-top:6px; color:rgba(255,255,255,.3); font-family:sans-serif }
  .case-begin-btn { display:inline-flex; align-items:center; gap:8px; background:var(--gold); color:var(--ink); padding:13px 26px; border:none; font-family:inherit; font-size:12px; font-weight:900; text-transform:uppercase; letter-spacing:1.2px; cursor:pointer; border-radius:8px; transition:opacity .2s }
  .case-begin-btn:hover { opacity:.85 }

  .case-body { padding:0 0 32px }
  .case-eyebrow { font-size:10px; letter-spacing:3px; text-transform:uppercase; color:var(--muted); margin-bottom:18px; display:flex; align-items:center; gap:10px; font-family:monospace }
  .case-eyebrow::after { content:""; flex:1; height:1px; background:var(--border) }

  .case-scene-card { background:var(--white); border:1px solid var(--border); border-radius:var(--r); padding:28px; margin-bottom:20px; position:relative }
  .case-scene-card::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--ink); border-radius:var(--r) 0 0 var(--r) }
  .case-scene-time { font-size:9px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); margin-bottom:10px; font-family:monospace }
  .case-scene-text { font-family:"DM Serif Display",serif; font-size:16px; line-height:1.85; color:var(--ink) }
  .case-scene-text em { font-style:italic; color:var(--muted) }

  .case-data-box { background:var(--ink); color:var(--white); border-radius:var(--r); padding:22px 26px; margin:20px 0; font-family:monospace; font-size:12px }
  .case-data-title { font-size:9px; letter-spacing:3px; text-transform:uppercase; color:rgba(255,255,255,.35); margin-bottom:14px }
  .case-data-row { display:flex; justify-content:space-between; align-items:baseline; padding:7px 0; border-bottom:1px solid rgba(255,255,255,.07) }
  .case-data-row:last-child { border-bottom:none }
  .case-data-key { color:rgba(255,255,255,.55) }
  .case-data-val { color:var(--white); font-weight:500 }
  .case-data-val.warn { color:#f0b429 }
  .case-data-val.danger { color:#ff9d9d }
  .case-data-val.ok { color:#6fcf97 }

  .case-dp { background:var(--gold-pale); border:1px solid #e8d5a3; border-radius:var(--r); padding:26px 28px; margin:20px 0 }
  .case-dp-label { font-size:9px; letter-spacing:3px; text-transform:uppercase; color:var(--gold-deep); margin-bottom:10px; font-family:monospace }
  .case-dp-question { font-family:"DM Serif Display",serif; font-size:19px; line-height:1.4; color:var(--ink); margin-bottom:20px; font-weight:700 }
  .case-dp-opts { display:flex; flex-direction:column; gap:9px }
  .case-dp-opt { background:var(--white); border:1.5px solid var(--border); border-radius:var(--r); padding:13px 16px; cursor:pointer; transition:all .2s; display:flex; align-items:flex-start; gap:10px; font-size:13px; color:var(--ink); text-align:left; font-family:inherit; width:100% }
  .case-dp-opt:hover { border-color:var(--ink); background:var(--fog) }
  .case-dp-opt.case-correct { border-color:var(--success); background:var(--success-bg); color:var(--success) }
  .case-dp-opt.case-wrong { border-color:var(--red); background:var(--red-bg); color:var(--red) }
  .case-dp-opt.case-faded { opacity:.4; pointer-events:none }
  .case-dp-letter { font-family:monospace; font-size:11px; font-weight:700; flex-shrink:0; width:18px; margin-top:1px }

  .case-hidden { display:none }
  .case-hidden.case-visible { display:block; animation:fadeUp .3s var(--ease) }

  .case-reveal-block { border:1px solid var(--border); border-radius:var(--r); overflow:hidden; margin:20px 0 }
  .case-reveal-trigger { width:100%; padding:14px 18px; background:var(--fog2); border:none; font-family:monospace; font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); cursor:pointer; display:flex; align-items:center; justify-content:space-between; transition:background .2s }
  .case-reveal-trigger:hover { background:var(--fog3,#dedad2) }
  .case-chevron { font-size:16px; transition:transform .3s; display:inline-block }
  .case-reveal-trigger.open .case-chevron { transform:rotate(180deg) }
  .case-reveal-content { display:none; padding:22px; background:var(--white); border-top:1px solid var(--border) }
  .case-reveal-content.open { display:block }
  .case-rp { font-size:13px; color:var(--muted); line-height:1.7; margin-bottom:11px }

  .case-journal { border:1px solid var(--border); border-radius:var(--r); overflow:hidden; margin:18px 0 }
  .case-journal-header { background:var(--fog2); padding:11px 16px; font-family:monospace; font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--muted) }
  .case-textarea { width:100%; border:none; padding:16px; font-family:"DM Serif Display",serif; font-size:14px; line-height:1.7; background:var(--white); resize:vertical; min-height:90px; color:var(--ink); outline:none }
  .case-textarea::placeholder { color:#bbb; font-style:italic }

  .case-math-wrap { background:var(--white); border:1px solid var(--border); border-radius:var(--r); padding:24px; margin-bottom:16px }
  .case-math-table { width:100%; border-collapse:collapse; font-family:monospace; font-size:12px }
  .case-math-row { border-bottom:1px solid var(--border); opacity:0; transform:translateY(5px); transition:opacity .4s,transform .4s }
  .case-math-row.case-shown { opacity:1; transform:none }
  .case-math-row td { padding:10px 0 }
  .case-math-row td:last-child { text-align:right; font-weight:500 }
  .case-math-sub td { color:var(--muted); font-size:11px }
  .case-math-total { border-top:2px solid var(--ink) !important; border-bottom:none !important }
  .case-math-total td { font-size:15px; color:var(--red); padding-top:13px !important }
  .case-math-margin td { font-size:11px; color:var(--muted); border-bottom:none !important }
  .case-val-ok { color:var(--success) }
  .case-val-danger { color:var(--red) }

  .case-run-btn { display:block; width:100%; padding:15px 20px; background:var(--ink); color:var(--gold); border:none; border-radius:var(--r); font-family:inherit; font-size:13px; font-weight:900; text-transform:uppercase; letter-spacing:.8px; cursor:pointer; margin-bottom:20px; transition:opacity .2s, transform .2s; text-align:left; }
  .case-run-btn:hover { opacity:.88; transform:translateY(-1px); }
  .case-math-primer { background:var(--gold-pale); border:1px solid #e8d5a3; border-radius:var(--r); padding:16px 20px; margin-bottom:0; border-bottom-left-radius:0; border-bottom-right-radius:0; border-bottom:none; }
  .case-math-primer p { font-size:13px; color:var(--gold-deep); line-height:1.6; margin:0; }
  .case-math-primer strong { display:block; font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--gold); margin-bottom:5px; }
  .case-math-wrap-bordered { border:1px solid #e8d5a3; border-top:none; border-radius:0 0 var(--r) var(--r); overflow:hidden; margin-bottom:4px; }
  .case-math-wrap { background:var(--white); padding:24px; }
  .case-run-btn:hover { opacity:.85 }
  .case-run-btn:disabled { opacity:.4; cursor:not-allowed }

  .case-principle { background:var(--ink); color:var(--white); border-radius:var(--r); padding:28px; margin:20px 0 }
  .case-principle-label { font-size:9px; letter-spacing:3px; text-transform:uppercase; color:rgba(255,255,255,.35); margin-bottom:12px; font-family:monospace }
  .case-principle-text { font-family:"DM Serif Display",serif; font-size:20px; line-height:1.45; color:var(--white); font-style:italic; margin-bottom:8px }
  .case-principle-attr { font-size:11px; color:rgba(255,255,255,.4); font-family:monospace }

  .case-debrief-list { background:var(--white); border:1px solid var(--border); border-radius:var(--r); padding:8px 24px; margin-bottom:20px }
  .case-debrief-item { display:flex; gap:14px; padding:18px 0; border-bottom:1px solid var(--border) }
  .case-debrief-item:last-child { border-bottom:none }
  .case-debrief-num { font-family:monospace; font-size:11px; font-weight:700; color:var(--gold); flex-shrink:0; width:22px; margin-top:2px }
  .case-debrief-title { font-size:14px; font-weight:700; margin-bottom:5px }
  .case-debrief-body { font-size:12px; color:var(--muted); line-height:1.65 }

  .case-nav { display:flex; justify-content:space-between; align-items:center; padding:24px 0; margin-top:12px; border-top:1px solid var(--border) }
  .case-nav-btn { padding:11px 22px; border-radius:var(--r); font-family:inherit; font-size:11px; font-weight:900; letter-spacing:1px; text-transform:uppercase; cursor:pointer; transition:all .2s; border:1.5px solid var(--border); background:transparent; color:var(--muted) }
  .case-nav-btn:hover { border-color:var(--ink); color:var(--ink) }
  .case-nav-primary { background:var(--ink); color:var(--white); border-color:var(--ink) }
  .case-nav-primary:hover { opacity:.85 }
  .case-nav-btn:disabled { opacity:.3; cursor:not-allowed }
  .case-nav-step { font-family:monospace; font-size:10px; letter-spacing:2px; color:var(--muted); text-transform:uppercase }

  .case-complete { text-align:center; padding:48px 24px }
  .case-complete-mark { font-family:"DM Serif Display",serif; font-size:64px; font-style:italic; color:var(--gold); margin-bottom:16px }
  .case-complete-title { font-family:"DM Serif Display",serif; font-size:28px; margin-bottom:10px }
  .case-complete-sub { color:var(--muted); font-size:14px; max-width:440px; margin:0 auto 28px; line-height:1.7 }
  .case-takeaway-list { text-align:left; background:var(--white); border:1px solid var(--border); border-radius:var(--r); padding:20px; max-width:520px; margin:0 auto 28px }
  .case-takeaway-label { font-size:9px; letter-spacing:2px; font-family:monospace; text-transform:uppercase; color:var(--muted); margin-bottom:14px }
  .case-takeaway { display:flex; gap:10px; padding:7px 0; font-size:13px; border-bottom:1px solid var(--fog2) }
  .case-takeaway:last-child { border-bottom:none }
  .case-check { color:var(--success); font-weight:900; flex-shrink:0 }
  .case-complete-actions { display:flex; gap:10px; justify-content:center; flex-wrap:wrap }


  /* ── COLD CALL MECHANICS ── */
  .cc-screen { background: linear-gradient(160deg, #06050400 0%, #0a0906 100%); color: var(--white); border-radius: var(--rxl); overflow: hidden; margin-bottom: 20px; position: relative; }
  .cc-alert-bar { background: var(--red); padding: 10px 22px; display: flex; align-items: center; gap: 10px; font-size: 9px; letter-spacing: 3px; text-transform: uppercase; font-weight: 900; color: #fff; }
  .cc-alert-dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: observeBlink 1s ease-in-out infinite; flex-shrink: 0; }
  .cc-body { padding: 36px 40px 32px; }
  .cc-eyebrow { font-size: 9px; letter-spacing: 3px; text-transform: uppercase; color: rgba(255,255,255,.35); margin-bottom: 14px; font-family: monospace; }
  .cc-professor { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 28px; }
  .cc-prof-avatar { width: 46px; height: 46px; border-radius: 50%; background: rgba(196,154,46,.15); border: 1.5px solid rgba(196,154,46,.4); display: grid; place-items: center; font-family: "DM Serif Display", serif; font-size: 18px; flex-shrink: 0; color: var(--gold); }
  .cc-prof-name { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,.4); margin-bottom: 4px; }
  .cc-prof-prompt { font-family: "DM Serif Display", serif; font-size: clamp(17px,2vw,22px); line-height: 1.45; color: var(--white); font-style: italic; }
  .cc-prompt-sub { font-size: 12px; color: rgba(255,255,255,.45); margin-top: 8px; line-height: 1.5; }
  .cc-timer-wrap { margin-bottom: 22px; }
  .cc-timer-label { display: flex; justify-content: space-between; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,.3); margin-bottom: 8px; }
  .cc-timer-num { font-family: monospace; font-size: 13px; font-weight: 900; color: var(--gold); transition: color .3s; }
  .cc-timer-num.urgent { color: var(--red); animation: dollarFlash .6s ease-in-out infinite; }
  .cc-timer-track { height: 5px; background: rgba(255,255,255,.08); border-radius: 99px; overflow: hidden; }
  .cc-timer-fill { height: 100%; border-radius: 99px; background: var(--gold); width: 100%; transition: width 1s linear, background .3s; }
  .cc-timer-fill.urgent { background: var(--red); }
  .cc-response-area { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r); overflow: hidden; margin-bottom: 16px; transition: border-color .2s; }
  .cc-response-area:focus-within { border-color: rgba(196,154,46,.5); }
  .cc-textarea { width: 100%; background: transparent; border: none; padding: 18px 20px; font-family: "DM Serif Display", serif; font-size: 15px; line-height: 1.75; color: var(--white); resize: none; min-height: 130px; outline: none; }
  .cc-textarea::placeholder { color: rgba(255,255,255,.2); font-style: italic; }
  .cc-textarea:disabled { opacity: .6; cursor: not-allowed; }
  .cc-char-count { padding: 8px 16px; font-size: 10px; color: rgba(255,255,255,.2); font-family: monospace; text-align: right; border-top: 1px solid rgba(255,255,255,.05); }
  .cc-actions { display: flex; gap: 10px; align-items: center; }
  .cc-submit-btn { background: var(--gold); color: var(--ink); border: none; border-radius: 8px; padding: 13px 24px; font-family: inherit; font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; transition: opacity .2s, transform .2s; }
  .cc-submit-btn:hover { opacity: .88; transform: translateY(-1px); }
  .cc-submit-btn:disabled { opacity: .35; cursor: not-allowed; transform: none; }
  .cc-skip { font-size: 11px; color: rgba(255,255,255,.25); cursor: pointer; background: none; border: none; font-family: inherit; transition: color .2s; padding: 0; }
  .cc-skip:hover { color: rgba(255,255,255,.5); }
  .cc-expired { display: none; background: rgba(139,26,26,.25); border: 1px solid rgba(139,26,26,.4); border-radius: var(--r); padding: 14px 18px; font-size: 13px; color: rgba(255,180,180,.9); line-height: 1.5; margin-bottom: 16px; }
  /* Scoring panel */
  .cc-scoring { display: none; animation: fadeUp .4s var(--ease); }
  .cc-scoring.visible { display: block; }
  .cc-score-header { padding: 20px 22px 16px; border-bottom: 1px solid rgba(255,255,255,.07); display: flex; align-items: center; gap: 12px; }
  .cc-score-title { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,.4); }
  .cc-score-badge { font-family: "DM Serif Display", serif; font-size: 28px; color: var(--gold); margin-left: auto; }
  .cc-score-dims { padding: 20px 22px; display: grid; gap: 14px; }
  .cc-dim { display: grid; gap: 6px; }
  .cc-dim-label { font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,.35); display: flex; justify-content: space-between; }
  .cc-dim-bar { height: 4px; background: rgba(255,255,255,.07); border-radius: 99px; overflow: hidden; }
  .cc-dim-fill { height: 100%; border-radius: 99px; background: var(--gold); width: 0%; transition: width .8s var(--ease); }
  .cc-feedback-text { padding: 0 22px 20px; font-size: 13px; color: rgba(255,255,255,.65); line-height: 1.7; }
  .cc-model-answer { margin: 0 22px 22px; background: rgba(196,154,46,.08); border: 1px solid rgba(196,154,46,.2); border-radius: var(--r); padding: 16px 18px; }
  .cc-model-label { font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
  .cc-model-text { font-family: "DM Serif Display", serif; font-style: italic; font-size: 14px; color: rgba(255,255,255,.75); line-height: 1.7; }
  .cc-continue-row { padding: 0 22px 24px; display: flex; gap: 10px; }


  /* ── B-CASE ── */
  .bcase-screen { border-radius: var(--rxl); overflow: hidden; margin-bottom: 20px; border: 1px solid var(--border); }
  .bcase-header { background: var(--ink); color: var(--white); padding: 14px 28px; display: flex; align-items: center; justify-content: space-between; }
  .bcase-header-left { display: flex; align-items: center; gap: 12px; }
  .bcase-pill { background: var(--gold); color: var(--ink); font-size: 8px; font-weight: 900; letter-spacing: 2.5px; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; }
  .bcase-title { font-family: "DM Serif Display", serif; font-size: 17px; color: var(--white); }
  .bcase-time { font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,.35); font-family: monospace; }
  .bcase-body { padding: 32px 36px; background: var(--white); }
  .bcase-lead { font-family: "DM Serif Display", serif; font-size: 18px; line-height: 1.65; color: var(--ink); margin-bottom: 24px; font-style: italic; }
  .bcase-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 28px; }
  .bcase-metric { background: var(--fog); border: 1px solid var(--border); border-radius: var(--r); padding: 14px 16px; }
  .bcase-metric small { font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 5px; }
  .bcase-metric strong { font-family: "DM Serif Display", serif; font-size: 22px; font-weight: 400; color: var(--ink); display: block; }
  .bcase-metric.up strong { color: var(--success); }
  .bcase-metric.down strong { color: var(--red); }
  .bcase-metric.gold strong { color: var(--gold-deep); }
  .bcase-metric span { font-size: 10px; color: var(--muted); margin-top: 2px; display: block; }
  .bcase-narrative { margin-bottom: 24px; }
  .bcase-narrative p { font-size: 14px; line-height: 1.8; color: #3d3935; margin-bottom: 14px; }
  .bcase-narrative p:last-child { margin-bottom: 0; }
  .bcase-quote { border-left: 3px solid var(--gold); padding: 14px 20px; background: var(--gold-pale); border-radius: 0 var(--r) var(--r) 0; margin: 20px 0; }
  .bcase-quote p { font-family: "DM Serif Display", serif; font-style: italic; font-size: 15px; line-height: 1.7; color: var(--ink); margin: 0; }
  .bcase-quote cite { font-size: 11px; color: var(--muted); font-style: normal; letter-spacing: .5px; margin-top: 6px; display: block; }
  .bcase-synthesis { background: var(--gold-pale); border: 1px solid #e8d5a3; border-radius: var(--r); padding: 22px 24px; margin-top: 24px; }
  .bcase-synthesis-label { font-size: 9px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--gold-deep); font-weight: 900; margin-bottom: 10px; font-family: monospace; }
  .bcase-synthesis-q { font-family: "DM Serif Display", serif; font-size: 17px; line-height: 1.45; color: var(--ink); margin-bottom: 16px; }
  .bcase-textarea { width: 100%; border: 1.5px solid #e8d5a3; border-radius: 8px; padding: 14px 16px; font-family: "DM Serif Display", serif; font-size: 14px; line-height: 1.7; color: var(--ink); background: var(--white); resize: vertical; min-height: 90px; outline: none; transition: border-color .2s; }
  .bcase-textarea:focus { border-color: var(--gold); }
  .bcase-insight { margin-top: 16px; background: var(--white); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; display: none; animation: fadeUp .3s var(--ease); }
  .bcase-insight.visible { display: block; }
  .bcase-insight-trigger { width: 100%; padding: 13px 18px; background: var(--fog2); border: none; font-family: monospace; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); cursor: pointer; display: flex; align-items: center; justify-content: space-between; transition: background .2s; }
  .bcase-insight-trigger:hover { background: var(--fog3); }
  .bcase-insight-body { padding: 16px 18px; font-size: 13px; line-height: 1.7; color: var(--ink); display: none; }
  .bcase-insight-body.open { display: block; animation: fadeUp .3s var(--ease); }


  /* ── FINANCIAL MODEL OWNERSHIP ── */
  .fmo-screen { background: var(--white); border: 1px solid var(--border); border-radius: var(--rxl); overflow: hidden; margin-bottom: 20px; }
  .fmo-header { background: var(--ink); padding: 16px 28px; display: flex; align-items: center; justify-content: space-between; }
  .fmo-header-label { font-size: 9px; letter-spacing: 3px; text-transform: uppercase; color: rgba(255,255,255,.35); font-family: monospace; }
  .fmo-header-title { font-family: "DM Serif Display", serif; font-size: 18px; color: var(--white); margin-top: 4px; }
  .fmo-header-badge { background: var(--gold); color: var(--ink); font-size: 8px; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; }
  .fmo-body { padding: 28px 32px; }
  .fmo-intro { font-size: 14px; color: #3d3935; line-height: 1.7; margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
  .fmo-intro strong { color: var(--ink); }
  /* Input grid */
  .fmo-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 24px; }
  .fmo-input-group { display: flex; flex-direction: column; gap: 6px; }
  .fmo-input-group.full { grid-column: 1 / -1; }
  .fmo-label { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); font-weight: 700; }
  .fmo-input { border: 1.5px solid var(--border2); border-radius: 8px; padding: 10px 13px; font-family: "DM Sans", inherit; font-size: 14px; color: var(--ink); background: var(--fog); outline: none; transition: border-color .2s; width: 100%; }
  .fmo-input:focus { border-color: var(--gold); background: var(--white); }
  .fmo-input.highlight { border-color: var(--gold); background: var(--gold-pale); }
  /* Sliders */
  .fmo-sliders { margin-bottom: 24px; }
  .fmo-slider-group { display: grid; gap: 8px; margin-bottom: 16px; padding: 14px 16px; background: var(--fog); border-radius: var(--r); border: 1px solid var(--border); }
  .fmo-slider-row { display: flex; align-items: center; gap: 12px; }
  .fmo-slider-label { font-size: 12px; color: var(--ink); flex: 0 0 160px; }
  .fmo-slider { flex: 1; accent-color: var(--gold); cursor: pointer; }
  .fmo-slider-val { font-family: monospace; font-size: 13px; font-weight: 700; color: var(--gold-deep); flex: 0 0 42px; text-align: right; }
  .fmo-slider-dollar { font-family: monospace; font-size: 11px; color: var(--muted); flex: 0 0 80px; text-align: right; }
  .fmo-slider-total { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-top: 1px solid var(--border2); margin-top: 4px; }
  .fmo-slider-total span { font-size: 11px; color: var(--muted); }
  .fmo-slider-total strong { font-family: monospace; font-size: 13px; }
  .fmo-slider-total strong.ok { color: var(--success); }
  .fmo-slider-total strong.warn { color: var(--red); }
  /* Live chart */
  .fmo-chart-wrap { margin-bottom: 24px; background: var(--fog); border-radius: var(--r); border: 1px solid var(--border); padding: 20px; }
  .fmo-chart-title { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; display: flex; justify-content: space-between; align-items: center; }
  .fmo-chart-title span { font-family: monospace; font-size: 12px; font-weight: 700; }
  .fmo-chart-title span.pos { color: var(--success); }
  .fmo-chart-title span.neg { color: var(--red); }
  .fmo-bars { display: flex; gap: 4px; align-items: flex-end; height: 120px; }
  .fmo-bar-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; height: 100%; justify-content: flex-end; }
  .fmo-bar { width: 100%; border-radius: 3px 3px 0 0; transition: height .4s var(--ease), background .3s; min-height: 2px; }
  .fmo-bar.pos { background: var(--success); }
  .fmo-bar.neg { background: var(--red); border-radius: 0 0 3px 3px; }
  .fmo-bar-label { font-size: 9px; color: var(--muted); font-family: monospace; white-space: nowrap; }
  .fmo-chart-legend { display: flex; gap: 16px; margin-top: 12px; font-size: 11px; color: var(--muted); }
  .fmo-chart-legend span { display: flex; align-items: center; gap: 5px; }
  .fmo-chart-legend b { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
  /* Insight strip */
  .fmo-insight { padding: 16px 20px; border-radius: var(--r); margin-top: 0; font-size: 13px; line-height: 1.65; transition: background .3s, border-color .3s; border: 1.5px solid var(--border); }
  .fmo-insight.neutral { background: var(--fog); }
  .fmo-insight.good { background: var(--success-bg); border-color: #b8dfc8; color: var(--success); }
  .fmo-insight.warn { background: var(--warn-bg); border-color: #f0d090; color: var(--warn); }
  .fmo-insight.bad { background: var(--red-bg); border-color: #f0b0b0; color: var(--red); }
  .fmo-insight-head { font-weight: 900; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 5px; }
  /* Job cost model */
  .jcm-section { margin-bottom: 22px; padding: 18px 20px; background: var(--fog); border-radius: var(--r); border: 1px solid var(--border); }
  .jcm-section-title { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-bottom: 14px; display: flex; justify-content: space-between; }
  .jcm-row { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 8px; align-items: center; margin-bottom: 8px; }
  .jcm-row.header { margin-bottom: 10px; }
  .jcm-row.header span { font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); }
  .jcm-row input { border: 1.5px solid var(--border2); border-radius: 6px; padding: 8px 10px; font-family: inherit; font-size: 13px; color: var(--ink); background: var(--white); outline: none; transition: border-color .2s; width: 100%; }
  .jcm-row input:focus { border-color: var(--gold); }
  .jcm-variance { font-family: monospace; font-size: 12px; font-weight: 700; text-align: center; padding: 8px; border-radius: 6px; }
  .jcm-variance.ok { background: var(--success-bg); color: var(--success); }
  .jcm-variance.warn { background: var(--warn-bg); color: var(--warn); }
  .jcm-variance.bad { background: var(--red-bg); color: var(--red); }
  .jcm-variance.neutral { background: var(--fog2); color: var(--muted); }
  /* Profit fade gauge */
  .pf-gauge { margin: 20px 0; padding: 20px; background: var(--ink); border-radius: var(--r); color: var(--white); }
  .pf-gauge-title { font-size: 9px; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(255,255,255,.4); margin-bottom: 12px; }
  .pf-gauge-number { font-family: "DM Serif Display", serif; font-size: 48px; line-height: 1; margin-bottom: 8px; transition: color .4s; }
  .pf-gauge-number.ok { color: #6fcf97; }
  .pf-gauge-number.warn { color: var(--gold); }
  .pf-gauge-number.bad { color: #ff9d9d; }
  .pf-gauge-label { font-size: 12px; color: rgba(255,255,255,.5); }
  .pf-gauge-bar-wrap { margin-top: 14px; height: 8px; background: rgba(255,255,255,.08); border-radius: 99px; overflow: hidden; }
  .pf-gauge-bar { height: 100%; border-radius: 99px; transition: width .5s var(--ease), background .4s; }
  .pf-alert { margin-top: 14px; padding: 10px 14px; border-radius: 8px; font-size: 12px; line-height: 1.5; display: none; }
  .pf-alert.visible { display: block; animation: fadeUp .3s var(--ease); }
  .pf-alert.warn { background: rgba(196,154,46,.15); color: var(--gold); }
  .pf-alert.bad { background: rgba(139,26,26,.25); color: #ff9d9d; }


  /* ── CREDIT ACCESS WIDGET ── */
  .credit-widget { margin: 0; border-bottom: 1px solid rgba(255,255,255,.06); }
  .credit-widget-inner { padding: 14px 18px; }
  .credit-widget-label { font-size: 8px; letter-spacing: 2.5px; text-transform: uppercase; font-weight: 900; margin-bottom: 8px; }
  .credit-widget-label.gold { color: var(--gold); }
  .credit-widget-label.green { color: #6fcf97; }
  .credit-widget-label.muted { color: rgba(255,255,255,.3); }

  /* State 1: Not activated */
  .credit-not-activated { display: none; }
  .credit-code-box { background: rgba(196,154,46,.08); border: 1px solid rgba(196,154,46,.25); border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; }
  .credit-code-label { font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,.4); margin-bottom: 4px; }
  .credit-code-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .credit-code-val { font-family: monospace; font-size: 13px; font-weight: 900; color: var(--gold); letter-spacing: 1px; }
  .credit-code-copy { background: none; border: none; color: rgba(255,255,255,.35); cursor: pointer; font-size: 11px; font-family: inherit; padding: 0; transition: color .2s; }
  .credit-code-copy:hover { color: var(--gold); }
  .credit-activate-btn { display: block; width: 100%; padding: 11px 14px; background: var(--gold); color: var(--ink); border: none; border-radius: 8px; font-family: inherit; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .8px; cursor: pointer; text-align: center; text-decoration: none; transition: opacity .2s, transform .2s; }
  .credit-activate-btn:hover { opacity: .88; transform: translateY(-1px); }
  .credit-activate-sub { font-size: 10px; color: rgba(255,255,255,.3); line-height: 1.5; margin-top: 7px; text-align: center; }

  /* State 2: Active */
  .credit-active { display: none; }
  .credit-active-badge { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
  .credit-active-dot { width: 7px; height: 7px; border-radius: 50%; background: #6fcf97; flex-shrink: 0; animation: observeBlink 2s ease-in-out infinite; }
  .credit-active-status { font-size: 12px; font-weight: 700; color: #6fcf97; }
  .credit-active-expires { font-size: 10px; color: rgba(255,255,255,.4); margin-bottom: 10px; line-height: 1.5; }
  .credit-enter-btn { display: block; width: 100%; padding: 11px 14px; background: rgba(111,207,151,.12); border: 1px solid rgba(111,207,151,.3); color: #6fcf97; border-radius: 8px; font-family: inherit; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .8px; cursor: pointer; text-align: center; text-decoration: none; transition: background .2s; }
  .credit-enter-btn:hover { background: rgba(111,207,151,.2); }

  /* State 3: Expired */
  .credit-expired { display: none; }
  .credit-expired-msg { font-size: 11px; color: rgba(255,255,255,.45); line-height: 1.6; margin-bottom: 10px; }
  .credit-subscribe-btn { display: block; width: 100%; padding: 11px 14px; background: rgba(196,154,46,.1); border: 1px solid rgba(196,154,46,.3); color: var(--gold); border-radius: 8px; font-family: inherit; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .8px; cursor: pointer; text-align: center; text-decoration: none; transition: background .2s; }
  .credit-subscribe-btn:hover { background: rgba(196,154,46,.2); }

  /* Loading state */
  .credit-loading { font-size: 10px; color: rgba(255,255,255,.25); padding: 4px 0; }

