@import "https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap";
:root{--blue-900:#0f2462;--blue-800:#1e3a8a;--blue-700:#2554cc;--blue-600:#3b6fe8;--blue-300:#93c5fd;--blue-100:#dbeafe;--blue-50:#eff6ff;--gray-950:#030712;--gray-900:#111827;--gray-800:#1f2937;--gray-700:#374151;--gray-600:#4b5563;--gray-500:#6b7280;--gray-400:#9ca3af;--gray-300:#d1d5db;--gray-200:#e5e7eb;--gray-100:#f3f4f6;--gray-50:#f9fafb;--white:#fff;--success-bg:#ecfdf5;--success-text:#065f46;--success-mid:#34d399;--error-bg:#fef2f2;--error-text:#991b1b;--error-mid:#f87171;--warn-bg:#fffbeb;--warn-text:#92400e;--warn-mid:#fbbf24;--shadow-xs:0 1px 2px #0000000d;--shadow-sm:0 1px 3px #00000012, 0 1px 2px #0000000a;--shadow-md:0 4px 6px #0000000f, 0 2px 4px #0000000a;--shadow-lg:0 10px 15px #00000012, 0 4px 6px #0000000a;--r-sm:8px;--r-md:12px;--r-lg:16px;--r-xl:20px;--r-pill:9999px;--font-thai:"IBM Plex Sans Thai", sans-serif;--font-ui:"Inter", sans-serif;--lh-tight:1.35;--lh-normal:1.55;--lh-loose:1.7;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--sidebar-w:240px}*,:before,:after{box-sizing:border-box;margin:0;padding:0}input[type=password]::-ms-reveal{display:none!important}input[type=password]::-ms-clear{display:none!important}input::-webkit-credentials-auto-fill-button{display:none!important}input::-webkit-contacts-auto-fill-button{display:none!important}html{width:100%;margin:0;padding:0;font-size:16px;overflow-x:hidden}body{width:100%;font-family:var(--font-thai);background:var(--gray-50);color:var(--gray-900);line-height:var(--lh-normal);-webkit-font-smoothing:antialiased;margin:0;padding:0;overflow-x:hidden}h1,h2,h3,h4{line-height:var(--lh-tight)}.app-shell{width:100%;min-height:100vh;display:flex}.sidebar{width:var(--sidebar-w);background:var(--white);border-right:1px solid var(--gray-100);min-height:100vh;padding:var(--space-6) 0;z-index:50;flex-direction:column;transition:width .25s;display:flex;position:fixed;top:0;left:0;overflow:hidden}.sidebar-brand{padding:0 var(--space-3) var(--space-6) var(--space-5);align-items:center;gap:var(--space-2);border-bottom:1px solid var(--gray-100);margin-bottom:var(--space-4);text-decoration:none;display:flex}.sidebar-brand-inner{align-items:center;gap:var(--space-3);flex:1;min-width:0;text-decoration:none;display:flex}.sidebar-logo{background:var(--blue-800);border-radius:var(--r-sm);width:32px;height:32px;color:var(--white);font-family:var(--font-ui);flex-shrink:0;justify-content:center;align-items:center;font-size:13px;font-weight:700;display:flex}.sidebar-brand-text{font-family:var(--font-ui);color:var(--gray-900);letter-spacing:-.3px;font-size:15px;font-weight:700}.sidebar-brand-text span{color:var(--blue-600)}.sidebar-section-label{font-family:var(--font-ui);letter-spacing:1px;text-transform:uppercase;color:var(--gray-400);padding:0 var(--space-5) var(--space-2);margin-top:var(--space-4);font-size:10px;font-weight:600}.nav-item{align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-5);margin:1px var(--space-2);border-radius:var(--r-sm);color:var(--gray-600);cursor:pointer;text-align:left;white-space:nowrap;background:0 0;border:none;width:calc(100% - 16px);font-size:14px;font-weight:500;text-decoration:none;transition:all .15s;display:flex;overflow:hidden}.nav-item:hover{background:var(--gray-50);color:var(--gray-900)}.nav-item.active{background:var(--blue-50);color:var(--blue-800);font-weight:600}.nav-item-sub{padding-left:calc(var(--space-5) + 20px);color:var(--gray-500);font-size:13px}.nav-item-sub .nav-icon{width:16px;height:16px}.nav-icon{opacity:.6;flex-shrink:0;width:18px;height:18px}.nav-item.active .nav-icon{opacity:1}.nav-badge{font-family:var(--font-ui);background:var(--blue-100);color:var(--blue-800);border-radius:var(--r-pill);margin-left:auto;padding:1px 7px;font-size:11px;font-weight:600}.sidebar-user{padding:var(--space-4) var(--space-5);border-top:1px solid var(--gray-100);align-items:center;gap:var(--space-3);margin-top:auto;display:flex}.avatar{background:linear-gradient(135deg, var(--blue-600), var(--blue-900));width:32px;height:32px;color:var(--white);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:12px;font-weight:700;display:flex}.sidebar-user-info{flex:1;min-width:0}.sidebar-user-name{color:var(--gray-900);white-space:nowrap;text-overflow:ellipsis;font-size:13px;font-weight:600;overflow:hidden}.sidebar-user-plan{font-family:var(--font-ui);color:var(--gray-400);white-space:nowrap;font-size:11px}.sidebar-logout-btn{cursor:pointer;width:28px;height:28px;color:var(--gray-400);border-radius:var(--r-sm);background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;transition:background .15s,color .15s;display:flex}.sidebar-logout-btn:hover{background:var(--error-bg);color:var(--error-text)}.sidebar-collapse-btn{border-radius:var(--r-sm);cursor:pointer;width:24px;height:24px;color:var(--gray-300);background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;transition:color .15s,background .15s;display:flex}.sidebar-collapse-btn:hover{color:var(--gray-600);background:var(--gray-50)}.sidebar-expand-btn{width:36px;height:36px;margin:0 auto var(--space-2);border-radius:var(--r-sm);cursor:pointer;color:var(--gray-300);background:0 0;border:none;justify-content:center;align-items:center;transition:color .15s,background .15s;display:none}.sidebar-expand-btn:hover{color:var(--gray-600);background:var(--gray-50)}body.sidebar-collapsed .sidebar{width:64px}body.sidebar-collapsed .sidebar-label{display:none}body.sidebar-collapsed .sidebar-expand-btn{display:flex}body.sidebar-collapsed .sidebar-brand{padding:0 0 var(--space-6);justify-content:center}body.sidebar-collapsed .sidebar-brand-inner{flex:unset}body.sidebar-collapsed .nav-item{padding:var(--space-2);justify-content:center;width:calc(100% - 16px)}body.sidebar-collapsed .nav-icon{opacity:.7}body.sidebar-collapsed .nav-item.active .nav-icon{opacity:1}body.sidebar-collapsed .sidebar-user{padding:var(--space-4) 0;justify-content:center}body.sidebar-collapsed .main-content{max-width:calc(100vw - 64px);margin-left:64px}.main-content{-webkit-overflow-scrolling:touch;margin-left:var(--sidebar-w);padding:var(--space-8);max-width:calc(100vw - var(--sidebar-w));background:var(--gray-50);flex:1;transition:margin-left .25s,max-width .25s}.page-title{margin-bottom:var(--space-6)}.page-title h1{margin-bottom:var(--space-1)}.page-title p{color:var(--gray-500);font-size:14px}h1{font-family:var(--font-ui);color:var(--gray-900);letter-spacing:-.5px;font-size:24px;font-weight:700;line-height:var(--lh-tight)}h2{font-family:var(--font-ui);color:var(--gray-900);letter-spacing:-.3px;font-size:20px;font-weight:600;line-height:var(--lh-tight)}h3{font-family:var(--font-ui);color:var(--gray-900);font-size:15px;font-weight:600}.text-sm{font-size:13px}.text-xs{font-size:12px}.text-muted{color:var(--gray-500)}.text-ui{font-family:var(--font-ui)}.card{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--r-lg);padding:var(--space-6);box-shadow:var(--shadow-sm)}.card-sm{padding:var(--space-4) var(--space-5)}.btn{justify-content:center;align-items:center;gap:var(--space-2);font-family:var(--font-ui);cursor:pointer;white-space:nowrap;border-radius:var(--r-md);border:none;font-weight:600;text-decoration:none;transition:all .15s;display:inline-flex}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-lg{border-radius:var(--r-lg);padding:14px 28px;font-size:15px}.btn-md{padding:10px 20px;font-size:14px}.btn-sm{border-radius:var(--r-sm);padding:7px 14px;font-size:13px}.btn-primary{background:var(--blue-800);color:var(--white);box-shadow:0 1px 3px #1e3a8a40,0 0 0 1px #1e3a8a26}.btn-primary:hover{background:var(--blue-700);transform:translateY(-1px);box-shadow:0 4px 12px #1e3a8a4d,0 0 0 1px #1e3a8a33}.btn-outline{background:var(--white);color:var(--gray-700);border:1.5px solid var(--gray-300)}.btn-outline:hover{border-color:var(--blue-800);color:var(--blue-800);background:var(--blue-50)}.btn-ghost{color:var(--gray-600);background:0 0}.btn-ghost:hover{background:var(--gray-100);color:var(--gray-900)}.btn-success{color:var(--white);background:#059669}.btn-success:hover{background:#047857;transform:translateY(-1px)}.badge{font-family:var(--font-ui);border-radius:var(--r-pill);align-items:center;gap:4px;padding:3px 9px;font-size:11px;font-weight:600;line-height:1.4;display:inline-flex}.badge-blue{background:var(--blue-100);color:var(--blue-800)}.badge-green{background:var(--success-bg);color:var(--success-text)}.badge-red{background:var(--error-bg);color:var(--error-text)}.badge-amber{background:var(--warn-bg);color:var(--warn-text)}.badge-gray{background:var(--gray-100);color:var(--gray-700)}.badge-hot{color:#92400e;background:linear-gradient(135deg,#fef3c7,#fde68a);border:1px solid #fcd34d}.progress-track{background:var(--gray-200);border-radius:var(--r-pill);width:100%;height:6px;overflow:hidden}.progress-fill{border-radius:var(--r-pill);background:var(--blue-600);height:100%;transition:width .6s}.progress-fill.green{background:var(--success-mid)}.progress-fill.amber{background:var(--warn-mid)}.progress-fill.red{background:var(--error-mid)}.stat-grid{gap:var(--space-4);grid-template-columns:repeat(4,1fr);display:grid}.stat-card{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--r-lg);padding:var(--space-5);box-shadow:var(--shadow-sm)}.stat-card-icon{border-radius:var(--r-sm);width:36px;height:36px;margin-bottom:var(--space-3);justify-content:center;align-items:center;font-size:18px;display:flex}.stat-value{font-family:var(--font-ui);color:var(--gray-900);letter-spacing:-.5px;font-size:26px;font-weight:700;line-height:1}.stat-label{color:var(--gray-500);margin-top:var(--space-1);font-size:13px}.stat-change{font-family:var(--font-ui);margin-top:var(--space-2);font-size:12px;font-weight:500}.stat-change.up{color:#059669}.stat-change.down{color:#dc2626}.skill-list{gap:var(--space-4);flex-direction:column;display:flex}.skill-row{gap:var(--space-2);flex-direction:column;display:flex}.skill-header{justify-content:space-between;align-items:center;display:flex}.skill-name{color:var(--gray-700);font-size:14px;font-weight:500}.skill-score{font-family:var(--font-ui);color:var(--gray-900);font-size:13px;font-weight:600}.readiness-ring{width:120px;height:120px;position:relative}.readiness-ring svg{transform:rotate(-90deg)}.ring-bg{fill:none;stroke:var(--gray-200);stroke-width:8px}.ring-fill{fill:none;stroke:var(--blue-600);stroke-width:8px;stroke-linecap:round;transition:stroke-dashoffset 1s}.readiness-center{flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.readiness-pct{font-family:var(--font-ui);color:var(--gray-900);font-size:26px;font-weight:700;line-height:1}.readiness-label{font-family:var(--font-ui);color:var(--gray-400);letter-spacing:.5px;margin-top:2px;font-size:10px;font-weight:500}.plan-item{align-items:center;gap:var(--space-4);padding:var(--space-4);border-radius:var(--r-md);border:1.5px solid var(--gray-200);background:var(--white);cursor:pointer;transition:all .15s;display:flex}.plan-item:hover,.plan-item.featured{border-color:var(--blue-300);background:var(--blue-50)}.plan-dot{border:2px solid var(--gray-300);border-radius:50%;flex-shrink:0;width:10px;height:10px}.plan-name{color:var(--gray-900);font-size:14px;font-weight:600}.plan-meta{color:var(--gray-500);font-size:12px;font-family:var(--font-ui);margin-top:2px}.streak-card{padding:28px 32px}.streak-card-head{justify-content:space-between;align-items:flex-start;gap:var(--space-4);margin-bottom:var(--space-5);display:flex}.streak-layout{justify-content:center;align-items:center;gap:clamp(32px,6vw,88px);width:100%;display:flex}.streak-chart{border:1px solid var(--gray-200);background:linear-gradient(#fff,#f8fafc);border-radius:18px;flex:1;min-width:0;max-width:760px;padding:20px 22px 18px}.streak-chart-head{justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:18px;display:flex}.streak-chart-title{color:var(--gray-900);font-size:15px;font-weight:800}.streak-chart-subtitle{color:var(--gray-500);margin-top:2px;font-size:12px}.streak-chart-total{background:var(--blue-50);color:var(--blue-700);border-radius:999px;flex-shrink:0;align-items:center;gap:6px;padding:7px 10px;font-size:12px;font-weight:700;display:inline-flex}.streak-bars{grid-template-columns:repeat(14,minmax(32px,1fr));align-items:end;gap:10px;min-height:210px;display:grid}.streak-bar-item{min-width:0;color:var(--gray-400);flex-direction:column;align-items:center;gap:6px;display:flex}.streak-bar-value{height:16px;font-family:var(--font-ui);color:var(--blue-800);font-size:11px;font-weight:800;line-height:1}.streak-bar-track{background:#eef2f7;border-radius:999px;justify-content:center;align-items:flex-end;width:100%;min-width:24px;max-width:34px;height:132px;padding:3px;display:flex;box-shadow:inset 0 1px 2px #0f24620d}.streak-bar-fill{background:var(--gray-200);border-radius:999px;width:100%;transition:height .35s,transform .12s,background .12s}.streak-bar-fill.low{background:#dbeafe}.streak-bar-fill.mid{background:#93c5fd}.streak-bar-fill.high{background:linear-gradient(#3b6fe8,#0f2462)}.streak-bar-item.today .streak-bar-track{outline-offset:3px;outline:2px solid #3b6fe847}.streak-bar-item:hover .streak-bar-fill{transform:scaleX(1.08)}.streak-bar-label{font-size:11px;font-weight:800;font-family:var(--font-ui);color:var(--gray-600)}.streak-bar-date{color:var(--gray-400);white-space:nowrap;font-size:9px}.streak-board{-webkit-overflow-scrolling:touch;grid-template-columns:26px max-content;align-items:start;gap:12px;width:max-content;max-width:100%;padding:12px 14px 12px 0;display:grid;overflow:auto visible}.streak-weekdays{color:var(--gray-400);font-family:var(--font-ui);grid-template-rows:repeat(7,1fr);gap:5px;padding-top:1px;font-size:10px;font-weight:700;display:grid}.streak-weekdays div{justify-content:center;align-items:center;height:27px;display:flex}.streak-grid{grid-template-columns:repeat(7,1fr);gap:4px;display:grid}.streak-grid-wide{grid-template-rows:repeat(7,27px);grid-template-columns:repeat(12,27px);grid-auto-flow:column;gap:6px}.streak-day{background:var(--gray-50);border:1px solid var(--gray-200);border-radius:8px;width:27px;height:27px;transition:transform .12s,box-shadow .12s,background .12s}.streak-day:hover{transform:translateY(-1px);box-shadow:0 4px 10px #0f246214}.streak-day.pre,.streak-day.future{opacity:.42}.streak-day.done-1{background:var(--blue-100)}.streak-day.done-2{background:#93c5fd}.streak-day.done-3{background:var(--blue-600)}.streak-day.today{background:var(--blue-800);box-shadow:0 0 0 3px var(--white), 0 0 0 5px #0f2462c7}.streak-summary{border:1px solid var(--blue-100);background:linear-gradient(180deg, var(--blue-50), #fff);border-radius:18px;flex-direction:column;justify-content:center;gap:14px;width:260px;min-width:260px;padding:22px 24px;display:flex;box-shadow:inset 0 1px #ffffffbf}.streak-summary-value{font-family:var(--font-ui);color:var(--blue-800);letter-spacing:-.7px;font-size:38px;font-weight:800;line-height:1}.streak-summary-value span{color:var(--gray-400);font-size:15px;font-weight:600}.streak-summary-label{color:var(--gray-500);margin-top:5px;font-size:12px}.streak-summary-row{border-top:1px solid var(--blue-100);color:var(--gray-500);justify-content:space-between;align-items:center;gap:12px;padding-top:12px;font-size:13px;display:flex}.streak-summary-row strong{color:var(--gray-900);font-family:var(--font-ui);font-size:14px}.streak-legend{font-family:var(--font-ui);color:var(--gray-400);flex-wrap:wrap;gap:14px;margin-top:18px;font-size:11px;display:flex}.streak-legend span{align-items:center;gap:6px;display:inline-flex}.streak-legend i{background:var(--gray-100);border:1px solid var(--gray-200);border-radius:2px;width:9px;height:9px;display:inline-block}.streak-legend i.l1{background:var(--blue-100);border-color:var(--blue-100)}.streak-legend i.l2{background:#93c5fd;border-color:#93c5fd}.streak-legend i.l3{background:var(--blue-800);border-color:var(--blue-800)}@media (max-width:900px){.streak-card{padding:22px}.streak-layout{flex-direction:column;align-items:stretch;gap:18px}.streak-chart{max-width:none}.streak-bars{grid-template-columns:repeat(14,38px);padding:4px 2px 8px;overflow-x:auto}.streak-board{width:100%}.streak-summary{width:100%;min-width:0;max-width:none}}@media (max-width:560px){.streak-chart{padding:16px 14px}.streak-chart-head{flex-direction:column;gap:10px}.streak-chart-total{width:fit-content}.streak-bars{grid-template-columns:repeat(14,34px);gap:8px;min-height:190px}.streak-bar-track{height:112px}.streak-board{grid-template-columns:18px 1fr;gap:7px}.streak-grid-wide{grid-template-rows:repeat(7,18px);grid-template-columns:repeat(12,18px);gap:4px}.streak-weekdays{gap:4px;font-size:9px}.streak-weekdays div{height:18px}.streak-day{border-radius:5px;width:18px;height:18px}.streak-summary-value{font-size:28px}}.question-shell{max-width:720px;margin:0 auto}.question-meta{margin-bottom:var(--space-6);justify-content:space-between;align-items:center;display:flex}.q-counter{font-family:var(--font-ui);color:var(--gray-500);font-size:13px;font-weight:500}.q-progress{margin:0 var(--space-5);flex:1}.timer-pill{font-family:var(--font-ui);color:var(--gray-700);background:var(--white);border:1.5px solid var(--gray-200);border-radius:var(--r-pill);align-items:center;gap:6px;padding:5px 14px;font-size:13px;font-weight:600;display:flex}.timer-dot{background:var(--warn-mid);border-radius:50%;width:6px;height:6px;animation:2s infinite pulse}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}@keyframes skeletonShimmer{0%{background-position:-600px 0}to{background-position:600px 0}}.skeleton{will-change:background-position;background:linear-gradient(90deg,#ebebeb 25%,#f5f5f5 50%,#ebebeb 75%) 0 0/1200px 100%;border-radius:6px;animation:1.4s ease-in-out infinite skeletonShimmer;transform:translateZ(0)}.question-card{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--r-xl);padding:var(--space-8);box-shadow:var(--shadow-md);margin-bottom:var(--space-5)}.question-subject-tag{font-family:var(--font-ui);letter-spacing:.5px;color:var(--blue-700);text-transform:uppercase;margin-bottom:var(--space-4);font-size:11px;font-weight:600}.question-text{font-size:17px;line-height:var(--lh-loose);color:var(--gray-900);margin-bottom:var(--space-8);white-space:pre-wrap;font-weight:400}.question-text strong{color:var(--blue-800);font-weight:600}.choices{gap:var(--space-3);flex-direction:column;display:flex}.choice-btn{align-items:flex-start;gap:var(--space-4);padding:var(--space-4) var(--space-5);background:var(--white);border:1.5px solid var(--gray-200);border-radius:var(--r-md);cursor:pointer;text-align:left;width:100%;transition:all .15s;display:flex}.choice-btn:hover:not(.disabled):not(.selected):not(.correct):not(.wrong){border-color:var(--blue-600);background:var(--blue-50);box-shadow:var(--shadow-sm);transform:translateY(-1px)}.choice-btn.selected{border-color:var(--blue-600);background:var(--blue-50)}.choice-btn.correct{border-color:var(--success-mid);background:var(--success-bg)}.choice-btn.wrong{border-color:var(--error-mid);background:var(--error-bg)}.choice-btn.disabled{opacity:.5;cursor:not-allowed}.choice-key{border-radius:var(--r-sm);background:var(--gray-100);border:1.5px solid var(--gray-200);width:28px;height:28px;font-family:var(--font-ui);color:var(--gray-600);flex-shrink:0;justify-content:center;align-items:center;font-size:12px;font-weight:700;transition:all .15s;display:flex}.choice-btn.selected .choice-key{background:var(--blue-800);border-color:var(--blue-800);color:var(--white)}.choice-btn.correct .choice-key{color:var(--white);background:#059669;border-color:#059669}.choice-btn.wrong .choice-key{color:var(--white);background:#dc2626;border-color:#dc2626}.choice-text{font-size:15px;line-height:var(--lh-loose);color:var(--gray-800);padding-top:2px}.explanation-box{background:var(--blue-50);border:1px solid var(--blue-100);border-radius:var(--r-lg);padding:var(--space-5);margin-top:var(--space-5)}.explanation-header{align-items:center;gap:var(--space-2);margin-bottom:var(--space-3);display:flex}.ai-chip{font-family:var(--font-ui);letter-spacing:.5px;background:var(--blue-800);color:var(--white);border-radius:var(--r-pill);padding:2px 8px;font-size:10px;font-weight:700}.explanation-title{font-family:var(--font-ui);color:var(--blue-800);font-size:13px;font-weight:600}.explanation-text{font-size:14px;line-height:var(--lh-loose);color:var(--gray-700)}.explanation-text code{background:var(--white);border-radius:4px;padding:2px 6px;font-family:monospace;font-size:13px}.insight-card{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--r-lg);padding:var(--space-5);box-shadow:var(--shadow-sm);gap:var(--space-4);align-items:flex-start;display:flex}.insight-icon-wrap{border-radius:var(--r-md);flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;font-size:20px;display:flex}.insight-title{color:var(--gray-900);margin-bottom:4px;font-size:14px;font-weight:600}.insight-desc{color:var(--gray-600);font-size:13px;line-height:1.6}.prediction-topic{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--r-lg);padding:var(--space-4) var(--space-5);align-items:center;gap:var(--space-4);cursor:pointer;transition:all .15s;display:flex}.prediction-topic:hover{border-color:var(--blue-300);box-shadow:var(--shadow-md);transform:translateY(-1px)}.topic-prob{font-family:var(--font-ui);color:var(--blue-800);text-align:right;min-width:56px;font-size:22px;font-weight:700}.topic-prob span{color:var(--gray-400);font-size:13px;font-weight:500}.topic-name{color:var(--gray-900);margin-bottom:6px;font-size:14px;font-weight:600}.topic-sub{color:var(--gray-500);margin-top:4px;font-size:12px}.bar-chart{height:80px;padding:0 var(--space-2);align-items:flex-end;gap:6px;display:flex}.bar-col{flex-direction:column;flex:1;justify-content:flex-end;align-items:center;gap:4px;height:100%;display:flex}.bar-fill{border-radius:4px 4px 0 0;width:100%;min-height:4px;transition:height .5s}.bar-lbl{font-family:var(--font-ui);color:var(--gray-400);text-align:center;font-size:10px}.exam-header{border-bottom:1px solid var(--gray-200);padding:var(--space-4) clamp(var(--space-5), 3vw, var(--space-8));align-items:center;gap:var(--space-4);border-radius:var(--r-xl) var(--r-xl) 0 0;background:#fffffff5;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);display:grid}.exam-header>:last-child{justify-self:end}.exam-timer{font-family:var(--font-ui);color:var(--gray-900);letter-spacing:0;border:1px solid var(--gray-200);border-radius:var(--r-pill);background:linear-gradient(#fff,#f8fafc);padding:8px 16px;font-size:clamp(22px,2vw,30px);font-weight:800;line-height:1;box-shadow:inset 0 -1px #0f172a0a}.exam-timer.warn{color:var(--warn-text)}.exam-q-nav{padding:var(--space-4);background:var(--white);border-radius:var(--r-lg);border:1px solid var(--gray-200);box-shadow:var(--shadow-xs);grid-template-columns:repeat(auto-fill,minmax(34px,1fr));gap:7px;display:grid}.q-nav-dot{aspect-ratio:1;border:1.5px solid var(--gray-200);background:var(--white);width:100%;min-width:0;font-family:var(--font-ui);color:var(--gray-500);cursor:pointer;border-radius:10px;justify-content:center;align-items:center;font-size:12px;font-weight:600;transition:all .12s;display:flex}.q-nav-dot:hover{border-color:var(--blue-600);color:var(--blue-700)}.q-nav-dot.answered{background:var(--blue-800);border-color:var(--blue-800);color:var(--white)}.q-nav-dot.current{border-color:var(--blue-600);color:var(--blue-700);box-shadow:0 0 0 3px var(--blue-50)}.input{width:100%;padding:10px var(--space-4);font-family:var(--font-thai);color:var(--gray-900);background:var(--white);border:1.5px solid var(--gray-300);border-radius:var(--r-md);outline:none;font-size:15px;transition:border-color .15s,box-shadow .15s}.input:focus{border-color:var(--blue-600);box-shadow:0 0 0 3px #3b6fe81f}.input::placeholder{color:var(--gray-400)}.toast{align-items:center;gap:var(--space-3);background:var(--gray-900);color:var(--white);border-radius:var(--r-md);box-shadow:var(--shadow-lg);padding:12px 20px;font-size:14px;font-weight:500;display:inline-flex}.toast-success{background:#065f46}.toast-error{background:#991b1b}.exam-layout{grid-template-columns:minmax(0,1fr) clamp(252px,22vw,320px);align-items:stretch;min-height:min(740px,100vh - 132px);display:grid}.exam-q-area{padding:clamp(var(--space-5), 3vw, var(--space-8));border-right:1px solid var(--gray-100);background:linear-gradient(180deg, #f8fafcb8, #fffffff5 168px), var(--white)}.exam-nav-panel{padding:var(--space-5);background:#f8fafc;border-left:1px solid #e2e8f0cc}.exam-wrapper{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--r-xl);margin:clamp(var(--space-4), 3vw, var(--space-8));max-width:1360px;overflow:hidden;box-shadow:0 18px 46px #0f172a14}.grid-2{gap:var(--space-4);grid-template-columns:repeat(2,1fr);display:grid}.grid-3{gap:var(--space-4);grid-template-columns:repeat(3,1fr);display:grid}.flex{display:flex}.flex-col{flex-direction:column;display:flex}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-end{justify-content:flex-end}.gap-1{gap:var(--space-1)}.gap-2{gap:var(--space-2)}.gap-3{gap:var(--space-3)}.gap-4{gap:var(--space-4)}.gap-5{gap:var(--space-5)}.gap-6{gap:var(--space-6)}.mb-1{margin-bottom:var(--space-1)}.mb-2{margin-bottom:var(--space-2)}.mb-3{margin-bottom:var(--space-3)}.mb-4{margin-bottom:var(--space-4)}.mb-5{margin-bottom:var(--space-5)}.mb-6{margin-bottom:var(--space-6)}.mb-8{margin-bottom:var(--space-8)}.mt-4{margin-top:var(--space-4)}.mt-6{margin-top:var(--space-6)}.mt-8{margin-top:var(--space-8)}.w-full{width:100%}.flex-1{flex:1}.mobile-topbar{z-index:40;background:var(--white);border-bottom:1px solid var(--gray-100);align-items:center;gap:var(--space-3);height:56px;padding:0 var(--space-4);box-shadow:var(--shadow-sm);display:none;position:fixed;top:0;left:0;right:0}.hamburger-btn{border-radius:var(--r-sm);border:1.5px solid var(--gray-200);background:var(--white);cursor:pointer;width:36px;height:36px;color:var(--gray-700);flex-shrink:0;justify-content:center;align-items:center;display:flex}.sidebar-close-btn{top:var(--space-4);right:var(--space-4);border-radius:var(--r-sm);border:1.5px solid var(--gray-200);background:var(--white);cursor:pointer;width:32px;height:32px;color:var(--gray-500);justify-content:center;align-items:center;font-size:16px;display:none;position:absolute}.sidebar-overlay{z-index:45;background:#0006;display:none;position:fixed;inset:0}.sidebar-overlay.open{display:block}@media (max-width:1023px){.main-content{padding:var(--space-6)}.stat-grid,.grid-3{grid-template-columns:repeat(2,1fr)}.exam-layout{grid-template-columns:minmax(0,1fr) 236px}.exam-nav-panel{padding:var(--space-4)}}@media (max-width:767px){.mobile-topbar,.sidebar-close-btn{display:flex}.sidebar-collapse-btn{display:none}.sidebar{z-index:50;transition:transform .25s;transform:translate(-240px)}.sidebar.open{box-shadow:var(--shadow-lg);transform:translate(0)}.main-content{max-width:100vw;padding:var(--space-4);padding-top:calc(56px + var(--space-4));margin-left:0}.stat-grid{gap:var(--space-3);grid-template-columns:repeat(2,1fr)}.grid-2,.grid-3{grid-template-columns:1fr}.question-card{padding:var(--space-5)}.question-text{margin-bottom:var(--space-5);font-size:15px}.question-shell{padding:0}.stat-value{font-size:22px}.exam-wrapper{border-radius:var(--r-lg);margin:0}.exam-layout{grid-template-columns:1fr}.exam-q-area{border-right:none;border-bottom:1px solid var(--gray-100);padding:var(--space-5)}.exam-nav-panel{padding:var(--space-4);border-left:none}.exam-header{padding:var(--space-3) var(--space-4);border-radius:0;grid-template-columns:1fr auto}.exam-header>.exam-timer{justify-self:end}.exam-header>:last-child{grid-column:1/-1;justify-self:stretch}.exam-timer{padding:7px 12px;font-size:20px}.exam-q-nav{padding:var(--space-3);grid-template-columns:repeat(auto-fill,minmax(36px,1fr))}.analysis-banner{gap:var(--space-3)!important;flex-direction:column!important}}