:root{--navy:#262457;--blue:#1565C0;--green:#6DBE45;--ink:#15213a;--mut:#5b6b82;--bg:#f4f7fc;--card:#fff;--line:#e3e9f3;--ok:#2e7d32;--okbg:#e8f5e9;--bad:#c62828;--badbg:#ffebee}
*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--ink);background:var(--bg);line-height:1.55}
a{color:var(--blue);text-decoration:none}a:hover{text-decoration:underline}
header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.bar{max-width:1040px;margin:0 auto;padding:8px 16px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:8px;font-weight:900;color:var(--navy);font-size:1.15rem}.logo img{width:38px;height:38px;border-radius:9px}
nav{display:flex;gap:4px;flex-wrap:wrap;margin-left:auto}nav a{padding:7px 10px;border-radius:10px;color:var(--navy);font-weight:600;font-size:.95rem}
nav a:hover{background:var(--bg);text-decoration:none}nav a.cta{background:var(--green);color:#fff}
main{max-width:1040px;margin:0 auto;padding:18px 16px 40px}
.crumbs{font-size:.88rem;color:var(--mut);margin-bottom:8px}.crumbs a{color:var(--mut)}
h1{font-size:1.7rem;margin:.2em 0 .3em;color:var(--navy)}h2{color:var(--navy);margin-top:1.6em}
.lead{color:var(--mut);margin-top:0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.tile{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;display:block;color:var(--ink)}
.tile:hover{border-color:var(--blue);text-decoration:none;box-shadow:0 4px 14px rgba(21,101,192,.12)}
.tile b{display:block;font-size:1.05rem;color:var(--navy)}.tile span{color:var(--mut);font-size:.9rem}.tile .ic{font-size:1.6rem}
.hero{background:linear-gradient(135deg,#0a3a86,var(--blue),#1E88E5);color:#fff;border-radius:22px;padding:22px;text-align:center;margin-bottom:22px}
.hero .brand{max-width:560px;margin:0 auto 14px;background:#fff;border-radius:18px;padding:8px}.hero .brand img{width:100%;display:block;border-radius:12px}
.hero p{color:#dbe8fb;max-width:620px;margin:0 auto 14px}.btn{display:inline-block;margin:5px;background:#fff;color:var(--blue);font-weight:800;padding:12px 22px;border-radius:14px}
.btn.alt{background:transparent;color:#fff;border:2px solid #fff}.btn:hover{text-decoration:none;opacity:.92}
.q{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;margin:12px 0}
.q .meta{font-size:.8rem;color:var(--mut);display:flex;gap:8px;flex-wrap:wrap}.pill{background:var(--bg);border-radius:20px;padding:1px 9px}
.pill.Easy{background:#e8f5e9;color:#2e7d32}.pill.Medium{background:#fff8e1;color:#8a6100}.pill.Hard{background:#ffebee;color:#b71c1c}
.q h3{font-size:1.02rem;margin:.4em 0 .7em;line-height:1.45}
.opt{display:block;width:100%;text-align:left;background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:10px 12px;margin:7px 0;font:inherit;cursor:pointer;color:var(--ink)}
.opt:hover{border-color:var(--blue)}.opt b{display:inline-block;width:1.6em;color:var(--navy)}
.opt.ok{background:var(--okbg);border-color:var(--ok)}.opt.bad{background:var(--badbg);border-color:var(--bad)}
.opt .tag{float:right;font-weight:800;font-size:.85rem}.opt.ok .tag{color:var(--ok)}.opt.bad .tag{color:var(--bad)}
.ans{display:none;margin-top:10px;background:var(--bg);border-radius:12px;padding:10px 12px;font-size:.95rem}.done .ans{display:block}
details.ans{display:block}noscript .ans{display:block}
.pager{display:flex;gap:6px;flex-wrap:wrap;margin:18px 0}.pager a,.pager span{padding:7px 12px;border-radius:10px;background:#fff;border:1px solid var(--line)}
.pager span{background:var(--navy);color:#fff;border-color:var(--navy)}
.appbox{background:#fff;border:2px dashed var(--green);border-radius:16px;padding:14px 16px;margin:18px 0}
.body h2{font-size:1.1rem}.body ul{padding-left:1.2em}
.az{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 18px}.az a{background:#fff;border:1px solid var(--line);border-radius:8px;padding:4px 10px;font-weight:700}
dl.gl dt{font-weight:800;color:var(--navy);margin-top:12px}dl.gl dd{margin:2px 0 0 0;color:var(--ink)}
footer{background:var(--navy);color:#cfd6ee;padding:22px 16px;text-align:center;font-size:.9rem}footer a{color:#fff}
.note{font-size:.85rem;color:var(--mut)}
@media(max-width:640px){h1{font-size:1.35rem}nav{margin-left:0}}