:root{
  --bg:#f6f7f9; --card:#fff; --text:#111827; --muted:#6b7280;
  --line:#e5e7eb; --accent:#2563eb; --accent-2:#1d4ed8; --ok:#059669; --err:#dc2626;
  --radius:14px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text); min-height:100vh;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:15px; line-height:1.5;
  display:flex; flex-direction:column;
}
.wrap{width:100%; max-width:760px; margin:0 auto; padding:0 18px}
.topbar{background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:10}
.topbar .wrap{display:flex; align-items:center; justify-content:space-between; height:64px}
.brand{font-weight:700; font-size:18px; color:var(--text); text-decoration:none; letter-spacing:.2px}
.wallet{display:flex; flex-direction:column; align-items:flex-end; line-height:1.15}
.wallet-label{font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted)}
.wallet strong{font-size:17px}
.main{flex:1; padding:28px 18px 48px}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:24px; margin-bottom:18px}
h1{font-size:22px; margin:0 0 6px}
h2{font-size:16px; margin:0 0 12px}
p.lead{color:var(--muted); margin:0 0 20px}
label{display:block; font-size:13px; font-weight:600; margin:14px 0 6px}
input,select{
  width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:10px;
  font-size:15px; background:#fff; color:var(--text)
}
input:focus,select:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.btn{
  display:block; width:100%; margin-top:20px; padding:14px 18px; border:0; border-radius:10px;
  background:var(--accent); color:#fff; font-size:15px; font-weight:600; cursor:pointer; text-align:center;
  text-decoration:none
}
.btn:hover{background:var(--accent-2)}
.btn-ghost{background:#fff; color:var(--text); border:1px solid var(--line)}
.btn-ghost:hover{background:#f3f4f6}
.row{display:flex; gap:12px}
.row .btn{margin-top:0}
.alert{padding:14px 16px; border-radius:10px; font-size:14px; margin-bottom:16px}
.alert-error{background:#fef2f2; color:#991b1b; border:1px solid #fecaca}
.alert-info{background:#eff6ff; color:#1e40af; border:1px solid #bfdbfe}
.alert-ok{background:#ecfdf5; color:#065f46; border:1px solid #a7f3d0}
.kv{display:flex; justify-content:space-between; padding:12px 0; border-bottom:1px dashed var(--line)}
.kv:last-child{border-bottom:0}
.kv span{color:var(--muted)}
.kv strong{font-variant-numeric:tabular-nums}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; letter-spacing:.5px}
.iban{font-size:17px; font-weight:600; word-break:break-all}
.center{text-align:center}
.timer{font-size:30px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--accent)}
.muted{color:var(--muted); font-size:13px}
.badge{display:inline-block; padding:5px 10px; border-radius:999px; font-size:12px; font-weight:700}
.badge-wait{background:#fff7ed; color:#9a3412}
.badge-ok{background:#ecfdf5; color:#065f46}
.badge-no{background:#fef2f2; color:#991b1b}
.footer{border-top:1px solid var(--line); background:#fff; padding:16px 0; color:var(--muted); font-size:12px}
.footer .wrap{display:flex; justify-content:space-between}
.spinner{width:18px;height:18px;border:2px solid #c7d2fe;border-top-color:var(--accent);border-radius:50%;
  display:inline-block;animation:spin 1s linear infinite;vertical-align:-3px;margin-right:8px}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:520px){ .main{padding:18px 14px 36px} .card{padding:18px} }