/* PROGRESS */
  .progress-bar {
    height: 2px; background: var(--border); border-radius: 1px; margin-bottom: 2.5rem; overflow: hidden;
  }
  .progress-fill { height: 100%; background: var(--terracotta); transition: width 0.4s ease; }
  .progress-label { font-size: 11px; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.5rem; }

  /* SCREENS */
  .screen { display: none; }
  .screen.active { display: block; }

  /* AUTOSAVE RESUME-BANNER */
  .resume-banner { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; justify-content: space-between; align-items: center; padding: 0.85rem 1rem; margin-bottom: 2rem; border: 0.5px solid var(--border); border-left: 2px solid var(--sage); border-radius: 2px; background: rgba(138,158,140,0.08); font-size: 13px; color: var(--charcoal); }
  .resume-actions { display: flex; gap: 0.5rem; flex-shrink: 0; }

  /* TAALSCHAKELAAR */
  .lang-toggle { display: inline-flex; align-items: center; border: 0.5px solid var(--border); border-radius: 2px; overflow: hidden; }
  .lang-toggle button { font-family: var(--body); font-size: 11px; font-weight: 500; letter-spacing: 0.04em; cursor: pointer; border: none; background: none; color: var(--muted); padding: 0.35rem 0.55rem; }
  .lang-toggle button.active { background: var(--charcoal); color: var(--warm-white); }

  /* VELD-HINT */
  .field-hint { font-size: 11.5px; color: var(--muted); font-weight: 300; line-height: 1.4; margin-top: 0.4rem; }

  /* ENGELS-MODUS MELDING (alleen tonen bij lang-en) */
  .en-notice { display: none; font-size: 12.5px; line-height: 1.5; color: var(--charcoal); background: rgba(138,158,140,0.10); border-left: 2px solid var(--sage); border-radius: 2px; padding: 0.7rem 0.9rem; margin-bottom: 1.5rem; }
  body.lang-en .en-notice { display: block; }

  /* HELP-PAGINA */
  .help-title { font-family: var(--display); font-size: 28px; font-weight: 300; margin-bottom: 0.5rem; }
  .help-intro { font-size: 14px; font-weight: 300; color: var(--muted); line-height: 1.7; margin-bottom: 1.5rem; }
  .help-h { font-family: var(--display); font-size: 20px; font-weight: 400; margin: 1.75rem 0 0.6rem; }
  .help-item { margin-bottom: 0.9rem; }
  .help-item h4 { font-size: 14px; font-weight: 500; color: var(--charcoal); margin-bottom: 0.15rem; }
  .help-item p, .help-p { font-size: 13.5px; font-weight: 300; color: var(--muted); line-height: 1.7; margin-bottom: 0.6rem; }

  /* Print-only URL op het rapport (briefpapier) */
  .brand-url, .report-url { display: none; }
  .report-url { text-align: center; font-size: 11px; color: var(--muted); letter-spacing: 0.04em; margin-top: 1rem; }

  /* TOEGANGSCODE-VELD */
  .unlock-box { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-top: 1rem; }
  .unlock-box input { font-family: var(--body); font-size: 14px; font-weight: 300; border: 0.5px solid var(--border); border-radius: 2px; padding: 0.55rem 0.8rem; background: var(--warm-white); color: var(--charcoal); outline: none; min-width: 200px; }
  .unlock-box input:focus { border-color: var(--sage); }
  .unlock-or { font-size: 12.5px; color: var(--muted); }
  .unlock-msg { font-size: 12.5px; color: var(--terracotta); }
  .unlock-consent { flex-basis: 100%; display: flex; gap: 0.5rem; align-items: flex-start; font-size: 12.5px; font-weight: 300; color: var(--charcoal); line-height: 1.5; }
  .unlock-consent input { min-width: 0; width: auto; margin-top: 3px; flex-shrink: 0; }
  .unlock-consent a { color: var(--terracotta); }

  /* UPGRADE-TEASER (gratis versie) */
  .upgrade-teaser { margin-top: 1rem; padding: 0.9rem 1rem; border: 0.5px dashed var(--border); border-radius: 2px; background: rgba(196,113,74,0.06); font-size: 13px; font-weight: 300; color: var(--charcoal); line-height: 1.6; }

  /* DEMO-BANNER (voorbeeldrapport) */
  .demo-banner { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; justify-content: space-between; align-items: center; padding: 0.85rem 1rem; margin-bottom: 2rem; border: 0.5px solid var(--border); border-left: 2px solid var(--terracotta); border-radius: 2px; background: rgba(196,113,74,0.08); font-size: 13px; color: var(--charcoal); }

  /* WELCOME */
  .welcome-icon { font-size: 40px; margin-bottom: 1.5rem; }
  .welcome h1 { font-family: var(--display); font-size: clamp(28px, 5vw, 40px); font-weight: 300; line-height: 1.2; margin-bottom: 1rem; }
  .welcome h1 em { font-style: italic; color: var(--terracotta); }
  .welcome p { font-size: 15px; font-weight: 300; color: var(--muted); line-height: 1.8; margin-bottom: 2rem; max-width: 500px; }
  .welcome-features { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 2.5rem; }
  .welcome-feature { display: flex; align-items: center; gap: 0.75rem; font-size: 14px; font-weight: 300; color: var(--charcoal); }
  .feature-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sage); flex-shrink: 0; }
  .welcome-note { font-size: 12px; color: var(--muted); margin-top: 1rem; font-style: italic; }

  /* LOAD SCREEN */
  .load-zone {
    border: 1px dashed var(--border); border-radius: 4px; padding: 2.5rem 2rem;
    text-align: center; cursor: pointer; transition: border-color 0.2s; margin-bottom: 1.5rem;
  }
  .load-zone:hover { border-color: var(--sage); }
  .load-zone p { font-size: 14px; color: var(--muted); margin-top: 0.5rem; }
  #file-input { display: none; }

  /* QUESTIONS */
  .question-block { margin-bottom: 2.5rem; }
  .question-num { font-size: 11px; color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.5rem; }
  .question-text { font-family: var(--display); font-size: 22px; font-weight: 300; line-height: 1.4; margin-bottom: 0.5rem; }
  .question-hint { font-size: 13px; color: var(--muted); font-weight: 300; margin-bottom: 1.25rem; }

  /* VALIDATIE-HINT (stap 1) */
  .step-hint { font-size: 13px; font-weight: 400; color: var(--terracotta); line-height: 1.5; margin: 0.25rem 0 1.25rem; }
  .options-grid.needs-answer { outline: 1px solid var(--terracotta); outline-offset: 4px; border-radius: 4px; }
  .field select.needs-answer, .field input.needs-answer { border-color: var(--terracotta); }

  /* INPUTS */
  .field { margin-bottom: 1.25rem; }
  .field label { display: block; font-size: 13px; font-weight: 500; color: var(--charcoal); margin-bottom: 0.4rem; }
  .field input, .field select, .field textarea {
    width: 100%; font-family: var(--body); font-size: 14px; font-weight: 300;
    border: 0.5px solid var(--border); border-radius: 2px; padding: 0.65rem 0.9rem;
    background: var(--warm-white); color: var(--charcoal); outline: none; transition: border-color 0.2s;
  }
  .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--sage); }
  .field textarea { resize: vertical; min-height: 80px; }
  .field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'12\' height=\'8\' viewBox=\'0 0 12 8\'%3E%3Cpath d=\'M1 1l5 5 5-5\' stroke=\'%238A8880\' stroke-width=\'1.5\' fill=\'none\'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.9rem center; padding-right: 2.5rem; }

  .options-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 1rem; }
  .option-btn {
    display: flex; align-items: center; gap: 0.65rem;
    font-family: var(--body); font-size: 14px; font-weight: 300; cursor: pointer;
    border: 0.5px solid var(--border); border-radius: 2px; padding: 0.75rem 1rem;
    background: var(--warm-white); color: var(--charcoal); text-align: left; transition: all 0.15s;
  }

  /* ICONEN (inline SVG, geen dependency) */
  .ico { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
  .ico-ok { color: var(--sage); }
  .welcome-ico { width: 44px; height: 44px; stroke: var(--terracotta); stroke-width: 1.25; fill: none; stroke-linecap: round; stroke-linejoin: round; }
  .load-ico { width: 30px; height: 30px; stroke: var(--sage); stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 0.5rem; }
  .opt-body { display: flex; flex-direction: column; gap: 2px; }
  .opt-desc { font-size: 11.5px; color: var(--muted); font-weight: 300; line-height: 1.35; }
  .option-btn.selected .opt-desc { color: var(--terracotta); opacity: 0.8; }

  /* VERMOGEN-REKENHULP */
  details.calc { margin-top: 0.75rem; border: 0.5px solid var(--border); border-radius: 2px; background: var(--ivory); }
  details.calc summary { cursor: pointer; font-size: 13px; color: var(--sage); padding: 0.6rem 0.9rem; list-style: none; user-select: none; }
  details.calc summary::-webkit-details-marker { display: none; }
  details.calc summary::before { content: "+ "; }
  details.calc[open] summary::before { content: "– "; }
  details.calc[open] summary { border-bottom: 0.5px solid var(--border); }
  .calc-body { padding: 0.9rem; display: flex; flex-direction: column; gap: 0.55rem; }
  .calc-sub { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 0.3rem; }
  .calc-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
  .calc-row label { font-size: 13px; font-weight: 300; color: var(--charcoal); }
  .calc-row input { width: 140px; font-family: var(--body); font-size: 13px; font-weight: 300; border: 0.5px solid var(--border); border-radius: 2px; padding: 0.4rem 0.65rem; background: var(--warm-white); color: var(--charcoal); outline: none; text-align: right; }
  .calc-row input:focus { border-color: var(--sage); }
  .calc-result { display: flex; justify-content: space-between; align-items: center; padding-top: 0.7rem; margin-top: 0.2rem; border-top: 0.5px solid var(--border); font-size: 13px; color: var(--muted); }
  .calc-result strong { font-family: var(--display); font-size: 22px; font-weight: 400; color: var(--terracotta); }
  .calc-note { font-size: 11px; color: var(--muted); font-style: italic; line-height: 1.5; }
  .option-btn:hover { border-color: var(--sage); }
  .option-btn.selected { border-color: var(--terracotta); background: rgba(196,113,74,0.06); color: var(--terracotta); }

  .nav-row { display: flex; justify-content: space-between; align-items: center; margin-top: 2rem; padding-top: 1.5rem; border-top: 0.5px solid var(--border); }

  /* RAPPORT */
  .rapport-header { margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 0.5px solid var(--border); }
  .rapport-header h2 { font-family: var(--display); font-size: 30px; font-weight: 300; margin-bottom: 0.5rem; }
  .rapport-meta { font-size: 12px; color: var(--muted); }
  .rapport-section { margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 0.5px solid var(--border); }
  .rapport-section:last-of-type { border-bottom: none; }
  .rapport-section h3 { font-size: 13px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sage); margin-bottom: 1rem; }
  .rapport-row { display: flex; justify-content: space-between; align-items: flex-start; padding: 0.6rem 0; border-bottom: 0.5px solid var(--border); gap: 1rem; }
  .rapport-row:last-child { border-bottom: none; }
  .rapport-label { font-size: 13px; color: var(--muted); font-weight: 300; flex-shrink: 0; }
  .rapport-value { font-size: 14px; color: var(--charcoal); font-weight: 400; text-align: right; }

  .risk-item { display: flex; gap: 0.75rem; align-items: flex-start; padding: 1rem; margin-bottom: 0.75rem; border-radius: 2px; }
  .risk-high { background: rgba(196,113,74,0.08); border-left: 2px solid var(--terracotta); }
  .risk-med { background: rgba(138,158,140,0.08); border-left: 2px solid var(--sage); }
  .risk-label { font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; flex-shrink: 0; margin-top: 2px; }
  .risk-high .risk-label { color: var(--terracotta); }
  .risk-med .risk-label { color: var(--sage); }
  .risk-text { font-size: 14px; font-weight: 300; color: var(--charcoal); line-height: 1.6; }

  .action-item { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.75rem 0; border-bottom: 0.5px solid var(--border); }
  .action-item:last-child { border-bottom: none; }
  .action-num { font-family: var(--display); font-size: 22px; font-weight: 400; color: var(--terracotta); min-width: 24px; line-height: 1.3; }
  .action-text { font-size: 14px; font-weight: 300; color: var(--charcoal); line-height: 1.6; }

  .rapport-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 2rem; padding-top: 1.5rem; border-top: 0.5px solid var(--border); }
  .disclaimer { font-size: 11px; color: var(--muted); line-height: 1.6; margin-top: 1.5rem; font-style: italic; }

  .tag { display: inline-block; font-size: 11px; font-weight: 500; padding: 3px 8px; border-radius: 2px; background: var(--ivory); color: var(--muted); margin-right: 4px; }

  /* PRINT: alleen het rapport, netjes voor PDF (window.print) */
  @media print {
    @page { margin: 13mm; }
    body { background: #fff; color: var(--charcoal); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .app { max-width: 100%; margin: 0; padding: 0; }
    .app-header { margin-bottom: 1.5rem; }
    .header-actions, .rapport-actions { display: none !important; }
    .screen { display: none !important; }
    #screen-rapport { display: block !important; }
    .risk-item, .action-item { break-inside: avoid; page-break-inside: avoid; }
    .disclaimer { page-break-inside: avoid; }
    .action-num { color: var(--charcoal) !important; font-weight: 500; }
    .demo-banner, .resume-banner { display: none !important; }
    .brand-url { display: inline; font-family: var(--body); font-size: 12px; font-weight: 400; color: var(--muted); }
    .report-url { display: block !important; }
    /* Compacter: minder witruimte, kleinere tekst */
    .rapport-header { margin-bottom: 1rem; padding-bottom: 0.75rem; }
    .rapport-header h2 { font-size: 24px; }
    .rapport-section { margin-bottom: 1rem; padding-bottom: 1rem; }
    .rapport-section h3 { margin-bottom: 0.5rem; }
    .rapport-row { padding: 0.4rem 0; }
    .risk-item { padding: 0.55rem 0.8rem; margin-bottom: 0.5rem; }
    .action-item { padding: 0.45rem 0; }
    .risk-text, .action-text, .rapport-value { font-size: 12.5px; line-height: 1.45; }
    .disclaimer { margin-top: 1rem; }
  }