/* Android WebView font-boosting off: without this the first tap inflates text
   (page "stretches" then everything looks big). */
html, body, body * { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* ---- Locally bundled fonts (no network, no FOUT, instant first paint on slow
       phones). Inter is a variable font: one file covers weights 100-900.
       Indic scripts (Hindi/Bengali/etc.) have no Inter glyphs, so they fall back
       to the system font exactly as they did with the Google Fonts link. ---- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Bebas Neue";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/bebas-neue-latin.woff2") format("woff2");
}

:root {
  --navy: #030b1f;
  --navy2: #040d24;
  --mid-blue: #0a1a4a;
  --card: rgba(255, 255, 255, 0.03);
  --card-solid: #0d1b3d;
  --border: rgba(185, 144, 82, 0.15);
  --line: rgba(255, 255, 255, 0.12);
  --border-strong: rgba(185, 144, 82, 0.45);
  --text: #ffffff;
  --white: #ffffff;
  --muted: rgba(255, 255, 255, 0.5);
  --gold: #B99052;
  --gold2: #CCA262;
  --gold3: #9E7842;
  --gold-light: #D4B07A;
  --green: #4ade80;
  --red: #f87171;
  --glow-gold: 0 0 20px rgba(185, 144, 82, 0.5);
  --tap-scale: 0.96;
  --tap-duration: 80ms;
  --press-scale: 0.98;
  --press-duration: 120ms;
  --tr: background 180ms ease, background-color 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease, opacity 180ms ease;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(ellipse 120% 60% at 50% -10%, rgba(13, 32, 96, 0.55) 0%, transparent 70%),
    radial-gradient(ellipse 80% 80% at 80% 100%, rgba(185, 144, 82, 0.08) 0%, transparent 60%),
    var(--navy);
  color: var(--text);
  min-height: 100vh;
}

a { color: var(--gold-light); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ===== PREMIUM TAP/PRESS ANIMATIONS ===== */
.tap {
  transition: transform var(--tap-duration) cubic-bezier(0.15, 0.85, 0.35, 1), background 120ms ease, opacity 120ms ease;
}
.tap:active { transform: scale(0.93); }
.tap:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(185,144,82,0.5);
}

.press {
  transition: transform 150ms cubic-bezier(0.15, 0.85, 0.35, 1), background 150ms ease;
}
.press:active { transform: scale(0.95); }

.ripple {
  position: relative;
  overflow: hidden;
}
.ripple::after {
  /* disabled: the radial repaint on every tap stuttered cheap phones */
  display: none;
}
.ripple:active::after {
  animation: rippleEffect 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
@keyframes rippleEffect {
  0% { transform: scale(0); opacity: 1; }
  100% { transform: scale(1); opacity: 0; }
}

/* Button specific premium feel */
.btn-premium {
  position: relative;
  transition: transform 100ms cubic-bezier(0.15, 0.85, 0.35, 1), background 100ms ease;
}
.btn-premium:active { transform: scale(0.94); }
.btn-premium:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(185,144,82,0.5);
}

/* Input premium feel */
.input-premium {
  transition: border-color 200ms ease, box-shadow 200ms ease, background 200ms ease, transform 100ms ease;
}
.input-premium:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(185,144,82,0.2), 0 4px 12px rgba(0,0,0,0.2);
}
.input-premium:active {
  transform: scale(0.99);
}

/* Card premium feel */
.card-premium {
  transition: transform 150ms cubic-bezier(0.15, 0.85, 0.35, 1), border-color 150ms ease;
}
.card-premium:active { transform: scale(0.987); }

/* Chip/tab premium feel */
.chip-premium {
  transition: transform 80ms cubic-bezier(0.15, 0.85, 0.35, 1), background 80ms ease, color 80ms ease;
}
.chip-premium:active {
  transform: scale(0.93);
  background: rgba(185,144,82,0.15);
}

/* Toggle/switch premium */
.toggle-premium {
  transition: transform 100ms cubic-bezier(0.15, 0.85, 0.35, 1), background 100ms ease;
}
.toggle-premium:active {
  transform: scale(0.85);
}

/* List item premium */
.list-item-premium {
  transition: background 120ms ease, transform 100ms ease;
}
.list-item-premium:active {
  background: rgba(185,144,82,0.12);
  transform: scale(0.99);
}

/* Haptic vibration class for elements that should vibrate */
.haptic-light { }
.haptic-medium { }
.haptic-heavy { }
.haptic-success { }
.haptic-error { }

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .tap, .press, .ripple, .btn-premium, .input-premium, .card-premium, .chip-premium, .toggle-premium, .list-item-premium {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  .ripple:active::after { animation: none; }
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(3, 11, 31, 0.92);

  border-bottom: 1px solid var(--border);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
}

.topbar-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.logo {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 900;
  font-size: 1.2rem;
  letter-spacing: 1px;
  background: linear-gradient(90deg, var(--gold2), var(--gold-light), var(--gold2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
}

.logo small {
  display: block;
  font-family: "Inter", sans-serif;
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 3px;
  color: rgba(255, 255, 255, 0.55);
  -webkit-text-fill-color: rgba(255, 255, 255, 0.55);
}

.nav { display: flex; gap: 4px; flex-wrap: wrap; }

.nav a {
  color: var(--text);
  padding: 8px 12px;
  border-radius: 25px;
  font-size: 0.9rem;
  font-weight: 500;
  transition: background 0.15s;
}

.nav a:hover { background: rgba(185, 144, 82, 0.12); color: var(--gold-light); text-decoration: none; }

.nav .user-chip {
  color: var(--gold-light);
  border: 1px solid var(--border-strong);
  background: rgba(185, 144, 82, 0.08);
  margin-left: 4px;
}

.nav .user-chip:hover { background: rgba(185, 144, 82, 0.2); }

main { max-width: 1100px; margin: 0 auto; padding: 72px 16px 60px; }

.live-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--green);
  font-size: 0.75rem;
  font-weight: 700;
  border: 1px solid rgba(34, 197, 94, 0.35);
  background: rgba(34, 197, 94, 0.1);
  padding: 4px 12px;
  border-radius: 999px;
  animation: livePulse 2s ease-in-out infinite;
}

@keyframes livePulse {
  0%, 100% { opacity: .55; transform: scale(.86); }
  50% { opacity: 1; transform: scale(1.12); }
}

.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: blink 1.2s infinite; }

@keyframes blink { 50% { opacity: 0.2; } }

.quick-links {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.quick-links a {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 12px 24px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 0.88rem;
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.quick-links a:hover { border-color: var(--gold); color: var(--gold-light); transform: translateY(-2px); text-decoration: none; }

.page-head { text-align: center; padding: 20px 0 26px; }
.page-head h1 {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(1.3rem, 4vw, 1.8rem);
  font-weight: 900;
  background: linear-gradient(90deg, var(--gold2), var(--gold-light), var(--gold2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 6px;
}
.page-head p { color: var(--muted); font-size: 0.9rem; }

.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  margin-bottom: 28px;
}

.rates-wrap { margin-bottom: 28px; }

.rates-wrap h3 { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }

.rates-table .rate-amount {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 700;
  color: var(--gold-light);
  white-space: nowrap;
}

.rates-table .rate-cell b {  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1.3rem;
  color: var(--gold);
  text-shadow: var(--glow-gold);
  white-space: nowrap;
}

.rates-table td.dimmed { color: var(--muted); }

.rates-table td strong { font-family: "Inter", sans-serif; letter-spacing: 0.5px; }

.play-link {
  padding: 6px 16px;
  font-size: 0.75rem;
  white-space: nowrap;
}

.howto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
  margin-bottom: 28px;
}

.howto-step {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px 16px;
  text-align: center;
  transition: transform 0.2s, border-color 0.2s;
}

.howto-step:hover { transform: translateY(-3px); border-color: var(--border-strong); }

.howto-step b {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--gold3));
  color: var(--navy);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1.05rem;
  box-shadow: var(--glow-gold);
}

.howto-step h4 { font-family: "Inter", sans-serif; color: var(--gold-light); font-size: 1rem; margin-bottom: 6px; }
.howto-step p { color: var(--muted); font-size: 0.82rem; line-height: 1.5; }

.gc-code {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--gold), var(--gold3));
  color: var(--navy);
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  box-shadow: var(--glow-gold);
}

.gc-meta { display: flex; gap: 14px; font-size: 0.8rem; }
.gc-meta span { color: var(--gold-light); }

.family-section { background: rgba(255, 255, 255, 0.02); border: 1px solid var(--border); border-radius: 20px; padding: 22px; }
.family-section h2 { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--gold); margin-bottom: 6px; font-size: 1.1rem; }
.family-section > p { color: var(--muted); font-size: 0.85rem; margin-bottom: 16px; }

.family-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
}

.family-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  display: flex;
  gap: 10px;
  align-items: center;
}

.family-card b {
  background: linear-gradient(135deg, var(--gold), var(--gold3));
  color: var(--navy);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
}

.market-nav { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }

.game-pick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}

.game-pick {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
  text-align: left;
  transition: var(--tr);
}

.game-pick:hover { border-color: var(--gold); transform: translateY(-1px); }

.game-pick.active {
  border-color: var(--gold);
  background: linear-gradient(180deg, rgba(185, 144, 82, 0.18), rgba(185, 144, 82, 0.06));
  box-shadow: 0 0 0 1px rgba(185, 144, 82, 0.35), var(--glow-gold);
}

.game-pick b { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--gold-light); letter-spacing: 0.5px; }

.game-pick span { font-size: 0.85rem; font-weight: 600; color: var(--text); }

.game-pick small { font-size: 0.75rem; color: var(--gold); font-weight: 700; }

.amt-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }

.amt-chip {
  flex: 1;
  min-width: 52px;
  padding: 10px 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--muted);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  transition: var(--tr);
}

.amt-chip:hover { border-color: var(--gold); color: var(--gold-light); }

.amt-chip.active {
  border-color: var(--gold);
  color: var(--gold-light);
  background: linear-gradient(180deg, rgba(185, 144, 82, 0.25), rgba(185, 144, 82, 0.08));
  box-shadow: var(--glow-gold);
}

.bid-stake {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--gold-light);
}

.games-play { margin-top: 18px; }

.style-backdrop {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(2, 8, 24, 0.72);

  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 88px 16px 24px;
  animation: fadeIn 0.15s ease;
}

.style-panel {
  width: 100%;
  max-width: 560px;
  background: linear-gradient(180deg, #0a1535, var(--navy2));
  border: 1px solid var(--gold);
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55), var(--glow-gold);
  animation: slideDown 0.2s ease;
}

.style-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.style-market { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }

.style-market-locked {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: linear-gradient(180deg, rgba(185, 144, 82, 0.18), rgba(185, 144, 82, 0.06));
  border: 1px solid var(--gold);
  border-radius: 999px;
  font-size: 0.85rem;
}

.style-market-locked span { color: var(--muted); text-transform: uppercase; letter-spacing: 1px; font-size: 0.7rem; }

.style-market-locked b { color: var(--gold-light); font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: 0.5px; }

.style-head b { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--gold-light); }

.style-close {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.style-close:hover { border-color: var(--gold); color: var(--gold-light); }

.style-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  max-height: 58vh;
  overflow-y: auto;
}

.style-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 14px 8px;
  background: var(--card-solid);
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  text-align: center;
  color: var(--text);
  transition: var(--tr);
}

.style-btn:hover { border-color: var(--gold); transform: translateY(-1px); }

.style-btn b {
  font-size: 0.85rem;
  line-height: 1.25;
  font-weight: 600;
  word-break: break-word;
}

.style-ico {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(185, 144, 82, 0.12);
  border: 1px solid rgba(185, 144, 82, 0.28);
  color: var(--gold);
  transition: transform 0.15s;
}
.style-btn:active .style-ico { transform: scale(0.92); }

