body{margin:0;font-family:system-ui,sans-serif;transition:background .3s,color .3s}body.dark-mode-body{background:#121212;color:#ddd}.app{text-align:center;padding:30px;background:transparent;color:inherit}.app.light,.app.dark{background:transparent;color:inherit}.rules{color:inherit}.equation{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin:30px 0}.token-wrapper{display:inline-block;transition:transform .3s ease}.token-wrapper.animate-swap{transform:scale(1.2);border-radius:8px}.token{font-size:22px;padding:14px 18px;border-radius:8px;border:2px solid #333;background:#fff;cursor:pointer;transition:all .15s ease}body.dark-mode-body .token{background:#2c2c2c;border-color:#555;color:#ddd}.token:hover{background:#eef1f5}body.dark-mode-body .token:hover{background:#444}.token.selected{background:#ffd54f;border-color:#ff9800}.results{font-size:20px;margin:20px 0}.info{font-size:18px}.balanced{color:#4caf50;font-weight:700;font-size:20px}.error{color:#ff5252;font-weight:700;font-size:16px;margin-top:10px}.best{color:#07f;font-weight:700;margin-top:5px}.reset-btn,.dark-mode-btn{margin-top:20px;padding:10px 20px;font-size:16px;border-radius:8px;border:2px solid #333;background:#fff;cursor:pointer;transition:all .2s ease}body.dark-mode-body .reset-btn,body.dark-mode-body .dark-mode-btn{background:#333;border-color:#555;color:#ddd}.reset-btn:hover,.dark-mode-btn:hover{transform:scale(1.05)}.app:not(.dark) .reset-btn:hover,.app:not(.dark) .dark-mode-btn:hover{background:#eef1f5}body.dark-mode-body .reset-btn:hover,body.dark-mode-body .dark-mode-btn:hover{background:#444}.self-destruct-btn{position:fixed;bottom:12px;right:12px;width:34px;height:34px;border-radius:50%;border:none;font-size:16px;cursor:pointer;background:#ff5252;color:#fff;box-shadow:0 2px 6px #0000004d;opacity:.6;transition:transform .15s ease,opacity .15s ease;z-index:999}.self-destruct-btn:hover{opacity:1;transform:scale(1.15)}body.dark-mode-body .self-destruct-btn{background:#d32f2f}.self-destruct-btn.counting{background:#ff9800;opacity:1;transform:scale(1.2);font-weight:700}@keyframes explode{0%{transform:scale(1);opacity:1}40%{transform:scale(1.6) rotate(10deg);opacity:1}to{transform:scale(2.5) rotate(-20deg);opacity:0}}.self-destruct-btn.exploding{background:#ff1744;animation:explode .7s ease-out forwards;pointer-events:none}@keyframes screenShake{0%{transform:translate(0) rotate(0)}10%{transform:translate(-6px,4px) rotate(-.5deg)}20%{transform:translate(6px,-4px) rotate(.5deg)}30%{transform:translate(-8px,6px) rotate(-.8deg)}40%{transform:translate(8px,-6px) rotate(.8deg)}50%{transform:translate(-6px,4px) rotate(-.5deg)}60%{transform:translate(6px,-4px) rotate(.5deg)}70%{transform:translate(-4px,2px) rotate(-.3deg)}80%{transform:translate(4px,-2px) rotate(.3deg)}90%{transform:translate(-2px,1px) rotate(-.1deg)}to{transform:translate(0) rotate(0)}}.screen-shake{animation:screenShake .5s ease-in-out}@keyframes flash{0%{background:#ff000026}to{background:transparent}}.screen-shake:after{content:"";position:fixed;inset:0;pointer-events:none;animation:flash .2s ease-out}.submit-btn{margin-top:12px;padding:8px 16px;font-size:.9rem;font-weight:700;border-radius:6px;border:none;cursor:pointer;background:#4caf50;color:#fff;transition:transform .15s ease,opacity .15s ease}.submit-btn:hover{transform:scale(1.05)}.dark .submit-btn{background:#66bb6a}.submit-result{margin-top:8px;font-weight:700}.submit-result.perfect{color:#4caf50}.submit-result.suboptimal{color:#ff9800}.dark .submit-result.suboptimal{color:#ffb74d}