/* WINGO PRO - player app (light theme) */

:root{
  --bg:#f1f2f6;
  --card:#ffffff;
  --ink:#2f3542;
  --ink-2:#3d4351;
  --muted:#747d8c;
  --line:#e3e7ee;
  --soft:#fbfcfe;
  --input:#eef1f7;
  --green:#2ed573;
  --green-d:#25b463;
  --red:#ff4757;
  --red-d:#e8384a;
  --violet:#9b59b6;
  --amber:#ffa502;
  --amber-bg:#fff5e3;
  --blue:#396280;
  --gold:#efd9a9;
  --radius:18px;
  --shadow:0 2px 10px rgba(47,53,66,.06);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--bg);color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:15px;line-height:1.45;min-height:100vh;
}
button{font-family:inherit}
h1,h2,h3{margin:0}
[hidden]{display:none!important}
.muted{color:var(--muted)}
.center{text-align:center}
.fine{font-size:12px;color:var(--muted);line-height:1.5}
.empty{color:var(--muted);font-size:13.5px;text-align:center;margin:10px 0}
.upper{text-transform:uppercase}

/* ---------------- buttons ---------------- */
.btn-primary{
  border:0;border-radius:12px;background:var(--red);color:#fff;font-size:15px;font-weight:700;
  padding:14px 18px;cursor:pointer;transition:transform .08s ease,filter .15s;
}
.btn-primary:active{transform:scale(.985);filter:brightness(.96)}
.btn-primary:disabled{opacity:.55;pointer-events:none}
.btn-ghost{
  border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);
  font-size:15px;font-weight:600;padding:14px 18px;cursor:pointer;
}
.btn-ghost:disabled{opacity:.55;pointer-events:none}
.btn-ghost.wide,.btn-primary.wide{width:100%;margin-top:12px}
a.btn-ghost,a.btn-primary{display:block;text-align:center;text-decoration:none}
a.btn-ghost{color:var(--ink);font-weight:700}
.link-btn{background:none;border:0;color:var(--blue);font-size:12.5px;font-weight:600;cursor:pointer;padding:0}

