/* niveaman — sky blue + white VIP theme, mobile-first (max-width 480px app shell)
 * fix29: professional light theme — sky blue + white dominant, gold kept
 * only as a minimal accent (logo, VIP badges, tiny highlights). NO BLACK
 * anywhere: text is dark navy/slate, overlays are translucent navy. */
:root{
  --bg:#e8f6fe; --bg2:#d6eefc; --card:#ffffff; --card2:#f0f9ff;
  --sky:#0ea5e9; --sky2:#0284c7; --sky3:#38bdf8; --navy:#0c2d4a;
  --red:#e11d2e; --red2:#b30f1f; --gold1:#f7d774; --gold2:#d4a017;
  --text:#0f2a43; --muted:#5b7290; --line:#cfe8f7; --green:#16a34a;
  --radius:14px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:#e8f6fe;background:linear-gradient(160deg,#d9f0fd 0%,#f0f9ff 45%,#d9f0fd 100%) fixed;color:var(--text);font-family:"Hind Siliguri",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:15px;line-height:1.5;-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
.app{max-width:480px;margin:0 auto;background:transparent;min-height:100vh;position:relative;padding:0 14px 220px}
h1{font-size:20px;margin:14px 0 10px}
h2{font-size:18px;margin:14px 0 8px}
h3{font-size:16px;margin:12px 0 6px}
h4{font-size:14px;margin:12px 0 6px;color:var(--muted)}
.muted{color:var(--muted)}
.small{font-size:12px}
.green{color:var(--green)}
.red{color:#dc2626}
.gold{color:#b45309}

/* Buttons — sky-blue gradient primary (legacy class name btn-gold kept,
   so no PHP changes are needed); gold is a minimal accent only. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:10px;
  padding:11px 18px;font-size:15px;font-weight:700;min-height:46px}
.btn-gold{background:linear-gradient(135deg,var(--sky3),var(--sky2));color:#fff;box-shadow:0 4px 14px rgba(2,132,199,.30)}
.btn-red{background:linear-gradient(135deg,#ff2e42,var(--red2));color:#fff}
.btn-dark{background:#fff;color:var(--navy);border:1px solid var(--line)}
.btn-white{background:#fff;color:var(--navy);border:1px solid var(--line)}
.btn-block{width:100%}
.btn-sm{padding:6px 12px;min-height:32px;font-size:13px;border-radius:8px}
.btn:disabled{opacity:.45;cursor:not-allowed}

/* Cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px;margin:10px 0;box-shadow:0 2px 12px rgba(2,132,199,.07)}
.card-dark{background:linear-gradient(160deg,#38bdf8,#0284c7 55%,#0369a1);border:1px solid #0284c7;color:#fff;box-shadow:0 6px 20px rgba(2,132,199,.35)}
.card-dark .muted{color:rgba(255,255,255,.85)}
.card-dark .pill-green{background:rgba(255,255,255,.22);color:#fff}
.card-dark .pill-dim{background:rgba(255,255,255,.18);color:#fff}
.card-dark .btn-gold{background:#fff;color:var(--sky2);box-shadow:0 4px 12px rgba(3,105,161,.30)}
.card-dark .btn-dark{background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.65)}
.card-dark .green{color:#bbf7d0}
.card-dark .stat3 .stat .green{color:var(--green)}
.card-light{background:#f0f9ff;color:var(--text);border:1px solid var(--line)}
.card-light .muted{color:var(--muted)}
.balance-card .bc-top{display:flex;justify-content:space-between;color:rgba(255,255,255,.85);font-size:13px}
.balance-card .bc-amount{font-size:34px;font-weight:800;margin:6px 0}
.balance-card .bc-row{display:flex;justify-content:space-between;color:rgba(255,255,255,.85);font-size:13px;margin:10px 0}
.eye{background:none;border:0;font-size:18px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pill-green{display:inline-block;background:#dcfce7;color:#15803d;border-radius:20px;padding:3px 10px;font-size:12px;font-weight:700}
.pill-dim{display:inline-block;background:#e0f2fe;color:#0369a1;border-radius:20px;padding:3px 10px;font-size:12px;margin-left:6px}
.badge{display:inline-block;background:var(--red);color:#fff;border-radius:12px;padding:1px 8px;font-size:11px;font-weight:700}
.badge-green{background:var(--green)}
.badge-gold{background:linear-gradient(135deg,var(--gold1),var(--gold2));color:var(--navy)}

/* Forms */
label{display:block;font-size:13px;color:var(--muted);margin:12px 0 4px}
input[type=text],input[type=password],input[type=number],input[type=tel],input[type=email],select,textarea{
  width:100%;background:#fff;border:1px solid var(--line);color:var(--text);
  border-radius:10px;padding:12px;font-size:15px;font-family:inherit}
input:focus,select:focus,textarea:focus{outline:2px solid var(--sky2)}
.phone-wrap{display:flex;gap:8px;align-items:center}
.phone-wrap .prefix{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px;font-weight:700}
.check{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--muted);margin:10px 0}
.chip-row{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:#fff;border:1px solid var(--line);border-radius:20px;padding:7px 14px;font-size:13px;color:var(--text)}
.chip.active{background:linear-gradient(135deg,var(--sky3),var(--sky2));color:#fff;border-color:transparent;font-weight:700}
/* Top-up amount picker — VIP chips (8) in a 4x2 grid, blinking sky glow */
.vip-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:10px 0}
.vip-chip{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 2px;text-align:center;cursor:pointer;font-family:inherit;color:var(--text);animation:chipGlow 1.8s ease-in-out infinite}
.vip-chip b{display:block;font-size:15px;font-weight:700}
.vip-chip span{font-size:11px;color:var(--muted)}
.vip-chip.active{border-color:var(--sky2);background:linear-gradient(135deg,var(--sky3),var(--sky2));color:#fff;animation:none}
.vip-chip.active span{color:rgba(255,255,255,.85)}
@keyframes chipGlow{0%,100%{box-shadow:0 0 0 rgba(14,165,233,0);border-color:var(--line)}50%{box-shadow:0 0 10px rgba(14,165,233,.45);border-color:rgba(14,165,233,.75)}}
@media (prefers-reduced-motion:reduce){.vip-chip{animation:none}.ticker-label{animation:none}}
/* FIX30: theme toggle (sun/moon) button in page headers. */
.theme-toggle{flex:0 0 auto;width:38px;height:38px;border-radius:50%;background:var(--card);border:1px solid var(--line);color:var(--text);font-size:18px;line-height:1;display:inline-flex;align-items:center;justify-content:center;padding:0;box-shadow:0 2px 8px rgba(2,132,199,.12)}
.theme-toggle:active{transform:scale(.94)}
/* Top-up amount display + payment selectors */
.amt-big{text-align:center;margin:8px 0 2px}
.amt-big .amt{font-size:44px;font-weight:800;line-height:1.1}
.pay-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pay-opt{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px;cursor:pointer;font-size:15px}
.pay-opt input{accent-color:var(--sky2)}
.pay-opt:has(input:checked){border-color:var(--sky2);background:rgba(14,165,233,.08)}
/* Top-up method boxes (fix23): two side-by-side brand cards instead of
 * the old radio row + picture. The picture no longer shows on the form
 * page at all — it appears only on the order page (Step 1). The radio
 * stays inside the label, so the method still posts as bkash/nagad. */
.method-grid{margin:10px 0}
.method-box{flex-direction:column;justify-content:center;text-align:center;padding:18px 10px 14px;position:relative;overflow:hidden}
.method-box input{position:absolute;opacity:0;width:0;height:0}
/* FIX27: the real brand logos sit in a light rounded chip so the
 * white-background artwork looks clean; the chip keeps a brand-tinted
 * ring. Layout, names, subtitles, the ✓ badge and the :checked styling
 * are unchanged. */
.method-ico{width:88px;height:58px;border-radius:14px;background:#fff;padding:6px 8px;display:flex;align-items:center;justify-content:center;margin:0 auto 8px;box-shadow:0 4px 12px rgba(12,45,74,.16)}
.method-ico img{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;display:block;flex:none}
.method-bkash .method-ico{border:2px solid #f4237f}
.method-nagad .method-ico{border:2px solid #ef6c00}
.method-name{font-size:18px;font-weight:800}
.method-bkash .method-name{color:#e2136e}
.method-nagad .method-name{color:#e8590c}
.method-check{position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,var(--sky3),var(--sky2));color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;opacity:0;transition:opacity .15s}
.method-box:has(input:checked){border-color:var(--sky2);background:rgba(14,165,233,.08);box-shadow:0 0 0 1px var(--sky2)}
.method-box:has(input:checked) .method-check{opacity:1}
.method-bkash:has(input:checked){box-shadow:0 0 0 1px var(--sky2),0 6px 18px rgba(226,19,110,.25)}
.method-nagad:has(input:checked){box-shadow:0 0 0 1px var(--sky2),0 6px 18px rgba(246,146,30,.25)}
/* Order Step 1 receiver number (fix23): large number + Copy button,
 * above the method picture. Number comes from pay_to_number() — never
 * hardcoded. Hidden when no receiver number is configured. */
.receiver-box{background:rgba(14,165,233,.08);border:1px solid var(--sky2);border-radius:12px;padding:12px;margin:12px 0 4px}
.receiver-label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}
.receiver-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.receiver-num{font-size:30px;font-weight:800;letter-spacing:1px;color:var(--navy);word-break:break-all}
.receiver-copy{flex:none;padding:8px 16px;min-height:38px;font-size:14px}
.line-opt{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px;cursor:pointer;margin:8px 0}
.line-opt input{accent-color:var(--sky2)}
.line-opt:has(input:checked){border-color:var(--sky2);background:rgba(14,165,233,.08)}
.line-opt .rec{color:var(--sky2);font-size:12px;font-weight:700;margin-left:6px}
.info-list{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:8px}
.info-list li{font-size:13px;color:var(--muted)}
.info-list li b{color:var(--text)}
/* Top-up sticky pay button + step-by-step payment page (fix16) */
.sticky-pay{position:fixed;left:50%;transform:translateX(-50%);bottom:62px;width:100%;max-width:480px;
  padding:12px 14px calc(10px + env(safe-area-inset-bottom));z-index:39;
  background:linear-gradient(180deg,rgba(232,246,254,0),#e8f6fe 45%)}
.sticky-pay .btn{min-height:50px;font-size:16px;border-radius:12px;box-shadow:0 6px 18px rgba(2,132,199,.28)}
.sticky-spacer{height:72px}
/* Floating buttons sit above the sticky pay bar while it is on screen —
 * the dock keeps its 64px stacking gap (support 168px, spin above it). */
body:has(.sticky-pay) .fab-support{bottom:168px}
body:has(.sticky-pay) .fab-spin{bottom:232px}
.step-no{color:var(--sky2);font-weight:800}
.cashout-note{background:rgba(14,165,233,.10);border:1px solid var(--sky2);color:#0369a1;
  border-radius:10px;padding:10px 12px;font-weight:700;margin:10px 0 0}
.pay-opts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}
.pay-opt-chip{background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 2px;
  text-align:center;font-size:11px;color:var(--muted)}
.pay-opt-chip.hot{border-color:var(--red);background:#fee2e2;color:#b91c1c;font-weight:700;
  box-shadow:0 0 0 1px var(--red)}
.radio-row{display:flex;gap:10px;flex-wrap:wrap}
.radio-pill{flex:1;min-width:90px;text-align:center;background:#fff;border:1px solid var(--line);border-radius:10px;padding:11px;cursor:pointer}
.radio-pill input{display:none}
.radio-pill.on{border-color:var(--sky2);background:rgba(14,165,233,.08)}

/* Cash-out page (fix18): ASML-style withdraw flow, sky-blue VIP theme */
.wd-hero{background:linear-gradient(160deg,#38bdf8,#0284c7 55%,#0369a1);border-radius:16px;padding:16px;margin:10px 0;color:#fff;box-shadow:0 6px 20px rgba(2,132,199,.35)}
.wd-hero-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.wd-hero .muted{color:#dbeafe}
.wd-hero .green{color:#bbf7d0}
.wd-hero .locked-note{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.45)}
.wd-window{background:rgba(255,255,255,.20);border-radius:20px;padding:4px 12px;font-size:12px;font-weight:700;white-space:nowrap}
.wd-bal{font-size:40px;font-weight:800;line-height:1.1}
.wd-banner{display:flex;align-items:center;gap:8px;background:#fff;color:var(--navy);border-radius:12px;padding:12px;margin-top:12px;font-weight:700}
.wd-banner-ico{width:26px;height:26px;border-radius:50%;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;flex:none;font-weight:800}
.wd-banner-off{background:#e0f2fe;color:var(--navy)}
.wd-amt-row{display:flex;align-items:center;justify-content:center;gap:6px}
.wd-amt-row .wd-cur{font-size:32px;font-weight:800}
#wdAmtInput{width:150px;text-align:center;font-size:40px;font-weight:800;border:0;background:transparent;color:var(--text);padding:0;font-family:inherit}
#wdAmtInput:focus{outline:none}
.wd-max{background:rgba(14,165,233,.10);border:1px solid var(--sky2);color:var(--sky2);border-radius:10px;padding:6px 12px;font-weight:700;cursor:pointer;font-family:inherit}
.wd-dest{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px;margin:10px 0}
.step.current .n{background:var(--sky2);color:#fff}
.step.cancelled .n{background:var(--red);color:#fff}
.tl-time{margin-left:auto;font-size:12px;color:var(--muted);white-space:nowrap}
.tl-now{color:var(--sky2);font-weight:700}

/* Lists */
.list-row{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);
  border-radius:12px;padding:13px;margin:8px 0;color:var(--text);width:100%;text-align:left}
.list-row .ico{font-size:20px}
.list-row b{font-size:15px}
.list-row small{color:var(--muted)}
.list-row .chev{margin-left:auto;font-size:20px;color:var(--muted)}
.list-row .grow{flex:1}
.progress{height:6px;background:#dbeeff;border-radius:4px;overflow:hidden}
.progress>i{display:block;height:100%;background:linear-gradient(90deg,var(--sky3),var(--sky2))}
.progress.red>i{background:linear-gradient(90deg,#ff2e42,var(--red2))}
.steps{display:grid;gap:8px}
.step{display:flex;gap:10px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:11px}
.step .n{width:26px;height:26px;border-radius:50%;background:#e0f2fe;color:var(--navy);display:flex;align-items:center;justify-content:center;font-weight:700;flex:none}
.step.done .n{background:var(--green);color:#fff}
.step b{font-size:14px}

/* Plans */
.plans-list .plan-card,.plan-card{font-family:"Hind Siliguri",-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
.plan-card{background:#fff;color:var(--text);border:1px solid var(--line);border-radius:16px;padding:14px;margin:12px 0;position:relative;border-top:3px solid var(--gold2);box-shadow:0 2px 12px rgba(2,132,199,.07)}
.plan-card .tier{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#92600a}
.plan-card h3{font-size:24px;font-weight:800;letter-spacing:.01em;margin:2px 0;color:var(--navy)}
.plan-card .machine{color:#47617d;font-size:14px;font-weight:500}
.plan-card .daily{color:var(--green);font-size:24px;font-weight:800}
.plan-card .price{font-size:17px;font-weight:800}
.plan-card .foot{font-size:12px;color:var(--muted);border-top:1px solid var(--line);margin-top:10px;padding-top:8px}
.plan-card .own{position:absolute;top:12px;right:12px}
.plan-hero{background:linear-gradient(160deg,#38bdf8,#0284c7 55%,#0369a1);border-radius:16px;padding:16px;margin:10px 0;color:#fff;box-shadow:0 6px 20px rgba(2,132,199,.35)}
.plan-hero .green{color:#bbf7d0}
.plan-hero .green small{color:#dbeafe !important}
.ring{width:150px;height:150px;border-radius:50%;margin:10px auto;position:relative;
  background:conic-gradient(var(--gold2) calc(var(--p,0)*1%),#dbeeff 0);
  display:flex;align-items:center;justify-content:center}
.ring::before{content:"";position:absolute;inset:12px;border-radius:50%;background:#fff}
.ring .ring-in{position:relative;text-align:center}
.ring .ring-in b{font-size:26px}
.stat3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin:10px 0}
.stat3 .stat{background:#fff;color:var(--text);border:1px solid var(--line);border-radius:12px;padding:10px;text-align:center}
.stat3 .stat b{display:block;font-size:15px}
.stat3 .stat span{font-size:11px;color:var(--muted)}
.kv{display:grid;gap:8px}
.kv div{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding:7px 0}
.kv div:last-child{border-bottom:0}
table.cmp{width:100%;border-collapse:collapse;font-size:13px;background:var(--card);border-radius:12px;overflow:hidden}
table.cmp th,table.cmp td{padding:9px 6px;border-bottom:1px solid var(--line);text-align:center}
table.cmp th:first-child,table.cmp td:first-child{text-align:left}

/* Bottom nav */
.bottom-nav{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:480px;
  background:#fff;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr 1fr 1fr 1fr;
  padding:6px 4px calc(8px + env(safe-area-inset-bottom));z-index:40;box-shadow:0 -2px 14px rgba(2,132,199,.10)}
.nav-item{display:flex;flex-direction:column;align-items:center;font-size:11px;color:var(--muted);padding:4px 0}
.nav-item.active{color:var(--sky2)}
.nav-ico{font-size:20px}
.nav-plus{width:52px;height:52px;border-radius:50%;border:3px solid #fff;margin:-26px auto 0;position:relative;
  background:linear-gradient(135deg,#ff2e42,var(--red2));color:#fff;font-size:26px;font-weight:800;box-shadow:0 4px 14px rgba(225,29,46,.4)}
.nav-badge{position:absolute;top:-4px;right:-4px;background:var(--red);border:2px solid #fff;color:#fff;
  font-size:10px;min-width:18px;height:18px;border-radius:10px;display:flex;align-items:center;justify-content:center}

/* Floating buttons — fix29 part 3: a clean stacked dock at the
 * bottom-right, just above the bottom nav, so the buttons never park
 * over the balance card, buttons or card text on a phone. Both buttons
 * share the right edge of the app shell; spin sits above support with
 * a 12px gap. The fix22 drag module still moves each button anywhere
 * and saves its position (fab_pos2_* keys). The .app bottom padding
 * (220px) clears the whole dock, so at max scroll no button or card
 * text ever sits under the docked buttons. */
.fab{position:fixed;z-index:39;width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:24px;border:0;box-shadow:0 4px 14px rgba(12,45,74,.28);bottom:96px;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;cursor:grab;overflow:hidden;padding:0}
.fab img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;-webkit-user-drag:none;user-select:none;pointer-events:none}
.fab.dragging{cursor:grabbing}
.fab-spin{right:max(12px,calc(50% - 240px + 12px));bottom:160px;background:linear-gradient(135deg,#ff8a00,#ff5e00)}
.fab-support{right:max(12px,calc(50% - 240px + 12px));bottom:96px;background:#2563eb;color:#fff}

/* Sheets & modals — navy translucent overlays, white cards (no black) */
.sheet{position:fixed;inset:0;background:rgba(12,45,74,.55);z-index:60;display:none;align-items:flex-end;justify-content:center}
.sheet.open{display:flex}
.sheet-card{background:#fff;border:1px solid var(--line);border-radius:18px 18px 0 0;width:100%;max-width:480px;max-height:82vh;overflow:auto;padding:18px 16px 26px}
.sheet-eyebrow{font-size:11px;letter-spacing:.12em;color:var(--muted);font-weight:700}
.modal{position:fixed;inset:0;background:rgba(12,45,74,.55);z-index:70;display:flex;padding:20px;overflow-y:auto}
.modal-card{background:#fff;border:1px solid var(--line);border-radius:16px;max-width:420px;width:100%;padding:20px;position:relative;margin:auto;box-shadow:0 10px 34px rgba(12,45,74,.25)}
.popup-card{max-width:280px;width:86vw;text-align:center;padding:12px}
.popup-gif{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--line)}
.modal-x{position:absolute;top:8px;right:8px;min-width:40px;min-height:40px;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--line);border-radius:50%;color:var(--navy);font-size:18px;line-height:1;z-index:2;cursor:pointer;box-shadow:0 2px 8px rgba(12,45,74,.18)}
.modal-eyebrow{font-size:11px;letter-spacing:.1em;color:var(--sky2);font-weight:700}

/* Announcement dialog — ASML-style white card (fix13) */
.ann-card{background:#fff;color:#1e3a52;border:1px solid #dbeeff;border-radius:20px;max-width:420px;padding:0;max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px);display:flex;flex-direction:column;overflow:hidden}
.ann-card .modal-x{background:#fff;color:var(--navy);border:1px solid #dbeeff;box-shadow:0 2px 8px rgba(12,45,74,.15)}
/* fix19: the announcement is taller than a phone screen, so the card is
   capped to the viewport and only its middle scrolls — the X header and
   the close footer stay visible at all times. Before this the flex-centred
   card overflowed top AND bottom with no scroll, hiding both close controls. */
.ann-head{flex:0 0 auto;display:flex;justify-content:flex-end;padding:12px 12px 0}
.ann-head .modal-x{position:static;flex:0 0 auto}
.ann-body{flex:1 1 auto;overflow-y:auto;min-height:0;padding:0 20px 8px;overscroll-behavior:contain}
.ann-foot{flex:0 0 auto;padding:12px 20px 20px;background:#fff;border-top:1px solid #dbeeff}
.ann-foot .check{margin:0 0 12px}
.ann-bell{width:64px;height:64px;border-radius:18px;background:linear-gradient(135deg,#3b82f6,#38bdf8);display:flex;align-items:center;justify-content:center;font-size:30px;box-shadow:0 6px 16px rgba(59,130,246,.4)}
.ann-badge{display:inline-block;margin-top:14px;padding:4px 12px;border-radius:999px;background:#dbeafe;color:#1d4ed8;font-weight:700;font-size:14px}
.ann-title{font-size:26px;font-weight:800;color:var(--navy);margin:14px 0 6px}
.ann-welcome{font-size:26px;font-weight:800;color:#47617d;margin:0 0 10px}
.ann-sub{color:var(--muted);font-size:16px;line-height:1.5;margin:0 0 14px}
.ann-benefits{list-style:none;margin:0 0 16px;padding:0}
.ann-benefits li{color:#47617d;font-size:16px;line-height:1.55;margin-bottom:12px}
.ann-benefits li b{color:#1e3a52}
.ann-custom{color:var(--muted)}
.ann-tg{display:flex;flex-direction:column;gap:10px;margin:4px 0 12px}
.btn-tg-group{background:linear-gradient(135deg,#2563eb,#38bdf8);color:#fff;border:0;border-radius:999px;padding:14px 18px;font-size:17px;box-shadow:0 6px 16px rgba(37,99,235,.35)}
.btn-tg-channel{background:#fff;color:var(--navy);border:1px solid #dbeeff;border-radius:999px;padding:14px 18px;font-size:17px;box-shadow:0 4px 12px rgba(12,45,74,.10)}
.ann-card .check{color:#47617d}

/* Flash */
.flash{border-radius:10px;padding:11px 14px;margin:10px 0;font-size:14px}
.flash-ok{background:#dcfce7;border:1px solid #86efac;color:#15803d}
.flash-err{background:#fee2e2;border:1px solid #fca5a5;color:#b91c1c}

/* Header / auth */
.auth-wrap{padding-top:30px}
.logo{text-align:center;font-size:34px;font-weight:900;letter-spacing:.02em;margin:10px 0 2px}
/* FIX32: the brand logo is the wide swoosh wordmark (transparent PNG,
 * aspect ~1.83:1) — constrain by WIDTH, height auto, never distorted,
 * no overflow at 390px. It always sits in a white rounded pill (BOTH
 * themes): the wordmark starts dark navy and would vanish on the dark
 * theme's navy background. Same light-chip precedent as the fix27
 * method logos. */
.logo img{width:260px;max-width:78vw;height:auto;display:block;margin:0 auto;
  background:#fff;border:1px solid var(--line);border-radius:18px;padding:10px 18px;
  box-shadow:0 2px 12px rgba(2,132,199,.12)}
.logo span{background:linear-gradient(135deg,var(--sky3),var(--sky2));-webkit-background-clip:text;background-clip:text;color:transparent}
.tagline{text-align:center;color:var(--muted);font-size:13px;margin-bottom:18px}
.banner{background:linear-gradient(135deg,var(--sky3),var(--sky2));color:#fff;border-radius:12px;padding:12px;text-align:center;font-weight:700;margin:12px 0;box-shadow:0 4px 14px rgba(2,132,199,.30)}
.subhead{display:flex;align-items:center;gap:12px}
.subhead .back{font-size:28px;color:var(--muted);padding:0 6px}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:10px 0}
.tile{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 4px;text-align:center;font-size:12px;position:relative}
.tile .ico{font-size:22px;display:block}
.tile small{color:var(--muted);display:block;font-size:11px}
.tile .tbadge{position:absolute;top:6px;right:6px}
.wheel-pointer{text-align:center;font-size:20px;color:var(--sky2);line-height:1;margin-top:4px}
.plan-img{display:block;width:100%;height:160px;object-fit:cover;border-radius:10px;margin:8px 0 2px}
.plan-hero-img{display:block;width:100%;height:160px;object-fit:cover;border-radius:12px;margin-bottom:10px}
.wheel-wrap{text-align:center}
.wheel{width:290px;height:290px;margin:10px auto;position:relative}
.wheel svg{width:100%;height:100%;transition:transform 4s cubic-bezier(.12,.8,.08,1)}
.wheel .hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:86px;height:86px;border-radius:50%;
  background:linear-gradient(135deg,var(--gold1),var(--gold2));color:var(--navy);display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:800;border:4px solid var(--navy)}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center;font-size:12px}
.cal .d{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:8px 0}
.cal .d.done{background:#dcfce7;border-color:var(--green)}
.cal .d.today{border-color:var(--sky2);box-shadow:0 0 0 1px var(--sky2)}
.cal .h{color:var(--muted);font-weight:700;padding:4px 0}
.daycards{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.daycard{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:8px 2px;text-align:center;font-size:11px}
.daycard.done{background:#dcfce7;border-color:var(--green)}
.daycard.today{border-color:var(--sky2)}
.daycard b{display:block;font-size:13px}
.chart{display:flex;align-items:flex-end;gap:6px;height:110px;padding:10px 0 0}
.chart .bar{flex:1;background:linear-gradient(180deg,var(--sky3),var(--sky2));border-radius:4px 4px 0 0;min-height:3px}
.tabs{display:flex;gap:8px;overflow-x:auto;padding:4px 0}
.tab{flex:1;white-space:nowrap;background:#fff;border:1px solid var(--line);border-radius:20px;padding:8px 14px;font-size:13px;text-align:center;color:var(--text)}
.tab.active{background:linear-gradient(135deg,var(--sky3),var(--sky2));color:#fff;font-weight:700;border-color:transparent}
.footer{text-align:center;color:var(--muted);font-size:12px;margin:26px 0 10px}
.admin .app{max-width:960px}
.admin-nav{display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px;margin:10px 0}
.admin-nav a{padding:8px 10px;border-radius:8px;font-size:14px}
.admin-nav a.active{background:linear-gradient(135deg,var(--sky3),var(--sky2));color:#fff;font-weight:700}
.admin-nav .brand{font-weight:900;font-size:18px;margin-right:auto}
.admin-nav .brand span{color:var(--sky2);font-size:12px}
table.admin-t{width:100%;border-collapse:collapse;font-size:13px}
table.admin-t th,table.admin-t td{padding:8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
table.admin-t th{color:var(--muted);font-size:12px}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.stat-grid .stat{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px}
.stat-grid .stat b{font-size:20px;display:block}
.stat-grid .stat span{font-size:12px;color:var(--muted)}
@media (max-width:520px){.stat-grid{grid-template-columns:repeat(2,1fr)}.stat3 .stat b{font-size:13px}}

/* "Get the App" card (fix20 h): mobile-friendly — the button is
   full-width (btn-block) on small screens. */
.app-card-top{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.app-logo{width:48px;height:48px;border-radius:12px;object-fit:cover;border:1px solid var(--sky2)}
.app-dl-btn{margin:2px 0 12px;text-align:center}
.app-steps{margin:0;padding-left:20px}
.app-steps li{margin:8px 0;line-height:1.45}
.app-steps li b{font-size:14px}
/* fix21: congratulations view of the app card (inside the official app
   only) + the plain footer link to the Get-the-App page. */
.app-congrats{text-align:center;padding:6px 4px 2px}
.app-congrats-ico{font-size:40px;line-height:1.2}
.app-congrats h3{margin:8px 0 4px;font-size:17px;line-height:1.5}
.app-congrats p{margin:0}

/* FIX27: TV-style scrolling headline ticker (বিশেষ বিজ্ঞপ্তি) on Home,
 * at the very top of the page, above the profile/greeting row (fix28).
 * The label is a fixed badge; the text flows horizontally in a seamless
 * loop (four identical spans, -50% translation). Hidden when the admin
 * leaves the ticker text empty.
 * FIX29: the scroll is TWICE as slow (40s) so people can read it.
 * FIX29 part 3: the track needs min-width:0 — without it a flex item
 * never shrinks below its (very wide, duplicated) content, so the text
 * ran past the container edge instead of clipping inside the track. */
.ticker-wrap{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--sky2);border-radius:12px;padding:8px 12px;overflow:hidden;margin:12px 0;box-shadow:0 2px 10px rgba(2,132,199,.10)}
/* FIX30: the label stays RED and BLINKS (gentle pulse). The scrolling
 * text itself does not blink. */
.ticker-label{flex:0 0 auto;background:linear-gradient(180deg,#ff2e42,var(--red2));color:#fff;font-weight:700;font-size:13px;padding:5px 12px;border-radius:999px;white-space:nowrap;animation:ticker-blink 1.6s ease-in-out infinite}
@keyframes ticker-blink{0%,100%{opacity:1}50%{opacity:.55}}
.ticker-track{flex:1 1 auto;min-width:0;overflow:hidden;white-space:nowrap}
.ticker-scroll{display:inline-flex;white-space:nowrap;animation:ticker-move 40s linear infinite;will-change:transform}
.ticker-scroll span{white-space:nowrap}
@keyframes ticker-move{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* FIX27: Free Refer Bonus entry card above the balance card (top-up). */
.refer-banner{display:flex;align-items:center;gap:12px;border:1px solid var(--sky2);text-decoration:none}
.refer-banner .grow{flex:1}
.refer-banner .chev{margin-left:auto;font-size:20px;color:var(--muted)}
.rb-ico{font-size:26px;line-height:1}
/* FIX27: locked-commission note (amount + reason) on Team / Withdraw. */
.locked-note{margin-top:10px;padding:10px 12px;border:1px dashed var(--sky2);border-radius:10px;background:rgba(14,165,233,.08)}
.locked-note .muted{margin-top:4px}

/* FIX30: DEEP NAVY dark theme — a NEW dark design, NOT the old
 * black+gold theme. Deep navy backgrounds (never pure black), lighter
 * navy cards, white/light text, sky-blue accents matching the light
 * theme's brand, gold kept as a minimal accent only. Applied via
 * data-theme="dark" on <html> (server cookie + localStorage, see
 * layout_open() and assets/js/app.js). The variable overrides below
 * re-skin every component that uses var(--card)/--text/--muted/--line;
 * the component rules after them cover the components with hardcoded
 * light colors. --navy is deliberately NOT overridden: it is the text
 * color on gold/white surfaces (wheel hub, gold badges, white banners
 * inside the blue heroes), which stay light in both themes. Admin
 * pages never carry data-theme="dark", so the admin stays Light-only. */
html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0a1f33; --bg2:#0d2742; --card:#10294a; --card2:#16324f;
  --text:#eaf4fc; --muted:#9db4cc; --line:#1e3f63; --green:#4ade80;
}
html[data-theme="dark"] body{background:#0a1f33;background:linear-gradient(160deg,#0a1f33 0%,#0d2742 45%,#0a1f33 100%) fixed}
[data-theme="dark"] .red{color:#f87171}
[data-theme="dark"] .gold{color:#fbbf24}
[data-theme="dark"] input[type=text],[data-theme="dark"] input[type=password],[data-theme="dark"] input[type=number],[data-theme="dark"] input[type=tel],[data-theme="dark"] input[type=email],[data-theme="dark"] select,[data-theme="dark"] textarea{background:var(--card2);border-color:var(--line);color:var(--text)}
[data-theme="dark"] .phone-wrap .prefix{background:var(--card2);border-color:var(--line);color:var(--text)}
[data-theme="dark"] .btn-dark,[data-theme="dark"] .btn-white{background:var(--card2);color:var(--text);border-color:var(--line)}
[data-theme="dark"] .card-light{background:var(--card2)}
[data-theme="dark"] .chip,[data-theme="dark"] .vip-chip,[data-theme="dark"] .pay-opt,[data-theme="dark"] .line-opt,[data-theme="dark"] .radio-pill,[data-theme="dark"] .pay-opt-chip,[data-theme="dark"] .tab{background:var(--card2);border-color:var(--line);color:var(--text)}
[data-theme="dark"] .pay-opt-chip.hot{background:rgba(225,29,46,.18);border-color:var(--red);color:#fca5a5}
[data-theme="dark"] .plan-card{background:var(--card);color:var(--text)}
[data-theme="dark"] .plan-card h3{color:var(--text)}
[data-theme="dark"] .plan-card .machine{color:var(--muted)}
[data-theme="dark"] .plan-card .tier{color:#fbbf24}
[data-theme="dark"] .stat3 .stat{background:var(--card2);color:var(--text)}
[data-theme="dark"] .ring{background:conic-gradient(var(--gold2) calc(var(--p,0)*1%),#1e3f63 0)}
[data-theme="dark"] .ring::before{background:var(--card2)}
[data-theme="dark"] .progress{background:#1e3f63}
[data-theme="dark"] .step .n{background:var(--card2);color:var(--text)}
[data-theme="dark"] .step.done .n{background:#16a34a}
[data-theme="dark"] .badge-green{background:#16a34a}
[data-theme="dark"] .bottom-nav{background:var(--card);border-color:var(--line);box-shadow:0 -2px 14px rgba(0,0,0,.35)}
[data-theme="dark"] .nav-plus{border-color:var(--card)}
[data-theme="dark"] .nav-badge{border-color:var(--card)}
[data-theme="dark"] .nav-item.active{color:var(--sky3)}
[data-theme="dark"] .sheet,[data-theme="dark"] .modal{background:rgba(4,15,26,.68)}
[data-theme="dark"] .sheet-card,[data-theme="dark"] .modal-card{background:var(--card);border-color:var(--line)}
[data-theme="dark"] .modal-x{background:var(--card2);color:var(--text);border-color:var(--line)}
[data-theme="dark"] .ann-card{background:var(--card);color:var(--text);border-color:var(--line)}
[data-theme="dark"] .ann-card .modal-x{background:var(--card2);color:var(--text);border-color:var(--line)}
[data-theme="dark"] .ann-foot{background:var(--card);border-color:var(--line)}
[data-theme="dark"] .ann-title{color:var(--text)}
[data-theme="dark"] .ann-welcome{color:#c7dcf0}
[data-theme="dark"] .ann-benefits li{color:var(--muted)}
[data-theme="dark"] .ann-benefits li b{color:var(--text)}
[data-theme="dark"] .ann-card .check{color:var(--muted)}
[data-theme="dark"] .ann-badge{background:rgba(59,130,246,.25);color:#93c5fd}
[data-theme="dark"] .btn-tg-channel{background:var(--card2);color:var(--text);border-color:var(--line)}
[data-theme="dark"] .flash-ok{background:rgba(22,163,74,.18);border-color:#16a34a;color:#86efac}
[data-theme="dark"] .flash-err{background:rgba(225,29,46,.18);border-color:#e11d2e;color:#fca5a5}
[data-theme="dark"] .cashout-note{background:rgba(14,165,233,.14);color:#7dd3fc}
[data-theme="dark"] .sticky-pay{background:linear-gradient(180deg,rgba(10,31,51,0),#0a1f33 45%)}
[data-theme="dark"] .ticker-wrap{background:var(--card);border-color:var(--sky2)}
[data-theme="dark"] .pill-green{background:rgba(22,163,74,.22);color:#86efac}
[data-theme="dark"] .pill-dim{background:rgba(14,165,233,.18);color:#7dd3fc}
[data-theme="dark"] .cal .d.done,[data-theme="dark"] .daycard.done{background:rgba(22,163,74,.22);border-color:#16a34a}
[data-theme="dark"] .receiver-num{color:var(--text)}
[data-theme="dark"] .method-bkash .method-name{color:#ff4d94}
[data-theme="dark"] .method-nagad .method-name{color:#ff8c42}
[data-theme="dark"] .wd-max{color:var(--sky3);border-color:var(--sky3)}
[data-theme="dark"] .step-no,[data-theme="dark"] .line-opt .rec,[data-theme="dark"] .modal-eyebrow,[data-theme="dark"] .wheel-pointer{color:var(--sky3)}
/* FIX32: the white logo pill keeps the dark-navy wordmark readable in
 * the dark theme; a deeper navy shadow lifts it off the navy page. */
[data-theme="dark"] .logo img{box-shadow:0 4px 16px rgba(4,15,26,.55)}
[data-theme="dark"] .tl-now{color:var(--sky3)}