/* Boostly Wallet — clean, mobile-first UI. */
:root {
  --bg: #0b0f14;
  --surface: #121822;
  --surface-2: #18212e;
  --line: #243043;
  --text: #e7edf5;
  --muted: #93a1b5;
  --accent: #c6ff3d;
  --accent-ink: #0b0f14;
  --ok: #34d399;
  --err: #f87171;
  --pending: #fbbf24;
  --radius: 16px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: radial-gradient(120% 80% at 0% 0%, rgba(198,255,61,.06), transparent 45%), var(--bg);
  color: var(--text);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
}
.wrap { max-width: 480px; margin: 0 auto; padding: 20px 16px calc(20px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; min-height: 100dvh; }
.topbar { display: flex; align-items: center; justify-content: center; padding: 12px 0 18px; }
.brand { font-weight: 700; letter-spacing: .2px; display: flex; align-items: center; gap: 9px; }
.brand .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 14px var(--accent); }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.break { word-break: break-all; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 20px; box-shadow: var(--shadow); }
h1 { font-size: 22px; margin: 0 0 6px; }
.foot { text-align: center; padding: 18px 0 6px; font-size: 12px; color: var(--muted); margin-top: auto; }

/* form */
.form { margin-top: 18px; display: flex; flex-direction: column; }
.form.tight { margin-top: 12px; gap: 2px; }
.lbl { font-size: 13px; color: var(--muted); margin: 14px 0 6px; }
.field { display: flex; align-items: center; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 0 12px; transition: border-color .15s; }
.field:focus-within { border-color: var(--accent); }
.field .prefix { color: var(--muted); margin-right: 6px; }
.field input { flex: 1; background: transparent; border: 0; color: var(--text); font-size: 17px; padding: 13px 0; outline: none; width: 100%; }
.inp { width: 100%; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; color: var(--text); font-size: 15px; padding: 11px 12px; outline: none; }
.inp:focus { border-color: var(--accent); }
.select { position: relative; }
.select select { width: 100%; appearance: none; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; color: var(--text); font-size: 16px; padding: 13px 38px 13px 12px; outline: none; }
.select::after { content: "▾"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.hint { font-size: 13px; color: var(--muted); margin: 8px 2px 0; }
.fineprint { font-size: 12px; margin-top: 14px; text-align: center; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 12px; font-weight: 700; font-size: 16px; padding: 14px 16px; cursor: pointer; margin-top: 18px; text-decoration: none; }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { filter: brightness(1.05); }
.btn-ghost { background: transparent; color: var(--muted); border: 1px solid var(--line); }
.btn-ghost:hover { color: var(--text); }
.btn-sm { font-size: 14px; padding: 9px 13px; margin-top: 10px; }
.inline { display: inline; }

.alert { border-radius: 12px; padding: 12px 14px; font-size: 14px; margin-top: 14px; }
.alert-error { background: rgba(248,113,113,.12); border: 1px solid rgba(248,113,113,.35); color: #fecaca; }
.alert-ok { background: rgba(52,211,153,.12); border: 1px solid rgba(52,211,153,.35); color: #bbf7d0; }

/* message / status */
.msg { text-align: center; padding: 14px 4px; }
.msg-icon { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: 800; margin: 6px auto 16px; }
.msg-ok .msg-icon { background: rgba(52,211,153,.15); color: var(--ok); }
.msg-error .msg-icon { background: rgba(248,113,113,.15); color: var(--err); }
.msg-pending .msg-icon { background: rgba(251,191,36,.15); color: var(--pending); }
.badge { display: inline-block; margin-top: 16px; font-size: 12px; letter-spacing: .5px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }

/* admin */
.admin-head { display: flex; align-items: center; justify-content: space-between; }
.list { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.payout { background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
.payout-top { display: flex; justify-content: space-between; align-items: flex-start; }
.payout-id { font-weight: 700; }
.payout-amt { text-align: right; }
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); margin-top: 8px; font-size: 14px; }
.kv span:last-child { text-align: right; max-width: 60%; }
.approve { margin-top: 12px; }
.approve summary { list-style: none; display: inline-flex; }
.approve summary::-webkit-details-marker { display: none; }