/* ClinPOCUS · FoCUS Interna · Beta v0.11
   Hoja de estilos consolidada con ayudas técnicas y optimización móvil. */

html { -webkit-text-size-adjust: 100%; }
    :root {
      color-scheme: light;
      --surface-page: #F7FAFC;
      --surface-card: #FFFFFF;
      --surface-subtle: #F8FAFC;
      --surface-muted: #F1F5F9;
      --surface-elevated: #FFFFFF;
      --surface-accent: #F0FDFA;
      --surface-accent-strong: #CCFBF1;
      --surface-success: #DCFCE7;
      --surface-success-soft: #F0FDF4;
      --surface-warning: #FEF3C7;
      --surface-warning-soft: #FFFBEB;
      --surface-danger: #FEE2E2;
      --surface-danger-soft: #FEF2F2;
      --text-primary: #0B1F33;
      --text-body: #334155;
      --text-secondary: #64748B;
      --text-muted-strong: #475569;
      --text-tertiary: #94A3B8;
      --text-on-primary: #FFFFFF;
      --border-default: #E2E8F0;
      --border-strong: #CBD5E1;
      --border-soft: #D6DEE8;
      --primary: #0F766E;
      --primary-strong: #115E59;
      --primary-glow: rgba(15,118,110,.09);
      --success: #15803D;
      --success-text: #166534;
      --success-glow: rgba(21,128,61,.09);
      --warning: #B45309;
      --warning-text: #92400E;
      --warning-text-strong: #78350F;
      --warning-glow: rgba(180,83,9,.09);
      --danger: #B91C1C;
      --danger-text: #991B1B;
      --danger-glow: rgba(185,28,28,.08);
      --accent: #0B1F33;
      --brand-navy: #0B1F33;
      --brand-cyan: #0F766E;
      --shadow-soft: 0 5px 18px rgba(11,31,51,.045);
      --shadow-header: 0 4px 18px rgba(11,31,51,.06);
      --shadow-footer: 0 -4px 18px rgba(11,31,51,.055);
      --focus-ring: 0 0 0 3px rgba(15,118,110,.22);
      --bg-color: var(--surface-page);
      --card-bg: var(--surface-card);
      --card-border: var(--border-default);
      --text-main: var(--text-primary);
      --text-muted: var(--text-secondary);
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      -webkit-tap-highlight-color: transparent;
    }

    body {
      background: var(--bg-color);
      color: var(--text-main);
      min-height: 100vh;
      display: flex;
      justify-content: center;
    }

    button, input, textarea { font: inherit; }
    button { min-height: 44px; }

    .app-container {
      width: 100%;
      max-width: 480px;
      display: flex;
      flex-direction: column;
      min-height: 100vh;
    }

    header {
      background: rgba(15, 20, 35, 0.96);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border-bottom: 1px solid var(--card-border);
      position: sticky;
      top: 0;
      z-index: 100;
      padding: 12px 16px;
    }

    .header-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
    .logo-title { font-size: 15px; font-weight: 850; letter-spacing: .05em; color: var(--primary); text-transform: uppercase; }
    .logo-sub { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; margin-top: 2px; }
    .btn-reset { background: var(--danger-glow); color: var(--danger); border: 1px solid rgba(244,63,94,.35); border-radius: 999px; padding: 8px 12px; font-size: 11px; font-weight: 750; cursor: pointer; text-transform: uppercase; }

    .progress-container { display: flex; justify-content: space-between; align-items: center; position: relative; margin-top: 14px; padding: 0 2px; }
    .progress-line-bg, .progress-line-fill { position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 2px; }
    .progress-line-bg { right: 0; background: var(--card-border); z-index: 1; }
    .progress-line-fill { background: var(--primary); z-index: 2; width: 0%; transition: width .25s ease; }
    .step-node { width: 34px; height: 34px; border-radius: 50%; background: #1d243d; border: 2px solid #2b355a; color: var(--text-muted); font-size: 12px; font-weight: 750; display: flex; align-items: center; justify-content: center; z-index: 3; cursor: pointer; transition: all .2s ease; }
    .step-node.active { background: var(--primary-glow); border-color: var(--primary); color: var(--primary); transform: scale(1.06); }
    .step-node.completed { background: var(--success-glow); border-color: var(--success); color: var(--success); }

    main { padding: 16px; flex-grow: 1; display: flex; flex-direction: column; }
    .step-content { display: none; }
    .step-content.active { display: flex; flex-direction: column; gap: 16px; animation: fadeIn .25s ease; }
    @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

    .step-header { display: flex; align-items: center; gap: 12px; }
    .icon-container { width: 40px; height: 40px; border-radius: 10px; background: var(--primary-glow); color: var(--primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .step-title { font-size: 17px; font-weight: 750; }
    .step-desc { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

    details.instruction-details { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 12px; overflow: hidden; }
    summary { padding: 13px; font-size: 13px; font-weight: 650; color: var(--primary); cursor: pointer; display: flex; justify-content: space-between; align-items: center; user-select: none; list-style: none; }
    summary::-webkit-details-marker { display: none; }
    summary::after { content: "▼"; font-size: 8px; transition: transform .2s; }
    details[open] summary::after { transform: rotate(180deg); }
    .instructions-panel { padding: 13px; border-top: 1px solid var(--card-border); background: #090d1a; font-size: 12px; color: #cbd5e1; line-height: 1.55; }

    .main-img { display: block; width: 100%; height: auto; max-height: 75vh; border-radius: 8px; border: 1px solid var(--card-border); margin-top: 12px; object-fit: contain; background: var(--card-bg); }
    .btn-fallback { display: block; background: #1d243d; color: var(--primary); text-align: center; padding: 12px; border-radius: 8px; font-size: 12px; font-weight: 650; text-decoration: none; margin-top: 8px; border: 1px solid var(--primary-glow); }

    .card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 16px; }
    .field-group { display: flex; flex-direction: column; gap: 8px; }
    .field-group + .field-group { border-top: 1px solid var(--card-border); padding-top: 14px; }
    .field-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
    .label-container { display: flex; flex-direction: column; min-width: 0; }
    label { font-size: 12px; font-weight: 750; color: var(--text-main); text-transform: uppercase; letter-spacing: .04em; }
    .ref-text { font-size: 11px; color: var(--text-muted); margin-top: 3px; font-weight: 600; line-height: 1.35; }

    .badge { font-size: 10px; font-weight: 750; padding: 3px 8px; border-radius: 999px; display: none; white-space: nowrap; }
    .badge.success { display: inline-block; background: var(--success-glow); color: var(--success); }
    .badge.danger { display: inline-block; background: var(--danger-glow); color: var(--danger); }
    .badge.warning { display: inline-block; background: var(--warning-glow); color: var(--warning); }

    .input-container { position: relative; display: flex; align-items: center; }
    input[type="number"] { width: 100%; background: var(--bg-color); border: 2px solid var(--card-border); border-radius: 12px; padding: 12px 48px 12px 14px; color: var(--text-main); font-size: 16px; font-weight: 650; outline: none; transition: all .2s ease; -moz-appearance: textfield; }
    input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
    input[type="number"]:focus { border-color: var(--primary); }
    input[type="number"]:disabled { opacity: .48; cursor: not-allowed; }
    .unit { position: absolute; right: 14px; font-size: 12px; font-weight: 750; color: var(--text-muted); pointer-events: none; }

    .status-green { border-color: var(--success) !important; background: rgba(16,185,129,.05) !important; color: var(--success) !important; }
    .status-yellow { border-color: var(--warning) !important; background: rgba(245,158,11,.05) !important; color: var(--warning) !important; }
    .status-red { border-color: var(--danger) !important; background: rgba(244,63,94,.05) !important; color: var(--danger) !important; }
    .status-invalid { border-color: var(--danger) !important; background: rgba(244,63,94,.08) !important; }

    .error-text { min-height: 16px; color: var(--danger); font-size: 11px; font-weight: 650; line-height: 1.35; }
    .helper-text { color: var(--text-muted); font-size: 11px; line-height: 1.4; }

    .btn-grid-4 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .btn-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .btn-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .btn-choice { background: #1d243d; border: 1px solid #2b355a; color: var(--text-muted); padding: 11px 7px; font-size: 12px; font-weight: 650; border-radius: 9px; cursor: pointer; transition: all .18s; text-align: center; }
    .btn-choice.active-cyan { background: var(--primary); color: #000; border-color: var(--primary); font-weight: 750; }
    .btn-choice.active-success { background: var(--success); color: #000; border-color: var(--success); font-weight: 750; }
    .btn-choice.active-warning { background: var(--warning); color: #000; border-color: var(--warning); font-weight: 750; }
    .btn-choice.active-danger { background: var(--danger); color: #fff; border-color: var(--danger); font-weight: 750; }

    .btn-row-option { background: #1d243d; border: 1px solid #2b355a; color: var(--text-muted); padding: 13px 14px; font-size: 12px; font-weight: 650; border-radius: 10px; cursor: pointer; transition: all .18s; display: flex; justify-content: space-between; align-items: center; width: 100%; margin-bottom: 8px; text-align: left; }
    .btn-row-option .dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--text-muted); flex-shrink: 0; }
    .btn-row-option.active-success { border-color: var(--success); background: var(--success-glow); color: var(--success); }
    .btn-row-option.active-success .dot { background: var(--success); border-color: var(--success); }
    .btn-row-option.active-warning { border-color: var(--warning); background: var(--warning-glow); color: var(--warning); }
    .btn-row-option.active-warning .dot { background: var(--warning); border-color: var(--warning); }
    .btn-row-option.active-danger { border-color: var(--danger); background: var(--danger-glow); color: var(--danger); }
    .btn-row-option.active-danger .dot { background: var(--danger); border-color: var(--danger); }
    .btn-row-option.active-cyan { border-color: var(--primary); background: var(--primary-glow); color: var(--primary); }
    .btn-row-option.active-cyan .dot { background: var(--primary); border-color: var(--primary); }

    .btn-not-evaluable { align-self: flex-start; min-height: 34px; background: transparent; color: var(--text-muted); border: 1px dashed #3a466f; border-radius: 8px; padding: 6px 10px; font-size: 11px; font-weight: 650; cursor: pointer; }
    .btn-not-evaluable.active { color: var(--warning); border-color: var(--warning); background: var(--warning-glow); }

    details.optional-img { margin-top: 4px; background: transparent; }
    details.optional-img summary { padding: 6px 0; font-size: 11px; color: var(--accent); justify-content: flex-start; gap: 4px; border-top: 1px dashed var(--card-border); margin-top: 4px; }
    details.optional-img summary::after { display: none; }

    .calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .calc-box { padding: 12px; background: #090d1a; border: 1px solid var(--card-border); border-radius: 12px; display: flex; flex-direction: column; align-items: center; text-align: center; min-height: 80px; justify-content: center; }
    .calc-label { font-size: 10px; color: var(--text-muted); font-weight: 750; text-transform: uppercase; margin-bottom: 4px; }
    .calc-val { font-size: 16px; font-weight: 800; }

    .notice { border: 1px solid var(--warning); background: var(--warning-glow); color: #fcd34d; border-radius: 12px; padding: 12px; font-size: 12px; line-height: 1.45; display: none; }
    .notice.show { display: block; }

    .report-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .report-tab { background: #1d243d; border: 1px solid #2b355a; color: var(--text-muted); border-radius: 10px; padding: 11px 8px; font-size: 12px; font-weight: 750; cursor: pointer; }
    .report-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }
    .report-panel { display: none; }
    .report-panel.active { display: block; }
    textarea { width: 100%; background: #090d1a; border: 1px solid var(--card-border); border-radius: 12px; padding: 12px; color: #e2e8f0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.5; resize: vertical; outline: none; }
    .btn-copy { width: 100%; padding: 13px; background: linear-gradient(to right, var(--primary), var(--accent)); color: #000; font-weight: 800; font-size: 12px; border-radius: 12px; border: none; cursor: pointer; margin-top: 10px; }

    footer { background: var(--card-bg); border-top: 1px solid var(--card-border); padding: 14px 16px; position: sticky; bottom: 0; z-index: 100; margin-top: auto; }
    .footer-buttons { display: flex; gap: 12px; }
    .btn-nav { flex: 1; padding: 13px; font-size: 12px; font-weight: 750; border-radius: 12px; cursor: pointer; text-transform: uppercase; transition: all .18s; border: none; display: flex; align-items: center; justify-content: center; }
    .btn-prev { background: #1d243d; border: 1px solid #2b355a; color: var(--text-main); }
    .btn-prev:disabled { opacity: .3; cursor: not-allowed; }
    .btn-next { background: var(--primary); color: #000; }

    @media (max-width: 360px) {
      .btn-grid-3, .btn-grid-4 { grid-template-columns: 1fr; }
      .step-node { width: 31px; height: 31px; }
      .calc-grid { grid-template-columns: 1fr; }
    }

    body { min-height: 100dvh; }
    .app-container { min-height: 100dvh; }
    header { padding-top: calc(12px + env(safe-area-inset-top)); }
    footer { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
    .brand { display:flex; align-items:center; gap:10px; min-width:0; }
    .brand-icon { width:42px; height:42px; border-radius:11px; flex:0 0 42px; box-shadow:0 0 0 1px rgba(35,206,217,.18); }
    .brand-copy { min-width:0; }
    .logo-title { color:var(--brand-cyan); font-size:15px; letter-spacing:.025em; text-transform:none; }
    .logo-sub { font-size:10.5px; text-transform:none; letter-spacing:.035em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .version-badge { display:inline-block; margin-top:4px; padding:2px 6px; border-radius:999px; background:rgba(35,206,217,.10); border:1px solid rgba(35,206,217,.22); color:var(--brand-cyan); font-size:9px; font-weight:750; letter-spacing:.05em; }

    input[type="number"]:disabled {
      opacity:1;
      cursor:not-allowed;
      background:#141b30;
      border-style:dashed;
      color:var(--text-muted);
    }

    .image-frame {
      margin-top:12px;
      padding:8px;
      border:1px solid var(--card-border);
      border-radius:12px;
      background:#050812;
    }
    .image-frame .main-img {
      display:block;
      width:100%;
      height:auto;
      max-height:none;
      margin:0;
      border:0;
      border-radius:8px;
      object-fit:contain;
      background:#050812;
      cursor:zoom-in;
    }
    .image-actions { display:flex; justify-content:flex-end; margin-top:8px; }
    .btn-enlarge {
      min-height:38px;
      border:1px solid rgba(35,206,217,.30);
      background:rgba(35,206,217,.10);
      color:var(--brand-cyan);
      border-radius:9px;
      padding:8px 11px;
      font-size:11px;
      font-weight:750;
      cursor:pointer;
    }
    .image-hint { margin-top:6px; color:var(--text-muted); font-size:10.5px; line-height:1.35; }

    .image-modal {
      position:fixed;
      inset:0;
      z-index:9999;
      background:rgba(0,0,0,.96);
      display:flex;
      flex-direction:column;
      padding-top:env(safe-area-inset-top);
      padding-bottom:env(safe-area-inset-bottom);
    }
    .image-modal[hidden] { display:none; }
    .image-modal-bar {
      min-height:56px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding:10px 14px;
      border-bottom:1px solid rgba(255,255,255,.14);
      background:rgba(7,10,19,.96);
    }
    .image-modal-title { color:#fff; font-size:13px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .image-modal-close {
      min-height:40px;
      border:1px solid rgba(255,255,255,.25);
      background:#151a29;
      color:#fff;
      border-radius:10px;
      padding:8px 12px;
      font-size:12px;
      font-weight:750;
      cursor:pointer;
    }
    .image-modal-scroll {
      flex:1;
      min-height:0;
      overflow:auto;
      display:flex;
      align-items:flex-start;
      justify-content:flex-start;
      padding:18px;
      -webkit-overflow-scrolling:touch;
      touch-action:pan-x pan-y pinch-zoom;
    }
    .image-modal-scroll img {
      display:block;
      width:auto;
      height:auto;
      min-width:min(100%, 900px);
      max-width:none;
      margin:auto;
      object-fit:contain;
      transform-origin:center center;
    }
    body.modal-open { overflow:hidden; }

    @media (max-width:360px) {
      .brand-icon { width:38px; height:38px; flex-basis:38px; }
      .logo-title { font-size:14px; }
      .logo-sub { max-width:170px; }
    }

    .image-modal-controls { display:flex; align-items:center; justify-content:flex-end; gap:7px; flex-shrink:0; }
    .image-zoom-btn {
      min-width:40px;
      min-height:40px;
      border:1px solid rgba(255,255,255,.22);
      background:#151a29;
      color:#fff;
      border-radius:10px;
      padding:7px 10px;
      font-size:16px;
      font-weight:800;
      cursor:pointer;
    }
    .image-zoom-label { min-width:48px; text-align:center; color:#cbd5e1; font-size:11px; font-weight:750; }
    @media (max-width:420px) {
      .image-modal-bar { align-items:flex-start; }
      .image-modal-title { padding-top:11px; max-width:120px; }
      .image-modal-controls { gap:5px; }
      .image-zoom-btn, .image-modal-close { min-width:38px; padding:7px 9px; }
    }


    .header-actions { display:flex; align-items:center; gap:7px; flex-shrink:0; }
    .btn-install { min-height:38px; padding:7px 10px; border-radius:999px; border:1px solid rgba(35,206,217,.34); background:rgba(35,206,217,.11); color:var(--brand-cyan); font-size:10px; font-weight:800; text-transform:uppercase; cursor:pointer; }
    .btn-install:disabled { opacity:.6; cursor:default; }
    .system-banner { width:min(480px, 100%); margin:0 auto; padding:9px 14px; font-size:11px; line-height:1.35; border-bottom:1px solid var(--card-border); }
    .system-banner[hidden] { display:none !important; }
    .offline-banner { background:rgba(245,158,11,.13); color:#fcd34d; }
    .update-banner { background:rgba(6,182,212,.13); color:#a5f3fc; display:flex; align-items:center; justify-content:space-between; gap:12px; }
    .update-banner button { min-height:32px; border:1px solid rgba(6,182,212,.36); border-radius:8px; background:rgba(6,182,212,.14); color:#a5f3fc; padding:5px 10px; font-size:10px; font-weight:800; cursor:pointer; }

    .image-error { min-height:96px; display:flex; align-items:center; justify-content:center; border:1px dashed var(--danger); color:var(--danger); border-radius:10px; padding:16px; text-align:center; font-size:12px; }
    .image-error img, .image-error .image-actions { display:none; }
    .image-error::after { content:'La referencia visual no pudo cargarse. Cerrá y volvé a abrir la aplicación.'; }

    .install-modal[hidden] { display:none; }
    .install-modal { position:fixed; inset:0; z-index:1200; display:flex; align-items:flex-end; justify-content:center; padding:16px; padding-bottom:calc(16px + env(safe-area-inset-bottom)); background:rgba(2,6,23,.86); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
    .install-card { width:min(480px,100%); max-height:86dvh; overflow:auto; border:1px solid #2b355a; border-radius:18px; background:#0f1423; box-shadow:0 24px 70px rgba(0,0,0,.5); padding:16px; }
    .install-card-header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; border-bottom:1px solid var(--card-border); padding-bottom:12px; margin-bottom:12px; }
    .install-card h2 { font-size:17px; }
    .install-card-header p { color:var(--text-muted); font-size:11px; margin-top:3px; }
    .install-close { min-height:36px; border:1px solid #2b355a; border-radius:9px; background:#1d243d; color:var(--text-main); padding:7px 10px; font-size:11px; font-weight:750; cursor:pointer; }
    .install-instructions { color:#dbeafe; font-size:13px; line-height:1.55; }
    .install-instructions ol { margin:8px 0 0 20px; }
    .install-instructions li + li { margin-top:6px; }
    .install-note { margin-top:14px; padding:10px; border-radius:10px; background:#090d1a; color:var(--text-muted); font-size:11px; line-height:1.45; }

    @media (max-width:390px) {
      .brand-icon { width:38px; height:38px; flex-basis:38px; }
      .logo-title { font-size:14px; }
      .logo-sub { max-width:165px; }
      .btn-install, .btn-reset { padding-left:8px; padding-right:8px; font-size:9px; }
    }
    @media (max-width:350px) {
      .logo-sub { display:none; }
      .version-badge { margin-top:2px; }
      .header-actions { gap:5px; }
    }

    .measure-label-row { display:flex; align-items:center; flex-wrap:wrap; gap:7px; }
    .mode-chip {
      display:inline-flex; align-items:center; justify-content:center;
      min-height:22px; padding:3px 7px; border-radius:999px;
      border:1px solid rgba(35,206,217,.38); background:rgba(35,206,217,.10);
      color:#67e8f9; font-size:9px; font-weight:850; letter-spacing:.055em;
      white-space:nowrap; line-height:1;
    }
    .mode-chip.mode-m { border-color:rgba(99,102,241,.42); background:rgba(99,102,241,.13); color:#c7d2fe; }
    .mode-chip.mode-pw { border-color:rgba(16,185,129,.42); background:rgba(16,185,129,.12); color:#6ee7b7; }
    .mode-chip.mode-tdi { border-color:rgba(245,158,11,.46); background:rgba(245,158,11,.12); color:#fcd34d; }
    .mode-chip.mode-b { border-color:rgba(148,163,184,.42); background:rgba(148,163,184,.10); color:#cbd5e1; }
    .measure-aids { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:2px; }
    details.measure-help, details.measure-images {
      min-width:0; border:1px solid #2b355a; border-radius:10px; background:#0a0f1c; overflow:hidden;
    }
    details.measure-help summary, details.measure-images summary {
      min-height:42px; padding:9px 10px; font-size:11px; line-height:1.2; justify-content:space-between;
      border:0; margin:0; color:#a5f3fc;
    }
    details.measure-images summary { color:#c7d2fe; }
    details.measure-help summary::after, details.measure-images summary::after { display:block; }
    .measure-help-panel { border-top:1px solid var(--card-border); padding:10px 11px; color:#dbeafe; font-size:11px; line-height:1.45; }
    .measure-images-panel { border-top:1px solid var(--card-border); padding:4px 10px 10px; }
    .measure-images-panel .image-frame { margin-top:8px; }
    .image-caption { margin-top:7px; color:var(--text-muted); font-size:10px; line-height:1.35; }
    .signal-distinction { border:1px solid rgba(245,158,11,.35); background:rgba(245,158,11,.09); border-radius:10px; padding:9px 10px; font-size:11px; line-height:1.4; color:#fde68a; }
    .compact-result-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
    @media (max-width:360px) {
      .measure-aids, .compact-result-grid { grid-template-columns:1fr; }
    }

.numeric-input { width:100%; background:var(--bg-color); border:2px solid var(--card-border); border-radius:12px; padding:12px 48px 12px 14px; color:var(--text-main); font-size:16px; font-weight:650; outline:none; transition:all .2s ease; }
    .numeric-input:focus { border-color:var(--primary); }
    .numeric-input:disabled { cursor:not-allowed; background:#141b30; border-style:dashed; color:var(--text-muted); opacity:.78; }
    .subsection-title { font-size:13px; font-weight:800; color:var(--primary); text-transform:uppercase; letter-spacing:.04em; margin-bottom:2px; }
    .guide-box { border:1px solid rgba(6,182,212,.32); background:var(--primary-glow); border-radius:12px; padding:12px; font-size:12px; line-height:1.5; color:#d8f8fb; }
    .guide-box strong { color:var(--primary); }
    .clinical-caution { border-left:3px solid var(--warning); background:var(--warning-glow); border-radius:8px; padding:10px 12px; font-size:11px; line-height:1.45; color:#fde68a; }
    .formula-note { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:11px; color:#cbd5e1; background:#090d1a; border:1px solid var(--card-border); border-radius:8px; padding:9px 10px; }
    .disclaimer { margin:0 16px 12px; border:1px solid rgba(6,182,212,.28); background:rgba(6,182,212,.08); color:#c9f7fb; border-radius:12px; padding:10px 12px; font-size:11px; line-height:1.45; }
    .disclaimer strong { color:var(--primary); }
    .three-results { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
    @media (max-width:390px){ .three-results{grid-template-columns:1fr;} }

  * { font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
  body { background:var(--bg-color); color:var(--text-main); }
  .app-container { background:var(--bg-color); }

  header {
    background:rgba(247,250,252,.97);
    border-bottom:1px solid var(--card-border);
    box-shadow:0 4px 18px rgba(11,31,51,.06);
  }
  .brand { gap:9px; }
  .brand-icon {
    width:44px; height:44px; flex-basis:44px; border-radius:13px;
    border:1px solid rgba(11,31,51,.08); box-shadow:0 3px 10px rgba(11,31,51,.08);
  }
  .logo-title { color:var(--brand-navy); font-size:16px; font-weight:800; letter-spacing:-.015em; }
  .logo-sub { color:#475569; font-size:10.5px; font-weight:650; letter-spacing:.01em; }
  .version-badge {
    margin-top:3px; padding:2px 6px; background:#CCFBF1; border:1px solid rgba(15,118,110,.22);
    color:var(--primary); font-size:8.5px; font-weight:800;
  }
  .header-actions { gap:6px; }
  .btn-install, .btn-reset {
    min-height:36px; padding:7px 10px; border-radius:10px; font-size:9px; letter-spacing:.025em;
  }
  .btn-install { border:1px solid rgba(15,118,110,.26); background:#ECFDF5; color:var(--primary); }
  .btn-reset { border:1px solid rgba(185,28,28,.18); background:#FEF2F2; color:var(--danger); }

  .progress-line-bg { background:#CBD5E1; }
  .progress-line-fill { background:var(--primary); }
  .step-node {
    background:#FFFFFF; border-color:#CBD5E1; color:#64748B; box-shadow:0 1px 5px rgba(11,31,51,.05);
  }
  .step-node.active { background:#CCFBF1; border-color:var(--primary); color:var(--primary); box-shadow:0 0 0 4px rgba(15,118,110,.08); }
  .step-node.completed { background:#ECFDF5; border-color:#15803D; color:#15803D; }

  .brand-strip {
    width:min(480px,100%); margin:0 auto; padding:7px 16px 0; display:flex; gap:6px;
    color:var(--primary); font-size:10px; font-weight:800; letter-spacing:.04em;
  }
  .brand-strip span:not(:last-child)::after { content:""; display:inline-block; width:3px; height:3px; margin-left:6px; border-radius:50%; background:#94A3B8; vertical-align:middle; }
  main { padding-top:13px; }
  .disclaimer {
    margin:8px 16px 12px; background:#F0FDFA; border-color:rgba(15,118,110,.22); color:#334155;
  }
  .disclaimer strong { color:var(--primary); }

  .step-content.active { gap:14px; }
  .step-header { gap:10px; }
  .icon-container {
    width:42px; height:42px; border-radius:12px; background:#CCFBF1; color:var(--primary);
    border:1px solid rgba(15,118,110,.16); box-shadow:none; font-size:9px; font-weight:850; letter-spacing:.035em;
  }
  .step-title { color:var(--brand-navy); font-size:17px; letter-spacing:-.015em; }
  .step-desc { color:#64748B; line-height:1.35; }

  details.instruction-details, .card {
    background:#FFFFFF; border-color:var(--card-border); box-shadow:0 5px 18px rgba(11,31,51,.045);
  }
  details.instruction-details { border-radius:12px; }
  summary { color:var(--primary); }
  .instructions-panel { background:#F8FAFC; color:#334155; border-top-color:var(--card-border); }
  .card { border-radius:15px; padding:14px; gap:14px; }
  .field-group + .field-group { border-top-color:var(--card-border); }
  label { color:var(--brand-navy); letter-spacing:.025em; }
  .ref-text, .helper-text { color:#64748B; }

  .mode-chip, .mode-chip.mode-m, .mode-chip.mode-pw, .mode-chip.mode-tdi, .mode-chip.mode-b {
    min-height:21px; padding:3px 7px; border-color:rgba(15,118,110,.24); background:#F0FDFA;
    color:var(--primary); font-size:8.5px;
  }
  input[type="number"], .numeric-input {
    background:#FFFFFF; border-color:#CBD5E1; color:var(--brand-navy); box-shadow:inset 0 1px 2px rgba(11,31,51,.025);
  }
  input[type="number"]:focus, .numeric-input:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(15,118,110,.10); }
  input[type="number"]:disabled, .numeric-input:disabled { background:#F1F5F9; color:#64748B; border-color:#CBD5E1; }
  .unit { color:#64748B; }

  .status-green { border-color:#15803D!important; background:#F0FDF4!important; color:#166534!important; }
  .status-yellow { border-color:var(--warning)!important; background:#FFFBEB!important; color:#92400E!important; }
  .status-red, .status-invalid { border-color:var(--danger)!important; background:#FEF2F2!important; color:#991B1B!important; }
  .badge.success { background:#DCFCE7; color:#166534; }
  .badge.warning { background:#FEF3C7; color:#92400E; }
  .badge.danger { background:#FEE2E2; color:#991B1B; }

  .btn-choice, .btn-row-option, .btn-prev, .report-tab {
    background:#F8FAFC; border-color:#CBD5E1; color:#475569;
  }
  .btn-choice:hover, .btn-row-option:hover { border-color:#94A3B8; }
  .btn-choice.active-cyan, .btn-row-option.active-cyan { background:#CCFBF1; border-color:var(--primary); color:#115E59; }
  .btn-choice.active-success, .btn-row-option.active-success { background:#DCFCE7; border-color:#15803D; color:#166534; }
  .btn-choice.active-warning, .btn-row-option.active-warning { background:#FEF3C7; border-color:var(--warning); color:#92400E; }
  .btn-choice.active-danger, .btn-row-option.active-danger { background:#FEE2E2; border-color:var(--danger); color:#991B1B; }
  .btn-row-option .dot { border-color:#94A3B8; }
  .btn-not-evaluable { color:#64748B; border-color:#CBD5E1; }
  .btn-not-evaluable.active { color:#92400E; border-color:var(--warning); background:#FFFBEB; }

  .measure-aids { gap:7px; }
  .measure-aids > :only-child { grid-column:1 / -1; }
  details.measure-help, details.measure-images { background:#F8FAFC; border-color:#D6DEE8; border-radius:9px; }
  details.measure-help summary, details.measure-images summary {
    min-height:40px; padding:7px 10px; font-size:10.5px; color:var(--primary);
  }
  details.measure-images summary { color:var(--brand-navy); }
  .measure-help-panel { background:#FFFFFF; border-top-color:var(--card-border); color:#334155; padding:9px 10px; }
  .measure-images-panel { background:#FFFFFF; border-top-color:var(--card-border); }
  .image-frame { background:#F8FAFC; border-color:var(--card-border); }
  .image-frame .main-img { background:#F8FAFC; }
  .btn-enlarge { border-color:rgba(15,118,110,.25); background:#F0FDFA; color:var(--primary); }
  .image-caption, .image-hint { color:#64748B; }

  .calc-box, .formula-note, textarea { background:#F8FAFC; border-color:var(--card-border); color:#334155; }
  .calc-label { color:#64748B; }
  .calc-val { color:var(--brand-navy); }
  .guide-box { background:#F0FDFA; border-color:rgba(15,118,110,.22); color:#334155; }
  .guide-box strong, .subsection-title { color:var(--primary); }
  .clinical-caution { background:#FFFBEB; color:#78350F; border-left-color:var(--warning); }
  .signal-distinction { border-color:rgba(180,83,9,.25); background:#FFFBEB; color:#78350F; }
  .notice { background:#FFFBEB; color:#78350F; }
  .report-tab.active { background:var(--brand-navy); color:#FFFFFF; border-color:var(--brand-navy); }
  .btn-copy { background:var(--primary); color:#FFFFFF; box-shadow:0 4px 12px rgba(15,118,110,.16); }

  footer { background:rgba(255,255,255,.97); border-top-color:var(--card-border); box-shadow:0 -4px 18px rgba(11,31,51,.055); }
  .btn-nav { border-radius:10px; }
  .btn-next { background:var(--primary); color:#FFFFFF; }
  .btn-prev { color:var(--brand-navy); }

  .system-banner { border-bottom-color:var(--card-border); }
  .offline-banner { background:#FFFBEB; color:#78350F; }
  .update-banner { background:#F0FDFA; color:#115E59; }
  .update-banner button { border-color:rgba(15,118,110,.24); background:#CCFBF1; color:#115E59; }

  .install-modal { background:rgba(11,31,51,.64); }
  .install-card { background:#FFFFFF; border-color:var(--card-border); box-shadow:0 24px 70px rgba(11,31,51,.22); }
  .install-card-header { border-bottom-color:var(--card-border); }
  .install-card h2 { color:var(--brand-navy); }
  .install-card-header p, .install-note { color:#64748B; }
  .install-close { background:#F8FAFC; border-color:#CBD5E1; color:var(--brand-navy); }
  .install-instructions { color:#334155; }
  .install-note { background:#F8FAFC; }

  @media (max-width:390px) {
    .brand-icon { width:40px; height:40px; flex-basis:40px; }
    .logo-title { font-size:15px; }
    .logo-sub { max-width:160px; }
  }
  @media (max-width:350px) {
    .logo-sub { display:block; max-width:118px; }
    .brand-strip { padding-left:14px; }
  }

/* Beta v0.8 — validación discreta, interpretación breve y ritmo del VTI. */
.error-text { min-height:0; }
.error-text.has-message { min-height:16px; }
.error-text.warning { color:var(--warning); }
.interpretation-text {
  border-left:3px solid var(--warning);
  background:#FFFBEB;
  color:#78350F;
  border-radius:7px;
  padding:7px 9px;
  font-size:11px;
  font-weight:650;
  line-height:1.4;
}
.interpretation-text[hidden] { display:none; }
.rhythm-note {
  color:#78350F;
  background:#FFFBEB;
  border:1px solid rgba(180,83,9,.22);
  border-radius:8px;
  padding:8px 10px;
  font-size:11px;
  line-height:1.4;
}
.rhythm-note[hidden] { display:none; }
.btn-not-evaluable { max-width:100%; white-space:normal; text-align:left; line-height:1.25; }
@media (max-width:360px) {
  #rhythm-group .btn-grid-2 { grid-template-columns:1fr 1fr; }
}


/* Beta v0.8 — ayudas escaneables, control técnico opcional y ergonomía bedside. */
html { min-height:100%; }
body { min-height:100dvh; overscroll-behavior-y:contain; }
.app-container { min-height:100dvh; }
button, summary { touch-action:manipulation; }
main { padding-bottom:18px; }
.field-group { scroll-margin-bottom:110px; position:relative; }
.numeric-input { min-height:48px; }
.btn-choice, .btn-row-option, .btn-not-evaluable { min-height:44px; }
footer {
  padding-bottom:calc(12px + env(safe-area-inset-bottom));
  padding-left:max(16px, env(safe-area-inset-left));
  padding-right:max(16px, env(safe-area-inset-right));
}
.btn-nav { min-height:48px; font-size:12px; }

.measure-aids.aids-count-1 { grid-template-columns:1fr; }
.measure-aids.aids-count-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.measure-aids.aids-count-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
details.measure-quality {
  min-width:0;
  border:1px solid #D6DEE8;
  border-radius:9px;
  background:#F8FAFC;
  overflow:hidden;
}
details.measure-quality summary {
  min-height:40px;
  padding:7px 9px;
  font-size:10.5px;
  line-height:1.15;
  color:#92400E;
}
.technical-panel {
  border-top:1px solid var(--card-border);
  background:#FFFFFF;
  padding:9px 10px 10px;
  display:flex;
  flex-direction:column;
  gap:9px;
}
.technical-intro {
  color:#64748B;
  font-size:10px;
  line-height:1.35;
}
.technical-check {
  display:grid;
  gap:6px;
  padding-top:8px;
  border-top:1px solid #E2E8F0;
}
.technical-check:first-of-type { padding-top:0; border-top:0; }
.technical-question {
  color:#334155;
  font-size:10.5px;
  font-weight:650;
  line-height:1.35;
}
.technical-options {
  display:grid;
  grid-template-columns:.75fr .75fr 1.5fr;
  gap:5px;
}
.technical-option {
  min-height:34px;
  border:1px solid #CBD5E1;
  border-radius:7px;
  background:#F8FAFC;
  color:#64748B;
  padding:5px 6px;
  font-size:9.5px;
  font-weight:750;
  cursor:pointer;
}
.technical-option.active-yes { border-color:#15803D; background:#DCFCE7; color:#166534; }
.technical-option.active-no { border-color:#B45309; background:#FEF3C7; color:#92400E; }
.technical-option.active-neutral { border-color:#94A3B8; background:#F1F5F9; color:#475569; }

.help-grid { display:flex; flex-direction:column; }
.help-row {
  display:grid;
  grid-template-columns:92px minmax(0,1fr);
  gap:9px;
  padding:7px 0;
  border-bottom:1px solid #E2E8F0;
}
.help-row:first-child { padding-top:0; }
.help-row:last-child { padding-bottom:0; border-bottom:0; }
.help-term {
  color:#0F766E;
  font-size:9.5px;
  font-weight:800;
  line-height:1.35;
  text-transform:uppercase;
  letter-spacing:.025em;
}
.help-value { color:#334155; font-size:10.5px; line-height:1.4; }
.help-error-row .help-term { color:#B45309; }
.help-error-row .help-value { color:#78350F; }

.quality-flag {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  border-radius:50%;
  background:#FEF3C7;
  border:1px solid #B45309;
  color:#92400E;
  font-size:12px;
  font-weight:900;
  line-height:1;
}
.quality-flag[hidden] { display:none; }
.field-group.technical-limited {
  background:linear-gradient(90deg, rgba(254,243,199,.72), rgba(255,251,235,.34));
  outline:1px solid rgba(180,83,9,.22);
  border-radius:10px;
  padding:8px;
  margin-left:-8px;
  margin-right:-8px;
}
.field-group + .field-group.technical-limited { padding-top:14px; }

@media (max-width:360px) {
  .measure-aids.aids-count-3 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .measure-aids.aids-count-3 > details:last-child { grid-column:1 / -1; }
  .help-row { grid-template-columns:1fr; gap:2px; padding:7px 0; }
  .technical-options { grid-template-columns:.8fr .8fr 1.4fr; }
  .technical-option { font-size:9px; padding-left:4px; padding-right:4px; }
}

/* An open acquisition aid always expands to the full card width. */
.measure-aids > details[open] { grid-column:1 / -1; }


/* Beta v0.11 — progreso clínico compacto y resumen progresivo. */
.exam-progress-compact {
  margin-top:8px;
  display:grid;
  gap:5px;
  padding:6px 8px 1px;
  border-top:1px solid rgba(226,232,240,.88);
}
.exam-progress-copy {
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  color:#475569;
  font-size:9.5px;
  font-weight:750;
  line-height:1.2;
}
#exam-progress-text { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.exam-progress-partial {
  flex-shrink:0;
  border:1px solid #CBD5E1;
  border-radius:999px;
  background:#F8FAFC;
  color:#64748B;
  padding:2px 6px;
  font-size:8.5px;
}
.exam-progress-partial[hidden] { display:none; }
.exam-progress-track { height:4px; overflow:hidden; border-radius:999px; background:#E2E8F0; }
.exam-progress-fill { width:0; height:100%; border-radius:inherit; background:var(--primary); transition:width .2s ease; }

.step-node { position:relative; }
.step-node::after {
  position:absolute;
  right:-4px;
  bottom:-4px;
  width:15px;
  height:15px;
  border-radius:50%;
  border:2px solid #F7FAFC;
  display:none;
  align-items:center;
  justify-content:center;
  font-size:9px;
  font-weight:900;
  line-height:1;
  z-index:4;
}
.step-node.exam-partial::after { content:"•"; display:flex; background:#E2E8F0; color:#475569; }
.step-node.exam-reviewed::after { content:"✓"; display:flex; background:#DCFCE7; color:#166534; }
.step-node.exam-limited::after { content:"!"; display:flex; background:#FEF3C7; color:#92400E; }
.step-node.exam-reviewed:not(.active) { border-color:#86B99A; }
.step-node.exam-limited:not(.active) { border-color:#D6A348; }

.exam-summary-card {
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:14px;
  border:1px solid rgba(15,118,110,.22);
  border-radius:15px;
  background:#FFFFFF;
  box-shadow:0 5px 18px rgba(11,31,51,.045);
}
.exam-summary-header h2 { color:var(--brand-navy); font-size:15px; letter-spacing:-.01em; }
.exam-summary-header p { margin-top:3px; color:#64748B; font-size:10.5px; line-height:1.4; }
.exam-summary-meta { display:flex; flex-wrap:wrap; gap:6px; }
.summary-meta-chip {
  border:1px solid #CBD5E1;
  border-radius:999px;
  background:#F8FAFC;
  color:#475569;
  padding:4px 7px;
  font-size:9px;
  font-weight:750;
  line-height:1.2;
}
.summary-meta-chip.primary { border-color:rgba(15,118,110,.25); background:#F0FDFA; color:#115E59; }
.exam-summary-sections { display:grid; gap:8px; }
.exam-summary-item {
  display:grid;
  grid-template-columns:82px minmax(0,1fr);
  gap:9px;
  padding:9px 0;
  border-top:1px solid #E2E8F0;
}
.exam-summary-item:first-child { border-top:0; padding-top:0; }
.exam-summary-item:last-child { padding-bottom:0; }
.exam-summary-item h3 {
  color:var(--primary);
  font-size:9.5px;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.035em;
  line-height:1.4;
}
.exam-summary-item p { color:#334155; font-size:10.8px; line-height:1.45; }
.btn-review-pending {
  width:100%;
  min-height:42px;
  border:1px solid rgba(15,118,110,.28);
  border-radius:9px;
  background:#F0FDFA;
  color:#115E59;
  padding:8px 10px;
  font-size:10.5px;
  font-weight:800;
  cursor:pointer;
}
.btn-review-pending[hidden] { display:none; }

@media (max-width:360px) {
  .exam-progress-copy { font-size:9px; }
  .exam-progress-partial { font-size:8px; padding:2px 5px; }
  .exam-summary-item { grid-template-columns:1fr; gap:3px; }
}

/* Beta v0.11 — calidad global opcional e informes estructurados. */
.visually-hidden {
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}
.study-quality-card {
  background:#FFFFFF;
  border:1px solid var(--card-border);
  border-radius:15px;
  padding:14px;
  box-shadow:0 5px 18px rgba(11,31,51,.045);
}
.study-quality-header h2 {
  color:var(--brand-navy);
  font-size:14px;
  line-height:1.3;
}
.study-quality-header p {
  margin-top:4px;
  color:#64748B;
  font-size:11px;
  line-height:1.4;
}
.optional-label {
  display:inline-flex;
  align-items:center;
  min-height:20px;
  margin-left:5px;
  padding:2px 7px;
  border:1px solid rgba(15,118,110,.20);
  border-radius:999px;
  background:#F0FDFA;
  color:var(--primary);
  font-size:8.5px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  vertical-align:middle;
}
.quality-options {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin-top:12px;
}
.quality-choice {
  min-height:46px;
  padding:9px 6px;
  line-height:1.2;
  white-space:normal;
}
.report-card { gap:12px; }
.report-tabs { margin-bottom:2px; }
.report-panel.active { display:flex; flex-direction:column; gap:10px; }
.report-output {
  width:100%;
  min-height:300px;
  max-height:62vh;
  overflow:auto;
  margin:0;
  padding:14px;
  border:1px solid var(--card-border);
  border-radius:12px;
  background:#F8FAFC;
  color:#334155;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:11.5px;
  font-weight:500;
  line-height:1.58;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  tab-size:2;
  -webkit-overflow-scrolling:touch;
}
.report-output:focus {
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(15,118,110,.08);
}
.report-output-interpretive { min-height:240px; }
.report-source { display:none!important; }
.privacy-note {
  color:#64748B;
  font-size:10.5px;
  line-height:1.4;
  text-align:center;
}
.results-use-box {
  border:1px solid rgba(15,118,110,.24);
  border-left:4px solid var(--primary);
  border-radius:12px;
  background:#F0FDFA;
  padding:12px 13px;
  color:#334155;
}
.results-use-box strong {
  display:block;
  margin-bottom:4px;
  color:var(--primary);
  font-size:11px;
  font-weight:850;
  letter-spacing:.035em;
  text-transform:uppercase;
}
.results-use-box p { font-size:11px; line-height:1.5; }
.btn-reset-final {
  width:100%;
  min-height:46px;
  border:1px solid rgba(185,28,28,.22);
  border-radius:11px;
  background:#FFF7F7;
  color:var(--danger);
  font-size:11px;
  font-weight:800;
  letter-spacing:.03em;
  text-transform:uppercase;
  cursor:pointer;
}
.btn-reset-final:focus-visible,
.quality-choice:focus-visible,
.report-tab:focus-visible {
  outline:3px solid rgba(15,118,110,.18);
  outline-offset:2px;
}
@media (max-width:350px) {
  .quality-options { grid-template-columns:1fr; }
  .report-output { min-height:260px; font-size:11px; }
}

/* Beta v0.11 — semantic themes, accessibility, settings and UX hardening. */
html[data-theme="dark"] {
  color-scheme: dark;
  --surface-page:#08131F;
  --surface-card:#0E1D2B;
  --surface-subtle:#122435;
  --surface-muted:#172B3D;
  --surface-elevated:#16283A;
  --surface-accent:#0D342F;
  --surface-accent-strong:#124941;
  --surface-success:#123A2A;
  --surface-success-soft:#0D2C22;
  --surface-warning:#493515;
  --surface-warning-soft:#2E2413;
  --surface-danger:#4A2024;
  --surface-danger-soft:#30181C;
  --text-primary:#F1F5F9;
  --text-body:#D5DEE8;
  --text-secondary:#A8B7C7;
  --text-muted-strong:#C2CCD7;
  --text-tertiary:#8293A5;
  --text-on-primary:#FFFFFF;
  --border-default:#263C50;
  --border-strong:#365065;
  --border-soft:#2E455A;
  --primary:#3CC7B7;
  --primary-strong:#A7F3E8;
  --primary-glow:rgba(60,199,183,.14);
  --success:#4ADE80;
  --success-text:#B7F7CA;
  --success-glow:rgba(74,222,128,.13);
  --warning:#F6B84B;
  --warning-text:#FFD48A;
  --warning-text-strong:#FFE0A6;
  --warning-glow:rgba(246,184,75,.13);
  --danger:#FB7185;
  --danger-text:#FFC1CA;
  --danger-glow:rgba(251,113,133,.13);
  --accent:#247F75;
  --brand-navy:#F1F5F9;
  --brand-cyan:#3CC7B7;
  --shadow-soft:0 6px 20px rgba(0,0,0,.18);
  --shadow-header:0 5px 20px rgba(0,0,0,.24);
  --shadow-footer:0 -5px 20px rgba(0,0,0,.22);
  --focus-ring:0 0 0 3px rgba(60,199,183,.28);
  --bg-color:var(--surface-page);
  --card-bg:var(--surface-card);
  --card-border:var(--border-default);
  --text-main:var(--text-primary);
  --text-muted:var(--text-secondary);
}

body,
.app-container { background:var(--surface-page); color:var(--text-primary); }

button,
[role="button"],
input,
summary,
.report-output { -webkit-tap-highlight-color:transparent; }

button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
summary:focus-visible,
[role="radio"]:focus-visible,
[role="tab"]:focus-visible,
.report-output:focus-visible {
  outline:3px solid color-mix(in srgb, var(--primary) 28%, transparent);
  outline-offset:2px;
}

.header-actions { gap:7px; }
.btn-install,
.btn-settings {
  min-height:44px;
  border:1px solid color-mix(in srgb, var(--primary) 30%, var(--border-default));
  border-radius:10px;
  background:var(--surface-accent);
  color:var(--primary);
  font-size:10px;
  font-weight:800;
  cursor:pointer;
}
.btn-install { padding:8px 11px; text-transform:uppercase; }
.btn-settings {
  width:44px;
  min-width:44px;
  padding:0;
  font-size:19px;
  line-height:1;
}
.btn-install:disabled { opacity:.62; cursor:default; }

.step-node {
  width:40px;
  height:40px;
  min-width:40px;
  background:var(--surface-card);
  border-color:var(--border-strong);
  color:var(--text-secondary);
}
.step-node::after { border-color:var(--surface-page); }
.step-node.exam-partial::after { background:var(--surface-muted); color:var(--text-muted-strong); }
.step-node.exam-reviewed::after { background:var(--surface-success); color:var(--success-text); }
.step-node.exam-limited::after { background:var(--surface-warning); color:var(--warning-text); }

.technical-option { min-height:44px; font-size:10.5px; }
.btn-not-evaluable { min-height:44px; }
details.measure-help summary,
details.measure-images summary,
details.measure-quality summary { min-height:44px; font-size:11px; }
.help-value,
.technical-question { font-size:11.5px; }
.help-term { font-size:10px; }
.technical-intro { font-size:10.5px; }
.ref-text,
.helper-text,
.study-quality-header p,
.results-use-box p,
.privacy-note { font-size:11.5px; }

.footer-buttons { align-items:stretch; }
footer.final-step-footer .btn-prev { flex:1 1 100%; }
.btn-next[hidden] { display:none; }
.btn-report-step { background:var(--accent); color:var(--text-on-primary); }

.update-banner { gap:10px; }
.update-actions { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.update-actions button {
  min-height:36px;
  border:1px solid color-mix(in srgb, var(--primary) 30%, var(--border-default));
  border-radius:8px;
  background:var(--surface-accent-strong);
  color:var(--primary-strong);
  padding:6px 9px;
  font-size:9.5px;
  font-weight:800;
}
.update-actions button[hidden] { display:none; }

/* Settings bottom sheet. */
.settings-sheet {
  position:fixed;
  inset:0;
  z-index:1400;
}
.settings-sheet[hidden] { display:none; }
.settings-backdrop {
  width:100%;
  height:100%;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  background:rgba(2,10,18,.68);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
}
.settings-panel {
  width:min(480px,100%);
  max-height:min(82vh,720px);
  overflow:auto;
  padding:8px 16px calc(18px + env(safe-area-inset-bottom));
  border:1px solid var(--border-default);
  border-bottom:0;
  border-radius:20px 20px 0 0;
  background:var(--surface-card);
  color:var(--text-primary);
  box-shadow:0 -18px 60px rgba(0,0,0,.22);
  animation:sheetIn .2s ease-out;
}
.settings-handle {
  width:42px;
  height:4px;
  margin:2px auto 10px;
  border-radius:999px;
  background:var(--border-strong);
}
.settings-header {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding-bottom:14px;
  border-bottom:1px solid var(--border-default);
}
.settings-header h2 { font-size:17px; color:var(--text-primary); }
.settings-header p { margin-top:3px; color:var(--text-secondary); font-size:11px; }
.settings-close {
  min-height:44px;
  padding:8px 11px;
  border:1px solid var(--border-strong);
  border-radius:10px;
  background:var(--surface-subtle);
  color:var(--text-primary);
  font-size:10.5px;
  font-weight:800;
}
.settings-section { padding:16px 0; }
.settings-section + .settings-section { border-top:1px solid var(--border-default); }
.settings-section h3 {
  margin-bottom:9px;
  color:var(--text-primary);
  font-size:12px;
  font-weight:850;
  letter-spacing:.035em;
  text-transform:uppercase;
}
.settings-section > p { color:var(--text-secondary); font-size:11.5px; line-height:1.45; }
.settings-help { margin-top:8px; }
.theme-selector {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px;
}
.theme-option {
  min-height:46px;
  border:1px solid var(--border-strong);
  border-radius:10px;
  background:var(--surface-subtle);
  color:var(--text-muted-strong);
  padding:8px 6px;
  font-size:11px;
  font-weight:800;
  cursor:pointer;
}
.theme-option.active {
  border-color:var(--primary);
  background:var(--surface-accent-strong);
  color:var(--primary-strong);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--primary) 20%, transparent);
}
.privacy-warning {
  display:grid;
  gap:3px;
  margin:11px 0;
  padding:11px 12px;
  border:1px solid color-mix(in srgb, var(--warning) 35%, var(--border-default));
  border-left:4px solid var(--warning);
  border-radius:10px;
  background:var(--surface-warning-soft);
  color:var(--warning-text-strong);
  font-size:11px;
  line-height:1.45;
}
.privacy-warning strong { color:var(--warning-text); font-size:10px; text-transform:uppercase; letter-spacing:.04em; }
.btn-email,
.btn-copy-email {
  width:100%;
  min-height:46px;
  border-radius:10px;
  padding:9px 12px;
  font-size:11px;
  font-weight:850;
  cursor:pointer;
}
.btn-email { border:1px solid var(--primary); background:var(--primary); color:var(--text-on-primary); }
.btn-copy-email { margin-top:8px; border:1px solid var(--border-strong); background:var(--surface-subtle); color:var(--text-primary); }

.app-toast {
  position:fixed;
  left:50%;
  bottom:calc(86px + env(safe-area-inset-bottom));
  z-index:1600;
  max-width:min(88vw,360px);
  transform:translate(-50%,12px);
  opacity:0;
  border:1px solid var(--border-strong);
  border-radius:999px;
  background:var(--text-primary);
  color:var(--surface-card);
  box-shadow:0 10px 28px rgba(0,0,0,.2);
  padding:9px 14px;
  font-size:11px;
  font-weight:750;
  text-align:center;
  pointer-events:none;
  transition:opacity .16s ease, transform .16s ease;
}
.app-toast.show { opacity:1; transform:translate(-50%,0); }
.app-toast[hidden] { display:none; }

@keyframes sheetIn { from { transform:translateY(18px); opacity:.6; } to { transform:translateY(0); opacity:1; } }

/* Mobile report uses the page's single scroll container. */
@media (max-width:600px) {
  .report-output { max-height:none; overflow:visible; min-height:220px; }
}

@media (max-width:360px) {
  .step-node { width:38px; height:38px; min-width:38px; }
  .header-actions { gap:5px; }
  .btn-install { padding-left:8px; padding-right:8px; }
  .theme-selector { grid-template-columns:1fr; }
  .update-banner { align-items:flex-start; }
  .update-actions { flex-direction:column; align-items:stretch; }
}

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

/* Comprehensive dark theme overrides for legacy selectors. */
html[data-theme="dark"] header {
  background:rgba(8,19,31,.97);
  border-bottom-color:var(--border-default);
  box-shadow:var(--shadow-header);
}
html[data-theme="dark"] .brand-icon { border-color:var(--border-default); box-shadow:0 3px 12px rgba(0,0,0,.28); }
html[data-theme="dark"] .logo-title,
html[data-theme="dark"] .step-title,
html[data-theme="dark"] label,
html[data-theme="dark"] .calc-val,
html[data-theme="dark"] .study-quality-header h2,
html[data-theme="dark"] .exam-summary-header h2,
html[data-theme="dark"] .install-card h2 { color:var(--text-primary); }
html[data-theme="dark"] .logo-sub,
html[data-theme="dark"] .step-desc,
html[data-theme="dark"] .ref-text,
html[data-theme="dark"] .helper-text,
html[data-theme="dark"] .calc-label,
html[data-theme="dark"] .privacy-note,
html[data-theme="dark"] .study-quality-header p,
html[data-theme="dark"] .exam-summary-header p,
html[data-theme="dark"] .install-card-header p,
html[data-theme="dark"] .install-note { color:var(--text-secondary); }
html[data-theme="dark"] .version-badge,
html[data-theme="dark"] .mode-chip,
html[data-theme="dark"] .mode-chip.mode-m,
html[data-theme="dark"] .mode-chip.mode-pw,
html[data-theme="dark"] .mode-chip.mode-tdi,
html[data-theme="dark"] .mode-chip.mode-b,
html[data-theme="dark"] .optional-label {
  background:var(--surface-accent-strong);
  border-color:color-mix(in srgb, var(--primary) 32%, var(--border-default));
  color:var(--primary-strong);
}
html[data-theme="dark"] .progress-line-bg,
html[data-theme="dark"] .exam-progress-track { background:var(--border-strong); }
html[data-theme="dark"] .step-node { background:var(--surface-card); border-color:var(--border-strong); color:var(--text-secondary); box-shadow:none; }
html[data-theme="dark"] .step-node.active { background:var(--surface-accent-strong); border-color:var(--primary); color:var(--primary); box-shadow:0 0 0 4px var(--primary-glow); }
html[data-theme="dark"] .step-node.completed { background:var(--surface-success-soft); border-color:var(--success); color:var(--success); }
html[data-theme="dark"] .brand-strip { color:var(--primary); }
html[data-theme="dark"] .brand-strip span:not(:last-child)::after { background:var(--text-tertiary); }
html[data-theme="dark"] details.instruction-details,
html[data-theme="dark"] .card,
html[data-theme="dark"] .exam-summary-card,
html[data-theme="dark"] .study-quality-card {
  background:var(--surface-card);
  border-color:var(--border-default);
  box-shadow:var(--shadow-soft);
}
html[data-theme="dark"] .instructions-panel,
html[data-theme="dark"] .measure-help-panel,
html[data-theme="dark"] .measure-images-panel,
html[data-theme="dark"] .technical-panel,
html[data-theme="dark"] .report-output,
html[data-theme="dark"] .calc-box,
html[data-theme="dark"] .formula-note,
html[data-theme="dark"] textarea {
  background:var(--surface-subtle);
  border-color:var(--border-default);
  color:var(--text-body);
}
html[data-theme="dark"] details.measure-help,
html[data-theme="dark"] details.measure-images,
html[data-theme="dark"] details.measure-quality,
html[data-theme="dark"] .image-frame {
  background:var(--surface-subtle);
  border-color:var(--border-soft);
}
html[data-theme="dark"] .image-frame .main-img { background:#050A10; }
html[data-theme="dark"] .help-row,
html[data-theme="dark"] .technical-check,
html[data-theme="dark"] .exam-summary-item { border-color:var(--border-default); }
html[data-theme="dark"] .help-value,
html[data-theme="dark"] .technical-question,
html[data-theme="dark"] .exam-summary-item p,
html[data-theme="dark"] .results-use-box,
html[data-theme="dark"] .guide-box { color:var(--text-body); }
html[data-theme="dark"] .help-term,
html[data-theme="dark"] .exam-summary-item h3 { color:var(--primary); }
html[data-theme="dark"] .help-error-row .help-term { color:var(--warning); }
html[data-theme="dark"] .help-error-row .help-value { color:var(--warning-text-strong); }
html[data-theme="dark"] .technical-intro { color:var(--text-secondary); }
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] .numeric-input {
  background:var(--surface-subtle);
  border-color:var(--border-strong);
  color:var(--text-primary);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.18);
}
html[data-theme="dark"] input[type="number"]:disabled,
html[data-theme="dark"] .numeric-input:disabled { background:var(--surface-muted); color:var(--text-secondary); border-color:var(--border-strong); }
html[data-theme="dark"] .unit { color:var(--text-secondary); }
html[data-theme="dark"] .btn-choice,
html[data-theme="dark"] .btn-row-option,
html[data-theme="dark"] .btn-prev,
html[data-theme="dark"] .report-tab,
html[data-theme="dark"] .technical-option,
html[data-theme="dark"] .install-close,
html[data-theme="dark"] .btn-copy-email {
  background:var(--surface-subtle);
  border-color:var(--border-strong);
  color:var(--text-muted-strong);
}
html[data-theme="dark"] .btn-choice:hover,
html[data-theme="dark"] .btn-row-option:hover { border-color:var(--text-tertiary); }
html[data-theme="dark"] .btn-choice.active-cyan,
html[data-theme="dark"] .btn-row-option.active-cyan { background:var(--surface-accent-strong); border-color:var(--primary); color:var(--primary-strong); }
html[data-theme="dark"] .btn-choice.active-success,
html[data-theme="dark"] .btn-row-option.active-success,
html[data-theme="dark"] .technical-option.active-yes,
html[data-theme="dark"] .badge.success { background:var(--surface-success); border-color:var(--success); color:var(--success-text); }
html[data-theme="dark"] .btn-choice.active-warning,
html[data-theme="dark"] .btn-row-option.active-warning,
html[data-theme="dark"] .technical-option.active-no,
html[data-theme="dark"] .badge.warning { background:var(--surface-warning); border-color:var(--warning); color:var(--warning-text); }
html[data-theme="dark"] .btn-choice.active-danger,
html[data-theme="dark"] .btn-row-option.active-danger,
html[data-theme="dark"] .badge.danger { background:var(--surface-danger); border-color:var(--danger); color:var(--danger-text); }
html[data-theme="dark"] .technical-option.active-neutral { background:var(--surface-muted); border-color:var(--text-tertiary); color:var(--text-muted-strong); }
html[data-theme="dark"] .btn-not-evaluable { color:var(--text-secondary); border-color:var(--border-strong); }
html[data-theme="dark"] .btn-not-evaluable.active { color:var(--warning-text); border-color:var(--warning); background:var(--surface-warning-soft); }
html[data-theme="dark"] .status-green { border-color:var(--success)!important; background:var(--surface-success-soft)!important; color:var(--success-text)!important; }
html[data-theme="dark"] .status-yellow { border-color:var(--warning)!important; background:var(--surface-warning-soft)!important; color:var(--warning-text)!important; }
html[data-theme="dark"] .status-red,
html[data-theme="dark"] .status-invalid { border-color:var(--danger)!important; background:var(--surface-danger-soft)!important; color:var(--danger-text)!important; }
html[data-theme="dark"] .interpretation-text,
html[data-theme="dark"] .rhythm-note,
html[data-theme="dark"] .clinical-caution,
html[data-theme="dark"] .signal-distinction,
html[data-theme="dark"] .notice,
html[data-theme="dark"] .offline-banner { background:var(--surface-warning-soft); color:var(--warning-text-strong); border-color:var(--warning); }
html[data-theme="dark"] .quality-flag { background:var(--surface-warning); border-color:var(--warning); color:var(--warning-text); }
html[data-theme="dark"] .field-group.technical-limited { background:linear-gradient(90deg, rgba(73,53,21,.75), rgba(46,36,19,.35)); outline-color:rgba(246,184,75,.25); }
html[data-theme="dark"] .guide-box,
html[data-theme="dark"] .results-use-box,
html[data-theme="dark"] .summary-meta-chip.primary,
html[data-theme="dark"] .btn-review-pending { background:var(--surface-accent); border-color:color-mix(in srgb, var(--primary) 28%, var(--border-default)); }
html[data-theme="dark"] .results-use-box p { color:var(--text-body); }
html[data-theme="dark"] .summary-meta-chip { background:var(--surface-subtle); border-color:var(--border-strong); color:var(--text-muted-strong); }
html[data-theme="dark"] .summary-meta-chip.primary,
html[data-theme="dark"] .btn-review-pending { color:var(--primary-strong); }
html[data-theme="dark"] .report-tab.active { background:var(--accent); border-color:var(--primary); color:var(--text-on-primary); }
html[data-theme="dark"] .btn-copy,
html[data-theme="dark"] .btn-next,
html[data-theme="dark"] .btn-email { background:var(--primary); color:#06211D; }
html[data-theme="dark"] footer { background:rgba(14,29,43,.97); border-top-color:var(--border-default); box-shadow:var(--shadow-footer); }
html[data-theme="dark"] .update-banner { background:var(--surface-accent); color:var(--primary-strong); }
html[data-theme="dark"] .update-banner button { background:var(--surface-accent-strong); border-color:var(--primary); color:var(--primary-strong); }
html[data-theme="dark"] .install-modal { background:rgba(2,8,14,.78); }
html[data-theme="dark"] .install-card { background:var(--surface-card); border-color:var(--border-default); box-shadow:0 24px 70px rgba(0,0,0,.42); }
html[data-theme="dark"] .install-card-header,
html[data-theme="dark"] .install-note { border-color:var(--border-default); }
html[data-theme="dark"] .install-instructions { color:var(--text-body); }
html[data-theme="dark"] .install-note { background:var(--surface-subtle); }
html[data-theme="dark"] .btn-reset-final { background:var(--surface-danger-soft); border-color:color-mix(in srgb, var(--danger) 35%, var(--border-default)); color:var(--danger); }
html[data-theme="dark"] .image-modal { background:rgba(0,0,0,.96); }
html[data-theme="dark"] .image-modal-bar { background:rgba(5,12,19,.98); }