/* Shared tokens — Guntavnook dark fintech: navy, gold, mint-teal */
:root {
  --bg: #0a1018;
  --bg2: #0f1722;
  --card: #121a24;
  --card2: #172231;
  --line: #233041;
  --line2: #2c3b4f;
  --text: #e6edf3;
  --muted: #8b949e;
  --gold: #e8c96a;
  --gold2: #c4a050;
  --mint: #6ee7b7;
  --red: #f87171;
  --blue: #3b82f6;
  --radius: 18px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --mr: 'Noto Sans Devanagari', system-ui, sans-serif;
  --num: 'Teko', 'Noto Sans Devanagari', sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; }
body {
  font-family: var(--mr);
  background: var(--bg);
  color: var(--text);
  min-height: 100dvh;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font: inherit; color: inherit; }
a { color: var(--mint); }
.num { font-family: var(--num); letter-spacing: .5px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 14px; padding: 13px 20px; font-weight: 700; font-size: 16px;
  cursor: pointer; transition: transform .18s var(--ease), box-shadow .25s var(--ease), opacity .2s, background .2s;
  user-select: none; text-decoration: none; position: relative; overflow: hidden;
}
.btn:active { transform: scale(.97); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn-gold { background: linear-gradient(135deg, var(--gold), var(--gold2)); color: #10151d; box-shadow: 0 8px 28px -10px rgba(232, 201, 106, .55); }
.btn-gold:hover:not([disabled]) { box-shadow: 0 10px 34px -8px rgba(232, 201, 106, .75); }
.btn-ghost { background: transparent; border: 1px solid var(--line2); color: var(--text); }
.btn-ghost:hover { border-color: var(--gold2); }
.btn-mint { background: var(--mint); color: #062a1d; }
.btn-danger { background: transparent; border: 1px solid rgba(248, 113, 113, .5); color: var(--red); }
.btn-sm { padding: 8px 12px; font-size: 14px; border-radius: 10px; }
.btn-block { width: 100%; }
.btn .spin { width: 18px; height: 18px; border: 2.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.field { display: block; margin-bottom: 14px; }
.field > span { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.input {
  width: 100%; background: var(--bg2); border: 1px solid var(--line2); border-radius: 12px;
  padding: 13px 14px; font-size: 16px; outline: none; transition: border-color .2s, box-shadow .2s;
}
.input:focus { border-color: var(--gold2); box-shadow: 0 0 0 3px rgba(196, 160, 80, .18); }
textarea.input { resize: vertical; min-height: 84px; }

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 140%); z-index: 100;
  background: #1c2735; border: 1px solid var(--line2); padding: 12px 18px; border-radius: 14px;
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .6); transition: transform .35s var(--spring); max-width: calc(100% - 32px);
  font-size: 15px; visibility: hidden;
}
.toast.show { transform: translate(-50%, 0); visibility: visible; }
.toast.err { border-color: rgba(248, 113, 113, .6); }
.toast.ok { border-color: rgba(110, 231, 183, .6); }

.fade-up { animation: fadeUp .5s var(--ease) both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }