/* Fonts: Inter (SIL Open Font License), self-hosted. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/inter-400.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/inter-500.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/inter-600.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/inter-700.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/inter-800.woff2') format('woff2');}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      --blue-600: #2563eb; --blue-700: #1d4ed8; --blue-50: #eff6ff;
      --slate-50: #f8fafc; --slate-100: #f1f5f9; --slate-200: #e2e8f0;
      --slate-300: #cbd5e1; --slate-400: #94a3b8; --slate-500: #64748b;
      --slate-600: #475569; --slate-700: #334155; --slate-800: #1e293b; --slate-900: #0f172a;
      --emerald-50: #ecfdf5; --emerald-500: #10b981; --emerald-600: #059669; --emerald-700: #047857;
      --red-50: #fef2f2; --red-400: #f87171; --red-500: #ef4444; --red-600: #dc2626;
      --amber-500: #f59e0b; --radius: 0.5rem;
    }
    body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; background: var(--slate-50); color: var(--slate-900); min-height: 100vh; line-height: 1.5; font-size: 14px; }
    .app { min-height: 100vh; display: flex; flex-direction: column; }
    .header { background: #fff; border-bottom: 1px solid var(--slate-200); box-shadow: 0 1px 3px rgba(0,0,0,.06); position: sticky; top: 0; z-index: 10; }
    .header-inner { max-width: 720px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .header-brand { display: flex; align-items: center; gap: 10px; }
    .logo { width: 36px; height: 36px; flex-shrink: 0; }
    .header-title { font-size: 15px; font-weight: 700; color: var(--slate-900); line-height: 1.2; }
    .header-sub { font-size: 11px; color: var(--slate-400); margin-top: 1px; }
    .header-meta { font-size: 13px; color: var(--slate-500); }
    .header-meta strong { color: var(--slate-900); font-weight: 700; }
    main { flex: 1; max-width: 720px; margin: 0 auto; padding: 28px 24px; width: 100%; }
    footer { padding: 16px 24px 20px; text-align: center; }
    footer a { font-size: 11px; color: var(--slate-400); text-decoration: none; }
    footer a:hover { color: var(--slate-600); }
    .footer-disclaimer { font-size: 11px; color: var(--slate-400); margin-top: 5px; line-height: 1.5; }
    
    .card { background: #fff; border: 1px solid var(--slate-200); border-radius: var(--radius); box-shadow: 0 1px 3px rgba(0,0,0,.05); }
    .card-header { padding: 20px 24px 16px; border-bottom: 1px solid var(--slate-100); }
    .card-header h2 { font-size: 15px; font-weight: 600; color: var(--slate-800); }
    .card-header p { font-size: 13px; color: var(--slate-500); margin-top: 3px; }
    .card-body { padding: 24px; }
    .section { margin-bottom: 28px; }
    .section:last-child { margin-bottom: 0; }
    .section-label { display: block; font-size: 13px; font-weight: 600; color: var(--slate-700); margin-bottom: 10px; }
    .section-label span { font-weight: 400; color: var(--slate-400); }
    .section-hint { font-size: 11px; color: var(--slate-400); margin-top: 6px; }
    .check-row { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border: 1px solid var(--slate-200); border-radius: var(--radius); cursor: pointer; transition: background .12s, border-color .12s; margin-bottom: 8px; user-select: none; }
    .check-row:last-child { margin-bottom: 0; }
    .check-row:hover { background: var(--slate-50); border-color: var(--slate-300); }
    .check-row input[type="checkbox"] { display: none; }
    .check-box { width: 18px; height: 18px; border-radius: 4px; border: 2px solid var(--slate-300); flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: background .12s, border-color .12s; }
    .check-box svg { display: none; }
    .check-row.checked .check-box { background: var(--blue-600); border-color: var(--blue-600); }
    .check-row.checked .check-box svg { display: block; }
    .check-row-label { font-size: 13px; font-weight: 500; color: var(--slate-700); }
    .domain-count { font-size: 11px; color: var(--slate-400); margin-top: 6px; }
    .num-input { width: 88px; height: 36px; padding: 0 12px; border: 1px solid var(--slate-300); border-radius: var(--radius); font-size: 13px; outline: none; transition: border-color .15s; }
    .num-input:focus { border-color: var(--blue-600); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
    .radio-row { display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px; border: 1px solid var(--slate-200); border-radius: var(--radius); cursor: pointer; transition: background .12s, border-color .12s; margin-bottom: 8px; user-select: none; }
    .radio-row:last-child { margin-bottom: 0; }
    .radio-row:hover { background: var(--slate-50); border-color: var(--slate-300); }
    .radio-row input[type="radio"] { display: none; }
    .radio-dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--slate-300); flex-shrink: 0; margin-top: 2px; display: flex; align-items: center; justify-content: center; transition: border-color .12s; }
    .radio-dot::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--blue-600); display: none; }
    .radio-row.selected .radio-dot { border-color: var(--blue-600); }
    .radio-row.selected .radio-dot::after { display: block; }
    .radio-title { font-size: 13px; font-weight: 500; color: var(--slate-700); }
    .radio-desc { font-size: 12px; color: var(--slate-500); margin-top: 2px; }
    .btn-primary { display: block; width: 100%; height: 44px; background: var(--blue-600); color: #fff; border: none; border-radius: var(--radius); font-size: 14px; font-weight: 600; cursor: pointer; transition: background .15s; }
    .btn-primary:hover { background: var(--blue-700); }
    .progress-wrap { padding: 0 24px 10px; }
    .progress-bar-track { height: 4px; background: var(--slate-200); border-radius: 2px; overflow: hidden; }
    .progress-bar-fill { height: 100%; background: var(--blue-600); border-radius: 2px; transition: width .3s ease; }
    .badge { display: inline-block; padding: 3px 10px; border-radius: 99px; font-size: 11px; font-weight: 600; letter-spacing: .02em; }
    .badge-gov { background: #dbeafe; color: #1e40af; }
    .badge-risk { background: #fef3c7; color: #92400e; }
    .badge-ctrl { background: #e0e7ff; color: #3730a3; }
    .badge-eth { background: #d1fae5; color: #065f46; }
    .badge-inc { background: #fee2e2; color: #991b1b; }
    .badge-diff { background: var(--slate-100); color: var(--slate-600); border: 1px solid var(--slate-200); }
    .option-btn { width: 100%; text-align: left; display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: var(--radius); border: 2px solid var(--slate-200); background: #fff; cursor: pointer; transition: border-color .12s, background .12s; margin-bottom: 10px; font-family: inherit; }
    .option-btn:last-child { margin-bottom: 0; }
    .option-btn:hover:not(:disabled) { border-color: var(--slate-300); background: var(--slate-50); }
    .option-btn.selected { border-color: var(--blue-600); background: var(--blue-50); }
    .option-btn.correct { border-color: var(--emerald-500); background: var(--emerald-50); }
    .option-btn.wrong { border-color: var(--red-500); background: var(--red-50); }
    .option-btn.dim { border-color: var(--slate-200); background: #fff; opacity: .5; }
    .option-btn:disabled { cursor: default; }
    .option-letter { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--slate-300); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--slate-500); flex-shrink: 0; transition: background .12s, border-color .12s, color .12s; }
    .option-btn.selected .option-letter { background: var(--blue-600); border-color: var(--blue-600); color: #fff; }
    .option-btn.correct .option-letter { background: var(--emerald-600); border-color: var(--emerald-600); color: #fff; }
    .option-btn.wrong .option-letter { background: var(--red-500); border-color: var(--red-500); color: #fff; }
    .option-text { font-size: 13px; color: var(--slate-700); line-height: 1.55; padding-top: 3px; }
    .feedback-panel { border-radius: var(--radius); padding: 18px 20px; margin-top: 20px; margin-bottom: 16px; }
    .feedback-panel.correct-panel { border: 2px solid #6ee7b7; background: var(--emerald-50); }
    .feedback-panel.wrong-panel { border: 2px solid var(--red-400); background: var(--red-50); }
    .feedback-verdict { font-size: 14px; font-weight: 700; margin-bottom: 12px; }
    .feedback-verdict.correct-text { color: var(--emerald-700); }
    .feedback-verdict.wrong-text { color: var(--red-600); }
    .feedback-section-label { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--slate-500); margin-bottom: 6px; }
    .feedback-explanation { font-size: 13px; color: var(--slate-700); line-height: 1.6; margin-bottom: 14px; }
    .distractor-row { display: flex; gap: 8px; margin-bottom: 8px; align-items: flex-start; }
    .distractor-letter { width: 20px; height: 20px; border-radius: 50%; background: var(--slate-200); color: var(--slate-600); font-size: 11px; font-weight: 700; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
    .distractor-text { font-size: 12px; color: var(--slate-600); line-height: 1.55; }
    .feedback-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
    .countdown-label { font-size: 11px; color: var(--slate-400); }
    .btn-next { padding: 9px 20px; background: var(--blue-600); color: #fff; border: none; border-radius: var(--radius); font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s; }
    .btn-next:hover { background: var(--blue-700); }
    .loading-screen { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 40px; text-align: center; min-height: 60vh; }
    .spinner { width: 44px; height: 44px; border: 3px solid var(--slate-200); border-top-color: var(--blue-600); border-radius: 50%; animation: spin .75s linear infinite; }
    @keyframes spin { to { transform: rotate(360deg); } }
    .loading-title { font-size: 17px; font-weight: 700; color: var(--slate-800); }
    .loading-sub { font-size: 13px; color: var(--slate-500); max-width: 340px; }
    .score-card { background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%); border-radius: var(--radius); padding: 24px; color: #fff; margin-bottom: 0; }
    .score-main { display: flex; justify-content: space-between; align-items: flex-end; }
    .score-label { font-size: 12px; color: rgba(255,255,255,.7); font-weight: 500; margin-bottom: 4px; }
    .score-number { font-size: 52px; font-weight: 800; line-height: 1; }
    .score-pct { font-size: 26px; font-weight: 700; margin-top: 4px; }
    .score-grade { font-size: 18px; font-weight: 700; text-align: right; }
    .score-threshold { font-size: 11px; color: rgba(255,255,255,.6); margin-top: 4px; text-align: right; }
    .score-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--slate-200); text-align: center; }
    .score-stat { padding: 14px 8px; border-right: 1px solid var(--slate-200); }
    .score-stat:last-child { border-right: none; }
    .score-stat-num { font-size: 20px; font-weight: 700; }
    .score-stat-lbl { font-size: 11px; color: var(--slate-500); margin-top: 2px; }
    .domain-row { margin-bottom: 14px; }
    .domain-row-header { display: flex; justify-content: space-between; font-size: 12px; color: var(--slate-600); font-weight: 500; margin-bottom: 5px; }
    .domain-track { height: 6px; background: var(--slate-200); border-radius: 3px; overflow: hidden; }
    .domain-fill { height: 100%; border-radius: 3px; }
    .fill-green { background: var(--emerald-500); }
    .fill-amber { background: var(--amber-500); }
    .fill-red { background: var(--red-500); }
    .tabs { display: flex; gap: 4px; background: var(--slate-200); padding: 4px; border-radius: var(--radius); margin-bottom: 16px; }
    .tab-btn { flex: 1; padding: 7px 10px; text-align: center; font-size: 12px; font-weight: 600; border: none; background: none; border-radius: 6px; cursor: pointer; color: var(--slate-500); transition: background .12s, color .12s; }
    .tab-btn.active { background: #fff; color: var(--slate-900); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
    .review-card { border-radius: var(--radius); padding: 18px 20px; margin-bottom: 14px; }
    .review-card.correct-card { border: 2px solid #6ee7b7; }
    .review-card.wrong-card { border: 2px solid #fca5a5; }
    .review-card-top { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
    .q-num { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 99px; }
    .q-num.correct-num { background: #d1fae5; color: var(--emerald-700); }
    .q-num.wrong-num { background: #fee2e2; color: var(--red-600); }
    .review-stem { font-size: 13px; font-weight: 600; color: var(--slate-800); line-height: 1.55; margin-bottom: 12px; }
    .review-option { display: flex; gap: 8px; padding: 7px 10px; border-radius: 6px; margin-bottom: 4px; font-size: 13px; }
    .review-option.r-correct { background: var(--emerald-50); color: var(--emerald-700); font-weight: 500; }
    .review-option.r-wrong-sel { background: var(--red-50); color: var(--red-600); font-weight: 500; }
    .review-option.r-normal { color: var(--slate-500); }
    .review-option-letter { font-weight: 700; flex-shrink: 0; }
    .review-exp-label { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--slate-500); margin: 12px 0 5px; border-top: 1px solid var(--slate-100); padding-top: 12px; }
    .review-exp-text { font-size: 12px; color: var(--slate-700); line-height: 1.6; }
    .actions { display: flex; gap: 12px; margin-top: 24px; }
    .btn-action { flex: 1; height: 44px; border-radius: var(--radius); font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s, color .15s; }
    .btn-action.primary { background: var(--blue-600); color: #fff; border: none; }
    .btn-action.primary:hover { background: var(--blue-700); }
    .btn-action.outline { background: #fff; color: var(--slate-700); border: 2px solid var(--slate-200); }
    .btn-action.outline:hover { background: var(--slate-50); border-color: var(--slate-300); }
    .toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--red-600); color: #fff; padding: 12px 20px; border-radius: var(--radius); font-size: 13px; font-weight: 500; z-index: 100; box-shadow: 0 4px 16px rgba(0,0,0,.2); opacity: 0; pointer-events: none; transition: opacity .25s; white-space: nowrap; }
    .toast.show { opacity: 1; pointer-events: auto; }
    .bank-info { font-size: 11px; color: var(--slate-400); background: var(--slate-100); border-radius: 6px; padding: 8px 12px; margin-top: 6px; }
    .hidden { display: none !important; }
    #screen-quiz, #screen-results { position: relative; }
    @media (max-width: 560px) { .header-inner { padding: 12px 16px; } main { padding: 20px 16px; } .card-body { padding: 18px 16px; } .score-number { font-size: 40px; } }

    /* ── Save / Resume ── */
    .resume-banner { background: #eff6ff; border: 1px solid #bfdbfe; border-radius: var(--radius); padding: 14px 18px; margin-bottom: 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
    .resume-banner-info { flex: 1; min-width: 0; }
    .resume-banner-title { font-size: 13px; font-weight: 600; color: var(--slate-800); margin-bottom: 2px; }
    .resume-banner-sub { font-size: 12px; color: var(--slate-500); }
    .resume-banner-actions { display: flex; gap: 8px; flex-shrink: 0; }
    .btn-resume { padding: 8px 16px; background: var(--blue-600); color: #fff; border: none; border-radius: var(--radius); font-size: 12px; font-weight: 600; cursor: pointer; transition: background .15s; }
    .btn-resume:hover { background: var(--blue-700); }
    .btn-discard { padding: 8px 12px; background: none; color: var(--slate-500); border: 1px solid var(--slate-300); border-radius: var(--radius); font-size: 12px; font-weight: 500; cursor: pointer; transition: background .15s; }
    .btn-discard:hover { background: var(--slate-100); }
    .btn-save-exit { padding: 7px 14px; background: none; color: var(--slate-500); border: 1px solid var(--slate-300); border-radius: var(--radius); font-size: 12px; font-weight: 500; cursor: pointer; transition: background .15s, color .15s; white-space: nowrap; }
    .btn-save-exit:hover { background: var(--slate-100); color: var(--slate-700); }

    /* ── Domain / Sub-domain hierarchy ── */
    .domain-group { margin-bottom: 4px; }
    .domain-row { display: flex; align-items: center; gap: 10px; font-weight: 600; border-radius: var(--radius); }
    .domain-row .check-row-label { flex: 1; }
    .domain-pct { font-size: 11px; font-weight: 400; color: var(--slate-400); margin-left: 4px; }
    .expand-btn { background: none; border: none; cursor: pointer; color: var(--slate-400); padding: 2px 4px; border-radius: 4px; display: flex; align-items: center; flex-shrink: 0; transition: color .15s, background .15s; }
    .expand-btn:hover { color: var(--slate-600); background: var(--slate-100); }
    .expand-arrow { transition: transform .2s ease; }
    .expand-btn.open .expand-arrow { transform: rotate(180deg); }
    .subdomain-list { overflow: hidden; transition: max-height .25s ease, opacity .2s ease; max-height: 0; opacity: 0; }
    .subdomain-list:not(.collapsed) { max-height: 600px; opacity: 1; }
    .sub-row { padding: 7px 12px 7px 36px !important; font-size: 13px; }
    .sub-count { font-size: 11px; color: var(--slate-400); font-weight: 400; }
    .domain-row.partial .check-box { background: var(--slate-300) !important; border-color: var(--slate-400) !important; }