:root{--ink:#10233F;--bg:#EEF3FA;--pri:#1F4FFF;--acc:#FFB000;--ok:#0A7A3D;--bad:#B3261E;--line:#C9D5E8}
*{box-sizing:border-box}
html,body{margin:0}
body{font:21px/1.45 "Trebuchet MS",Verdana,sans-serif;color:var(--ink);background:var(--bg) linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:32px 32px;-webkit-text-size-adjust:100%}
#app{max-width:760px;margin:0 auto;padding:20px 16px 130px}
h1{font-size:32px;line-height:1.2;margin:8px 0 12px}
h2{font-size:26px;margin:18px 0 10px}
small,.sm{font-size:19px;color:#334A6E}
button,select,input{font:inherit;color:inherit}
button{font-size:20px;min-height:56px;padding:10px 18px;border:2px solid var(--ink);border-radius:12px;background:#fff;font-weight:700;cursor:pointer;margin:6px 6px 6px 0}
button.p{background:var(--pri);color:#fff;border-color:var(--pri)}
button.main{font-size:23px;min-height:64px;width:100%;background:var(--acc);border-color:var(--ink)}
button:disabled{opacity:.45;cursor:not-allowed}
button:focus-visible,input:focus-visible,select:focus-visible{outline:4px solid #7A3CFF;outline-offset:2px}
input,select{font-size:21px;min-height:58px;padding:8px 14px;border:2px solid var(--ink);border-radius:12px;background:#fff;width:100%;margin:6px 0}
.card{background:#fff;border:2px solid var(--ink);border-radius:16px;padding:18px;margin:12px 0}
.bar{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:19px;font-weight:700}
.q{font-size:32px;font-weight:700;margin:10px 0;overflow-wrap:anywhere}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.chip{border:2px solid var(--ink);border-radius:10px;padding:6px 14px;font-size:26px;font-weight:700;background:#F6F9FF}
.chip.u{background:var(--acc)}
.dots{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin:8px 0}
.dot{width:22px;height:22px;border-radius:50%;background:var(--pri)}
.dot.b{background:var(--acc);border:2px solid var(--ink)}
.dot.x{background:#fff;border:2px dashed var(--bad)}
.opts{display:flex;flex-wrap:wrap;gap:6px}
.opts button{flex:1 1 150px;font-size:23px}
.opts button.w{border-color:var(--bad);text-decoration:line-through}
#fb{font-size:21px;margin:10px 0;font-weight:700}
#fb.ok{color:var(--ok)}#fb.no{color:var(--bad)}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.grid button{width:100%;margin:0}
.node{display:flex;gap:12px;align-items:center;border:2px solid var(--ink);border-radius:14px;background:#fff;padding:10px 14px;margin:8px 0}
.node b{font-size:26px}
.node.lock{opacity:.5;border-style:dashed}
.node.cur{border-color:var(--pri);border-width:4px}
.bdg{display:flex;gap:12px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.bdg.off{opacity:.45}
.pg{height:18px;border:2px solid var(--ink);border-radius:9px;background:#fff;overflow:hidden}.pg i{display:block;height:100%;background:var(--pri);transition:width .4s}
#nav{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:2px solid var(--ink);display:flex;gap:6px;padding:8px;justify-content:center}
#nav button{font-size:19px;min-height:56px;flex:1;max-width:240px;margin:0}
#toast{pointer-events:none;position:fixed;top:12px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:12px 20px;border-radius:12px;font-size:19px;display:none;z-index:9;max-width:90%}
.pop{animation:pop .25s ease-out}@keyframes pop{from{transform:scale(.96);opacity:.4}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}