:root,:root[data-theme="day"]{--bg:#F7F1E5;--bg2:#E6F1FB;--primary:#2B86D6;--on-primary:#FFFFFF;--text:#1F2A37;--muted:#5F6875;--card:#FFFDF8;--border:#E8DFCC;--soft:#F1E9D8;--accent2:#FFB86B;--on-accent2:#1F2A37;--danger:#D93C41;--women:#D5559F;--shadow:#1F2A37;--off:#D9D0BE}
:root[data-theme="night"]{--bg:#0A0A0A;--bg2:#0A0A0A;--primary:#C6FF3D;--on-primary:#0A0A0A;--text:#FFFFFF;--muted:#A3A3A3;--card:#161616;--border:#262626;--soft:#111111;--accent2:#C6FF3D;--on-accent2:#0A0A0A;--danger:#FF4D4D;--women:#FF8FD1;--shadow:#C6FF3D55;--off:#333333}
*{transition:background-color .8s,color .8s,border-color .8s}
body{margin:0;font-family:'Plus Jakarta Sans',sans-serif;background:var(--bg);color:var(--text)}
.mono{font-family:'Space Mono',monospace}
.shell{max-width:440px;margin:0 auto;min-height:100vh;background:linear-gradient(180deg,var(--bg2),var(--bg) 45%);position:relative;border-left:1px solid var(--border);border-right:1px solid var(--border)}
.card{background:var(--card);border:1px solid var(--border);border-radius:22px}
[data-theme="day"] .card{box-shadow:0 6px 18px -10px #b8a07a55}
.tm{color:var(--muted)}.tp{color:var(--primary)}.tw{color:var(--women)}.td{color:var(--danger)}
.bgp{background:var(--primary);color:var(--on-primary)}.bgc{background:var(--card)}.bgs{background:var(--soft)}.bgoff{background:var(--off)}
.bdp{border-color:var(--primary)!important}.bdw{border-color:var(--women)!important}.bdd{border-color:var(--danger)!important}.bd{border-color:var(--border)}
.btn{width:100%;border-radius:999px;background:var(--primary);color:var(--on-primary);border:2px solid var(--text);box-shadow:4px 4px 0 var(--shadow);font-family:'Space Mono',monospace;font-weight:700;padding:16px;font-size:16px;transition:transform .1s,box-shadow .1s,background-color .8s;min-height:52px}
[data-theme="night"] .btn{border-color:#000}
.btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--shadow)}
.btn:disabled{background:var(--off);color:var(--muted);box-shadow:none}
.btn2{border-radius:999px;border:2px solid var(--primary);color:var(--primary);font-family:'Space Mono',monospace;font-weight:700;padding:12px 16px;min-height:48px}
.chip{border-radius:999px;padding:7px 14px;font-size:13px;font-weight:700;white-space:nowrap;border:1px solid var(--off);color:var(--muted)}
.chip.on{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}
.inp{width:100%;background:var(--soft);border:1px solid var(--border);border-radius:16px;padding:14px;color:var(--text);outline:none}
.inp:focus,button:focus-visible,a:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.pill{height:6px;border-radius:9px;background:var(--off);transition:width .3s;width:8px}
.pill.on{background:var(--primary);width:32px}
.star{position:absolute;width:2px;height:2px;background:#fff;border-radius:50%;animation:tw 3s infinite}
@keyframes tw{0%,100%{opacity:.1}50%{opacity:.8}}
.moon{position:absolute;top:10px;right:20px;font-size:40px;filter:drop-shadow(0 0 16px rgba(198,255,61,.6))}
.sun{position:absolute;top:6px;right:16px;font-size:44px;filter:drop-shadow(0 0 18px rgba(255,184,107,.8));animation:rot 30s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}
.cloud{position:absolute;font-size:34px;opacity:.35;animation:drift 40s linear infinite}
@keyframes drift{from{transform:translateX(-60px)}to{transform:translateX(480px)}}
.pop{animation:pop .35s ease-out both}
@keyframes pop{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.bounce{animation:b 1s infinite}@keyframes b{50%{transform:translateY(-5px)}}
.confetti{position:fixed;top:-10px;width:8px;height:12px;z-index:99;animation:fall 1.8s linear forwards}
@keyframes fall{to{transform:translateY(105vh) rotate(720deg)}}
.spin{width:40px;height:40px;border:4px solid var(--off);border-top-color:var(--primary);border-radius:50%;animation:sp 1s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.flip{position:fixed;inset:0;z-index:90;pointer-events:none;animation:fade 1.2s ease forwards;background:linear-gradient(180deg,#ffb86b88,#0a0a0acc)}
.flip .a,.flip .b{position:absolute;left:50%;font-size:96px;transform:translateX(-50%)}
.flip .a{animation:sink 1.2s ease forwards}.flip .b{animation:rise 1.2s ease forwards}
@keyframes sink{from{top:30%}to{top:110%}}@keyframes rise{from{top:110%}to{top:30%}}
@keyframes fade{0%,70%{opacity:1}100%{opacity:0}}
.toast{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:95;animation:pop .3s both}
@media (prefers-reduced-motion:reduce){.flip{display:none}.sun,.cloud,.star,.bounce{animation:none}}
::-webkit-scrollbar{display:none}
select option{color:#000}