/* ── Base ────────────────────────────────────────────────────── */
html{scroll-behavior:smooth;height:100%}
body{font-family:var(--font);background:var(--page-bg);color:var(--text-dark);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
input,select,textarea,button{font-family:inherit;font-size:inherit}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

/* ── App shell ────────────────────────────────────────────────── */
#app{display:flex;min-height:100vh}

/* ── Animations ──────────────────────────────────────────────── */
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{transform:translateY(100%);opacity:0}to{transform:none;opacity:1}}
@keyframes toastIn{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:translateX(0)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes loginShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}

/* ── Scrollbar ──────────────────────────────────────────────── */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:var(--c5)}
::-webkit-scrollbar-thumb{background:var(--c3);border-radius:3px;opacity:.5}

/* ── Toast ──────────────────────────────────────────────────── */
#toast-container{position:fixed;bottom:20px;right:20px;z-index:9999;display:flex;flex-direction:column;gap:8px;pointer-events:none;max-width:min(320px,calc(100vw - 40px))}
.toast{background:var(--c4);border:1px solid var(--border);color:var(--text-dark);padding:11px 16px;border-radius:var(--r);font-size:.77rem;font-weight:500;box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:9px;animation:toastIn .22s ease;max-width:100%;pointer-events:auto}
.toast.success{border-left:3px solid var(--green)}
.toast.error  {border-left:3px solid var(--rose)}
.toast.info   {border-left:3px solid var(--c3)}

/* ── Section divider / Deposit box ─────────────────────────── */
.section-divider{height:1px;background:var(--border);margin:20px 0}
.dep-box{background:var(--accent-lt);border:1px solid rgba(0,156,222,.18);border-radius:var(--r);padding:13px 15px;margin-bottom:12px}

/* ── Mobile toast position ──────────────────────────────────── */
@media(max-width:480px){
  #toast-container{bottom:66px;right:12px;left:12px;max-width:100%}
}