/* PUNSLIP — Binance-style design system (deep near-black canvas + Binance Yellow) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=IBM+Plex+Sans+Thai:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* surfaces (dark) */
  --ink:#0b0e11; --ink-2:#2b3139; --panel:#1e2329; --panel-2:#20262d;
  --line:#2b3139; --line-soft:#23282f;
  /* text */
  --text:#eaecef; --muted:#929aa5; --faint:#707a8a;
  /* brand: Binance Yellow (kept under --lime so shared markup adapts) */
  --lime:#fcd535; --lime-dim:#f0b90b; --brand-soft:rgba(252,213,53,.12);
  --on-primary:#181a20;
  /* trading semantics — used here for verified(up)/failed(down) money signals */
  --ok:#0ecb81; --bad:#f6465d; --warn:#f0b90b;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --sans:'Inter','IBM Plex Sans Thai',system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
/* flat near-black canvas — Binance trusts color-block contrast, no atmospheric gradients */
body{font-family:var(--sans);color:var(--text);background:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.5}
a{color:var(--lime);text-decoration:none}
a:hover{text-decoration:underline}

.mark{width:36px;height:36px;border-radius:8px;display:grid;place-items:center;background:var(--lime);color:var(--on-primary);font-weight:800;font-size:20px}
.brand{display:flex;align-items:center;gap:11px}
.brand b{font-weight:700;font-size:18px;letter-spacing:-.01em}
.brand .sub{font-family:var(--mono);font-size:10px;color:var(--faint);letter-spacing:.16em;text-transform:uppercase;display:block;margin-top:-1px}

label{display:block;font-size:12.5px;font-weight:500;color:var(--muted);margin-bottom:7px}
input,textarea,select{width:100%;background:var(--ink-2);border:1px solid var(--line);color:var(--text);border-radius:8px;padding:11px 14px;font-family:var(--sans);font-size:14px;transition:.15s}
input::placeholder,textarea::placeholder{color:var(--faint)}
input:focus,textarea:focus{outline:none;border-color:var(--lime);box-shadow:0 0 0 3px rgba(252,213,53,.16)}

/* primary CTA: yellow with BLACK text — the signature combination (never invert) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;cursor:pointer;border-radius:6px;padding:12px 22px;font-family:var(--sans);font-weight:600;font-size:14px;background:var(--lime);color:var(--on-primary);transition:.15s}
.btn:hover:not(:disabled){background:var(--lime-dim)}
.btn:disabled{background:#3a3a1f;color:var(--faint);cursor:not-allowed}
.btn.ghost{background:var(--panel);color:var(--text);border:1px solid var(--line)}
.btn.ghost:hover{background:var(--panel-2);border-color:var(--faint)}
.btn.block{width:100%}
.btn.sm{padding:9px 16px;font-size:13px}
.btn.lg{padding:14px 26px;font-size:15px}
.btn.pill{border-radius:9999px;padding:14px 30px}

.card{border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.pad{padding:24px}

.alert{padding:12px 15px;border-radius:8px;font-size:13.5px;border:1px solid;display:none;gap:9px;align-items:flex-start}
.alert.show{display:flex}
.alert.err{background:rgba(246,70,93,.10);border-color:rgba(246,70,93,.35);color:#ff8d9a}
.alert.ok{background:rgba(14,203,129,.10);border-color:rgba(14,203,129,.35);color:#5fe3b3}

.mono{font-family:var(--mono)}
.muted{color:var(--muted)}
.badge{font-size:12px;font-weight:500;padding:5px 11px;border-radius:6px;background:var(--ink-2);color:var(--muted);border:1px solid var(--line)}
.badge.ok{background:rgba(14,203,129,.12);color:var(--ok);border-color:rgba(14,203,129,.3)}
.badge.bad{background:rgba(246,70,93,.12);color:var(--bad);border-color:rgba(246,70,93,.3)}

@keyframes spin{to{transform:rotate(360deg)}}
.spin{width:18px;height:18px;border-radius:50%;border:2.5px solid rgba(24,26,32,.35);border-top-color:var(--on-primary);animation:spin .7s linear infinite}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.rise{animation:rise .4s cubic-bezier(.2,.8,.2,1) both}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}