:root {
      --bg: #0f1117;
      --panel: #181b24;
      --card: #1e2130;
      --card-hover: #252840;
      --border: #2a2e3f;
      --border-light: #353952;
      --text: #e8eaf0;
      --text-dim: #8b90a5;
      --text-muted: #5c6080;
      --accent: #6c7cff;
      --accent-glow: rgba(108, 124, 255, .18);
      --red: #ff5c6c;
      --red-bg: rgba(255, 92, 108, .1);
      --red-border: rgba(255, 92, 108, .25);
      --orange: #ffad42;
      --orange-bg: rgba(255, 173, 66, .1);
      --orange-border: rgba(255, 173, 66, .25);
      --green: #42dba5;
      --green-bg: rgba(66, 219, 165, .1);
      --green-border: rgba(66, 219, 165, .25);
      --violet: #b07cff;
      --violet-bg: rgba(176, 124, 255, .1);
      --violet-border: rgba(176, 124, 255, .25);
      --cyan: #42d4ff;
      --radius: 14px;
      --radius-sm: 8px;
      --radius-lg: 20px;
      --shadow: 0 8px 32px rgba(0, 0, 0, .35);
      --font: 'DM Sans', sans-serif;
      --font-display: 'DM Serif Display', serif;
      --font-mono: 'JetBrains Mono', monospace;
      --transition: .22s cubic-bezier(.4, 0, .2, 1);
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      font-family: var(--font);
      background: var(--bg);
      color: var(--text);
      font-size: 14px;
      line-height: 1.55;
      min-height: 100vh;
    }

    /* ─── THEME SYSTEM ─── */
    

    body[data-theme="light"] {
      --bg: #f3f6fb;
      --panel: #ffffff;
      --card: #ffffff;
      --card-hover: #f7f9fd;
      --border: #d9e1ee;
      --border-light: #c4d0e4;
      --text: #172033;
      --text-dim: #51607a;
      --text-muted: #7a879d;
      --accent: #365dff;
      --accent-glow: rgba(54, 93, 255, .14);
      --red: #e5485d;
      --red-bg: rgba(229, 72, 93, .08);
      --red-border: rgba(229, 72, 93, .2);
      --orange: #e38c1f;
      --orange-bg: rgba(227, 140, 31, .08);
      --orange-border: rgba(227, 140, 31, .2);
      --green: #0fa977;
      --green-bg: rgba(15, 169, 119, .08);
      --green-border: rgba(15, 169, 119, .2);
      --violet: #8751ff;
      --violet-bg: rgba(135, 81, 255, .08);
      --violet-border: rgba(135, 81, 255, .2);
      --cyan: #1188d8;
      --shadow: 0 10px 30px rgba(15, 23, 42, .08);
    }

    .brand-lockup {
      display: flex;
      align-items: center;
      gap: 14px
    }

    .brand-logo {
      width: 72px;
      height: 72px;
      object-fit: contain;
      border-radius: 18px;
      flex: 0 0 auto;
      background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02));
      border: 1px solid var(--border);
      box-shadow: var(--shadow);
      padding: 6px;
    }

    .brand-copy {
      min-width: 0
    }

    .brand-subtitle {
      margin-top: 8px
    }

    .theme-toggle {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: var(--card);
      color: var(--text-dim);
      font: 600 12px var(--font);
      cursor: pointer;
      transition: all var(--transition);
    }

    .theme-toggle:hover {
      color: var(--text);
      border-color: var(--accent)
    }

    /* V7 light mode predictive box */
    body[data-theme="light"] .predictive-narrative-box {
      background: linear-gradient(135deg, rgba(59, 85, 230, .05) 0%, rgba(124, 58, 237, .03) 100%);
      border-color: rgba(59, 85, 230, .2);
    }

    body[data-theme="light"] .ref-card {
      background: #fff;
      border-color: var(--border);
    }

    body[data-theme="light"] .canvas {
      background: #fff
    }

    body[data-theme="light"] .tab.active {
      color: #fff
    }

    body[data-theme="light"] .sidebar-header {
      background: linear-gradient(135deg, rgba(54, 93, 255, .05) 0%, transparent 60%)
    }

    body[data-theme="light"] .tooltip {
      background: #fff
    }

    body[data-theme="light"] .tab.color-aggressor,
    body[data-theme="light"] .tab.color-victim,
    body[data-theme="light"] .tab.color-dys,
    body[data-theme="light"] .tab.color-norm,
    body[data-theme="light"] .tab.color-trans {
      background: rgba(255, 255, 255, .96);
      box-shadow: inset 0 0 0 1px currentColor;
    }

    body[data-theme="light"] .tab.color-aggressor {
      color: #b42336 !important;
    }

    body[data-theme="light"] .tab.color-victim {
      color: #6d37d8 !important;
    }

    body[data-theme="light"] .tab.color-dys {
      color: #0b6ea8 !important;
    }

    body[data-theme="light"] .tab.color-norm {
      color: #475569 !important;
    }

    body[data-theme="light"] .tab.color-trans {
      color: #a25d00 !important;
    }

    body[data-theme="light"] .tab.active.color-aggressor,
    body[data-theme="light"] .tab.active.color-victim,
    body[data-theme="light"] .tab.active.color-dys,
    body[data-theme="light"] .tab.active.color-norm,
    body[data-theme="light"] .tab.active.color-trans {
      color: #fff !important;
      box-shadow: none;
    }

    /* ─── LAYOUT ─── */
    .app {
      display: grid;
      grid-template-columns: 400px 1fr;
      min-height: 100vh;
    }

    @media(max-width:1200px) {
      .app {
        grid-template-columns: 1fr;
      }

      .sidebar {
        max-height: 50vh;
        overflow-y: auto;
      }
    }

    /* ─── SIDEBAR ─── */
    .sidebar {
      background: var(--panel);
      border-right: 1px solid var(--border);
      overflow-y: auto;
      position: sticky;
      top: 0;
      height: 100vh;
    }

    .sidebar-header {
      padding: 24px 20px 16px;
      border-bottom: 1px solid var(--border);
      background: linear-gradient(135deg, rgba(108, 124, 255, .06) 0%, transparent 60%);
    }

    .sidebar-header h1 {
      font-family: var(--font-display);
      font-size: 22px;
      letter-spacing: -.02em;
    }

    .sidebar-header .version {
      font-family: var(--font-mono);
      font-size: 11px;
      color: var(--accent);
      background: var(--accent-glow);
      padding: 3px 8px;
      border-radius: 6px;
      display: inline-block;
      margin-top: 6px;
    }

    .sidebar-content {
      padding: 0 20px 20px;
    }

    .section-title {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .1em;
      color: var(--text-muted);
      margin: 22px 0 10px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .section-title::after {
      content: '';
      flex: 1;
      height: 1px;
      background: var(--border);
    }

    label {
      display: block;
      font-size: 12px;
      font-weight: 600;
      color: var(--text-dim);
      margin: 10px 0 4px;
    }

    input,
    select,
    textarea {
      width: 100%;
      padding: 9px 12px;
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      font: 400 13px var(--font);
      color: var(--text);
      transition: border var(--transition);
      outline: none;
    }

    input:focus,
    select:focus,
    textarea:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--accent-glow);
    }

    textarea {
      min-height: 72px;
      resize: vertical;
    }

    select {
      cursor: pointer;
    }

    .row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }

    .row3 {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 8px;
    }

    .row4 {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      gap: 8px;
    }

    .flag {
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 8px 0;
      font-size: 12px;
      color: var(--text-dim);
    }

    .flag input[type="checkbox"] {
      width: 16px;
      height: 16px;
      accent-color: var(--accent);
      cursor: pointer;
    }

    button {
      border: none;
      border-radius: var(--radius-sm);
      padding: 9px 16px;
      font: 600 13px var(--font);
      cursor: pointer;
      transition: all var(--transition);
    }

    .btn-primary {
      background: var(--accent);
      color: #fff;
    }

    .btn-primary:hover {
      background: #5a6aee;
      transform: translateY(-1px);
      box-shadow: 0 4px 16px rgba(108, 124, 255, .3);
    }

    .btn-secondary {
      background: var(--card);
      color: var(--text-dim);
      border: 1px solid var(--border);
    }

    .btn-secondary:hover {
      border-color: var(--accent);
      color: var(--text);
    }

    .btn-danger {
      background: var(--red-bg);
      color: var(--red);
      border: 1px solid var(--red-border);
    }

    .btn-danger:hover {
      background: rgba(255, 92, 108, .2);
    }

    .btn-ghost {
      background: transparent;
      color: var(--text-dim);
    }

    .btn-ghost:hover {
      color: var(--text);
      background: var(--card);
    }

    .btn-sm {
      padding: 5px 10px;
      font-size: 12px;
    }

    .buttons {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 10px;
    }

    .item {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 10px 12px;
      margin-top: 6px;
      transition: background var(--transition);
    }

    .item:hover {
      background: var(--card-hover);
    }

    .item strong {
      font-size: 13px;
    }

    .note {
      font-size: 12px;
      color: var(--text-dim);
      line-height: 1.5;
    }

    .stack {
      display: grid;
      gap: 6px;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      padding: 3px 8px;
      border-radius: 6px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .02em;
    }

    .badge-red {
      background: var(--red-bg);
      color: var(--red);
      border: 1px solid var(--red-border);
    }

    .badge-orange {
      background: var(--orange-bg);
      color: var(--orange);
      border: 1px solid var(--orange-border);
    }

    .badge-green {
      background: var(--green-bg);
      color: var(--green);
      border: 1px solid var(--green-border);
    }

    .badge-violet {
      background: var(--violet-bg);
      color: var(--violet);
      border: 1px solid var(--violet-border);
    }

    .badge-muted {
      background: rgba(91, 96, 128, .15);
      color: var(--text-dim);
      border: 1px solid rgba(91, 96, 128, .25);
    }

    .badge-accent {
      background: var(--accent-glow);
      color: var(--accent);
      border: 1px solid rgba(108, 124, 255, .25);
    }

    /* ─── MAIN PANEL ─── */
    .main {
      padding: 24px 28px;
      overflow-x: hidden;
    }

    .toolbar {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      align-items: center;
      margin-bottom: 20px;
      padding-bottom: 16px;
      border-bottom: 1px solid var(--border);
    }

    .toolbar-right {
      margin-left: auto;
      display: flex;
      gap: 8px;
    }

    /* ─── TABS ─── */
    .tabs {
      display: flex;
      gap: 2px;
      background: var(--card);
      border-radius: var(--radius);
      padding: 3px;
      margin-bottom: 20px;
      overflow-x: auto;
    }

    .tab {
      padding: 10px 18px;
      border-radius: 11px;
      font-size: 13px;
      font-weight: 600;
      color: var(--text-dim);
      cursor: pointer;
      transition: all var(--transition);
      white-space: nowrap;
      border: none;
      background: transparent;
    }

    .tab:hover {
      color: var(--text);
      background: var(--card-hover);
    }

    .tab.active {
      background: var(--accent);
      color: #fff;
      box-shadow: 0 2px 12px rgba(108, 124, 255, .25);
    }

    .tab-panel {
      display: none;
      animation: fadeIn .3s ease;
    }

    .tab-panel.active {
      display: block;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(6px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* ─── CANVAS ─── */
    .canvas {
      overflow: auto;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: #fff;
    }

    svg {
      display: block;
      width: 100%;
      min-width: 1200px;
      height: auto;
    }

    /* ─── STATS GRID ─── */
    .stats {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 10px;
      margin-bottom: 18px;
    }

    .stat {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 14px;
      position: relative;
      overflow: hidden;
    }

    .stat::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
    }

    .stat.stat-red::before {
      background: var(--red);
    }

    .stat.stat-orange::before {
      background: var(--orange);
    }

    .stat.stat-dev::before {
      background: #ff8c42;
    }

    .stat.stat-green::before {
      background: var(--green);
    }

    .stat.stat-accent::before {
      background: var(--accent);
    }

    .stat.stat-violet::before {
      background: var(--violet);
    }

    .stat .stat-label {
      font-size: 11px;
      font-weight: 600;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: .05em;
    }

    .stat .stat-value {
      font-family: var(--font-mono);
      font-size: 28px;
      font-weight: 700;
      margin: 4px 0;
    }

    .stat-bar {
      height: 6px;
      background: var(--border);
      border-radius: 99px;
      overflow: hidden;
      margin-top: 6px;
    }

    .stat-bar span {
      display: block;
      height: 100%;
      border-radius: 99px;
      transition: width .6s cubic-bezier(.22, 1, .36, 1);
    }

    /* ─── TABLES ─── */
    .table-wrap {
      overflow: auto;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--card);
    }

    table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
    }

    th,
    td {
      border-bottom: 1px solid var(--border);
      padding: 10px 10px;
      text-align: left;
      vertical-align: top;
    }

    th {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: .06em;
      color: var(--text-muted);
      background: rgba(255, 255, 255, .02);
      font-weight: 700;
      position: sticky;
      top: 0;
    }

    tr:hover td {
      background: rgba(108, 124, 255, .03);
    }

    @media(max-width:980px) {
      .stats {
        grid-template-columns: repeat(2, 1fr);
      }

      .app {
        grid-template-columns: 1fr;
      }

      .sidebar {
        position: relative;
        height: auto;
        max-height: none;
      }
    }

    @media(max-width:760px) {
      .stats {
        grid-template-columns: 1fr;
      }

      .row,
      .row3,
      .row4 {
        grid-template-columns: 1fr;
      }
    }

    /* ─── LEGEND ─── */
    .legend {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      margin-top: 16px;
    }

    .legend-item {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 10px 12px;
      font-size: 12px;
      line-height: 1.5;
      color: var(--text-dim);
    }

    .score-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 12px;
      margin-bottom: 16px;
    }

    .score-card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 14px;
      position: relative;
      overflow: hidden;
      cursor: pointer;
      transition: transform var(--transition), border-color var(--transition), background var(--transition);
    }

    .score-card:hover {
      transform: translateY(-2px);
      border-color: var(--border-light);
      background: var(--card-hover);
    }

    .score-card .emoji {
      font-size: 18px;
      margin-bottom: 6px;
    }

    .score-card .kicker {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: .06em;
      color: var(--text-muted);
      font-weight: 700;
    }

    .score-card .big {
      font-family: var(--font-mono);
      font-size: 32px;
      font-weight: 800;
      margin: 2px 0 6px;
    }

    .score-card .legend-mini {
      font-size: 11px;
      color: var(--text-dim);
      line-height: 1.45;
    }

    .score-scale {
      height: 8px;
      background: var(--border);
      border-radius: 99px;
      overflow: hidden;
      margin: 8px 0 6px;
    }

    .score-scale span {
      display: block;
      height: 100%;
      border-radius: 99px;
    }

    .synthese-layout {
      display: grid;
      grid-template-columns: minmax(320px, 420px) 1fr;
      gap: 16px;
      align-items: start;
    }

    .synthese-side {
      display: grid;
      gap: 12px;
    }

    .mini-table td:first-child {
      white-space: nowrap;
      width: 180px;
      color: var(--text-dim);
    }

    .jump-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 10px;
      border-radius: 999px;
      background: rgba(255, 255, 255, .04);
      color: var(--text-dim);
      font-size: 12px;
      text-decoration: none;
      border: 1px solid var(--border);
      margin-top: 8px;
    }

    .jump-link:hover {
      color: var(--text);
      border-color: var(--border-light);
    }

    @media(max-width:1100px) {
      .score-grid {
        grid-template-columns: repeat(2, 1fr)
      }

      .synthese-layout {
        grid-template-columns: 1fr
      }
    }

    @media(max-width:760px) {
      .score-grid {
        grid-template-columns: 1fr
      }
    }

    details.section-accordion {
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--card);
      margin-bottom: 12px;
      overflow: hidden;
    }

    details.section-accordion[open] {
      background: var(--violet-border);
    }

    details.section-accordion>summary {
      list-style: none;
      cursor: pointer;
      padding: 14px 16px;
      font-weight: 800;
      color: var(--text);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    details.section-accordion>summary::-webkit-details-marker {
      display: none;
    }

    details.section-accordion>summary::after {
      content: "▾";
      color: var(--text-dim);
      font-size: 14px;
      transition: transform var(--transition);
    }

    details.section-accordion[open]>summary::after {
      transform: rotate(180deg);
    }

    .accordion-body {
      padding: 0 16px 16px;
    }

    .tab.color-victim {
      border-color: #b07cff !important;
      color: #d8b8ff !important
    }

    .tab.color-aggressor {
      border-color: #ff5c6c !important;
      color: #ffb1b8 !important
    }

    .tab.color-dys {
      border-color: #42d4ff !important;
      color: #a9efff !important
    }

    .tab.color-norm {
      border-color: #cbd5e1 !important;
      color: #f8fafc !important
    }

    .tab.color-trans {
      border-color: #ffad42 !important;
      color: #ffd7a0 !important
    }

    .tab.active.color-victim {
      background: rgba(176, 124, 255, .14)
    }

    .tab.active.color-aggressor {
      background: rgba(255, 92, 108, .14)
    }

    .tab.active.color-dys {
      background: rgba(66, 212, 255, .14)
    }

    .tab.active.color-norm {
      background: rgba(203, 213, 225, .14)
    }

    .tab.active.color-trans {
      background: rgba(255, 173, 66, .14)
    }

    @media(max-width:760px) {
      .synthese-layout {
        grid-template-columns: 1fr !important
      }

      #syntheseRingsSvg {
        min-width: 320px !important;
        width: 100% !important;
        height: auto !important
      }

      .canvas svg#syntheseRingsSvg {
        min-width: 320px !important
      }

      .score-card .big {
        font-size: 28px
      }

      .jump-link {
        width: 100%;
        justify-content: center
      }

      .tabs {
        position: sticky;
        top: 0;
        z-index: 30;
        background: rgba(15, 23, 42, .96);
        backdrop-filter: blur(10px);
        padding-top: 8px;
        padding-bottom: 8px
      }
    }

    .score-grid {
      align-items: stretch;
    }

    .score-card {
      min-height: 190px;
    }

    .learning-stat-card {
      min-height: 148px;
      height: auto;
      overflow: visible;
    }

    .score-card .big {
      line-height: 1;
    }

    .synthese-layout {
      grid-template-columns: minmax(420px, 560px) minmax(420px, 1fr) !important;
      gap: 20px !important;
      align-items: start;
    }

    .synthese-side {
      align-content: start;
    }

    #syntheseRingsSvg {
      width: 100%;
      max-width: 540px;
      min-width: 420px;
      height: auto;
      display: block;
      margin: auto;
    }

    .canvas:has(#syntheseRingsSvg) {
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    @media(min-width:1101px) {
      .score-grid {
        grid-template-columns: repeat(5, minmax(180px, 1fr)) !important;
      }

      .score-card .legend-mini {
        font-size: 12px
      }

      .score-card .big {
        font-size: 34px
      }
    }

    @media(max-width:1100px) {
      .synthese-layout {
        grid-template-columns: 1fr !important
      }

      #syntheseRingsSvg {
        max-width: 480px;
        min-width: 320px
      }
    }

    @media print {
      body {
        background: #fff !important;
        color: #111 !important
      }

      .app-shell,
      .layout,
      .left-panel,
      .tabs,
      .toolbar,
      .tooltip,
      details.section-accordion,
      .jump-link,
      .buttons {
        display: none !important
      }

      .pdf-report-only {
        display: block !important
      }
    }

    .pdf-report-only {
      display: none
    }

    /* ─── RESPONSIVE / PDF COHERENCE PATCH ─── */
    .canvas svg {
      min-width: 0;
      width: 100%;
      height: auto;
      display: block;
    }

    #genogramSvg,
    #predictiveSvg,
    #timelineSvg,
    #transmissionSvg,
    #fragilitySvg {
      min-width: 1100px;
    }

    #syntheseRingsSvg,
    #radarSvg {
      min-width: 0 !important;
      max-width: 560px;
      width: 100%;
      margin: 0 auto;
    }

    .canvas:has(#syntheseRingsSvg),
    .canvas:has(#radarSvg) {
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: auto;
    }

    @media (max-width: 980px) {
      .toolbar {
        align-items: stretch;
      }

      .toolbar-right {
        margin-left: 0;
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
      }

      .toolbar>* {
        max-width: 100%;
      }

      #downloadSynthesePdfBtn {
        width: 100%;
      }

      #pdfSyntheseStatus {
        width: 100%;
      }

      #genogramSvg,
      #predictiveSvg,
      #timelineSvg,
      #transmissionSvg,
      #fragilitySvg {
        min-width: 900px;
      }
    }

    @media (max-width: 760px) {
      body {
        font-size: 15px;
      }

      .main {
        padding: 16px 14px;
      }

      .sidebar-content {
        padding: 0 14px 16px;
      }

      .sidebar-header {
        padding: 18px 14px 12px;
      }

      .tabs {
        gap: 4px;
      }

      .tab {
        padding: 10px 12px;
        font-size: 12px;
      }

      .stats {
        grid-template-columns: 1fr !important;
      }

      .score-grid {
        grid-template-columns: 1fr !important;
      }

      .synthese-layout {
        grid-template-columns: 1fr !important;
      }

      #genogramSvg,
      #predictiveSvg,
      #timelineSvg,
      #transmissionSvg,
      #fragilitySvg {
        min-width: 760px;
      }

      #syntheseRingsSvg,
      #radarSvg {
        max-width: 100%;
        min-width: 0 !important;
      }

      .legend {
        grid-template-columns: 1fr;
      }
    }

    /* ─── PRINT ─── */
    @media print {
      body {
        background: #fff;
        color: #111;
      }

      .sidebar {
        display: none;
      }

      .app {
        grid-template-columns: 1fr;
      }

      .main {
        padding: 10px;
      }

      .toolbar,
      .tabs {
        display: none;
      }

      .tab-panel {
        display: block !important;
        page-break-inside: avoid;
        margin-bottom: 20px;
      }

      .stat {
        border: 1px solid #ddd;
      }

      .canvas {
        border: 1px solid #ddd;
      }
    }

    /* ─── TOOLTIP ─── */
    .tooltip {
      position: fixed;
      z-index: 9999;
      background: var(--panel);
      border: 1px solid var(--border-light);
      border-radius: var(--radius-sm);
      padding: 10px 14px;
      font-size: 12px;
      pointer-events: none;
      box-shadow: var(--shadow);
      max-width: 280px;
      opacity: 0;
      transition: opacity .15s;
    }

    .tooltip.visible {
      opacity: 1;
    }

    /* scrollbar */
    ::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }

    ::-webkit-scrollbar-track {
      background: transparent;
    }

    ::-webkit-scrollbar-thumb {
      background: var(--border-light);
      border-radius: 99px;
    }

    ::-webkit-scrollbar-thumb:hover {
      background: var(--text-muted);
    }

    input[type="file"].mobile-file-input {
      position: absolute !important;
      left: -9999px !important;
      width: 1px !important;
      height: 1px !important;
      opacity: 0 !important;
      display: block !important;
    }

    .narrative-layout {
      display: grid;
      gap: 14px;
    }

    .narrative-card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 16px 18px;
      box-shadow: 0 4px 18px rgba(15, 23, 42, .04);
    }

    .narrative-card h3 {
      font-size: 14px;
      line-height: 1.35;
      margin-bottom: 10px;
      color: var(--text);
    }

    .narrative-card p {
      margin: 0 0 10px;
      color: var(--text-dim);
      line-height: 1.75;
    }

    .narrative-card p:last-child {
      margin-bottom: 0;
    }

    .narrative-inline-badges {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 8px;
    }

    .narrative-footnote {
      font-size: 12px;
      color: var(--text-muted);
      font-style: italic;
    }

    /* Fix V6.1.1 layout */
    #recentIssueCard,
    .learning-stat-card.signal-recent,
    .signal-recent-card {
      min-height: 160px;
      height: auto !important;
      overflow: visible !important;
    }

    #recentIssueDetail,
    #recentIssueLabel {
      white-space: normal !important;
      overflow-wrap: anywhere;
      line-height: 1.45;
    }

    /* ─── V5.7 ENHANCEMENTS ─── */

    /* Feedback animation pour "Enregistrer issue" */
    #saveOutcomeFeedback {
      transition: opacity .3s ease;
      padding: 8px 12px;
      border-radius: var(--radius-sm);
      background: rgba(66, 219, 165, .08);
      border: 1px solid rgba(66, 219, 165, .2);
    }

    /* Causal caption sous les gauges */
    .stat .note[id$="Caption"] {
      font-style: italic;
      opacity: .85;
    }

    /* Synthèse lecture causale */
    #narrativePredictive {
      color: var(--text);
    }

    /* Risques multiples : couleurs cohérentes */
    #tabSyntheseScores .stats .stat.stat-red .stat-value {
      color: var(--red);
    }

    #tabSyntheseScores .stats .stat.stat-orange .stat-value {
      color: var(--orange);
    }

    #tabSyntheseScores .stats .stat.stat-accent .stat-value {
      color: var(--accent);
    }

    /* Enregistrer issue block */
    #tabSyntheseScores [style*="border-left:3px solid var(--violet)"] {
      transition: box-shadow var(--transition);
    }

    #tabSyntheseScores [style*="border-left:3px solid var(--violet)"]:hover {
      box-shadow: 0 0 0 1px var(--violet-border);
    }

    .synthese-hero {
      display: grid;
      grid-template-columns: 1.15fr .85fr;
      gap: 16px;
      margin: 14px 0 18px;
      align-items: stretch;
    }

    .synthese-panel {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 16px;
    }

    .synthese-panel h3 {
      font-size: 14px;
      margin-bottom: 8px;
    }

    .synthese-panel .note {
      line-height: 1.7;
    }

    .history-layout {
      display: grid;
      gap: 14px;
    }

    .history-toolbar {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 10px;
      align-items: center;
    }

    .history-count {
      font: 800 28px var(--font-mono);
      color: var(--accent);
    }

    @media(max-width:980px) {
      .synthese-hero {
        grid-template-columns: 1fr;
      }
    }

    #recentIssueLabel,
    #recentIssueDetail {
      white-space: normal;
      overflow-wrap: anywhere;
      line-height: 1.35;
    }

    .note li {
      display: none;
    }

    /* ═══════════════════════════════════════════════════════════════
       V7 DESIGN SYSTEM — Raffinement visuel & ergonomie
    ═══════════════════════════════════════════════════════════════ */
    @import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;600&display=swap');

    :root {
      --font: 'Inter', sans-serif;
      --font-display: 'Syne', sans-serif;
      --font-mono: 'JetBrains Mono', monospace;
      --accent: #5b73ff;
      --accent-2: #a855f7;
      --accent-glow: rgba(91, 115, 255, .16);
      --accent-2-glow: rgba(168, 85, 247, .12);
      --bg: #080c14;
      --panel: #0d1120;
      --card: #111827;
      --card-hover: #161f2e;
      --border: #1e2840;
      --border-light: #2a3654;
      --text: #e2e8f4;
      --text-dim: #7d8fb5;
      --text-muted: #3f526e;
      --red: #f43f5e;
      --red-bg: rgba(244, 63, 94, .1);
      --red-border: rgba(244, 63, 94, .22);
      --orange: #fb923c;
      --orange-bg: rgba(251, 146, 60, .1);
      --orange-border: rgba(251, 146, 60, .22);
      --green: #34d399;
      --green-bg: rgba(52, 211, 153, .1);
      --green-border: rgba(52, 211, 153, .22);
      --violet: #a855f7;
      --violet-bg: rgba(168, 85, 247, .1);
      --violet-border: rgba(168, 85, 247, .22);
      --cyan: #22d3ee;
      --radius: 12px;
      --radius-sm: 8px;
      --radius-lg: 18px;
      --shadow: 0 4px 24px rgba(0, 0, 0, .45);
      --shadow-glow: 0 0 32px rgba(91, 115, 255, .12);
      --transition: .2s cubic-bezier(.4, 0, .2, 1);
    }

    body[data-theme="light"] {
      --bg: #f1f5fb;
      --panel: #ffffff;
      --card: #ffffff;
      --card-hover: #f8fafd;
      --border: #dde6f5;
      --border-light: #c8d6ea;
      --text: #0f1929;
      --text-dim: #4a5d7a;
      --text-muted: #8aa0bc;
      --accent: #3b55e6;
      --accent-glow: rgba(59, 85, 230, .12);
      --red: #e11d48;
      --red-bg: rgba(225, 29, 72, .07);
      --red-border: rgba(225, 29, 72, .18);
      --orange: #ea580c;
      --orange-bg: rgba(234, 88, 12, .07);
      --orange-border: rgba(234, 88, 12, .18);
      --green: #059669;
      --green-bg: rgba(5, 150, 105, .07);
      --green-border: rgba(5, 150, 105, .18);
      --violet: #7c3aed;
      --violet-bg: rgba(124, 58, 237, .07);
      --violet-border: rgba(124, 58, 237, .18);
      --shadow: 0 4px 20px rgba(15, 25, 42, .08);
    }

    /* ── Typography upgrades ── */
    body {
      font-family: var(--font);
    }

    .sidebar-header h1,
    h2.main-title,
    .score-card .big,
    .stat .stat-value {
      font-family: var(--font-display);
    }

    /* ── Background atmosphere ── */
    

    body[data-theme="dark"]::before {
      content: '';
      position: fixed;
      top: -200px;
      left: -200px;
      width: 700px;
      height: 700px;
      background: radial-gradient(circle, rgba(91, 115, 255, .04) 0%, transparent 70%);
      pointer-events: none;
      z-index: 0;
    }

    /* ── Sidebar upgrade ── */
    .sidebar {
      background: linear-gradient(180deg, var(--panel) 0%, rgba(13, 17, 32, .98) 100%);
      border-right: 1px solid var(--border);
    }

    .sidebar-header {
      padding: 22px 20px 18px;
      border-bottom: 1px solid var(--border);
      background: linear-gradient(135deg, rgba(91, 115, 255, .07) 0%, rgba(168, 85, 247, .04) 50%, transparent 100%);
      position: relative;
      overflow: hidden;
    }

    .sidebar-header::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 20px;
      right: 20px;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--accent), transparent);
      opacity: .4;
    }

    .sidebar-header h1 {
      font-family: var(--font-display);
      font-size: 20px;
      font-weight: 800;
      letter-spacing: -.04em;
      background: linear-gradient(135deg, var(--text) 0%, var(--text-dim) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .sidebar-header .version {
      font-family: var(--font-mono);
      font-size: 10px;
      color: var(--accent);
      background: var(--accent-glow);
      border: 1px solid rgba(91, 115, 255, .25);
      padding: 3px 8px;
      border-radius: 5px;
    }

    /* ── Section titles upgrade ── */
    .section-title {
      font-family: var(--font);
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .12em;
      color: var(--text-muted);
      margin: 20px 0 8px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .section-title::after {
      content: '';
      flex: 1;
      height: 1px;
      background: linear-gradient(90deg, var(--border), transparent);
    }

    /* ── Input upgrade ── */
    input,
    select,
    textarea {
      background: rgba(30, 40, 64, .6);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      font-family: var(--font);
      color: var(--text);
      transition: all var(--transition);
    }

    input:focus,
    select:focus,
    textarea:focus {
      border-color: var(--accent);
      background: rgba(30, 40, 64, .9);
      box-shadow: 0 0 0 3px var(--accent-glow), 0 0 12px var(--accent-glow);
    }

    body[data-theme="light"] input,
    body[data-theme="light"] select,
    body[data-theme="light"] textarea {
      background: #fff;
    }

    /* ── Checkbox upgrade ── */
    .flag input[type="checkbox"] {
      width: 15px;
      height: 15px;
      accent-color: var(--accent);
    }

    /* ── Button upgrade ── */
    button {
      font-family: var(--font);
      font-weight: 600;
      letter-spacing: .01em;
      border-radius: var(--radius-sm);
    }

    .btn-primary {
      background: linear-gradient(135deg, var(--accent) 0%, #4a5fe8 100%);
      color: #fff;
      border: none;
      box-shadow: 0 2px 12px rgba(91, 115, 255, .3);
    }

    .btn-primary:hover {
      background: linear-gradient(135deg, #6b82ff 0%, #5b73ff 100%);
      transform: translateY(-1px);
      box-shadow: 0 4px 20px rgba(91, 115, 255, .4);
    }

    .btn-secondary {
      background: rgba(30, 40, 64, .5);
      border: 1px solid var(--border);
      color: var(--text-dim);
    }

    .btn-secondary:hover {
      border-color: var(--accent);
      color: var(--text);
      background: var(--accent-glow);
    }

    /* ── Tabs upgrade ── */
    .tabs {
      display: flex;
      gap: 1px;
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 4px;
      margin-bottom: 20px;
      overflow-x: auto;
      scrollbar-width: none;
      position: sticky;
      top: 0;
      z-index: 30;
      backdrop-filter: blur(16px);
    }

    .tabs-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 8px;
      color: var(--text-dim);
      font-size: 12px;
    }

    .tabs-toolbar .group-control {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .tabs-toolbar select {
      min-width: 180px;
      background: var(--card);
      color: var(--text);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 5px 8px;
      font: 600 12px var(--font);
    }

    .tab.is-hidden {
      display: none;
    }

    .tabs::-webkit-scrollbar {
      display: none;
    }

    .tab {
      padding: 8px 16px;
      border-radius: 9px;
      font-family: var(--font);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: .01em;
      color: var(--text-dim);
      cursor: pointer;
      transition: all var(--transition);
      white-space: nowrap;
      border: none;
      background: transparent;
    }

    .tab:hover {
      color: var(--text);
      background: rgba(91, 115, 255, .08);
    }

    .tab.active {
      background: linear-gradient(135deg, var(--accent) 0%, #6a5af9 100%);
      color: #fff;
      box-shadow: 0 2px 12px rgba(91, 115, 255, .3);
    }

    /* ── Stat cards upgrade ── */
    .stat {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 16px;
      position: relative;
      overflow: hidden;
      transition: all var(--transition);
    }

    .stat::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(255, 255, 255, .02) 0%, transparent 60%);
      pointer-events: none;
    }

    .stat:hover {
      border-color: var(--border-light);
      transform: translateY(-1px);
    }

    .stat .stat-label {
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .1em;
      color: var(--text-muted);
    }

    .stat .stat-value {
      font-family: var(--font-display);
      font-size: 30px;
      font-weight: 800;
      margin: 6px 0 4px;
      letter-spacing: -.03em;
    }

    .stat-bar {
      height: 5px;
      background: var(--border);
      border-radius: 99px;
      overflow: hidden;
      margin-top: 8px;
    }

    .stat-bar span {
      display: block;
      height: 100%;
      border-radius: 99px;
      transition: width .7s cubic-bezier(.22, 1, .36, 1);
    }

    /* ── Score cards upgrade ── */
    .score-card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 16px;
      min-height: 180px;
      position: relative;
      overflow: hidden;
      cursor: pointer;
      transition: all var(--transition);
    }

    .score-card::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(255, 255, 255, .015) 0%, transparent 60%);
      pointer-events: none;
    }

    .score-card:hover {
      border-color: var(--border-light);
      transform: translateY(-2px);
      box-shadow: var(--shadow);
    }

    .score-card .kicker {
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .1em;
      color: var(--text-muted);
    }

    .score-card .big {
      font-family: var(--font-display);
      font-size: 34px;
      font-weight: 800;
      letter-spacing: -.04em;
      margin: 6px 0 4px;
      line-height: 1;
    }

    .score-card .legend-mini {
      font-size: 11px;
      color: var(--text-dim);
      line-height: 1.55;
    }

    .score-scale {
      height: 5px;
      background: var(--border);
      border-radius: 99px;
      overflow: hidden;
      margin: 8px 0 6px;
    }

    .score-scale span {
      display: block;
      height: 100%;
      border-radius: 99px;
      transition: width .7s cubic-bezier(.22, 1, .36, 1);
    }

    /* ── Toolbar upgrade ── */
    .toolbar {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      align-items: center;
      margin-bottom: 16px;
      padding-bottom: 14px;
      border-bottom: 1px solid var(--border);
    }

    .toolbar-right {
      margin-left: auto;
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }

    /* ── Item cards upgrade ── */
    .item {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 12px 14px;
      margin-top: 6px;
      transition: all var(--transition);
    }

    .item:hover {
      background: var(--card-hover);
      border-color: var(--border-light);
    }

    /* ── Narrative cards upgrade ── */
    .narrative-card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 18px 20px;
      transition: all var(--transition);
    }

    .narrative-card:hover {
      border-color: var(--border-light);
    }

    .narrative-card h3 {
      font-family: var(--font-display);
      font-size: 14px;
      font-weight: 700;
      letter-spacing: -.02em;
      margin-bottom: 10px;
    }

    /* ── Synthese panels upgrade ── */
    .synthese-panel {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 18px;
      transition: all var(--transition);
    }

    .synthese-panel h3 {
      font-family: var(--font-display);
      font-size: 14px;
      font-weight: 700;
      letter-spacing: -.02em;
      margin-bottom: 8px;
    }

    .synthese-panel:hover {
      border-color: var(--border-light);
    }

    /* ── Legend upgrade ── */
    .legend-item {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 10px 12px;
      font-size: 12px;
      color: var(--text-dim);
      transition: all var(--transition);
    }

    .legend-item:hover {
      border-color: var(--border-light);
      background: var(--card-hover);
    }

    /* ── Accordion upgrade ── */
    details.section-accordion {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      margin-bottom: 10px;
      overflow: hidden;
      transition: all var(--transition);
    }

    details.section-accordion[open] {
      border-color: var(--border-light);
      background: var(--card-hover);
    }

    details.section-accordion>summary {
      padding: 14px 16px;
      font-family: var(--font);
      font-weight: 700;
      font-size: 13px;
      letter-spacing: -.01em;
    }

    /* ── Theme toggle upgrade ── */
    .theme-toggle {
      font-family: var(--font);
      font-size: 11px;
      font-weight: 600;
      padding: 6px 12px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: var(--card);
      color: var(--text-dim);
      cursor: pointer;
      transition: all var(--transition);
    }

    .theme-toggle:hover {
      border-color: var(--accent);
      color: var(--text);
    }

    /* ── Tooltip upgrade ── */
    .tooltip {
      background: var(--card);
      border: 1px solid var(--border-light);
      border-radius: var(--radius-sm);
      box-shadow: var(--shadow);
      font-family: var(--font);
      font-size: 12px;
    }

    /* ── Risk score color upgrade ── */
    .stat.stat-red .stat-value {
      color: var(--red);
    }

    .stat.stat-orange .stat-value {
      color: var(--orange);
    }

    .stat.stat-green .stat-value {
      color: var(--green);
    }

    .stat.stat-accent .stat-value {
      color: var(--accent);
    }

    .stat.stat-violet .stat-value {
      color: var(--violet);
    }

    /* ── Progress bars color gradient ── */
    .stat.stat-red .stat-bar span {
      background: linear-gradient(90deg, #f97316, var(--red));
    }

    .stat.stat-orange .stat-bar span {
      background: linear-gradient(90deg, #fbbf24, var(--orange));
    }

    .stat.stat-green .stat-bar span {
      background: linear-gradient(90deg, #6ee7b7, var(--green));
    }

    .stat.stat-accent .stat-bar span {
      background: linear-gradient(90deg, #818cf8, var(--accent));
    }

    .stat.stat-violet .stat-bar span {
      background: linear-gradient(90deg, #c084fc, var(--violet));
    }

    /* ── Tables upgrade ── */
    table {
      font-family: var(--font);
    }

    th {
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: .08em;
      color: var(--text-muted);
      font-weight: 700;
      background: rgba(30, 40, 64, .3);
    }

    tr:hover td {
      background: rgba(91, 115, 255, .04);
    }

    /* ── Badge upgrades ── */
    .badge {
      font-family: var(--font);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .04em;
      border-radius: 5px;
      padding: 2px 7px;
    }

    /* ── V7 Signal indicator bar ── */
    .v7-signal-bar {
      display: flex;
      gap: 3px;
      margin: 8px 0 4px;
    }

    .v7-signal-bar .seg {
      flex: 1;
      height: 5px;
      border-radius: 3px;
      background: var(--border);
      transition: background .4s ease;
    }

    .v7-signal-bar .seg.active-red {
      background: var(--red);
    }

    .v7-signal-bar .seg.active-orange {
      background: var(--orange);
    }

    .v7-signal-bar .seg.active-green {
      background: var(--green);
    }

    .v7-signal-bar .seg.active-violet {
      background: var(--violet);
    }

    .v7-signal-bar .seg.active-accent {
      background: var(--accent);
    }

    /* ── V7 Risk level pill ── */
    .risk-pill {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 4px 10px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .04em;
    }

    .risk-pill-critical {
      background: var(--red-bg);
      color: var(--red);
      border: 1px solid var(--red-border);
    }

    .risk-pill-high {
      background: var(--orange-bg);
      color: var(--orange);
      border: 1px solid var(--orange-border);
    }

    .risk-pill-moderate {
      background: var(--accent-glow);
      color: var(--accent);
      border: 1px solid rgba(91, 115, 255, .25);
    }

    .risk-pill-low {
      background: var(--green-bg);
      color: var(--green);
      border: 1px solid var(--green-border);
    }

    /* ── V7 Reference cards in About tab ── */
    .ref-card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 12px 14px;
      margin-bottom: 8px;
      transition: all var(--transition);
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 12px;
      align-items: start;
    }

    .ref-card:hover {
      border-color: var(--border-light);
      background: var(--card-hover);
    }

    .ref-card .ref-year {
      font-family: var(--font-mono);
      font-size: 10px;
      color: var(--accent);
      font-weight: 600;
      white-space: nowrap;
      margin-top: 2px;
    }

    .ref-card .ref-title {
      font-size: 12px;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 4px;
    }

    .ref-card .ref-finding {
      font-size: 11px;
      color: var(--text-dim);
      line-height: 1.55;
    }

    .ref-card .ref-or {
      display: inline-block;
      margin-top: 5px;
      font-family: var(--font-mono);
      font-size: 10px;
      background: var(--accent-glow);
      color: var(--accent);
      border: 1px solid rgba(91, 115, 255, .2);
      padding: 2px 6px;
      border-radius: 4px;
    }

    /* ── V7 Predictive narrative box ── */
    .predictive-narrative-box {
      background: linear-gradient(135deg, rgba(91, 115, 255, .06) 0%, rgba(168, 85, 247, .04) 100%);
      border: 1px solid rgba(91, 115, 255, .2);
      border-left: 3px solid var(--accent);
      border-radius: var(--radius);
      padding: 16px 18px;
      margin-bottom: 16px;
    }

    .predictive-narrative-box .pnb-header {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 10px;
    }

    .predictive-narrative-box .pnb-title {
      font-family: var(--font-display);
      font-size: 13px;
      font-weight: 700;
    }

    .predictive-wow-box {
      background: radial-gradient(circle at top right, rgba(66, 212, 255, .18), transparent 45%), linear-gradient(135deg, rgba(91, 115, 255, .16), rgba(18, 24, 42, .72));
      border: 1px solid rgba(132, 148, 255, .38);
      border-radius: var(--radius);
      padding: 14px 16px;
      margin-bottom: 14px;
      box-shadow: 0 12px 28px rgba(7, 10, 24, .28);
    }

    .wow-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 10px;
      margin-bottom: 10px;
    }

    .wow-kicker {
      font-size: 10px;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: rgba(224, 231, 255, .84);
      font-weight: 700;
    }

    .wow-title {
      font-family: var(--font-display);
      font-weight: 800;
      color: #eef2ff;
      font-size: 15px;
    }

    .wow-badge {
      border: 1px solid rgba(191, 219, 254, .45);
      color: #dbeafe;
      background: rgba(15, 23, 42, .4);
      border-radius: 999px;
      padding: 4px 9px;
      font-size: 10px;
      font-weight: 700;
      white-space: nowrap;
    }

    .wow-meter {
      height: 7px;
      border-radius: 999px;
      overflow: hidden;
      background: rgba(148, 163, 184, .26);
      margin-bottom: 10px;
    }

    .wow-meter span {
      display: block;
      height: 100%;
      width: 0;
      transition: width .8s cubic-bezier(.22, 1, .36, 1);
      background: linear-gradient(90deg, #34d399 0%, #22d3ee 55%, #8b5cf6 100%);
      box-shadow: 0 0 18px rgba(34, 211, 238, .35);
    }

    .wow-snapshot {
      font-size: 12px;
      color: #e2e8f0;
      line-height: 1.7;
      margin-bottom: 10px;
      min-height: 38px;
    }

    .wow-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }

    .wow-stage {
      background: rgba(15, 23, 42, .34);
      border: 1px solid rgba(191, 219, 254, .22);
      border-radius: 10px;
      padding: 8px 9px;
      transition: transform .25s ease, border-color .25s ease;
    }

    .wow-stage:hover {
      transform: translateY(-1px);
      border-color: rgba(125, 211, 252, .44);
    }

    .wow-stage-label {
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: .08em;
      color: #cbd5e1;
      margin-bottom: 4px;
    }

    .wow-stage-value {
      font-size: 12px;
      color: #f8fafc;
      line-height: 1.45;
    }

    body[data-theme="light"] .predictive-wow-box {
      background: radial-gradient(circle at top right, rgba(56, 189, 248, .12), transparent 45%), linear-gradient(135deg, rgba(59, 130, 246, .12), rgba(236, 253, 245, .92));
      border-color: rgba(59, 130, 246, .28);
      box-shadow: 0 8px 22px rgba(59, 130, 246, .12);
    }

    body[data-theme="light"] .wow-title,
    body[data-theme="light"] .wow-snapshot,
    body[data-theme="light"] .wow-stage-value {
      color: #0f172a;
    }

    body[data-theme="light"] .wow-kicker,
    body[data-theme="light"] .wow-stage-label {
      color: #334155;
    }

    body[data-theme="light"] .wow-badge {
      color: #1e3a8a;
      background: rgba(255, 255, 255, .62);
      border-color: rgba(30, 64, 175, .22);
    }
  
    /* ── V7 Hypothesis cards ── */
    .hyp-card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 14px;
      transition: all var(--transition);
    }

    .hyp-card:hover {
      border-color: var(--border-light);
    }

    .hyp-card strong {
      font-family: var(--font);
      font-size: 12px;
      font-weight: 700;
      display: block;
      margin-bottom: 4px;
    }

    .hyp-card .hyp-note {
      font-size: 11px;
      color: var(--text-dim);
      line-height: 1.6;
      margin-bottom: 8px;
    }

    .hyp-bar {
      height: 6px;
      background: var(--border);
      border-radius: 99px;
      overflow: hidden;
      margin-bottom: 4px;
    }

    .hyp-bar span {
      display: block;
      height: 100%;
      border-radius: 99px;
      transition: width .7s cubic-bezier(.22, 1, .36, 1);
    }

    .hyp-val {
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 600;
      color: var(--text-dim);
    }

    /* ── Scrollbar ── */
    ::-webkit-scrollbar {
      width: 5px;
      height: 5px;
    }

    ::-webkit-scrollbar-track {
      background: transparent;
    }

    ::-webkit-scrollbar-thumb {
      background: var(--border-light);
      border-radius: 99px;
    }

    ::-webkit-scrollbar-thumb:hover {
      background: var(--text-muted);
    }

    /* ── Main content area ── */
    .main {
      padding: 20px 24px;
    }

    /* ── Tab fade animation ── */
    .tab-panel.active {
      animation: fadeSlide .25s cubic-bezier(.4, 0, .2, 1);
    }

    @keyframes fadeSlide {
      from {
        opacity: 0;
        transform: translateY(5px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* ── V7 Section dividers ── */
    .v7-divider {
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--border), transparent);
      margin: 16px 0;
    }

    /* ── V7 Info callout ── */
    .v7-callout {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 12px 14px;
      font-size: 12px;
      color: var(--text-dim);
      line-height: 1.65;
    }

    .v7-callout.callout-warning {
      border-color: var(--orange-border);
      background: var(--orange-bg);
      color: var(--orange);
    }

    .v7-callout.callout-info {
      border-color: rgba(91, 115, 255, .2);
      background: var(--accent-glow);
      color: var(--text-dim);
    }

    /* ── V7 Jump links ── */
    .jump-link {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 5px 10px;
      border-radius: 999px;
      background: rgba(91, 115, 255, .08);
      color: var(--accent);
      font-size: 11px;
      font-weight: 600;
      text-decoration: none;
      border: 1px solid rgba(91, 115, 255, .2);
      transition: all var(--transition);
    }

    .jump-link:hover {
      background: rgba(91, 115, 255, .15);
      border-color: var(--accent);
    }

    /* ── V7 Responsive improvements ── */
    @media (max-width: 1400px) {
      .app {
        grid-template-columns: 380px 1fr;
      }
    }

    @media (max-width: 1200px) {
      .app {
        grid-template-columns: 1fr;
      }

      .sidebar {
        max-height: 55vh;
        overflow-y: auto;
        position: relative;
        height: auto;
      }
    }

    @media (max-width: 980px) {
      .stats {
        grid-template-columns: repeat(2, 1fr);
      }

      .score-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .synthese-hero {
        grid-template-columns: 1fr;
      }

      .main {
        padding: 14px 16px;
      }

      .toolbar-right {
        margin-left: 0;
        width: 100%;
      }
    }

    @media (max-width: 640px) {
      .stats {
        grid-template-columns: 1fr !important;
      }

      .score-grid {
        grid-template-columns: 1fr !important;
      }

      .row,
      .row3,
      .row4 {
        grid-template-columns: 1fr !important;
      }

      .main {
        padding: 12px;
      }

      .tab {
        padding: 8px 10px;
        font-size: 11px;
      }
    }

    /* ── V7.1 Issue history items ── */
    .issue-history-item {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 10px 12px;
      margin-bottom: 6px;
      transition: all var(--transition);
    }

    .issue-history-item:hover {
      border-color: var(--border-light);
      background: var(--card-hover);
    }

    .issue-history-item .meta {
      font-size: 11px;
      color: var(--text-muted);
      margin-top: 2px;
      line-height: 1.5;
    }

    /* ── V7.1 Learning panel ── */
    .learning-panel {
      border-left: 3px solid var(--violet) !important;
      background: linear-gradient(135deg, rgba(168, 85, 247, .04) 0%, transparent 60%) !important;
    }

    .learning-panel-header {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 14px;
    }

    .learning-panel-icon {
      font-size: 22px;
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--violet-bg);
      border: 1px solid var(--violet-border);
      border-radius: 10px;
      flex-shrink: 0;
    }

    .learning-count-badge {
      margin-left: auto;
      font-family: var(--font-display);
      font-size: 32px;
      font-weight: 800;
      color: var(--violet);
      letter-spacing: -.04em;
      line-height: 1;
    }

    .learning-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
    }

    @media(max-width:1300px) {
      .learning-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media(max-width:640px) {
      .learning-grid {
        grid-template-columns: 1fr;
      }
    }

    .learning-card {
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 12px;
      position: relative;
      overflow: hidden;
      transition: all var(--transition);
    }

    .learning-card:hover {
      border-color: var(--border-light);
    }

    .learning-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
    }

    .learning-card-recent::before {
      background: linear-gradient(90deg, var(--red), var(--orange));
    }

    .learning-card-profile::before {
      background: linear-gradient(90deg, var(--violet), var(--accent));
    }

    .learning-card-context::before {
      background: linear-gradient(90deg, var(--accent), var(--cyan));
    }

    .learning-card-trend::before {
      background: linear-gradient(90deg, var(--green), var(--cyan));
    }

    .lc-label {
      font-size: 9px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .1em;
      color: var(--text-muted);
      margin-bottom: 5px;
    }

    .lc-value {
      font-family: var(--font-display);
      font-size: 20px;
      font-weight: 800;
      letter-spacing: -.03em;
      color: var(--text);
      margin-bottom: 3px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .lc-sub {
      font-size: 10px;
      color: var(--text-muted);
      line-height: 1.45;
    }

    body[data-theme="light"] .learning-card {
      background: #f8fafd;
    }

    /* ── V7.1 Hyp cards grid ── */
    #predictiveHypotheses {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 10px;
    }

    /* ── V7.1 Year input no spinner ── */
    #caseYearInput::-webkit-outer-spin-button,
    #caseYearInput::-webkit-inner-spin-button {
      -webkit-appearance: none;
    }

    #caseYearInput {
      -moz-appearance: textfield;
    }

    /* ── V8 Environment synthesis diagram ── */
    .env-synthese-diagram {
      background: var(--card);
      border: 1px solid var(--border);
      border-left: 3px solid var(--accent);
      border-radius: var(--radius);
      padding: 16px 18px;
      margin: 16px 0;
    }

    .env-diag-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;
    }

    .env-diag-title {
      font-family: var(--font-display);
      font-size: 13px;
      font-weight: 800;
      letter-spacing: -.01em;
      color: var(--text);
    }

    .env-diag-nodes {
      display: grid;
      grid-template-columns: 1fr auto 1fr 1fr;
      gap: 10px;
      align-items: center;
    }

    .env-diag-center {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .env-diag-svg {
      width: 60px;
      height: 48px;
      flex-shrink: 0;
    }

    .env-diag-node {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      padding: 12px 10px;
      border-radius: var(--radius);
      border: 2px solid var(--border);
      background: var(--bg);
      transition: border-color .25s, box-shadow .25s;
      cursor: default;
    }

    .env-diag-node:hover {
      box-shadow: 0 2px 12px rgba(108,124,255,.18);
    }

    .env-diag-icon {
      font-size: 20px;
      line-height: 1;
    }

    .env-diag-label {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .06em;
      color: var(--text-muted);
    }

    .env-diag-score {
      font-size: 26px;
      font-weight: 900;
      font-family: var(--font-mono);
      line-height: 1;
    }

    .env-diag-level {
      font-size: 10px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: .05em;
      color: var(--text-muted);
    }

    .env-diag-node.env-level-high {
      border-color: var(--red);
      background: rgba(255,92,108,.07);
    }

    .env-diag-node.env-level-high .env-diag-score { color: var(--red); }

    .env-diag-node.env-level-moderate {
      border-color: var(--orange);
      background: rgba(255,173,66,.07);
    }

    .env-diag-node.env-level-moderate .env-diag-score { color: var(--orange); }

    .env-diag-node.env-level-low {
      border-color: var(--green);
      background: rgba(66,219,165,.07);
    }

    .env-diag-node.env-level-low .env-diag-score { color: var(--green); }

    /* export dropdown */
    #exportTypeSelect {
      font-family: var(--font-body);
      font-size: 13px;
      background: var(--card);
      color: var(--text);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 5px 10px;
      cursor: pointer;
    }