/* matka-app style: color-coded per game type */
.style-ico.c-single       { background: rgba(96,165,250,0.16); border-color: rgba(96,165,250,0.4); color:#60a5fa; }
.style-ico.c-jodi         { background: rgba(74,222,128,0.16); border-color: rgba(74,222,128,0.4); color:#4ade80; }
.style-ico.c-single-patti { background: rgba(192,132,252,0.16); border-color: rgba(192,132,252,0.4); color:#c084fc; }
.style-ico.c-double-patti{ background: rgba(251,191,36,0.16);  border-color: rgba(251,191,36,0.4);  color:#fbbf24; }
.style-ico.c-triple-patti{ background: rgba(244,114,182,0.16); border-color: rgba(244,114,182,0.4); color:#f472b6; }
.style-ico.c-half-sangam  { background: rgba(251,146,60,0.16); border-color: rgba(251,146,60,0.4); color:#fb923c; }
.style-ico.c-full-sangam  { background: rgba(251,146,60,0.22); border-color: rgba(251,146,60,0.5); color:#fb8c2c; }
.style-ico.c-family-pair  { background: rgba(45,212,191,0.16); border-color: rgba(45,212,191,0.4); color:#2dd4bf; }
.style-ico.c-pana-family  { background: rgba(45,212,191,0.16); border-color: rgba(45,212,191,0.4); color:#2dd4bf; }
.style-ico.c-motor        { background: rgba(248,113,113,0.16); border-color: rgba(248,113,113,0.4); color:#f87171; }
.style-ico.c-jodi-close   { background: rgba(167,139,250,0.16); border-color: rgba(167,139,250,0.4); color:#a78bfa; }
.style-ico.c-single-bulk   { background: rgba(96,165,250,0.16); border-color: rgba(96,165,250,0.4); color:#60a5fa; }
.style-ico.c-jodi-bulk,
.style-ico.c-digit-jodi    { background: rgba(74,222,128,0.16); border-color: rgba(74,222,128,0.4); color:#4ade80; }
.style-ico.c-single-patti-bulk,
.style-ico.c-sp-common     { background: rgba(192,132,252,0.16); border-color: rgba(192,132,252,0.4); color:#c084fc; }
.style-ico.c-double-patti-bulk,
.style-ico.c-dp-common,
.style-ico.c-two-digit-pana { background: rgba(251,191,36,0.16); border-color: rgba(251,191,36,0.4); color:#fbbf24; }
.style-ico.c-spdptp        { background: rgba(244,114,182,0.16); border-color: rgba(244,114,182,0.4); color:#f472b6; }
.style-ico.c-half-sangam-b { background: rgba(251,146,60,0.16); border-color: rgba(251,146,60,0.4); color:#fb923c; }
.style-ico.c-odd-even-bulk { background: rgba(45,212,191,0.16); border-color: rgba(45,212,191,0.4); color:#2dd4bf; }
.style-ico.c-jodi-family   { background: rgba(45,212,191,0.16); border-color: rgba(45,212,191,0.4); color:#2dd4bf; }
.style-ico.c-sp-motor,
.style-ico.c-dp-motor      { background: rgba(248,113,113,0.16); border-color: rgba(248,113,113,0.4); color:#f87171; }
.style-ico.c-red-jodi      { background: rgba(239,68,68,0.18); border-color: rgba(239,68,68,0.5); color:#ef4444; }

.style-ico.sara { width: 72px; height: 66px; border-radius: 16px; border: none; background: linear-gradient(145deg, rgba(10,21,53,0.9), rgba(6,12,32,0.95)); }
.style-ico.sara img { width: 62px; height: 58px; object-fit: contain; }
.style-ico.sara.c-single-patti img,
.style-ico.sara.c-triple-patti img,
.style-ico.sara.c-half-sangam img,
.style-ico.sara.c-half-sangam-b img,
.style-ico.sara.c-full-sangam img,
.style-ico.sara.c-single-patti-bulk img,
.style-ico.sara.c-sp-common img,
.style-ico.sara.c-spdptp img { filter: invert(1); }

.style-btn .style-txt { flex: 0 0 auto; min-width: 0; width: 100%; }

.btn-big { width: 100%; padding: 15px; font-size: 1rem; letter-spacing: 2px; border-radius: 999px; }

@keyframes slideDown {
  from { transform: translateY(-14px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.chip {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 7px 14px;
  border-radius: 25px;
  cursor: pointer;
  font-size: 0.85rem;
  font-family: "Inter", sans-serif;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.chip.active {
  background: linear-gradient(135deg, var(--gold), var(--gold3));
  color: var(--navy);
  border-color: var(--gold);
  font-weight: 700;
}

.hist-card { background: rgba(255, 255, 255, 0.02); border: 1px solid var(--border); border-radius: 20px; padding: 20px; }
.hist-card h3 { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 1rem; margin-bottom: 14px; color: var(--gold); }

.chart-card.wk-full { margin-left: -16px; margin-right: -16px; border-radius: 0; border-left: none; border-right: none; }
.chart-card.wk-full h3 { padding: 0 16px; }
.wk-table { width: 100%; min-width: 680px; border-collapse: collapse; font-size: 0.78rem; }
.wk-table th, .wk-table td { border: 1px solid var(--line); padding: 7px 6px; text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wk-table thead th { color: var(--gold-light); font-size: 0.62rem; letter-spacing: 1px; }
.wk-table tbody td { font-weight: 700; }
.wk-date { color: var(--muted); font-size: 0.62rem; font-weight: 600; white-space: nowrap; vertical-align: middle; line-height: 1.6; }
.wk-table tr.wk-bot td { border-top-style: hidden; }
.wk-table.wk-hist { min-width: 0; }
.wk-table.wk-hist td:last-child { font-size: 0.85rem; letter-spacing: 2px; }
.wk-whead th { color: var(--gold-light); font-size: 0.6rem; letter-spacing: 0.5px; white-space: nowrap; background: rgba(212, 175, 55, 0.06); }
.wk-miss { color: var(--red); font-weight: 800; }

/* ---- Charts: 60-DAY table (one row per IST day, newest first) ---- */
.d60-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; font-variant-numeric: tabular-nums; }
.d60-table th { color: var(--gold-light); font-size: 0.64rem; letter-spacing: .8px; font-weight: 800; padding: 7px 6px; text-align: center; background: rgba(212, 175, 55, 0.08); }
.d60-table td { padding: 6px 5px; text-align: center; border-bottom: 1px solid var(--line); white-space: nowrap; }
.d60-table .d60-date { color: var(--muted); font-weight: 700; font-size: 0.76rem; }
.d60-table .d60-hit { font-weight: 800; letter-spacing: .6px; }
.d60-table .d60-miss { color: var(--red); opacity: .75; font-weight: 800; }
.d60-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, .03); }
.chart-card h3 { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.d60-sub { font-size: 0.72rem; font-weight: 700; color: var(--muted); letter-spacing: .3px; }

.table-wrap { overflow-x: auto; }

.result-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }

.result-table th {
  text-align: left;
  background: rgba(185, 144, 82, 0.08);
  color: var(--gold);
  font-family: "Inter", sans-serif;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.result-table td { padding: 11px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }

.result-table tr:hover td { background: rgba(185, 144, 82, 0.05); }

.jodi-cell { color: var(--gold-light); font-weight: 700; white-space: nowrap; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 0.85rem; }
.empty { text-align: center; color: var(--muted); }

.chart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}

.chart-card { background: rgba(255, 255, 255, 0.02); border: 1px solid var(--border); border-radius: 16px; padding: 16px; }
.chart-card h3 { font-family: "Inter", sans-serif; font-size: 1rem; margin-bottom: 12px; color: var(--gold); }

.chart-row { display: flex; flex-direction: column; gap: 6px; }

.chart-cell {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 12px;
}

.chart-cell b { color: var(--green); font-size: 1.05rem; letter-spacing: 1px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.chart-cell span { color: var(--muted); font-size: 0.75rem; }

.card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015));
  border: 1px solid var(--border);
  border-top-color: rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  padding: 22px;
  max-width: 460px;
  margin: 0 auto;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 10px 26px rgba(0, 0, 0, 0.32);

}

.card h3 {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--gold);
  font-size: 1rem;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.form label { display: block; margin-bottom: 12px; font-size: 0.85rem; color: var(--muted); }

.form input, .form select, .form textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--text);
  font-size: 0.92rem;
  font-family: "Inter", sans-serif;
}

.form textarea { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; resize: vertical; }

.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--gold); }

.form .check { display: flex; align-items: center; gap: 8px; }
.form .check input { width: auto; margin: 0; }

.btn {
  display: inline-block;
  background: linear-gradient(135deg, var(--gold), var(--gold3));
  color: var(--navy);
  font-weight: 800;
  border: none;
  padding: 11px 24px;
  border-radius: 50px;
  cursor: pointer;
  font-size: 0.92rem;
  font-family: "Inter", sans-serif;
  box-shadow: var(--glow-gold);
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--border); box-shadow: none; }

.btn.ghost:hover { border-color: var(--gold); color: var(--gold-light); }

.btn:hover { transform: translateY(-2px); filter: brightness(1.12); }

.form-hint { margin-top: 12px; font-size: 0.82rem; color: var(--muted); }
.form-hint code { background: rgba(255, 255, 255, 0.06); padding: 2px 6px; border-radius: 5px; color: var(--gold-light); }

.site-foot {
  border-top: 1px solid var(--border);
  padding: 26px 16px;
  text-align: center;
  color: var(--muted);
  font-size: 0.8rem;
  background: rgba(0, 0, 0, 0.3);
}

.site-foot p { margin-top: 8px; }

.foot-links { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

.foot-links a { color: var(--muted); }
.foot-links a:hover { color: var(--gold); }

.site-foot strong { color: var(--gold); font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }

.content { max-width: 720px; margin: 0 auto; }
.content p { color: var(--muted); line-height: 1.7; margin-bottom: 14px; }
.content p strong { color: var(--text); }
.content h3 { color: var(--gold); margin: 20px 0 8px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 1rem; }
.content details {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 10px;
}
.content details summary { cursor: pointer; font-weight: 600; }
.content details p { margin: 10px 0 0; }

.card-actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }

.login-tabs {
  display: flex;
  gap: 4px;
  justify-content: center;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
}

.login-tabs .chip { background: transparent; border: none; border-radius: 0; border-bottom: 3px solid transparent; color: var(--muted); }
.login-tabs .chip.active { background: transparent; color: var(--gold); border-bottom-color: var(--gold); }

.otp-demo {
  background: rgba(74, 222, 128, 0.06);
  border: 1px dashed rgba(74, 222, 128, 0.4);
  border-radius: 12px;
  padding: 12px;
  text-align: center;
  margin: 12px 0;
}

.otp-demo p { color: var(--muted); font-size: 0.8rem; margin-bottom: 6px; }

.otp-demo b {
  font-size: 2rem;
  letter-spacing: 6px;
  color: var(--green);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.otp-timer { display: block; margin-top: 6px; color: var(--muted); font-size: 0.78rem; }

.profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  align-items: start;
}

.profile-grid .card { max-width: none; }
.profile-grid .card p { margin-bottom: 6px; color: var(--muted); }
.profile-grid .card p strong { color: var(--text); }

.profile-head-card {
  display: flex;
  align-items: center;
  gap: 16px;
}

.avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--gold3));
  color: var(--navy);
  font-size: 1.5rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: var(--glow-gold);
}

.profile-sub { color: var(--muted); font-size: 0.85rem; }

.activity-list { display: flex; flex-direction: column; gap: 8px; }

.activity-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 0.85rem;
}

.activity-row small { color: var(--muted); font-size: 0.75rem; white-space: nowrap; }

.funds-tx-amt { font-weight: 700; color: var(--gold); }
.funds-tx-meta { font-size: 0.72rem; color: var(--muted); }
.activity-row small.funds-tx-meta { white-space: normal; overflow-wrap: anywhere; }
.funds-tx-date { display: block; font-size: 0.68rem; color: var(--muted); margin-top: 2px; }
.tx-right { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex-shrink: 0; }

.wallet-balance {
  font-size: 2rem;
  font-weight: 800;
  color: var(--gold);
  margin-bottom: 6px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.wallet-plus { color: var(--green); font-weight: 700; }
.wallet-minus { color: var(--red); font-weight: 700; }

.add-money {
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed var(--border-strong);
  border-radius: 12px;
  padding: 14px;
  margin: 12px 0;
}

.add-money .btn { margin-right: 8px; }

.pay-list { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }

.pay-type {
  background: rgba(185, 144, 82, 0.12);
  border: 1px solid var(--border);
  color: var(--gold-light);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  flex-shrink: 0;
}

.qr-img {
  display: block;
  max-width: 180px;
  border-radius: 10px;
  border: 1px solid var(--border);
  margin: 8px 0;
}

.qr-demo-box {
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed var(--border-strong);
  border-radius: 12px;
  padding: 12px;
  text-align: center;
  margin: 12px 0;
}

.qr-demo-box p { color: var(--muted); font-size: 0.8rem; margin-bottom: 6px; }
.qr-demo-box .qr-img { margin: 0 auto; }

.sub-title { margin: 14px 0 8px; color: var(--gold); font-size: 0.95rem; font-family: "Inter", sans-serif; }

.req-status { font-size: 0.68rem; font-weight: 800; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }

.req-pending { color: var(--gold); border: 1px solid var(--gold); }
.req-confirmed { color: var(--green); border: 1px solid var(--green); }
.req-rejected { color: var(--red); border: 1px solid var(--red); }

.req-ok { border-color: var(--green); color: var(--green); }
.req-ok:hover { background: var(--green); color: #111; }
.req-no { border-color: var(--red); color: var(--red); }
.req-no:hover { background: var(--red); color: #111; }
.activity-row > span { min-width: 0; }
.activity-row .req-status { flex: none; }
.activity-row span.wd-left { display: flex; flex-direction: column; gap: 3px; line-height: 1.4; }
.activity-row small.wd-reason { display: block; color: var(--red); font-size: 0.72rem; font-weight: 600; line-height: 1.4; white-space: normal; overflow-wrap: anywhere; }

.play-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 18px;
  align-items: start;
}

.play-grid .card { max-width: none; }

.bet-list { display: flex; flex-direction: column; gap: 10px; }

.bet-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
}

.bet-main { display: flex; flex-direction: column; gap: 3px; }
.bet-main strong { font-family: "Inter", sans-serif; font-size: 1rem; }
.bet-main span { color: var(--muted); font-size: 0.8rem; }

.mini-del {
  background: transparent;
  border: 1px solid var(--red);
  color: var(--red);
  border-radius: 8px;
  padding: 5px 12px;
  font-size: 0.78rem;
  cursor: pointer;
}

.mini-del:hover { background: var(--red); color: #111; }

.json-example {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 0.78rem;
  color: var(--green);
  overflow-x: auto;
  margin-bottom: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.hint { color: var(--muted); font-size: 0.8rem; margin-bottom: 10px; }
.hint code { background: rgba(255, 255, 255, 0.06); padding: 2px 6px; border-radius: 5px; color: var(--gold-light); }

.admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; align-items: start; }
.admin-grid .card { max-width: none; }

.ticker-wrap {
  background: rgba(185, 144, 82, 0.06);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  padding: 10px 0;
  margin-bottom: 22px;
}

.ticker-inner {
  display: flex;
  width: max-content;
  animation: tickerAnim 35s linear infinite;
}

.ticker-inner:hover { animation-play-state: paused; }

@keyframes tickerAnim { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.ticker-item {
  white-space: nowrap;
  padding: 0 28px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--gold-light);
  letter-spacing: 0.5px;
}

.ticker-item strong { color: #fff; }

/* User Panel � sara567 reference style */
.panel-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(185, 144, 82, 0.08);
  border: 1px solid rgba(185, 144, 82, 0.3);
  padding: 5px 16px;
  border-radius: 20px;
  margin-bottom: 14px;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 2px;

}

.btn-green {
  background: linear-gradient(135deg, #0aa84b, #02853a);
  color: #ffffff;
  box-shadow: 0 6px 20px rgba(2, 165, 80, 0.35);
  transition: transform 0.2s cubic-bezier(0.22,1,0.36,1), background 0.2s ease, box-shadow 0.2s ease;
}
.btn-green:hover { box-shadow: 0 8px 28px rgba(2, 165, 80, 0.5); transform: translateY(-1px); }
.btn-green:active { transform: translateY(0) scale(0.98); }

.btn-live {
  background: rgba(2, 165, 80, 0.06);
  color: var(--green);
  border: 1px solid var(--green);
  box-shadow: none;
  letter-spacing: 1.5px;
  animation: liveGlow 2s ease-in-out infinite;
}
.btn-live:hover {
  background: rgba(2, 165, 80, 0.14);
  border-color: var(--green);
  
  animation: liveGlowFast 0.7s ease-in-out infinite;
}
@keyframes liveGlow {
  0%, 100% { opacity: .9; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-1px); }
}
@keyframes liveGlowFast {
  0%, 100% { opacity: .88; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-1px); }
}

.card.panel-card {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(185, 144, 82, 0.18);
  border-radius: 18px;

  position: relative;
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

.wallet-balance { text-shadow: var(--glow-gold); }

.wallet-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 800;
  color: var(--gold);
  background: rgba(185, 144, 82, 0.1);
  border: 1px solid rgba(185, 144, 82, 0.4);
  padding: 4px 14px;
  border-radius: 999px;
  text-shadow: none;
}

.play-grid .card.panel-card h3, .profile-grid .card.panel-card h3 {
  font-size: 1.05rem;
  letter-spacing: 0.5px;
}

.profile-grid .card.panel-card h3::after {
  content: "";
  display: block;
  width: 60px;
  height: 2px;
  margin-top: 8px;
  background: linear-gradient(90deg, var(--gold), transparent);
  border-radius: 2px;
}

.user-chip .chip-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--gold3));
  color: var(--navy);
  font-size: 0.65rem;
  font-weight: 800;
  margin-right: 6px;
}

.panel-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  margin-bottom: 22px;
}

.panel-tabs .chip {
  border: none;
  border-bottom: 3px solid transparent;
  border-radius: 8px 8px 0 0;
  background: transparent;
  color: var(--muted);
  padding: 10px 16px;
  font-size: 0.9rem;
}

.panel-tabs .chip.active {
  background: transparent;
  color: var(--gold);
  border-bottom-color: var(--gold);
  font-weight: 700;
}

.member-head {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.member-head .member-meta { flex: 1; min-width: 160px; }
.member-head .member-meta h3 { border: none; padding: 0; font-size: 1.15rem; }
.member-head .member-meta h3::after { display: none; }

.member-phone {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--gold-light);
  letter-spacing: 1px;
  margin: 2px 0;
}

.member-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.member-flag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--green);
  border: 1px solid rgba(34, 197, 94, 0.35);
  background: rgba(34, 197, 94, 0.1);
  padding: 4px 12px;
  border-radius: 999px;
}

.member-balance {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1.3rem;
  font-weight: 900;
  color: var(--gold);
  text-shadow: var(--glow-gold);
}
/* premium profile hero */
.pf-hero { background: linear-gradient(135deg, var(--gold), var(--gold3)); border-radius: 20px; padding: 20px 18px 16px; margin-bottom: 18px; box-shadow: var(--glow-gold); color: #3b2a12; }
.pf-hero-top { display: flex; align-items: center; gap: 14px; }
.pf-avatar { width: 64px; height: 64px; flex: none; border-radius: 50%; background: rgba(59, 42, 18, 0.9); color: #ffd98a; font-size: 1.7rem; font-weight: 900; display: flex; align-items: center; justify-content: center; border: 2px solid rgba(255, 255, 255, 0.65); font-family: "Inter", sans-serif; }
.pf-hero .member-meta { flex: 1; min-width: 0; }
.pf-hero .member-meta h3 { margin: 0; font-size: 1.15rem; font-weight: 800; color: #3b2a12; }
.pf-hero .member-phone { font-size: 0.95rem; font-weight: 800; color: #3b2a12; letter-spacing: 1px; margin: 2px 0; }
html[data-theme="light"] .pf-hero .member-phone, html[data-theme="night"] .pf-hero .member-phone, html[data-theme="dark"] .pf-hero .member-phone { color: #3b2a12; text-shadow: none; }
.pf-hero .profile-sub { font-size: 0.78rem; color: #6b5323; margin: 0; overflow-wrap: anywhere; }
.pf-hero .member-flag { flex: none; color: #3b2a12; border-color: rgba(59, 42, 18, 0.4); background: rgba(255, 255, 255, 0.35); }
.pf-hero .member-flag .dot { background: #3b2a12; }
.pf-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.pf-stat { background: rgba(255, 255, 255, 0.28); border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 14px; padding: 10px 6px; text-align: center; display: flex; flex-direction: column; gap: 2px; }
.pf-stat span { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: #6b5323; }
.pf-stat b { font-size: 1.02rem; font-weight: 900; color: #3b2a12; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
/* premium info rows */
.pf-row { display: flex; align-items: center; gap: 12px; padding: 11px 2px; border-bottom: 1px dashed var(--line); }
.pf-row:last-child { border-bottom: none; }
.pf-ico { width: 34px; height: 34px; flex: none; border-radius: 10px; background: var(--card); border: 1px solid var(--border); color: var(--gold-light); display: flex; align-items: center; justify-content: center; font-size: 0.95rem; font-weight: 800; }
.pf-row > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pf-row span { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--muted); }
.pf-row b { font-size: 0.92rem; font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
/* premium segmented profile tabs */
.panel-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; border-bottom: none; background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 6px; margin-bottom: 18px; }
.panel-tabs .chip { border: none; border-radius: 11px; background: transparent; color: var(--muted); padding: 10px 6px; font-size: 0.78rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel-tabs .chip.active { background: linear-gradient(135deg, var(--gold), var(--gold3)); color: #3b2a12; font-weight: 800; box-shadow: var(--glow-gold); }

.bottom-nav {
  display: none;
}

@media (max-width: 768px) {
  main { padding-bottom: 90px; }
  .bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: linear-gradient(180deg, rgba(10, 21, 53, 0.98), rgba(6, 14, 37, 0.99));

    border-top: 1px solid var(--line);
  }
  .bottom-nav a {
    flex: 1;
    flex-direction: column;
    gap: 3px;
    text-align: center;
    padding: 9px 2px 10px;
    color: var(--muted);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-top: 2px solid transparent;
  }
  .bottom-nav a svg { display: block; margin: 0 auto; }
  .bottom-nav a:hover { text-decoration: none; color: var(--gold-light); }
  .bottom-nav a.active { color: var(--gold); border-top-color: var(--gold); }
}

@media (max-width: 640px) {
  .topbar-inner { flex-wrap: wrap; gap: 10px; }
  .nav a:not(.user-chip) { display: none; }
  .topbar { padding: 10px 14px; }
  .topbar-right { margin-left: auto; }
  .style-grid { grid-template-columns: repeat(2, 1fr); }
}
.seg-row {
  display: flex;
  gap: 6px;
  width: 100%;
}

.seg {
  flex: 1;
  padding: 10px 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--muted);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  transition: var(--tr);
}

.seg:hover { border-color: var(--gold); color: var(--gold-light); }

.seg.active {
  color: var(--navy);
  background: linear-gradient(135deg, var(--gold), var(--gold3));
  border-color: var(--gold);
  box-shadow: var(--glow-gold);
}

.wd-row small { color: var(--muted); font-size: 0.75rem; }

.upi-id {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--gold-light);
  background: linear-gradient(180deg, #0a1535, var(--navy2));
  border: 1px dashed var(--gold);
  border-radius: 10px;
  padding: 10px;
  text-align: center;
  margin-top: 8px;
}

.hist-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.hist-count {
  color: var(--muted);
  font-size: 0.75rem;
  letter-spacing: 0.5px;
}

.hist-stats {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.hist-stat {
  flex: 1;
  min-width: 100px;
  background: linear-gradient(180deg, #0d1a3d, #0a1535);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  text-align: center;
}

.hist-stat b {
  display: block;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--gold-light);
  text-shadow: 0 0 12px rgba(212, 175, 55, 0.35);
}

.hist-stat span {
  display: block;
  color: var(--muted);
  font-size: 0.65rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-top: 3px;
}

.bfwrap {
  position: relative;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 14px;
}

.bf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(180deg, #0d1a3d, #0a1535);
  border: 1px solid var(--line);
  color: var(--gold-light);
  cursor: pointer;
  transition: var(--tr);
}

.bf-btn:hover {
  border-color: var(--gold);
}

.bf-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #0d1a3d;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
  z-index: 20;
  min-width: 250px;
}

.bf-panel[hidden] {
  display: none;
}

.bf-group {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 5px;
}

.bf-label {
  color: var(--muted);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 0 4px;
}

.bf-chip {
  background: none;
  border: 1px solid transparent;
  color: var(--muted);
  border-radius: 7px;
  padding: 5px 10px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  line-height: 1;
}

.bf-chip.on {
  color: var(--gold-light);
  background: rgba(212, 175, 55, 0.12);
  border-color: rgba(212, 175, 55, 0.35);
}

/* My Bids � calendar date strip (one chip per day that has bids) */
.bf-dates {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 2px 0 12px;
  margin-bottom: 2px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.bf-dates::-webkit-scrollbar { display: none; }

.bf-dates .datechip {
  flex: 0 0 auto;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 12px;
  background: rgba(255, 255, 255, 0.03);
}

.bf-dates .datechip.on {
  border-color: rgba(212, 175, 55, 0.55);
  background: rgba(212, 175, 55, 0.16);
}

.datechip-n {
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  padding: 1px 6px;
}

.datechip.on .datechip-n { color: var(--gold-light); background: rgba(212, 175, 55, 0.22); }

.bf-dates .date-cal {
  border-color: rgba(212, 175, 55, 0.5);
  background: linear-gradient(180deg, rgba(212, 175, 55, 0.18), rgba(212, 175, 55, 0.08));
  color: var(--gold-light);
}
/* Board history strips use the identical My Bids calendar treatment. */
.board-history-dates{width:100%;margin:0 0 8px;padding:2px 0 12px}
.board-history-dates .datechip{font-size:.78rem;min-height:34px}
.board-history-dates .date-cal{font-weight:800}
.passbook-dates{margin-top:2px}

/* Full month calendar (My Bids date picker) */
.cal-panel { max-width: 340px; }

.cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.cal-title { font-size: 0.92rem; color: var(--gold-light); letter-spacing: 0.4px; }

.cal-navbtn {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}

.cal-navbtn:hover { border-color: var(--gold); color: var(--gold-light); }

.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }

.cal-dow {
  text-align: center;
  font-size: 0.58rem;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.6px;
  padding: 4px 0;
  text-transform: uppercase;
}

.cal-day {
  position: relative;
  min-height: 36px;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  border: 1px solid transparent;
  background: rgba(148, 163, 184, 0.16);
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}

.cal-day.empty { background: none; cursor: default; }
.cal-day:not(.empty):hover { border-color: var(--gold); }
.cal-day.is-today { border-color: rgba(212, 175, 55, 0.5); }
.cal-day.on { background: rgba(212, 175, 55, 0.24); border-color: var(--gold); color: var(--gold-light); }

.cal-day.has::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold);
}

.cal-day.on.has::after { background: #fff; }

.cal-actions { display: flex; gap: 8px; justify-content: center; margin-top: 12px; }

.bb-pageinfo { font-size: 0.74rem; font-weight: 700; color: var(--muted); text-align: center; padding: 0 8px; }

.bf-select {
  background: rgba(10, 21, 53, 0.9);
  color: var(--gold-light);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 7px;
  padding: 6px 8px;
  font-size: 0.72rem;
  font-weight: 700;
  outline: none;
  max-width: 150px;
}

.hist-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

.hist-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: linear-gradient(180deg, #0d1a3d, #0a1535);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 14px;
  transition: var(--tr);
}

.hist-row:hover {
  border-color: var(--gold);
  transform: translateY(-1px);
}

.hist-row.today {
  border-color: var(--gold);
  box-shadow: var(--glow-gold);
}

.hist-date {
  min-width: 92px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hd-day {
  color: var(--gold-light);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.hd-date {
  font-weight: 700;
  font-size: 0.88rem;
}

.hist-market {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--gold-light);
  border: 1px solid rgba(212, 175, 55, 0.5);
  border-radius: 99px;
  padding: 3px 10px;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.hist-session {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.6px;
  border-radius: 99px;
  padding: 3px 10px;
  white-space: nowrap;
}
.hist-session.s-open { color: #7fb8ff; border: 1px solid rgba(127, 184, 255, 0.45); }
.hist-session.s-close { color: #ff9d7f; border: 1px solid rgba(255, 120, 80, 0.45); }

.hist-panels {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  justify-content: center;
}

.hpanel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.hpanel-label {
  color: var(--muted);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}

.hpanel-digits {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--gold-light);
  background: rgba(212, 175, 55, 0.08);
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 10px;
  padding: 6px 12px;
  text-shadow: 0 0 12px rgba(212, 175, 55, 0.35);
}

.hist-row.today .hpanel-digits {
  background: rgba(212, 175, 55, 0.16);
}

.hpanel-arrow {
  color: var(--muted);
  font-size: 0.9rem;
}

.hist-jodi {
  min-width: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.jodi-pill {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 1px;
  color: #0a1535;
  background: linear-gradient(135deg, var(--gold), var(--gold3));
  border-radius: 99px;
  padding: 5px 14px;
  box-shadow: var(--glow-gold);
  white-space: nowrap;
}

.hist-row.brow { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.brow-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.brow-game { color: var(--gold-light); font-size: 0.72rem; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brow-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.brow-col { display: flex; flex-direction: column; align-items: center; gap: 5px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); border-radius: 10px; padding: 8px 6px; }
.brow-col .jodi-pill, .brow-col .hpanel-digits { width: 100%; text-align: center; }
.brow-col .jodi-pill { white-space: normal; overflow-wrap: anywhere; }
.brow-col .hpanel-digits { letter-spacing: 1px; }
.brow-foot { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 8px; color: var(--muted); font-size: 0.72rem; font-weight: 600; }
.brow-foot .dot { opacity: 0.5; }
.brow-foot .s-open { color: #7fb8ff; font-weight: 800; }
.brow-foot .s-close { color: #ff9d7f; font-weight: 800; }
.brow-foot .win { color: var(--green); font-weight: 800; }

.market-select {
  width: 100%;
  padding: 12px 14px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--gold-light);
  background: linear-gradient(180deg, #0d1a3d, var(--navy2));
  border: 1px solid var(--gold);
  border-radius: 12px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23d4af37' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

.market-select option {
  color: #0a1535;
  background: #fff;
  font-family: "Segoe UI", sans-serif;
  font-weight: 500;
}

.market-nav { margin-bottom: 14px; }

/* ---------- sara567-style layout ---------- */
.topbar { position: sticky; top: 0; z-index: 60; }
.topbar-right { display: flex; align-items: center; gap: 12px; }

.bal-chip {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  color: #0a1535;
  background: linear-gradient(135deg, var(--gold), var(--gold3));
  border-radius: 99px;
  padding: 6px 12px;
  box-shadow: var(--glow-gold);
  white-space: nowrap;
}

.bottom-nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: stretch;
  background: rgba(13, 26, 61, 0.55);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  z-index: 90;

}

.bottom-nav a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  padding: 9px 0 10px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--muted);
  border-top: 2px solid transparent;
  position: relative;
  transition: var(--tr);
}

.bottom-nav a svg { color: currentColor; }

.bottom-nav a.active {
  color: var(--gold-light);
  border-top-color: var(--gold);
  text-shadow: 0 0 12px rgba(212, 175, 55, 0.5);
}

.bottom-nav a.home {
  justify-content: flex-start;
  border-top: none;
  transform: translateY(-18px);
}
.bottom-nav a.home .home-disc {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  color: var(--gold-light);
  background: rgba(212, 175, 55, 0.10);
  border: 1.5px solid rgba(212, 175, 55, 0.60);
  box-shadow: 0 0 18px rgba(212, 175, 55, 0.50), inset 0 0 12px rgba(212, 175, 55, 0.12);
}
.bottom-nav a.home.active .home-disc {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), 0 0 18px rgba(212, 175, 55, 0.7);
  color: #fff;
}

/* Home disc per theme: solid high-contrast disc (the translucent gold washed
   out on light/blue backgrounds). */
html[data-theme="light"] .bottom-nav a.home .home-disc {
  background: linear-gradient(135deg, #fbbf24, #d97706);
  border: 1.5px solid #b45309;
  color: #fff;
  box-shadow: 0 6px 18px rgba(217, 119, 6, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
html[data-theme="light"] .bottom-nav a.home.active .home-disc {
  box-shadow: 0 6px 20px rgba(217, 119, 6, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.55);
  color: #fff;
}
html[data-theme="night"] .bottom-nav a.home .home-disc {
  background: linear-gradient(135deg, #22d3ee, #0284c7);
  border: 1.5px solid #0e7490;
  color: #fff;
  box-shadow: 0 6px 18px rgba(2, 132, 199, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
html[data-theme="night"] .bottom-nav a.home.active .home-disc {
  box-shadow: 0 6px 20px rgba(2, 132, 199, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.55);
  color: #fff;
}

/* Apple liquid-glass tabs � every bottom button except the home disc. */
.bottom-nav { gap: 6px; padding: 6px 10px 8px; }
.bottom-nav a:not(.home) {
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 18px;
  padding: 8px 0 9px;
  margin: 2px 0;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.03) 55%, rgba(255, 255, 255, 0.08));

  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.35), inset 0 -1px 2px rgba(0, 0, 0, 0.15), 0 4px 14px rgba(0, 0, 0, 0.25);
}
.bottom-nav a:not(.home):active { transform: scale(0.94); }
.bottom-nav a:not(.home).active {
  color: var(--gold-light);
  border-color: rgba(212, 175, 55, 0.55);
  background: linear-gradient(160deg, rgba(212, 175, 55, 0.28), rgba(212, 175, 55, 0.06) 55%, rgba(255, 255, 255, 0.10));
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5), inset 0 -1px 2px rgba(0, 0, 0, 0.1), 0 0 16px rgba(212, 175, 55, 0.35);
}
html[data-theme="light"] .bottom-nav a:not(.home) {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.3) 55%, rgba(255, 255, 255, 0.55));
  border-color: rgba(15, 23, 42, 0.1);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.9), 0 4px 14px rgba(15, 23, 42, 0.12);
}
body { padding-bottom: 82px; }

body { padding-bottom: 76px; }

.s5-banners {
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 14px;
  border: 1px solid var(--line);
}

.s5-banner-track {
  display: flex;
  animation: s5slide 15s infinite;
}

.s5-banner {
  min-width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 26px 20px;
  position: relative;
}

.s5-banner.b1 { background: linear-gradient(120deg, #0d1a3d, #14305f 55%, #0d1a3d); }
.s5-banner.b2 { background: linear-gradient(120deg, #14305f, #0d1a3d 55%, #10274e); }
.s5-banner.b3 { background: linear-gradient(120deg, #10274e, #0d1a3d 60%, #16335f); }

.s5-banner b {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: 1px;
  color: var(--gold-light);
  text-shadow: 0 0 18px rgba(212, 175, 55, 0.45);
}

.s5-banner i {
  font-style: normal;
  font-size: 0.82rem;
  color: var(--muted);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.s5-b-tag {
  position: absolute;
  top: 10px; right: 12px;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--gold-light);
  border: 1px solid rgba(212, 175, 55, 0.5);
  border-radius: 99px;
  padding: 3px 9px;
}

@keyframes s5slide {
  0%, 28% { transform: translateX(0); }
  33%, 61% { transform: translateX(-100%); }
  66%, 94% { transform: translateX(-200%); }
  100% { transform: translateX(0); }
}

.s5-section { margin-bottom: 18px; }

.s5-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.s5-head h2 {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.85rem;
  letter-spacing: 1.5px;
  color: var(--gold-light);
}

.s5-head > a {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 4px 10px;
  transition: var(--tr);
}

.s5-head > a:hover { color: var(--gold-light); border-color: var(--gold); }

.s5-live {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--gold-light);
}

.s5-list { display: flex; flex-direction: column; gap: 8px; }

.s5-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: linear-gradient(180deg, #101f4a 0%, #0c1737 55%, #0a1330 100%);
  border: 1px solid var(--line);
  border-top-color: rgba(255, 255, 255, 0.16);
  border-radius: 16px;
  padding: 13px 14px;
  cursor: pointer;
  transition: var(--tr);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 8px 20px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.3);
}

.s5-row:hover { border-color: var(--gold); transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07) inset, 0 12px 28px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(251, 191, 36, 0.25); }
.s5-row:active { transform: translateY(0) scale(0.99); }

.s5-left-box {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--card);
}
.s5-right-box {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 96px;
}
.s5-mkt { min-width: 0; display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; }
.s5-mkt b { font-size: 0.92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
html[data-theme="light"] .s5-mkt b, html[data-theme="light"] .play-card-name,
html[data-theme="night"] .s5-mkt b, html[data-theme="night"] .play-card-name { text-shadow: none; }
.s5-chart { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 9px; color: var(--gold-light); background: rgba(212, 175, 55, 0.1); border: 1px solid rgba(212, 175, 55, 0.35); }
.s5-chart img { width: 24px; height: 24px; object-fit: contain; display: block; }

.s5-number {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1.2rem;
  font-weight: 900;
  letter-spacing: 1px;
  color: var(--gold-light);
  text-shadow: 0 0 14px rgba(212, 175, 55, 0.5);
  line-height: 1.2;
}

.s5-times { display: flex; flex-wrap: nowrap; gap: 8px 12px; }
.s5-time { display: inline-flex; align-items: baseline; gap: 5px; min-width: 0; }
.s5-time em {
  font-style: normal;
  color: var(--muted);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 1px;
}
.s5-time b {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--text);
}

.s5-bid {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 1px;
  color: #4ade80;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(74, 222, 128, 0.5);
  border-radius: 12px;
  padding: 9px 16px 9px 10px;
  min-width: 72px;
  cursor: pointer;
  transition: var(--tr);
  animation: s5PlayGlow 2.4s ease-in-out infinite;
}
@keyframes s5PlayGlow {
  0%, 100% { opacity: .82; transform: scale(.98); }
  50% { opacity: 1; transform: scale(1.02); }
}
.s5-play-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(34, 197, 94, 0.18);
  color: #4ade80;
  margin-right: 7px;
  flex: none;
}

.s5-bid:hover { transform: scale(1.04); }
a.s5-bid { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; line-height: 1; }
a.s5-bid img { display: none; }
.s5-bid-small { padding: 6px 12px; font-size: 0.62rem; }

.s5-bid.disabled {
  background: rgba(248, 113, 113, 0.1);
  color: #f87171;
  border: 1px solid rgba(248, 113, 113, 0.45);
  border-top-color: rgba(252, 165, 165, 0.6);
  animation: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 6px 16px rgba(248,113,113,0.28), 0 2px 6px rgba(0,0,0,0.3);
  cursor: not-allowed;
  font-size: 0.66rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  animation: none;
}
.s5-bid.disabled::before {
  content: "";
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.22);
}
.s5-bid.disabled:hover { transform: none; }
.s5-bid.disabled{max-width:118px;text-align:center;line-height:1.15}

.guess-strip {
  display: flex;
  gap: 10px;
  background: linear-gradient(180deg, #0d1a3d, #0a1535);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
}

.guess-day {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 1px;
  color: var(--gold-light);
  display: flex;
  align-items: center;
  text-align: center;
  line-height: 1.4;
}

.guess-cards { display: flex; gap: 8px; flex: 1; flex-wrap: wrap; }

.guess-card {
  flex: 1;
  min-width: 96px;
  background: rgba(212, 175, 55, 0.06);
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: 10px;
  padding: 8px;
  text-align: center;
}

.guess-card small { display: block; color: var(--muted); font-size: 0.6rem; letter-spacing: 1.5px; text-transform: uppercase; }
.guess-card b { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 0.85rem; color: var(--gold-light); }

.s5-games { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }

.s5-game {
  background: linear-gradient(180deg, #0d1a3d, #0a1535);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.s5-game b {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.7rem;
  color: var(--gold-light);
  letter-spacing: 1px;
}

.s5-game strong { font-size: 0.8rem; }
.s5-game small { color: var(--muted); font-size: 0.68rem; margin-bottom: 6px; }

.c-open { color: var(--gold-light); }
.c-close { color: #7fb8ff; }
.chart-cell i { font-style: normal; opacity: 0.4; margin: 0 2px; }

.panel-tabs { display: flex; gap: 6px; }

.l-status {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 1px;
  border-radius: 99px;
  padding: 5px 10px;
  white-space: nowrap;
}

.l-win { color: #0a1535; background: linear-gradient(135deg, #52c41a, #8fd14f); }
.l-lose { color: #fff; background: linear-gradient(135deg, #ef4444, #b91c1c); }
.l-open { color: #7fb8ff; border: 1px solid rgba(127, 184, 255, 0.4); }
.c-win { color: #8fd14f; }

/* sara-style home top: starline + jackpot tiles */
.sara-games {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  padding: 14px 14px 4px;
}
.sara-game {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 4px;
  border-radius: 14px;
  background: var(--card-solid);
  border: 1px solid var(--line);
  text-decoration: none;
  transition: var(--tr);
}
.sara-game:hover { border-color: var(--gold); transform: translateY(-2px); box-shadow: var(--glow-gold); }
.sara-game .style-ico { width: 56px; height: 50px; border-radius: 12px; }
.sara-game .style-ico.sara img { width: 48px; height: 44px; }
.sara-game small {
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.6px;
  color: var(--muted);
}

/* home page: pinned header + internally scrolling market list */
.home-view {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.home-head { flex: 0 0 auto; }
.home-topbar { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; justify-content: space-between; margin: -72px -16px 4px; padding: 14px 14px 10px 68px; border-radius: 0 0 14px 14px; background: var(--card-solid); border: 1px solid var(--line); border-top: none; }
.topbar-wallet { font-size: 0.85rem; font-weight: 800; color: var(--green); background: rgba(74, 222, 128, 0.1); border: 1px solid rgba(74, 222, 128, 0.4); border-radius: 99px; padding: 6px 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.home-topbar-right { display: flex; align-items: center; gap: 8px; }
.topbar-bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 99px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  text-decoration: none;
  transition: var(--tr);
}
.topbar-bell:hover { color: var(--gold-light); border-color: var(--gold); box-shadow: var(--glow-gold); }
.topbar-bell-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 99px;
  background: linear-gradient(135deg, #f43f5e, #e11d48);
  color: #ffffff;
  font-size: 0.58rem;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
  box-shadow: 0 0 8px rgba(244, 63, 94, 0.7);
}
.home-title { display: flex; flex-direction: column; gap: 2px; }
.home-title b { font-size: 1rem; font-weight: 900; letter-spacing: 2px; color: var(--gold-light); }
.home-title span { font-size: 0.68rem; font-weight: 600; color: var(--muted); letter-spacing: 0.5px; }
.home-head-inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 14px 4px;
}
.home-head-inner .sara-tiles,
.home-head-inner .sara-money {
  width: 100%;
}
.home-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
  min-height: 0;
}
.home-scroll .s5-list { padding-bottom: 18px; }
.home-scroll::-webkit-scrollbar { width: 0; height: 0; }

.sara-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
.sara-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 12px 6px;
  border-radius: 12px;
  text-decoration: none;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 900;
  letter-spacing: 1px;
  color: #3b2a12;
  transition: var(--tr);
  box-shadow: var(--glow-gold);
}
.sara-tile:hover { transform: translateY(-2px); filter: brightness(1.06); }
.sara-tile-ico { font-size: 1.2rem; line-height: 1; }
.sara-tile-name { font-family: "Bebas Neue", "Inter", sans-serif; font-size: 0.8rem; font-weight: 400; text-align: center; line-height: 1.1; letter-spacing: 1px; }
.sara-tile-starline { color: var(--gold-light); background: rgba(212, 175, 55, 0.10); box-shadow: 0 0 4px rgba(212, 175, 55, 0.35), inset 0 0 4px rgba(212, 175, 55, 0.08); border: 1px solid rgba(212, 175, 55, 0.45); }
.sara-tile-jackpot { color: #7fb8ff; background: rgba(127, 184, 255, 0.08); box-shadow: 0 0 4px rgba(127, 184, 255, 0.35), inset 0 0 4px rgba(127, 184, 255, 0.08); border: 1px solid rgba(127, 184, 255, 0.45); }
.sara-tile-galidisawar { color: #c4a5fd; background: rgba(168, 85, 247, 0.08); box-shadow: 0 0 4px rgba(168, 85, 247, 0.35), inset 0 0 4px rgba(168, 85, 247, 0.08); border: 1px solid rgba(168, 85, 247, 0.45); }

/* sara-style add money + withdraw */
.live-bubble {
  display:flex; gap:8px; margin-top:2px; padding:2px 0;
}
.live-mini {
  flex:none; display:inline-flex; align-items:center; gap:6px;
  padding:7px 14px 7px 11px; border-radius:999px; font-size:.74rem; font-weight:800; letter-spacing:.4px; line-height:1.3;
  border:1px solid rgba(34,197,94,.45); color:#bbf7d0; background:rgba(34,197,94,.1);
  cursor:pointer; transition:var(--tr);
}
.live-mini i { width:6px; height:6px; border-radius:50%; background:#22c55e; box-shadow:0 0 7px rgba(34,197,94,.8); animation:livePulse 1.4s ease-in-out infinite; }
.live-mini b { font-weight:800; color:#ecfdf5; }
.live-mini em { font-style:normal; font-weight:700; opacity:.9; }
.live-mini.next { border-color:rgba(251,191,36,.45); color:#fde68a; background:rgba(251,191,36,.08); }
.live-mini.next i { background:#fbbf24; box-shadow:0 0 7px rgba(251,191,36,.8); }
.live-mini.next b { color:#fffbeb; }
.live-mini.on { background:rgba(34,197,94,.26); border-color:#22c55e; color:#ecfdf5; }
.live-mini.next.on { background:rgba(251,191,36,.2); border-color:#fbbf24; color:#fffbeb; }
@keyframes livePulse { 50% { transform:scale(.75); opacity:.6; } }
.sara-money {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.sara-mbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 9px 10px;
  border-radius: 12px;
  text-decoration: none;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 1px;
  border: 1px solid var(--line);
  transition: var(--tr);
}
.sara-mbtn:hover { border-color: var(--gold); transform: translateY(-1px); }
.sara-mbtn.m-add { color: var(--gold-light); background: rgba(212, 175, 55, 0.10); box-shadow: 0 0 16px rgba(212, 175, 55, 0.35), inset 0 0 12px rgba(212, 175, 55, 0.08); border-color: rgba(212, 175, 55, 0.45); }
.sara-mbtn.m-withdraw { color: #7fb8ff; background: rgba(127, 184, 255, 0.08); box-shadow: 0 0 16px rgba(127, 184, 255, 0.35), inset 0 0 12px rgba(127, 184, 255, 0.08); border-color: rgba(127, 184, 255, 0.45); }

.cat-chips { display: flex; gap: 8px; overflow-x: auto; padding: 10px 2px 2px; -webkit-overflow-scrolling: touch; }
.cat-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--muted);
  background: rgba(12, 20, 48, 0.8);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
}
.cat-chip.on { color: #0a1535; background: linear-gradient(135deg, var(--gold), var(--gold3)); border-color: transparent; box-shadow: var(--glow-gold); }
#ptr-ind {
  position: fixed; top: 0; left: 0; right: 0; z-index: 300;
  height: 0; display: flex; justify-content: center; align-items: flex-end;
  overflow: hidden; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,10,15,0.97), rgba(10,10,15,0));
  will-change: height;
}
#ptr-ind .ptr-inner {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 18px 0 16px; width: 100%;
  transform: scale(var(--ptr-scale, 1)); transform-origin: bottom center;
}
#ptr-ind .ptr-handle {
  width: 56px; height: 6px; border-radius: 999px;
  background: rgba(255,255,255,0.4); box-shadow: 0 0 14px rgba(255,255,255,0.3);
  margin-bottom: 2px;
}
#ptr-ind.ptr-ready .ptr-handle { background: var(--gold); box-shadow: 0 0 16px var(--gold); }
.ptr-spinner {
  width: 30px; height: 30px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.18); border-top-color: var(--gold);
  animation: ptrSpin 0.9s linear infinite;
}
#ptr-ind.ptr-ready .ptr-spinner { animation-duration: 0.35s; }
#ptr-ind.ptr-done .ptr-spinner { border-top-color: var(--green); animation-duration: 0.55s; }
.ptr-text { color: #fff; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.5px; text-shadow: 0 1px 4px rgba(0,0,0,0.5); white-space: nowrap; }
@keyframes ptrSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes livePulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.8); } }

.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--green); margin-right: 6px; box-shadow: 0 0 8px rgba(74, 222, 128, 0.8); animation: livePulse 1.6s ease-in-out infinite; }

.live-count { font-size: 0.62rem; font-weight: 800; letter-spacing: 1px; color: var(--green); background: rgba(74, 222, 128, 0.1); border: 1px solid rgba(74, 222, 128, 0.4); border-radius: 99px; padding: 3px 10px; margin-left: 8px; white-space: nowrap; }
.live-count:empty { display: none; }

#boot-welcome {
  position: fixed; inset: 0; z-index: 20000; display: flex;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; padding: 24px; text-align: center;
  background: radial-gradient(120% 90% at 50% 0%, rgba(185,144,82,0.16), transparent 55%), linear-gradient(180deg, #0d1120, #05070d);
  transition: opacity 0.5s ease, visibility 0.5s ease;
}
#boot-welcome.hide { opacity: 0; visibility: hidden; pointer-events: none; }
.welcome-logo {
  width: min(70vw, 280px); height: auto; object-fit: contain;
  position: relative;
  animation: welcomeFloat 2.6s ease-in-out infinite;
}
/* Painted halo instead of filter: drop-shadow(). A radial gradient is baked
   into the layer once; a filter is re-evaluated on every repaint. */
.welcome-logo::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 150%; height: 150%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(255,255,255,0.30), rgba(255,255,255,0.10) 55%, transparent 72%);
  pointer-events: none;
  z-index: -1;
}
.welcome-title {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(1.2rem, 5vw, 1.7rem); font-weight: 900; letter-spacing: 1px;
  color: var(--gold-light); margin: 0;
  background: linear-gradient(135deg, var(--gold), #fff, var(--gold)); -webkit-background-clip: text;
  background-clip: text; -webkit-text-fill-color: transparent; text-shadow: none;
}
.welcome-sub { color: var(--muted); font-size: 0.82rem; margin: -6px 0 0; }
.welcome-load { display: flex; gap: 7px; margin-top: 6px; }
.welcome-load span {
  width: 9px; height: 9px; border-radius: 50%; background: var(--gold);
  animation: welcomeBounce 1.2s ease-in-out infinite;
}
.welcome-load span:nth-child(2) { animation-delay: 0.15s; }
.welcome-load span:nth-child(3) { animation-delay: 0.3s; }
@keyframes welcomeFloat { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-8px) scale(1.02); } }
@keyframes welcomeBounce { 0%,100% { opacity: 0.35; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-6px); } }

/* STARLINE / JACKPOT boards */
.board-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 8px;
  border-bottom: 1px solid var(--line);
}
.board-head h1 { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 1.3rem; font-weight: 900; letter-spacing: 1px; color: var(--gold-light); text-shadow: var(--glow-gold); }
.board-bal { font-family: "Inter", sans-serif; font-weight: 800; color: var(--text); font-size: 0.9rem; }
.board-back { font-size: 0.72rem; color: var(--gold-light); text-decoration: none; font-weight: 700; }
.board-tabs { display: flex; gap: 0; padding: 12px 16px 0; }
.board-tabs span {
  flex: 1;
  text-align: center;
  font-family: "Inter", sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--muted);
  padding: 10px 6px;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}
.board-tabs span.on { color: var(--gold-light); border-color: var(--gold); }
.board-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px; }
.b-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 14px;
  background: var(--card-solid, #0d1b3d);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--glow-gold);
}
.b-chip b { font-family: "Inter", sans-serif; font-size: 0.72rem; letter-spacing: 0.5px; color: var(--gold-light); }
.b-chip small { font-size: 0.62rem; color: var(--muted); font-weight: 700; }
.board-list { display: flex; flex-direction: column; gap: 8px; padding: 6px 16px 20px; }
.board-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 12px 12px;
  background: var(--card-solid, #0d1b3d);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.bw-time { font-family: "Inter", sans-serif; font-size: 0.82rem; font-weight: 800; color: var(--text); min-width: 78px; }
.bw-status { font-size: 0.6rem; font-weight: 900; letter-spacing: 1px; }
.bw-status.st-closed { color: #ea580c; }
.bw-status.st-run { color: var(--green); }
.bw-num { font-family: "Inter", sans-serif; font-size: 0.85rem; font-weight: 900; letter-spacing: 1px; color: var(--gold-light); }
.bw-play {
  font-family: "Inter", sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 1px;
  color: #3b2a12;
  background: linear-gradient(135deg, var(--gold), var(--gold3));
  border: none;
  border-radius: 10px;
  padding: 9px 16px;
  cursor: pointer;
  box-shadow: var(--glow-gold);
}
.bw-play:hover { transform: scale(1.04); }
.bw-locked { font-size: 0.64rem; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; color: var(--muted); white-space: nowrap; }

/* ---- Board rows: neon money-button boxes (like ADD MONEY / WITHDRAW) ---- */
.board-neon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 14px;
  border-radius: 16px;
  text-align: center;
  color: var(--gold-light);
  background:
    linear-gradient(180deg, rgba(232, 184, 75, 0.16) 0%, rgba(232, 184, 75, 0.05) 100%),
    rgba(28, 22, 8, 0.60);
  border: 1.5px solid rgba(232, 184, 75, 0.70);
  box-shadow: 0 0 22px rgba(232, 184, 75, 0.45), 0 0 70px rgba(232, 184, 75, 0.14), inset 0 0 18px rgba(232, 184, 75, 0.12);
}
.board-neon .bn-top { display: flex; align-items: center; gap: 10px; }
.board-neon .bw-time { font-size: 1rem; min-width: 0; }
.board-neon .bw-num { font-size: 1.35rem; }
.board-neon .bw-play { width: 100%; padding: 12px; font-size: 0.85rem; }
.board-neon.is-locked {
  color: var(--muted);
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(12, 15, 34, 0.50);
  box-shadow: none;
}

/* ---- Board: tabs as links ---- */
.board-tabs a { display: inline-block; padding: 8px 2px; font-size: 0.78rem; font-weight: 800; letter-spacing: 1px; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; }
.board-tabs a.on { color: var(--gold-light); border-bottom-color: var(--gold); }

/* ---- Board tab capsules ---- */
.board-tab-cap {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 10px 20px !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  color: var(--text) !important;
  text-decoration: none !important;
  border: none !important;
  border-radius: 50px !important;
  background: linear-gradient(135deg, rgba(185, 144, 82, 0.15), rgba(185, 144, 82, 0.08));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition:transform 180ms cubic-bezier(.22,1,.36,1),opacity 180ms ease,background-color 180ms ease,border-color 180ms ease;
}
.board-tab-cap:hover {
  background: linear-gradient(135deg, var(--gold), var(--gold3)) !important;
  color: #1a120b !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(185, 144, 82, 0.4);
}
.board-tab-cap:active {
  transform: translateY(0);
}

/* ---- Board tab capsules ---- */

/* ---- Support page: single screen, banner background, options overlaid ---- */
.sup-full { position: relative; z-index: 1; margin: 0 -16px; min-height: calc(100vh - 208px); min-height: calc(100dvh - 208px); display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 64px; background: #17111b; }
.sup-bg { position: fixed; inset: 0; background-size: cover; background-position: center top; background-repeat: no-repeat; z-index: 0; pointer-events: none; }
.sup-over { position: relative; z-index: 1; padding: 12px 16px 0; }
.sup-head { position: fixed; top: 110px; left: 14px; display: block; width: max-content; max-width: 215px; margin: 0; padding: 8px 14px 9px; border-radius: 15px; background: rgba(5,7,18,.68); border: 1px solid rgba(255,255,255,.10); box-shadow: 0 10px 30px rgba(0,0,0,.42); z-index: 5; animation: supGlow 2.5s ease-in-out infinite; }
.sup-title { display: flex; align-items: center; gap: 9px; }
.sup-title h1 { margin: 0; font-size: 1.3rem; font-weight: 900; letter-spacing: .5px; color: var(--gold-light); text-shadow: 0 2px 10px rgba(0,0,0,.85); }
.sup-brand { font-size: .62rem; font-weight: 900; letter-spacing: 1.5px; color: #1a120b; background: linear-gradient(135deg, var(--gold), var(--gold3)); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.sup-sub { display: block; color: #EDE7FB; font-size: 0.75rem; line-height: 1.35; margin: 4px 0 0; text-align: center; white-space: normal; }
.sup-ico { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; color: var(--gold-light); background: rgba(212, 175, 55, 0.10); border: 1.5px solid rgba(212, 175, 55, 0.55); box-shadow: 0 0 18px rgba(212, 175, 55, 0.35); margin-bottom: 4px; }
.sup-ico svg { width: 20px; height: 20px; }
.sup-list.sup-icons { display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding: 0 0 2px; width: max-content; max-width: 90%; }
.sup-ico-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: auto; min-width: 60px; height: 40px; padding: 0 18px; border-radius: 999px; flex: none; color: #fff; font-weight: 800; font-size: 0.82rem; text-decoration: none; letter-spacing: .2px; }
.sup-ico-btn svg { flex: none; }
.sup-ico-btn.wa { background: linear-gradient(135deg, #22c55e, #15803d); box-shadow: 0 8px 26px rgba(34, 197, 94, 0.45); }
.sup-ico-btn.tg { background: linear-gradient(135deg, #38bdf8, #0284c7); box-shadow: 0 8px 26px rgba(2, 132, 199, 0.45); color: #fff; }
.sup-ico-btn.call { background: linear-gradient(135deg, #f87171, #dc2626); box-shadow: 0 8px 26px rgba(220, 38, 38, 0.45); color: #fff; }
.sup-btn { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-radius: 16px; text-decoration: none; color: #fff; font-weight: 800; }
.sup-btn-ico { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, 0.92); flex: none; }
.sup-btn-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; flex: 1; }
.sup-btn-txt b { font-size: 0.98rem; }
.sup-btn-txt small { font-size: 0.78rem; font-weight: 600; opacity: 0.92; }
.sup-btn-go { font-size: 1.5rem; font-weight: 400; opacity: 0.9; }
.sup-btn.wa { background: linear-gradient(135deg, #22c55e, #15803d); box-shadow: 0 8px 26px rgba(34, 197, 94, 0.35); }
.sup-btn.tg { background: linear-gradient(135deg, #38bdf8, #0284c7); box-shadow: 0 8px 26px rgba(2, 132, 199, 0.35); }
.sup-btn.tg .sup-btn-ico { color: #0284c7; }
.sup-btn.call { background: linear-gradient(135deg, #f87171, #dc2626); box-shadow: 0 8px 26px rgba(220, 38, 38, 0.35); }
.sup-btn.call .sup-btn-ico { color: #dc2626; }
.sup-quick { display: grid; grid-template-columns: 40px 1fr; gap: 0 11px; align-items: center; margin: 10px 0 0; padding: 12px; border-radius: 16px; border: 1px solid rgba(212, 175, 55, 0.5); background: rgba(8, 5, 2, 0.86); }
.sup-quick-ico { grid-row: 1 / span 2; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; color: var(--gold-light); border: 1.5px solid rgba(212, 175, 55, 0.55); }
@media (max-height: 640px) { .sup-full { min-height: calc(100vh - 196px); min-height: calc(100dvh - 196px); padding-bottom: 58px; } .sup-over { padding: 8px 16px 0; } .sup-head { padding: 8px 16px 10px; margin-bottom: 10px; } .sup-title h1 { font-size: 1.55rem; } .sup-ico { width: 40px; height: 40px; } .sup-list.sup-icons { gap: 8px; } .sup-ico-btn { height: 36px; font-size: .78rem; } }
.sup-quick-txt { display: block; min-width: 0; }
.sup-quick-txt b { display: block; font-size: 0.95rem; line-height: 1.2; color: #FFFFFF; }
/* UPI app chooser sheet (deposit auto-pay). */
/* The UPI chooser must sit above EVERYTHING, including the app shell, the
   bottom nav and any sheet that is already open - otherwise it renders behind
   them and the player never sees it. The app shell sits in its own stacking
   context, so a high z-index inside .page is not enough: the overlay has to be
   a child of <body> (it already is) with an isolated, top-level layer. */
.pay-sheet-ov {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 2147483000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(2, 8, 26, 0.78);
  padding: 16px 16px 26px;
  /* No animation here: a fade/slide on the overlay re-composites the whole
     screen each frame, which is exactly the stutter we removed elsewhere. */
  touch-action: auto;
  -webkit-tap-highlight-color: transparent;
  isolation: isolate;
}

/* Enter animation moved onto the sheet only - one small layer, cheap to
   composite, and it makes the popup feel deliberate instead of snapping in. */
.pay-sheet {
  animation: paySheetIn .22s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes paySheetIn {
  from { opacity: 0; transform: translateY(22px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pay-sheet { animation: none; }
}
.pay-sheet { width: 100%; max-width: 420px; border-radius: 22px 22px 0 0; padding: 18px 18px 16px; background: #ffffff; border: none; color: #0b1530; text-align: center; box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.35); }
.pay-sheet::before { content: ""; display: block; width: 42px; height: 4px; border-radius: 99px; background: #d7dbe8; margin: 0 auto 12px; }
.pay-sheet > b { font-size: 1.05rem; color: #0b1530; }
.pay-sheet-qrwrap { display:flex; flex-direction:column; align-items:center; gap:6px; margin-top:14px; padding-top:14px; border-top:1px solid #e8ecf4; }
.pay-sheet-qr { width:190px; height:190px; display:block; background:#fff; border-radius:10px; padding:8px; border:1px solid #e8ecf4; }
.pay-sheet-qrwrap span { font-size:.7rem; font-weight:700; letter-spacing:.4px; color:#5a6786; }
.pay-sheet-wait { display:inline-flex; align-items:center; gap:8px; padding:12px 18px; border-radius:999px; background:#f2f5fb; color:#5a6786; font-size:.8rem; font-weight:700; }
.pay-sheet-wait::before { content:""; width:14px; height:14px; border-radius:50%; border:2px solid #cdd6e6; border-top-color:#2563eb; animation:paySpin .8s linear infinite; }
@keyframes paySpin { to { transform:rotate(360deg); } }
.pay-sheet-success { display:flex; flex-direction:column; align-items:center; gap:10px; padding:10px 0 4px; }
.ps-check { width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#16a34a; color:#fff; font-size:2rem; font-weight:800; box-shadow:0 10px 26px rgba(22,163,74,.4); }
.pay-sheet-success b { font-size:1.05rem; color:#0b1530; }
.pay-sheet-success .hint { margin:0; color:#5a6786; }
.pay-sheet-success .btn { min-width:150px; }
.pay-apps { display: flex; gap: 10px; justify-content: center; margin: 14px 0 4px; }
/* UPI-style chooser: white tiles, round app icons, plain dark labels. */
.pay-app-btn { position: relative; overflow: visible; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: #ffffff; border: 1px solid #e3e8f2; border-radius: 14px; padding: 13px 10px; color: #0b1530; font-weight: 700; font-size: 0.78rem; flex: 1 1 0; cursor: pointer; }
.pay-app-btn img { height: 50px; width: 50px; border-radius: 50%; background: #ffffff; border: 1.5px solid #e6ebf5; box-shadow: 0 3px 10px rgba(11, 21, 48, 0.14); }
.pay-app-btn::after { content: none; }
.pay-app-btn:active { transform: scale(.95); background: #f2f5fb; }
.pay-sheet { animation: paySheetIn .34s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes paySheetIn { from { opacity: 0; transform: translateY(26px) scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pay-app-btn, .pay-sheet { animation: none; } }
.pay-sheet .hint { margin: 10px 0 0; color: #5a6786; }
.pay-sheet .btn.ghost { background: #f2f5fb; border: 1px solid #e3e8f2; color: #0b1530; }
.pay-note { margin: 12px 0 0; padding: 9px 10px; border-radius: 10px; background: #fff8e8; border: 1px solid #f0e2b0; color: #6b5a20; font-size: .74rem; line-height: 1.45; text-align: left; }
.pay-note b { color: #8a6d1a; }
.sup-quick-txt small { display: block; font-size: 0.76rem; line-height: 1.25; color: #D6CCF0; }
.sup-always { grid-column: 2; margin-top: 3px; font-family: cursive; font-size: 0.85rem; line-height: 1.2; color: var(--gold-light); white-space: nowrap; }
/* Support contact buttons: small round icon bubbles in a row (scoped so the
   login help capsule using .sup-ico-btn elsewhere keeps its pill shape). */
/* Contact capsules: pill buttons stacked left, floating in front of the art. */
.sup-list.sup-icons{position:static;z-index:auto;flex-direction:column;gap:10px;align-items:flex-start;margin:0;padding-bottom:0}
.sup-list.sup-icons .sup-ico-btn{width:168px;min-width:0;height:48px;padding:0 14px 0 9px;border-radius:999px;display:inline-flex;align-items:center;gap:9px}
.sup-list.sup-icons .sup-ico-btn svg{width:32px;height:32px}
.sup-list.sup-icons .sup-ico-btn span{display:none}
.sup-list.sup-icons .sup-ico-btn::after{position:static;transform:none;font-size:.8rem;font-weight:800;letter-spacing:.2px;color:#fff;white-space:nowrap;text-shadow:0 1px 4px rgba(0,0,0,.35)}
/* Support options alive: staggered entrance, breathing icons, press pop.
   Transform/opacity only (GPU-cheap); entrance uses `backwards` fill so the
   :active press state keeps working after it ends. */
@keyframes supFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes supFloatSoft{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes supGlow{0%,100%{opacity:.86}50%{opacity:1}}
@keyframes supRise{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
@keyframes supIcon{0%,100%{transform:scale(1) rotate(0deg)}50%{transform:scale(1.12) rotate(-4deg)}}
.sup-over .sup-head{animation:supRise .45s cubic-bezier(.22,.61,.36,1) backwards}
.sup-list.sup-icons .sup-ico-btn{animation:supRise .45s cubic-bezier(.22,.61,.36,1) backwards}
.sup-list.sup-icons .sup-ico-btn:nth-child(1){animation-delay:.08s}
.sup-list.sup-icons .sup-ico-btn:nth-child(2){animation-delay:.16s}
.sup-list.sup-icons .sup-ico-btn:nth-child(3){animation-delay:.24s}
.sup-list.sup-icons .sup-ico-btn svg{animation:supIcon 2.6s ease-in-out .6s infinite}
.sup-list.sup-icons .sup-ico-btn:active{transform:scale(.94)}
@media (prefers-reduced-motion: reduce){
  .sup-over .sup-head,.sup-list.sup-icons .sup-ico-btn,.sup-list.sup-icons .sup-ico-btn svg{animation:none}
}
/* (round-bubble rules retired; capsule rules above own .sup-ico-btn now) */
.sup-list.sup-icons .sup-ico-btn.wa::after{content:"WhatsApp"}
.sup-list.sup-icons .sup-ico-btn.tg::after{content:"Telegram"}
.sup-list.sup-icons .sup-ico-btn.call::after{content:"Call"}
.fund-limit-note{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:10px 0 13px;padding:11px 13px;border-radius:12px;background:linear-gradient(135deg,rgba(185,144,82,.12),rgba(37,99,235,.08));border:1px solid rgba(185,144,82,.3);color:var(--muted);font-size:.76rem}
.fund-limit-note span{font-weight:700}.fund-limit-note b{color:var(--gold-light);font-size:.82rem;white-space:nowrap}
.fund-withdraw-info{align-items:stretch}.fund-withdraw-info>div{display:flex;flex-direction:column;gap:3px;min-width:0}.fund-withdraw-info>div+div{padding-left:12px;border-left:1px solid rgba(185,144,82,.28)}.fund-withdraw-info b{font-size:.76rem}
@media(max-width:480px){.fund-withdraw-info{flex-direction:column;gap:9px}.fund-withdraw-info>div+div{padding-left:0;padding-top:9px;border-left:0;border-top:1px solid rgba(185,144,82,.28)}}

/* Home header: notification stays in the top corner; wallet becomes a compact
   icon beside the sync status instead of taking the whole header width. */
.home-topbar{position:relative}
.home-topbar-right{position:relative;padding-right:42px;min-height:34px;display:flex;align-items:center;gap:9px}
.home-topbar-right .topbar-bell{position:absolute;right:0;top:50%;transform:translateY(-50%);z-index:2;width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:11px;background:rgba(185,144,82,.14);border:1px solid rgba(185,144,82,.38);color:var(--gold-light)}
.home-topbar-right .topbar-bell:hover{background:rgba(185,144,82,.25);transform:translateY(-50%) scale(1.04)}
.home-topbar-right .topbar-wallet{min-width:86px;height:34px;padding:0 10px;display:inline-flex;align-items:center;justify-content:center;gap:5px;border-radius:11px;color:var(--green);background:rgba(74,222,128,.1);border:1px solid rgba(74,222,128,.35);font-size:.78rem;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.home-topbar-right .topbar-wallet svg{display:block;width:17px;height:17px}.home-topbar-right .topbar-wallet span{display:inline}
html[data-theme="glass"] .home-topbar-right .topbar-bell{background:rgba(228,184,113,.16);border-color:rgba(228,184,113,.45)}
html[data-theme="glass"] .home-topbar-right .topbar-wallet{background:rgba(91,228,155,.12);border-color:rgba(91,228,155,.4)}

/* Support hero: photo backdrop with controlled wash + overlay. */
.sup-full{overflow:hidden;position:relative;display:block;background:none;padding-bottom:0;min-height:100vh;min-height:100dvh}
/* Agent PNG cutout: right corner, bottom edge starts at the home row.
   Viewport-anchored so container height can never strand it mid-page. */
.sup-agent{position:fixed;right:0;bottom:96px;width:min(95%,860px);height:min(78vh,760px);background:url('../img/support-agent.png') bottom right/contain no-repeat;z-index:0;pointer-events:none;}
@media(max-width:640px){
  .sup-agent{width:min(100%,600px);height:62vh;bottom:92px;right:-3%}
}
.sup-bg{position:absolute;background-color:#071735;background-position:center top;background-size:cover;transform:none}
.sup-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,12,31,.62) 0%,rgba(5,17,43,.28) 36%,rgba(4,12,31,.82) 100%),linear-gradient(90deg,rgba(4,12,31,.22),transparent 45%,rgba(4,12,31,.3));pointer-events:none}
.sup-over{position:fixed;left:14px;bottom:196px;z-index:2;display:flex;flex-direction:column;gap:12px;padding:0}
.sup-head{background:rgba(5,15,38,.76);border-color:rgba(244,183,64,.26);box-shadow:0 12px 30px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.08)}
.sup-ico-btn{box-shadow:0 7px 20px rgba(0,0,0,.28)}
html[data-theme="glass"] .sup-full{background:none}
html[data-theme="glass"] .sup-bg::after{background:linear-gradient(180deg,rgba(5,7,20,.7),rgba(6,13,36,.28) 42%,rgba(4,8,22,.88))}
@media(max-width:640px){.sup-bg{background-position:center top;background-size:cover}.sup-over{padding:12px 12px 0}.sup-head{width:100%;box-sizing:border-box}}
/* Login/onboarding help capsule (reuses the Support WhatsApp pill). */
.ob-help { display: flex; justify-content: center; margin: 16px 0 6px; }
.ob-help .sup-ico-btn { width: auto; }
.ob-forgot { text-align: center; color: var(--muted); font-size: 0.85rem; margin: 12px 0 0; }
.board-page-head { position: relative; padding-left: 56px; text-align: left; }
.board-page-head h1 { font-size: 1.25rem; }
.bcenter-title{text-align:center!important;text-transform:uppercase;font-size:1.8rem!important;letter-spacing:1.4px;font-weight:900;margin:0 auto!important;width:100%;}
@media(max-width:640px){.bcenter-title{font-size:1.45rem!important;letter-spacing:1px}}

/* ---- Result history ---- */
.br-datepicker { display: flex; align-items: center; gap: 10px; margin: 10px 0 4px; flex-wrap: wrap; }
.br-datepicker label { font-size: 0.72rem; font-weight: 700; color: var(--muted); letter-spacing: 0.5px; }
.br-datepicker input[type="date"] { background: rgba(20, 32, 70, 0.9); color: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; font-family: "Inter", sans-serif; font-size: 0.78rem; }
.br-list { display: flex; flex-direction: column; padding: 6px 16px 20px; }
.br-row { display: flex; align-items: center; justify-content: space-between; padding: 13px 4px; border-bottom: 1px solid var(--line); }
.br-time { font-size: 0.82rem; font-weight: 700; color: var(--muted); min-width: 96px; }
.br-num { font-family: "Inter", sans-serif; font-size: 0.95rem; font-weight: 900; letter-spacing: 1px; color: var(--gold-light); }
.br-num.br-future { color: var(--muted); }

/* ---- Bid history ---- */
.bb-empty { text-align: center; padding: 70px 24px 30px; color: var(--muted); }
.bb-empty-title { font-size: 0.95rem; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.bb-empty-sub { font-size: 0.8rem; }
.bb-list { display: flex; flex-direction: column; padding: 4px 16px; }
.bb-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 4px; border-bottom: 1px solid var(--line); }
.bb-main { display: flex; flex-direction: column; gap: 4px; }
.bb-main b { font-size: 0.85rem; color: var(--text); }
.bb-main span { font-size: 0.72rem; color: var(--muted); }
.bb-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
/* Board bid status chip: a settled bid must be legible at a glance. */
.bb-status { display: inline-block; margin-top: 2px; padding: 2px 8px; border-radius: 999px; font-size: .64rem; font-weight: 800; letter-spacing: .06em; }
.bb-status.bb-won { background: rgba(46, 204, 113, .18); border: 1px solid rgba(46, 204, 113, .45); color: #7BE3AC; }
.bb-status.bb-lost { background: rgba(231, 76, 60, .16); border: 1px solid rgba(231, 76, 60, .42); color: #FF9C90; }
.bb-status.bb-pend { background: rgba(212, 175, 55, .16); border: 1px solid rgba(212, 175, 55, .42); color: #EBD9A8; }
.bb-status.bb-na { background: rgba(140, 150, 175, .16); border: 1px solid rgba(140, 150, 175, .4); color: #AEB8CE; }
.bb-res { color: #8FA3D1; font-size: .7rem; }
.bb-side b { font-size: 0.85rem; color: var(--gold-light); }
.bb-side span { font-size: 0.68rem; color: var(--muted); }
.bb-pager { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 18px 0 24px; color: var(--muted); }
.bb-pager button { background: none; border: 1px solid var(--line); color: var(--muted); border-radius: 8px; padding: 6px 14px; font-size: 0.68rem; font-weight: 700; letter-spacing: 1px; cursor: pointer; }
.bb-pager button:disabled { opacity: 0.4; cursor: default; }
.bb-pager span { font-size: 0.82rem; font-weight: 700; color: var(--text); }
.bb-pager-hint { text-align: center; font-size: 0.7rem; color: var(--muted); padding: 0 0 18px; margin-top: -10px; }

/* ---- Game pick (Play) ---- */
.board-back-back { margin: 14px; display: inline-block; font-size: 0.78rem; font-weight: 700; color: var(--muted); text-decoration: none; }
.bp-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 16px 4px; }
.bp-title { display: flex; align-items: baseline; gap: 8px; }
.bp-title span { font-size: 0.9rem; font-weight: 800; color: var(--text); }
.bp-title b { font-size: 0.72rem; font-weight: 800; letter-spacing: 1px; color: var(--muted); }
.bp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 14px 16px 24px; }
.bp-tile { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; text-align: left; padding: 16px 14px; border-radius: 14px; border: 1px solid var(--line); background: linear-gradient(135deg, rgba(20, 32, 70, 0.9), rgba(13, 22, 50, 0.9)); color: #fff; cursor: pointer; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25); }
.bp-tile b { font-size: 0.9rem; font-weight: 800; color: #fff; }
.bp-tile small { font-size: 0.7rem; color: rgba(255,255,255,0.72); font-weight: 700; }
.bp-tile em { font-size: 0.72rem; font-style: normal; font-weight: 800; color: var(--gold-light); margin-top: 4px; }
.bp-tile:hover { transform: translateY(-2px); }

/* ---- Bet entry ---- */
.board-back-fixed { position: absolute; top: 58px; left: 12px; z-index: 5; font-size: 0.78rem; font-weight: 700; color: var(--muted); text-decoration: none; }
.bb2-head { display: flex; align-items: center; justify-content: space-between; padding: 54px 16px 4px; }
.bb2-modes { display: flex; gap: 6px; padding: 12px 16px 4px; }
.bb2-modes .seg { flex: 1; }
.bb2-fields { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 4px; }
.bb2-fields label { font-size: 0.72rem; font-weight: 700; color: var(--muted); letter-spacing: 0.5px; }
.bb2-fields input { background: rgba(20, 32, 70, 0.9); color: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 12px; font-family: "Inter", sans-serif; font-size: 0.95rem; }
.bb2-add { font-family: "Inter", sans-serif; font-size: 0.82rem; font-weight: 800; letter-spacing: 1px; color: #3b2a12; background: linear-gradient(135deg, var(--gold), var(--gold3)); border: none; border-radius: 12px; padding: 12px; cursor: pointer; margin-top: 6px; box-shadow: var(--glow-gold); }
.bb2-table { padding: 8px 16px; }
.bb2-thead, .bb2-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr 0.7fr; gap: 6px; align-items: center; }
.bb2-row:not(:only-child) { border-bottom: 1px solid var(--line); }
.bb2-thead span { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.5px; color: var(--muted); padding: 10px 0; }
.bb2-num { font-family: "Inter", sans-serif; font-size: 0.9rem; font-weight: 800; color: var(--gold-light); }
.bb2-type { font-size: 0.68rem; color: var(--muted); }
.bb2-point { font-size: 0.82rem; font-weight: 700; color: var(--white); }
.bb2-del { background: none; border: 1px solid rgba(255, 80, 80, 0.4); color: #ff6b6b; border-radius: 8px; padding: 5px 8px; font-size: 0.66rem; cursor: pointer; }
.bb2-norow { font-size: 0.78rem; color: var(--muted); padding: 20px 0; text-align: center; }
.bb2-bar { display: flex; align-items: center; gap: 8px; padding: 14px 16px 24px; border-top: 1px solid var(--line); }
.bb2-label { font-size: 0.72rem; color: var(--muted); font-weight: 700; }
.bb2-bar b { font-size: 0.85rem; color: var(--text); margin-right: 6px; }
.bb2-submit { margin-left: auto; }

/* ---- Special mode ---- */
.bb2-modes2 { padding: 10px 16px 0; }
.bs-date { font-size: 0.8rem; font-weight: 700; color: var(--muted); }
.bs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 12px; padding: 12px 16px 20px; }
.bs-grid.bs-jodi { grid-template-columns: 1fr; max-height: 60vh; overflow-y: auto; }
.bs-digit, .bs-pair { display: flex; align-items: center; gap: 8px; background: rgba(20, 32, 70, 0.6); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.bs-digit span, .bs-pair span { font-family: "Inter", sans-serif; font-size: 0.85rem; font-weight: 800; color: var(--gold-light); min-width: 22px; }
.bs-digit input, .bs-pair input { flex: 1; background: none; border: none; border-bottom: 1px solid var(--line); color: #fff; font-family: "Inter", sans-serif; font-size: 0.85rem; padding: 4px; text-align: center; }

/* ---- Insufficient balance ---- */
.bf-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 24px; }
.bf-panel { background: linear-gradient(160deg, var(--navy2, #1a2858), var(--navy, #101a3c)); border: 1px solid var(--line); border-radius: 16px; padding: 26px 24px; text-align: center; max-width: 320px; width: 100%; box-shadow: var(--glow-gold); }
.bf-panel b { font-size: 1.05rem; color: var(--white); }
.bf-panel p { font-size: 0.82rem; color: var(--muted); margin: 10px 0 18px; }

/* ---- Bid Center (6-tab Sara-style section) ---- */
.bctab-bar { display: flex; gap: 6px; padding: 6px; margin: 2px 12px 4px; overflow-x: auto; scrollbar-width: none; background: var(--card); border: 1px solid var(--border); border-radius: 16px; }
.bctab-bar::-webkit-scrollbar { display: none; }
.bctab { flex: 1 0 auto; text-align: center; padding: 10px 14px; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.6px; color: var(--muted); text-decoration: none; border-radius: 11px; white-space: nowrap; }
.bctab.on { color: #3b2a12; background: linear-gradient(135deg, var(--gold), var(--gold3)); box-shadow: var(--glow-gold); }
.bctab:hover { color: var(--gold-light); }
.bctab.on:hover { color: #3b2a12; }
.bctab-bar + .hist-stats, .bctab-bar + .gr-list, .bctab-bar + .bb-empty, .bctab-bar + .bb-list, .bctab-bar + .br-list, .bctab-bar + .hist-card { margin-top: 4px; }

/* ---- Game Result rows ---- */
.gr-list { display: flex; flex-direction: column; padding: 4px 16px 20px; }
.gr-row { display: flex; align-items: center; gap: 8px; padding: 13px 4px; border-bottom: 1px solid var(--line); }
.gr-mkt { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.82rem; font-weight: 800; color: var(--white); }
.gr-time { flex: 0 0 auto; font-size: 0.72rem; font-weight: 700; color: var(--muted); min-width: 62px; }
.gr-num { flex: 0 0 auto; font-family: "Inter", sans-serif; font-size: 0.92rem; font-weight: 900; letter-spacing: 1px; color: var(--gold-light); min-width: 84px; text-align: right; }
.gr-num.gr-future { color: var(--muted); }

.digit-pad { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 12px; }
.digit-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; margin-top: 12px; max-height: 340px; overflow-y: auto; }
.pad-d {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  color: #fff;
  background: rgba(20, 32, 70, 0.9);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 0;
  cursor: pointer;
  transition: 0.15s;
}
.digit-grid .pad-d { font-size: 0.68rem; padding: 8px 0; border-radius: 6px; }
.pad-d:active { transform: scale(0.94); border-color: var(--gold); color: var(--gold-light); box-shadow: var(--glow-gold); }

.pad-display {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin-top: 12px; padding: 10px 14px;
  background: rgba(212, 175, 55, 0.08);
  border: 1px dashed rgba(212, 175, 55, 0.5);
  border-radius: 12px;
}
.pad-display b { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 1.25rem; color: var(--gold-light); letter-spacing: 4px; }
.pad-clear {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 0.8rem; font-weight: 800;
  color: #ff6b6b; background: transparent; border: 1px solid rgba(255, 107, 107, 0.4); border-radius: 999px; padding: 4px 10px; cursor: pointer;
}

.wallet-beforeafter {
  display: flex; flex-direction: column; gap: 4px;
  margin-top: 10px; padding: 10px 12px;
  background: rgba(12, 20, 48, 0.6); border: 1px solid var(--line); border-radius: 10px;
  font-size: 0.78rem; color: var(--muted);
}
.wallet-beforeafter b { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--gold-light); font-size: 0.85rem; }

.pay-icon-row { display: flex; gap: 10px; align-items: center; margin: 10px 0 4px; }
.pay-icon-row img { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line); background: rgba(12, 20, 48, 0.8); padding: 6px; object-fit: contain; filter: saturate(0.9); }

.funds-balance {
  display: flex; flex-direction: column; gap: 4px;
  padding: 16px 18px; margin: 0 14px 14px;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.15), rgba(12, 20, 48, 0.7));
  border: 1px solid rgba(212, 175, 55, 0.35); border-radius: 14px;
}
.funds-balance span { font-size: 0.72rem; letter-spacing: 2px; color: var(--muted); font-weight: 800; }
.funds-balance b { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 1.6rem; color: var(--gold-light); text-shadow: 0 0 14px rgba(212, 175, 55, 0.5); }
.funds-balance small { color: var(--muted); font-size: 0.7rem; }

.gear-link { display: flex; align-items: center; color: var(--muted); padding: 6px; }
.gear-link:hover, .gear-link:active { color: var(--gold-light); }

.theme-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--gold-light);
  cursor: pointer;
  transition: var(--tr);
}
.theme-toggle:hover { border-color: var(--gold); transform: rotate(15deg); }
.theme-toggle .icon-sun, .theme-toggle .icon-night { display: none; }
.theme-toggle .icon-moon { display: block; }
.theme-toggle.t-light .icon-moon, .theme-toggle.t-light .icon-night { display: none; }
.theme-toggle.t-light .icon-sun { display: block; }
.theme-toggle.t-night .icon-moon, .theme-toggle.t-night .icon-sun { display: none; }
.theme-toggle.t-night .icon-night { display: block; }

.theme-toggle {
  background: linear-gradient(135deg, #0a1a4a, #1e3a8a);
  border-color: rgba(185, 144, 82, 0.45);
}
.theme-capsule-wrap{ display:flex; justify-content:center; padding:4px 0 10px; flex:none; }
.theme-capsule{ display:flex; align-items:center; gap:2px; padding:4px; border-radius:999px; border:1px solid var(--border); background:var(--card); box-shadow:0 2px 12px rgba(0,0,0,0.25); }
.theme-capsule button{ display:flex; align-items:center; justify-content:center; width:52px; height:34px; border-radius:999px; border:none; background:transparent; color:var(--muted); cursor:pointer; transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; }
.theme-capsule button.on{ background:linear-gradient(135deg,var(--gold),#f59e0b); color:#1a120b; box-shadow:0 2px 10px rgba(251,191,36,0.45); }
.theme-capsule button:active{ transform:scale(0.92); }
@keyframes refPop{ from{ transform:scale(0.9); opacity:0; } to{ transform:scale(1); opacity:1; } }
.mb-frow{ display:flex; align-items:center; gap:8px; }
.mb-pills{ display:flex; gap:8px; overflow-x:auto; flex:1; padding:2px 2px 6px; scrollbar-width:none; }
.mb-pills::-webkit-scrollbar{ display:none; }
.mb-pill{ flex:none; padding:8px 16px; border-radius:999px; border:1px solid var(--line); background:var(--card); color:var(--text); font-weight:800; font-size:0.8rem; cursor:pointer; }
.mb-pill.on-blue{ background:linear-gradient(135deg,#3b82f6,#1d4ed8); border-color:#3b82f6; color:#fff; }
.mb-pill:active{ transform:scale(0.94); }
/* first-run onboarding wizard */
.ob-wrap { max-width: 430px; margin: 0 auto; padding: 30px 18px 44px; display: flex; flex-direction: column; gap: 14px; }
.ob-dots { display: flex; gap: 8px; justify-content: center; }
.ob-dots i { width: 26px; height: 6px; border-radius: 99px; background: var(--line); }
.ob-dots i.on { background: var(--gold); }
.ob-lang-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ob-lang { padding: 16px 8px; border-radius: 14px; border: 1px solid var(--border); background: var(--card); color: var(--text); font-size: 0.95rem; font-weight: 700; cursor: pointer; font-family: inherit; }
.ob-lang.on { border-color: var(--gold); color: var(--gold-light); box-shadow: var(--glow-gold); }
.ob-lang:active { transform: scale(0.97); }
.ob-back { align-self: flex-start; background: none; border: none; color: var(--muted); font-weight: 800; font-size: 0.9rem; cursor: pointer; padding: 4px 2px; font-family: inherit; }
.ob-skip { align-self: center; background: none; border: none; color: var(--muted); font-weight: 700; font-size: 0.85rem; cursor: pointer; padding: 8px; font-family: inherit; }
.ob-wrap .btn[disabled] { opacity: 0.6; }
/* notification feed result cards */
.nt-res{ border-left:3px solid var(--gold); }
.nt-res-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.nt-res-name{ font-weight:800; font-size:0.92rem; color:var(--text); overflow-wrap:anywhere; }
.nt-new{ flex:none; font-size:0.62rem; font-weight:800; letter-spacing:0.6px; color:#fff; background:linear-gradient(135deg,#22c55e,#16a34a); border-radius:99px; padding:3px 10px; animation:ntPulse 1.6s ease-in-out infinite; }
@keyframes ntPulse{ 0%,100%{ opacity:1; } 50%{ opacity:0.55; } }
.nt-res-num{ font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:1.4rem; font-weight:900; letter-spacing:2px; color:var(--gold); margin:4px 0 2px; font-variant-numeric:tabular-nums; }
.nt-res-time{ font-size:0.72rem !important; color:var(--muted) !important; }
/* Result notifications are result cards, so keep market, number and time
   visually centered instead of inheriting the normal left-aligned feed layout. */
.nt-res{text-align:center;padding:15px 16px!important}
.nt-res-top{justify-content:center;position:relative;min-height:22px}
.nt-res-name{display:block;text-align:center}
.nt-res .nt-new{position:absolute;right:0;top:0}
.nt-res-num{text-align:center;line-height:1.25;margin:8px 0 4px}
.nt-res-time{text-align:center;display:block}
.dash-switch{ position:relative; display:inline-block; width:46px; height:26px; flex:none; }
.dash-switch input{ opacity:0; width:0; height:0; }
.dash-switch-slider{ position:absolute; cursor:pointer; inset:0; background:#94a3b8; border-radius:999px; transition:.2s; }
.dash-switch-slider:before{ content:""; position:absolute; height:20px; width:20px; left:3px; bottom:3px; background:#fff; border-radius:50%; transition:.2s; box-shadow:0 1px 4px rgba(0,0,0,0.3); }
.dash-switch input:checked + .dash-switch-slider{ background:#2563eb; }
.dash-switch input:checked + .dash-switch-slider:before{ transform:translateX(20px); }
.terms-topic{ background:var(--card); border:1px solid var(--line); border-left:3px solid var(--gold); border-radius:12px; padding:14px 16px; margin-bottom:10px; }
.terms-topic h3{ font-size:0.92rem; margin:0 0 6px; color:var(--text); }
.terms-topic p{ font-size:0.85rem; color:var(--muted); margin:0; white-space:pre-wrap; }
.home-ticker{ overflow:hidden; margin:0 -16px; background:linear-gradient(90deg,#7c2d12,#b45309,#7c2d12); border-top:1px solid rgba(251,191,36,0.5); border-bottom:1px solid rgba(251,191,36,0.5); padding:7px 0; }
.home-ticker-inner{ display:inline-flex; white-space:nowrap; animation:homeTick 22s linear infinite !important; }
.home-ticker-inner span{ color:#fef3c7; font-size:0.78rem; font-weight:800; letter-spacing:1px; padding-right:18px; text-shadow:0 1px 4px rgba(0,0,0,0.5); }
html[data-theme="night"] .home-ticker{ background:linear-gradient(90deg,#1e3a5f,#2563eb,#1e3a5f); border-top-color:rgba(96,165,250,0.5); border-bottom-color:rgba(96,165,250,0.5); }
html[data-theme="night"] .home-ticker-inner span{ color:#bfdbfe; }
html[data-theme="glass"] .home-ticker{ background:linear-gradient(90deg,rgba(185,144,82,0.3),rgba(185,144,82,0.5),rgba(185,144,82,0.3)); border-top-color:rgba(185,144,82,0.4); border-bottom-color:rgba(185,144,82,0.4); }
html[data-theme="glass"] .home-ticker-inner span{ color:var(--gold-light); }
@keyframes homeTick{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
/* ---------- premium depth pass: main boxes ---------- */
.sara-tile, .play-card, .mini-card, .stat-card, .um-stat, .wd-stat{
  border-top-color:rgba(255,255,255,0.16);
  box-shadow:0 1px 0 rgba(255,255,255,0.06) inset, 0 4px 8px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.15);
}
.s5-bid, .btn, .cat-chip, .mb-pill{
  box-shadow:0 1px 0 rgba(255,255,255,0.12) inset, 0 2px 4px rgba(0,0,0,0.15);
}
.s5-bid:active, .btn:active{ transform:translateY(1px) scale(0.98); box-shadow:0 1px 4px rgba(0,0,0,0.35); }
.s5-mkt b, .play-card-name{ text-shadow:0 2px 8px rgba(0,0,0,0.5); }
.theme-toggle.t-light {
  background: linear-gradient(135deg, #fffaf1, #ffe7c2);
  border-color: rgba(234, 133, 40, 0.5);
  color: #ea580c;
}
.theme-toggle.t-night {
  background: linear-gradient(135deg, #ffffff, #e0f4fd);
  border-color: rgba(8, 145, 214, 0.5);
  color: #0891b2;
}
.theme-toggle.t-dark .icon-moon { color: #D4B07A; }

.save-bank { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--muted); }
.save-bank input { width: auto; }
#bank-fields h4 { margin: 4px 0 8px; color: var(--gold-light); font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 0.75rem; letter-spacing: 1px; }

.foot-sync { font-size: 0.68rem; color: var(--muted); }
.foot-sync span { color: var(--gold-light); word-break: break-all; }

/* ============ LIGHT THEME (white / blue / gold) ============ */
html[data-theme="light"] {
  --navy: #fffaf1;
  --navy2: #fff3e0;
  --mid-blue: #ffe7c2;
  --card: rgba(234, 133, 40, 0.06);
  --card-solid: #ffffff;
  --border: rgba(200, 120, 30, 0.20);
  --line: rgba(200, 120, 30, 0.16);
  --border-strong: rgba(234, 133, 40, 0.55);
  --text: #3b2a12;
  --muted: rgba(59, 42, 18, 0.66);
  --gold: #f59e0b;
  --gold2: #fb923c;
  --gold3: #d97706;
  --gold-light: #ea580c;
  --green: #16a34a;
  --red: #dc2626;
  --glow-gold: 0 0 18px rgba(245, 158, 11, 0.30);
}
html[data-theme="light"] body {
  background:
    radial-gradient(ellipse 120% 55% at 50% -8%, rgba(253, 186, 116, 0.35) 0%, transparent 70%),
    radial-gradient(ellipse 85% 70% at 90% 100%, rgba(251, 146, 60, 0.12) 0%, transparent 60%),
    var(--navy);
  color: var(--text);
}
html[data-theme="light"] .topbar { background: rgba(255, 255, 255, 0.85); box-shadow: 0 4px 30px rgba(10, 26, 74, 0.08); }
html[data-theme="light"] .logo small { color: rgba(10, 26, 74, 0.55); -webkit-text-fill-color: rgba(10, 26, 74, 0.55); }
html[data-theme="light"] .nav a:hover { background: rgba(234, 133, 40, 0.08); }
html[data-theme="light"] .nav .user-chip { background: rgba(234, 133, 40, 0.08); }
html[data-theme="light"] .nav .user-chip:hover { background: rgba(234, 133, 40, 0.16); }
html[data-theme="light"] .howto-step, html[data-theme="light"] .card, html[data-theme="light"] .hist-card,
html[data-theme="light"] .chart-card, html[data-theme="light"] .family-section,
html[data-theme="light"] .s5-row, html[data-theme="light"] .s5-game,
html[data-theme="light"] .hist-row, html[data-theme="light"] .hist-stat,
html[data-theme="light"] .guess-strip, html[data-theme="light"] .cat-chip,
html[data-theme="light"] .wallet-beforeafter, html[data-theme="light"] .bet-row,
html[data-theme="light"] .family-card, html[data-theme="light"] .s5-banner {
  background: #ffffff;
  border-color: rgba(10, 26, 74, 0.14);
}
html[data-theme="light"] .result-table tr:hover td,
html[data-theme="light"] .activity-row, html[data-theme="light"] .hist-row,
html[data-theme="light"] .s5-row, html[data-theme="light"] .s5-game,
html[data-theme="light"] .hist-stat, html[data-theme="light"] .guess-strip,
html[data-theme="light"] .bet-row, html[data-theme="light"] .family-card,
html[data-theme="light"] .chart-cell { background: #ffffff; }
html[data-theme="light"] .form input, html[data-theme="light"] .form select,
html[data-theme="light"] .form textarea { background: #ffffff; color: var(--text); }
html[data-theme="light"] .bid-input, html[data-theme="light"] .bid-field select { background: #ffffff; color: #0a1a4a; border-color: rgba(15,23,42,0.22); }
html[data-theme="light"] .pad-d, html[data-theme="light"] .cat-chip { background: #ffffff; color: var(--muted); }
html[data-theme="light"] .bottom-nav { background: rgba(255, 252, 246, 0.55); border-top-color: rgba(15, 23, 42, 0.08); }
html[data-theme="light"] .type-style-panel { background: linear-gradient(180deg, #ffffff, #fff3e0); }
html[data-theme="light"] .style-panel { background: linear-gradient(180deg, #ffffff, #fff3e0); }
html[data-theme="light"] .style-btn { background: #ffffff; }
html[data-theme="light"] .style-backdrop { background: rgba(59, 42, 18, 0.35); }
html[data-theme="light"] .site-foot { background: rgba(234, 133, 40, 0.06); }
html[data-theme="light"] .site-foot, html[data-theme="light"] .site-foot a { color: var(--muted); }
html[data-theme="light"] .content details { background: #ffffff; }
html[data-theme="light"] .market-select { background: linear-gradient(180deg, #ffffff, #fff3e0); color: var(--gold); }
html[data-theme="light"] .market-select option { color: #0a1a4a; background: #fff; }
html[data-theme="light"] .hpanel-digits, html[data-theme="light"] .s5-jodi b,
html[data-theme="light"] .s5-open, html[data-theme="light"] .s5-close,
html[data-theme="light"] .member-phone, html[data-theme="light"] .upi-id,
html[data-theme="light"] .wallet-balance, html[data-theme="light"] .member-balance,
html[data-theme="light"] .rate-amount, html[data-theme="light"] .jodi-cell,
html[data-theme="light"] .rates-table .rate-amount { color: var(--gold); text-shadow: none; }
html[data-theme="light"] .hist-stat b, html[data-theme="light"] .s5-jodi b,
html[data-theme="light"] .s5-open b, html[data-theme="light"] .s5-close b { text-shadow: none; }
html[data-theme="light"] .s5-close, html[data-theme="light"] .c-close, html[data-theme="light"] .l-open { color: #ea580c; }
html[data-theme="light"] .wallet-chip, html[data-theme="light"] .jodi-pill,
html[data-theme="light"] .bal-chip, html[data-theme="light"] .s5-bid,
html[data-theme="light"] .t-open { color: #ffffff; text-shadow: none; }
html[data-theme="light"] .howto-step b, html[data-theme="light"] .gc-code,
html[data-theme="light"] .avatar, html[data-theme="light"] .family-card b,
html[data-theme="light"] .user-chip .chip-avatar { color: #ffffff; }
html[data-theme="light"] .seg.active, html[data-theme="light"] .chip.active, html[data-theme="light"] .cat-chip.on { color: #ffffff; }
html[data-theme="light"] .cat-chip.on { background: linear-gradient(135deg, var(--gold), var(--gold3)); }
html[data-theme="light"] .btn, html[data-theme="light"] .btn-green,
html[data-theme="light"] .jodi-pill,
html[data-theme="light"] .t-open { color: #ffffff; }
html[data-theme="light"] .btn.ghost { color: var(--text); }
html[data-theme="light"] .s5-bid { color:#15803d; border-color:rgba(34,197,94,0.55); background:rgba(34,197,94,0.08); text-shadow:none; }
html[data-theme="light"] .s5-bid.disabled { color:#dc2626; background:rgba(248,113,113,0.08); text-shadow:none; }
html[data-theme="light"] .scene-theme-bg-gold { background: linear-gradient(135deg, var(--gold), var(--gold3)); }
html[data-theme="light"] .ticker-wrap, html[data-theme="light"] .panel-badge { background: rgba(234, 133, 40, 0.10); }
html[data-theme="light"] .l-win { color: #ffffff; }
html[data-theme="light"] .chart-cell b, html[data-theme="light"] .c-win { color: var(--green); }
html[data-theme="light"] .result-table th { background: rgba(234, 133, 40, 0.12); color: var(--gold); }
html[data-theme="light"] body { --white: #3b2a12; }
html[data-theme="light"] .pad-display, html[data-theme="light"] .funds-balance {
  background: linear-gradient(135deg, rgba(234, 133, 40, 0.14), rgba(255,255,255,0.85));
}
html[data-theme="light"] .funds-balance b { color: var(--gold); text-shadow: none; }

/* ---------- prevent horizontal overflow on small phones ---------- */
html, body { overflow-x: hidden; }

@media (max-width: 480px) {
  .hist-row { gap: 6px; }
  .hist-date { min-width: 74px; }
  .hist-jodi { min-width: 70px; }
  .hpanel-digits { font-size: 1.05rem; padding: 5px 8px; letter-spacing: 1.5px; }
  .jodi-pill { font-size: 0.8rem; padding: 4px 10px; }
  .hist-panels { gap: 6px; }
  .s5-number { font-size: 1.05rem; }
  .s5-time em { font-size: 0.54rem; }
  .s5-time { gap: 4px; }
  .s5-times { gap: 6px 10px; }
  .s5-time b { font-size: 0.7rem; }
  .s5-bid, .s5-bid.disabled { font-size: 0.66rem; padding: 8px 12px; }
  .card-actions .btn { font-size: 0.8rem; padding: 9px 14px; }
  .board-row { gap: 8px; padding: 10px; }
  .bw-time { min-width: 66px; font-size: 0.76rem; }
  .bw-num { font-size: 0.78rem; }
  .bw-play { padding: 8px 12px; font-size: 0.68rem; }
  .b-chip { padding: 6px 10px; }
  .b-chip b { font-size: 0.66rem; }
  .b-chip small { font-size: 0.56rem; }
  .board-page-head { padding-left: 48px; }
  .board-page-head h1 { font-size: 1.1rem; }
  .bp-tile { padding: 13px 12px; }
  .bp-tile b { font-size: 0.82rem; }
  .bb2-thead, .bb2-row { grid-template-columns: 1.2fr 1fr 1fr 0.7fr; }
  .bb2-fields { padding-left: 12px; padding-right: 12px; }
  .bb2-table { padding-left: 12px; padding-right: 12px; }
  .bb2-bar { padding-left: 12px; padding-right: 12px; }
  .bs-grid { padding-left: 12px; padding-right: 12px; }
  .br-list, .bb-list { padding-left: 12px; padding-right: 12px; }
  .bp-grid { padding-left: 12px; padding-right: 12px; }
  .bctab { font-size: 0.66rem; padding: 8px 11px; }
  .gr-list { padding-left: 12px; padding-right: 12px; }
  .gr-mkt { font-size: 0.76rem; }
  .gr-num { font-size: 0.84rem; min-width: 74px; }
}

/* ============ APP BAR + SIDE DRAWER ============ */
.app-hamburger {
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 120;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--border-strong);
  background: rgba(3, 11, 31, 0.85);

  color: var(--gold-light);
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
  transition: transform 0.15s;
}
.app-hamburger:hover { transform: translateY(-1px); color: var(--gold-light); }
.app-hamburger svg { display: block; }

/* Mandatory-login lock: auth pages show NO nav chrome (no hamburger/drawer, no bottom nav). */
body.auth-lock .app-hamburger,
body.auth-lock #bottom-nav { display: none !important; }
body.auth-lock main { padding-bottom: 24px; }

/* Sync dot in the home topbar: green = live, red = sign in again. */
.sync-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); flex: none; align-self: center; }
.sync-dot.off { background: var(--red); box-shadow: 0 0 8px var(--red); animation: sync-blink 1.2s ease-in-out infinite; }
@keyframes sync-blink { 50% { opacity: 0.4; } }
/* Double-tap home refresh overlay with animated app logo. */
.refresh-ov { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: rgba(2, 8, 26, 0.45); }
.refresh-logo {
  height: 88px; width: auto;
  position: relative;
  animation: refresh-logo 1s ease-in-out infinite;
}
.refresh-logo::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 150%; height: 150%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(30,144,255,0.28), transparent 70%);
  pointer-events: none;
  z-index: -1;
}
@keyframes refresh-logo { 0%, 100% { transform: scale(0.85) rotate(-10deg); opacity: 0.75; } 50% { transform: scale(1.1) rotate(10deg); opacity: 1; } }
/* Kill mobile double-tap zoom so the double-tap-refresh gesture reaches the app. */
html, body, #page { touch-action: manipulation; }

/* App lock: full-screen shield, nothing readable behind it. */
.app-lock-ov { position: fixed; inset: 0; z-index: 20000; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(2, 8, 26, 0.94); }
.app-lock-card { width: 100%; max-width: 340px; text-align: center; background: #0d1b3d; border: 1px solid rgba(212, 175, 55, 0.5); border-radius: 20px; padding: 28px 22px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); }
.app-lock-card img { height: 56px; width: auto; }
.app-lock-card h2 { margin: 10px 0 4px; font-size: 1.25rem; color: #fff; }
.app-lock-card .hint { margin: 0 0 4px; }
.app-lock-card input { width: 100%; box-sizing: border-box; padding: 14px; border-radius: 12px; border: 1px solid rgba(212, 175, 55, 0.45); background: rgba(255, 255, 255, 0.12); color: #fff; caret-color: #fff; font-size: 1.35rem; font-weight: 800; text-align: center; letter-spacing: 6px; margin: 12px 0 6px; font-family: inherit; }
.app-lock-card input::placeholder { color: rgba(255, 255, 255, 0.45); letter-spacing: 6px; }
.app-lock-card .hint { color: rgba(255, 255, 255, 0.8); }
.app-lock-msg { color: #f87171; min-height: 1.2em; font-size: 0.8rem; font-weight: 700; margin: 0 0 8px; }
.app-lock-out { background: none; border: none; color: #cbd5e1; margin-top: 10px; font-weight: 700; font-size: 0.85rem; cursor: pointer; font-family: inherit; }

.drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 210;
  background: rgba(0, 0, 0, 0.55);
}

.side-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 300px;
  max-width: 86vw;
  z-index: 220;
  background: linear-gradient(180deg, var(--navy), #0d1b42);
  border-right: 1px solid var(--line);
  box-shadow: 8px 0 24px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  transform: translateX(-105%);
  transition: transform 0.22s ease-out;
  will-change: transform;
  overflow: hidden;
  height: 100dvh;
  max-height: 100dvh;
}
.side-drawer.open { transform: translateX(0); }

.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--line);
  flex: none;
}
.drawer-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.drawer-close:hover { color: var(--gold-light); border-color: var(--gold); }

.drawer-user {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  flex: none;
}
.drawer-identity {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.drawer-identity .chip-avatar {
  width: 40px;
  height: 40px;
  font-size: 1rem;
  margin: 0;
  flex: none;
}
.drawer-who { min-width: 0; }
.drawer-who b { display: block; color: var(--text); font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 0.92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drawer-who span { font-size: 0.72rem; color: var(--muted); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drawer-balance {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.drawer-balance span { font-size: 0.62rem; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
.drawer-balance b { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 0.95rem; color: var(--green); }

.drawer-nav {
  padding: 6px 8px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.drawer-nav a {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 12px 14px;
  margin: 2px 0;
  border-radius: 12px;
  color: var(--text);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.95rem;
  font-weight: 650;
  letter-spacing: 0.2px;
  text-decoration: none;
  transition: background 0.15s;
}
.drawer-nav a:hover { background: rgba(185, 144, 82, 0.12); color: var(--gold-light); }
.drawer-nav a svg { flex: none; width: 22px; height: 22px; color: var(--gold-light); opacity: 0.95; }
.drawer-nav a:hover svg { color: var(--gold); }
.drawer-nav a::before { display: none; }

.drawer-foot {
  padding: 10px 14px 12px;
  border-top: 1px solid var(--line);
  flex: none;
}
.drawer-logout {
  width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
}

/* No body overflow toggle: flipping overflow re-lays-out the whole page and
   hangs cheap phones on every open/close. Contain chaining instead. */
body.drawer-lock { overscroll-behavior: contain; }
.drawer-overlay { touch-action: none; }
html { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

html[data-theme="light"] .app-hamburger { background: rgba(255, 252, 246, 0.9); color: #ea580c; }
html[data-theme="light"] .side-drawer { background: linear-gradient(180deg, #fffaf1, #fff1da); }

body.home-layout { padding-bottom: 0; }
body.home-layout main { padding-bottom: 0; }

/* Bank accounts list */
.bank-actions { margin-left: auto; }
.bank-del {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 20px;
  border: 1px solid var(--red);
  color: var(--red);
  background: transparent;
  cursor: pointer;
}
.bank-del:hover { background: var(--red); color: #fff; }

/* Funds quick action buttons */
.funds-back { margin: 12px 0 2px; }
.funds-back a { display: inline-flex; align-items: center; gap: 4px; color: var(--gold-light); font-weight: 800; font-size: 0.9rem; text-decoration: none; padding: 8px 4px; }
.funds-quick {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 16px 0 4px;
}
.funds-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 16px 12px;
  border-radius: 14px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s;
}
.funds-btn:hover { transform: translateY(-2px); color: #fff; text-decoration: none; }
.funds-btn.on { outline: 2px solid #fff; }
.f-add { background: linear-gradient(135deg, var(--green), #16a34a); }
.f-withdraw { background: linear-gradient(135deg, var(--red), #b91c1c); }
.f-bank { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.f-dephist { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
.f-withhist { background: linear-gradient(135deg, #f97316, #c2410c); }
.f-passbook { background: linear-gradient(135deg, var(--gold), var(--gold3)); color: #0a1535; }

/* ============ NIGHT THEME (white / cyan) ============ */
html[data-theme="night"] {
  --navy: #ffffff;
  --navy2: #f3f8fb;
  --mid-blue: #dff2fb;
  --card: rgba(8, 145, 214, 0.05);
  --card-solid: #ffffff;
  --border: rgba(8, 145, 214, 0.22);
  --line: rgba(8, 145, 214, 0.16);
  --border-strong: rgba(8, 145, 214, 0.5);
  --text: #083344;
  --muted: rgba(8, 51, 68, 0.62);
  --gold: #0891b2;
  --gold2: #0ea5e9;
  --gold3: #0369a1;
  --gold-light: #0891b2;
  --green: #0d9488;
  --red: #dc2626;
  --glow-gold: 0 0 16px rgba(8, 145, 214, 0.18);
}
html[data-theme="night"] body {
  background:
    radial-gradient(ellipse 120% 60% at 50% -10%, rgba(186, 230, 253, 0.5) 0%, transparent 70%),
    #ffffff;
  color: var(--text);
}
html[data-theme="night"] .app-hamburger { background: rgba(255, 255, 255, 0.9); box-shadow: 0 4px 14px rgba(3, 30, 44, 0.1); color: #0891b2; }
html[data-theme="night"] .side-drawer { background: linear-gradient(180deg, #ffffff, #eef7fb); }
html[data-theme="night"] .theme-toggle.t-night { color: #0891b2; }
html[data-theme="night"] .bottom-nav { background: rgba(255, 255, 255, 0.55); }
html[data-theme="night"] .howto-step, html[data-theme="night"] .card, html[data-theme="night"] .hist-card,
html[data-theme="night"] .chart-card, html[data-theme="night"] .family-section,
html[data-theme="night"] .s5-row, html[data-theme="night"] .s5-game,
html[data-theme="night"] .hist-row, html[data-theme="night"] .hist-stat,
html[data-theme="night"] .guess-strip, html[data-theme="night"] .cat-chip,
html[data-theme="night"] .wallet-beforeafter, html[data-theme="night"] .bet-row,
html[data-theme="night"] .family-card, html[data-theme="night"] .s5-banner {
  background: #ffffff;
  border-color: rgba(8, 145, 214, 0.18);
}
html[data-theme="night"] .result-table tr:hover td,
html[data-theme="night"] .activity-row, html[data-theme="night"] .hist-row,
html[data-theme="night"] .s5-row, html[data-theme="night"] .s5-game,
html[data-theme="night"] .hist-stat, html[data-theme="night"] .guess-strip,
html[data-theme="night"] .bet-row, html[data-theme="night"] .family-card,
html[data-theme="night"] .chart-cell { background: #ffffff; color: var(--text); }
html[data-theme="night"] .form input, html[data-theme="night"] .form select,
html[data-theme="night"] .form textarea { background: #ffffff; color: var(--text); }
html[data-theme="night"] .bid-input, html[data-theme="night"] .bid-field select { background: #ffffff; color: #083344; border-color: rgba(8,51,68,0.28); }
html[data-theme="night"] .pad-d, html[data-theme="night"] .cat-chip { background: #ffffff; color: var(--muted); }
html[data-theme="night"] .type-style-panel { background: linear-gradient(180deg, #ffffff, #eef7fb); }
html[data-theme="night"] .style-panel { background: linear-gradient(180deg, #ffffff, #eef7fb); }
html[data-theme="night"] .style-btn { background: #ffffff; }
html[data-theme="night"] .style-backdrop { background: rgba(8, 51, 68, 0.35); }
html[data-theme="night"] .site-foot { background: rgba(8, 51, 68, 0.05); }
html[data-theme="night"] .site-foot, html[data-theme="night"] .site-foot a { color: var(--muted); }
html[data-theme="night"] .content details { background: #ffffff; }
html[data-theme="night"] .market-select { background: linear-gradient(180deg, #ffffff, #eef7fb); color: var(--gold); }
html[data-theme="night"] .market-select option { color: #083344; background: #fff; }
html[data-theme="night"] .hpanel-digits, html[data-theme="night"] .s5-jodi b,
html[data-theme="night"] .s5-open, html[data-theme="night"] .s5-close,
html[data-theme="night"] .member-phone, html[data-theme="night"] .upi-id,
html[data-theme="night"] .wallet-balance, html[data-theme="night"] .member-balance,
html[data-theme="night"] .rate-amount, html[data-theme="night"] .jodi-cell,
html[data-theme="night"] .rates-table .rate-amount { color: var(--gold); text-shadow: none; }
html[data-theme="night"] .hist-stat b, html[data-theme="night"] .s5-jodi b,
html[data-theme="night"] .s5-open b, html[data-theme="night"] .s5-close b { text-shadow: none; }
html[data-theme="night"] .s5-close, html[data-theme="night"] .c-close, html[data-theme="night"] .l-open { color: #0ea5e9; }
html[data-theme="night"] .wallet-chip, html[data-theme="night"] .jodi-pill,
html[data-theme="night"] .bal-chip, html[data-theme="night"] .s5-bid,
html[data-theme="night"] .t-open { color: #ffffff; text-shadow: none; }
html[data-theme="night"] .howto-step b, html[data-theme="night"] .gc-code,
html[data-theme="night"] .avatar, html[data-theme="night"] .family-card b,
html[data-theme="night"] .user-chip .chip-avatar { color: #ffffff; }
html[data-theme="night"] .seg.active, html[data-theme="night"] .chip.active,
html[data-theme="night"] .cat-chip.on { color: #ffffff; }
html[data-theme="night"] .cat-chip.on { background: linear-gradient(135deg, var(--gold), var(--gold3)); }
html[data-theme="night"] .btn, html[data-theme="night"] .btn-green,
html[data-theme="night"] .s5-bid, html[data-theme="night"] .jodi-pill,
html[data-theme="night"] .t-open { color: #ffffff; }
html[data-theme="night"] .s5-bid { color:#0d9488; border-color:rgba(13,148,136,0.55); background:rgba(13,148,136,0.08); text-shadow:none; }
html[data-theme="night"] .s5-bid.disabled { color:#dc2626; background:rgba(248,113,113,0.08); text-shadow:none; }
html[data-theme="night"] .scene-theme-bg-gold { background: linear-gradient(135deg, #22d3ee, #0891b2); }
html[data-theme="night"] .ticker-wrap, html[data-theme="night"] .panel-badge { background: rgba(14, 165, 233, 0.1); }
html[data-theme="night"] .l-win { color: #ffffff; }
html[data-theme="night"] .chart-cell b, html[data-theme="night"] .c-win { color: var(--green); }
html[data-theme="night"] .result-table th { background: rgba(14, 165, 233, 0.12); color: var(--gold); }
html[data-theme="night"] body { --white: #083344; }
html[data-theme="night"] .pad-display, html[data-theme="night"] .funds-balance {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.14), rgba(255,255,255,0.85));
}
html[data-theme="night"] .funds-balance b { color: var(--gold); text-shadow: none; }

/* ============ WHATSAPP CONTACT ============ */
.wa-center { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px 16px; text-align: center; }
.wa-num { font-size: 1.15rem; font-weight: 800; color: var(--gold); margin: 0; }
.wa-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #25d366;
  color: #06281b;
  font-weight: 800;
  border: none;
  padding: 12px 22px;
  border-radius: 12px;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(37, 211, 102, 0.35);
}
.wa-btn:hover { background: #1fc25a; color: #06281b; text-decoration: none; }
.ws-tg { background: #229ed9; box-shadow: 0 6px 16px rgba(34, 158, 217, 0.35); }
.ws-tg:hover { background: #1c8ac0; color: #fff; }
.ws-call { background: #ef4444; box-shadow: 0 6px 16px rgba(239, 68, 68, 0.35); }
.ws-call:hover { background: #dc2626; color: #fff; }
.ws-tg, .ws-call { color: #fff; }
.ws-tg:hover, .ws-call:hover { text-decoration: none; }

/* ============ HOW TO PLAY VIDEO GALLERY ============ */
.video-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
.video-item {
  display: block;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: var(--text);
  transition: transform 0.15s, border-color 0.15s;
}
.video-item:hover { transform: translateY(-2px); border-color: var(--gold); text-decoration: none; color: var(--text); }
.video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-item b {
  display: block;
  padding: 10px 12px;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.3;
}

.video-frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}
.video-admin-list { display: flex; flex-direction: column; gap: 12px; }
.video-admin-item {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
}
.video-admin-item video {
  width: 170px;
  max-width: 100%;
  border-radius: 8px;
  background: #000;
}
.video-admin-meta { flex: 1; min-width: 120px; display: flex; flex-direction: column; gap: 2px; }
.video-admin-meta b { font-size: 0.9rem; }
.video-admin-meta small { color: var(--muted); }
.video-admin-url { color: var(--gold); font-size: 0.8rem; word-break: break-all; }

.user-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 0.78rem;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
}
.user-toggle:hover { opacity: 0.88; }
.user-toggle:active { transform: scale(0.96); }
.user-toggle.block { background: #b91c1c; color: #fff; box-shadow: 0 2px 8px rgba(185, 28, 28, 0.3); }
.user-toggle.unblock { background: #15803d; color: #fff; box-shadow: 0 2px 8px rgba(21, 128, 61, 0.3); }

/* ============================================================
   PREMIUM SYMMETRY & ALIGNMENT PASS
   Perfectly aligned columns, centered chrome, even weights �
   numbers must never look off-line anywhere in the app.
   ============================================================ */

/* Tabular numerals everywhere digits render ? columns line up pixel-perfect */
.hpanel-digits, .jodi-pill, .s5-number, .gr-num, .bw-num, .bb2-num,
.bb2-point, .board-bal, .bal-chip, .wallet-balance, .member-balance,
.rate-amount, .wallet-beforeafter b, .bp-tile em, .hist-stat b,
.funds-balance b, .s5-open b, .s5-close b, .s5-jodi b {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* ---- Hist rows: identical column x-positions on every row ---- */
@media (min-width: 580px) {
  .hist-row { justify-content: space-between; gap: 10px; }
  .hist-row > * { flex-shrink: 0; }
  .hist-date { width: 100px; }
  .hist-session { width: 62px; text-align: center; }
  .hist-market { min-width: 74px; text-align: center; }
  .hist-jodi { width: 118px; text-align: center; justify-content: center; }
  .hist-panels { flex: 1 1 0; justify-content: center; }
  .hist-panels .hpanel { min-width: 88px; }
  .hpanel { flex: 0 0 auto; min-width: 84px; }
  .hpanel-label { display: block; text-align: center; }
  .hpanel-digits { display: block; text-align: center; letter-spacing: 1px; }
  .l-status { width: 78px; text-align: center; }
}
@media (max-width: 579px) {
  .hist-row > * { justify-content: center !important; text-align: center; }
}

/* ---- Card action rows: centered, equal buttons ---- */
.card-actions { justify-content: center; }
.card-actions .btn {
  min-width: 150px;
  justify-content: center;
  text-align: center;
  margin: 0;
}
.card-actions .btn:only-child { min-width: 220px; }

/* ---- Amount chips: perfectly even row ---- */
.amt-chips { justify-content: center; }
.amt-chips .amt-chip { flex: 1 1 0; justify-content: center; }

/* ---- Segmented toggles (OPEN/CLOSE etc): equal halves ---- */
.seg-row { gap: 8px; }
.seg-row .seg { flex: 1 1 0; justify-content: center; text-align: center; }

/* ---- Panel cards: centered titles + centered underline ---- */
.panel-card h3 { text-align: center; }
.profile-grid .card.panel-card h3::after,
.member-head .member-meta h3::after { margin: 8px auto 0; }

/* ---- Bid page hints: centered, never ragged ---- */
.panel-card .hint { text-align: center; }

/* ---- Board lists: centered rows, even columns ---- */
.bb2-thead, .bb2-row { grid-template-columns: repeat(4, 1fr); }
.bb2-num, .bb2-point, .bb2-del { text-align: center; justify-content: center; }

/* ---- Bid center tiles / boards: centered text ---- */
.bp-tile { text-align: center; }
.bp-tile b, .bp-tile em { display: block; }
/* 6 tabs are wider than a phone screen: start flush so the strip can be
   scrolled both ways. Centering here clipped the first/last labels and made
   the left side unreachable (scrollLeft can never go negative). */
.bctab-bar { justify-content: flex-start; }

/* ---- Panel tabs: centered ---- */
.panel-tabs { justify-content: center; }

/* ---- Style market chips: centered ---- */
.style-market { justify-content: center; }

/* ---- Play / profile / admin grids: equal-height cards ---- */
.play-grid, .profile-grid, .admin-grid { align-items: stretch; }
.play-grid .card, .profile-grid .card { display: flex; flex-direction: column; flex: 1 1 0; }
.play-grid .card-actions, .profile-grid .card-actions { margin-top: auto; padding-top: 14px; }

/* ---- Bid forms inside panel cards: centered + balanced ---- */
#bid-fields .form-row { justify-items: center; max-width: 380px; margin-left: auto; margin-right: auto; }
#bid-fields .form-row label { text-align: center; }
#bid-fields .form-row input, #bid-fields .form-row select { text-align: center; }

/* ---- Hist stats: perfectly even tiles ---- */
.hist-stat { flex: 1 1 0; min-width: 110px; }

/* ---- Digit pads: digit perfectly centered in key ---- */
.digit-pad .pad-d {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* ---- Identity / wallet chips: balanced ---- */
.user-chip { justify-content: center; }
/* LIVE strip: currently-open markets, like the live section on result sites. */
.live-strip{ display:flex; gap:6px; overflow-x:auto; scroll-snap-type:x mandatory; padding:10px 2px 4px; margin:0; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.live-strip::-webkit-scrollbar{ display:none; }
.live-strip:empty{ display:none; }
.live-chip{ flex:0 0 calc((100% - 18px) / 4); min-width:0; scroll-snap-align:start; display:inline-flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:2px; padding:5px 4px; border-radius:12px; background:rgba(74,222,128,0.08); border:1px solid rgba(74,222,128,0.4); color:var(--text); font-size:0.62rem; font-weight:800; letter-spacing:.2px; text-decoration:none; white-space:normal; word-break:break-word; line-height:1.15; }
.live-chip small{ color:var(--muted); font-weight:700; font-size:0.56rem; }
.live-chip{ position:relative; }
.live-chip .live-dot{ position:absolute; top:5px; right:5px; width:5px; height:5px; margin:0; }
.live-next{ flex:0 0 100%; display:inline-flex; align-items:center; justify-content:center; gap:4px; padding:5px 8px; border-radius:12px; background:rgba(255,255,255,0.03); border:1px dashed var(--line); color:var(--muted); font-size:0.6rem; font-weight:700; white-space:nowrap; line-height:1.2; }
@media (prefers-reduced-motion: reduce){ .live-strip .live-dot{ animation:none; } }
.wallet-chip { justify-content: center; gap: 6px; }

/* ---- Money rows: amounts right-aligned on a fixed rail ---- */
.bet-row .bw-amt, .hist-row .hpanel { text-align: center; }
.wallet-beforeafter b, .wallet-beforeafter small { font-variant-numeric: tabular-nums; }

/* ---- Same-height member/family rows ---- */
.family-card { text-align: center; }
.family-card .chip-avatar { margin: 0 auto; }

/* ============================================================
   PASSBOOK � RICH TRANSACTION LIST
   Symmetric 3-column rows: icon � details � amount+balance
   ============================================================ */
.pb-list { display: flex; flex-direction: column; }
.pb-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 13px 2px;
  border-bottom: 1px solid var(--line);
}
.pb-row:last-child { border-bottom: none; }

.pb-ic {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.pb-ic.bet { background: rgba(239, 68, 68, 0.12); color: var(--red); }
.pb-ic.win { background: rgba(82, 196, 26, 0.14); color: var(--green); }
.pb-ic.deposit { background: rgba(82, 196, 26, 0.14); color: var(--green); }
.pb-ic.withdraw { background: rgba(239, 68, 68, 0.12); color: var(--red); }

.pb-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pb-line1 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pb-title {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.94rem;
  font-weight: 800;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pb-pill {
  flex: none;
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 1.3px;
  padding: 3px 9px;
  border-radius: 99px;
}
.pb-pill.bet { color: var(--red); border: 1px solid rgba(239, 68, 68, 0.45); }
.pb-pill.win { color: var(--green); border: 1px solid rgba(82, 196, 26, 0.45); }
.pb-pill.deposit { color: var(--green); border: 1px solid rgba(82, 196, 26, 0.45); }
.pb-pill.withdraw { color: var(--red); border: 1px solid rgba(239, 68, 68, 0.45); }

.pb-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pb-chip {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 3px 9px;
  border-radius: 99px;
  background: rgba(185, 144, 82, 0.08);
  border: 1px solid rgba(185, 144, 82, 0.28);
  color: var(--gold-light);
  white-space: nowrap;
}
.pb-chip.num { color: var(--text); border-color: var(--border); background: rgba(255, 255, 255, 0.03); font-variant-numeric: tabular-nums; }
.pb-chip.s-open { color: #7fb8ff; border-color: rgba(127, 184, 255, 0.45); background: rgba(127, 184, 255, 0.08); }
.pb-chip.s-close { color: #ff9d7f; border-color: rgba(255, 120, 80, 0.45); background: rgba(255, 120, 80, 0.08); }

.pb-date { font-size: 0.7rem; color: var(--muted); letter-spacing: 0.3px; font-variant-numeric: tabular-nums; }
.pb-note { display: block; margin-top: 3px; font-size: 0.68rem; color: var(--muted); opacity: 0.85; line-height: 1.35; }

.pb-amtwrap { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.pb-amt {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.3px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.pb-cr { color: var(--green); }
.pb-dr { color: var(--red); }
.pb-bal {
  font-size: 0.66rem;
  color: var(--muted);
  font-weight: 700;
  letter-spacing: 0.3px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
html[data-theme="night"] .pb-row { background: #ffffff; }
html[data-theme="light"] .pb-note, html[data-theme="light"] .pb-title { color: var(--text); }

.sara-play {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 auto 14px;
  max-width: 640px;
  padding: 14px 18px;
  border-radius: 16px;
  background: linear-gradient(135deg, #16803c, #0e5c2b);
  border: 1px solid rgba(46, 214, 122, 0.45);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), var(--glow-green);
  color: #fff;
  text-decoration: none;
  transition: var(--tr);
}
.sara-play:hover { transform: translateY(-1px); border-color: var(--gold); }
.sara-play-ico {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
}
.sara-play-ico img { width: 30px; height: 30px; filter: invert(1); }
.sara-play-txt { flex: 1; min-width: 0; text-align: left; display: flex; flex-direction: column; }
.sara-play-txt b {
  font-size: 1.3rem;
  letter-spacing: 2px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
.sara-play-txt small { color: rgba(255, 255, 255, 0.85); font-size: 0.72rem; }
.sara-play-go { color: #fff; font-size: 1.2rem; font-weight: 800; }

.bid-market-tabs { justify-content: flex-start; margin: 0 auto 14px; max-width: 640px; }

/* ---- Play select: 2-col game card grid (sara style) ---- */
.play-game-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  max-width: 640px;
  margin: 0 auto;
}
.play-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px 10px 14px;
  border-radius: 14px;
  background: var(--card-solid);
  border: 1px solid var(--line);
  text-decoration: none;
  color: var(--text);
  transition: var(--tr);
}
.play-card:hover { border-color: var(--gold); transform: translateY(-2px); box-shadow: var(--glow-gold); }
.play-card.locked {
  cursor: not-allowed;
  opacity: 0.55;
  filter: grayscale(0.8);
  border-color: var(--line);
  box-shadow: none;
  pointer-events: none;
}
.play-card-biderr {
  margin-top: -4px;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.4px;
  color: #f59e0b;
  text-transform: uppercase;
}
.play-card-ico { display: inline-flex; }
.play-card-ico .style-ico { width: 76px; height: 70px; border-radius: 16px; }
.play-card-ico .style-ico.sara img { width: 62px; height: 58px; }
.play-card-name {
  width: 100%;
  padding-top: 9px;
  border-top: 1px dashed var(--line);
  font-size: 0.78rem;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.play-game-list { display: flex; flex-direction: column; gap: 10px; max-width: 640px; margin: 0 auto; }
.play-game-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--card-solid);
  border: 1px solid var(--line);
  text-decoration: none;
  color: var(--text);
  transition: var(--tr);
}
.play-game-row:hover { border-color: var(--gold); transform: translateY(-1px); box-shadow: var(--glow-gold); }
.play-game-ico { flex: 0 0 auto; }
.play-game-ico .style-ico { width: 62px; height: 56px; border-radius: 14px; }
.play-game-ico .style-ico.sara img { width: 54px; height: 50px; }
.play-game-mid { flex: 1; min-width: 0; text-align: left; display: flex; flex-direction: column; gap: 2px; }
.play-game-mid b { font-size: 0.95rem; }
.play-game-mid small { color: var(--muted); font-size: 0.72rem; }
.play-game-go {
  flex: 0 0 auto;
  padding: 8px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--gold), var(--gold3));
  color: #0a1535;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 1px;
  white-space: nowrap;
}

.rate-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(185, 144, 82, 0.1);
  border: 1px solid rgba(185, 144, 82, 0.3);
  font-size: 0.78rem;
  color: var(--muted);
}
.rate-strip b { color: var(--gold-light); font-variant-numeric: tabular-nums; }
.rate-strip .rate-win { color: var(--green); }

.bid-fixed-bar {
  position: sticky;
  bottom: calc(62px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px auto 12px;
  max-width: 640px;
  padding: 12px 14px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(13, 26, 61, 0.96), rgba(10, 21, 53, 0.98));
  border: 1px solid var(--line);
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.4);

}
.bid-fixed-sum { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-align: left; }
.bid-fixed-sum span { color: var(--gold-light); font-size: 0.8rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bid-fixed-sum b { color: var(--green); font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.bid-fixed-bar .btn { flex: 0 0 auto; margin: 0; padding: 14px 26px; font-size: 0.92rem; }
html[data-theme="light"] .bid-fixed-bar { background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(255, 243, 224, 0.99)); }
html[data-theme="night"] .bid-fixed-bar { background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(240, 247, 251, 0.99)); }

.bid-page-pad .pad-d { padding: 16px 0; font-size: 1.05rem; border-radius: 12px; }
.bid-page-pad.digit-grid .pad-d { padding: 10px 0; font-size: 0.74rem; }
.bid-page-pad.digit-pad { grid-template-columns: repeat(5, 1fr); gap: 10px; }

/* ============================================================
   BID PAGE � EASY / SPECIAL MODE
   ============================================================ */
.bid-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--card-solid);
}
.bid-back {
  flex: 0 0 auto;
  width: 36px; height: 36px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bid-mkt { flex: 1; min-width: 0; font-size: 0.88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bid-wallet { flex: 0 0 auto; font-size: 0.78rem; font-weight: 700; color: var(--green); font-variant-numeric: tabular-nums; }

.bid-modes {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}
.bid-mode {
  flex: 1;
  padding: 10px 0;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--card-solid);
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  transition: var(--tr);
}
.bid-mode.on {
  background: linear-gradient(135deg, var(--gold), var(--gold3));
  color: #0a1535;
  border-color: var(--gold);
}

.bid-zone { margin-bottom: 14px; }

body.bid-open main { padding-bottom: 140px; }

.bid-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}
.bid-field:last-of-type { margin-bottom: 0; }
.bid-field label { font-size: 0.72rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.7px; }
.bid-field select,
.bid-input {
  width: 100%;
  padding: 13px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.09);
  background: rgba(255,255,255,0.045);
  color: var(--text);
  font-size: 1rem;
  font-weight: 600;
  outline: none;
  transition: var(--tr);
  box-sizing: border-box;
}
.bid-field select:focus,
.bid-input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(185,144,82,0.15); }
.af-amount-block { margin-bottom: 12px; }
.af-amount-block label { font-size: 0.72rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.7px; display: block; }
.af-amount-block .bid-input { margin-top: 6px; border-radius: 16px; }
.af-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.af-chip { flex: 1 1 auto; padding: 10px 6px; border-radius: 999px; border: 1px solid rgba(185,144,82,0.4); background: rgba(185,144,82,0.08); color: var(--gold-light, #F3DAB4); font-weight: 800; font-size: 0.85rem; cursor: pointer; }
.af-chip.on { background: linear-gradient(160deg, #F3DAB4, #E4B871 45%, #C79B58); color: #1a120b; border-color: transparent; }
html[data-theme="light"] .af-chip, html[data-theme="night"] .af-chip { background: #fff; color: #0a1a4a; border-color: rgba(15,23,42,0.22); }

/* ===== DEPOSIT PAGE (screenshot style) ===== */
.dep-wrap { max-width: 460px; margin: 0 auto; text-align: center; }
.dep-head { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 16px 4px; margin-bottom: 8px; }
.dep-head h1 { font-size: 1.1rem; font-weight: 900; letter-spacing: 0.5px; color: var(--gold); }
.dep-bal-pill { background: linear-gradient(135deg, rgba(185,144,82,0.25), rgba(185,144,82,0.1)); border: 1px solid rgba(185,144,82,0.4); border-radius: 999px; padding: 8px 16px; font-family: "Inter", sans-serif; font-weight: 800; font-size: 0.9rem; color: var(--gold-light); white-space: nowrap; }

.dep-user-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(185,144,82,0.18); border-radius: 14px; padding: 14px; margin-bottom: 16px; }
.dep-user-top { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 10px; text-align: center; }
.dep-avatar { width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, var(--gold), var(--gold3)); color: var(--navy); font-weight: 900; font-size: 1.3rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dep-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; align-items: center; }
.dep-who b { font-size: 1rem; color: var(--text); }
.dep-who small { color: var(--muted); font-size: 0.78rem; }
.dep-div { height: 1px; background: linear-gradient(90deg, transparent, rgba(185,144,82,0.3), transparent); margin: 10px 0; }
.dep-bal-line { font-size: 0.85rem; color: var(--muted); font-weight: 600; margin: 0; }
.dep-app-strip { display: flex; align-items: center; justify-content: center; padding-top: 6px; }
.dep-app-name { font-family: "Inter", sans-serif; font-weight: 900; font-size: 1.2rem; color: var(--gold-light); letter-spacing: 1px; }
.dep-app-name b { color: var(--gold); }

.dep-quick-lbl { font-size: 0.7rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
.dep-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.dep-chips .af-chip { flex: 1 1 28%; min-width: 0; }

.dep-amt-wrap { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.03); border: 1px solid rgba(185,144,82,0.25); border-radius: 16px; padding: 0 16px; margin-bottom: 8px; }
.dep-amt-wrap span { font-family: "Inter", sans-serif; font-weight: 800; font-size: 1.2rem; color: var(--gold); }
.dep-amt-wrap input { flex: 1; background: transparent; border: none; outline: none; color: var(--text); font-family: "Inter", sans-serif; font-weight: 800; font-size: 1.2rem; padding: 14px 0; width: 100%; text-align: center; }
.dep-amt-wrap input::placeholder { color: var(--muted); font-weight: 600; }

.dep-min { font-size: 0.72rem; color: var(--muted); margin: 0 0 16px; font-weight: 600; text-align: center; }

.dep-upi-box { background: rgba(255,255,255,0.03); border: 1px dashed rgba(185,144,82,0.5); border-radius: 12px; padding: 14px; margin-bottom: 16px; text-align: center; }
.dep-upi-box > p:first-child { color: var(--muted); font-size: 0.8rem; margin-bottom: 8px; }
.dep-upi-box .upi-id { font-family: "Inter", sans-serif; font-size: 1rem; font-weight: 700; color: var(--gold-light); background: linear-gradient(180deg, #0a1535, var(--navy2)); border: 1px dashed var(--gold); border-radius: 10px; padding: 10px; margin: 8px 0; letter-spacing: 0.5px; word-break: break-all; }
.dep-qr { display: block; width: 200px; height: 200px; margin: 0 auto 4px; background: #fff; padding: 10px; border-radius: 14px; }
.dep-upi-box input { width: 100%; background: rgba(255,255,255,0.04); border: 1px solid rgba(185,144,82,0.3); border-radius: 10px; color: var(--text); font-family: "Inter", sans-serif; font-size: 0.9rem; padding: 12px 14px; outline: none; }
.dep-upi-box input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(185,144,82,0.15); }
.dep-upi-box input::placeholder { color: var(--muted); }
.dep-utr-btn { width: 100%; margin-top: 10px; background: linear-gradient(135deg, #22c55e, #15803d); border: none; border-radius: 10px; color: #fff; font-family: "Inter", sans-serif; font-weight: 800; font-size: 0.9rem; padding: 12px; cursor: pointer; transition: transform 100ms ease; }
.dep-utr-btn:active { transform: scale(0.97); }
.dep-utr-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.dep-big-btn { width: 100%; background: linear-gradient(135deg, var(--gold), var(--gold3)); border: none; border-radius: 14px; color: var(--navy); font-family: "Inter", sans-serif; font-weight: 900; font-size: 1rem; padding: 16px; cursor: pointer; transition: transform 100ms ease, box-shadow 100ms ease; box-shadow: 0 4px 16px rgba(185,144,82,0.35); }
.dep-big-btn:active { transform: scale(0.97); }
.dep-big-btn:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(185,144,82,0.5), 0 4px 16px rgba(185,144,82,0.35); }
.dep-big-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; }

#af-verify-row { margin-top: 14px; text-align: center; }
#af-verify-row .hint { color: var(--muted); font-size: 0.8rem; margin-bottom: 8px; }
#af-verify { background: linear-gradient(135deg, #3b82f6, #1d4ed8); border: none; border-radius: 12px; color: #fff; font-weight: 800; padding: 12px 20px; cursor: pointer; transition: transform 100ms ease; }
#af-verify:active { transform: scale(0.97); }
#af-verify:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(59,130,246,0.5); }

.dep-support { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border); text-align: center; font-size: 0.85rem; color: var(--muted); }
.dep-support a { color: #25d366; font-weight: 800; text-decoration: none; }
.dep-support a:hover { text-decoration: underline; }

.cart-head,
.cart-cols {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 8px;
  padding: 10px 4px 6px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--muted);
}
.cart-list { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }
.cart-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.03);
  font-size: 0.84rem;
  font-variant-numeric: tabular-nums;
  align-items: center;
  animation: cartIn 0.25s cubic-bezier(0.22,1,0.36,1);
}
@keyframes cartIn {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
.cart-row span:nth-child(2) { color: var(--gold-light); font-weight: 700; }
.cart-row span:nth-child(3) {
  justify-self: start;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.07);
}
.cart-del {
  width: 30px; height: 30px;
  border-radius: 999px;
  border: 1px solid rgba(239,68,68,0.3);
  background: rgba(239,68,68,0.08);
  color: var(--red);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.cart-del:active { transform: scale(0.9); background: rgba(239,68,68,0.2); }
.tt-rows {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
}
.tt-row {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 0;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--card-solid);
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: var(--tr);
}
.tt-row .tt-check { font-weight: 700; font-size: 1rem; }
.tt-row.on {
  background: linear-gradient(135deg, var(--gold), var(--gold3));
  color: #0a1535;
  border-color: var(--gold);
  box-shadow: var(--glow-gold);
}
.screen-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.screen-head .chip {
  flex: none;
  padding: 11px 14px;
  border-radius: 999px;
  border: 1px solid rgba(185,144,82,0.25);
  background: rgba(185,144,82,0.1);
  color: var(--gold-light);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.screen-head select {
  flex: 1;
  padding: 11px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.05);
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 700;
  outline: none;
  cursor: pointer;
  transition: var(--tr);
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--gold-light) 50%), linear-gradient(135deg, var(--gold-light) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}
.screen-head select:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(185,144,82,0.15); }
.tt-rows {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}
.tt-row {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 13px 0;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.045);
  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.6px;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.22,1,0.36,1), background 0.25s ease, border-color 0.25s ease;
}
.tt-row:active { transform: scale(0.96); }
.tt-row .tt-check { font-weight: 700; font-size: 0.95rem; }
.tt-row.on {
  background: linear-gradient(135deg, #c9a25e, #e6c584);
  color: #101a38;
  border-color: rgba(201,162,94,0.9);
  box-shadow: 0 6px 22px rgba(185,144,82,0.35), inset 0 1px 0 rgba(255,255,255,0.4);
}
.tt-row.on .tt-check { color: #101a38; }
.tt-hint {
  margin: -6px 4px 14px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--gold-light);
  text-align: center;
  letter-spacing: 0.3px;
}

.spec-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  gap: 10px;
}
.spec-date { font-size: 0.82rem; font-weight: 700; color: var(--text); }
.spec-lock {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--green);
  border: 1px solid rgba(82,196,26,0.35);
  background: rgba(82,196,26,0.08);
  border-radius: 8px;
  padding: 6px 10px;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
}
.spec-lock:focus { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(185,144,82,0.2); }

.sp-fam { margin-bottom: 4px; }
.sp-fam-head {
  font-size: 1.4rem;
  font-weight: 900;
  text-align: center;
  color: var(--gold);
  padding: 4px 0 8px;
  letter-spacing: 0.5px;
}
.sp-fam + .sp-fam { margin-top: 12px; }

.spec-rows { display: flex; flex-direction: column; gap: 8px; }
.spec-row {
  display: grid;
  grid-template-columns: 40px 1fr 40px 1fr;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--card-solid);
  transition: var(--tr);
}
.spec-row.has { border-color: var(--green); background: rgba(82,196,26,0.06); }
.spec-ank { font-size: 1rem; font-weight: 800; text-align: center; color: var(--text); }
.spec-point {
  flex: 1;
  min-width: 0;
  padding: 10px 8px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.05);
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 600;
  outline: none;
  text-align: center;
  transition: var(--tr);
}
.spec-point:focus { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(185,144,82,0.2); }

.pf-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.pf-select { margin-bottom: 12px; }
.pf-label { font-size: 0.85rem; color: var(--muted); font-weight: 600; margin-bottom: 8px; }
.pf-digits { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.pf-digit {
  padding: 10px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--card-solid); color: var(--text);
  font-size: 1.1rem; font-weight: 700; text-align: center;
  transition: var(--tr);
}
.pf-digit:active { background: var(--gold); color: var(--navy); border-color: var(--gold); }
.pf-detail { padding: 12px; border-radius: 12px; border: 1px solid var(--border-strong); background: var(--card-solid); }
.pf-sel-head { font-size: 1rem; font-weight: 700; color: var(--gold); margin-bottom: 10px; text-align: center; }
.pf-pana-list { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 12px; }
.pf-pana {
  padding: 8px 12px; border-radius: 8px; border: 1px solid var(--line);
  background: rgba(255,255,255,0.05); color: var(--text);
  font-size: 0.95rem; font-weight: 600; font-variant-numeric: tabular-nums;
}
.pf-point-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.pf-point-row label { font-size: 0.85rem; color: var(--muted); font-weight: 600; white-space: nowrap; }
.pf-point-row input { flex: 1; min-width: 0; }

@keyframes fadeInUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes pulseGold { 0%, 100% { opacity: .6; transform: scale(.92); } 50% { opacity: 1; transform: scale(1.1); } }
@keyframes shimmer { 0% { opacity: .6; } 100% { opacity: 1; } }

.pf-digit {
  animation: scaleIn 0.25s ease-out both;
}
.pf-digits .pf-digit:nth-child(1) { animation-delay: 0.02s; }
.pf-digits .pf-digit:nth-child(2) { animation-delay: 0.04s; }
.pf-digits .pf-digit:nth-child(3) { animation-delay: 0.06s; }
.pf-digits .pf-digit:nth-child(4) { animation-delay: 0.08s; }
.pf-digits .pf-digit:nth-child(5) { animation-delay: 0.1s; }
.pf-digits .pf-digit:nth-child(6) { animation-delay: 0.12s; }
.pf-digits .pf-digit:nth-child(7) { animation-delay: 0.14s; }
.pf-digits .pf-digit:nth-child(8) { animation-delay: 0.16s; }
.pf-digits .pf-digit:nth-child(9) { animation-delay: 0.18s; }
.pf-digits .pf-digit:nth-child(10) { animation-delay: 0.2s; }

.pf-digit:active { animation: none; background: var(--gold); color: var(--navy); border-color: var(--gold); transform: scale(0.95); }
.pf-digit.selected { background: var(--gold); color: var(--navy); border-color: var(--gold); animation: pulseGold 1.5s ease infinite; }

.pf-detail { animation: fadeInUp 0.3s ease-out; }
.pf-pana { animation: scaleIn 0.2s ease-out both; }
.pf-pana-list .pf-pana:nth-child(1) { animation-delay: 0.05s; }
.pf-pana-list .pf-pana:nth-child(2) { animation-delay: 0.08s; }
.pf-pana-list .pf-pana:nth-child(3) { animation-delay: 0.11s; }
.pf-pana-list .pf-pana:nth-child(4) { animation-delay: 0.14s; }
.pf-pana-list .pf-pana:nth-child(5) { animation-delay: 0.17s; }
.pf-pana-list .pf-pana:nth-child(6) { animation-delay: 0.2s; }
.pf-pana-list .pf-pana:nth-child(7) { animation-delay: 0.23s; }
.pf-pana-list .pf-pana:nth-child(8) { animation-delay: 0.26s; }
.pf-pana-list .pf-pana:nth-child(9) { animation-delay: 0.29s; }
.pf-pana-list .pf-pana:nth-child(10) { animation-delay: 0.32s; }
.pf-pana-list .pf-pana:nth-child(11) { animation-delay: 0.35s; }
.pf-pana-list .pf-pana:nth-child(12) { animation-delay: 0.38s; }

.cart-row { animation: slideInRight 0.25s ease-out; }
.cart-row.removing { animation: slideInRight 0.2s ease-in reverse; }

.spec-row { animation: fadeInUp 0.25s ease-out both; }
.spec-rows .spec-row:nth-child(1) { animation-delay: 0.02s; }
.spec-rows .spec-row:nth-child(2) { animation-delay: 0.04s; }
.spec-rows .spec-row:nth-child(3) { animation-delay: 0.06s; }
.spec-rows .spec-row:nth-child(4) { animation-delay: 0.08s; }
.spec-rows .spec-row:nth-child(5) { animation-delay: 0.1s; }
.spec-rows .spec-row:nth-child(6) { animation-delay: 0.12s; }
.spec-rows .spec-row:nth-child(7) { animation-delay: 0.14s; }
.spec-rows .spec-row:nth-child(8) { animation-delay: 0.16s; }
.spec-rows .spec-row:nth-child(9) { animation-delay: 0.18s; }
.spec-rows .spec-row:nth-child(10) { animation-delay: 0.2s; }

.sp-fam { animation: fadeInUp 0.3s ease-out both; }
.sp-fam:nth-child(1) { animation-delay: 0.05s; }
.sp-fam:nth-child(2) { animation-delay: 0.1s; }
.sp-fam:nth-child(3) { animation-delay: 0.15s; }
.sp-fam:nth-child(4) { animation-delay: 0.2s; }
.sp-fam:nth-child(5) { animation-delay: 0.25s; }
.sp-fam:nth-child(6) { animation-delay: 0.3s; }
.sp-fam:nth-child(7) { animation-delay: 0.35s; }
.sp-fam:nth-child(8) { animation-delay: 0.4s; }
.sp-fam:nth-child(9) { animation-delay: 0.45s; }
.sp-fam:nth-child(10) { animation-delay: 0.5s; }

.jodi-cell { animation: scaleIn 0.15s ease-out both; }
.bulk-jodi .jodi-cell:nth-child(1) { animation-delay: 0.01s; }
.bulk-jodi .jodi-cell:nth-child(2) { animation-delay: 0.02s; }
.bulk-jodi .jodi-cell:nth-child(3) { animation-delay: 0.03s; }
.bulk-jodi .jodi-cell:nth-child(4) { animation-delay: 0.04s; }
.bulk-jodi .jodi-cell:nth-child(5) { animation-delay: 0.05s; }
.bulk-jodi .jodi-cell:nth-child(6) { animation-delay: 0.06s; }
.bulk-jodi .jodi-cell:nth-child(7) { animation-delay: 0.07s; }
.bulk-jodi .jodi-cell:nth-child(8) { animation-delay: 0.08s; }
.bulk-jodi .jodi-cell:nth-child(9) { animation-delay: 0.09s; }
.bulk-jodi .jodi-cell:nth-child(10) { animation-delay: 0.1s; }

.bid-zone { animation: fadeInUp 0.35s ease-out; }
.bid-zone > .card { animation: fadeInUp 0.3s ease-out; }
.bid-zone > .card:nth-child(2) { animation-delay: 0.1s; }

.btn { transition: transform 0.1s ease, box-shadow 0.15s ease, background 0.15s ease; }
.btn:active { transform: scale(0.97); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(185,144,82,0.35); }

.bulk-key { animation: scaleIn 0.15s ease-out both; }
.bulk-pad .bulk-key:nth-child(1) { animation-delay: 0.02s; }
.bulk-pad .bulk-key:nth-child(2) { animation-delay: 0.04s; }
.bulk-pad .bulk-key:nth-child(3) { animation-delay: 0.06s; }
.bulk-pad .bulk-key:nth-child(4) { animation-delay: 0.08s; }
.bulk-pad .bulk-key:nth-child(5) { animation-delay: 0.1s; }
.bulk-pad .bulk-key:nth-child(6) { animation-delay: 0.12s; }
.bulk-pad .bulk-key:nth-child(7) { animation-delay: 0.14s; }
.bulk-pad .bulk-key:nth-child(8) { animation-delay: 0.16s; }
.bulk-pad .bulk-key:nth-child(9) { animation-delay: 0.18s; }
.bulk-pad .bulk-key:nth-child(10) { animation-delay: 0.2s; }

.bulk-key.has-val .bulk-key-val { animation: pulseGold 1s ease infinite; }

.bulk-entry { transition: color 0.2s ease, transform 0.15s ease, text-shadow 0.2s ease; }

.bid-topbar { animation: slideInRight 0.3s ease-out; }
.bid-footer { animation: fadeInUp 0.3s ease-out; }

.fade-out { animation: fadeInUp 0.2s ease-in reverse; }

.bulk-del { transition: transform 0.1s ease, opacity 0.15s ease; }
.bulk-del:active { transform: scale(0.9); }

.bid-mode { transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; }
.bid-mode.on { animation: pulseGold 2s ease infinite; }

.spec-lock { transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; }

.bulk-key-val { transition: opacity 0.2s ease, transform 0.15s ease; }
.bulk-key-val:empty { opacity: 0; transform: scale(0.8); }
.bulk-key-val:not(:empty) { opacity: 1; transform: scale(1); }

.bulk-hint { transition: color 0.2s ease; }

.bulk-display, .pf-select, .pf-detail, .card.panel-card { transition: border-color 0.2s ease, box-shadow 0.2s ease; }

.oe-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.oe-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.oe-btn {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 20px 12px; border-radius: 14px; border: 2px solid var(--line);
  background: var(--card-solid); color: var(--text);
  font-size: 0.9rem; font-weight: 700; transition: var(--tr);
}
.oe-btn:active { transform: scale(0.96); border-color: var(--gold); }
.oe-btn.has { border-color: var(--green); background: rgba(74,222,128,0.12); }
.oe-icon { font-size: 1.8rem; line-height: 1; }
.oe-label { font-size: 1.1rem; font-weight: 800; }
.oe-desc { font-size: 0.7rem; color: var(--muted); font-weight: 500; }

.oe-btn[data-v="odd"] .oe-icon { color: var(--gold); }
.oe-btn[data-v="even"] .oe-icon { color: var(--green); }
.oe-btn.has[data-v="odd"] { box-shadow: 0 0 0 3px rgba(185,144,82,0.25); }
.oe-btn.has[data-v="even"] { box-shadow: 0 0 0 3px rgba(74,222,128,0.25); }

.pf-add:active { transform: scale(0.98); }
.pf-add:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(185,144,82,0.35); }

.pf-point-row input { transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.pf-point-row input:focus { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(185,144,82,0.2); }

.bid-back { transition: transform 0.1s ease, opacity 0.15s ease; }
.bid-back:active { transform: scale(0.9); }

.bulk-del { transition: transform 0.1s ease; }
.bulk-del:active { transform: scale(0.9); }

.bid-modes { animation: fadeInUp 0.25s ease-out; }
.bid-mode { animation: scaleIn 0.2s ease-out both; }
.bid-modes .bid-mode:nth-child(1) { animation-delay: 0.03s; }
.bid-modes .bid-mode:nth-child(2) { animation-delay: 0.06s; }

.bulk-entry { animation: scaleIn 0.2s ease-out; }

.bid-wallet { animation: slideInRight 0.3s ease-out; }

.bid-mkt { animation: fadeInUp 0.3s ease-out; }

.cart-cols { animation: fadeInUp 0.2s ease-out; }

.bid-balance { animation: slideInRight 0.3s ease-out; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.bulk-display {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.05);
}
.bulk-hint { flex: 1; font-size: 0.78rem; color: var(--muted); font-weight: 600; }
.bulk-entry {
  min-width: 64px;
  text-align: center;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.bulk-pad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 12px;
  transition: opacity var(--tr);
}
.bulk-pad.dimmed {
  opacity: 0.45;
  pointer-events: none;
}
.bulk-entry.flash {
  color: var(--green);
  text-shadow: 0 0 18px rgba(74,222,128,0.55);
  transform: scale(1.12);
  transition: transform 0.15s ease;
}
.bulk-key {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 10px 0 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--card-solid);
  color: var(--text);
  transition: var(--tr);
}
.bulk-key .bulk-key-num {
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.2;
}
.bulk-key .bulk-key-val {
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
  color: var(--muted);
  min-height: 0.7rem;
}
.bulk-key.has-val .bulk-key-val { color: var(--gold); }
.bulk-key:active { transform: scale(0.94); border-color: var(--gold); color: var(--gold); }
.bulk-pad .bulk-key:last-child { grid-column: 2; }

.easy-keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 8px;
}
.easy-key {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 0;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--card-solid);
  color: var(--text);
  font-size: 1.2rem;
  font-weight: 700;
  transition: var(--tr);
}
.easy-key:active { transform: scale(0.92); border-color: var(--gold); color: var(--gold); }
.easy-key:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(185,144,82,0.4); }

.bulk-jodi {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 4px;
  max-height: 42vh;
  overflow-y: auto;
}
.jodi-cell {
  padding: 10px 4px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--card-solid);
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  transition: var(--tr);
}
.jodi-cell:active { transform: scale(0.95); border-color: var(--gold); color: var(--gold); }
.jodi-cell.has { border-color: var(--green); color: var(--green); background: rgba(82,196,26,0.08); font-size: 0.8rem; }

.bid-footer {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(62px + env(safe-area-inset-bottom, 0px));
  z-index: 120;
  display: flex;
  align-items: center;
  gap: 12px;
  width: calc(100% - 28px);
  max-width: 640px;
  padding: 12px 16px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(13,26,61,0.96), rgba(10,21,53,0.98));
  border: 1px solid rgba(185,144,82,0.22);
  box-shadow: 0 -10px 20px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.05);

  box-sizing: border-box;
}
.bid-footer-sum {
  flex: 1;
  display: flex;
  gap: 16px;
  font-size: 0.8rem;
  color: var(--muted);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.bid-footer-sum b { color: var(--green); font-size: 0.9rem; }
.bid-footer .btn { flex: 0 0 auto; width: auto; margin: 0; padding: 14px 28px; font-size: 0.92rem; letter-spacing: 1.2px; }
html[data-theme="light"] .bid-footer { background: linear-gradient(180deg, rgba(255,255,255,0.97), rgba(255,243,224,0.99)); }
html[data-theme="night"] .bid-footer { background: linear-gradient(180deg, rgba(255,255,255,0.97), rgba(240,247,251,0.99)); }
/* Fixed submit bar must not inherit the old rise animation: its transform
   would fight translateX(-50%) and cause jitter/sideways jumps. */
.bid-footer{animation:none!important;transform:translateX(-50%)!important;}

/* Landing/home money actions: clear contrast, no muddy grey surface. */
.sara-money { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.sara-mbtn.m-add,
.sara-mbtn.m-withdraw {
  display:flex; align-items:center; justify-content:center; gap:10px;
  min-height:56px; border-radius:14px; border:0; text-decoration:none;
  box-shadow:0 6px 16px rgba(15,23,42,.16);
  font-weight:900; transition:transform .14s ease,filter .14s ease;
}
.sara-mbtn.m-add { background:linear-gradient(135deg,#f6c453,#d88916); color:#201304; }
.sara-mbtn.m-withdraw { background:linear-gradient(135deg,#4b8cff,#2451c5); color:#fff; }
.sara-mbtn.m-add .m-txt,.sara-mbtn.m-withdraw .m-txt { color:inherit; }
.sara-mbtn .m-ico { width:34px; height:34px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:rgba(255,255,255,.22); }
.sara-mbtn:active { transform:scale(.97); filter:brightness(.96); }
body.home-layout .home-topbar .sync-dot { display:none !important; }
body:not(.home-layout) .home-ticker { display:none !important; }

/* Board pages: centered title and centered history actions. */
.board-head { position:relative; display:block; text-align:center; padding:18px 54px 10px; }
.board-head h1 { text-align:center; }
.board-head .board-back { position:absolute; left:16px; top:22px; }
.board-head .board-bal { display:block; margin-top:4px; }
.board-tabs { justify-content:center; align-items:center; gap:10px; flex-wrap:wrap; padding:12px 16px; }
.board-tab-cap { justify-content:center; }
.board-page-head { padding-left:16px !important; padding-right:16px; text-align:center !important; }
.board-page-head h1 { text-align:center; }

/* Market cards: make the information hierarchy explicit. */
.s5-row { align-items:stretch; gap:12px; padding:10px; }
.s5-left-box { gap:8px; padding:11px 13px; background:rgba(255,255,255,.035); }
.s5-mkt b { font-size:.98rem; letter-spacing:.15px; }
.s5-number { padding:5px 0 7px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); font-size:1.18rem; }
.s5-times { justify-content:space-between; gap:10px; }
.s5-time { flex-direction:column; align-items:flex-start; gap:1px; }
.s5-time em { font-size:.58rem; letter-spacing:.7px; text-transform:uppercase; }
.s5-time b { font-size:.78rem; }
.s5-right-box { min-width:104px; }
.s5-bid { min-height:42px; padding:9px 13px; }
@media (max-width:640px) {
  .s5-row { flex-direction:row; align-items:stretch; }
  .s5-left-box { min-width:0; flex:1 1 auto; }
  .s5-right-box { width:auto; min-width:104px; flex:0 0 auto; align-self:stretch; }
  .s5-bid, .s5-bid.disabled { width:auto; max-width:118px; }
}

/* Home bottom navigation: distinct visual identity per action. */
.bottom-nav a[data-active="my-bids"],
.bottom-nav a[data-active="passbook"],
.bottom-nav a[data-active="funds"],
.bottom-nav a.wa-support {
  gap:4px; padding:7px 8px 6px; border-radius:13px; transition:background .15s ease,transform .15s ease;
}
.bottom-nav a[data-active="my-bids"] svg,
.bottom-nav a[data-active="passbook"] svg,
.bottom-nav a[data-active="funds"] svg,
.bottom-nav a.wa-support svg { width:22px; height:22px; padding:3px; border-radius:8px; }
.bottom-nav a[data-active="my-bids"] svg { color:#8b5cf6; background:rgba(139,92,246,.14); }
.bottom-nav a[data-active="passbook"] svg { color:#0ea5e9; background:rgba(14,165,233,.14); }
.bottom-nav a[data-active="funds"] svg { color:#16a34a; background:rgba(22,163,74,.14); }
.bottom-nav a.wa-support svg { color:#16a34a; background:rgba(34,197,94,.14); }
.bottom-nav a[data-active="my-bids"] span,
.bottom-nav a[data-active="passbook"] span,
.bottom-nav a[data-active="funds"] span,
.bottom-nav a.wa-support span { font-size:.62rem; font-weight:800; letter-spacing:.1px; }
.drawer-who b,
.member-meta h3,
.pf-mtxt { text-transform: uppercase; }
/* Bid screen owns the lower action area; never stack it over Home navigation.
   Only the Home button stays visible below. */
body.bid-open #bottom-nav{display:flex!important;justify-content:center}
body.bid-open #bottom-nav a:not(.home){display:none!important}
body.bid-open #bottom-nav a.home{transform:none!important}
/* Bid submit stays pinned above the Home button (user request): fixed, never
   scrolls away. bottom = bottom-nav height (62px) + safe-area. */
body.bid-open .bid-footer{position:fixed;left:50%;bottom:calc(62px + env(safe-area-inset-bottom, 0px));transform:translateX(-50%)!important;width:calc(100% - 28px);max-width:640px;margin:0;z-index:120}
@media(max-width:768px){
  body.bid-open #bottom-nav{display:flex!important;justify-content:center}
  body.bid-open #bottom-nav a:not(.home){display:none!important}
  body.bid-open #bottom-nav a.home{transform:none!important}
  /* Fixed footer (~76px) + bottom nav (62px): keep page content clear of both. */
  body.bid-open main{padding-bottom:150px}
}
/* ---------- Refer & Earn premium ---------- */
.ref-hero{ background:linear-gradient(135deg,#4c1d95 0%,#6d28d9 45%,#1d4ed8 100%); border:1px solid rgba(255,255,255,0.18); border-radius:22px; padding:26px 18px; text-align:center; box-shadow:0 10px 40px rgba(109,40,217,0.45); position:relative; overflow:hidden; }
.ref-hero::before{ content:""; position:absolute; top:-60px; right:-60px; width:180px; height:180px; border-radius:50%; background:radial-gradient(circle,rgba(251,191,36,0.35),transparent 70%); }
.ref-gift{ font-size:2.4rem; box-shadow:0 4px 12px rgba(0,0,0,0.3); }
.ref-code-label{ color:#ddd6fe; font-size:0.68rem; font-weight:800; letter-spacing:2px; margin:10px 0 6px; }
.ref-code{ display:inline-block; font-size:2rem; font-weight:900; letter-spacing:6px; color:#fff; background:rgba(0,0,0,0.3); border:2px dashed rgba(251,191,36,0.7); border-radius:14px; padding:8px 18px 8px 24px; text-shadow:0 2px 12px rgba(251,191,36,0.5); }
.ref-actions{ display:flex; gap:10px; justify-content:center; margin-top:16px; }
.ref-btn-gold{ flex:1; max-width:170px; border:none; border-radius:12px; padding:12px; font-weight:800; font-size:0.88rem; color:#1a120b; background:linear-gradient(135deg,#fbbf24,#f59e0b); box-shadow:0 4px 16px rgba(251,191,36,0.4); cursor:pointer; }
.ref-btn-gold:active{ transform:scale(0.95); }
.ref-btn-line{ flex:1; max-width:170px; border-radius:12px; padding:12px; font-weight:800; font-size:0.88rem; color:#fff; background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.35); cursor:pointer; }
.ref-btn-line:active{ transform:scale(0.95); }

/* Refer & Earn share chooser (WhatsApp / Telegram / SMS / Copy Link / More) */
.share-grid { grid-template-columns: repeat(2, 1fr); }
.share-grid .share-ico { font-size: 1.5rem; background: rgba(251, 191, 36, 0.14); border-color: rgba(251, 191, 36, 0.35); }
.share-grid a.style-btn { text-decoration: none; }
@media (min-width: 480px) { .share-grid { grid-template-columns: repeat(3, 1fr); } }
.ref-stats{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px; }
.ref-stat{ display:flex; gap:10px; align-items:center; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:14px; }
.ref-ico{ width:42px; height:42px; border-radius:12px; background:linear-gradient(135deg,rgba(251,191,36,0.25),rgba(109,40,217,0.25)); display:flex; align-items:center; justify-content:center; font-size:1.3rem; flex:none; }
.ref-stat b{ display:block; font-size:1.2rem; }
.ref-stat small{ color:var(--muted); font-size:0.72rem; }
.ref-how{ margin-top:10px; }
.ref-steps{ display:flex; gap:8px; margin:10px 0; }
.ref-step{ flex:1; text-align:center; background:rgba(109,40,217,0.1); border:1px solid var(--line); border-radius:12px; padding:10px 4px; font-size:0.72rem; color:var(--text); }
.ref-step b{ display:flex; align-items:center; justify-content:center; width:26px; height:26px; margin:0 auto 6px; border-radius:50%; background:linear-gradient(135deg,#fbbf24,#f59e0b); color:#1a120b; font-size:0.8rem; }
.ref-list-card .activity-row{ display:flex; justify-content:space-between; gap:8px; padding:10px 2px; border-bottom:1px solid var(--line); }

/* Forced sign-out notice on the login screen (deleted / revoked account). */
.auth-alert{margin:0 0 14px;padding:12px 14px;border-radius:12px;background:#7f1d1d;border:1px solid #ef4444;color:#fecaca;font-weight:600;font-size:14px;line-height:1.45}

/* ============================================================================
   MOTION LAYER � shared by the user app and the admin app.
   Android WebView rules: animate transform/opacity/colour only (never layout,
   never box-shadow/filter), no permanent will-change, no huge backdrop blurs.
   ========================================================================== */

/* Kill the 300 ms tap delay and the grey tap flash: the single biggest
   perceived-smoothness win on a WebView. */
button, a, label, summary, [role="button"],
.btn, .chip, .tap, .press, .style-btn, .cat-chip, .bid-mode {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
input, select, textarea { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
/* NOTE: NEVER put overscroll-behavior on body here. `html, body { overflow-x: hidden }`
   makes body's overflow-y compute to auto, so body becomes a scroll container;
   `contain` on it swallowed every swipe and made touch scrolling dead (the page
   could still be moved programmatically, so it looked "stuck"). On html it only
   stops overscroll chaining to the browser chrome � html is the real scroller. */
html { overscroll-behavior-y: contain; }

/* Route / tab entrance: 10 px rise + fade (compositor friendly, 200 ms).
   The class is added by the router / switchTab and removed on animationend,
   so it never lingers as a promoted layer. */
@keyframes pageIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
.page-in { animation: pageIn 220ms ease-out both; }

@keyframes sheetUp {
  from { opacity: 0; transform: translate3d(0, 18px, 0) scale(0.985); }
  to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
.sheet-in { animation: sheetUp 240ms cubic-bezier(0.22, 0.61, 0.36, 1) both; }

/* Drawer scrim fades out only (no costly fade-in + blur while sliding). */
.drawer-overlay { transition: opacity 0.16s ease; }
.drawer-overlay.ov-out { opacity: 0; }

/* Press feedback everywhere, even where the JS enhancer never ran. */
.btn:active, .chip:active, .style-btn:active, .cat-chip:active,
.quick-links a:active, .theme-capsule button:active {
  transform: scale(0.97);
}
.bottom-nav a { transition: transform 0.16s ease, color 0.16s ease; }
.bottom-nav a:active { transform: scale(0.9); }


/* Respect the OS reduced-motion setting. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* profile v2 + single-column cards */
.pf-menu{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;border-bottom:none;margin:0 0 20px}
.panel-tabs.pf-menu .chip{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:14px;font-size:.95rem;color:var(--text)}
.panel-tabs.pf-menu .chip.active{border-color:var(--gold);color:var(--gold)}
.pf-mico{font-size:1.5rem;flex:none}
.pf-mtxt{display:flex;flex-direction:column;text-align:left;font-weight:700;line-height:1.3}
.pf-mtxt small{color:var(--muted);font-weight:500;font-size:.75rem}
.pf-hero{margin-bottom:18px}
#logout-btn{width:100%}
.profile-grid .form label{display:block;margin:10px 0}
.profile-grid .form input{width:100%}

/* profile full-width fix */
.profile-grid{grid-template-columns:1fr !important;}
.profile-grid .card{max-width:none !important;width:100%;margin:0 0 16px;box-sizing:border-box}
#panel-body{width:100%}

/* sticky profile menu */
.pf-menu{position:sticky;top:0;z-index:30;background:var(--navy2);padding:10px 0}

/* ---- User profile premium layout ---- */
.page-head:has(+ .pf-hero){
  margin-bottom:16px;
}
.page-head:has(+ .pf-hero) h1{
  margin-bottom:4px;
  letter-spacing:-.3px;
}
.pf-hero{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:linear-gradient(135deg,#f7c948 0%,#e6a51d 48%,#b87513 100%);
  border:1px solid rgba(255,255,255,.55);
  padding:22px;
  box-shadow:0 12px 28px rgba(96,61,8,.22);
}
.pf-hero::before{
  content:"";
  position:absolute;
  width:230px;height:230px;
  right:-90px;top:-120px;
  border-radius:50%;
  background:rgba(255,255,255,.18);
  z-index:-1;
}
.pf-hero::after{
  content:"";
  position:absolute;
  width:130px;height:130px;
  left:42%;bottom:-95px;
  border-radius:50%;
  background:rgba(255,255,255,.12);
  z-index:-1;
}
.pf-hero-top{gap:16px;min-height:68px}
.pf-avatar{
  width:68px;height:68px;
  border:3px solid rgba(255,255,255,.7);
  box-shadow:0 5px 16px rgba(59,42,18,.22);
}
.pf-hero .member-meta h3{font-size:1.3rem;letter-spacing:.1px}
.pf-hero .member-phone{font-size:.9rem;opacity:.9}
.pf-hero .profile-sub{font-size:.78rem;max-width:360px}
.pf-hero .member-flag{align-self:flex-start;margin-top:2px;white-space:nowrap}
.pf-stats{gap:12px;margin-top:20px}
.pf-stat{
  min-height:66px;
  justify-content:center;
  background:rgba(255,255,255,.30);
}
.pf-stat span{font-size:.62rem;color:#654612}
.pf-stat b{font-size:1.08rem;color:#2e210f}
.pf-menu{
  position:relative;
  top:auto;
  background:transparent;
  padding:0;
  margin:0 0 20px;
  gap:10px;
}
.panel-tabs.pf-menu .chip{
  min-height:62px;
  justify-content:flex-start;
  background:var(--card);
  border:1px solid var(--border);
  box-shadow:0 4px 12px rgba(15,23,42,.06);
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.panel-tabs.pf-menu .chip:hover{transform:translateY(-1px);border-color:var(--gold)}
.panel-tabs.pf-menu .chip.active{
  border-color:var(--gold);
  background:linear-gradient(135deg,rgba(247,201,72,.2),var(--card));
  color:var(--gold3);
  box-shadow:0 5px 16px rgba(185,144,82,.16);
}
.pf-mico{width:30px;text-align:center;font-size:1.3rem}
.pf-mtxt{gap:2px;line-height:1.15}
.pf-mtxt small{font-size:.68rem;letter-spacing:.1px}
.profile-grid{gap:14px}
.profile-grid .card.panel-card{
  padding:18px;
  border-radius:16px;
  background:var(--card);
  border-color:var(--border);
  box-shadow:0 5px 16px rgba(15,23,42,.06);
}
.profile-grid .card.panel-card h3{margin-bottom:14px;color:var(--text)}
.pf-row{padding:12px 0;gap:13px}
.pf-row b{line-height:1.35}
.activity-list{gap:7px}
.activity-row{padding:11px 12px;background:var(--card2,rgba(255,255,255,.04));border-color:var(--border)}
.profile-grid .form label{color:var(--text);font-weight:650}
.profile-grid .form input{min-height:44px}

@media (max-width:640px){
  .pf-hero{padding:18px 14px;border-radius:17px}
  .pf-hero-top{align-items:flex-start;gap:11px}
  .pf-avatar{width:54px;height:54px;font-size:1.4rem}
  .pf-hero .member-meta h3{font-size:1.05rem}
  .pf-hero .member-flag{font-size:.6rem;padding:4px 8px}
  .pf-stats{gap:7px;margin-top:16px}
  .pf-stat{min-height:60px;padding:8px 3px}
  .pf-stat span{font-size:.55rem}
  .pf-stat b{font-size:.88rem}
  .pf-menu{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .panel-tabs.pf-menu .chip{min-height:56px;padding:10px 8px;gap:8px;font-size:.82rem}
  .pf-mico{width:24px;font-size:1.1rem}
  .pf-mtxt small{font-size:.62rem}
  .profile-grid .card.panel-card{padding:15px}
}

html[data-theme="light"] .pf-hero,
html[data-theme="night"] .pf-hero,
html[data-theme="dark"] .pf-hero{color:#3b2a12}
html[data-theme="light"] .profile-grid .card.panel-card,
html[data-theme="night"] .profile-grid .card.panel-card{box-shadow:0 5px 16px rgba(31,24,8,.08)}


/* perf: no infinite marquees - static strips, zero constant repaint.
   Exception: the home welcome ticker is transform-only (GPU-cheap), revived. */
.ticker-inner{animation:none !important;}
.home-ticker-inner{animation:homeTick 22s linear infinite !important; will-change:transform;}


/* PERF (lag fix): kill constant-repaint glow animations + heavy list-row shadows. Static look kept. */
.live-badge{animation:none !important;box-shadow:0 0 0 0 rgba(34,197,94,0.3)}
.btn-live{animation:none !important;box-shadow:0 0 8px rgba(74,222,128,0.25)}
.btn-live:hover{animation:none !important}
.s5-bid{animation:none !important;box-shadow:inset 0 1px 0 rgba(255,255,255,0.06),0 2px 6px rgba(0,0,0,0.3)}
.s5-row,.bet-row,.hist-row,.board-row,.spec-row,.cart-row,.activity-row,.br-row,.bb-row,.b-chip,.ref-stat,.nt-res,.jodi-cell,.bs-digit{box-shadow:none !important}


.pf-suggest{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:10px 0}
button.pf-pick{font:inherit;cursor:pointer}
button.pf-pick:active{transform:scale(0.94)}

/* ---- Panna Family betting screen polish ---- */
.pf-head{padding:2px 0 12px;margin-bottom:14px;border-bottom:1px solid var(--line)}
.pf-head .spec-date{font-size:.72rem;color:var(--muted);font-weight:700;letter-spacing:.2px}
.pf-head .spec-lock{min-width:126px;text-align:center;font-weight:800;color:var(--text);background:var(--card-solid);border:1px solid var(--line);border-radius:11px;padding:9px 10px}
.pf-guide{display:flex;align-items:center;gap:10px;padding:12px 13px;margin-bottom:14px;border-radius:14px;background:linear-gradient(135deg,rgba(185,144,82,.15),rgba(37,99,235,.08));border:1px solid rgba(185,144,82,.3)}
.pf-guide b{font-size:.88rem;color:var(--gold);white-space:nowrap}.pf-guide span{font-size:.72rem;color:var(--muted);line-height:1.35}
.pf-label{display:flex;align-items:center;gap:7px;color:var(--text);font-size:.84rem;font-weight:800;margin-bottom:8px}.pf-label i{font-style:normal;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--gold);color:var(--navy);font-size:.7rem}
.pf-select{padding:0;margin-bottom:14px}.pf-select .bid-input{height:48px;border-radius:13px;text-align:left;padding-left:15px;font-size:1rem;font-weight:700}
.pf-suggest{display:grid;grid-template-columns:repeat(auto-fill,minmax(62px,1fr));gap:8px;justify-content:initial;margin:10px 0 14px;padding:11px;border-radius:14px;background:var(--card-solid);border:1px solid var(--line)}
.pf-suggest:empty{display:none}.pf-suggest .pf-label{grid-column:1/-1;margin:0;color:var(--muted);font-size:.72rem}.pf-suggest .pf-pick{width:100%;padding:10px 6px;border-radius:11px;background:rgba(185,144,82,.08);border:1px solid rgba(185,144,82,.3);color:var(--gold);font-weight:900;letter-spacing:.5px;transition:transform .15s,background .15s,border-color .15s}
.pf-suggest .pf-pick:hover,.pf-suggest .pf-pick:focus{background:var(--gold);border-color:var(--gold);color:var(--navy);transform:translateY(-1px);outline:none}
.pf-detail{padding:15px;border-radius:16px;border:1px solid rgba(185,144,82,.35);background:linear-gradient(180deg,var(--card-solid),rgba(185,144,82,.05));box-shadow:0 6px 18px rgba(0,0,0,.08)}
.pf-sel-head{display:flex;align-items:center;justify-content:space-between;gap:8px;text-align:left;color:var(--muted);font-size:.78rem;margin-bottom:11px}.pf-sel-head b{color:var(--gold);font-size:1.05rem}
.pf-pana-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:7px;justify-content:initial;margin-bottom:15px;padding-bottom:13px;border-bottom:1px dashed var(--line)}
.pf-pana-list .pf-pana{padding:9px 4px;text-align:center;border-radius:9px;background:rgba(37,99,235,.08);border-color:rgba(37,99,235,.22);color:var(--text);font-size:.86rem;font-weight:900}
.pf-point-row{display:flex;flex-direction:column;align-items:stretch;gap:7px;margin-bottom:12px}.pf-point-row label{font-size:.76rem;color:var(--muted);font-weight:800}.pf-point-row input{height:46px;border-radius:12px;font-size:1rem;font-weight:800}
.pf-detail #pf-add{width:100%;min-height:46px;border-radius:12px;font-weight:900}
@media(max-width:480px){.pf-guide{align-items:flex-start;flex-direction:column;gap:3px}.pf-head .spec-lock{min-width:112px}.pf-suggest{grid-template-columns:repeat(5,1fr)}.pf-pana-list{grid-template-columns:repeat(4,1fr)}}


/* APK: decorative infinite animations off (ticker, glows, pulses, shimmer).
   One-shot entrances still run once; loops are what clog weak phone GPUs and
   make taps feel late. Scoped to .is-apk so the website keeps its motion. */

/* ---- Add Money Quick Amount Buttons ---- */
.quick-amt-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 8px 0 12px;
}
.quick-amt {
  flex: 1;
  min-width: 60px;
  padding: 10px 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition:transform 180ms cubic-bezier(.22,1,.36,1),opacity 180ms ease,background-color 180ms ease,border-color 180ms ease;
}
.quick-amt:hover {
  border-color: var(--gold);
  background: rgba(185, 144, 82, 0.1);
}
.quick-amt:active {
  transform: scale(0.95);
}
.upi-copy-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0;
}
.upi-copy-row .upi-id {
  flex: 1;
  margin: 0;
}
.upi-copy-row .btn-sm {
  padding: 6px 12px;
  font-size: 0.75rem;
}

/* ---- PhonePe/Paytm Payment Buttons ---- */
.pay-apps-row {
  display: flex;
  gap: 10px;
  margin: 12px 0;
}
.pay-app-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 10px;
  border: none;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition:transform 180ms cubic-bezier(.22,1,.36,1),opacity 180ms ease,background-color 180ms ease,border-color 180ms ease;
}
.pay-app-btn:active {
  transform: scale(0.95);
}
.pay-phonepe {
  background: linear-gradient(135deg, #5f259f, #7b3fbf);
  color: white;
}
.pay-paytm {
  background: linear-gradient(135deg, #00b9f1, #0090c5);
  color: white;
}
.pay-app-icon {
  font-size: 1.8rem;
}
.upi-qr-container {
  text-align: center;
  margin: 12px 0;
}
.upi-qr-container .qr-img {
  max-width: 180px;
  height: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
}


/* ================= TAP LATENCY (Android WebView) ================= */

/* touch-action: manipulation tells the compositor the element never needs a
   double-tap-zoom gesture, so the browser can dispatch the tap immediately
   instead of waiting out the ~300ms heuristic. Without this every button in
   the app feels "late" even when the JS is instant. Only elements that
   genuinely scroll keep `pan-y` (declared locally above) - this is the
   default for everything else. */
button,
a,
label,
input[type="button"],
input[type="submit"],
input[type="reset"],
[role="button"],
.tap,
.press,
.list-item,
.list-item-premium,
.card,
.card-premium,
.sup-ico-btn,
.sara-tile,
.board-tile,
.chip,
.chip-premium,
.pill,
.btn,
.btn-gold,
.btn-premium,
.nav-item,
.tab,
.topbar-bell,
.icon-btn {
  touch-action: manipulation;
}

/* Kill the 300ms synthetic click delay and the grey flash in one shot. */
button,
a,
label,
[role="button"],
.tap,
.press,
.list-item,
.card,
.card-premium,
.sup-ico-btn,
.sara-tile,
.chip-premium,
.pill,
.btn {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* NOTE: deliberately NO transform/translateZ/will-change on .btn/.tap/.press
   or the card/chip families. Promoting them gives every one of the hundreds of
   matches its own GPU texture, which starves the compositor and makes the whole
   app lag. Tap responsiveness comes from touch-action: manipulation above, not
   from a permanent layer - the browser promotes the element for the duration of
   the :active state on its own. */

/* ================= PERF LAYER (APK/WebView) =================
   Added after profiling: the jitter was NOT "too many animations", it was
   animations on properties that force a full repaint (box-shadow, background,
   filter) plus `transition: all`. Both are fixed above. What remains
   here only promotes the surviving transform/opacity animations onto the GPU
   compositor so they stop competing with the main thread for paint work. */

/* Promote ONLY the continuously-animating surfaces. Keeping this list tiny is
   the whole point: each entry costs a full-size GPU texture, so promoting every
   button/card in the app (as an earlier build did) starved the compositor and
   made taps feel late. These six run forever, so they are the only ones worth
   a permanent layer. */
.home-ticker-inner,
.s5-ticker,
.spinner,
.refresh-logo,
.live-dot,
.sync-dot {
  will-change: transform, opacity;
}

/* Short, interaction-scoped animations must NOT hold a layer - they get one
   for the duration and release it after, otherwise every tap allocates and
   frees a texture. */
.ripple,
.btn-premium:active,
.chip-premium:active,
.sup-ico-btn:active {
  will-change: auto;
}

/* The ticker is the one element that animates continuously for the whole time
   the app is open. Giving it its own layer keeps its frames off the main
   thread instead of re-rasterising the page behind it. */
.home-ticker,
.ticker,
.s5-ticker {
  contain: layout paint;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

/* Glow rings removed: the animated box-shadow keyframes above were already
   converted to opacity/transform, so these pseudo-elements added composited
   boxes for nothing. */

/* Containment is a win on the ticker and a tax everywhere else - it forces
   extra layout passes on sections that already reflow when the route changes. */
.home-ticker,
.s5-ticker,
.sup-agent {
  contain: layout paint;
}

/* Remove the tap-highlight flash, which was adding a synchronous style
   recalculation on every tap in the Android WebView. */
* {
  -webkit-tap-highlight-color: transparent;
}

/* Belt and braces: if a device reports a preference for reduced motion we keep
   the existing accessibility behaviour, but we never re-introduce the
   animation-kill that shipped by accident earlier. */

/* ================= ANIMATION BUDGET (heat) =================
   The single biggest cause of a hot phone is not "too many animations" - it is
   infinite animations that keep running while nothing is watching them. These
   two rules plus the observer in app.js make the page honest about that: an
   animation only costs anything while it is on screen and the app is in front.

   data-anim-off is set by:
     - the shared IntersectionObserver in app.js (element scrolled out of view)
     - the visibilitychange handler (app sent to background)
   Both are additive, so nested/overlapping states behave. */
[data-anim-off] {
  animation-play-state: paused !important;
}

/* Off-screen or backgrounded: stop everything at once. Cheap insurance for the
   case where the observer has not run yet (e.g. right after a route swap). */
html.anim-suspended body *,
html.anim-suspended body *::before,
html.anim-suspended body *::after {
  animation-play-state: paused !important;
}

/* The two tickers are the only things that legitimately run for the entire
   session. Give them a lower frame budget so they cost a fraction of what they
   did - a 22s sweep does not need 60fps to look smooth. */
.home-ticker-inner,
.ticker-inner {
  animation-duration: 44s !important;
  animation-timing-function: linear !important;
}

/* The pay sheet's sheen overlay was inset -40%, i.e. a box three times the
   button in each direction, re-composited every frame x3. Halve it and slow it
   down - on a 3-button sheet the difference is invisible. */
.pay-app-btn::after {
  inset: -12% !important;
  animation-duration: 5.2s !important;
}


/* ============================================================================
   SMOOTHNESS PASS - decorative motion removed (user request: "bs smooth bnao").
   Every animation in this app was already transform/opacity, so on a GPU phone
   they were cheap. On a software-rendered WebView each one still costs a
   rasterisation every frame and keeps the compositor awake - that is the jank.
   Nothing here touches layout, colour, data or behaviour: only motion.
   ========================================================================== */
*, *::before, *::after {
  animation: none !important;
  animation-play-state: paused !important;
}

/* Repaint-heavy transitions (background / colour / border / box-shadow) force a
   paint on every state change; transform/opacity stay on the compositor. */
*, *::before, *::after {
  transition-property: opacity, transform !important;
  transition-duration: 120ms !important;
  transition-timing-function: ease-out !important;
}

/* ============================================================================
   ANIMATION EXCEPTIONS (user request): only these run. All four keyframes are
   transform/opacity-only (compositor), small areas, and status/selection
   indicators - zero paint cost on scroll. Everything else stays killed above.
   NOTE: these class selectors beat the "*" blanket rule because they are more
   specific AND come later. animation-play-state MUST be re-enabled: the blanket
   rule set it to paused.
   ========================================================================== */
/* 1. refresh spinner (manual refresh overlay) + pull-to-refresh spinner */
.refresh-logo {
  animation: refresh-logo 1s ease-in-out infinite !important;
  animation-play-state: running !important;
}
.ptr-spinner {
  animation: ptrSpin 0.9s linear infinite !important;
  animation-play-state: running !important;
}
/* 2. play-screen selection pulse (selected digit / filled key / active mode) */
.pf-digit.selected {
  animation: pulseGold 1.5s ease infinite !important;
  animation-play-state: running !important;
}
.bulk-key.has-val .bulk-key-val {
  animation: pulseGold 1s ease infinite !important;
  animation-play-state: running !important;
}
.bid-mode.on {
  animation: pulseGold 2s ease infinite !important;
  animation-play-state: running !important;
}

/* ============================================================================
   ONE-SHOT ENTRANCES (user request: "nye bhi add kro jis se frk na pde").
   Ye sab ek baar chalke ruk jaate hain (~0.15-0.35s) - continuous cost ZERO.
   Sirf transform/opacity keyframes, sirf user-triggered surfaces (tap ripple,
   modal/sheet open, play-screen build). List rows (.cart-row etc.) jaan-bujh
   ke bahar rakhe hain: wo har sync push pe re-render hote hain, wahan entrance
   replay hoga = flicker. .page-in (route fade) bhi bahar hai: wahi "tap ke
   der se page aata" ki wajah tha.
   ========================================================================== */
/* tap ripple - press feedback */
.ripple:active::after {
  animation: rippleEffect 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards !important;
  animation-play-state: running !important;
}
/* modal / sheet entrances */
.style-backdrop {
  animation: fadeIn 0.15s ease !important;
  animation-play-state: running !important;
}
.style-panel {
  animation: slideDown 0.2s ease !important;
  animation-play-state: running !important;
}
.pay-sheet {
  animation: paySheetIn 0.22s cubic-bezier(0.22, 1, 0.36, 1) both !important;
  animation-play-state: running !important;
}
.sheet-in {
  animation: sheetUp 240ms cubic-bezier(0.22, 0.61, 0.36, 1) both !important;
  animation-play-state: running !important;
}
.fade-out {
  animation: fadeInUp 0.2s ease-in reverse !important;
  animation-play-state: running !important;
}
/* play / bid screen build-up (scale / rise / slide groups) */
.pf-digit, .pf-pana, .jodi-cell, .bulk-key, .bulk-entry, .bid-mode {
  animation: scaleIn 0.2s ease-out both !important;
  animation-play-state: running !important;
}
/* NOTE: .bid-footer is deliberately NOT in this list. It is position:fixed with
   translateX(-50%) centering, and any transform animation would fight that and
   make the submit bar jump sideways (the old .page rule hit the same bug). */
.pf-detail, .spec-row, .sp-fam, .bid-zone, .bid-zone > .card, .bid-mkt, .cart-cols, .bid-modes {
  animation: fadeInUp 0.3s ease-out both !important;
  animation-play-state: running !important;
}
.bid-topbar, .bid-wallet, .bid-balance {
  animation: slideInRight 0.3s ease-out !important;
  animation-play-state: running !important;
}

/* ============================================================================
   IMPACTFUL money actions (user request): solid gradient buttons with icon
   badges. Static styling only - no animation, modest shadow on 2 elements
   (paint-cheap, unlike the old per-tile 16px blurs). Text/hrefs/logic
   untouched - .m-txt carries the same i18n string, links go to the same routes.
   Selectors outrank the old translucent rules by coming later at equal depth.
   ========================================================================== */
/* v280 - MONEY ACTIONS re-styled in-theme (user: "add/withdraw theme k sath
   nahi ja rahe, thoda achha + unique bnao"). ADD = solid metallic-gold coin
   bar with a navy icon coin; WITHDRAW = navy glass twin with gold keyline and
   gold text. Same gold/navy family, two clearly different weights. Static
   gloss gradients only (no animation), one soft drop-shadow each. A trailing
   chevron (pure CSS ::after, margin-left:auto inside flex) signals the tap
   opens a page. Text/hrefs/logic untouched - .m-txt keeps the i18n string. */
.sara-mbtn { position: relative; justify-content: center; gap: 11px; padding: 12px 14px; border-radius: 16px; font-size: 0.8rem; }
.sara-mbtn::after { content: "›"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-weight: 800; font-size: 1.15rem; line-height: 1; opacity: 0.85; }
.sara-mbtn.m-add {
  border: 1.2px solid rgba(255,255,255,0.30);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.20), rgba(255,255,255,0) 26%),
    linear-gradient(135deg, var(--gold-light), var(--gold) 52%, var(--gold3));
  box-shadow: 0 7px 18px rgba(185,144,82,0.35), inset 0 1px 0 rgba(255,255,255,0.38);
}
.sara-mbtn.m-add .m-txt { color: #17110a; letter-spacing: 0.3px; }
.sara-mbtn.m-add::after { color: #17110a; }
.sara-mbtn.m-add .m-ico { background: rgba(13,17,32,0.88); color: #f4e3c2; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14); }
.sara-mbtn.m-withdraw {
  border: 1.4px solid rgba(185,144,82,0.55);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0) 30%),
    linear-gradient(160deg, #16294f, var(--card-solid) 55%, #0a1535);
  box-shadow: 0 7px 18px rgba(5,9,22,0.50), inset 0 1px 0 rgba(255,255,255,0.07);
}
.sara-mbtn.m-withdraw .m-txt { color: var(--gold-light); letter-spacing: 0.3px; }
.sara-mbtn.m-withdraw::after { color: var(--gold-light); }
.sara-mbtn.m-withdraw .m-ico { background: rgba(185,144,82,0.16); color: var(--gold-light); box-shadow: inset 0 0 0 1px rgba(185,144,82,0.35); }
.m-ico { flex: none; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.m-ico svg { width: 20px; height: 20px; display: block; }
.sara-mbtn:active { transform: scale(0.97); }
/* Theme swap: buttons above use the DARK-theme navy/gold vars; the app runs in
   a LIGHT theme too (html[data-theme="light"], orange-family golds + white
   cards), where hardcoded navy read as a muddy silver. ADD keeps the orange
   metallic bar it already earns from the theme vars; WITHDRAW gets a cream
   glass twin (white highlight over soft sand gradients) with a deep-orange
   keyline + text - same family as ADD, clearly the lighter-weight action. */
html[data-theme="light"] .sara-mbtn.m-add { border-color: rgba(255,255,255,0.55); }
html[data-theme="light"] .sara-mbtn.m-withdraw {
  border: 1.4px solid rgba(234,133,40,0.55);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.75), rgba(255,255,255,0) 28%),
    linear-gradient(160deg, #fff3e0, #ffe7c2 55%, #ffd9a0);
  box-shadow: 0 7px 18px rgba(180,100,20,0.16), inset 0 1px 0 rgba(255,255,255,0.80);
}
html[data-theme="light"] .sara-mbtn.m-withdraw .m-txt,
html[data-theme="light"] .sara-mbtn.m-withdraw::after { color: #b45309; }
html[data-theme="light"] .sara-mbtn.m-withdraw .m-ico { background: rgba(234,133,40,0.14); color: #ea580c; box-shadow: inset 0 0 0 1px rgba(234,133,40,0.35); }

/* ============================================================================
   SCROLL SMOOTHNESS PASS (v278)
   1) Long repeating rows skip off-screen painting: history / results / bid
      center rebuilds hundreds of .hist-row nodes and every swipe used to pay
      full layout+paint for rows the eye never sees. content-visibility makes
      each row cheap (`auto` keeps the last measured height, so the scrollbar
      stays honest once rows have been painted once). No markup change.
   ========================================================================== */
.hist-row { content-visibility: auto; contain-intrinsic-size: auto 118px; }

/* ============================================================================
   ROUTE TRANSITION (v278) - fast, zero-reflow, compositor-only.
   Two sibling classes share near-identical keyframes; app.js router
   alternates them on every screen switch so the fade always restarts with NO
   forced synchronous reflow. 140ms, opacity-only. Also masks the
   innerHTML relayout flash right after a switch (the "render issue" feel).
   Placed after the blanket animation kill on purpose: the higher-specificity
   selectors + running play-state bring exactly these two back to life.
   ========================================================================== */
@keyframes routeInA { from { opacity: 0; } to { opacity: 1; } }
@keyframes routeInB { from { opacity: 0.02; } to { opacity: 1; } }
#page.page-in-a { animation: routeInA 140ms ease-out both !important; animation-play-state: running !important; }
#page.page-in-b { animation: routeInB 140ms ease-out both !important; animation-play-state: running !important; }

/* Tactile press on EVERY tappable element, not only .btn ripple carriers.
   opacity rides the global 120ms compositor transition, so press + release
   both feel smooth and no paint is involved. */
button:active, a:active, [role="button"]:active { opacity: 0.8; }

/* ============================================================================
   NOTIFICATION FEED CAPS (user: "notifications me saare option aur market
   name capital mein") - visual casing only, strings untouched. Scoped via the
   .nt-caps wrapper the feed renders, so .mb-pill on other pages
   (my-bids/filters) and any other .notif-txt usage stay untouched.
   ========================================================================== */
.mb-frow.nt-caps .mb-pill { text-transform: uppercase; letter-spacing: 0.4px; }
#notif-list.nt-caps .nt-res-name,
#notif-list.nt-caps .notif-txt { text-transform: uppercase; }

/* ============================================================================
   PLAY ENTRANCE (user: "play option click kre to ek animation ke saath page
   khule, off na lage; smoothness ko affect na kre"). All compositor-only:
   opacity + translate3d, ~220ms, one-shot, no loops, no will-change left
   behind. Chosen per tier by app.js animatePageRoute:
   - .play-rise-a/b  : fade + 14px rise, play screens WITHOUT a fixed
     .bid-footer (strongest cue, masks the big play-page relayout flash)
   - .play-fade-a/b  : 220ms opacity-only for play screens WITH .bid-footer
     (transform on #page would promote it and bounce the pinned submit bar)
   - default screens stay on the plain .page-in-a/b 140ms fade.
   B-for-A alternation lets every re-add restart the animation without a
   stylesheet trick or forced reflow. Added AFTER the blanket animation kill
   with higher-specificity selectors + running play-state, like the other
   exceptions. respects in-file reduced-motion block globally.
   ========================================================================== */
@keyframes playRiseA { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } }
@keyframes playRiseB { from { opacity: 0.02; transform: translate3d(0, 14.5px, 0); } to { opacity: 1; transform: none; } }
@keyframes playFadeA { from { opacity: 0; } to { opacity: 1; } }
@keyframes playFadeB { from { opacity: 0.02; } to { opacity: 1; } }
#page.play-rise-a { animation: playRiseA 220ms cubic-bezier(0.22, 1, 0.36, 1) both !important; animation-play-state: running !important; }
#page.play-rise-b { animation: playRiseB 220ms cubic-bezier(0.22, 1, 0.36, 1) both !important; animation-play-state: running !important; }
#page.play-fade-a { animation: playFadeA 220ms ease-out both !important; animation-play-state: running !important; }
#page.play-fade-b { animation: playFadeB 220ms ease-out both !important; animation-play-state: running !important; }

/* Long list rows (passbook / my bids / history): paint only what is on screen.
   Keeps scroll at 60fps on cheap WebViews with 40+ rows. Layout unchanged. */
.pb-row, .bb-row, .hist-row, .cart-row {
  content-visibility: auto;
  contain-intrinsic-size: auto 96px;
}

/* ============================================================
   HOME HEAD - phone-width adaptive (body/UI only, no logic).
   1) Starline / Jackpot / Gali Disawar: exactly equal columns,
      equal gaps, equal tile height, labels shrink instead of wrap.
   2) Add Money + Withdraw: one row inside one rounded box, each
      label on a single line, icons scale down on narrow screens.
   ============================================================ */
.sara-tiles {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  align-items: stretch;
}
.sara-tile {
  min-width: 0;
  padding: 7px 4px !important;
  justify-content: center;
  gap: 3px;
}
.sara-tile-ico { font-size: 1.05rem; }
.sara-tile-name {
  display: block;
  max-width: 100%;
  font-size: clamp(9.5px, 2.8vw, 12.5px) !important;
  line-height: 1.15;
  letter-spacing: .4px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}
.sara-money {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  align-items: stretch;
  padding: 7px;
  border-radius: 16px;
  background: var(--card-solid, rgba(255,255,255,.04));
  border: 1px solid var(--line, rgba(255,255,255,.12));
}
.sara-mbtn {
  min-width: 0;
  min-height: 46px !important;
  padding: 0 8px !important;
  gap: 8px !important;
  border-radius: 12px !important;
  font-size: clamp(10.5px, 3.1vw, 13px) !important;
  letter-spacing: .3px !important;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(15,23,42,.14) !important;
}
.sara-mbtn .m-ico {
  width: 26px !important;
  height: 26px !important;
  flex: 0 0 auto;
}
.sara-mbtn .m-ico svg { width: 15px !important; height: 15px !important; }
.sara-mbtn .m-txt {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 360px) {
  .sara-tiles { gap: 7px !important; }
  .sara-tile { padding: 6px 3px !important; }
  .sara-tile-name { font-size: 9px !important; }
  .sara-money { gap: 6px !important; padding: 6px; }
  .sara-mbtn { min-height: 42px !important; font-size: 10px !important; gap: 6px !important; }
  .sara-mbtn .m-ico { width: 22px !important; height: 22px !important; }
  .sara-mbtn .m-ico svg { width: 13px !important; height: 13px !important; }
}

/* Home All/Live/Closed chips: remove the extra vertical padding above/below
   (head margin 10px + chips top padding 10px + section bottom 18px stacked up).
   Scoped to the home head only - other s5 sections keep their spacing. */
.home-head .s5-section { margin-bottom: 0; }
.home-head .s5-head { margin-bottom: 3px; }
.cat-chips { padding: 4px 2px 0 !important; }

/* Tile name display font (bundled, OFL license) - presents STARLINE / JACKPOT /
   GALI DISAWAR names with a bold rounded game look. Falls back to Inter. */
@font-face {
  font-family: "Titan One";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/titan-one-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Anton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/anton-latin.woff2") format("woff2");
}
.sara-tile-name {
  font-family: "Anton", "Titan One", "Inter", sans-serif;
  font-weight: 400;
  letter-spacing: 0;
}

/* The Gali Disawar dot glyph renders visually smaller than the star /
   triangle glyphs at the same font size - bump only this icon so all
   three tile icons look equal. */
.sara-tile-galidisawar .sara-tile-ico { font-size: 1.3rem !important; line-height: 1; }

/* ============================================================
   MONEY BUTTONS - soft translucent glass in every theme (no solid fill).
   ADD used a solid metallic bar; WITHDRAW used a solid navy fill that read
   as a dark slab in the blue (night) theme. Now both are tinted glass that
   follows each theme's own color family:
     default dark -> gold/navy glass, light -> orange glass,
     night (blue) -> cyan glass, withdraw keeps its cream twin in light.
   ============================================================ */
.sara-mbtn.m-add {
  border: 1.4px solid rgba(185,144,82,0.55);
  background: rgba(185,144,82,0.10);
  box-shadow: inset 0 0 10px rgba(212,175,55,0.05);
}
.sara-mbtn.m-add .m-txt, .sara-mbtn.m-add::after { color: var(--gold-light); }
.sara-mbtn.m-add .m-ico { background: rgba(185,144,82,0.16); color: var(--gold-light); box-shadow: inset 0 0 0 1px rgba(185,144,82,0.40); }
.sara-mbtn.m-withdraw {
  border: 1.4px solid rgba(127,184,255,0.35);
  background: rgba(127,184,255,0.07);
  box-shadow: inset 0 0 10px rgba(127,184,255,0.05);
}
.sara-mbtn.m-withdraw .m-txt, .sara-mbtn.m-withdraw::after { color: #7fb8ff; }
.sara-mbtn.m-withdraw .m-ico { background: rgba(127,184,255,0.12); color: #7fb8ff; box-shadow: inset 0 0 0 1px rgba(127,184,255,0.30); }

/* light theme: ADD drops the solid orange bar for soft orange glass.
   WITHDRAW keeps its existing cream glass - already the right weight. */
html[data-theme="light"] .sara-mbtn.m-add {
  border: 1.4px solid rgba(234,133,40,0.50);
  background: rgba(234,133,40,0.10);
  box-shadow: inset 0 0 10px rgba(234,133,40,0.05);
}
html[data-theme="light"] .sara-mbtn.m-add .m-txt,
html[data-theme="light"] .sara-mbtn.m-add::after { color: #b45309; }
html[data-theme="light"] .sara-mbtn.m-add .m-ico { background: rgba(234,133,40,0.14); color: #ea580c; box-shadow: inset 0 0 0 1px rgba(234,133,40,0.35); }

/* night (blue) theme: both buttons turn soft cyan glass on white cards */
html[data-theme="night"] .sara-mbtn.m-add,
html[data-theme="night"] .sara-mbtn.m-withdraw {
  border: 1.4px solid rgba(8,145,214,0.38);
  background: rgba(8,145,214,0.07);
  box-shadow: inset 0 0 10px rgba(8,145,214,0.05);
}
html[data-theme="night"] .sara-mbtn.m-add .m-txt,
html[data-theme="night"] .sara-mbtn.m-add::after,
html[data-theme="night"] .sara-mbtn.m-withdraw .m-txt,
html[data-theme="night"] .sara-mbtn.m-withdraw::after { color: #0369a1; }
html[data-theme="night"] .sara-mbtn.m-add .m-ico,
html[data-theme="night"] .sara-mbtn.m-withdraw .m-ico { background: rgba(8,145,214,0.12); color: #0369a1; box-shadow: inset 0 0 0 1px rgba(8,145,214,0.30); }