:root{--color-primary:#d52b1e;--color-primary-dark:#b0231a;--color-bg:#f8f9fa;--color-surface:#fff;--color-text:#1a1a2e;--color-text-secondary:#6b7280;--color-border:#e5e7eb;--color-success:#10b981;--color-error:#ef4444;--color-warning:#f59e0b;--color-accent:#3b82f6;--radius:12px;--radius-sm:8px;--shadow:0 1px 3px #0000001a, 0 1px 2px #0000000f;--shadow-md:0 4px 6px #00000012, 0 2px 4px #0000000f;--max-width:600px}*{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%;font-size:16px}body{background:var(--color-bg);color:var(--color-text);-webkit-font-smoothing:antialiased;min-height:100dvh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}#root{flex-direction:column;min-height:100dvh;display:flex}button{cursor:pointer;font-family:inherit;font-size:inherit;background:0 0;border:none}a{color:inherit;text-decoration:none}.app{max-width:var(--max-width);flex-direction:column;flex:1;width:100%;margin:0 auto;display:flex}.header{background:var(--color-primary);color:#fff;z-index:100;box-shadow:var(--shadow-md);align-items:center;gap:12px;padding:12px 16px;display:flex;position:sticky;top:0}.header h1{flex:1;font-size:1.25rem;font-weight:700}.header-back{color:#fff;align-items:center;padding:4px;font-size:1.5rem;display:flex}.page{flex:1;padding:16px 16px 80px}.card{background:var(--color-surface);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:12px;padding:16px}.card-title{margin-bottom:8px;font-size:1rem;font-weight:600}.btn{border-radius:var(--radius-sm);justify-content:center;align-items:center;gap:8px;width:100%;padding:12px 20px;font-size:1rem;font-weight:600;transition:all .15s;display:inline-flex}.btn-primary{background:var(--color-primary);color:#fff}.btn-primary:hover{background:var(--color-primary-dark)}.btn-primary:active{transform:scale(.98)}.btn-secondary{background:var(--color-bg);color:var(--color-text);border:1px solid var(--color-border)}.btn-secondary:hover{background:var(--color-border)}.btn-success{background:var(--color-success);color:#fff}.btn-accent{background:var(--color-accent);color:#fff}.btn-sm{padding:8px 14px;font-size:.875rem}.btn:disabled{opacity:.5;cursor:not-allowed}.category-grid{grid-template-columns:1fr 1fr;gap:10px;display:grid}.category-card{background:var(--color-surface);border-radius:var(--radius);box-shadow:var(--shadow);text-align:center;cursor:pointer;border:2px solid #0000;padding:16px;transition:transform .15s}.category-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.category-card.selected{border-color:var(--color-primary)}.category-card .icon{margin-bottom:6px;font-size:2rem}.category-card .label{font-size:.8rem;font-weight:600;line-height:1.2}.category-card .count{color:var(--color-text-secondary);margin-top:4px;font-size:.7rem}.quiz-progress{align-items:center;gap:10px;margin-bottom:16px;display:flex}.quiz-progress-bar{background:var(--color-border);border-radius:3px;flex:1;height:6px;overflow:hidden}.quiz-progress-fill{background:var(--color-primary);border-radius:3px;height:100%;transition:width .3s}.quiz-progress-text{color:var(--color-text-secondary);white-space:nowrap;font-size:.8rem;font-weight:600}.question-card{background:var(--color-surface);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:16px;padding:20px}.question-category-badge{color:var(--color-text-secondary);background:var(--color-bg);text-transform:uppercase;letter-spacing:.5px;border-radius:4px;margin-bottom:10px;padding:3px 8px;font-size:.7rem;font-weight:600;display:inline-block}.question-text{margin-bottom:16px;font-size:1.05rem;font-weight:500;line-height:1.5}.options-list{flex-direction:column;gap:8px;display:flex}.option-btn{border-radius:var(--radius-sm);border:2px solid var(--color-border);background:var(--color-surface);text-align:left;cursor:pointer;align-items:flex-start;gap:10px;width:100%;padding:14px;font-size:.95rem;line-height:1.4;transition:all .15s;display:flex}.option-btn:hover:not(.answered){border-color:var(--color-primary);background:#fef2f2}.option-btn .option-letter{background:var(--color-bg);width:28px;height:28px;color:var(--color-text-secondary);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:.85rem;font-weight:700;display:flex}.option-btn.selected{border-color:var(--color-accent);background:#eff6ff}.option-btn.selected .option-letter{background:var(--color-accent);color:#fff}.option-btn.correct{border-color:var(--color-success);background:#ecfdf5}.option-btn.correct .option-letter{background:var(--color-success);color:#fff}.option-btn.incorrect{border-color:var(--color-error);background:#fef2f2}.option-btn.incorrect .option-letter{background:var(--color-error);color:#fff}.option-btn.answered{cursor:default}.option-btn.dimmed{opacity:.6}.quiz-nav{gap:10px;margin-top:16px;display:flex}.quiz-nav .btn{flex:1}.bookmark-btn{color:var(--color-text-secondary);padding:4px 8px;font-size:1.3rem;transition:color .15s}.bookmark-btn.active{color:var(--color-warning)}.result-score{text-align:center;padding:24px 16px}.result-score .score-circle{border:6px solid;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;width:140px;height:140px;margin:0 auto 16px;display:flex}.result-score .score-circle.pass{border-color:var(--color-success);color:var(--color-success)}.result-score .score-circle.fail{border-color:var(--color-error);color:var(--color-error)}.result-score .score-number{font-size:2.5rem;font-weight:800;line-height:1}.result-score .score-label{font-size:.85rem;font-weight:600}.result-meta{text-align:center;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-top:16px;display:grid}.result-meta .meta-value{font-size:1.3rem;font-weight:700}.result-meta .meta-label{color:var(--color-text-secondary);font-size:.75rem}.stat-row{border-bottom:1px solid var(--color-border);justify-content:space-between;align-items:center;padding:10px 0;display:flex}.stat-row:last-child{border-bottom:none}.stat-label{color:var(--color-text-secondary);font-size:.9rem}.stat-value{font-size:1.1rem;font-weight:700}.bottom-nav{background:var(--color-surface);border-top:1px solid var(--color-border);z-index:100;padding-bottom:env(safe-area-inset-bottom,0);justify-content:center;display:flex;position:fixed;bottom:0;left:0;right:0}.bottom-nav-inner{max-width:var(--max-width);width:100%;display:flex}.nav-item{color:var(--color-text-secondary);flex-direction:column;flex:1;align-items:center;gap:2px;padding:8px 0;font-size:.65rem;font-weight:600;transition:color .15s;display:flex}.nav-item.active{color:var(--color-primary)}.nav-item .nav-icon{font-size:1.4rem}.mode-selector{gap:8px;margin-bottom:16px;display:flex}.mode-btn{border-radius:var(--radius-sm);border:2px solid var(--color-border);background:var(--color-surface);text-align:center;cursor:pointer;flex:1;padding:14px;transition:all .15s}.mode-btn.active{border-color:var(--color-primary);background:#fef2f2}.mode-btn .mode-title{margin-bottom:4px;font-size:.95rem;font-weight:700}.mode-btn .mode-desc{color:var(--color-text-secondary);font-size:.75rem}.history-item{border-bottom:1px solid var(--color-border);align-items:center;gap:12px;padding:12px 0;display:flex}.history-item:last-child{border-bottom:none}.history-score{border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:48px;height:48px;font-size:.9rem;font-weight:800;display:flex}.history-score.pass{color:var(--color-success);background:#ecfdf5}.history-score.fail{color:var(--color-error);background:#fef2f2}.history-details{flex:1}.history-details .date{color:var(--color-text-secondary);font-size:.8rem}.history-details .summary{font-size:.85rem;font-weight:500}.text-center{text-align:center}.mt-4{margin-top:16px}.mt-2{margin-top:8px}.mb-4{margin-bottom:16px}.mb-2{margin-bottom:8px}.gap-2{flex-direction:column;gap:8px;display:flex}.gap-3{flex-direction:column;gap:12px;display:flex}.text-muted{color:var(--color-text-secondary);font-size:.85rem}.empty-state{text-align:center;color:var(--color-text-secondary);padding:40px 20px}.empty-state .empty-icon{margin-bottom:12px;font-size:3rem}.section-title{text-transform:uppercase;letter-spacing:.5px;color:var(--color-text-secondary);margin-top:20px;margin-bottom:10px;font-size:.8rem;font-weight:700}.section-title:first-child{margin-top:0}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:.2s fadeIn}