/* ---------------- auth ---------------- */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 16px}
.auth-card{width:100%;max-width:420px;background:var(--card);border-radius:22px;padding:26px 22px;box-shadow:0 18px 50px rgba(47,53,66,.12)}
.auth-brand{display:flex;align-items:center;gap:12px;margin-bottom:22px}
.logo-tile{
  width:44px;height:44px;border-radius:13px;display:grid;place-items:center;
  background:linear-gradient(140deg,#ff4757,#9b59b6);color:#fff;font-weight:800;font-size:20px;
}
.logo-tile.small{width:38px;height:38px;border-radius:11px;font-size:18px}
.auth-title{font-size:18px;font-weight:800}
.auth-sub{font-size:12.5px;color:var(--muted)}
.seg{display:flex;gap:6px;background:var(--bg);border-radius:12px;padding:5px;margin-bottom:20px}
.seg-btn{flex:1;border:0;background:transparent;color:var(--muted);font-size:14px;font-weight:700;padding:10px;border-radius:9px;cursor:pointer}
.seg-btn.active{background:#fff;color:var(--ink);box-shadow:var(--shadow)}
.auth-form label{display:block;font-size:12.5px;color:var(--muted);margin:14px 0 6px}
.auth-form input{
  width:100%;background:var(--input);border:1px solid transparent;border-radius:12px;
  color:var(--ink);padding:14px;font-size:15px;outline:none;
}
.auth-form input:focus{border-color:var(--red);background:#fff}
.auth-form .btn-primary{width:100%;margin-top:20px}

/* ---------------- header ---------------- */
.app-head{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--ink);color:#fff;padding:12px 14px 14px;
  border-radius:0 0 18px 18px;
}
.head-left{display:flex;align-items:center;gap:10px;min-width:0}
.head-brand{min-width:0}
.head-name{font-size:15px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vip-pill{
  display:inline-block;margin-top:3px;background:#ffd32a;color:#3d3200;
  font-size:10.5px;font-weight:800;padding:2px 8px;border-radius:999px;letter-spacing:.3px;
}
.balance-box{
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.12);
  border-radius:13px;padding:6px 12px;text-align:right;flex:0 0 auto;
}
.balance-box span{display:block;font-size:10.5px;color:#b7bdc9;letter-spacing:.02em}
.balance-box strong{font-size:16px;font-weight:800;letter-spacing:.2px}

/* ---------------- layout ---------------- */
main{max-width:480px;margin:0 auto;padding:14px 14px 96px}
.card{background:var(--card);border-radius:var(--radius);padding:16px;margin-bottom:14px;box-shadow:var(--shadow)}
.row-between{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.label{font-size:11.5px;color:var(--muted)}
.period{font-size:15.5px;font-weight:800;letter-spacing:.2px;margin-top:2px}
.status-pill{
  background:var(--green);color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.6px;
  padding:5px 12px;border-radius:999px;text-transform:uppercase;white-space:nowrap;
}
.status-pill.locked{background:var(--amber)}
.status-pill.result{background:var(--blue)}

/* ---------------- rooms ---------------- */
.room-tabs{display:flex;gap:8px;overflow-x:auto;padding:2px 0 14px;scrollbar-width:none}
.room-tabs::-webkit-scrollbar{display:none}
.room-tab{
  flex:0 0 auto;background:#fff;border:1px solid var(--line);color:var(--ink);
  padding:10px 18px;border-radius:999px;font-size:13.5px;font-weight:700;cursor:pointer;white-space:nowrap;
  box-shadow:var(--shadow);
}
.room-tab.active{background:var(--ink);border-color:var(--ink);color:#fff}

/* ---------------- game ---------------- */
.timer{
  text-align:center;font-size:46px;font-weight:800;letter-spacing:4px;
  font-variant-numeric:tabular-nums;color:var(--ink);margin:8px 0 2px;line-height:1.05;
}
.timer.locked{color:var(--amber)}
.center-hint{text-align:center;color:var(--muted);font-size:13.5px;margin-bottom:12px}
.center-hint.small{font-size:12px;margin:8px 0 0}

.trend{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;padding-bottom:14px}
.trend::-webkit-scrollbar{display:none}
.trend-item{
  flex:0 0 auto;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  font-size:12.5px;font-weight:800;color:#fff;background:var(--muted);
}
.trend-item.green{background:var(--green)}
.trend-item.red{background:var(--red)}
.trend-item.violet{background:var(--violet)}
.trend-item.red_violet{background:linear-gradient(90deg,var(--red) 50%,var(--violet) 50%)}
.trend-item.green_violet{background:linear-gradient(90deg,var(--green) 50%,var(--violet) 50%)}

.colour-row{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.pick{
  border:0;border-radius:13px;padding:13px 8px;cursor:pointer;color:#fff;
  display:flex;flex-direction:column;align-items:center;gap:2px;font-weight:800;
  transition:transform .08s ease,box-shadow .15s;
}
.pick:active{transform:scale(.97)}
.pick.green{background:var(--green)}
.pick.violet{background:var(--violet)}
.pick.red{background:var(--red)}
.pick-name{font-size:14.5px}
.pick-odds{font-size:11.5px;font-weight:600;opacity:.9}
.pick.selected{outline:3px solid rgba(47,53,66,.85);outline-offset:2px}

.num-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;margin:12px 0 0}
.num{
  aspect-ratio:1/1;border:0;border-radius:50%;cursor:pointer;color:#fff;
  font-size:19px;font-weight:800;display:grid;place-items:center;
  transition:transform .08s ease;
}
.num:active{transform:scale(.95)}
.num.green{background:var(--green)}
.num.red{background:var(--red)}
.num.red_violet{background:linear-gradient(90deg,var(--red) 50%,var(--violet) 50%)}
.num.green_violet{background:linear-gradient(90deg,var(--green) 50%,var(--violet) 50%)}
.num.selected{outline:3px solid rgba(47,53,66,.85);outline-offset:2px}

.size-row{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:12px}
.pick-outline{
  background:#fff;border:1px solid var(--line);border-radius:13px;padding:11px 8px;
  display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;
}
.pick-outline:active{transform:scale(.98)}
.pick-outline.selected{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.po-name{font-size:14.5px;font-weight:800}
.po-sub{font-size:11.5px;color:var(--muted)}
.green-text{color:var(--green-d)}
.red-text{color:var(--red)}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 10px}
.chip{
  background:var(--bg);border:1px solid transparent;border-radius:999px;
  padding:8px 15px;font-size:13px;font-weight:700;color:var(--ink);cursor:pointer;
}
.chip.active{background:var(--ink);color:#fff}

/* ---- place bet sheet ---- */
.bet-summary{background:var(--bg);border-radius:14px;padding:14px 16px;margin-bottom:14px}
.bs-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 0;font-size:14.5px}
.bs-row span{color:var(--muted)}
.bs-row strong{font-weight:800;letter-spacing:.2px}
.bet-presets{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px}
.bet-preset{
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:13px 0;
  font-size:14px;font-weight:800;color:var(--ink);cursor:pointer;
}
.bet-preset.active{border-color:#4f7cff;color:#4f7cff;background:#f3f7ff;box-shadow:0 0 0 1px #4f7cff}
.bet-label{display:block;font-size:12.5px;color:var(--muted);margin-bottom:6px}
.bet-input{
  width:100%;background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:14px 15px;font-size:18px;font-weight:800;color:var(--ink);outline:none;margin-bottom:14px;
}
.bet-input:focus{border-color:#4f7cff;box-shadow:0 0 0 3px rgba(79,124,255,.12)}
.bet-mults{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:16px}
.bet-mult{
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 0;
  font-size:13.5px;font-weight:700;color:var(--muted);cursor:pointer;
}
.bet-mult:active{background:var(--bg)}
.bet-cta{
  width:100%;border:0;border-radius:14px;background:#4f7cff;color:#fff;
  font-size:16px;font-weight:800;padding:16px;cursor:pointer;
}
.bet-cta:active{filter:brightness(.95)}
.bet-cta:disabled{opacity:.6;pointer-events:none}
.bet-note{text-align:center;font-size:12px;color:var(--muted);margin:11px 0 0}

.pool{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.pool-col{min-width:0}
.pool-label{font-size:11.5px;color:var(--muted)}
.pool-amount{font-size:13.5px;font-weight:800;margin:2px 0 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pool-bar{height:5px;border-radius:99px;background:var(--bg);overflow:hidden}
.pool-bar i{display:block;height:100%;border-radius:99px}
.pool-col.red .pool-bar i{background:var(--red)}
.pool-col.green .pool-bar i{background:var(--green)}
.pool-col.violet .pool-bar i{background:var(--violet)}

/* ---------------- cards / lists ---------------- */
.card-title{font-size:14.5px;font-weight:800;margin-bottom:10px}
.card-title span{font-size:11.5px;color:var(--muted);font-weight:600;margin-left:4px}
.stack>.bet-line{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--line)}
.stack>.bet-line:last-child{border-bottom:0}
.bl-main{font-size:14px;font-weight:700}
.bl-main em{font-style:normal;color:var(--muted);font-weight:600}
.bl-sub{font-size:12px;color:var(--muted);margin-top:2px}
.pill{font-size:10.5px;font-weight:800;padding:4px 10px;border-radius:999px;letter-spacing:.2px;white-space:nowrap;display:inline-block}
.pill.pending,.pill.under_review{background:var(--amber-bg);color:#b06f00}
.pill.won,.pill.approved,.pill.completed,.pill.success{background:#e7f9ef;color:#128a4d}
.pill.lost,.pill.rejected,.pill.cancelled,.pill.expired{background:#ffe9eb;color:#c22a3a}
.pill.refunded{background:#eef1f7;color:#4b5563}

.result-line{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--line)}
.result-line:last-child{border-bottom:0}
.rl-period{flex:1;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.rl-dot{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:12.5px;font-weight:800}
.rl-dot.green{background:var(--green)}
.rl-dot.red{background:var(--red)}
.rl-dot.violet{background:var(--violet)}
.rl-dot.red_violet{background:linear-gradient(90deg,var(--red) 50%,var(--violet) 50%)}
.rl-dot.green_violet{background:linear-gradient(90deg,var(--green) 50%,var(--violet) 50%)}
.rl-text{flex:0 0 122px;text-align:right;font-size:12px;color:var(--muted);text-transform:capitalize;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------------- wallet ---------------- */
.wallet-card{background:linear-gradient(150deg,#3d4351,#2f3542);color:#fff}
.wallet-card .label{color:#b7bdc9}
.wallet-amount{font-size:32px;font-weight:800;margin:2px 0 14px;letter-spacing:.3px}
.wallet-split{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.wallet-split>div{background:rgba(255,255,255,.08);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.wallet-split span{font-size:11px;color:#b7bdc9}
.wallet-split strong{font-size:14.5px;color:var(--gold)}
.wallet-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.wallet-card .btn-ghost{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.18);color:#fff}

.list-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.list-row:last-child{border-bottom:0}
.lr-title{font-size:13.5px;font-weight:700;text-transform:capitalize}
.lr-sub{font-size:11.5px;color:var(--muted);margin-top:2px}
.lr-amount{font-size:14px;font-weight:800;white-space:nowrap}
.amt-plus{color:var(--green-d)}
.amt-minus{color:var(--red)}

/* ---------------- profile ---------------- */
.profile-card{display:flex;align-items:center;gap:14px}
.avatar{
  width:54px;height:54px;border-radius:16px;display:grid;place-items:center;
  background:linear-gradient(140deg,#ff4757,#9b59b6);color:#fff;font-size:21px;font-weight:800;
}
.profile-phone{font-size:17px;font-weight:800}
.profile-meta{font-size:12.5px;color:var(--muted);margin-top:2px}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.stat{background:#fff;border-radius:14px;padding:12px 14px;box-shadow:var(--shadow)}
.stat span{display:block;font-size:11.5px;color:var(--muted)}
.stat strong{font-size:16.5px}
.menu-card{padding:4px 16px}
.menu-item{
  width:100%;background:none;border:0;border-bottom:1px solid var(--line);color:var(--ink);
  font-size:14.5px;display:flex;justify-content:space-between;align-items:center;
  padding:15px 0;cursor:pointer;text-align:left;
}
.menu-item:last-child{border-bottom:0}
.menu-item.danger{color:var(--red)}
.chev{color:var(--muted);font-size:18px}

/* ---------------- bottom nav ---------------- */
.bottom-nav{
  position:fixed;bottom:0;left:0;right:0;z-index:30;max-width:480px;margin:0 auto;
  display:grid;grid-template-columns:repeat(4,1fr);
  background:#fff;border-top:1px solid var(--line);
  padding:8px 0 calc(8px + env(safe-area-inset-bottom));
}
.nav-item{background:none;border:0;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;font-weight:600;cursor:pointer;padding:4px 0}
.nav-item.active{color:var(--ink)}
.ni{width:20px;height:20px;display:block}
.nav-item svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------------- sheet ---------------- */
.overlay{position:fixed;inset:0;z-index:60;background:rgba(20,24,33,.55);display:flex;align-items:flex-end;justify-content:center}
.sheet{
  width:100%;max-width:480px;max-height:90vh;overflow-y:auto;background:#fff;
  border-radius:22px 22px 0 0;padding:18px 18px calc(22px + env(safe-area-inset-bottom));
  animation:slideUp .22s ease;
}
@keyframes slideUp{from{transform:translateY(24px);opacity:.7}to{transform:translateY(0);opacity:1}}
.sheet-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.sheet-head h2{font-size:17px;font-weight:800}
.sheet-close{background:none;border:0;color:var(--muted);font-size:26px;line-height:1;cursor:pointer;padding:0 4px}

.field{margin-bottom:13px}
.field label{display:block;font-size:12.5px;color:var(--muted);margin-bottom:6px}
.field input,.field select,.field textarea{
  width:100%;background:var(--input);border:1px solid transparent;border-radius:12px;
  color:var(--ink);padding:13px 14px;font-size:15px;outline:none;font-family:inherit;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--red);background:#fff}
.field textarea{min-height:96px;resize:vertical}

.info-box{background:var(--bg);border-radius:14px;padding:14px;margin-bottom:12px}
.info-row{display:flex;justify-content:space-between;gap:10px;padding:5px 0;font-size:13.5px}
.info-row span{color:var(--muted)}
.info-row strong{text-align:right;word-break:break-word}
.note{background:var(--amber-bg);border-radius:12px;padding:11px 13px;font-size:12.5px;color:#8a5a00;margin-bottom:12px;line-height:1.5}
.note.green{background:#e7f9ef;color:#0f7a45}
.note.red{background:#ffe9eb;color:#b3202f}

/* deposit flow */
.steps{display:flex;gap:6px;margin-bottom:16px}
.step-dot{flex:1;height:4px;border-radius:99px;background:var(--line)}
.step-dot.done{background:var(--green)}
.step-dot.active{background:var(--ink)}
.qr-wrap{background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px;display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:12px}
.qr-wrap canvas{width:200px;height:200px;display:block;image-rendering:pixelated}
.qr-brand{font-size:12.5px;font-weight:800;color:var(--ink)}
.qr-hint{font-size:11.5px;color:var(--muted);text-align:center}
.copy-row{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--bg);border-radius:12px;padding:11px 13px;margin-bottom:10px}
.copy-row .cr-label{font-size:11px;color:var(--muted);display:block}
.copy-row .cr-value{font-size:14px;font-weight:800;word-break:break-all}
.copy-btn{background:#fff;border:1px solid var(--line);border-radius:9px;padding:7px 12px;font-size:12px;font-weight:700;cursor:pointer;color:var(--ink)}
.countdown{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--ink);color:#fff;border-radius:12px;padding:11px;font-weight:800;font-variant-numeric:tabular-nums;margin-bottom:12px}
.countdown.warn{background:var(--amber)}
.countdown small{font-weight:600;opacity:.75;font-size:11.5px}
.spin{width:15px;height:15px;border:2px solid rgba(47,53,66,.2);border-top-color:var(--ink);border-radius:50%;display:inline-block;animation:sp .7s linear infinite;vertical-align:-2px}
@keyframes sp{to{transform:rotate(360deg)}}

.ref-box{background:var(--bg);border-radius:14px;padding:16px;text-align:center;margin-bottom:12px}
.ref-code{font-size:24px;font-weight:800;letter-spacing:3px;color:var(--ink);margin-top:4px}
.ref-link{font-size:11.5px;color:var(--muted);word-break:break-all;margin-top:6px}

.leader-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.leader-row:last-child{border-bottom:0}
.leader-rank{width:26px;height:26px;border-radius:9px;background:var(--bg);display:grid;place-items:center;font-size:12px;font-weight:800;color:var(--muted)}
.leader-rank.top{background:#ffd32a;color:#3d3200}

.ticket-msg{background:var(--bg);border-radius:12px;padding:11px 13px;margin-bottom:8px;font-size:13px}
.ticket-msg.admin{background:#eef4ff;border:1px solid #dbe6fb}
.ticket-msg .tm-meta{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px}

/* ---------------- toasts ---------------- */
.toasts{position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:90;display:flex;flex-direction:column;gap:8px;width:calc(100% - 28px);max-width:430px}
.toast{
  background:var(--ink);color:#fff;border-radius:12px;padding:12px 14px;font-size:13.5px;
  box-shadow:0 10px 30px rgba(20,24,33,.25);animation:tin .18s ease;
}
.toast.success{background:#128a4d}
.toast.error{background:#c22a3a}
.toast.warn{background:#b06f00}
@keyframes tin{from{transform:translateY(-8px);opacity:0}to{transform:translateY(0);opacity:1}}

@media (min-width:520px){
  .overlay{align-items:center}
  .sheet{border-radius:22px}
}

/* ================= deposit page ================= */
.dp-head{
  position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;
  padding:12px 14px;background:var(--ink);color:#fff;border-radius:0 0 18px 18px;
}
.dp-back{
  width:36px;height:36px;flex:0 0 36px;display:grid;place-items:center;color:#fff;
  background:rgba(255,255,255,.1);border-radius:11px;
}
.dp-head-title{flex:1;font-size:16px;font-weight:800}
.dp-bal{text-align:right;background:rgba(255,255,255,.09);border-radius:11px;padding:5px 11px}
.dp-bal span{display:block;font-size:10px;color:#b7bdc9}
.dp-bal strong{font-size:14.5px;font-weight:800}
.dp-main{max-width:480px;margin:0 auto;padding:16px 14px 40px}

.dp-steps{display:flex;gap:6px;margin-bottom:16px}
.dp-steps i{flex:1;height:4px;border-radius:99px;background:var(--line)}
.dp-steps i.on{background:#4f7cff}
.dp-steps i.done{background:var(--green)}
.dp-steps i.bad{background:var(--red)}
.dp-h1{font-size:20px;font-weight:800;margin:0 0 6px;line-height:1.25}
.dp-sub{font-size:13.5px;color:var(--muted);margin:0 0 16px;line-height:1.5}
.dp-limits{font-size:12px;color:var(--muted);margin:-6px 0 14px}

.dp-order-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.dp-big{font-size:26px;font-weight:800;letter-spacing:.3px;margin-top:2px}
.dp-countdown{
  background:var(--ink);color:#fff;border-radius:11px;padding:8px 13px;
  font-size:14px;font-weight:800;font-variant-numeric:tabular-nums;
}
.dp-countdown.over{background:var(--red)}

.dp-main .qr-wrap{border:1px solid var(--line);border-radius:16px;padding:14px;margin-bottom:12px}
.dp-main .qr-wrap canvas{width:210px;height:210px}

.dp-paywith-label{font-size:12.5px;color:var(--muted);margin:16px 0 8px}
.dp-paywith{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:10px}
.pay-app{
  display:flex;flex-direction:column;align-items:center;gap:6px;padding:11px 4px;
  background:#fff;border:1px solid var(--line);border-radius:13px;
  text-decoration:none;color:var(--ink);
}
.pay-app:active{transform:scale(.97);background:var(--bg)}
.pa-ico{
  width:26px;height:26px;border-radius:9px;display:grid;place-items:center;
  color:#fff;font-size:11px;font-weight:800;
}
.pa-ico.g{background:linear-gradient(135deg,#4285f4,#34a853)}
.pa-ico.p{background:#5f259f}
.pa-ico.pm{background:#00b9f1}
.pa-ico.u{background:var(--ink)}
.pa-name{font-size:10.5px;font-weight:700;text-align:center;line-height:1.2}

.dp-divider{display:flex;align-items:center;gap:10px;margin:18px 0 14px}
.dp-divider:before,.dp-divider:after{content:"";flex:1;height:1px;background:var(--line)}
.dp-divider span{font-size:12px;color:var(--muted);white-space:nowrap}

.dp-review{text-align:center;margin-bottom:16px}
.dp-review-ico,.dp-done-ico,.dp-fail-ico{
  width:60px;height:60px;border-radius:50%;display:grid;place-items:center;margin:6px auto 14px;
  font-size:26px;font-weight:800;
}
.dp-review-ico{background:#eef4ff}
.dp-done-ico{background:#e7f9ef;color:var(--green-d)}
.dp-fail-ico{background:#ffe9eb;color:var(--red-d)}
.dp-review .countdown{margin-top:12px}
.dp-link-cta{display:block;text-align:center;text-decoration:none;margin-top:6px}

/* ================= welcome popup ================= */
.welcome-overlay{
  position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;
  padding:22px;background:rgba(20,24,33,.62);backdrop-filter:blur(2px);
  animation:wfade .18s ease;
}
@keyframes wfade{from{opacity:0}to{opacity:1}}
.welcome-card{
  position:relative;width:100%;max-width:390px;background:#fff;border-radius:22px;
  padding:24px 20px 18px;text-align:center;box-shadow:0 24px 60px rgba(15,20,32,.35);
  animation:wpop .22s ease;
}
@keyframes wpop{from{transform:translateY(14px) scale(.97);opacity:.6}to{transform:none;opacity:1}}
.welcome-close{
  position:absolute;top:10px;right:12px;background:none;border:0;color:var(--muted);
  font-size:24px;line-height:1;cursor:pointer;padding:4px;
}
.welcome-logo{
  width:58px;height:58px;border-radius:18px;margin:2px auto 14px;
  background:linear-gradient(140deg,#ff4757,#9b59b6);color:#fff;font-size:26px;font-weight:800;
  display:grid;place-items:center;box-shadow:0 10px 24px rgba(155,89,182,.32);
}
.welcome-card h2{font-size:19px;font-weight:800;margin:0 0 4px;line-height:1.3}
.welcome-hello{font-size:12.5px;color:var(--muted);margin:0 0 16px}
.welcome-list{
  list-style:none;margin:0 0 18px;padding:0;text-align:left;
  background:var(--bg);border-radius:14px;padding:12px 14px;
}
.welcome-list li{
  position:relative;padding:7px 0 7px 24px;font-size:13.5px;line-height:1.4;
  border-bottom:1px solid rgba(47,53,66,.06);
}
.welcome-list li:last-child{border-bottom:0}
.welcome-list li:before{
  content:"";position:absolute;left:4px;top:13px;width:8px;height:8px;border-radius:50%;
  background:linear-gradient(135deg,#ff4757,#9b59b6);
}
.welcome-tg{
  display:flex;align-items:center;justify-content:center;gap:8px;
  text-decoration:none;background:#229ED9;margin-bottom:10px;
}
.welcome-tg:active{filter:brightness(.95)}
.welcome-skip{
  display:block;width:100%;margin-top:6px;background:none;border:0;
  color:var(--muted);font-size:13px;font-weight:600;padding:10px;cursor:pointer;
}

/* ================= withdrawal reward ================= */
.reward-card{
  background:linear-gradient(150deg,#fff8e6,#fff);border:1px solid #ffe4ad;
}
.rw-head{display:flex;gap:12px;align-items:flex-start;margin-bottom:12px}
.rw-ico{
  width:44px;height:44px;flex:0 0 44px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(140deg,#ffb020,#ff8a00);color:#fff;font-size:14px;font-weight:800;
}
.rw-title{font-size:14.5px;font-weight:800}
.rw-sub{font-size:12px;color:var(--muted);line-height:1.45;margin-top:2px}
.rw-line{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:10px 0;border-top:1px solid rgba(255,180,60,.25);font-size:12.5px;color:var(--muted)}
.rw-btn{
  background:var(--ink);color:#fff;border:0;border-radius:10px;padding:8px 14px;
  font-size:12.5px;font-weight:800;cursor:pointer;white-space:nowrap;
}
.rw-code{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  background:#fff;border:1px dashed #ffb020;border-radius:12px;padding:10px 12px;margin-bottom:8px;
}
.rw-code span{display:block;font-size:11px;color:var(--muted)}
.rw-code strong{font-size:15px;letter-spacing:1.5px}
.rw-mini{background:var(--bg);border:0;border-radius:9px;padding:7px 12px;font-size:12px;font-weight:700;cursor:pointer}
.rw-steps{margin:0 0 14px;padding-left:18px;font-size:13px;color:var(--ink);line-height:1.6}
.rw-steps li{margin-bottom:6px}
.rw-group{display:flex;align-items:center;justify-content:center;text-decoration:none;background:#229ED9;margin-bottom:10px}
.rw-check{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;color:var(--ink);
  background:var(--bg);border-radius:11px;padding:11px 12px;margin:12px 0}
.rw-check input{margin-top:2px;width:16px;height:16px;accent-color:#4f7cff}
#rwRequest{margin-top:2px}
.welcome-tgsup{margin-bottom:10px;color:#1f7fa8;border-color:#bfe3f2;font-weight:700}

/* ================= win / loss popup ================= */
.result-overlay{
  position:fixed;inset:0;z-index:85;display:flex;align-items:center;justify-content:center;
  padding:22px;background:rgba(20,24,33,.62);animation:wfade .16s ease;
}
.result-card{
  width:100%;max-width:340px;background:#fff;border-radius:22px;padding:26px 20px 18px;
  text-align:center;box-shadow:0 24px 60px rgba(15,20,32,.35);animation:wpop .2s ease;
}
.result-ico{
  width:66px;height:66px;border-radius:50%;margin:0 auto 14px;display:grid;place-items:center;
  font-size:30px;font-weight:800;color:#fff;
}
.result-card.win .result-ico{background:linear-gradient(140deg,#2ed573,#12a45c);box-shadow:0 10px 26px rgba(46,213,115,.35)}
.result-card.lose .result-ico{background:linear-gradient(140deg,#ff6b7a,#e8384a);box-shadow:0 10px 26px rgba(255,71,87,.28)}
.result-card h2{font-size:20px;font-weight:800;margin:0 0 4px}
.result-card.win h2{color:#128a4d}
.result-card.lose h2{color:var(--ink)}
.result-sub{font-size:12.5px;color:var(--muted);margin:0 0 16px}
.result-rows{background:var(--bg);border-radius:14px;padding:10px 14px;margin-bottom:16px}
.rr{display:flex;justify-content:space-between;padding:5px 0;font-size:13px}
.rr span{color:var(--muted)}

/* ================= history summary ================= */
.hist-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:14px 12px}
.hist-summary.two{grid-template-columns:repeat(2,1fr)}
.hist-summary.two .hs-item{text-align:left;padding-left:6px}
.hs-item{text-align:center}
.hs-item span{display:block;font-size:10.5px;color:var(--muted);margin-bottom:2px}
.hs-item strong{font-size:13.5px;font-weight:800}
.hist-filters{margin:2px 0 10px}
.hist-filters .chip{padding:6px 14px;font-size:12.5px}

/* ================= VIP check ================= */
.vip-hero{display:flex;align-items:center;gap:12px;background:linear-gradient(140deg,#2f3542,#3d4351);
  border-radius:16px;padding:16px;color:#fff;margin-bottom:14px}
.vip-badge{background:#ffd32a;color:#3d3200;font-size:12px;font-weight:800;border-radius:999px;padding:6px 12px}
.vip-name{font-size:16px;font-weight:800}
.vip-sub{font-size:12px;color:#b7bdc9;margin-top:2px}
.vip-progress{background:var(--bg);border-radius:14px;padding:13px 14px;margin-bottom:14px}
.vp-top{display:flex;justify-content:space-between;font-size:12.5px;color:var(--muted);margin-bottom:8px}
.vp-top strong{color:var(--ink)}
.vp-bar{height:8px;border-radius:99px;background:#e3e7ee;overflow:hidden}
.vp-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#ffb020,#ff8a00)}
.vp-note{font-size:11.5px;color:var(--muted);margin-top:7px}
.vip-list-title{font-size:12.5px;color:var(--muted);margin:4px 0 8px}
.vip-list{display:flex;flex-direction:column;gap:6px}
.vip-row{display:flex;align-items:center;gap:12px;background:var(--bg);border-radius:12px;padding:10px 12px;opacity:.6}
.vip-row.reached{opacity:1;background:#f2fbf6}
.vr-lvl{width:26px;height:26px;border-radius:9px;background:#fff;display:grid;place-items:center;font-size:12px;font-weight:800}
.vip-row.reached .vr-lvl{background:linear-gradient(140deg,#2ed573,#12a45c);color:#fff}
.vr-main{flex:1}
.vr-name{font-size:13px;font-weight:700}
.vr-sub{font-size:11px;color:var(--muted)}
.vr-reb{font-size:12px;font-weight:800;color:#b06f00}

/* ================= history tabs ================= */
.hist-tabs{margin-bottom:12px;background:#fff;box-shadow:var(--shadow)}
.hist-tabs .seg-btn{font-size:13.5px;padding:9px}

/* my bets: last 5 divider */
.mb-divider{display:flex;align-items:center;gap:10px;margin:14px 0 4px}
.mb-divider:before,.mb-divider:after{content:"";flex:1;height:1px;background:var(--line)}
.mb-divider span{font-size:11.5px;color:var(--muted);white-space:nowrap;font-weight:600}