:root{--primary:#4f46e5;--primary-hover:#4338ca;--primary-light:#eef2ff;--success:#22c55e;--success-light:#f0fdf4;--danger:#ef4444;--danger-light:#fef2f2;--warning:#f59e0b;--warning-light:#fffbeb;--g50:#f9fafb;--g100:#f3f4f6;--g200:#e5e7eb;--g300:#d1d5db;--g400:#9ca3af;--g500:#6b7280;--g600:#4b5563;--g700:#374151;--g800:#1f2937;--g900:#111827;--radius:8px;--shadow:0 1px 3px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.06);--shadow-md:0 4px 6px rgba(0,0,0,.07),0 2px 4px rgba(0,0,0,.06)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--g50);color:var(--g800);line-height:1.6;min-height:100vh}a{color:var(--primary);text-decoration:none}a:hover{text-decoration:underline}.app-container{min-height:100vh;display:flex;flex-direction:column}.navbar{background:#fff;border-bottom:1px solid var(--g200);padding:0 20px;height:52px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;box-shadow:var(--shadow)}.navbar-brand{font-size:17px;font-weight:700;color:var(--primary)}.navbar-nav{display:flex;align-items:center;gap:2px;list-style:none}.navbar-nav a{padding:7px 14px;border-radius:var(--radius);color:var(--g600);font-size:14px;font-weight:500;transition:.15s}.navbar-nav a:hover,.navbar-nav a.router-link-active{background:var(--primary-light);color:var(--primary);text-decoration:none}.navbar-user{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--g600)}.main-content{flex:1;padding:20px;max-width:900px;margin:0 auto;width:100%}.card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;margin-bottom:14px}.card-header{font-size:15px;font-weight:600;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--g100)}.btn{display:inline-flex;align-items:center;justify-content:center;padding:8px 18px;border-radius:var(--radius);font-size:14px;font-weight:500;border:none;cursor:pointer;transition:.15s;gap:6px}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover:not(:disabled){background:var(--primary-hover)}.btn-success{background:var(--success);color:#fff}.btn-success:hover:not(:disabled){background:#16a34a}.btn-danger{background:var(--danger);color:#fff}.btn-outline{background:#fff;color:var(--g700);border:1px solid var(--g300)}.btn-outline:hover:not(:disabled){background:var(--g50);border-color:var(--g400)}.btn-sm{padding:4px 12px;font-size:13px}.btn-lg{padding:11px 28px;font-size:15px}.form-group{margin-bottom:14px}.form-label{display:block;font-size:14px;font-weight:500;color:var(--g700);margin-bottom:5px}.form-input{width:100%;padding:9px 13px;border:1px solid var(--g300);border-radius:var(--radius);font-size:14px;color:var(--g800);outline:none;transition:.15s}.form-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px #4f46e51a}.form-error{color:var(--danger);font-size:13px;margin-top:4px}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px;margin-bottom:20px}.stat-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;text-align:center}.stat-value{font-size:26px;font-weight:700;color:var(--primary)}.stat-label{font-size:13px;color:var(--g500);margin-top:3px}.question-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;margin-bottom:14px}.question-header{display:flex;align-items:center;gap:10px;margin-bottom:14px}.question-number{background:var(--primary);color:#fff;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;flex-shrink:0}.question-type{font-size:12px;padding:2px 8px;border-radius:4px;font-weight:500}.type-1{background:#dbeafe;color:#1d4ed8}.type-2{background:#fef3c7;color:#b45309}.type-3{background:#d1fae5;color:#047857}.question-tag{font-size:12px;color:var(--g400);margin-left:auto}.question-text{font-size:15px;line-height:1.8;color:var(--g800);margin-bottom:18px}.options-list{display:flex;flex-direction:column;gap:8px}.option-item{display:flex;align-items:flex-start;gap:10px;padding:11px 14px;border:2px solid var(--g200);border-radius:var(--radius);cursor:pointer;transition:.15s;line-height:1.6}.option-item:hover:not(.disabled){border-color:var(--primary);background:var(--primary-light)}.option-item.selected{border-color:var(--primary);background:var(--primary-light)}.option-item.correct{border-color:var(--success);background:var(--success-light)}.option-item.wrong{border-color:var(--danger);background:var(--danger-light)}.option-item.disabled{cursor:default}.option-label{width:22px;height:22px;border-radius:50%;border:2px solid var(--g300);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;flex-shrink:0;color:var(--g500);transition:.15s}.option-item.selected .option-label{border-color:var(--primary);background:var(--primary);color:#fff}.option-item.correct .option-label{border-color:var(--success);background:var(--success);color:#fff}.option-item.wrong .option-label{border-color:var(--danger);background:var(--danger);color:#fff}.option-text{flex:1;font-size:14px;word-break:break-word}.analysis-box{margin-top:14px;padding:14px;background:var(--g50);border-radius:var(--radius);border-left:3px solid var(--primary)}.analysis-title{font-size:14px;font-weight:600;color:var(--primary);margin-bottom:6px}.analysis-text{font-size:14px;line-height:1.8;color:var(--g600)}.code-block{background:var(--g800);border-radius:6px;padding:14px;margin:10px 0;overflow-x:auto;font-size:13px;line-height:1.6}.code-block code{font-family:SF Mono,Fira Code,Consolas,monospace}.inline-code{background:var(--g100);padding:2px 6px;border-radius:4px;font-family:SF Mono,Consolas,monospace;font-size:.9em;color:var(--danger)}.hljs{color:#e2e8f0}.hljs-keyword{color:#c084fc}.hljs-string{color:#86efac}.hljs-number{color:#fbbf24}.hljs-comment{color:#64748b;font-style:italic}.hljs-function,.hljs-title{color:#60a5fa}.hljs-built_in{color:#67e8f9}.hljs-attr{color:#fbbf24}.hljs-tag,.hljs-name{color:#f87171}.hljs-attribute{color:#86efac}.progress-bar{height:6px;background:var(--g200);border-radius:3px;overflow:hidden;margin:14px 0}.progress-fill{height:100%;background:var(--primary);border-radius:3px;transition:width .3s}.quiz-nav{display:flex;justify-content:space-between;align-items:center;margin-top:20px;padding-top:14px;border-top:1px solid var(--g200)}.result-card{text-align:center;padding:36px}.result-score{font-size:56px;font-weight:800;color:var(--primary)}.result-label{font-size:15px;color:var(--g500);margin-top:6px}.result-stats{display:flex;justify-content:center;gap:36px;margin-top:28px}.result-stat{text-align:center}.result-stat-value{font-size:22px;font-weight:700}.result-stat-label{font-size:13px;color:var(--g500);margin-top:3px}.auth-container{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}.auth-card{background:#fff;border-radius:12px;box-shadow:var(--shadow-md);padding:36px;width:100%;max-width:400px}.auth-title{font-size:22px;font-weight:700;text-align:center;margin-bottom:6px}.auth-subtitle{text-align:center;color:var(--g500);font-size:14px;margin-bottom:28px}.auth-footer{text-align:center;margin-top:20px;font-size:14px;color:var(--g500)}.empty-state{text-align:center;padding:50px 20px;color:var(--g400)}.empty-icon{font-size:44px;margin-bottom:14px}.empty-text{font-size:15px;margin-bottom:20px}.list-item{display:flex;align-items:center;padding:14px;border-bottom:1px solid var(--g100);gap:14px}.list-item:last-child{border-bottom:none}.chart-container{display:flex;align-items:flex-end;gap:6px;height:110px;padding:14px 0}.chart-label{text-align:center;font-size:11px;color:var(--g400);margin-top:3px}.loading{display:flex;align-items:center;justify-content:center;padding:36px}.spinner{width:30px;height:30px;border:3px solid var(--g200);border-top-color:var(--primary);border-radius:50%;animation:spin .6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media (max-width:640px){.navbar{padding:0 10px;height:48px}.navbar-nav{gap:0}.navbar-nav a{padding:6px 8px;font-size:13px}.main-content{padding:14px}.stats-grid{grid-template-columns:repeat(2,1fr)}.result-stats{gap:18px}.auth-card{padding:22px}.question-card{padding:16px}.option-item{padding:9px 11px}.quiz-nav{flex-wrap:wrap;gap:8px}}