/* ─── INLINE PATCH ─── */
@page{size:A4;margin:14mm}
      body{font-family:Arial,Helvetica,sans-serif;color:#111;background:#fff;margin:0}
      .page{page-break-after:always}
      .page:last-child{page-break-after:auto}
      h1{font-size:24px;margin:0 0 6px}
      h2{font-size:17px;margin:0 0 10px}
      h3{font-size:14px;margin:0 0 8px}
      p{margin:0 0 10px;line-height:1.45}
      .meta{font-size:12px;color:#5b6470;margin-bottom:16px}
      .score-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:14px 0 18px}
      .score-card{border:1px solid #d8dee8;border-radius:14px;padding:12px;background:#fafcff;min-height:118px}
      .score-card .emoji{font-size:18px;margin-bottom:6px}
      .score-card .kicker{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:#667085;font-weight:700}
      .score-card .big{font-size:30px;font-weight:800;margin:4px 0 8px}
      .score-card .legend-mini{font-size:11px;color:#667085;line-height:1.45}
      .box{border:1px solid #d8dee8;border-radius:14px;padding:12px;background:#fff;margin:0 0 12px}
      .svg-wrap{border:1px solid #d8dee8;border-radius:14px;padding:10px;background:#fff;overflow:hidden}
      svg{width:100% !important;height:auto !important;display:block;max-width:100% !important;min-width:0 !important}
      .two-col{display:grid;grid-template-columns:1.05fr .95fr;gap:14px;align-items:start}
      .empty-box{border:1px dashed #cbd5e1;border-radius:12px;padding:14px;color:#64748b}
      .copyright{margin-top:20px;padding-top:10px;border-top:1px solid #e7ecf3;font-size:11px;color:#667085;text-align:center}