:root{--ui-primary:#2563eb;--ui-focus:#f59e0b;--ui-border:#dce3ee;--ui-ink:#172033}
body{color:var(--ui-ink);background:#f4f6fb;line-height:1.6}main{max-width:1200px;margin:28px auto;padding:0 24px}header{padding:18px 28px;gap:20px}nav{display:flex;gap:16px;flex-wrap:wrap}nav a{margin:0}section.card{padding:30px;border:1px solid #e7ecf4;border-radius:18px;box-shadow:0 3px 14px #14213d06;margin-bottom:24px}h1,h2,h3{line-height:1.4;margin:0 0 20px}p{margin:0 0 18px}form{margin:0}button,a.btn{font-weight:600;line-height:1.45;min-height:44px;padding:12px 18px;transition:background .15s,box-shadow .15s,transform .15s}button{width:auto}button:hover,a.btn:hover{filter:brightness(.96)}button:disabled{opacity:.55;cursor:not-allowed}input:not([type=radio]):not([type=checkbox]):not([type=hidden]),select,textarea{border-color:var(--ui-border);border-radius:10px;padding:12px 14px}label{line-height:1.6}input[type=radio],input[type=checkbox]{appearance:none!important;-webkit-appearance:none!important;display:inline-grid!important;place-content:center;box-sizing:border-box!important;width:22px!important;height:22px!important;min-width:22px!important;min-height:22px!important;max-width:22px!important;padding:0!important;margin:2px 0!important;border:2px solid #8492a8!important;background:#fff;vertical-align:middle;flex:0 0 22px;cursor:pointer}input[type=checkbox]{border-radius:6px!important}input[type=radio]{border-radius:50%!important}input[type=checkbox]:checked,input[type=radio]:checked{border-color:var(--ui-primary)!important;background:var(--ui-primary)}input[type=checkbox]:checked::before{content:'';width:9px;height:5px;border-left:2px solid white;border-bottom:2px solid white;transform:translateY(-1px) rotate(-45deg)}input[type=radio]:checked::before{content:'';height:8px;width:8px;border-radius:50%;background:white}input[type=checkbox]:disabled,input[type=radio]:disabled{opacity:.45;cursor:not-allowed}label:has(>input[type=checkbox]),label:has(>input[type=radio]){display:flex;align-items:flex-start;gap:12px;cursor:pointer}.ui-option{border:1px solid var(--ui-border);background:#fff;border-radius:12px;padding:15px 18px;margin:0!important;transition:border-color .15s,background .15s}.ui-option:hover{background:#f8faff;border-color:#a6bbed}.ui-option:has(input:checked){background:#eff6ff;border-color:#2563eb}.ui-option:has(input:disabled){color:#718096;cursor:default}#answer-form>p{margin:0 0 12px}#answer-form>button{margin-top:12px}.ui-help{font-size:13px;color:#64748b;margin:16px 0 0}.ui-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:24px}.ui-return{display:inline-flex;align-items:center;padding:11px 18px;border:1px solid var(--ui-border);border-radius:10px;color:#334155;background:white;text-decoration:none;font-weight:600}:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:3px solid var(--ui-focus)!important;outline-offset:4px!important;box-shadow:none!important}.ui-skip{position:fixed;left:16px;top:12px;transform:translateY(-200%);z-index:9999;background:#172033;color:white;padding:10px 16px;border-radius:8px}.ui-skip:focus{transform:none}dialog.ui-dialog{width:min(640px,calc(100vw - 32px))!important;max-width:640px!important;max-height:85dvh!important;padding:0!important;border:1px solid #dce3ee!important;border-radius:20px!important;box-shadow:0 25px 90px #0f172a40;overflow:auto;color:var(--ui-ink)}dialog.ui-dialog::backdrop{background:#0f172a80;backdrop-filter:blur(4px)}.ui-dialog-head{position:sticky;top:0;background:#fff;display:flex;align-items:center;justify-content:space-between;padding:18px 24px;border-bottom:1px solid #e7ecf4;z-index:2}.ui-dialog-head strong{font-size:18px}.ui-dialog-head button{background:#f1f5f9;color:#334155;border:1px solid #e2e8f0;border-radius:10px;min-height:40px;padding:8px 14px;margin:0}.ui-dialog #retake-panel{border:0;border-radius:0;box-shadow:none;padding:24px;margin:0}.ui-dialog #retake-panel h1{font-size:22px;margin-bottom:10px}.ui-dialog #retake-panel h2{font-size:16px;color:#64748b;font-weight:500}.ui-dialog #retake-panel form>p{margin-bottom:10px}.ui-dialog #retake-panel form>button{width:100%;margin-top:16px}body.ui-modal-open{overflow:hidden}@media(max-width:650px){main{padding:0 14px}section.card{padding:20px}.ui-option{padding:13px}header{padding:16px}.ui-dialog-head{padding:16px}dialog.ui-dialog{max-height:90dvh!important}}@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}@media(forced-colors:active){input[type=checkbox],input[type=radio]{appearance:auto!important}input::before{display:none!important}}
