:root{--bg:#f4f6fb;--surface:#fff;--surface-2:#f8fafc;--sidebar:#101a33;--sidebar-hover:#1c2a4d;--sidebar-active:#2563eb;--border:#e3e8f0;--text:#14203a;--text-muted:#64748b;--text-invert:#e8edf7;--primary:#2563eb;--primary-dark:#1d4ed8;--success:#16a34a;--success-bg:#dcfce7;--danger:#dc2626;--danger-bg:#fee2e2;--warning:#d97706;--warning-bg:#fef3c7;--radius:12px;--radius-sm:8px;--shadow:0 1px 2px #101a330f, 0 4px 16px #101a330f;--sidebar-w:248px}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;font-family:Segoe UI,system-ui,-apple-system,sans-serif;font-size:14.5px;line-height:1.55;overflow:hidden}h1,h2,h3,h4{margin:0;font-weight:650;line-height:1.25}h1{font-size:24px}h2{font-size:19px}h3{font-size:16px}p{margin:0}a{color:var(--primary);text-decoration:none}a:hover{text-decoration:underline}button{font:inherit;cursor:pointer}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{border:2px solid var(--bg);background:#cbd5e1;border-radius:6px}::-webkit-scrollbar-thumb:hover{background:#94a3b8}.boot-screen{height:100%;color:var(--text-muted);place-content:center;justify-items:center;gap:16px;display:grid}.login-page{background:var(--surface);grid-template-columns:1fr 460px;height:100%;display:grid}@media (width<=900px){.login-page{grid-template-columns:1fr}.login-hero{display:none!important}}.login-hero{color:var(--text-invert);background:linear-gradient(150deg,#101a33 0%,#1e3a8a 55%,#2563eb 100%);flex-direction:column;justify-content:center;gap:20px;padding:56px 52px;display:flex;position:relative;overflow:hidden}.login-hero:after{content:"";background:#ffffff0f;border-radius:50%;width:480px;height:480px;position:absolute;bottom:-200px;right:-160px}.login-hero h1{letter-spacing:-.5px;font-size:38px}.login-hero p{color:#b9c8e8;max-width:420px;font-size:15px}.login-hero ul{color:#cfdcf5;gap:10px;margin:12px 0 0;padding:0;list-style:none;display:grid}.login-hero li{align-items:center;gap:10px;display:flex}.login-form-wrap{justify-content:center;align-items:center;padding:40px;display:flex}.login-form{gap:16px;width:100%;max-width:340px;display:grid}.login-form .device-note{color:var(--text-muted);border-top:1px solid var(--border);padding-top:14px;font-size:12px;line-height:1.5}.layout{grid-template-columns:var(--sidebar-w) 1fr;height:100%;display:grid}.sidebar{background:var(--sidebar);color:var(--text-invert);flex-direction:column;display:flex;overflow:hidden}.sidebar-brand{border-bottom:1px solid #ffffff14;align-items:center;gap:11px;padding:22px 20px 18px;display:flex}.sidebar-logo{background:linear-gradient(135deg,#3b82f6,#1d4ed8);border-radius:10px;flex-shrink:0;place-items:center;width:36px;height:36px;font-size:15px;font-weight:700;display:grid}.sidebar-brand strong{font-size:15.5px;display:block}.sidebar-brand span{color:#8fa4cc;font-size:11.5px}.sidebar-nav{flex:1;align-content:start;gap:2px;padding:12px 10px;display:grid;overflow-y:auto}.sidebar-section{text-transform:uppercase;letter-spacing:.08em;color:#6c82ad;padding:14px 10px 6px;font-size:10.5px;font-weight:600}.nav-item{border-radius:var(--radius-sm);color:#c2d0ea;align-items:center;gap:11px;padding:9px 11px;font-size:14px;text-decoration:none;transition:background .12s,color .12s;display:flex}.nav-item:hover{background:var(--sidebar-hover);color:#fff;text-decoration:none}.nav-item.active{background:var(--sidebar-active);color:#fff;font-weight:550}.nav-item svg{flex-shrink:0}.avatar{object-fit:cover;background:#e2e8f0;border-radius:50%;flex-shrink:0;display:block}.avatar-fallback{color:#475569;place-items:center;font-weight:600;display:grid}.icon-btn{color:#8fa4cc;background:0 0;border:none;border-radius:6px;place-items:center;padding:6px;display:grid}.icon-btn:hover{background:var(--sidebar-hover);color:#fff}.content{grid-template-rows:auto 1fr;height:100%;min-height:0;display:grid}.main{min-height:0;overflow-y:auto}.topbar{background:var(--surface);border-bottom:1px solid var(--border);z-index:20;flex-shrink:0;align-items:center;gap:20px;height:62px;padding:0 26px 0 34px;display:flex;position:relative}.topbar-title{white-space:nowrap;text-overflow:ellipsis;flex:1;min-width:0;font-size:19px;font-weight:650;overflow:hidden}.topbar-user{position:relative}.user-chip{color:var(--text);background:0 0;border:1px solid #0000;border-radius:999px;align-items:center;gap:10px;padding:5px 10px 5px 5px;transition:background .12s,border-color .12s;display:flex}.user-chip:hover,.user-chip.open{background:var(--surface-2);border-color:var(--border)}.user-chip-text{text-align:left;min-width:0;max-width:190px;display:grid}.user-chip-text strong{white-space:nowrap;text-overflow:ellipsis;font-size:13.5px;font-weight:600;overflow:hidden}.user-chip-text span{color:var(--text-muted);white-space:nowrap;text-overflow:ellipsis;font-size:11.5px;overflow:hidden}.user-chip svg{color:var(--text-muted)}.user-menu{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);z-index:30;gap:2px;min-width:262px;padding:6px;display:grid;position:absolute;top:calc(100% + 8px);right:0;box-shadow:0 8px 30px #101a3329}.user-menu-head{border-bottom:1px solid var(--border);align-items:center;gap:11px;margin-bottom:5px;padding:11px 12px 13px;display:flex}.user-menu-head strong{white-space:nowrap;text-overflow:ellipsis;font-size:13.5px;display:block;overflow:hidden}.user-menu-head span{color:var(--text-muted);font-size:12px}.user-menu-item{border-radius:var(--radius-sm);width:100%;color:var(--text);text-align:left;background:0 0;border:none;align-items:center;gap:11px;padding:9px 12px;font-size:13.5px;display:flex}.user-menu-item:hover{background:var(--surface-2)}.user-menu-item.danger{color:var(--danger)}.user-menu-item.danger:hover{background:var(--danger-bg)}.page{max-width:1720px;margin:0 auto;padding:28px 34px 48px}.page-head{justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:22px;display:flex}.page-head p{color:var(--text-muted);margin-top:4px}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}.card-pad{padding:18px 20px}.grid{gap:16px;display:grid}.grid-2{grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr))}.grid-3{grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr))}.btn{border-radius:var(--radius-sm);background:var(--primary);color:#fff;white-space:nowrap;border:1px solid #0000;justify-content:center;align-items:center;gap:8px;padding:9px 17px;font-size:14px;font-weight:550;transition:background .12s,opacity .12s;display:inline-flex}.btn:hover:not(:disabled){background:var(--primary-dark)}.btn:disabled{opacity:.55;cursor:not-allowed}.btn-secondary{background:var(--surface);color:var(--text);border-color:var(--border)}.btn-secondary:hover:not(:disabled){background:var(--surface-2)}.btn-ghost{color:var(--text-muted);background:0 0;border-color:#0000}.btn-ghost:hover:not(:disabled){background:var(--surface-2);color:var(--text)}.btn-danger{background:var(--danger)}.btn-danger:hover:not(:disabled){background:#b91c1c}.btn-success{background:var(--success)}.btn-success:hover:not(:disabled){background:#15803d}.btn-lg{padding:12px 24px;font-size:15px}.btn-sm{padding:6px 12px;font-size:13px}.btn-block{width:100%}.field{gap:6px;display:grid}.field label{color:var(--text);font-size:13px;font-weight:550}.input,.select,.textarea{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);width:100%;color:var(--text);font:inherit;outline:none;padding:10px 13px;transition:border-color .12s,box-shadow .12s}.input:focus,.select:focus,.textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px #2563eb1f}.input:disabled{background:var(--surface-2);color:var(--text-muted)}.phone-input{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);align-items:center;transition:border-color .12s,box-shadow .12s;display:flex;overflow:hidden}.phone-input:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px #2563eb1f}.phone-prefix{color:var(--text-muted);font-variant-numeric:tabular-nums;-webkit-user-select:none;user-select:none;flex-shrink:0;padding:10px 0 10px 13px}.phone-input input{min-width:0;color:var(--text);font:inherit;font-variant-numeric:tabular-nums;letter-spacing:.02em;background:0 0;border:0;outline:none;flex:1;padding:10px 13px 10px 8px}.badge{background:var(--surface-2);color:var(--text-muted);border:1px solid var(--border);border-radius:999px;align-items:center;gap:5px;padding:3px 9px;font-size:12px;font-weight:550;display:inline-flex}.badge-success{background:var(--success-bg);color:#15803d;border-color:#bbf7d0}.badge-danger{background:var(--danger-bg);color:#b91c1c;border-color:#fecaca}.badge-warning{background:var(--warning-bg);color:#b45309;border-color:#fde68a}.badge-primary{color:#1d4ed8;background:#dbeafe;border-color:#bfdbfe}.progress{background:#e8edf6;border-radius:999px;height:7px;overflow:hidden}.progress-bar{background:var(--primary);border-radius:999px;height:100%;transition:width .3s}.progress-bar.done{background:var(--success)}.alert{border-radius:var(--radius-sm);border:1px solid;align-items:flex-start;gap:10px;padding:12px 15px;font-size:14px;display:flex}.alert-danger{background:var(--danger-bg);color:#991b1b;border-color:#fecaca}.alert-warning{background:var(--warning-bg);color:#92400e;border-color:#fde68a}.alert-info{color:#1e40af;background:#dbeafe;border-color:#bfdbfe}.alert-success{background:var(--success-bg);color:#166534;border-color:#bbf7d0}.empty{color:var(--text-muted);text-align:center;place-items:center;gap:10px;padding:56px 20px;display:grid}.empty svg{opacity:.4}.spinner{border:3px solid #2563eb2e;border-top-color:var(--primary);border-radius:50%;animation:.7s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.center-load{place-items:center;padding:60px;display:grid}.skeleton{border-radius:var(--radius-sm);background:linear-gradient(90deg,#eef2f8 25%,#e2e8f0 50%,#eef2f8 75%) 0 0/200% 100%;animation:1.3s infinite shimmer}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.subject-card{flex-direction:column;transition:transform .14s,box-shadow .14s;display:flex;overflow:hidden}.subject-card:hover{transform:translateY(-2px);box-shadow:0 4px 8px #101a3314,0 12px 32px #101a331a}.subject-cover{object-fit:cover;color:#fff;background:linear-gradient(135deg,#1e3a8a,#3b82f6);place-items:center;width:100%;height:132px;font-size:30px;font-weight:700;display:grid}.subject-body{flex:1;align-content:start;gap:10px;padding:15px 17px 17px;display:grid}.subject-body h3{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.subject-desc{color:var(--text-muted);-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:13px;display:-webkit-box;overflow:hidden}.subject-meta{color:var(--text-muted);justify-content:space-between;font-size:12.5px;display:flex}.subject-actions{margin-top:auto;padding-top:4px}.lesson-row{border-bottom:1px solid var(--border);color:inherit;align-items:center;gap:14px;padding:14px 18px;text-decoration:none;transition:background .12s;display:flex}.lesson-row:last-child{border-bottom:none}.lesson-row:hover{background:var(--surface-2);text-decoration:none}.lesson-row.locked{opacity:.55;cursor:not-allowed}.lesson-step{background:var(--surface-2);border:1px solid var(--border);width:34px;height:34px;color:var(--text-muted);border-radius:50%;flex-shrink:0;place-items:center;font-size:13.5px;font-weight:600;display:grid}.lesson-step.passed{background:var(--success-bg);color:#15803d;border-color:#bbf7d0}.lesson-step.current{background:var(--primary);border-color:var(--primary);color:#fff}.lesson-info{flex:1;min-width:0}.lesson-info strong{font-weight:550;display:block}.lesson-info span{color:var(--text-muted);font-size:12.5px}.video-wrap{border-radius:var(--radius);aspect-ratio:16/9;background:#000;overflow:hidden}.video-wrap video,.video-wrap iframe{border:0;width:100%;height:100%;display:block}.doc-row{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);align-items:center;gap:12px;padding:11px 15px;display:flex}.doc-row strong{flex:1;font-size:13.5px;font-weight:500}.test-shell{background:var(--bg);flex-direction:column;height:100%;display:flex}.test-topbar{background:var(--surface);border-bottom:1px solid var(--border);flex-shrink:0;align-items:center;gap:18px;padding:13px 26px;display:flex}.test-topbar h2{flex:1;font-size:16px}.test-timer{font-variant-numeric:tabular-nums;border-radius:var(--radius-sm);background:var(--surface-2);border:1px solid var(--border);padding:5px 13px;font-size:16px;font-weight:650}.test-timer.warn{background:var(--danger-bg);color:#b91c1c;border-color:#fecaca}.test-body{flex:1;grid-template-columns:1fr 230px;align-items:start;gap:24px;width:100%;max-width:1180px;margin:0 auto;padding:24px 26px 40px;display:grid;overflow-y:auto}@media (width<=1000px){.test-body{grid-template-columns:1fr}.test-nav-panel{order:-1;position:static!important}}.question-card{padding:24px 26px}.question-num{color:var(--text-muted);letter-spacing:.04em;text-transform:uppercase;font-size:12.5px;font-weight:600}.question-text{margin:8px 0 20px;font-size:17px;font-weight:550;line-height:1.5}.question-image{border-radius:var(--radius-sm);border:1px solid var(--border);max-width:100%;max-height:300px;margin-bottom:18px;display:block}.options{gap:10px;display:grid}.option{border:1.5px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);text-align:left;align-items:flex-start;gap:12px;width:100%;padding:13px 16px;transition:border-color .12s,background .12s;display:flex}.option:hover{background:var(--surface-2);border-color:#b9c9e8}.option.selected{border-color:var(--primary);background:#eff5ff}.option-letter{border:1.5px solid var(--border);width:25px;height:25px;color:var(--text-muted);background:var(--surface);border-radius:50%;flex-shrink:0;place-items:center;font-size:12.5px;font-weight:650;display:grid}.option.selected .option-letter{background:var(--primary);border-color:var(--primary);color:#fff}.option-text{flex:1;padding-top:2px}.option img{border-radius:6px;max-width:240px;margin-top:8px;display:block}.test-footer{justify-content:space-between;gap:12px;margin-top:22px;display:flex}.test-nav-panel{padding:17px;position:sticky;top:0}.test-nav-grid{grid-template-columns:repeat(5,1fr);gap:7px;margin-top:12px;display:grid}.test-nav-btn{aspect-ratio:1;border:1.5px solid var(--border);background:var(--surface);color:var(--text-muted);border-radius:7px;place-items:center;font-size:12.5px;font-weight:600;transition:all .12s;display:grid}.test-nav-btn:hover{border-color:#b9c9e8}.test-nav-btn.answered{color:#1d4ed8;background:#dbeafe;border-color:#bfdbfe}.test-nav-btn.current{border-color:var(--primary);color:var(--primary);border-width:2px}.test-legend{color:var(--text-muted);gap:6px;margin-top:14px;font-size:12px;display:grid}.test-legend div{align-items:center;gap:8px;display:flex}.legend-dot{border:1.5px solid var(--border);background:var(--surface);border-radius:4px;width:12px;height:12px}.legend-dot.answered{background:#dbeafe;border-color:#bfdbfe}.result-screen{place-items:center;padding:50px 24px;display:grid}.result-card{text-align:center;justify-items:center;gap:16px;width:100%;max-width:480px;padding:38px 34px;display:grid}.result-ring{border-radius:50%;place-items:center;width:128px;height:128px;font-size:32px;font-weight:700;display:grid}.result-ring.pass{background:var(--success-bg);color:#15803d}.result-ring.fail{background:var(--danger-bg);color:#b91c1c}.result-stats{grid-template-columns:repeat(3,1fr);gap:12px;width:100%;margin-top:4px;display:grid}.result-stat{background:var(--surface-2);border-radius:var(--radius-sm);border:1px solid var(--border);padding:12px}.result-stat strong{font-size:21px;display:block}.result-stat span{color:var(--text-muted);font-size:12px}.modal-backdrop{z-index:100;background:#101a3380;place-items:center;padding:24px;display:grid;position:fixed;inset:0}.modal{background:var(--surface);border-radius:var(--radius);gap:14px;width:100%;max-width:460px;padding:26px 28px;display:grid;box-shadow:0 20px 60px #101a334d}.modal-actions{justify-content:flex-end;gap:10px;margin-top:6px;display:flex}.list-row{border-bottom:1px solid var(--border);align-items:flex-start;gap:16px;padding:16px 18px;display:flex}.list-row:last-child{border-bottom:none}.list-thumb{border-radius:var(--radius-sm);object-fit:cover;background:var(--surface-2);border:1px solid var(--border);flex-shrink:0;width:86px;height:64px}.list-body{flex:1;gap:5px;min-width:0;display:grid}.list-body p{color:var(--text-muted);-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:13px;display:-webkit-box;overflow:hidden}.breadcrumb{color:var(--text-muted);align-items:center;gap:7px;margin-bottom:14px;font-size:13px;display:flex}.breadcrumb a{color:var(--text-muted)}.breadcrumb a:hover{color:var(--primary)}.stat-row{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:22px;display:grid}.stat-box{gap:3px;padding:16px 18px;display:grid}.stat-box strong{font-size:25px;line-height:1.1}.stat-box span{color:var(--text-muted);font-size:12.5px}.form-grid{gap:14px;display:grid}.form-grid-2{grid-template-columns:1fr 1fr}.form-grid-3{grid-template-columns:1fr 1fr 1fr}.topbar-menu-btn{color:var(--text);border-radius:var(--radius-sm);background:0 0;border:none;margin-left:-7px;padding:7px;display:none}.topbar-menu-btn:hover{background:var(--surface-2)}.nav-backdrop{display:none}@media (width<=899px){.layout{grid-template-columns:1fr}.sidebar{z-index:60;width:min(280px,82vw);transition:transform .2s;position:fixed;inset:0 auto 0 0;transform:translate(-100%);box-shadow:0 0 40px #101a3359}.sidebar.open{transform:none}.nav-backdrop{z-index:55;background:#101a3373;display:block;position:fixed;inset:0}.topbar-menu-btn{place-items:center;display:grid}.topbar{gap:10px;height:56px;padding:0 14px}.topbar-title{font-size:17px}.page{padding:18px 16px 40px}.page-head{flex-wrap:wrap;margin-bottom:16px}.test-topbar{flex-wrap:wrap;gap:10px;padding:10px 14px}.test-body{gap:16px;padding:16px 14px 32px}.question-card{padding:18px 16px}.question-text{font-size:16px}}@media (width<=599px){.user-chip-text{display:none}.user-chip{padding:3px}.user-chip>svg{display:none}.user-menu{min-width:0;position:fixed;top:60px;left:10px;right:10px}.form-grid-2,.form-grid-3{grid-template-columns:1fr}.stat-row{grid-template-columns:repeat(3,1fr);gap:8px}.stat-box{padding:12px}.stat-box strong{font-size:21px}.list-row{flex-wrap:wrap}.list-thumb{width:64px;height:48px}.lesson-row{gap:10px;padding:12px 14px}.lesson-row .badge{display:none}.result-card{padding:28px 18px}.test-footer .btn{flex:1}.login-form-wrap{padding:28px 18px}}