:root {
      /* PharmaBharat PV Academy tokens */
      --bg: #f4f8f7;
      --panel: #ffffff;
      --panel-soft: #f7fbfa;
      --panel-muted: #eef4f3;
      --text: #0f2a2e;
      --muted: #4f6468;
      --line: #d6e3e1;
      --accent: #0f6b6e;
      --accent-soft: #dcefee;
      --accent-strong: #094d50;
      --accent-glow: #16898d;
      --good: #2f8f5b;
      --good-soft: #e6f4ec;
      --warn: #c97b0a;
      --warn-soft: #fdf1dc;
      --rose: #c0392b;
      --rose-soft: #fbe9e7;
      --amber: #e39b17;
      --amber-soft: #fdf1dc;
      --shadow-sm: none;
      --shadow: none;
      --shadow-lg: 0 10px 30px rgba(9,77,80,0.08);
      --radius: 14px;
      --radius-sm: 8px;
      --font-display: 'Fraunces', Georgia, serif;
      --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    }

    * { box-sizing: border-box; margin: 0; }
    html { scroll-behavior: smooth; }

    body {
      font-family: var(--font-body);
      background: var(--bg);
      color: var(--text);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
    }

    /* ── TOP NAV ── */
    .topnav {
      position: sticky; top: 0; z-index: 100;
      background: rgba(26, 26, 26, 0.97);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid rgba(255,255,255,0.06);
      color: #fff;
    }
    .topnav-inner {
      max-width: 1400px; margin: 0 auto;
      padding: 0 24px;
      display: flex; align-items: center; justify-content: space-between;
      height: 56px;
    }
    .topnav-brand {
      display: flex; align-items: center; gap: 12px;
      font-weight: 700; font-size: 15px; letter-spacing: -0.01em;
    }
    .topnav-brand .brand-icon {
      width: 32px; height: 32px; border-radius: 8px;
      background: linear-gradient(135deg, #c67b1a 0%, #e8a849 100%);
      display: grid; place-items: center;
      font-size: 16px; font-weight: 800; color: #fff;
      font-family: var(--font-display);
    }
    .topnav-brand span { opacity: 0.45; font-weight: 400; margin: 0 2px; }
    .topnav-actions { display: flex; gap: 8px; align-items: center; }
    .topnav-pill {
      font: inherit; font-size: 12px; font-weight: 600;
      padding: 5px 12px; border-radius: 999px;
      background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.7);
      border: 1px solid rgba(255,255,255,0.1);
      cursor: pointer; transition: 0.15s;
    }
    .topnav-pill:hover { background: rgba(255,255,255,0.14); color: #fff; }
    .topnav-pill.active {
      background: var(--amber); color: #fff;
      border-color: var(--amber);
    }

    /* ── MODULE NAV ── */
    .module-nav {
      background: var(--panel);
      border-bottom: 1px solid var(--line);
      position: sticky; top: 56px; z-index: 90;
    }
    .module-nav-inner {
      max-width: 1400px; margin: 0 auto;
      padding: 0 24px;
      display: flex; align-items: center; gap: 6px;
      height: 48px; overflow-x: auto;
    }
    .module-tab {
      font: inherit; font-size: 13px; font-weight: 600;
      padding: 6px 14px; border-radius: 8px;
      background: none; color: var(--muted);
      border: 1px solid transparent;
      cursor: pointer; transition: 0.15s;
      white-space: nowrap;
      display: flex; align-items: center; gap: 6px;
    }
    .module-tab:hover { background: var(--panel-muted); color: var(--text); }
    .module-tab.active {
      background: var(--accent-soft); color: var(--accent);
      border-color: rgba(30,58,95,0.15);
    }
    .module-tab.disabled {
      opacity: 0.4; cursor: not-allowed;
    }
    .module-tab .tab-dot {
      width: 7px; height: 7px; border-radius: 999px;
      background: var(--line);
    }
    .module-tab.active .tab-dot { background: var(--accent); }
    .module-tab.complete .tab-dot { background: var(--good); }

    /* ── LAYOUT ── */
    .wrap {
      max-width: 1400px; margin: 0 auto;
      padding: 0 24px;
    }
    .main-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 24px;
      padding: 24px 0 48px;
      align-items: start;
    }

    /* ── SIDEBAR ── */
    .sidebar {
      position: sticky; top: 128px;
    }
    .sidebar-card {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow-sm);
      overflow: hidden;
    }
    .sidebar-header {
      padding: 16px 18px 14px;
      border-bottom: 1px solid var(--line);
    }
    .sidebar-header h3 {
      font-family: var(--font-display);
      font-size: 17px; font-weight: 600;
      letter-spacing: -0.01em;
    }
    .sidebar-header p {
      font-size: 12px; color: var(--muted);
      margin-top: 4px;
    }
    .stage-list { padding: 8px; }
    .stage-item {
      font: inherit; width: 100%; text-align: left;
      display: flex; align-items: center; gap: 10px;
      padding: 10px 12px; border-radius: var(--radius-sm);
      background: none; border: none; cursor: pointer;
      transition: 0.12s; color: var(--text);
    }
    .stage-item:hover { background: var(--panel-muted); }
    .stage-item.active { background: var(--accent-soft); }
    .stage-item.locked { opacity: 0.4; cursor: not-allowed; }
    .stage-item .stage-num {
      width: 28px; height: 28px; border-radius: 8px;
      display: grid; place-items: center;
      font-size: 12px; font-weight: 800;
      background: var(--panel-muted); color: var(--muted);
      flex-shrink: 0;
    }
    .stage-item.active .stage-num { background: var(--accent); color: #fff; }
    .stage-item.complete .stage-num { background: var(--good); color: #fff; }
    .stage-item .stage-info { min-width: 0; }
    .stage-item .stage-name { font-size: 13px; font-weight: 600; display: block; }
    .stage-item .stage-hint {
      font-size: 11px; color: var(--muted); display: block;
      margin-top: 1px;
    }
    .stage-item .stage-badge {
      margin-left: auto; font-size: 10px; font-weight: 700;
      padding: 2px 8px; border-radius: 999px;
      text-transform: uppercase; letter-spacing: 0.04em;
      flex-shrink: 0;
    }
    .stage-badge.done { background: var(--good-soft); color: var(--good); }
    .stage-badge.current { background: var(--accent-soft); color: var(--accent); }
    .stage-badge.locked-badge { background: var(--panel-muted); color: var(--muted); }

    .sidebar-progress {
      padding: 14px 18px;
      border-top: 1px solid var(--line);
    }
    .progress-track {
      width: 100%; height: 6px; border-radius: 999px;
      background: var(--panel-muted);
      overflow: hidden; margin-top: 8px;
    }
    .progress-fill {
      height: 100%; border-radius: 999px;
      background: linear-gradient(90deg, var(--accent) 0%, var(--accent-glow) 100%);
      transition: width 0.4s ease;
    }
    .progress-label {
      font-size: 11px; color: var(--muted); font-weight: 600;
    }

    .sidebar-footer {
      padding: 12px 18px 16px;
      border-top: 1px solid var(--line);
    }
    .reset-btn {
      font: inherit; font-size: 12px; font-weight: 600;
      padding: 7px 14px; border-radius: 8px;
      background: none; border: 1px solid var(--line);
      color: var(--muted); cursor: pointer; transition: 0.15s;
      width: 100%;
    }
    .reset-btn:hover { background: var(--rose-soft); color: var(--rose); border-color: #e8c0cb; }

    /* ── CONTENT AREA ── */
    .content-area { min-width: 0; }

    .hero-banner {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow: hidden;
      margin-bottom: 24px;
    }
    .hero-inner {
      padding: 32px 36px;
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 24px; align-items: center;
    }
    .hero-eyebrow {
      font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
      text-transform: uppercase; color: var(--amber);
      margin-bottom: 8px;
    }
    .hero-title {
      font-family: var(--font-display);
      font-size: clamp(26px, 3.5vw, 38px);
      font-weight: 500; letter-spacing: -0.02em;
      line-height: 1.15;
    }
    .hero-desc {
      color: var(--muted); font-size: 15px;
      margin-top: 10px; max-width: 640px;
    }
    .hero-stats {
      display: flex; gap: 16px;
    }
    .hero-stat {
      text-align: center;
      padding: 14px 20px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: var(--panel-soft);
    }
    .hero-stat strong {
      display: block; font-size: 24px;
      font-family: var(--font-display);
      font-weight: 700; color: var(--accent);
    }
    .hero-stat span {
      font-size: 11px; color: var(--muted);
      font-weight: 600; text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    /* ── STAGE CONTENT CARD ── */
    .stage-card {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
    }
    .stage-card-header {
      padding: 24px 28px 20px;
      border-bottom: 1px solid var(--line);
      display: flex; justify-content: space-between;
      align-items: flex-start; gap: 16px; flex-wrap: wrap;
    }
    .stage-card-header .pill {
      font-size: 11px; font-weight: 700;
      letter-spacing: 0.06em; text-transform: uppercase;
      padding: 4px 10px; border-radius: 6px;
    }
    .pill-accent { background: var(--accent-soft); color: var(--accent); }
    .pill-good { background: var(--good-soft); color: var(--good); }
    .pill-warn { background: var(--warn-soft); color: var(--warn); }
    .pill-amber { background: var(--amber-soft); color: var(--amber); }

    .stage-card-body { padding: 24px 28px 28px; }

    /* ── CONTENT BLOCKS ── */
    .intro-grid {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 16px; margin-bottom: 20px;
    }
    .info-block, .summary-block {
      border: 1px solid var(--line);
      border-radius: 12px; padding: 18px;
      background: var(--panel-soft);
    }
    .info-block h4, .summary-block h4 {
      font-family: var(--font-display);
      font-size: 16px; font-weight: 600;
      margin-bottom: 10px;
    }
    .info-block p, .summary-block p { font-size: 14px; color: var(--muted); }
    .info-block ul, .summary-block ul {
      margin: 8px 0 0 16px; padding: 0;
    }
    .info-block li, .summary-block li {
      font-size: 14px; color: var(--muted); margin-bottom: 4px;
    }

    .concept-row {
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: 14px; margin-bottom: 20px;
    }
    .concept-item {
      border: 1px solid var(--line); border-radius: 12px;
      padding: 16px; background: #fff;
    }
    .concept-item h4 {
      font-size: 14px; font-weight: 700; margin-bottom: 6px;
    }
    .concept-item p { font-size: 13px; color: var(--muted); }

    .analogy-tag {
      margin-top: 10px; padding: 10px 12px;
      border-radius: 8px;
      background: linear-gradient(180deg, #fefcf8, #fdf8f0);
      border: 1px solid #e8dcc8;
      font-size: 12px; color: #7a6540;
    }
    .analogy-tag strong { color: #5a4a30; }

    .compare-row {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 14px; margin: 20px 0;
    }
    .compare-item {
      border-radius: 12px; padding: 16px;
      border: 1px solid var(--line);
    }
    .compare-item.bad {
      background: #fffaf2; border-color: #edd8b3;
    }
    .compare-item.good {
      background: #f5fbf7; border-color: #c0deca;
    }
    .compare-item h4 { font-size: 14px; font-weight: 700; margin-bottom: 6px; }
    .compare-item p { font-size: 13px; color: var(--muted); }

    .scenario-row {
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: 14px; margin: 20px 0;
    }
    .scenario-item {
      border: 1px solid var(--line); border-radius: 12px;
      padding: 16px; background: #fff;
    }
    .scenario-item .sc-badge {
      font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
      text-transform: uppercase; padding: 3px 8px;
      border-radius: 5px; background: var(--accent-soft); color: var(--accent);
      display: inline-block; margin-bottom: 8px;
    }
    .scenario-item h4 { font-size: 14px; font-weight: 700; margin-bottom: 6px; }
    .scenario-item p { font-size: 13px; color: var(--muted); }

    .method-row {
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: 14px; margin: 20px 0;
    }
    .method-item {
      border: 1px solid var(--line); border-radius: 12px;
      padding: 16px; background: #fff;
    }
    .method-item .method-tag {
      font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
      text-transform: uppercase; padding: 3px 8px;
      border-radius: 5px; background: var(--accent-soft); color: var(--accent);
      display: inline-block; margin-bottom: 8px;
    }
    .method-item h4 { font-size: 14px; font-weight: 700; margin-bottom: 6px; }
    .method-item p { font-size: 13px; color: var(--muted); }

    .tool-row-grid {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 14px; margin: 20px 0;
    }
    .tool-item {
      border: 1px solid var(--line); border-radius: 12px;
      padding: 16px; background: #fff;
    }
    .tool-item h4 { font-size: 14px; font-weight: 700; margin-bottom: 6px; }
    .tool-item p { font-size: 13px; color: var(--muted); }

    .section-divider {
      margin: 24px 0 16px;
    }
    .section-divider h3 {
      font-family: var(--font-display);
      font-size: 20px; font-weight: 600;
      letter-spacing: -0.01em;
    }
    .section-divider p {
      font-size: 13px; color: var(--muted); margin-top: 4px;
    }

    /* ── INTERACTIVE VISUALS ── */
    .visual-shell {
      margin: 20px 0;
      border: 1px solid var(--line); border-radius: 14px;
      background: linear-gradient(180deg, #fcfbf9, #f9f8f5);
      padding: 20px;
    }
    .visual-head { margin-bottom: 14px; }
    .visual-head .pill { margin-bottom: 8px; display: inline-block; }
    .visual-head h4 {
      font-family: var(--font-display);
      font-size: 18px; font-weight: 600;
    }
    .visual-head p { font-size: 13px; color: var(--muted); margin-top: 4px; }

    .visual-body {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 16px;
    }
    .interactive-card {
      border: 1px solid var(--line); border-radius: 12px;
      padding: 16px; background: var(--panel-soft);
    }
    .interactive-card h4 { font-size: 14px; font-weight: 700; margin-bottom: 8px; }
    .interactive-card p { font-size: 13px; color: var(--muted); }

    .chip-row, .tool-row-pills, .scenario-step-row {
      display: flex; gap: 8px; flex-wrap: wrap;
    }
    .chip-btn, .scenario-step-btn, .tool-pill-btn {
      font: inherit; font-size: 12px; font-weight: 600;
      padding: 7px 12px; border-radius: 8px;
      background: #fff; color: var(--text);
      border: 1px solid var(--line);
      cursor: pointer; transition: 0.12s;
    }
    .chip-btn:hover, .scenario-step-btn:hover, .tool-pill-btn:hover {
      background: var(--accent-soft); border-color: rgba(30,58,95,0.2);
    }
    .chip-btn.active, .scenario-step-btn.active, .tool-pill-btn.active {
      background: var(--accent); color: #fff; border-color: var(--accent);
    }

    .ladder { display: grid; gap: 10px; }
    .ladder-step {
      border: 1px solid var(--line); border-radius: 10px;
      padding: 12px; background: #fff; cursor: pointer;
      transition: 0.12s;
    }
    .ladder-step:hover { border-color: rgba(30,58,95,0.2); }
    .ladder-step.active {
      background: var(--accent-soft); border-color: rgba(30,58,95,0.25);
    }
    .ladder-num {
      width: 26px; height: 26px; border-radius: 7px;
      display: inline-grid; place-items: center;
      font-size: 12px; font-weight: 800;
      background: var(--panel-muted); color: var(--muted);
      margin-bottom: 6px;
    }
    .ladder-step.active .ladder-num { background: var(--accent); color: #fff; }
    .ladder-step h4 { font-size: 13px; font-weight: 700; }
    .ladder-step p { font-size: 12px; color: var(--muted); }

    .result-box, .score-box, .formula-box {
      border: 1px solid var(--line); border-radius: 10px;
      background: #fff; padding: 14px;
    }
    .result-box p { font-size: 13px; color: var(--muted); }
    .result-box strong { color: var(--text); }

    .controls-grid {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 10px;
    }
    .field {
      display: block; border: 1px solid var(--line);
      border-radius: 10px; padding: 10px; background: #fff;
      font-size: 12px; font-weight: 600; color: var(--muted);
    }
    .field input[type="range"] {
      width: 100%; margin-top: 8px;
      accent-color: var(--accent); cursor: pointer;
    }
    .field input[type="number"], .field select {
      width: 100%; margin-top: 6px; font: inherit;
      font-size: 13px; padding: 6px 8px; border-radius: 6px;
      border: 1px solid var(--line); background: #fff; color: var(--text);
    }

    .signal-bar {
      display: grid;
      grid-template-columns: 130px 1fr auto;
      gap: 10px; align-items: center;
      font-size: 13px; margin-bottom: 6px;
    }
    .bar-track {
      width: 100%; height: 8px; border-radius: 999px;
      background: #eef0ec; overflow: hidden;
    }
    .bar-fill {
      height: 100%; border-radius: 999px;
      background: linear-gradient(90deg, var(--accent-glow), var(--accent));
    }

    .stat-line {
      display: flex; justify-content: space-between;
      gap: 10px; font-size: 13px; color: var(--muted);
      margin-top: 6px;
    }

    .meter-shell {
      border: 1px solid var(--line); border-radius: 12px;
      background: #fff; padding: 12px; margin-top: 10px;
    }
    .meter-track {
      width: 100%; height: 12px; border-radius: 999px;
      background: linear-gradient(90deg, #fde0c8, #fef3c8, #d4eeda);
      position: relative; overflow: hidden;
      border: 1px solid var(--line);
    }
    .meter-thumb {
      position: absolute; top: -3px;
      width: 18px; height: 18px; border-radius: 999px;
      background: var(--accent); border: 2px solid #fff;
      box-shadow: 0 2px 8px rgba(30,58,95,0.3);
      transform: translateX(-50%);
    }
    .meter-labels {
      display: flex; justify-content: space-between;
      font-size: 10px; color: var(--muted); margin-top: 6px;
    }

    .decision-map {
      display: grid; grid-template-columns: 1fr 1fr 1fr;
      gap: 10px; margin-top: 12px;
    }
    .decision-cell {
      border: 1px solid var(--line); border-radius: 10px;
      padding: 12px; background: #fff;
    }
    .decision-cell.active {
      background: var(--accent-soft); border-color: rgba(30,58,95,0.25);
    }
    .decision-cell h4 { font-size: 13px; font-weight: 700; }
    .decision-cell p { font-size: 12px; color: var(--muted); }

    .scenario-layout {
      display: grid; grid-template-columns: 0.9fr 1.1fr;
      gap: 16px; margin-top: 12px;
    }
    .scenario-detail {
      border: 1px solid var(--line); border-radius: 12px;
      padding: 16px; background: var(--panel-soft);
    }
    .scenario-detail h4 { font-size: 14px; font-weight: 700; margin-bottom: 6px; }
    .scenario-detail p { font-size: 13px; color: var(--muted); }

    .metric-grid {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 12px; margin-top: 12px;
    }
    .metric-card {
      border: 1px solid var(--line); border-radius: 10px;
      padding: 14px; background: #fff;
    }
    .metric-card h4 { font-size: 13px; font-weight: 700; margin-bottom: 4px; }
    .metric-card p, .metric-card li { font-size: 12px; color: var(--muted); }
    .metric-card ul { margin: 4px 0 0 14px; padding: 0; }

    .flow-grid {
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: 10px; margin-top: 12px;
    }
    .flow-card {
      border: 1px solid var(--line); border-radius: 10px;
      padding: 12px; background: #fff;
    }
    .flow-card h4 { font-size: 13px; font-weight: 700; }
    .flow-card p { font-size: 12px; color: var(--muted); }

    .mini-table {
      display: grid; grid-template-columns: 1.2fr 1fr 1fr;
      border: 1px solid var(--line); border-radius: 10px;
      overflow: hidden; background: #fff;
    }
    .mini-table div {
      padding: 10px; border-right: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      font-size: 13px;
    }
    .mini-table div:nth-child(3n) { border-right: none; }
    .mini-table div:nth-last-child(-n+3) { border-bottom: none; }
    .mini-head {
      background: var(--panel-muted); font-weight: 700; color: var(--text);
    }

    /* ── MEMORY / STICKY LEARNING (compact) ── */
    .memory-shell {
      margin: 20px 0;
      border: 1px solid var(--line); border-radius: 14px;
      background: linear-gradient(180deg, #fefdfb, #f9f8f5);
      padding: 18px;
    }
    .memory-header {
      display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
      margin-bottom: 10px;
    }
    .memory-header h4 { font-family: var(--font-display); font-size: 16px; font-weight: 600; }
    .memory-hook {
      font-size: 13px; font-weight: 700; color: var(--amber);
      padding: 8px 12px; border-radius: 8px;
      background: var(--amber-soft); border: 1px solid #e8d8b0;
      margin-bottom: 12px;
    }
    .memory-grid {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 12px;
    }
    .memory-card {
      border: 1px solid var(--line); border-radius: 12px;
      padding: 14px; background: #fff;
    }
    .memory-card h4 { font-size: 13px; font-weight: 700; margin-bottom: 6px; }
    .memory-card p { font-size: 13px; color: var(--muted); }

    .reveal-btn {
      margin-top: 10px; font: inherit; font-size: 12px;
      font-weight: 700; padding: 7px 14px; border-radius: 8px;
      background: var(--accent-soft); color: var(--accent);
      border: 1px solid rgba(30,58,95,0.15);
      cursor: pointer; transition: 0.12s;
    }
    .reveal-btn:hover { background: #d5dff0; }

    .icon-chip {
      padding: 10px; border: 1px solid var(--line);
      border-radius: 10px; background: #fff;
      min-width: 90px; flex: 1 1 90px;
    }
    .icon-chip span { display: block; font-size: 20px; margin-bottom: 4px; }
    .icon-chip strong { font-size: 12px; }
    .icon-chip p { font-size: 11px; color: var(--muted); margin: 4px 0 0; }
    .visual-chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

    /* ── CHECKPOINT (SCENARIO-BASED) ── */
    .checkpoint-shell {
      margin-top: 24px;
      border: 2px solid var(--line); border-radius: 14px;
      overflow: hidden;
      background: #fff;
    }
    .checkpoint-header {
      padding: 16px 20px;
      background: var(--panel-muted);
      border-bottom: 1px solid var(--line);
      display: flex; align-items: center; gap: 10px;
    }
    .checkpoint-header .ck-icon {
      width: 32px; height: 32px; border-radius: 8px;
      display: grid; place-items: center;
      font-size: 14px; font-weight: 800;
    }
    .ck-icon.pending { background: var(--warn-soft); color: var(--warn); }
    .ck-icon.passed { background: var(--good-soft); color: var(--good); }
    .checkpoint-header h4 { font-size: 15px; font-weight: 700; }

    .checkpoint-body { padding: 20px; }
    .checkpoint-vignette {
      border: 1px solid #e0dbd0;
      border-radius: 10px; padding: 16px;
      background: linear-gradient(180deg, #fdfcf9, #faf8f3);
      margin-bottom: 16px;
    }
    .checkpoint-vignette .vig-label {
      font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
      text-transform: uppercase; color: var(--amber);
      margin-bottom: 6px;
    }
    .checkpoint-vignette p {
      font-size: 14px; color: var(--text); line-height: 1.7;
    }
    .checkpoint-question {
      font-family: var(--font-display);
      font-size: 17px; font-weight: 600;
      margin-bottom: 14px;
    }
    .checkpoint-options { display: grid; gap: 8px; }
    .option-btn {
      font: inherit; font-size: 14px;
      padding: 12px 14px; border-radius: 10px;
      background: var(--panel-soft); color: var(--text);
      border: 1px solid var(--line);
      cursor: pointer; transition: 0.12s;
      text-align: left;
    }
    .option-btn:hover { background: var(--accent-soft); border-color: rgba(30,58,95,0.2); }
    .option-btn.selected-correct {
      background: var(--good-soft); border-color: #8ec8a3;
      cursor: default;
    }
    .option-btn.selected-wrong {
      background: var(--warn-soft); border-color: #ddc490;
      cursor: default;
    }

    .checkpoint-feedback {
      margin-top: 14px; padding: 14px;
      border-radius: 10px; display: none;
      font-size: 14px;
    }
    .checkpoint-feedback.good {
      display: block;
      background: var(--good-soft); border: 1px solid #b3d8c2;
      color: var(--good);
    }
    .checkpoint-feedback.warn {
      display: block;
      background: var(--warn-soft); border: 1px solid #ddc490;
      color: var(--warn);
    }
    .checkpoint-feedback strong { display: block; margin-bottom: 4px; }

    .checkpoint-explanation {
      margin-top: 14px; padding: 14px;
      border-radius: 10px;
      background: var(--panel-soft); border: 1px solid var(--line);
      display: none;
    }
    .checkpoint-explanation.show { display: block; }
    .checkpoint-explanation h5 {
      font-size: 13px; font-weight: 700; margin-bottom: 6px;
    }
    .checkpoint-explanation p {
      font-size: 13px; color: var(--muted);
    }

    .checkpoint-actions {
      margin-top: 16px;
      display: flex; justify-content: space-between;
      align-items: center; gap: 12px; flex-wrap: wrap;
    }
    .next-stage-btn {
      font: inherit; font-size: 14px; font-weight: 700;
      padding: 10px 20px; border-radius: 10px;
      background: var(--accent); color: #fff;
      border: none; cursor: pointer; transition: 0.12s;
    }
    .next-stage-btn:hover { background: var(--accent-strong); }

    .small-note { font-size: 12px; color: var(--muted); }

    /* ── REFERENCE CARD ── */
    .reference-card {
      margin-top: 20px; padding: 16px;
      border: 1px solid var(--line); border-radius: 12px;
      background: #fff;
    }
    .reference-card h4 { font-size: 14px; font-weight: 700; margin-bottom: 8px; }
    .reference-card li { font-size: 13px; color: var(--muted); margin-bottom: 4px; }
    .reference-card ul { margin: 0 0 0 16px; padding: 0; }

    /* ── LOCKED PANEL ── */
    .locked-panel {
      margin-top: 16px; padding: 20px;
      border: 1px solid var(--line); border-radius: 12px;
      background: var(--panel-soft);
      display: none;
    }
    .locked-panel h4 { font-size: 15px; font-weight: 700; margin-bottom: 8px; }
    .locked-panel p { font-size: 14px; color: var(--muted); }
    .locked-panel ul { margin: 8px 0 0 16px; padding: 0; }
    .locked-panel li { font-size: 13px; color: var(--muted); }

    /* ── PV JOURNEY LANDING ── */
    .pv-journey-landing { background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:40px 36px;text-align:center; }
    .pvj-hero { margin-bottom:28px; }
    .pvj-icon { width:64px;height:64px;border-radius:16px;display:inline-grid;place-items:center;font-size:28px;background:linear-gradient(135deg,#0a0e1a,#1a2744);margin-bottom:16px; }
    .pvj-eyebrow { font-size:11px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--amber);margin-bottom:10px; }
    .pvj-hero h2 { font-family:var(--font-display);font-size:clamp(24px,3vw,32px);font-weight:500;letter-spacing:-0.02em; }
    .pvj-desc { font-size:15px;color:var(--muted);margin-top:10px;max-width:560px;display:inline-block;line-height:1.6; }
    .pvj-acts { display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:600px;margin:0 auto 28px;text-align:left; }
    .pvj-act { display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--panel-soft); }
    .pvj-act-num { width:32px;height:32px;border-radius:8px;display:grid;place-items:center;flex-shrink:0;font-family:var(--font-display);font-size:16px;font-weight:700; }
    .pvj-act strong { font-size:13px; }
    .pvj-act-desc { font-size:11px;color:var(--muted);margin-top:3px;line-height:1.4; }
    .pvj-meta { display:flex;gap:16px;justify-content:center;margin-bottom:24px; }
    .pvj-stat { text-align:center;padding:10px 18px;border:1px solid var(--line);border-radius:10px;background:var(--panel-soft); }
    .pvj-stat strong { display:block;font-size:22px;font-family:var(--font-display);font-weight:700;color:var(--accent); }
    .pvj-stat span { font-size:10px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:0.04em; }
    .pvj-launch-btn { font:inherit;font-size:15px;font-weight:600;padding:14px 36px;border-radius:999px;background:linear-gradient(135deg,#0a0e1a,#1a2744);color:#f6b93b;border:none;cursor:pointer;transition:all 0.3s ease;letter-spacing:0.02em; }
    .pvj-launch-btn:hover { box-shadow:0 8px 30px rgba(10,14,26,0.3);transform:translateY(-1px); }
    .pvj-footnote { font-size:11px;color:var(--muted);margin-top:14px; }

    .pvj-overlay { position:fixed;inset:0;z-index:10000;background:#06262a;display:none; }
    .pvj-overlay.active { display:block; }
    .pvj-overlay iframe { width:100%;height:100%;border:none; }
    .pvj-fallback { position:absolute;top:8px;left:50%;transform:translateX(-50%);margin:0;font-size:12px;color:#9fb3c8;z-index:1; }
    .pvj-fallback a { color:#81ecec; }
    .pvj-back-btn { position:fixed;top:12px;left:12px;z-index:10001;font-family:var(--font-body);font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;padding:8px 18px;border-radius:100px;background:rgba(255,255,255,0.08);color:rgba(255,255,255,0.7);border:1px solid rgba(255,255,255,0.12);cursor:pointer;transition:all 0.2s ease;display:none; }
    .pvj-back-btn.active { display:block; }
    .pvj-back-btn:hover { background:rgba(255,255,255,0.15);color:#fff; }

    @media (max-width:768px) { .pvj-acts{grid-template-columns:1fr;} .pvj-meta{flex-wrap:wrap;} .pv-journey-landing{padding:24px 20px;} }

    /* ── MODULE LANDING (future modules) ── */
    .module-landing {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 40px; text-align: center;
    }
    .module-landing .ml-icon {
      width: 64px; height: 64px; border-radius: 16px;
      display: inline-grid; place-items: center;
      font-size: 28px; background: var(--panel-muted);
      margin-bottom: 16px;
    }
    .module-landing h2 {
      font-family: var(--font-display);
      font-size: 24px; font-weight: 600;
    }
    .module-landing p {
      font-size: 14px; color: var(--muted);
      margin-top: 8px; max-width: 480px;
      display: inline-block;
    }
    .module-landing .coming-pill {
      display: inline-block; margin-top: 16px;
      font-size: 11px; font-weight: 700;
      letter-spacing: 0.06em; text-transform: uppercase;
      padding: 6px 14px; border-radius: 999px;
      background: var(--panel-muted); color: var(--muted);
    }

    /* ── SDR TRIAGE TABLE ── */
    .sdr-table-wrap {
      overflow-x: auto; margin-top: 14px;
      border: 1px solid var(--line); border-radius: 12px;
      background: #fff;
    }
    .sdr-table {
      width: 100%; border-collapse: collapse;
      font-size: 12px; min-width: 780px;
    }
    .sdr-table th {
      background: var(--panel-muted); font-weight: 700;
      padding: 10px 12px; text-align: left;
      border-bottom: 2px solid var(--line);
      position: sticky; top: 0; z-index: 2;
      color: var(--text); font-size: 11px;
      letter-spacing: 0.03em; text-transform: uppercase;
    }
    .sdr-table td {
      padding: 9px 12px; border-bottom: 1px solid var(--line);
      vertical-align: middle; color: var(--text);
    }
    .sdr-table tr:last-child td { border-bottom: none; }
    .sdr-table tr:hover td { background: #faf9f6; }
    .sdr-table tr.sdr-selected td { background: var(--accent-soft); }
    .sdr-table tr.sdr-correct td { background: var(--good-soft); }
    .sdr-table tr.sdr-missed td { background: var(--warn-soft); }

    .sdr-rank-cell {
      width: 48px; text-align: center;
    }
    .sdr-rank-btn {
      font: inherit; font-size: 11px; font-weight: 800;
      width: 30px; height: 30px; border-radius: 8px;
      background: var(--panel-muted); color: var(--muted);
      border: 1px solid var(--line); cursor: pointer;
      display: inline-grid; place-items: center;
      transition: 0.12s;
    }
    .sdr-rank-btn:hover { background: var(--accent-soft); color: var(--accent); border-color: rgba(30,58,95,0.2); }
    .sdr-rank-btn.ranked {
      background: var(--accent); color: #fff; border-color: var(--accent);
    }
    .sdr-rank-btn.rank-correct {
      background: var(--good); color: #fff; border-color: var(--good);
    }
    .sdr-rank-btn.rank-partial {
      background: var(--amber); color: #fff; border-color: var(--amber);
    }

    .sdr-tag {
      display: inline-block; font-size: 10px; font-weight: 700;
      padding: 2px 7px; border-radius: 5px;
      letter-spacing: 0.03em; text-transform: uppercase;
    }
    .sdr-tag.serious { background: #fde8e8; color: #b03030; }
    .sdr-tag.non-serious { background: #eef3e8; color: #4a7030; }
    .sdr-tag.labeled { background: var(--panel-muted); color: var(--muted); }
    .sdr-tag.unlabeled { background: #fef3e0; color: #8a6010; }
    .sdr-tag.dme { background: #fde8f0; color: #9a2060; }
    .sdr-tag.class-effect { background: #e8eef8; color: #30509a; }
    .sdr-tag.high-ror { background: #f8e8e8; color: #a03030; }

    .sdr-ror-bar {
      display: inline-block; height: 7px; border-radius: 999px;
      background: linear-gradient(90deg, var(--accent-glow), var(--accent));
      vertical-align: middle; margin-left: 6px;
    }

    .sdr-actions {
      margin-top: 14px;
      display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    }
    .sdr-submit-btn {
      font: inherit; font-size: 13px; font-weight: 700;
      padding: 9px 18px; border-radius: 10px;
      background: var(--accent); color: #fff;
      border: none; cursor: pointer; transition: 0.12s;
    }
    .sdr-submit-btn:hover { background: var(--accent-strong); }
    .sdr-submit-btn:disabled { opacity: 0.4; cursor: not-allowed; }
    .sdr-reset-btn {
      font: inherit; font-size: 12px; font-weight: 600;
      padding: 7px 14px; border-radius: 8px;
      background: none; border: 1px solid var(--line);
      color: var(--muted); cursor: pointer; transition: 0.12s;
    }
    .sdr-reset-btn:hover { background: var(--panel-muted); }

    .sdr-feedback {
      margin-top: 14px; padding: 16px;
      border-radius: 12px; display: none;
      border: 1px solid var(--line);
    }
    .sdr-feedback.show { display: block; }
    .sdr-feedback.excellent {
      background: var(--good-soft); border-color: #b0d4be;
    }
    .sdr-feedback.partial {
      background: var(--amber-soft); border-color: #e0cc90;
    }
    .sdr-feedback.needs-work {
      background: var(--rose-soft); border-color: #e0b8c4;
    }
    .sdr-feedback h5 {
      font-size: 14px; font-weight: 700; margin-bottom: 8px;
    }
    .sdr-feedback p { font-size: 13px; color: var(--muted); margin-bottom: 6px; }
    .sdr-feedback strong { color: var(--text); }

    .sdr-rationale-row {
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: 10px; margin-top: 12px;
    }
    .sdr-rationale-card {
      border: 1px solid var(--line); border-radius: 10px;
      padding: 12px; background: #fff;
    }
    .sdr-rationale-card h6 {
      font-size: 12px; font-weight: 700; margin-bottom: 4px;
    }
    .sdr-rationale-card p { font-size: 11px; color: var(--muted); margin: 0; }

    /* ── EVALUATION CHALLENGE ── */
    .eval-challenge {
      margin-top: 16px;
      border: 2px solid var(--line); border-radius: 14px;
      overflow: hidden; background: #fff;
    }
    .eval-challenge-header {
      padding: 14px 18px;
      background: linear-gradient(180deg, #fdfcf9, #f8f6f1);
      border-bottom: 1px solid var(--line);
      display: flex; align-items: center; gap: 10px;
    }
    .eval-challenge-header .ec-icon {
      width: 28px; height: 28px; border-radius: 7px;
      display: grid; place-items: center; font-size: 14px;
      background: var(--amber-soft); color: var(--amber); font-weight: 800;
    }
    .eval-challenge-header h4 { font-size: 14px; font-weight: 700; }
    .eval-challenge-body { padding: 18px; }

    .eval-recommendation {
      border: 1px solid #ddd8cc; border-radius: 10px;
      padding: 14px; background: linear-gradient(180deg, #fefcf8, #faf8f2);
      margin-bottom: 14px;
    }
    .eval-recommendation .rec-label {
      font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
      text-transform: uppercase; color: var(--accent);
      margin-bottom: 6px;
    }
    .eval-recommendation p { font-size: 13px; color: var(--text); line-height: 1.65; }

    .eval-verdict-row {
      display: flex; gap: 10px; margin-bottom: 14px;
    }
    .eval-verdict-btn {
      font: inherit; font-size: 13px; font-weight: 700;
      padding: 10px 20px; border-radius: 10px;
      background: var(--panel-soft); color: var(--text);
      border: 1px solid var(--line);
      cursor: pointer; transition: 0.12s;
      flex: 1;
    }
    .eval-verdict-btn:hover { background: var(--accent-soft); border-color: rgba(30,58,95,0.2); }
    .eval-verdict-btn.selected-agree {
      background: var(--good-soft); border-color: #8ec8a3; color: var(--good);
    }
    .eval-verdict-btn.selected-disagree {
      background: var(--rose-soft); border-color: #d8a0b0; color: var(--rose);
    }

    .eval-reason-grid {
      display: grid; gap: 8px; margin-bottom: 14px;
    }
    .eval-reason-btn {
      font: inherit; font-size: 13px;
      padding: 10px 14px; border-radius: 10px;
      background: var(--panel-soft); color: var(--text);
      border: 1px solid var(--line);
      cursor: pointer; transition: 0.12s;
      text-align: left;
    }
    .eval-reason-btn:hover { background: var(--accent-soft); border-color: rgba(30,58,95,0.2); }
    .eval-reason-btn.chosen { background: var(--accent-soft); border-color: rgba(30,58,95,0.25); font-weight: 600; }
    .eval-reason-btn.reason-correct { background: var(--good-soft); border-color: #8ec8a3; }
    .eval-reason-btn.reason-wrong { background: var(--warn-soft); border-color: #ddc490; }

    .eval-challenge-feedback {
      padding: 14px; border-radius: 10px;
      display: none;
    }
    .eval-challenge-feedback.show { display: block; }
    .eval-challenge-feedback.good {
      background: var(--good-soft); border: 1px solid #b0d4be;
    }
    .eval-challenge-feedback.warn {
      background: var(--warn-soft); border: 1px solid #ddc490;
    }
    .eval-challenge-feedback h5 { font-size: 14px; font-weight: 700; margin-bottom: 6px; }
    .eval-challenge-feedback p { font-size: 13px; color: var(--muted); }
    .eval-challenge-feedback strong { color: var(--text); }

    /* ── REGULATORY CONTEXT ── */
    .reg-panel { margin: 20px 0; border: 1px solid #c8d0d8; border-radius: 14px; background: linear-gradient(180deg,#f4f7fb,#edf1f7); overflow: hidden; }
    .reg-panel-header { padding: 14px 18px; display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
    .reg-panel-header .reg-icon { width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-size: 13px; font-weight: 800; }
    .reg-panel-header h4 { font-size: 14px; font-weight: 700; color: var(--accent); flex: 1; }
    .reg-panel-header .reg-toggle { font-size: 12px; color: var(--muted); font-weight: 600; }
    .reg-panel-body { padding: 0 18px 16px; display: none; }
    .reg-panel-body.open { display: block; }
    .reg-ref { display: grid; grid-template-columns: 140px 1fr; gap: 8px; padding: 8px 0; border-bottom: 1px solid rgba(200,208,216,0.5); font-size: 12px; }
    .reg-ref:last-child { border-bottom: none; }
    .reg-ref-key { font-weight: 700; color: var(--accent); }
    .reg-ref-val { color: var(--muted); }

    /* ── SIGNAL LIFECYCLE ── */
    .lifecycle-visual { margin: 20px 0; }
    .lifecycle-flow { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-top: 12px; }
    .lifecycle-node { padding: 10px 14px; border-radius: 10px; border: 1px solid var(--line); background: #fff; font-size: 12px; font-weight: 600; text-align: center; min-width: 110px; transition: 0.15s; }
    .lifecycle-node.active { background: var(--accent-soft); border-color: rgba(30,58,95,0.25); color: var(--accent); }
    .lifecycle-node.complete-node { background: var(--good-soft); border-color: #a0c8b0; color: var(--good); }
    .lifecycle-arrow { font-size: 16px; color: var(--muted); flex-shrink: 0; }
    .lifecycle-node small { display: block; font-weight: 400; font-size: 10px; color: var(--muted); margin-top: 2px; }

    /* ── BRANCHING SCENARIO ENGINE ── */
    .branch-engine { margin: 20px 0; border: 2px solid var(--line); border-radius: 14px; overflow: hidden; background: #fff; }
    .branch-header { padding: 16px 20px; background: linear-gradient(180deg,#fdfcf9,#f6f4ef); border-bottom: 1px solid var(--line); }
    .branch-header h4 { font-family: var(--font-display); font-size: 18px; font-weight: 600; }
    .branch-progress { display: flex; gap: 6px; margin-top: 10px; }
    .branch-dot { width: 10px; height: 10px; border-radius: 999px; background: var(--panel-muted); border: 1px solid var(--line); }
    .branch-dot.done { background: var(--good); border-color: var(--good); }
    .branch-dot.current { background: var(--accent); border-color: var(--accent); }
    .branch-body { padding: 20px; }
    .branch-narrative { padding: 16px; border-radius: 10px; background: linear-gradient(180deg,#fefcf8,#faf8f2); border: 1px solid #e0dbd0; margin-bottom: 16px; }
    .branch-narrative .bn-label { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--amber); margin-bottom: 6px; }
    .branch-narrative p { font-size: 14px; color: var(--text); line-height: 1.7; }
    .branch-question { font-family: var(--font-display); font-size: 16px; font-weight: 600; margin-bottom: 12px; }
    .branch-options { display: grid; gap: 8px; }
    .branch-opt { font: inherit; font-size: 13px; padding: 12px 14px; border-radius: 10px; background: var(--panel-soft); color: var(--text); border: 1px solid var(--line); cursor: pointer; transition: 0.12s; text-align: left; }
    .branch-opt:hover { background: var(--accent-soft); border-color: rgba(30,58,95,0.2); }
    .branch-opt.chosen-good { background: var(--good-soft); border-color: #8ec8a3; }
    .branch-opt.chosen-ok { background: var(--amber-soft); border-color: #ddc490; }
    .branch-opt.chosen-bad { background: var(--rose-soft); border-color: #d8a0b0; }
    .branch-consequence { margin-top: 14px; padding: 14px; border-radius: 10px; border: 1px solid var(--line); }
    .branch-consequence.good { background: var(--good-soft); border-color: #b0d4be; }
    .branch-consequence.ok { background: var(--amber-soft); border-color: #ddc490; }
    .branch-consequence.bad { background: var(--rose-soft); border-color: #d8a0b0; }
    .branch-consequence h5 { font-size: 13px; font-weight: 700; margin-bottom: 4px; }
    .branch-consequence p { font-size: 13px; color: var(--muted); }
    .branch-next-btn { font: inherit; font-size: 13px; font-weight: 700; padding: 9px 18px; border-radius: 10px; background: var(--accent); color: #fff; border: none; cursor: pointer; margin-top: 14px; }
    .branch-next-btn:hover { background: var(--accent-strong); }
    .branch-summary { padding: 16px; border-radius: 10px; background: var(--panel-soft); border: 1px solid var(--line); }
    .branch-score-row { display: flex; gap: 16px; margin-top: 10px; }
    .branch-score-item { flex: 1; text-align: center; padding: 12px; border-radius: 10px; border: 1px solid var(--line); background: #fff; }
    .branch-score-item strong { display: block; font-size: 20px; font-family: var(--font-display); }
    .branch-score-item span { font-size: 11px; color: var(--muted); }

    /* ── ICSR EXERCISE ── */
    .icsr-exercise { margin: 20px 0; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(180deg,#fcfbf9,#f9f8f5); padding: 20px; }
    .icsr-narrative-box { padding: 16px; border-radius: 10px; background: #fff; border: 1px solid var(--line); font-size: 13px; line-height: 1.75; color: var(--text); margin: 12px 0; font-family: 'Courier New', monospace; }
    .icsr-question-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
    .icsr-q-card { border: 1px solid var(--line); border-radius: 10px; padding: 14px; background: #fff; }
    .icsr-q-card h5 { font-size: 13px; font-weight: 700; margin-bottom: 6px; }
    .icsr-q-card .icsr-options { display: grid; gap: 6px; margin-top: 8px; }
    .icsr-opt { font: inherit; font-size: 12px; padding: 8px 10px; border-radius: 8px; background: var(--panel-soft); border: 1px solid var(--line); cursor: pointer; text-align: left; transition: 0.12s; }
    .icsr-opt:hover { background: var(--accent-soft); }
    .icsr-opt.correct { background: var(--good-soft); border-color: #8ec8a3; }
    .icsr-opt.wrong { background: var(--warn-soft); border-color: #ddc490; }

    /* ── ACTIVE RECALL ── */
    .recall-textarea { width: 100%; min-height: 60px; padding: 10px; border-radius: 8px; border: 1px solid var(--line); font: inherit; font-size: 13px; resize: vertical; background: #fff; color: var(--text); margin-top: 8px; }
    .recall-textarea:focus { outline: none; border-color: rgba(30,58,95,0.3); box-shadow: 0 0 0 3px rgba(30,58,95,0.08); }
    .self-assess-row { display: flex; gap: 6px; margin-top: 8px; }
    .self-assess-btn { font: inherit; font-size: 11px; font-weight: 700; padding: 5px 12px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel-soft); color: var(--muted); cursor: pointer; }
    .self-assess-btn:hover { background: var(--accent-soft); color: var(--accent); }
    .self-assess-btn.assessed { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }

    /* ── COMPETENCY ASSESSMENT ── */
    .competency-panel { margin-top: 24px; border: 2px solid var(--good); border-radius: 14px; overflow: hidden; background: #fff; }
    .competency-header { padding: 20px 24px; background: linear-gradient(180deg,#f0f8f3,#e8f4ec); border-bottom: 1px solid #c0deca; text-align: center; }
    .competency-header h3 { font-family: var(--font-display); font-size: 22px; font-weight: 600; color: var(--good); }
    .competency-header p { font-size: 13px; color: var(--muted); margin-top: 4px; }
    .competency-body { padding: 24px; }
    .comp-score-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 20px; }
    .comp-score-card { text-align: center; padding: 14px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel-soft); }
    .comp-score-card.passed { border-color: #a0c8b0; background: var(--good-soft); }
    .comp-score-card strong { display: block; font-size: 20px; font-family: var(--font-display); margin-bottom: 2px; }
    .comp-score-card span { font-size: 10px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
    .comp-summary { padding: 16px; border-radius: 10px; background: var(--panel-soft); border: 1px solid var(--line); margin-bottom: 16px; }
    .comp-summary p { font-size: 13px; color: var(--muted); }
    .comp-export-btn { font: inherit; font-size: 14px; font-weight: 700; padding: 12px 24px; border-radius: 10px; background: var(--accent); color: #fff; border: none; cursor: pointer; transition: 0.12s; }
    .comp-export-btn:hover { background: var(--accent-strong); }

    /* ── PRINT ── */
    @media print {
      .topnav, .module-nav, .sidebar, .hero-banner, .reset-btn, .sdr-submit-btn, .sdr-reset-btn, .branch-next-btn, .next-stage-btn, .reveal-btn, .comp-export-btn, .deep-dive-toggle { display: none !important; }
      .main-grid { grid-template-columns: 1fr !important; }
      .stage-card { box-shadow: none !important; border: 1px solid #ccc !important; }
      body { background: #fff !important; }
      .deep-dive-body { display: block !important; max-height: none !important; }
    }

    /* ── COLLAPSIBLE DEEP DIVES ── */
    .deep-dive {
      margin: 20px 0;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: var(--panel-soft);
      overflow: hidden;
    }
    .deep-dive-toggle {
      font: inherit; font-size: 14px; font-weight: 700;
      width: 100%; text-align: left;
      padding: 14px 18px;
      background: none; border: none; cursor: pointer;
      display: flex; align-items: center; gap: 10px;
      color: var(--text); transition: 0.12s;
    }
    .deep-dive-toggle:hover { background: rgba(0,0,0,0.02); }
    .deep-dive-toggle .dd-chevron {
      font-size: 12px; color: var(--muted);
      transition: transform 0.2s;
      flex-shrink: 0;
    }
    .deep-dive.open .dd-chevron { transform: rotate(90deg); }
    .deep-dive-toggle .dd-label { flex: 1; }
    .deep-dive-toggle .dd-hint {
      font-size: 11px; font-weight: 600;
      color: var(--muted); letter-spacing: 0.03em;
    }
    .deep-dive-body {
      display: none;
      padding: 0 18px 18px;
    }
    .deep-dive.open .deep-dive-body { display: block; }

    .lesson-flow-note {
      font-size: 12px; color: var(--muted);
      padding: 10px 14px; border-radius: 8px;
      background: var(--panel-muted); border: 1px solid var(--line);
      margin-bottom: 16px;
      display: flex; align-items: center; gap: 8px;
    }
    .lesson-flow-note strong { color: var(--text); }

    /* ── SDR COMPACT CARDS (mobile) ── */
    .sdr-card-grid { display: none; }
    @media (max-width: 860px) {
      .sdr-table-wrap { display: none; }
      .sdr-card-grid { display: grid; gap: 10px; margin-top: 14px; }
      .sdr-card {
        border: 1px solid var(--line); border-radius: 12px;
        padding: 14px; background: #fff; position: relative;
        transition: 0.12s;
      }
      .sdr-card.sdr-selected { background: var(--accent-soft); border-color: rgba(30,58,95,0.25); }
      .sdr-card.sdr-correct { background: var(--good-soft); border-color: #a0c8b0; }
      .sdr-card.sdr-missed { background: var(--warn-soft); border-color: #ddc490; }
      .sdr-card-header {
        display: flex; align-items: center; gap: 10px;
        margin-bottom: 8px;
      }
      .sdr-card-header .sdr-card-id {
        font-size: 14px; font-weight: 800; color: var(--accent);
        width: 28px; height: 28px; border-radius: 8px;
        display: grid; place-items: center;
        background: var(--accent-soft); flex-shrink: 0;
      }
      .sdr-card-header .sdr-card-event {
        font-size: 14px; font-weight: 700; flex: 1;
      }
      .sdr-card-header .sdr-card-event small {
        display: block; font-size: 11px; color: var(--muted); font-weight: 400;
      }
      .sdr-card-metrics {
        display: grid; grid-template-columns: 1fr 1fr 1fr;
        gap: 6px; margin: 8px 0;
      }
      .sdr-card-metric {
        font-size: 11px; color: var(--muted);
        padding: 6px 8px; border-radius: 6px;
        background: var(--panel-muted); text-align: center;
      }
      .sdr-card-metric strong {
        display: block; font-size: 14px; color: var(--text);
      }
      .sdr-card-flags { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; }
      .sdr-card-context {
        font-size: 11px; color: var(--muted);
        padding: 8px; border-radius: 6px;
        background: var(--panel-soft); border: 1px solid var(--line);
        margin-top: 6px;
      }
      .sdr-card-pick {
        position: absolute; top: 12px; right: 12px;
      }
    }

    /* ── RESPONSIVE ── */
    @media (max-width: 1100px) {
      .main-grid { grid-template-columns: 1fr; }
      .sidebar { position: static; }
      .sidebar-card {
        display: grid; grid-template-columns: 1fr 1fr;
      }
      .sidebar-header { grid-column: 1 / -1; }
      .stage-list {
        display: grid; grid-template-columns: repeat(5, 1fr);
        gap: 4px;
      }
      .stage-item .stage-hint { display: none; }
      .sidebar-progress { grid-column: 1 / -1; }
      .sidebar-footer { grid-column: 1 / -1; }
    }
    @media (max-width: 860px) {
      .hero-inner { grid-template-columns: 1fr; }
      .hero-stats { justify-content: flex-start; }
      .intro-grid, .visual-body, .compare-row,
      .scenario-layout, .controls-grid, .decision-map,
      .memory-grid, .metric-grid, .tool-row-grid { grid-template-columns: 1fr; }
      .concept-row, .scenario-row, .method-row,
      .flow-grid { grid-template-columns: 1fr; }
      .sidebar-card { grid-template-columns: 1fr; }
      .stage-list { grid-template-columns: 1fr; }
      .stage-item .stage-hint { display: block; }
      .signal-bar { grid-template-columns: 1fr; gap: 4px; }
      .mini-table { grid-template-columns: 1fr; }
      .mini-table div { border-right: none; }
      .sdr-rationale-row { grid-template-columns: 1fr; }
      .eval-verdict-row { flex-direction: column; }
      .icsr-question-grid { grid-template-columns: 1fr; }
      .comp-score-grid { grid-template-columns: repeat(3, 1fr); }
      .lifecycle-flow { gap: 2px; }
      .lifecycle-node { min-width: 80px; font-size: 11px; padding: 8px 10px; }
      .lifecycle-arrow { font-size: 12px; }
      .branch-score-row { flex-wrap: wrap; }
      .reg-ref { grid-template-columns: 1fr; gap: 2px; }
    }
    @media (max-width: 600px) {
      .topnav-inner { padding: 0 14px; }
      .module-nav-inner { padding: 0 14px; }
      .wrap { padding: 0 14px; }
      .hero-inner { padding: 20px; }
      .stage-card-header { padding: 18px 20px 14px; }
      .stage-card-body { padding: 18px 20px 24px; }
    }

/* ── engine: generic module UI (restyled in the design-system pass) ── */
.storage-banner { background:var(--warn-soft,#fdf6e3); color:var(--text); border-bottom:1px solid var(--line); padding:8px 16px; font-size:13px; text-align:center; }
.module-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; margin-top:24px; }
.module-card { text-align:left; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:20px; cursor:pointer; font:inherit; color:inherit; display:flex; flex-direction:column; gap:8px; }
.module-card:hover:not(.disabled) { border-color:var(--accent); }
.module-card.disabled { opacity:.6; cursor:default; }
.module-card h3 { font-family:var(--font-display); font-size:18px; margin:0; }
.module-card p { margin:0; color:var(--muted); font-size:14px; }
.module-card .progress-track { margin-top:auto; }
.module-cta { font-weight:600; color:var(--accent); font-size:13px; }
.stage-title { font-family:var(--font-display); font-size:22px; font-weight:600; margin-top:10px; letter-spacing:-0.01em; }
.stage-meta { color:var(--muted); font-size:13px; margin-top:4px; }
.block { margin:0 0 22px; }
.block h3 { font-size:17px; margin:0 0 6px; }
.block p { margin:0 0 8px; line-height:1.6; }
.analogy, .why-matters { background:var(--panel-soft); border-left:3px solid var(--accent); padding:10px 14px; border-radius:6px; margin:10px 0; font-size:14.5px; line-height:1.55; }
.analogy-label { font-weight:600; color:var(--accent); }
.exercise-shell { margin:26px 0; padding:18px; border:1px dashed var(--line); border-radius:var(--radius); }
.exercise-shell h3 { margin:0 0 6px; }
.exercise-intro { color:var(--muted); margin:0 0 12px; }
.takeaways { margin-top:22px; background:var(--good-soft); border-radius:var(--radius); padding:14px 18px; }
.takeaways h4 { margin:0 0 8px; }
.takeaways ul { margin:0; padding-left:18px; line-height:1.6; }
.btn-primary { margin-top:14px; background:var(--accent); color:#fff; border:0; border-radius:8px; padding:10px 18px; font:inherit; font-weight:600; cursor:pointer; }
.cert-date { color:var(--muted); font-size:13px; }
.muted { color:var(--muted); }

/* ═══════════════ PharmaBharat design system overrides ═══════════════ */
.skip-link { position:absolute; left:-999px; top:8px; background:var(--amber); color:var(--text); padding:8px 14px; border-radius:8px; z-index:1000; font-weight:700; }
.skip-link:focus { left:8px; }
:focus-visible { outline:3px solid var(--amber); outline-offset:2px; }
.topnav { background:var(--accent-strong); border-bottom:1px solid rgba(255,255,255,0.08); }
.topnav-brand { font-family:var(--font-display); font-weight:600; font-size:17px; letter-spacing:0; }
.topnav-brand .brand-icon { background:var(--amber); color:var(--text); border-radius:50%; font-family:var(--font-body); font-size:13px; }
.topnav-brand img { height:28px; width:auto; }
.topnav-brand span { opacity:0.7; font-weight:400; font-style:italic; margin-left:6px; }
.topnav-pill.active { color:var(--text); }
.module-nav { background:var(--panel-soft); }
.module-tab.active { background:var(--accent-soft); color:var(--accent-strong); border-color:transparent; }
.stage-card, .sidebar-card, .module-card, .pv-journey-landing, .hero-banner { box-shadow:none; border:1px solid var(--line); border-left:3px solid var(--accent); }
.hero-banner { background:linear-gradient(135deg, var(--accent-strong), var(--accent)); color:#fff; border-left-color:var(--amber); }
.hero-banner .hero-eyebrow { color:var(--amber); }
.hero-banner .hero-title, .hero-banner .hero-desc { color:#fff; }
.hero-banner .hero-desc { opacity:0.85; }
.hero-stat { background:rgba(255,255,255,0.12); border-color:rgba(255,255,255,0.2); color:#fff; }
.hero-stat strong, .hero-stat span { color:#fff; }
.btn-primary, .pvj-launch-btn, .comp-export-btn { background:var(--amber); color:var(--text); border:0; }
.btn-primary:hover, .pvj-launch-btn:hover, .comp-export-btn:hover { background:#f0ab2b; transform:none; box-shadow:none; }
.pvj-icon { background:var(--accent-strong); }
.pill-accent { background:var(--accent-soft); color:var(--accent-strong); }
.tag-foundation, .tag-practitioner { display:inline-block; font-size:11px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; padding:3px 9px; border-radius:999px; }
.tag-foundation { background:var(--good-soft); color:var(--good); }
.tag-practitioner { background:var(--amber-soft); color:#8a5a05; }
.option-btn.selected-correct { border-color:var(--good); }
.site-footer { max-width:1400px; margin:40px auto 24px; padding:0 24px; color:var(--muted); font-size:13px; display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:space-between; }
.site-footer a { color:var(--accent); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation:none !important; transition:none !important; } html { scroll-behavior:auto; } }

/* ── landing: journey map ── */
.landing-hero { padding:48px 8px 28px; max-width:760px; }
.landing-eyebrow { color:var(--accent); font-weight:700; font-size:12px; letter-spacing:0.12em; text-transform:uppercase; margin-bottom:12px; }
.landing-hero h1 { font-family:var(--font-display); font-weight:600; font-size:clamp(30px,4.5vw,48px); line-height:1.08; letter-spacing:-0.01em; margin-bottom:16px; }
.landing-hero p { font-size:17px; color:var(--muted); margin-bottom:22px; max-width:620px; }
.journey-map { list-style:none; padding:0; margin:12px 0 40px; display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px; position:relative; }
.journey-map::before { content:""; position:absolute; left:12px; right:12px; top:44px; border-top:2px dashed var(--line); z-index:0; }
.stop { position:relative; z-index:1; }
.stop-btn { width:100%; text-align:left; font:inherit; color:inherit; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:18px; display:flex; gap:14px; cursor:pointer; min-height:150px; transition:border-color .15s, transform .15s; }
.stop-btn:hover:not([disabled]) { border-color:var(--accent); transform:translateY(-2px); }
.stop.disabled .stop-btn { cursor:default; opacity:.65; background:var(--panel-soft); }
.stop.done .stop-btn { border-color:var(--good); }
.stop-ring { position:relative; width:52px; height:52px; flex:0 0 52px; display:grid; place-items:center; }
.ring { position:absolute; inset:0; width:52px; height:52px; transform:rotate(-90deg); }
.ring circle { fill:none; stroke:var(--line); stroke-width:3; }
.ring .ring-fill { stroke:var(--accent); transition:stroke-dashoffset .4s; }
.stop.done .ring .ring-fill { stroke:var(--good); }
.stop-icon { font-size:20px; }
.stop-body { display:flex; flex-direction:column; gap:4px; }
.stop-step { font-size:11px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent); }
.stop-title { font-family:var(--font-display); font-size:19px; font-weight:600; line-height:1.2; }
.stop-tagline { font-size:13.5px; color:var(--muted); line-height:1.45; }
.stop-cta { margin-top:auto; padding-top:8px; font-size:13px; font-weight:700; color:var(--accent-strong); }
@media (max-width:640px) { .journey-map::before { display:none; } .stop-btn { min-height:0; } }

/* ── module view: horizontal stepper ── */
.sidebar { position:static; margin-bottom:18px; }
.stepper-wrap { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:12px 16px; }
.stepper-head { display:flex; align-items:center; gap:14px; flex-wrap:wrap; font-size:13px; color:var(--muted); margin-bottom:10px; }
.stepper-head strong { color:var(--text); font-family:var(--font-display); font-size:16px; }
.stepper-head .reset-btn { margin-left:auto; width:auto; padding:4px 10px; font-size:12px; }
.stepper { list-style:none; margin:0; padding:0; display:flex; gap:6px; overflow-x:auto; scrollbar-width:thin; -webkit-overflow-scrolling:touch; }
.step { flex:1 0 auto; }
.step-btn { font:inherit; color:var(--muted); background:none; border:1px solid var(--line); border-radius:999px; padding:7px 14px 7px 8px; display:flex; align-items:center; gap:8px; cursor:pointer; white-space:nowrap; width:100%; }
.step-num { width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:700; background:var(--panel-muted); color:var(--muted); }
.step.active .step-btn { background:var(--accent-soft); color:var(--accent-strong); border-color:var(--accent); }
.step.active .step-num { background:var(--accent); color:#fff; }
.step.complete .step-btn { color:var(--good); border-color:var(--good-soft); }
.step.complete .step-num { background:var(--good); color:#fff; }
.step.locked .step-btn { opacity:.5; cursor:not-allowed; }
.content-area { max-width:1100px; margin:0 auto; width:100%; }
.topnav-inner { gap:10px; }
.topnav-brand { min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.topnav-actions { flex-shrink:0; }
@media (max-width:520px) { .topnav-brand span { display:none; } .topnav-pill { padding:5px 9px; } }

/* ── exercise templates ── */
.tpl { display:flex; flex-direction:column; gap:12px; }
.tpl-hint { color:var(--muted); font-size:14px; margin:0; }
.tpl-pool, .tpl-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.tpl-chip, .tpl-btn { font:inherit; font-size:14px; padding:8px 14px; border-radius:999px; border:1px solid var(--line); background:var(--panel); color:var(--text); cursor:pointer; text-align:left; }
.tpl-chip:hover:not([disabled]), .tpl-btn:hover:not([disabled]) { border-color:var(--accent); }
.tpl-chip[disabled] { opacity:.45; cursor:default; }
.tpl-chip.sel { background:var(--accent-soft); border-color:var(--accent); }
.tpl-chip.done { background:var(--good-soft); border-color:var(--good); opacity:1; }
.tpl-chip.shake { animation:tpl-shake .35s; border-color:var(--rose); }
@keyframes tpl-shake { 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }
.tpl-picked { margin:0; padding-left:22px; min-height:24px; }
.tpl-picked li.ok { color:var(--good); } .tpl-picked li.bad { color:var(--rose); text-decoration:line-through; }
.tpl-cols { display:grid; grid-template-columns:1fr 1fr; gap:14px; } .tpl-cols > div { display:flex; flex-direction:column; gap:8px; }
.tpl-status { font-size:14px; } .tpl-status.good { color:var(--good); } .tpl-status.warn { color:var(--warn); } .tpl-status p { color:var(--text); margin-top:6px; }
.tpl-narrative, .tpl-facts, .tpl-rec { background:var(--panel-soft); border-left:3px solid var(--accent); border-radius:8px; padding:12px 14px; }
.tpl-rec { border-left-color:var(--amber); }
.tpl-q { border:1px solid var(--line); border-radius:var(--radius-sm); padding:12px 14px; display:flex; flex-direction:column; gap:8px; }
.tpl-q legend { font-weight:600; padding:0 6px; }
.option-btn.sel { border-color:var(--accent); background:var(--accent-soft); }
.tpl-explain:not(:empty) { font-size:14px; background:var(--panel-soft); border-radius:8px; padding:10px 12px; }
.tpl-scenario { border:1px solid var(--line); border-radius:var(--radius-sm); padding:14px; display:flex; flex-direction:column; gap:10px; }
.tpl-table-wrap { overflow-x:auto; }
.tpl-table { width:100%; border-collapse:collapse; font-size:13.5px; }
.tpl-table th, .tpl-table td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:top; }
.tpl-table tr.picked td { background:var(--accent-soft); }
.tpl-table tr.must td { box-shadow:inset 3px 0 0 var(--rose); } .tpl-table tr.good td { box-shadow:inset 3px 0 0 var(--good); }
.tpl-table tr.tpl-ctx td { color:var(--muted); font-size:12.5px; border-bottom-width:2px; }
.tpl-pick { width:28px; height:28px; border-radius:50%; border:1px solid var(--line); background:var(--panel); cursor:pointer; font-weight:700; }
.tpl-pick[aria-pressed="true"] { background:var(--accent); color:#fff; border-color:var(--accent); }
.tpl-count { color:var(--muted); font-size:13px; margin-right:auto; }
.tpl-stepline { font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); }
.tpl-prompt { margin:0; line-height:1.6; }
.tpl-options { display:flex; flex-direction:column; gap:8px; }
.tpl-consequence { border-radius:8px; padding:12px 14px; font-size:14.5px; } .tpl-consequence.good { background:var(--good-soft); } .tpl-consequence.warn { background:var(--warn-soft); }
@media (max-width:600px) { .tpl-cols { grid-template-columns:1fr; } }

/* ── mobile: grid children must be allowed to shrink (the stepper was stretching the page to ~900px) ── */
.main-grid { grid-template-columns: minmax(0, 1fr); }
.main-grid > *, .stepper-wrap, .content-area, .stage-card, .stage-card-body { min-width: 0; }
.stepper { max-width: 100%; }
@media (max-width:600px) {
  /* triage table becomes a stack of cards: pick button top-left, cells stacked */
  .tpl-table thead { display:none; }
  .tpl-table, .tpl-table tbody, .tpl-table tr, .tpl-table td { display:block; width:100%; }
  .tpl-table tr[data-tr] { position:relative; border:1px solid var(--line); border-radius:var(--radius-sm); padding:10px 12px 10px 48px; margin-bottom:8px; }
  .tpl-table tr[data-tr] td { border:0; padding:2px 0; }
  .tpl-table tr[data-tr] td:first-child { position:absolute; left:10px; top:10px; width:auto; padding:0; }
  .tpl-table tr[data-tr] td:nth-child(2) { font-weight:600; }
  .tpl-table tr.picked td { background:transparent; } .tpl-table tr.picked { background:var(--accent-soft); }
  .tpl-table tr.must { box-shadow:inset 3px 0 0 var(--rose); } .tpl-table tr.good { box-shadow:inset 3px 0 0 var(--good); }
  .tpl-table tr.must td, .tpl-table tr.good td { box-shadow:none; }
  .tpl-table tr.tpl-ctx { margin:-6px 0 10px; padding:0 12px; } .tpl-table tr.tpl-ctx td { border:0; padding:4px 0; }
  .tpl-actions .btn-primary { width:100%; }
  .stepper-head .reset-btn { margin-left:0; }
  .hero-stats { display:flex; gap:10px; }
}
.tpl-table tr[hidden] { display:none !important; }

/* ── ad slots (PharmaBharat footer code) ── */
.pb-ad-wrap { clear:both; width:100%; margin:14px auto; text-align:center; }
.pb-ad-label { display:block; width:100%; margin:0 auto 2px; text-align:center; color:rgba(0,0,0,0.32); font:7px/1 Arial, sans-serif; letter-spacing:0; text-transform:uppercase; }
.pb-gpt-slot { min-width:300px; min-height:50px; margin:0 auto; text-align:center; }
.pb-gpt-slot > div, .pb-gpt-slot iframe { margin-left:auto !important; margin-right:auto !important; }
.pb-ad-wrap.in-wrap { max-width:1400px; padding:0 24px; }