:root{--blue:#0b4fd8;--blue-2:#315df5;--blue-soft:#eef5ff;--ink:#12203a;--muted:#66758d;--line:#dce6f2;--surface:#fff;--bg:#f3f6fb;--green:#0b8f63;--green-soft:#e9f9f1;--orange:#a65f08;--orange-soft:#fff5e6;--red:#b33030;--red-soft:#fff0f0;--shadow:0 18px 50px rgba(31,58,104,.10);--shadow-sm:0 8px 28px rgba(31,58,104,.07)}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--ink)}body{margin:0;min-width:320px}button,input,textarea,select{font:inherit}button,a{-webkit-tap-highlight-color:transparent}[hidden]{display:none!important}
.offline-app{min-height:100vh;background:radial-gradient(circle at 88% -6%,rgba(91,142,255,.22),transparent 30%),linear-gradient(180deg,#f8fbff 0,#f2f6fb 38%,#eef3f8 100%);color:var(--ink)}
.offline-header{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:72px;padding:10px clamp(14px,3vw,42px);border-bottom:1px solid rgba(207,221,238,.9);background:rgba(255,255,255,.94);box-shadow:0 5px 20px rgba(31,58,104,.05);backdrop-filter:blur(14px)}
.offline-brand{display:flex;align-items:center;gap:11px;min-width:0;color:inherit;text-decoration:none}.offline-brand-mark{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border-radius:13px;background:linear-gradient(145deg,var(--blue),#4338ca);color:#fff;font-size:20px;font-weight:900;box-shadow:0 9px 22px rgba(11,79,216,.22)}.offline-brand-copy{display:flex;min-width:0;flex-direction:column}.offline-brand-copy b{font-size:14px;line-height:1.2}.offline-brand-copy small{margin-top:3px;color:#76849a;font-size:11px}.offline-header-status{display:flex;align-items:center;gap:9px}.network-badge{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:8px 11px;border-radius:11px;background:#f3f6fa;color:#596980;font-size:12px;font-weight:800;white-space:nowrap}.network-badge i{width:8px;height:8px;border-radius:50%;background:#94a3b8}.network-badge.online{background:var(--green-soft);color:#087652}.network-badge.online i{background:#10b981;box-shadow:0 0 0 4px rgba(16,185,129,.13)}.network-badge.offline{background:var(--orange-soft);color:var(--orange)}.network-badge.offline i{background:#f59e0b;box-shadow:0 0 0 4px rgba(245,158,11,.13)}.offline-timer{display:grid;place-items:center;min-width:92px;min-height:38px;padding:7px 11px;border-radius:11px;background:#0a214c;color:#fff;font-size:15px;font-weight:900;font-variant-numeric:tabular-nums;letter-spacing:.03em}
.offline-container{width:min(1220px,calc(100% - 28px));margin:0 auto;padding:30px 0 68px}.panel{border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:var(--shadow-sm)}
.offline-gate{width:min(760px,100%);margin:clamp(16px,5vh,58px) auto 0;padding:clamp(24px,5vw,42px);text-align:center;box-shadow:var(--shadow)}.gate-icon{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 18px;border-radius:20px;background:linear-gradient(145deg,#e8f2ff,#eeecff);font-size:29px}.eyebrow{margin:0;color:var(--blue);font-size:11px;font-weight:900;letter-spacing:.12em}.offline-gate h1{margin:10px auto 8px;font-size:clamp(26px,4vw,36px);line-height:1.12;letter-spacing:-.03em}.gate-subtitle{max-width:620px;margin:0 auto;color:var(--muted);font-size:14px;line-height:1.65}.offline-meta{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin:18px 0 0}.offline-meta>b,.offline-meta>span{display:inline-flex;align-items:center;min-height:31px;padding:6px 10px;border:1px solid #e0e8f3;border-radius:10px;background:#f8fafd;color:#53657d;font-size:12px}.offline-meta>b{background:#eef5ff;color:#174d99}
.key-area{width:min(610px,100%);margin:24px auto 0;text-align:left}.key-area>label{display:block;margin:0 0 7px;color:#2c3d56;font-size:13px;font-weight:800}.key-area>small{display:block;margin-top:8px;color:#7a879a;font-size:11.5px;line-height:1.5}.key-controls{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px}.control{width:100%;min-width:0;min-height:48px;padding:10px 13px;border:1px solid #cfdbea;border-radius:11px;outline:0;background:#fff;color:var(--ink);font-size:14px;transition:.16s}.control:focus{border-color:#78a9ff;box-shadow:0 0 0 4px rgba(11,79,216,.10)}
.button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:42px;padding:9px 14px;border:1px solid transparent;border-radius:10px;cursor:pointer;text-decoration:none;font-size:13px;font-weight:850;line-height:1.2;transition:transform .12s,box-shadow .12s,background .12s,border-color .12s}.button:hover:not(:disabled){transform:translateY(-1px)}.button:active:not(:disabled){transform:translateY(0)}.button:focus-visible{outline:3px solid rgba(49,93,245,.22);outline-offset:2px}.button:disabled{cursor:not-allowed;opacity:.48;transform:none!important;box-shadow:none!important}.button-primary{border-color:#0b4fd8;background:linear-gradient(180deg,#1765e5,#0b4fd8);color:#fff;box-shadow:0 8px 18px rgba(11,79,216,.18)}.button-primary:hover:not(:disabled){background:linear-gradient(180deg,#0f5ad3,#073fae)}.button-secondary{border-color:#d5dfeb;background:#fff;color:#344860}.button-secondary:hover:not(:disabled){border-color:#b7c9dd;background:#f8fbff}.button-success{border-color:#07845b;background:linear-gradient(180deg,#12a574,#07845b);color:#fff;box-shadow:0 8px 18px rgba(7,132,91,.18)}.button-large{min-height:48px;padding:11px 20px;font-size:14px}.button-small{min-height:36px;padding:7px 10px;font-size:12px}.button-full{width:100%;min-height:47px}.icon-button{min-width:66px}.gate-actions{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:13px}
.system-alert{width:min(610px,100%);margin:15px auto 0;padding:12px 14px;border:1px solid #cfe0f6;border-radius:11px;background:#eff6ff;color:#26568f;text-align:left;font-size:13px;line-height:1.55}.system-alert.success{border-color:#c8eadb;background:#eefaf4;color:#12704f}.system-alert.warn{border-color:#f3ddb9;background:#fff7e9;color:#8b570e}.system-alert.danger{border-color:#efcccc;background:#fff1f1;color:#a63333}.sync-explainer{display:flex;align-items:flex-start;gap:12px;width:min(610px,100%);margin:24px auto 0;padding:14px;border-radius:13px;background:#f5f8fc;text-align:left}.sync-icon{display:grid;place-items:center;flex:0 0 30px;width:30px;height:30px;border-radius:10px;background:#e6f8ef;color:var(--green);font-weight:900}.sync-explainer b{display:block;color:#23456f;font-size:12.5px}.sync-explainer p{margin:4px 0 0;color:#697a90;font-size:12px;line-height:1.55}
.offline-workspace{display:grid}.offline-workspace,.offline-workspace *{min-width:0}.offline-workspace>.offline-workgrid{display:contents}.offline-workspace{grid-template-columns:minmax(0,1fr) 310px;gap:16px}.exam-main-column{min-width:0}.exam-side-column{display:grid;align-content:start;gap:13px}.exam-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:12px;padding:13px 15px}.exam-toolbar .eyebrow{font-size:9.5px}.exam-toolbar b{display:block;margin-top:3px;font-size:14px}.toolbar-actions{display:flex;align-items:center;justify-content:flex-end;gap:9px}.mini-status{color:#728097;font-size:11px}.question-card{min-height:430px;padding:clamp(20px,3vw,30px);border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:var(--shadow-sm)}.offline-qhead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;padding-bottom:13px;border-bottom:1px solid #e8eef5;color:#6b7b91;font-size:12px;font-weight:800}.qtitle{margin:0 0 20px;color:#17243a;font-size:18px;font-weight:650;line-height:1.75;white-space:pre-wrap;overflow-wrap:anywhere}.qmedia{margin:0 0 20px;text-align:center}.qmedia img,.qmedia video{display:block;max-width:100%;max-height:460px;margin:auto;border-radius:12px}.qmedia audio{width:100%}.option{display:flex;align-items:flex-start;gap:11px;margin:9px 0;padding:13px 14px;border:1px solid #dce5ef;border-radius:12px;background:#fff;cursor:pointer;color:#27384f;font-size:14px;line-height:1.55;transition:.14s}.option:hover{border-color:#96baff;background:#f7faff}.option:has(input:checked){border-color:#6c9ef7;background:#eef5ff;box-shadow:inset 0 0 0 1px rgba(11,79,216,.08)}.option input{flex:0 0 auto;width:18px;height:18px;margin:2px 0 0;accent-color:var(--blue)}.option span{min-width:0;overflow-wrap:anywhere}.option b{margin-right:4px;color:#143f83}.grid{display:grid;gap:10px}.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.textarea,.select,.question-card .input{width:100%;min-height:46px;padding:11px 13px;border:1px solid #cfdbea;border-radius:11px;outline:0;background:#fff;color:#17243a;font-size:14px}.textarea{min-height:190px;resize:vertical;line-height:1.6}.textarea:focus,.select:focus,.question-card .input:focus{border-color:#78a9ff;box-shadow:0 0 0 4px rgba(11,79,216,.10)}.alert{margin:0 0 12px;padding:10px 12px;border-radius:10px;font-size:12px;line-height:1.5}.alert.info{background:#eef5ff;color:#26568f}.matching-list{display:grid;gap:10px}.offline-match{display:grid;grid-template-columns:minmax(0,1fr) minmax(190px,.8fr);gap:12px;align-items:center;padding:13px;border:1px solid #e0e8f1;border-radius:12px;background:#fafcff}.offline-match>div{display:grid;gap:4px}.offline-match small{color:#7a8798;font-size:10px;text-transform:uppercase;letter-spacing:.08em}.offline-match b{font-size:13.5px;line-height:1.45}
.exam-navigation{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;margin-top:12px;padding:11px 12px}.save-indicator{display:flex;align-items:center;justify-content:center;gap:7px;color:#65758b;font-size:11.5px;text-align:center}.save-indicator i{flex:0 0 8px;width:8px;height:8px;border-radius:50%;background:#10b981;box-shadow:0 0 0 3px rgba(16,185,129,.12)}.save-indicator.error i{background:#ef4444}.navigation-panel,.submit-panel{padding:17px}.exam-side-column .panel{position:sticky;top:88px}.exam-side-column .submit-panel{top:auto;position:static}.side-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}.side-heading h2{margin:3px 0 0;font-size:15px}.answered-count,.submit-network{display:inline-flex;align-items:center;min-height:28px;padding:5px 8px;border-radius:8px;background:#f2f6fb;color:#5d6f87;font-size:10.5px;font-weight:800}.submit-network.online{background:var(--green-soft);color:#087652}.submit-network.offline{background:var(--orange-soft);color:var(--orange)}.question-palette{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:14px}.pbtn{display:grid;place-items:center;aspect-ratio:1/1;min-height:40px;border:1px solid #d9e3ee;border-radius:9px;background:#fff;color:#5d6d82;cursor:pointer;font-size:12px;font-weight:850}.pbtn:hover{border-color:#91b5f4;background:#f7faff}.pbtn.answered{border-color:#73c8a8;background:#ecfaf3;color:#087652}.pbtn.active{border-color:#0b4fd8;background:#0b4fd8;color:#fff;box-shadow:0 6px 14px rgba(11,79,216,.18)}.pbtn.active.answered{background:#0b4fd8;color:#fff}.palette-legend{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px;color:#728198;font-size:10px}.palette-legend span{display:inline-flex;align-items:center;gap:5px}.palette-legend i{width:8px;height:8px;border-radius:3px}.legend-current{background:#0b4fd8}.legend-answered{background:#73c8a8}.legend-empty{border:1px solid #cfdbe8;background:#fff}.submit-panel p{margin:13px 0 10px;color:#66758b;font-size:12px;line-height:1.55}.submit-panel>small{display:block;margin-top:9px;color:#7b8899;font-size:10.5px;line-height:1.5}
.offline-package-list{display:grid;gap:10px;width:100%;margin-top:4px;text-align:left}.offline-package-card{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;padding:14px 15px;border:1px solid #dce6f2;border-radius:13px;background:#f9fbfe;color:#17243a;text-decoration:none;transition:.14s}.offline-package-card:hover{border-color:#94b9f8;background:#f0f6ff}.offline-package-card>span:first-child{display:grid;gap:4px}.offline-package-card b{font-size:13.5px}.offline-package-card small{color:#75849a;font-size:11px}.package-status{padding:6px 8px;border-radius:8px;background:#eef5ff;color:#24599f;font-size:10px;font-weight:850}.package-status.done{background:#eaf9f1;color:#087652}.empty-packages{padding:18px;border:1px dashed #cfdae7;border-radius:12px;background:#fafcff;color:#6c7b91;text-align:center;font-size:13px;line-height:1.55}
.offline-done{width:min(650px,100%);margin:clamp(30px,8vh,90px) auto 0;padding:38px;text-align:center;box-shadow:var(--shadow)}.done-icon{display:grid;place-items:center;width:66px;height:66px;margin:0 auto 17px;border-radius:50%;background:#e7f9ef;color:#079663;font-size:31px;font-weight:900}.offline-done h1{margin:8px 0 7px;font-size:30px;letter-spacing:-.03em}.offline-done>p:not(.eyebrow){margin:0;color:#68788e;font-size:13.5px}.done-actions{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:22px}
@media(max-width:980px){.offline-workspace{grid-template-columns:1fr}.exam-side-column{grid-template-columns:1fr 1fr}.exam-side-column .panel{position:static}.question-palette{grid-template-columns:repeat(10,minmax(0,1fr))}.question-card{min-height:360px}}
@media(max-width:700px){.offline-header{min-height:64px;padding:8px 11px}.offline-brand-mark{width:38px;height:38px;flex-basis:38px}.offline-brand-copy small{display:none}.offline-brand-copy b{font-size:12.5px}.network-badge{padding:7px 8px}.network-badge span{display:none}.offline-timer{min-width:76px;min-height:35px;font-size:13px}.offline-container{width:min(100% - 18px,1220px);padding-top:14px}.offline-gate{margin-top:6px;padding:24px 17px;border-radius:17px}.gate-icon{width:54px;height:54px;border-radius:17px;font-size:25px}.offline-gate h1{font-size:25px}.gate-subtitle{font-size:13px}.key-controls{grid-template-columns:minmax(0,1fr) auto}.key-controls .button-primary{grid-column:1/-1;width:100%}.key-area>small{font-size:10.5px}.gate-actions .button{flex:1}.sync-explainer{padding:12px}.exam-toolbar{padding:10px 11px}.mini-status{display:none}.question-card{min-height:330px;padding:18px 15px;border-radius:14px}.qtitle{font-size:16px;line-height:1.65}.option{padding:12px 11px;font-size:13.5px}.grid-2{grid-template-columns:1fr}.offline-match{grid-template-columns:1fr}.exam-navigation{grid-template-columns:1fr 1fr}.save-indicator{grid-column:1/-1;grid-row:1;justify-content:flex-start}.exam-navigation #offlinePrev{grid-column:1}.exam-navigation #offlineNext{grid-column:2}.exam-side-column{grid-template-columns:1fr}.question-palette{grid-template-columns:repeat(5,minmax(0,1fr))}.navigation-panel,.submit-panel{padding:15px}.offline-done{padding:30px 18px}.done-actions .button{width:100%}}
@media(max-width:390px){.offline-brand-copy{display:none}.offline-header-status{gap:6px}.offline-container{width:min(100% - 12px,1220px)}.offline-gate{padding:20px 13px}.key-controls{grid-template-columns:1fr}.key-controls .icon-button{grid-row:2;grid-column:1}.key-controls .button-primary{grid-row:3}.question-card{padding:16px 12px}.button{font-size:12px;padding-left:10px;padding-right:10px}.exam-navigation{gap:7px}.pbtn{min-height:38px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}