:root{--color-primary: #2563eb;--color-primary-dark: #1d4ed8;--color-success: #16a34a;--color-success-bg: #dcfce7;--color-danger: #dc2626;--color-danger-bg: #fef2f2;--color-warning: #d97706;--color-warning-bg: #fefce8;--color-bg: #f8fafc;--color-surface: #ffffff;--color-text: #1e293b;--color-text-secondary: #64748b;--color-border: #e2e8f0;--color-progress-red: #ef4444;--color-progress-yellow: #eab308;--color-progress-green: #22c55e;--radius: 12px;--radius-sm: 8px;--shadow: 0 1px 3px rgba(0,0,0,.1);--shadow-lg: 0 4px 12px rgba(0,0,0,.1);--max-width: 480px;--nav-height: 64px}*{margin:0;padding:0;box-sizing:border-box}html{font-size:16px;-webkit-text-size-adjust:100%}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--color-bg);color:var(--color-text);min-height:100dvh;overflow-x:hidden}#root{min-height:100dvh;display:flex;flex-direction:column}button{font-family:inherit;font-size:inherit;cursor:pointer;border:none;border-radius:var(--radius-sm);padding:12px 20px;font-weight:600;transition:background-color .15s,transform .1s;-webkit-tap-highlight-color:transparent}button:active{transform:scale(.98)}input{font-family:inherit;font-size:1rem;padding:14px 16px;border:2px solid var(--color-border);border-radius:var(--radius-sm);width:100%;outline:none;transition:border-color .15s}input:focus{border-color:var(--color-primary)}.page{flex:1;padding:16px;padding-bottom:calc(var(--nav-height) + 24px);max-width:var(--max-width);margin:0 auto;width:100%}.page-title{font-size:1.5rem;font-weight:700;margin-bottom:4px}.page-subtitle{color:var(--color-text-secondary);font-size:.9rem;margin-bottom:20px}.header{background:var(--color-surface);border-bottom:1px solid var(--color-border);padding:12px 16px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100}.header-title{font-size:1.1rem;font-weight:700;color:var(--color-primary)}.header-user{font-size:.85rem;color:var(--color-text-secondary)}.header-btn{background:none;padding:8px;color:var(--color-text-secondary);font-size:.85rem}.mobile-nav{position:fixed;bottom:0;left:0;right:0;background:var(--color-surface);border-top:1px solid var(--color-border);display:flex;justify-content:space-around;align-items:center;height:var(--nav-height);padding-bottom:env(safe-area-inset-bottom);z-index:100}.nav-item{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 16px;color:var(--color-text-secondary);text-decoration:none;font-size:.7rem;font-weight:500;background:none;border-radius:0;min-width:64px}.nav-item.active{color:var(--color-primary)}.nav-icon{font-size:1.4rem;line-height:1}.btn-primary{background:var(--color-primary);color:#fff;width:100%;padding:16px;font-size:1.05rem}.btn-primary:hover{background:var(--color-primary-dark)}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.btn-secondary{background:var(--color-bg);color:var(--color-text);border:2px solid var(--color-border);width:100%;padding:14px}.btn-small{padding:8px 16px;font-size:.85rem;width:auto}.card{background:var(--color-surface);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);margin-bottom:12px}.progress-bar{height:8px;background:var(--color-border);border-radius:4px;overflow:hidden;margin:8px 0}.progress-fill{height:100%;border-radius:4px;transition:width .3s ease}.progress-fill.red{background:var(--color-progress-red)}.progress-fill.yellow{background:var(--color-progress-yellow)}.progress-fill.green{background:var(--color-progress-green)}.chapter-card{cursor:pointer;transition:box-shadow .15s}.chapter-card:active{box-shadow:var(--shadow-lg)}.chapter-card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:4px}.chapter-card-title{font-weight:600;font-size:.95rem}.chapter-card-percent{font-weight:700;font-size:.95rem}.chapter-card-stats{font-size:.8rem;color:var(--color-text-secondary)}.quiz-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.quiz-chapter{font-weight:600;color:var(--color-text-secondary);font-size:.85rem}.quiz-count{font-size:.85rem;color:var(--color-text-secondary)}.question-text{font-size:1.1rem;font-weight:600;line-height:1.5;margin-bottom:20px}.option-btn{width:100%;text-align:left;padding:16px;margin-bottom:10px;background:var(--color-surface);border:2px solid var(--color-border);border-radius:var(--radius-sm);font-size:1rem;line-height:1.4;min-height:48px;transition:border-color .15s,background-color .15s}.option-btn:disabled{cursor:default}.option-btn.selected{border-color:var(--color-primary);background:#eff6ff}.option-btn.correct{border-color:var(--color-success);background:var(--color-success-bg)}.option-btn.incorrect{border-color:var(--color-danger);background:var(--color-danger-bg)}.option-btn.reveal-correct{border-color:var(--color-success);background:var(--color-success-bg)}.explanation-panel{background:var(--color-warning-bg);border:2px solid var(--color-warning);border-radius:var(--radius);padding:16px;margin-top:16px}.explanation-title{font-weight:700;margin-bottom:8px;color:var(--color-warning)}.explanation-text{line-height:1.6;font-size:.95rem}.explanation-figure{margin:16px 0;text-align:center}.summary-stat{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--color-border);font-size:1rem}.summary-stat:last-child{border-bottom:none}.summary-value{font-weight:700}.correct-flash{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);font-size:4rem;animation:flashIn .6s ease-out forwards;pointer-events:none;z-index:200}@keyframes flashIn{0%{opacity:1;transform:translate(-50%,-50%) scale(.5)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.2)}to{opacity:0;transform:translate(-50%,-50%) scale(1.5)}}.auth-container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100dvh;padding:24px}.auth-card{background:var(--color-surface);border-radius:var(--radius);padding:32px 24px;box-shadow:var(--shadow-lg);width:100%;max-width:400px}.auth-title{font-size:1.5rem;font-weight:700;text-align:center;margin-bottom:8px}.auth-subtitle{text-align:center;color:var(--color-text-secondary);margin-bottom:24px;font-size:.9rem}.auth-code{background:var(--color-bg);border:2px dashed var(--color-primary);border-radius:var(--radius);padding:20px;text-align:center;font-size:1.8rem;font-weight:700;font-family:Courier New,monospace;letter-spacing:2px;margin-bottom:16px;color:var(--color-primary)}.auth-warning{background:var(--color-danger-bg);border-radius:var(--radius-sm);padding:12px;font-size:.85rem;color:var(--color-danger);text-align:center;margin-bottom:20px;font-weight:500}.auth-form{display:flex;flex-direction:column;gap:16px}.auth-link{text-align:center;margin-top:16px;font-size:.9rem}.auth-link a{color:var(--color-primary);text-decoration:none;font-weight:600}.error-message{color:var(--color-danger);font-size:.85rem;text-align:center;padding:8px}.admin-table{width:100%;border-collapse:collapse;font-size:.85rem}.admin-table th{text-align:left;padding:10px 8px;border-bottom:2px solid var(--color-border);font-weight:600;cursor:pointer;white-space:nowrap}.admin-table td{padding:10px 8px;border-bottom:1px solid var(--color-border)}.admin-table tr:active{background:var(--color-bg)}.config-item{margin-bottom:20px}.config-label{font-weight:600;margin-bottom:4px}.config-desc{font-size:.8rem;color:var(--color-text-secondary);margin-bottom:8px}.config-row{display:flex;gap:8px}.config-row input{flex:1}.loading{text-align:center;padding:40px;color:var(--color-text-secondary)}.spinner{display:inline-block;width:32px;height:32px;border:3px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media(min-width:640px){.page{max-width:720px}.chapter-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.chapter-grid .card{margin-bottom:0}}