*,:before,:after{box-sizing:border-box}:root{--bg1:#13294b;--bg2:#1c3f69;--panel:#fff;--text:#0f172a;--muted:#6b7280;--ring:#e5e7eb;--primary:#3066f0;--primary-dark:#1f4ed1}html,body{height:100%}body{color:var(--text);background:linear-gradient(to right, var(--bg1), var(--bg2));-webkit-user-select:none;user-select:none;margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Noto Sans Thai,sans-serif}#loginCard.login-screen{z-index:10;align-items:stretch;width:100vw;height:100vh;margin:0;padding:0;display:flex;position:fixed;inset:0;max-width:none!important}.hero-left{background:url(../bg-login.jpg) 50%/cover no-repeat;flex:0 0 55%;position:relative}.hero-left:after{content:"";background:linear-gradient(#0000 65%,#162a5259);position:absolute;inset:0}.login-right{flex:1;justify-content:center;align-items:center;padding:24px;display:flex}.login-container{text-align:center;isolation:isolate;-webkit-backdrop-filter:blur(40px)saturate(200%);background:linear-gradient(#fffffff2 0%,#ffffffd9 35%,#fff6 65%,#ffffff26 100%) padding-box padding-box,linear-gradient(#fff 0%,#0009 100%) border-box;border:1px solid #0000;border-radius:36px;width:100%;max-width:480px;padding:3rem 2.5rem;position:relative;box-shadow:0 30px 60px #0000001f,inset 0 0 0 1px #ffffffe6,inset 0 20px 40px #fff6}.login-header .login-logo-row{justify-content:center;align-items:center;gap:15px;margin-bottom:20px;display:flex}.profile-icon{object-fit:contain;width:80px;height:80px}.profile-icon-extra{width:110px}.login-header h1{color:#0f172a;margin:10px 0 5px;font-size:26px;font-weight:800}.login-header h2{color:#1e3a8a;margin:0 0 15px;font-size:16px;font-weight:600}.login-header p{color:#475569;margin-bottom:25px;font-size:14px}.custom-error-box{color:#b91c1c;background:#fee2e2;border-radius:12px;margin-bottom:20px;padding:10px;font-size:14px}.custom-error-box.hidden{display:none!important}.inputlogin-group{margin-bottom:16px;position:relative}.inputlogin-group input{color:#333;background:#e2e8f0;border:none;border-radius:20px;outline:none;width:100%;height:54px;padding:0 20px 0 50px;font-size:16px;transition:box-shadow .2s}.inputlogin-group input:focus{box-shadow:0 0 0 3px #2563eb4d}.inputlogin-icon{pointer-events:none;align-items:center;display:flex;position:absolute;top:50%;left:18px;transform:translateY(-50%)}#loginBtn{color:#fff;cursor:pointer;background:#2563eb;border:none;border-radius:20px;justify-content:center;align-items:center;gap:10px;width:100%;height:56px;margin-top:10px;font-size:18px;font-weight:700;transition:background .2s;display:flex}#loginBtn:hover{background:#1d4ed8}#loginCard.hidden,.hidden{display:none!important}.container{max-width:980px;margin:32px auto;padding:0 16px}.card{background:#fff;border-radius:16px;padding:20px;box-shadow:0 6px 24px #00000014}.topbar{justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;display:flex}.badge{color:#334;background:#f1f5f9;border-radius:999px;padding:6px 10px;font-size:14px;display:inline-block}.app-card{background:#fff;border-radius:24px;width:calc(100% - 32px);max-width:1100px;margin:16px auto;padding:24px 28px 28px;box-shadow:0 18px 48px #0000002e}.site-topbar{z-index:50;background:#fff;border-radius:24px;width:calc(100% - 32px);max-width:1100px;margin:16px auto;position:sticky;top:16px;box-shadow:0 10px 30px #0003}.tb-inner{justify-content:space-between;align-items:center;gap:16px;padding:12px 24px;display:flex}.tb-left{align-items:center;gap:14px;min-width:0;display:flex}.tb-logo{object-fit:contain;width:auto;height:56px}.tb-title{letter-spacing:.3px;color:#1e293b;font-size:21px;font-weight:800}.tb-logout{white-space:nowrap}.app-header{border-bottom:1px solid #e5e7eb;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:16px;padding-bottom:12px;display:flex}.app-title{color:#0f172a;margin:0 0 6px;font-size:32px;font-weight:900}.identity{align-items:center;gap:10px;display:flex}.identity--wrap{white-space:normal;flex-wrap:wrap;overflow:visible}.identity--wrap>*{flex:none}@media (width<=900px){.app-header{flex-direction:column;gap:10px;padding-bottom:16px}.tb-inner{padding:10px}}@media (width<=1024px){.hero-left{display:none}#loginCard.login-screen{background:linear-gradient(120deg, var(--bg1), var(--bg2))}}@media (width<=900px){.tb-title{font-size:18px}.app-title{font-size:26px}}.spin-icon{animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.exam-info{flex-direction:column;gap:4px;display:flex}.exam-info-title{color:#0f172a;font-size:18px;font-weight:800}.exam-info-meta{color:#64748b;flex-wrap:wrap;gap:8px;font-size:14px;display:flex}body{-webkit-user-select:none;user-select:none}input,textarea{-webkit-user-select:auto;user-select:auto}.exam-img{border-radius:8px;max-width:100%;margin-top:10px;display:block}.img-wrap{margin-top:10px}.img-error{color:#b91c1c;background:#fef2f2;border:1px solid #fca5a5;border-radius:8px;margin-top:10px;padding:10px 14px;font-size:.9rem}.zoom-controls{gap:8px;margin-left:auto;display:flex}.zoom-btn{color:#334155;cursor:pointer;background:#f1f5f9;border:1px solid #cbd5e1;border-radius:6px;padding:4px 10px;font-weight:600;transition:all .2s}.zoom-btn:hover{background:#e2e8f0}.head-left{flex-direction:column;min-width:0;display:flex}.identity .avatar{object-fit:cover;border:2px solid #e5e7eb;border-radius:50%;width:56px;height:56px;box-shadow:0 3px 10px #00000014}.meta-list{flex-wrap:wrap;gap:10px;display:flex}.chip{color:#334155;background:#f8fafc;border:1px solid #e5e7eb;border-radius:999px;align-items:center;gap:8px;padding:8px 12px;font-weight:700;line-height:1;display:inline-flex}.chip .ico{opacity:.85;width:16px;height:16px}.btn-logout{cursor:pointer;color:#fff;letter-spacing:.3px;background:linear-gradient(#ef4444,#b91c1c);border:0;border-radius:12px;align-items:center;gap:10px;padding:12px 18px;font-weight:800;display:inline-flex;box-shadow:0 8px 18px #b91c1c40}.btn-logout .ico{width:18px;height:18px}@media (width<=900px){.app-header{flex-direction:column;align-items:stretch;gap:12px}.app-title{font-size:28px}.identity{align-items:flex-start}}.controls{grid-template-columns:1fr 260px;gap:16px;margin-top:18px;display:grid}.controls .field label{color:#334155;margin-bottom:6px;font-size:14px;display:block}.controls select{border:1px solid #e5e7eb;border-radius:12px;width:100%;padding:12px 14px;font-size:16px}.controls .field.align-end{flex-direction:column;justify-content:flex-end;display:flex}.btn-block{width:100%;height:56px}.progress{flex-wrap:wrap;gap:10px;margin:18px 0 8px;display:flex}.pill{color:#334155;appearance:none;cursor:pointer;-webkit-user-select:none;user-select:none;background:#f8fafc;border:1px solid #e2e8f0;border-radius:999px;justify-content:center;align-items:center;width:36px;height:36px;font-weight:800;transition:transform 60ms,box-shadow .15s,filter .15s;display:flex}.pill:hover{filter:brightness(.98)}.pill:active{transform:translateY(1px)}.pill:focus-visible{outline-offset:3px;outline:3px solid #0ea5e9}.pill.answered{color:#fff;background:#2563eb;border-color:#2563eb;box-shadow:0 6px 14px #2563eb59}.pill.current{outline-offset:2px;outline:2px solid #1e293b}.q{background:#f8fafc;border:1px solid #e2e8f0;border-radius:16px;margin-top:16px;padding:16px;box-shadow:0 1px 2px #0f172a08}.qhead{align-items:flex-start;gap:12px;margin-bottom:10px;display:flex}.qno{color:#0369a1;text-align:center;background:#e0f2fe;border-radius:999px;flex:none;min-width:58px;padding:4px 10px;font-size:.92rem;font-weight:700}.qtitle{font-size:calc(1.1rem * var(--text-scale,1));color:#0f172a;word-break:break-word;font-weight:600;line-height:1.65}.qimg{object-fit:contain;background:#fff;border-radius:12px;max-width:100%;height:auto;max-height:360px;margin:10px 0 2px;display:block}.opts{flex-direction:column;gap:12px;display:flex}.opt{background:#fff;border:1px solid #e5e7eb;border-radius:14px;grid-template-columns:28px 1fr;align-items:start;gap:12px;padding:14px 16px;display:grid}.opt input[type=radio]{accent-color:#2563eb;width:22px;height:22px;margin-top:2px}@supports not (accent-color:auto){.opt input[type=radio]{transform-origin:0 0;transform:scale(1.25)}}.opt .opt-text{font-size:calc(1.05rem * var(--text-scale,1));line-height:1.6}.oimg{border-radius:8px;max-width:100%;height:auto;margin-top:8px;display:block}.actions{flex-wrap:wrap;align-items:center;gap:12px;margin-top:18px;display:flex}.nav-group{flex-wrap:wrap;gap:10px;display:flex}.btn,.btn-primary,.btn-success,.btn-outline{cursor:pointer;border:1px solid #0000;border-radius:12px;padding:12px 18px;font-weight:800}.btn{background:#f1f5f9;border-color:#e5e7eb}.btn-primary{color:#fff;background:#3066f0;box-shadow:0 8px 18px #3066f059}.btn-success{color:#fff;background:#16a34a;box-shadow:0 8px 18px #16a34a59}.btn-outline{background:#fff;border-color:#cbd5e1}.btn:disabled,.btn-primary:disabled,.btn-success:disabled{opacity:.55;cursor:not-allowed}@media (width<=900px){.controls{grid-template-columns:1fr}.btn-block{height:52px}.app-header .title h2{font-size:28px}}.exam-topbar{justify-content:flex-end;margin:6px 0 14px;display:flex}#actionsGrid.actions-grid{justify-content:flex-end;gap:12px;margin-top:16px;display:flex}#actionsGrid.actions-grid>button{flex:0 0 220px}@media (width<=720px){.exam-topbar{justify-content:space-between}#actionsGrid.actions-grid{flex-direction:column;align-items:stretch}#actionsGrid.actions-grid>button{flex:auto;width:100%}}.actions-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:18px;display:grid}.actions-grid .btn,.actions-grid .btn-primary,.actions-grid .btn-success{justify-content:center;align-items:center;width:100%;height:56px;font-size:16px;display:inline-flex}.app-title{letter-spacing:.2px;color:#0f172a;margin:0 0 10px;font-size:34px}.identity{align-items:center;gap:14px;min-height:60px;display:flex}@media (width<=900px){.actions-grid{grid-template-columns:1fr}}.hidden{display:none!important}.meta-line{align-items:center;gap:10px;display:inline-flex}.avatar{object-fit:cover;border:2px solid #e5e7eb;border-radius:50%;width:40px;height:40px}.avatar--ph{color:#334155;background:#e5e7eb;justify-content:center;align-items:center;font-weight:800;display:inline-flex}body.is-loading{overflow:hidden}body.is-loading #appCard,body.is-loading #loginCard{pointer-events:none;-webkit-user-select:none;user-select:none;filter:blur(1.2px)brightness(.95)}.loading-box{border-radius:16px!important}.overlay-strong{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.sr-only{width:1px;height:1px;overflow:hidden;position:absolute!important;left:-99999px!important}.exam-topbar{justify-content:space-between;align-items:center;gap:12px;margin:10px 0 0;display:flex}.exam-timer{font-variant-numeric:tabular-nums;white-space:nowrap;background:#fff;border:2px solid #e5e7eb;border-radius:9999px;padding:4px 10px;font-weight:800;line-height:1}