:root{
  --bg:#070b1a;--panel:#0f1830;--panel-2:#16224a;--line:#22335f;
  --text:#e8eefc;--muted:#8fa0c8;
  --snake:#3ddc84;--snack:#ffd23f;--cyan:#22d3ee;--danger:#ff4d5e;
  --radius:14px;
}
html,body{height:100%;background:var(--bg);color:var(--text);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  overscroll-behavior:none;-webkit-user-select:none;user-select:none}
#app{height:100vh;height:100dvh;max-width:960px;margin:0 auto;
  padding:max(env(safe-area-inset-top),10px) 12px max(env(safe-area-inset-bottom),10px)}
.screen{display:none;height:100%}
.screen.active{display:flex;flex-direction:column;animation:enter .25s ease-out}
@keyframes enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.hidden{display:none!important}

.btn{padding:10px 18px;border-radius:12px;background:var(--panel-2);border:1px solid var(--line);
  font-weight:600;transition:transform .08s,background .15s,border-color .15s}
.btn:hover{border-color:var(--cyan)}
.btn:active{transform:scale(.96)}
.btn:focus-visible,button:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.btn.primary{background:var(--snake);border-color:var(--snake);color:#04210f}
.btn.big{padding:14px 40px;font-size:1.15rem}
.btn.icon{padding:8px 12px;font-size:.9rem}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.btn:disabled{opacity:.45;cursor:not-allowed}