*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font:21px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:#2a2352;background:linear-gradient(160deg,#fff3d1,#ffd8ea 45%,#d3eaff) fixed;min-height:100vh}
#app{max-width:1100px;margin:0 auto;padding:0 14px 40px}
.top{display:flex;gap:12px;align-items:center;padding:12px 0;font-size:19px}
h1{font-size:32px;line-height:1.2;margin:.3em 0}h2{font-size:26px;line-height:1.25;margin:.2em 0}h3{font-size:26px;margin:.4em 0}
.sm{font-size:19px;color:#5b4f86;margin:.3em 0}
.hero,.panel{background:#fff;border-radius:24px;padding:20px;box-shadow:0 10px 30px rgba(80,50,140,.18);margin:12px 0}
.hero{background:linear-gradient(135deg,#6a4fd8,#e0529c);color:#fff}.hero .sm{color:#fff}
.pg{height:16px;background:rgba(255,255,255,.35);border-radius:9px;overflow:hidden}.pg i{display:block;height:100%;background:#ffd23f;border-radius:9px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;margin:18px 0}
.card{background:#fff;border-radius:22px;overflow:hidden;box-shadow:0 8px 24px rgba(80,50,140,.2);display:flex;flex-direction:column;transition:transform .2s}.card:hover{transform:translateY(-4px)}
.card img,.pic{width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;display:block;background:#1d1744}
.cb{padding:14px 16px 18px}
.b{font:inherit;font-size:20px;font-weight:700;min-height:56px;padding:10px 20px;border:0;border-radius:16px;background:#fff;color:#4b2fb8;border:3px solid #6a4fd8;cursor:pointer;margin:5px 4px 5px 0}
.b:disabled{opacity:.55;cursor:default}.b:active{transform:scale(.97)}
.pri{font-size:23px;min-height:64px;background:#ff8a1f;border-color:#ff8a1f;color:#fff;box-shadow:0 6px 14px rgba(255,138,31,.4)}
.ghost{border-color:#b9b0d8;color:#5b4f86}.on{background:#6a4fd8;color:#fff}
.pic{border-radius:20px;box-shadow:0 10px 30px rgba(0,0,0,.3)}
.txt{font-size:22px}.ref{font-size:19px;color:#6a4fd8;font-weight:700}
.ctl{display:flex;flex-wrap:wrap;gap:4px;margin:8px 0}.stt{font-size:19px;min-height:30px;color:#b3261e;font-weight:600}.stt.g{color:#2a7d3f}
.nav{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;margin-top:10px}
.opt{display:block;width:100%;text-align:left;margin:8px 0}.opt.ok{background:#2ea64d;border-color:#2ea64d;color:#fff}.opt.no{background:#ffe1e1;border-color:#e07a7a;color:#7a1c1c}
.fb{font-size:21px;margin:10px 0;font-weight:600}
footer{margin-top:20px;display:flex;flex-wrap:wrap;gap:8px}
@media(max-width:700px){.grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
.mg{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:10px 0}.mg.two{grid-template-columns:repeat(2,1fr)}
.mc{position:relative;padding:0;border:3px solid #6a4fd8;border-radius:14px;overflow:hidden;background:#6a4fd8;cursor:pointer;aspect-ratio:16/9;min-height:56px}
.mc img{width:100%;height:100%;object-fit:contain;display:none;background:#1d1744}.mc.up img{display:block}.mc .bk{color:#fff;font-size:30px;font-weight:800}.mc.up .bk{display:none}
.mc.done{border-color:#2ea64d}.nb{position:absolute;top:4px;left:4px;background:#ff8a1f;color:#fff;border-radius:50%;width:36px;height:36px;display:grid;place-items:center;font-weight:800}
@media(max-width:700px){.mg{grid-template-columns:repeat(2,1fr)}}