:root{--bg:#0B0A12;--card:#15131E;--card2:#1C1928;--line:#2A2537;--line2:#3A3448;--ink:#F3EEE2;--soft:#CFC8D8;--dim:#A9A2B8;--gold:#FFC24B;--teal:#5EEAD4;--coral:#F0684A;--violet:#B49CFF;--sign:#1E6B3A}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.app{margin:0;background:var(--bg);color:var(--ink);font:17px/1.55 Inter,Arial,sans-serif}
.app a{color:var(--gold)}
.app :focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.top{border-bottom:1px solid #221E2E}
.top>div{max-width:1100px;margin:0 auto;padding:14px 20px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.top .logo{font:700 19px 'Space Grotesk',Arial,sans-serif;letter-spacing:1px;color:var(--ink);text-decoration:none}
.top nav{display:flex;flex-wrap:wrap;gap:6px;font-size:15px;font-weight:600}
.top nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:999px;color:var(--ink);text-decoration:none}
.top nav a[aria-current]{background:var(--card2);color:var(--gold)}
.wrap{max-width:1100px;margin:0 auto;padding:40px 20px 88px;display:flex;flex-direction:column;gap:24px}
.narrow{max-width:720px}
h1,h2,h3{font-family:Syne,'Space Grotesk',Arial,sans-serif;font-weight:800;line-height:1.05;margin:0}
h1{font-size:44px}h2{font-size:26px}
.card{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:24px;display:flex;flex-direction:column;gap:14px}
.card.glow{background:linear-gradient(160deg,#2A1E4A,#15131E 75%);border-color:var(--line2)}
.card.blue{background:linear-gradient(160deg,#12336B,#15131E 75%);border-color:#3D63A8}
.mono{font:700 12px 'JetBrains Mono',monospace;letter-spacing:2.5px;color:var(--teal);text-transform:uppercase}
.soft{color:var(--soft)}.dim{color:var(--dim);font-size:14px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 24px;border-radius:999px;border:0;background:var(--gold);color:#17110A;font:700 16px Inter,Arial,sans-serif;text-decoration:none;cursor:pointer}
.btn.ghost{background:transparent;border:1px solid var(--line2);color:var(--ink)}
.btn.sm{min-height:44px;padding:0 16px;font-size:14px}
.btn:disabled{opacity:.55;cursor:default}
.app a.btn{color:#17110A}.app a.btn.ghost{color:var(--ink)}
.field{display:flex;flex-direction:column;gap:6px}
.field label,.lbl{font-weight:700;font-size:15px}
.in{width:100%;min-height:52px;padding:0 16px;border-radius:14px;border:1px solid var(--line2);background:#0B0A12;color:var(--ink);font:inherit}
select.in{appearance:auto}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--line2);background:transparent;color:var(--ink);font:600 15px Inter,Arial,sans-serif;cursor:pointer}
.chip[aria-pressed=true]{background:var(--gold);border-color:var(--gold);color:#17110A;font-weight:700}
.bpick{display:flex;flex-wrap:wrap;gap:10px}
.bpick button{width:62px;height:62px;border-radius:50%;border:1px solid var(--line2);font-size:28px;line-height:1;cursor:pointer}
.bpick button[aria-pressed=true]{border:3px solid var(--gold);box-shadow:0 0 0 4px rgba(255,194,75,.2)}
.bdg{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;border:1.5px solid var(--gold);line-height:1;vertical-align:middle;flex:none}
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;font:700 11px 'JetBrains Mono',monospace;letter-spacing:1px;white-space:nowrap}
.pill.gold{background:linear-gradient(#FFE39A,#E0A93B);color:#3A2606}
.pill.found{background:var(--card2);color:var(--gold);border:1px solid #4A3A18}
.pill.teal{background:rgba(94,234,212,.12);color:var(--teal)}
.pill.gray{background:var(--card2);color:var(--soft)}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.check{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:16px;background:#0F0D17;border:1px solid var(--line);cursor:pointer}
.check input{width:22px;height:22px;margin-top:2px;flex:none}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px}
.mcard{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:18px;display:flex;flex-direction:column;gap:10px}
.mcard b.nm{font-size:18px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.win{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:16px;background:var(--card2);font-size:15px}
.win>span{display:flex;align-items:center;gap:10px;min-width:0}
.ans{padding:12px 14px;border-radius:16px;background:rgba(11,10,18,.5);border:1px solid #2C6B62;font-size:15px}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:50;max-width:calc(100vw - 32px);padding:14px 22px;border-radius:999px;background:var(--ink);color:#0B0A12;font-weight:700;box-shadow:0 12px 30px rgba(0,0,0,.5)}
.cf{position:fixed;top:-20px;z-index:60;pointer-events:none;animation:cffall linear forwards}
@keyframes cffall{to{transform:translateY(110vh) rotate(600deg);opacity:.9}}
@media (prefers-reduced-motion:reduce){.cf{display:none}}
.hide{display:none!important}
.err{color:var(--coral);font-weight:600}.good{color:#7BD88F;font-weight:600}
@media (max-width:640px){h1{font-size:32px}.wrap{padding:28px 16px 72px}.card{padding:20px}.top nav a{padding:0 10px}}