/* ==========================================================================
   Theme 1 - Modern Midnight Dark & Gold / Emerald Design System
   DPBoss Market
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Outfit:wght@500;600;700;800;900&display=swap');

:root {
  --bg-body: #0a0e1a;
  --bg-page: #0f1527;
  --bg-card: #151d32;
  --bg-card-alt: #1a243e;
  --bg-card-hover: #1f2b4a;
  --bg-glass: rgba(21, 29, 50, 0.85);

  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-card: rgba(255, 255, 255, 0.12);
  --border-gold: rgba(245, 158, 11, 0.45);
  --border-emerald: rgba(16, 185, 129, 0.45);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-card: 0 8px 24px -4px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.06);
  --shadow-glow-gold: 0 0 20px rgba(245, 158, 11, 0.3);
  --shadow-glow-emerald: 0 0 20px rgba(16, 185, 129, 0.3);

  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-muted: #8492a6;
  --text-dark: #0f172a;

  --gold-primary: #f59e0b;
  --gold-light: #fbbf24;
  --gold-dark: #b45309;
  --gold-bg: rgba(245, 158, 11, 0.12);
  --gold-gradient: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);

  --emerald-primary: #10b981;
  --emerald-light: #34d399;
  --emerald-dark: #059669;
  --emerald-bg: rgba(16, 185, 129, 0.14);
  --emerald-gradient: linear-gradient(135deg, #10b981 0%, #059669 100%);

  --ruby-primary: #f43f5e;
  --ruby-dark: #e11d48;
  --ruby-gradient: linear-gradient(135deg, #fb7185 0%, #e11d48 100%);

  --indigo-primary: #6366f1;
  --indigo-dark: #4f46e5;
  --indigo-gradient: linear-gradient(135deg, #6366f1 0%, #4338ca 100%);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 9999px;

  --font-main: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-heading: 'Outfit', 'Plus Jakarta Sans', sans-serif;
}

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

html {
  overflow-x: hidden;
  scroll-behavior: smooth;
  height: 100%;
  background-color: var(--bg-body);
}

body {
  background: var(--bg-body);
  background-image: 
    radial-gradient(at 0% 0%, rgba(99, 102, 241, 0.08) 0px, transparent 50%),
    radial-gradient(at 100% 0%, rgba(245, 158, 11, 0.06) 0px, transparent 50%);
  color: var(--text-primary);
  text-align: center;
  margin: 0;
  padding: 10px 14px;
  scroll-behavior: smooth;
  font-family: var(--font-main);
  font-style: normal !important;
  font-weight: 500;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media only screen and (max-width: 600px) {
  body {
    padding: 6px 8px;
  }
}

.page-wrapper {
  /* max-width: 880px; */
  margin: 0 auto;
  min-height: 85vh;
  position: relative;
}

a {
  color: var(--gold-light);
  text-decoration: none;
  transition: all 0.2s ease;
}

a:hover {
  color: #fff;
  text-decoration: none;
}

p {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.a-us a, .a-us b, .a-us p,
.dis12 h2, .dis12 p,
.qtn14 a, .qtn14 h4, .qtn14 p,
.lst-sec h2, .lst-sec p,
.pow-13 {
  font-style: normal !important;
}

/* ==========================================================================
   Redesigned Luxury Brand Header (.m-icon)
   ========================================================================== */
.m-icon {
  background: linear-gradient(135deg, rgba(22, 31, 54, 0.96) 0%, rgba(15, 23, 42, 0.98) 100%) !important;
  border: 1px solid rgba(245, 158, 11, 0.35) !important;
  border-radius: var(--radius-lg) !important;
  padding: 12px 16px 14px !important;
  margin-bottom: 14px !important;
  box-shadow: var(--shadow-card), 0 0 20px rgba(0, 0, 0, 0.5), 0 0 12px rgba(245, 158, 11, 0.12) !important;
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
}

.m-icon::before {
  content: '' !important;
  position: absolute !important;
  top: 0; left: 0; right: 0;
  height: 3px !important;
  background: var(--gold-gradient) !important;
  z-index: 2 !important;
}

.m-icon::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0; left: 15%; right: 15%;
  height: 1px !important;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.5) 0%, transparent 80%) !important;
  z-index: 2 !important;
}

.m-icon:hover {
  border-color: rgba(245, 158, 11, 0.6) !important;
  box-shadow: var(--shadow-card), 0 0 25px rgba(245, 158, 11, 0.2) !important;
}

/* Top Meta Status Bar */
.m-icon-topbar {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.m-icon-live-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: rgba(16, 185, 129, 0.12) !important;
  border: 1px solid rgba(16, 185, 129, 0.35) !important;
  border-radius: var(--radius-pill) !important;
  padding: 3px 10px !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.8px !important;
  color: #34d399 !important;
  text-transform: uppercase !important;
}

.m-icon-live-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #10b981 !important;
  box-shadow: 0 0 8px #10b981 !important;
  animation: pulse-dot 1.8s infinite ease-in-out !important;
}

.m-icon-date-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: rgba(245, 158, 11, 0.08) !important;
  border: 1px solid rgba(245, 158, 11, 0.25) !important;
  border-radius: var(--radius-pill) !important;
  padding: 3px 10px !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  color: var(--gold-light) !important;
  letter-spacing: 0.4px !important;
}

/* Center Brand Link */
.m-icon-brand-link {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  gap: 8px !important;
  padding: 4px 0 !important;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.m-icon-brand-link:hover {
  transform: scale(1.02) !important;
}

/* Crisp Capsule for the logo image */
.m-icon-logo-capsule {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 6px 18px !important;
  background: #ffffff !important;
  border-radius: var(--radius-pill) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), 0 0 15px rgba(245, 158, 11, 0.25) !important;
  border: 1.5px solid rgba(245, 158, 11, 0.4) !important;
  max-width: 100% !important;
  transition: box-shadow 0.2s ease, border-color 0.2s ease !important;
}

.m-icon-brand-link:hover .m-icon-logo-capsule {
  border-color: var(--gold-primary) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5), 0 0 20px rgba(245, 158, 11, 0.4) !important;
}

.m-icon .logo {
  max-height: 46px !important;
  width: auto !important;
  max-width: 250px !important;
  object-fit: contain !important;
  display: block !important;
}

.m-icon-brand-text {
  font-family: var(--font-heading) !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  letter-spacing: 1px !important;
  background: var(--gold-gradient) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-transform: uppercase !important;
}

.m-icon-tagline {
  font-family: var(--font-heading) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: var(--gold-light) !important;
  opacity: 0.9 !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6) !important;
  margin: 0 !important;
}

@media (max-width: 480px) {
  .m-icon {
    padding: 10px 12px 12px !important;
    gap: 8px !important;
  }
  .m-icon .logo {
    max-height: 38px !important;
    max-width: 200px !important;
  }
  .m-icon-logo-capsule {
    padding: 5px 14px !important;
  }
  .m-icon-brand-text {
    font-size: 18px !important;
  }
  .m-icon-tagline {
    font-size: 10px !important;
    letter-spacing: 0.8px !important;
  }
  .m-icon-topbar {
    padding-bottom: 6px !important;
  }
}

/* ===================================================
   Header Horizontal Auto-Scroll Live Result Ticker
   =================================================== */
.header-live-ticker {
  display: flex !important;
  align-items: center !important;
  background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%) !important;
  border: 1.5px solid rgba(168, 85, 247, 0.4) !important;
  border-radius: var(--radius-lg, 12px) !important;
  margin: 10px 0 14px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45), 0 0 12px rgba(168, 85, 247, 0.18) !important;
  position: relative !important;
}

.ticker-badge {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  padding: 8px 12px !important;
  white-space: nowrap !important;
  z-index: 2 !important;
  box-shadow: 4px 0 12px rgba(0, 0, 0, 0.35) !important;
  flex-shrink: 0 !important;
  font-family: var(--font-heading) !important;
}

.ticker-pulse {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  box-shadow: 0 0 8px #ffffff !important;
  animation: tickerPulse 1.4s ease-in-out infinite !important;
  flex-shrink: 0 !important;
}

@keyframes tickerPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.4);
    opacity: 0.4;
  }
}

.ticker-viewport {
  flex: 1 !important;
  overflow: hidden !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  position: relative !important;
  padding: 6px 0 !important;
  mask-image: linear-gradient(to right, transparent 0%, black 15px, black calc(100% - 15px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 15px, black calc(100% - 15px), transparent 100%);
}

.ticker-viewport::-webkit-scrollbar {
  display: none !important;
}

.header-live-ticker:hover .ticker-autoscroll {
  animation-play-state: paused !important;
}

.ticker-track {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  width: max-content !important;
}

.ticker-autoscroll {
  animation: tickerScroll 28s linear infinite !important;
  will-change: transform !important;
}

@keyframes tickerScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.ticker-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  padding: 4px 10px !important;
  border-radius: 8px !important;
  white-space: nowrap !important;
  transition: all 0.2s ease !important;
}

.ticker-item:hover {
  background: rgba(245, 158, 11, 0.15) !important;
  border-color: rgba(245, 158, 11, 0.45) !important;
  transform: translateY(-1px) !important;
}

.ticker-name {
  font-size: 12px !important;
  font-weight: 800 !important;
  color: #f1f5f9 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
  font-family: var(--font-heading) !important;
}

.ticker-result {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  color: #fef08a !important;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.25) 0%, rgba(217, 119, 6, 0.35) 100%) !important;
  border: 1px solid rgba(245, 158, 11, 0.45) !important;
  padding: 2px 7px !important;
  border-radius: 6px !important;
  letter-spacing: 0.5px !important;
}

.ticker-divider {
  color: rgba(168, 85, 247, 0.4) !important;
  font-size: 9px !important;
  flex-shrink: 0 !important;
}

@media (max-width: 480px) {
  .ticker-badge {
    padding: 7px 9px !important;
    font-size: 10px !important;
    letter-spacing: 0.5px !important;
  }
  .ticker-badge-text {
    font-size: 10px !important;
  }
  .ticker-item {
    padding: 3px 8px !important;
    gap: 6px !important;
  }
  .ticker-name {
    font-size: 11px !important;
  }
  .ticker-result {
    font-size: 11px !important;
    padding: 1px 5px !important;
  }
}

.welcome-banner {
  background: linear-gradient(135deg, #fffdf5 0%, #fef3c7 100%) !important;
  border: 1.5px solid #fde68a !important;
  border-radius: var(--radius-lg) !important;
  padding: 10px 16px !important;
  margin-bottom: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  box-shadow: 0 6px 18px rgba(217, 119, 6, 0.12), var(--shadow-sm) !important;
  text-align: left !important;
  position: relative !important;
  overflow: hidden !important;
}

.welcome-banner::before {
  content: '' !important;
  position: absolute !important;
  top: 0; left: 0; right: 0; height: 3px !important;
  background: var(--gold-gradient) !important;
}

.welcome-banner .welcome-img {
  border-radius: var(--radius-sm);
  border: 1px solid rgba(217, 119, 6, 0.4);
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.welcome-banner .welcome-text {
  flex: 1;
}

.welcome-banner .welcome-badge {
  display: inline-block;
  background: #fde68a !important;
  color: #78350f !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  padding: 2px 9px !important;
  border-radius: var(--radius-pill);
  border: 1px solid #f59e0b !important;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.welcome-banner p {
  color: #78350f !important;
  font-size: 14px;
  font-weight: 700;
  margin: 0;
  line-height: 1.4;
}

.welcome-banner p strong {
  color: #b45309 !important;
  font-weight: 800;
}

@media (max-width: 550px) {
  .welcome-banner {
    padding: 8px 10px !important;
    gap: 10px !important;
  }
  .welcome-banner .welcome-img {
    width: 60px;
    height: auto;
  }
  .welcome-banner p {
    font-size: 12.5px;
  }
}

.text2 {
  background: linear-gradient(135deg, #1e1b4b 0%, #17203d 60%, #0f172a 100%) !important;
  border: 1.5px solid rgba(99, 102, 241, 0.35) !important;
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-card), 0 0 15px rgba(99, 102, 241, 0.12) !important;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.text2::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: var(--indigo-gradient);
}

.text2 h1 {
  font-size: 17px;
  color: var(--gold-light) !important;
  margin-bottom: 6px;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.text2 h2 {
  font-size: 13px;
  color: #a5b4fc !important;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 700;
}

.text2 p {
  font-size: 13px;
  color: #cbd5e1 !important;
  line-height: 1.6;
  margin: 0;
}

/* Modern Lucky Number Section - Light Luxury Golden Pearl */
.lucky-section-card {
  background: linear-gradient(135deg, #fffdf5 0%, #fef9e7 50%, #fef0c7 100%) !important;
  border: 1.5px solid #f59e0b !important;
  border-radius: var(--radius-lg) !important;
  margin-bottom: 14px !important;
  box-shadow: 0 8px 24px rgba(245, 158, 11, 0.18), var(--shadow-sm) !important;
  overflow: hidden !important;
}

.lucky-header {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%) !important;
  padding: 12px 16px !important;
  text-align: center !important;
  border-bottom: 1.5px solid #f59e0b !important;
  position: relative !important;
}

.lucky-badge {
  display: inline-block !important;
  background: #d97706 !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 1px !important;
  padding: 2px 10px !important;
  border-radius: var(--radius-pill) !important;
  margin-bottom: 4px !important;
  box-shadow: 0 2px 6px rgba(217, 119, 6, 0.3) !important;
}

.lucky-header h3 {
  color: #78350f !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: 0.8px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

.lucky-grid {
  display: grid !important;
  grid-template-columns: 1fr 1.3fr !important;
  gap: 12px !important;
  padding: 14px !important;
  background: transparent !important;
}

.lucky-card {
  background: #ffffff !important;
  border: 1.5px solid rgba(245, 158, 11, 0.35) !important;
  border-radius: var(--radius-md) !important;
  padding: 14px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}

.lucky-golden {
  border-color: rgba(245, 158, 11, 0.5) !important;
  text-align: center !important;
  justify-content: center !important;
  align-items: center !important;
}

.lucky-golden::before {
  content: "" !important;
  position: absolute !important;
  top: 0; left: 0; right: 0; height: 3px !important;
  background: var(--gold-gradient) !important;
}

.lucky-final {
  border-color: rgba(16, 185, 129, 0.45) !important;
}

.lucky-final::before {
  content: "" !important;
  position: absolute !important;
  top: 0; left: 0; right: 0; height: 3px !important;
  background: var(--emerald-gradient) !important;
}

.lucky-card-title {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  margin-bottom: 8px !important;
}

.lucky-card-title h4 {
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  margin: 0 !important;
}

.lucky-golden .lucky-card-title h4 {
  color: #92400e !important;
}

.lucky-final .lucky-card-title h4 {
  color: #065f46 !important;
}

.golden-ank-val {
  font-size: 32px !important;
  font-weight: 900 !important;
  color: #b45309 !important;
  font-family: var(--font-heading) !important;
  letter-spacing: 3px !important;
  text-shadow: none !important;
  padding: 8px 14px !important;
  background: #fffbeb !important;
  border: 1.5px dashed #f59e0b !important;
  border-radius: var(--radius-pill) !important;
  margin: 6px 0 !important;
  display: inline-block !important;
}

.lucky-card-hint {
  font-size: 11px !important;
  color: #78350f !important;
  font-weight: 700 !important;
  margin-top: 4px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

@keyframes finalAnkAutoScroll {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-50%);
  }
}

.final-ank-container {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
}

.final-ank-scroll {
  height: 190px !important;
  max-height: 190px !important;
  overflow: hidden !important;
  position: relative !important;
  padding-right: 2px !important;
}

.final-ank-scroll:hover .final-ank-autoscroll {
  animation-play-state: paused !important;
}

.final-ank-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.final-ank-autoscroll {
  animation: finalAnkAutoScroll 18s linear infinite !important;
  will-change: transform !important;
}

.final-ank-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 5px 10px !important;
  background: #fef3c7 !important;
  border: 1px solid #fde68a !important;
  border-radius: var(--radius-sm) !important;
  transition: background 0.15s ease, border-color 0.15s ease !important;
}

.final-ank-item:hover {
  background: #fde68a !important;
  border-color: #f59e0b !important;
}

.final-m-name {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #78350f !important;
  text-transform: uppercase !important;
}

.final-m-badge {
  font-size: 13px !important;
  font-weight: 900 !important;
  color: #fff !important;
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
  padding: 2px 10px !important;
  border-radius: var(--radius-pill) !important;
  box-shadow: 0 2px 6px rgba(217, 119, 6, 0.35) !important;
  font-family: var(--font-heading) !important;
  letter-spacing: 0.5px !important;
}

.final-ank-empty {
  font-size: 12px !important;
  color: #92400e !important;
  font-weight: 700 !important;
  text-align: center !important;
  padding: 20px 0 !important;
}

@media (max-width: 550px) {
  .lucky-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 10px !important;
  }
  .golden-ank-val {
    font-size: 28px !important;
    letter-spacing: 2px !important;
  }
  .final-ank-scroll {
    max-height: 160px !important;
  }
}

.festival_notice {
  background: linear-gradient(135deg, rgba(225, 29, 72, 0.2), rgba(159, 18, 57, 0.3)) !important;
  border: 1px solid rgba(244, 63, 94, 0.5) !important;
  border-radius: var(--radius-lg);
  padding: 14px 18px;
  margin-bottom: 12px;
  color: var(--text-primary);
  box-shadow: 0 0 20px rgba(244, 63, 94, 0.2);
  text-align: center;
}

.notice-badge {
  display: inline-block;
  background: var(--ruby-gradient);
  color: #fff;
  padding: 3px 14px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1px;
  margin-bottom: 8px;
  box-shadow: 0 2px 10px rgba(225, 29, 72, 0.4);
}

.notice-content {
  font-size: 14px;
  line-height: 1.6;
  color: #f1f5f9;
  margin-bottom: 8px;
}

.notice-btn {
  display: inline-block;
  background: var(--emerald-gradient);
  color: #fff !important;
  padding: 8px 24px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.35);
  margin-top: 6px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.notice-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5);
}

/* ==========================================================================
   Festival Notice Image Box (Desktop: 200x200 existing design | Mobile: Fit to Card)
   ========================================================================== */
.image-box-notice {
  text-align: center !important;
  margin-bottom: 12px !important;
  padding: 12px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.image-box-notice img,
.notice-image-fit {
  width: 200px !important;
  height: 200px !important;
  max-width: 100% !important;
  object-fit: contain !important;
  border-radius: var(--radius-md) !important;
  display: inline-block !important;
  vertical-align: middle !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}

@media (max-width: 768px) {
  .image-box-notice {
    padding: 8px !important;
    margin-bottom: 10px !important;
    width: 100% !important;
  }

  .image-box-notice img,
  .notice-image-fit {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
    border-radius: var(--radius-md) !important;
    object-fit: contain !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
  }
}

/* Dedicated Modern Support & Notice Section - Light Mint Emerald */
.support-notice-card {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%) !important;
  border: 1.5px solid #22c55e !important;
  border-radius: var(--radius-lg) !important;
  margin-bottom: 14px !important;
  box-shadow: 0 8px 24px rgba(34, 197, 94, 0.15), var(--shadow-sm) !important;
  overflow: hidden !important;
  position: relative !important;
}

.support-notice-card::before {
  content: "" !important;
  position: absolute !important;
  top: 0; left: 0; right: 0; height: 3px !important;
  background: var(--emerald-gradient) !important;
}

.support-card-header {
  background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%) !important;
  padding: 14px 18px !important;
  text-align: center !important;
  border-bottom: 1.5px solid #22c55e !important;
}

.support-badge-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  background: #16a34a !important;
  border: 1px solid #15803d !important;
  padding: 3px 12px !important;
  border-radius: var(--radius-pill) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 1px !important;
  color: #ffffff !important;
  margin-bottom: 6px !important;
  box-shadow: 0 2px 6px rgba(22, 163, 74, 0.3) !important;
}

.support-pulse-dot {
  width: 8px !important;
  height: 8px !important;
  background-color: #ffffff !important;
  border-radius: 50% !important;
  display: inline-block !important;
  box-shadow: 0 0 0 rgba(255, 255, 255, 0.7) !important;
  animation: pulse-green 1.5s infinite !important;
}

.support-title {
  color: #14532d !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  margin: 0 !important;
  text-shadow: none !important;
}

.support-card-body {
  padding: 16px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.support-notice-text {
  background: #ffffff !important;
  border: 1.5px dashed #16a34a !important;
  border-radius: var(--radius-md) !important;
  padding: 14px 16px !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  box-shadow: 0 2px 8px rgba(22, 163, 74, 0.08) !important;
  color: #064e3b !important;
}

.support-notice-icon {
  font-size: 22px !important;
  flex-shrink: 0 !important;
  margin-top: 2px !important;
}

.support-notice-message {
  font-size: 13.5px !important;
  line-height: 1.65 !important;
  color: #064e3b !important;
  font-weight: 700 !important;
  flex: 1 !important;
  word-break: break-word !important;
}

.support-notice-text p,
.support-notice-text span,
.support-notice-text div,
.support-notice-text font,
.support-notice-text strong,
.support-notice-text b,
.support-notice-message p,
.support-notice-message span,
.support-notice-message div,
.support-notice-message font,
.support-notice-message strong,
.support-notice-message b {
  color: #064e3b !important;
  font-weight: 700 !important;
}

.support-notice-message p {
  margin-bottom: 6px !important;
  line-height: 1.65 !important;
}

.support-notice-message p:last-child {
  margin-bottom: 0 !important;
}

.support-notice-message a {
  color: #15803d !important;
  text-decoration: underline !important;
  font-weight: 800 !important;
}

.support-action-box {
  background: #ffffff !important;
  border: 1px solid #bbf7d0 !important;
  border-radius: var(--radius-md) !important;
  padding: 12px 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  flex-wrap: wrap !important;
}

.support-info-col {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.support-label {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #15803d !important;
  letter-spacing: 0.3px !important;
}

.support-sublabel {
  font-size: 12px !important;
  color: #166534 !important;
  font-weight: 600 !important;
}

.support-buttons-group {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
}

.support-email-row {
  display: flex !important;
  align-items: center !important;
  width: auto !important;
  flex-shrink: 0 !important;
}

.support-chat-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
  width: auto !important;
  flex-shrink: 0 !important;
}

.support-email-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(180deg, #d77507 0%, #cf6d07 100%) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 12.5px !important;
  letter-spacing: 0.3px !important;
  padding: 8px 18px !important;
  border-radius: var(--radius-pill) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  box-shadow: 0 2px 8px rgba(215, 117, 7, 0.35) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease !important;
}

.support-email-pill:hover {
  background: linear-gradient(180deg, #e08212 0%, #d87607 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(215, 117, 7, 0.5) !important;
  transform: translateY(-2px) !important;
}

.support-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 8px 16px !important;
  border-radius: var(--radius-pill) !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.3px !important;
  text-decoration: none !important;
  color: #ffffff !important;
  white-space: nowrap !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
}

.support-btn:hover {
  transform: translateY(-2px) !important;
  color: #ffffff !important;
}

.support-whatsapp-btn {
  background: linear-gradient(135deg, #25d366 0%, #128c7e 100%) !important;
  border: 1px solid #22c55e !important;
  box-shadow: 0 3px 10px rgba(37, 211, 102, 0.35) !important;
}

.support-whatsapp-btn:hover {
  box-shadow: 0 5px 15px rgba(37, 211, 102, 0.5) !important;
}

.support-telegram-btn {
  background: linear-gradient(135deg, #0088cc 0%, #00a8e8 100%) !important;
  border: 1px solid #0099e6 !important;
  box-shadow: 0 3px 10px rgba(0, 136, 204, 0.35) !important;
}

.support-telegram-btn:hover {
  box-shadow: 0 5px 15px rgba(0, 136, 204, 0.5) !important;
}

.support-email-btn {
  background: linear-gradient(135deg, #15803d 0%, #16a34a 100%) !important;
  border: 1px solid #16a34a !important;
  box-shadow: 0 3px 10px rgba(22, 163, 74, 0.35) !important;
}

.support-email-btn:hover {
  box-shadow: 0 5px 15px rgba(22, 163, 74, 0.5) !important;
}

.support-btn-svg {
  display: inline-block !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
}

.support-mail-icon {
  font-size: 15px !important;
  line-height: 1 !important;
}

@media (max-width: 768px) {
  .support-card-body {
    padding: 12px 10px !important;
  }
  .support-action-box {
    flex-direction: column !important;
    text-align: center !important;
    align-items: center !important;
    gap: 12px !important;
  }
  .support-info-col {
    align-items: center !important;
  }
  .support-buttons-group {
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    gap: 8px !important;
  }
  .support-chat-row {
    order: 1 !important;
    justify-content: center !important;
    width: 100% !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
  }
  .support-btn {
    flex: 1 1 50% !important;
    min-width: 0 !important;
    padding: 8px 10px !important;
    font-size: 12px !important;
  }
  .support-email-row {
    order: 2 !important;
    justify-content: center !important;
    width: 100% !important;
  }
  .support-email-pill {
    width: 100% !important;
    max-width: 100% !important;
    padding: 8px 14px !important;
    font-size: 12.5px !important;
  }
  .support-title {
    font-size: 15px !important;
  }
}

.daily-charts-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-lg);
  padding: 14px 20px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-card), 0 0 15px rgba(245, 158, 11, 0.15);
  transition: all 0.25s ease;
  text-decoration: none;
}

.daily-charts-cta:hover {
  transform: translateY(-2px);
  border-color: var(--gold-light);
  box-shadow: var(--shadow-card), var(--shadow-glow-gold);
}

.daily-charts-cta span {
  font-size: 18px;
  font-weight: 800;
  color: var(--gold-light);
  letter-spacing: 0.5px;
}

.daily-charts-cta small {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* Modern Redesigned LIVE RESULT Section - Deep Obsidian Emerald */
.live-section-card {
  background: linear-gradient(135deg, #031c13 0%, #081626 50%, #041410 100%) !important;
  border: 1.5px solid rgba(16, 185, 129, 0.45) !important;
  border-radius: var(--radius-lg) !important;
  margin-bottom: 14px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 24px rgba(16, 185, 129, 0.18) !important;
  overflow: hidden !important;
}

.live-header {
  background: linear-gradient(135deg, #064e3b 0%, #047857 50%, #064e3b 100%) !important;
  padding: 14px 16px !important;
  text-align: center !important;
  border-bottom: 1px solid rgba(52, 211, 153, 0.3) !important;
  position: relative !important;
}

.live-header-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  background: rgba(0, 0, 0, 0.35) !important;
  border: 1px solid rgba(52, 211, 153, 0.4) !important;
  padding: 3px 12px !important;
  border-radius: var(--radius-pill) !important;
  margin-bottom: 6px !important;
}

.live-pulse {
  width: 8px !important;
  height: 8px !important;
  background-color: #34d399 !important;
  border-radius: 50% !important;
  display: inline-block !important;
  box-shadow: 0 0 0 rgba(52, 211, 153, 0.7) !important;
  animation: pulse-green 1.5s infinite !important;
}

@keyframes pulse-green {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}

.live-badge-text {
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 1px !important;
  color: #34d399 !important;
}

.live-header h3 {
  color: #fff !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  letter-spacing: 1.5px !important;
  margin: 0 !important;
  padding: 0 !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6) !important;
}

.live-tagline-sub {
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-weight: 600 !important;
  margin: 4px 0 0 !important;
  letter-spacing: 0.5px !important;
}

.live-market-list {
  padding: 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  background: var(--bg-card) !important;
}

.live-card-item {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(30, 41, 59, 0.9) 100%) !important;
  border: 1px solid var(--border-card) !important;
  border-radius: var(--radius-md) !important;
  padding: 14px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), var(--shadow-card) !important;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.live-card-item::before {
  content: "" !important;
  position: absolute !important;
  top: 0; left: 0; right: 0; height: 3px !important;
  background: var(--emerald-gradient) !important;
}

.live-card-item:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(16, 185, 129, 0.5) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5), 0 0 15px rgba(16, 185, 129, 0.15) !important;
}

.live-card-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  padding-bottom: 8px !important;
}

.live-market-name-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.live-indicator-dot {
  width: 8px !important;
  height: 8px !important;
  background-color: var(--emerald-light) !important;
  border-radius: 50% !important;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.8) !important;
}

.live-market-name {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: var(--gold-light) !important;
  letter-spacing: 0.5px !important;
  margin: 0 !important;
  text-transform: uppercase !important;
}

.btn-refresh-live {
  background: linear-gradient(135deg, #1e1b4b 0%, #3730a3 100%) !important;
  border: 1px solid rgba(99, 102, 241, 0.5) !important;
  color: #fff !important;
  padding: 4px 14px !important;
  border-radius: var(--radius-pill) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
  transition: all 0.2s ease !important;
}

.btn-refresh-live:hover {
  background: linear-gradient(135deg, #312e81 0%, #4338ca 100%) !important;
  border-color: rgba(99, 102, 241, 0.8) !important;
  transform: translateY(-1px) scale(1.02) !important;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4) !important;
}

.live-result-display {
  text-align: center !important;
  padding: 6px 0 !important;
}

.live-digits {
  font-size: 28px !important;
  font-weight: 900 !important;
  color: #fff !important;
  letter-spacing: 3px !important;
  font-family: var(--font-heading) !important;
  text-shadow: 0 0 16px rgba(16, 185, 129, 0.65), 0 2px 4px rgba(0, 0, 0, 0.5) !important;
  display: inline-block !important;
  background: rgba(16, 185, 129, 0.08) !important;
  padding: 6px 20px !important;
  border-radius: var(--radius-pill) !important;
  border: 1px solid rgba(16, 185, 129, 0.35) !important;
}

.live-loading {
  font-size: 18px !important;
  color: var(--gold-light) !important;
  letter-spacing: 1px !important;
}

.live-pass-badge {
  background: rgba(16, 185, 129, 0.12) !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
  color: var(--emerald-light) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 5px 12px !important;
  border-radius: var(--radius-sm) !important;
  text-align: center !important;
}

.live-fast-badge {
  background: rgba(245, 158, 11, 0.1) !important;
  border: 1px dashed rgba(245, 158, 11, 0.4) !important;
  color: var(--gold-light) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  padding: 4px 12px !important;
  border-radius: var(--radius-pill) !important;
  text-align: center !important;
  letter-spacing: 0.5px !important;
}

@media (max-width: 550px) {
  .live-market-list {
    padding: 10px 8px !important;
    gap: 10px !important;
  }
  .live-card-item {
    padding: 12px 10px !important;
  }
  .live-digits {
    font-size: 22px !important;
    letter-spacing: 2px !important;
    padding: 5px 14px !important;
  }
  .live-market-name {
    font-size: 18px !important;
  }
}

.text3 {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  margin-bottom: 12px;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.6;
  text-align: center;
  box-shadow: var(--shadow-sm);
}

/* Modern High-Performance Market Cards & Header */
.market-section-header {
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #1e1b4b 100%) !important;
  border: 1px solid rgba(245, 158, 11, 0.35) !important;
  border-radius: var(--radius-lg) !important;
  padding: 16px 20px !important;
  margin-bottom: 14px !important;
  text-align: center !important;
  box-shadow: var(--shadow-card), 0 0 20px rgba(245, 158, 11, 0.12) !important;
  position: relative !important;
  overflow: hidden !important;
}

.market-section-header::before {
  content: "" !important;
  position: absolute !important;
  top: 0; left: 0; right: 0; height: 3px !important;
  background: var(--gold-gradient) !important;
}

.msh-badge {
  display: inline-block !important;
  background: var(--gold-gradient) !important;
  color: var(--text-dark) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 1px !important;
  padding: 3px 12px !important;
  border-radius: var(--radius-pill) !important;
  margin-bottom: 6px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
}

.msh-title {
  color: #fff !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  letter-spacing: 0.8px !important;
  margin: 0 0 4px !important;
  text-transform: uppercase !important;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5) !important;
}

.msh-sub {
  font-size: 11px !important;
  color: var(--gold-light) !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  display: block !important;
}

/* ==========================================================================
   Market Block Separation System (Theme 1)
   ========================================================================== */
.market-block-section {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.88) 0%, rgba(10, 15, 30, 0.92) 100%) !important;
  border: 1.5px solid rgba(245, 158, 11, 0.35) !important;
  border-radius: var(--radius-lg) !important;
  padding: 14px 14px 16px !important;
  margin-bottom: 10px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  position: relative !important;
  overflow: hidden !important;
}

.market-block-section::before {
  content: "" !important;
  position: absolute !important;
  top: 0; left: 0; right: 0; height: 3px !important;
  background: linear-gradient(90deg, #f59e0b, #fbbf24, #f59e0b) !important;
}

/* Block 1: Gold / Amber */
.market-block-section.block-1 {
  border-color: rgba(245, 158, 11, 0.4) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 15px rgba(245, 158, 11, 0.08) !important;
}
.market-block-section.block-1::before {
  background: linear-gradient(90deg, #f59e0b, #fbbf24, #f59e0b) !important;
}
.market-block-section.block-1 .market-block-badge {
  background: linear-gradient(135deg, #f59e0b, #fbbf24) !important;
  color: #1a0f00 !important;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4) !important;
}
.market-block-section.block-1 .market-block-count {
  background: rgba(245, 158, 11, 0.15) !important;
  color: #fcd34d !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
}

/* Block 2: Sapphire / Sky Blue */
.market-block-section.block-2 {
  background: linear-gradient(180deg, rgba(8, 28, 48, 0.88) 0%, rgba(5, 18, 32, 0.92) 100%) !important;
  border-color: rgba(14, 165, 233, 0.45) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 18px rgba(14, 165, 233, 0.1) !important;
}
.market-block-section.block-2::before {
  background: linear-gradient(90deg, #0ea5e9, #38bdf8, #0ea5e9) !important;
}
.market-block-section.block-2 .market-block-badge {
  background: linear-gradient(135deg, #0ea5e9, #38bdf8) !important;
  color: #031525 !important;
  box-shadow: 0 2px 8px rgba(14, 165, 233, 0.4) !important;
}
.market-block-section.block-2 .market-block-title {
  color: #bae6fd !important;
}
.market-block-section.block-2 .market-block-count {
  background: rgba(14, 165, 233, 0.15) !important;
  color: #7dd3fc !important;
  border: 1px solid rgba(14, 165, 233, 0.3) !important;
}

/* Block 3: Emerald / Mint Green */
.market-block-section.block-3 {
  background: linear-gradient(180deg, rgba(6, 40, 25, 0.88) 0%, rgba(4, 25, 16, 0.92) 100%) !important;
  border-color: rgba(16, 185, 129, 0.45) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 18px rgba(16, 185, 129, 0.1) !important;
}
.market-block-section.block-3::before {
  background: linear-gradient(90deg, #10b981, #34d399, #10b981) !important;
}
.market-block-section.block-3 .market-block-badge {
  background: linear-gradient(135deg, #10b981, #34d399) !important;
  color: #022013 !important;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4) !important;
}
.market-block-section.block-3 .market-block-title {
  color: #a7f3d0 !important;
}
.market-block-section.block-3 .market-block-count {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #6ee7b7 !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
}

/* Block 4: Purple / Amethyst */
.market-block-section.block-4 {
  background: linear-gradient(180deg, rgba(35, 15, 55, 0.88) 0%, rgba(20, 8, 35, 0.92) 100%) !important;
  border-color: rgba(168, 85, 247, 0.45) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 18px rgba(168, 85, 247, 0.1) !important;
}
.market-block-section.block-4::before {
  background: linear-gradient(90deg, #a855f7, #c084fc, #a855f7) !important;
}
.market-block-section.block-4 .market-block-badge {
  background: linear-gradient(135deg, #a855f7, #c084fc) !important;
  color: #1a052e !important;
  box-shadow: 0 2px 8px rgba(168, 85, 247, 0.4) !important;
}
.market-block-section.block-4 .market-block-title {
  color: #e9d5ff !important;
}
.market-block-section.block-4 .market-block-count {
  background: rgba(168, 85, 247, 0.15) !important;
  color: #d8b4fe !important;
  border: 1px solid rgba(168, 85, 247, 0.3) !important;
}

/* Block Header */
.market-block-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 4px 6px 12px !important;
  margin-bottom: 12px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  gap: 10px !important;
}

.mbh-left {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

.market-block-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: linear-gradient(135deg, #f59e0b, #fbbf24) !important;
  color: #1a0f00 !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 1px !important;
  padding: 4px 12px !important;
  border-radius: var(--radius-pill) !important;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4) !important;
  text-transform: uppercase !important;
}

.market-block-title {
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.8px !important;
  color: #e2e8f0 !important;
  text-transform: uppercase !important;
}

.market-block-count {
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  background: rgba(245, 158, 11, 0.15) !important;
  color: #fcd34d !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
  padding: 3px 10px !important;
  border-radius: var(--radius-pill) !important;
  white-space: nowrap !important;
}

.market-cards-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin-bottom: 0 !important;
}

@media (max-width: 480px) {
  .market-block-section {
    padding: 10px 8px 12px !important;
    margin-bottom: 10px !important;
    border-radius: var(--radius-md) !important;
  }
  .market-block-header {
    padding: 2px 4px 10px !important;
    margin-bottom: 10px !important;
  }
  .market-block-badge {
    font-size: 10px !important;
    padding: 3px 9px !important;
  }
  .market-block-title {
    font-size: 11px !important;
  }
  .market-block-count {
    font-size: 10px !important;
    padding: 2px 8px !important;
  }
}

.dp-market-card {
  background: rgb(254 244 203);
  border: 1px solid var(--border-card) !important;
  border-radius: var(--radius-md) !important;
  padding: 16px 20px !important;
  display: grid !important;
  grid-template-columns: 85px 1fr 85px !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  position: relative !important;
  overflow: hidden !important;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
  box-sizing: border-box !important;
}

/* .dp-market-card::before {
  content: "" !important;
  position: absolute !important;
  top: 0; left: 0; right: 0; height: 3px !important;
  background: var(--gold-gradient) !important;
} */

.dp-market-card:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(245, 158, 11, 0.45) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 20px rgba(245, 158, 11, 0.15) !important;
}

.dp-card-center {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 4px !important;
}

.dp-market-title {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #ba5908 !important;
  letter-spacing: 0.8px !important;
  margin: 0 !important;
  text-transform: uppercase !important;
  /* text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6) !important; */
}

.dp-market-digits {
  font-size: 26px !important;
  font-weight: 900 !important;
  color: #fff !important;
  letter-spacing: 2px !important;
  font-family: var(--font-heading) !important;
  /* text-shadow: 0 0 16px rgba(16, 185, 129, 0.7), 0 2px 4px rgba(0, 0, 0, 0.6) !important; */
  padding: 3px 18px !important;
  background: rgb(197 100 7) !important;
  border-radius: var(--radius-pill) !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
  margin: 2px 0 !important;
}

.dp-market-time {
  font-size: 12px !important;
  color: #000000 !important;
  font-weight: 600 !important;
  letter-spacing: 0.4px !important;
}

.btn-side-action {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.8px !important;
  padding: 8px 14px !important;
  border-radius: var(--radius-pill) !important;
  color: #fff !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  text-align: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.btn-jodi {
  background: #ab00ff !important;
  border: 1px solid rgba(99, 102, 241, 0.5) !important;
}

.btn-jodi:hover {
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.7) !important;
  transform: translateY(-2px) scale(1.04) !important;
}

.btn-panel {
  background: #ff0000 !important;
  border: 1px solid rgba(244, 63, 94, 0.5) !important;
}

.btn-panel:hover {
  box-shadow: 0 4px 14px rgba(244, 63, 94, 0.7) !important;
  transform: translateY(-2px) scale(1.04) !important;
}

@media (max-width: 550px) {
  .dp-market-card {
    padding: 14px 12px !important;
    grid-template-columns: 75px 1fr 75px !important;
    gap: 10px !important;
  }
  .dp-market-title {
    font-size: 15px !important;
  }
  .dp-market-digits {
    font-size: 22px !important;
    letter-spacing: 1.5px !important;
    padding: 2px 12px !important;
  }
  .btn-side-action {
    font-size: 11px !important;
    padding: 7px 8px !important;
  }
  .msh-title {
    font-size: 15px !important;
  }
}

.eml-us {
  background: linear-gradient(135deg, #fffdf5 0%, #fef3c7 100%) !important;
  border: 1.5px solid #f59e0b !important;
  border-radius: var(--radius-lg);
  padding: 14px 18px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  box-shadow: 0 6px 18px rgba(245, 158, 11, 0.15), var(--shadow-sm);
  position: relative;
  overflow: hidden;
}

.eml-us::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: var(--gold-gradient);
}

.eml-us p {
  font-size: 15px;
  font-weight: 800;
  color: #78350f !important;
  margin: 0;
}

.eml-us a {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
  color: #ffffff !important;
  font-weight: 800;
  font-size: 14px;
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  box-shadow: 0 4px 12px rgba(217, 119, 6, 0.35);
  border: none;
  display: inline-block;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.eml-us a:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(217, 119, 6, 0.55);
}

@media (max-width: 550px) {
  .eml-us {
    flex-direction: column;
    gap: 8px;
  }
}

.pricing-section {
  max-width: 100%;
  margin: 0 auto 16px;
}

.pricing-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 14px !important;
}

/* When total plan count is odd, make the last card span full width */
.pricing-grid > .pricing-card:last-child:nth-child(odd) {
  grid-column: 1 / -1 !important;
}

@media (max-width: 550px) {
  .pricing-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
}

.pricing-card {
  background: linear-gradient(135deg, rgba(21, 29, 50, 0.95), rgba(26, 36, 62, 0.95)) !important;
  border: 1px solid var(--border-card) !important;
  border-radius: var(--radius-lg);
  padding: 20px 16px;
  text-align: center;
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.pricing-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--gold-gradient);
}

.pricing-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-gold) !important;
  box-shadow: var(--shadow-card), var(--shadow-glow-gold);
}

.plan-name {
  font-size: 18px;
  font-weight: 800;
  color: var(--gold-light);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.plan-price {
  font-size: 30px;
  font-weight: 900;
  color: #fff;
  margin-bottom: 12px;
  font-family: var(--font-heading);
}

.plan-days {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 600;
}

.plan-features {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  text-align: left;
}

.plan-features li {
  font-size: 13px;
  color: var(--text-secondary);
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  gap: 8px;
}

.plan-features li::before {
  content: '✓';
  color: var(--emerald-light);
  font-weight: 800;
}

.pricing-btn {
  display: block;
  width: 100%;
  padding: 10px 16px;
  font-size: 15px;
  font-weight: 800;
  border-radius: var(--radius-pill);
  background: var(--gold-gradient);
  color: var(--text-dark) !important;
  text-align: center;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35);
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pricing-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.55);
}

.mr-sl {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  margin-bottom: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.mr-sl h3 {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
  color: var(--gold-light) !important;
  padding: 10px 14px;
  font-size: 17px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 !important;
  border-bottom: 1px solid var(--border-card);
  border-radius: 0 !important;
}

.mr-sl h3 a {
  background: var(--gold-gradient) !important;
  color: var(--text-dark) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  padding: 4px 12px !important;
  border-radius: var(--radius-pill) !important;
  border: none !important;
}

/* Roulette & Starline Chakkar Animation */
@keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.roulette-container {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 24px 12px !important;
  border-bottom: 2px solid rgba(244, 63, 94, 0.4) !important;
  overflow: hidden !important;
  min-height: 290px !important;
  box-sizing: border-box !important;
  background: radial-gradient(circle at center, rgba(159, 18, 57, 0.45) 0%, rgba(15, 23, 42, 0.98) 75%) !important;
}

.roulette-container .imgrotate,
.roulette-container .wheel-image,
.imgrotate,
.wheel-image {
  width: 270px !important;
  height: 270px !important;
  max-width: 82vw !important;
  max-height: 82vw !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  border: 4px solid rgba(245, 158, 11, 0.35) !important;
  outline: 2px solid rgba(0, 0, 0, 0.6) !important;
  position: relative !important;
  display: block !important;
  margin: 0 auto !important;
  animation: rotating 7s linear infinite !important;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.8), 0 0 20px rgba(245, 158, 11, 0.25) !important;
}

.roulette-container .roulette-gif {
  max-width: 82vw !important;
  width: 270px !important;
  height: 270px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block !important;
  margin: 0 auto !important;
}

.roulette-container .result-box,
.result-box {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 10 !important;
  background: linear-gradient(135deg, #090d16 0%, #151d32 100%) !important;
  border: 2.5px solid var(--gold-light) !important;
  border-radius: 50px !important;
  padding: 8px 24px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.85), 0 0 15px rgba(245, 158, 11, 0.5) !important;
  white-space: nowrap !important;
  pointer-events: none !important;
}

.roulette-container .result-text,
.result-text {
  font-size: 24px !important;
  font-weight: 900 !important;
  color: var(--gold-light) !important;
  font-family: var(--font-heading) !important;
  letter-spacing: 2px !important;
  display: block !important;
  text-align: center !important;
  text-shadow: 0 0 10px rgba(245, 158, 11, 0.6) !important;
  line-height: 1.2 !important;
}

@media (max-width: 550px) {
  .roulette-container {
    min-height: 345px !important;
    padding: 12px 6px !important;
  }
  .roulette-container .imgrotate,
  .roulette-container .wheel-image,
  .imgrotate,
  .wheel-image {
    width: 335px !important;
    height: 335px !important;
  }
  .roulette-container .roulette-gif {
    width: 335px !important;
    height: 335px !important;
  }
  .roulette-container .result-text,
  .result-text {
    font-size: 24px !important;
    letter-spacing: 1.5px !important;
  }
  .roulette-container .result-box,
  .result-box {
    padding: 7px 20px !important;
  }
}

.my-table table {
  width: 100%;
  border-collapse: collapse;
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important;
  margin: 0 !important;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.my-table thead tr {
  background: #1e293b !important;
}

.my-table th {
  padding: 10px 10px;
  font-size: 13px;
  font-weight: 800;
  color: #fbbf24 !important;
  border: 1px solid #334155 !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.my-table td {
  padding: 9px 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: #0f172a !important;
  border: 1px solid #e2e8f0 !important;
}

.my-table tbody tr:nth-child(even) {
  background: #f8fafc !important;
}

.my-table tbody tr:hover {
  background: #fef3c7 !important;
}

.sky-23 {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-card) !important;
  border-radius: var(--radius-lg) !important;
  margin-bottom: 14px;
  box-shadow: var(--shadow-card) !important;
  overflow: hidden;
  outline: none !important;
}

.sky-23 h4 {
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%) !important;
  color: #fff !important;
  padding: 10px 14px !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin: 0;
  border-radius: 0 !important;
  clip-path: none !important;
  border-bottom: 1px solid var(--border-subtle);
  text-align: center !important;
}

.sky-23 a {
  display: block;
  padding: 11px 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary) !important;
  background-image: none !important;
  -webkit-text-fill-color: initial !important;
  animation: none !important;
  border-bottom: 1px solid var(--border-subtle);
  transition: all 0.2s ease;
  text-align: center !important;
  position: relative;
}

.sky-23 a::after {
  content: none !important;
  display: none !important;
}

.sky-23 a:hover {
  background: rgba(245, 158, 11, 0.08);
  color: var(--gold-light) !important;
}

.sky-23 a:last-child {
  border-bottom: none;
}

.aaj-pass {
  background: linear-gradient(135deg, #fffdf0 0%, #fef9c3 100%) !important;
  border: 1.5px solid #eab308 !important;
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  margin-bottom: 14px;
  box-shadow: 0 8px 24px rgba(234, 179, 8, 0.15), var(--shadow-sm);
  position: relative;
  overflow: hidden;
}

.aaj-pass::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: var(--gold-gradient);
}

.aaj-pass .hd1 {
  background: linear-gradient(135deg, #15803d 0%, #16a34a 100%) !important;
  color: #ffffff !important;
  padding: 4px 14px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 900;
  display: inline-block;
  margin-right: 8px;
  box-shadow: 0 2px 6px rgba(21, 128, 61, 0.3);
}

.aaj-pass .hd2 {
  font-size: 13.5px;
  font-weight: 800;
  color: #854d0e !important;
}

.aj-pass-txt {
  background: #ffffff !important;
  border: 1.5px solid #fde047 !important;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-top: 10px;
  font-size: 14px;
  font-weight: 700;
  color: #713f12 !important;
  text-align: left;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* ==========================================================================
   Modern Luxury Weekly Patti, Line & Jodi Section (.sun-col)
   ========================================================================== */
.sun-col {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
  margin-bottom: 20px !important;
  align-items: stretch !important;
}

@media (max-width: 992px) {
  .sun-col {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
    gap: 14px !important;
  }
}

@media (max-width: 600px) {
  .sun-col {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

.weekly-card {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.96) 0%, rgba(30, 41, 59, 0.96) 100%) !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-card), 0 0 20px rgba(0, 0, 0, 0.4) !important;
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.weekly-card:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(245, 158, 11, 0.55) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7), 0 0 24px rgba(245, 158, 11, 0.15) !important;
}

.weekly-card::before {
  content: "" !important;
  position: absolute !important;
  top: 0; left: 0; right: 0; height: 3px !important;
  background: var(--gold-gradient) !important;
  z-index: 1 !important;
}

.weekly-card.card-patti {
  background: linear-gradient(135deg, #1c1303 0%, #2d1d05 100%) !important;
  border-color: rgba(245, 158, 11, 0.45) !important;
}

.weekly-card.card-patti .weekly-card-header {
  background: linear-gradient(135deg, #451a03 0%, #291102 100%) !important;
  border-bottom-color: rgba(245, 158, 11, 0.3) !important;
}

.weekly-card.card-patti .weekly-row {
  background: rgba(245, 158, 11, 0.07) !important;
  border-color: rgba(245, 158, 11, 0.18) !important;
}

.weekly-card.card-patti .weekly-row-val {
  color: #fef08a !important;
}

.weekly-card.card-line {
  background: linear-gradient(135deg, #021a12 0%, #063625 100%) !important;
  border-color: rgba(16, 185, 129, 0.45) !important;
}

.weekly-card.card-line::before {
  background: var(--emerald-gradient) !important;
}

.weekly-card.card-line .weekly-card-header {
  background: linear-gradient(135deg, #022c22 0%, #011d16 100%) !important;
  border-bottom-color: rgba(16, 185, 129, 0.3) !important;
}

.weekly-card.card-line .weekly-row {
  background: rgba(16, 185, 129, 0.07) !important;
  border-color: rgba(16, 185, 129, 0.18) !important;
}

.weekly-card.card-line .weekly-row-val {
  color: #a7f3d0 !important;
}

.weekly-card.card-jodi {
  background: linear-gradient(135deg, #18092a 0%, #2a0e5c 100%) !important;
  border-color: rgba(168, 85, 247, 0.45) !important;
}

.weekly-card.card-jodi::before {
  background: var(--indigo-gradient) !important;
}

.weekly-card.card-jodi .weekly-card-header {
  background: linear-gradient(135deg, #3b0764 0%, #240540 100%) !important;
  border-bottom-color: rgba(168, 85, 247, 0.3) !important;
}

.weekly-card.card-jodi .weekly-row {
  background: rgba(168, 85, 247, 0.07) !important;
  border-color: rgba(168, 85, 247, 0.18) !important;
}

.weekly-card.card-jodi .weekly-row-val {
  color: #e9d5ff !important;
}

.weekly-card-header {
  background: linear-gradient(135deg, #1e1b4b 0%, #171c38 60%, #0f172a 100%) !important;
  padding: 14px 16px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  text-align: center !important;
  position: relative !important;
}

.weekly-header-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  margin-bottom: 8px !important;
}

.weekly-badge {
  display: inline-flex !important;
  align-items: center !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 0.8px !important;
  padding: 3px 10px !important;
  border-radius: var(--radius-pill) !important;
  text-transform: uppercase !important;
}

.badge-gold {
  background: var(--gold-gradient) !important;
  color: var(--text-dark) !important;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.35) !important;
}

.badge-emerald {
  background: var(--emerald-gradient) !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.35) !important;
}

.badge-indigo {
  background: var(--indigo-gradient) !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.35) !important;
}

.weekly-date-pill {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--gold-light) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  padding: 3px 10px !important;
  border-radius: var(--radius-pill) !important;
  white-space: nowrap !important;
}

.weekly-card-title {
  color: #fff !important;
  font-family: var(--font-heading) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  margin: 0 0 4px !important;
  text-transform: uppercase !important;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6) !important;
}

.weekly-card-sub {
  font-size: 11px !important;
  color: var(--gold-light) !important;
  line-height: 1.35 !important;
  margin: 0 !important;
  opacity: 0.85 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.weekly-card-body {
  padding: 10px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  flex: 1 !important;
}

.weekly-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 2px 10px !important;
  border-radius: var(--radius-sm) !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
  transition: all 0.2s ease !important;
}

.weekly-row:hover {
  background: rgba(245, 158, 11, 0.08) !important;
  border-color: rgba(245, 158, 11, 0.3) !important;
}

.weekly-row-badge {
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--font-heading) !important;
  font-weight: 800 !important;
}

.key-ank {
  width: 28px !important;
  height: 28px !important;
  border-radius: 7px !important;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.18) 0%, rgba(217, 119, 6, 0.3) 100%) !important;
  border: 1.5px solid rgba(245, 158, 11, 0.6) !important;
  color: #fbbf24 !important;
  font-size: 14px !important;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.2) !important;
}

.key-day {
  min-width: 44px !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.18) 0%, rgba(5, 150, 105, 0.3) 100%) !important;
  border: 1.5px solid rgba(16, 185, 129, 0.6) !important;
  color: #34d399 !important;
  font-size: 11px !important;
  letter-spacing: 0.5px !important;
}

.key-jodi {
  min-width: 48px !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.18) 0%, rgba(79, 70, 229, 0.3) 100%) !important;
  border: 1.5px solid rgba(99, 102, 241, 0.6) !important;
  color: #c7d2fe !important;
  font-size: 11px !important;
  letter-spacing: 0.5px !important;
}

.weekly-row-val {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

.wc-chip {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(10, 15, 30, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 6px !important;
  padding: 3px 8px !important;
  font-family: var(--font-heading), monospace !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  letter-spacing: 0.8px !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  transition: all 0.15s ease !important;
}

.weekly-row:hover .wc-chip {
  border-color: rgba(245, 158, 11, 0.45) !important;
  color: var(--gold-light) !important;
}

.chip-line {
  min-width: 26px !important;
  height: 26px !important;
  padding: 0 !important;
  border-radius: 6px !important;
  background: rgba(16, 185, 129, 0.1) !important;
  border-color: rgba(16, 185, 129, 0.35) !important;
  color: #34d399 !important;
  font-weight: 800 !important;
  font-size: 14px !important;
}

.chip-jodi {
  min-width: 32px !important;
  padding: 3px 8px !important;
  background: rgba(99, 102, 241, 0.1) !important;
  border-color: rgba(99, 102, 241, 0.35) !important;
  color: #e0e7ff !important;
  font-weight: 800 !important;
  font-size: 14px !important;
}

.empty-val {
  color: rgba(255, 255, 255, 0.3) !important;
  font-weight: 600 !important;
}

/* ==========================================================================
   Modern Free Game Zone / Open-Close Section (.oc-fg, .ocfg)
   ========================================================================== */
.oc-fg {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.96) 0%, rgba(30, 41, 59, 0.96) 100%) !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
  border-radius: var(--radius-lg) !important;
  margin-bottom: 20px !important;
  box-shadow: var(--shadow-card), 0 0 20px rgba(0, 0, 0, 0.4) !important;
  position: relative !important;
  overflow: hidden !important;
}

.oc-fg::before {
  content: "" !important;
  position: absolute !important;
  top: 0; left: 0; right: 0; height: 3px !important;
  background: var(--gold-gradient) !important;
  z-index: 1 !important;
}

/* Distinct Vibrant Redesign for FREE GAME ZONE OPEN-CLOSE */
.oc-fg.free-game-zone {
  background: linear-gradient(145deg, #180d2e 0%, #241142 50%, #130826 100%) !important;
  border: 2px solid #a855f7 !important;
  border-radius: var(--radius-lg) !important;
  margin-bottom: 22px !important;
  box-shadow: 0 10px 30px rgba(168, 85, 247, 0.25), 0 0 25px rgba(236, 72, 153, 0.12) !important;
}

.oc-fg.free-game-zone::before {
  background: linear-gradient(90deg, #ec4899 0%, #a855f7 50%, #06b6d4 100%) !important;
  height: 3.5px !important;
}

.free-game-zone .oc-fg-header,
.oc-fg-header,
.oc-fg h4 {
  background: linear-gradient(135deg, #1e1b4b 0%, #171c38 60%, #0f172a 100%) !important;
  padding: 14px 18px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  text-align: center !important;
  margin: 0 !important;
}

.free-game-zone .oc-fg-header {
  background: linear-gradient(135deg, rgba(42, 18, 76, 0.95) 0%, rgba(65, 24, 115, 0.95) 100%) !important;
  border-bottom: 1.5px solid rgba(168, 85, 247, 0.35) !important;
  padding: 16px 18px !important;
}

.oc-fg-badge {
  display: inline-flex !important;
  align-items: center !important;
  background: var(--gold-gradient) !important;
  color: var(--text-dark) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 1px !important;
  padding: 3px 12px !important;
  border-radius: var(--radius-pill) !important;
  text-transform: uppercase !important;
  margin-bottom: 6px !important;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.35) !important;
}

.free-game-zone .oc-fg-badge {
  background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 10px rgba(236, 72, 153, 0.45) !important;
  padding: 4px 14px !important;
}

.oc-fg-title,
.oc-fg h4 {
  color: #fff !important;
  font-family: var(--font-heading) !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6) !important;
}

.free-game-zone .oc-fg-title {
  color: #ffffff !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  letter-spacing: 1px !important;
  text-shadow: 0 0 15px rgba(168, 85, 247, 0.7), 0 2px 4px rgba(0, 0, 0, 0.8) !important;
}

.ocfg {
  padding: 14px 16px !important;
}

.ocfg.rbd {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.ocfg-date-banner {
  background: linear-gradient(135deg, rgba(30, 27, 75, 0.5) 0%, rgba(15, 23, 42, 0.7) 100%) !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  text-align: center !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  margin-bottom: 14px !important;
}

.free-game-zone .ocfg-date-banner {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.16) 0%, rgba(236, 72, 153, 0.12) 100%) !important;
  border: 1.5px solid rgba(168, 85, 247, 0.4) !important;
  border-radius: 12px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.ocfg-banner-pill {
  display: inline-flex !important;
  align-items: center !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  color: var(--gold-light) !important;
  background: rgba(245, 158, 11, 0.12) !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
  padding: 3px 12px !important;
  border-radius: var(--radius-pill) !important;
  letter-spacing: 0.5px !important;
}

.free-game-zone .ocfg-banner-pill {
  background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%) !important;
  color: #ffffff !important;
  border: 1px solid #c084fc !important;
  box-shadow: 0 2px 8px rgba(168, 85, 247, 0.4) !important;
}

.ocfg-banner-title {
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  font-family: var(--font-heading) !important;
  letter-spacing: 0.8px !important;
  margin: 2px 0 0 !important;
  text-transform: uppercase !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}

.free-game-zone .ocfg-banner-title {
  color: #f3e8ff !important;
  font-size: 15.5px !important;
  font-weight: 900 !important;
  letter-spacing: 1px !important;
  text-shadow: 0 0 10px rgba(168, 85, 247, 0.5) !important;
}

.ocfg-banner-sub {
  font-size: 11px !important;
  color: rgba(255, 255, 255, 0.65) !important;
  margin: 0 !important;
  letter-spacing: 0.4px !important;
}

.free-game-zone .ocfg-banner-sub {
  color: #d8b4fe !important;
  font-size: 11.5px !important;
}

.ocfg-grid,
.d1635 {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
  margin-top: 0 !important;
}

.ocfg-card,
.oc-3a-69 {
  background: rgba(15, 23, 42, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 10px !important;
  padding: 10px 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
}

.free-game-zone .ocfg-card {
  background: linear-gradient(135deg, rgba(38, 16, 68, 0.8) 0%, rgba(20, 8, 38, 0.95) 100%) !important;
  border: 1.5px solid rgba(168, 85, 247, 0.35) !important;
  border-left: 4.5px solid #ec4899 !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
}

.ocfg-card:hover,
.oc-3a-69:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(245, 158, 11, 0.45) !important;
  background: rgba(20, 30, 55, 0.9) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5), 0 0 12px rgba(245, 158, 11, 0.12) !important;
}

.free-game-zone .ocfg-card:hover {
  transform: translateY(-2px) !important;
  border-color: #c084fc !important;
  border-left-color: #f472b6 !important;
  background: linear-gradient(135deg, rgba(50, 22, 90, 0.85) 0%, rgba(30, 12, 55, 0.98) 100%) !important;
  box-shadow: 0 8px 24px rgba(168, 85, 247, 0.35) !important;
}

.ocfg-market-info {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.ocfg-market-icon {
  width: 22px !important;
  height: 22px !important;
  border-radius: 6px !important;
  background: rgba(245, 158, 11, 0.15) !important;
  border: 1px solid rgba(245, 158, 11, 0.35) !important;
  color: #fbbf24 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 11px !important;
  flex-shrink: 0 !important;
}

.free-game-zone .ocfg-market-icon {
  width: 26px !important;
  height: 26px !important;
  border-radius: 8px !important;
  background: linear-gradient(135deg, #ec4899 0%, #a855f7 100%) !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  box-shadow: 0 2px 6px rgba(236, 72, 153, 0.4) !important;
  border: none !important;
}

.ocfg-market-name,
.oc-fg .oc-3a-69 .g5a1 {
  font-family: var(--font-heading) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #fff !important;
  letter-spacing: 0.3px !important;
  margin: 0 !important;
  text-transform: uppercase !important;
  white-space: normal !important;
  word-break: break-word !important;
  line-height: 1.25 !important;
  background: transparent !important;
  padding: 0 !important;
}

.free-game-zone .ocfg-market-name {
  color: #f8fafc !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
}

.ocfg-ank-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex-shrink: 0 !important;
}

.ocfg-ank-chip,
.oc-fg .oc-3a-69 .l9w2v {
  width: 28px !important;
  height: 28px !important;
  border-radius: 6px !important;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.16) 0%, rgba(5, 150, 105, 0.28) 100%) !important;
  border: 1.5px solid rgba(16, 185, 129, 0.55) !important;
  color: #34d399 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--font-heading) !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35) !important;
  transition: all 0.15s ease !important;
}

.free-game-zone .ocfg-ank-wrap,
.free-game-zone .ocfg-ank-pod {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: rgba(10, 4, 22, 0.75) !important;
  padding: 4px 8px !important;
  border-radius: 9999px !important;
  border: 1px solid rgba(168, 85, 247, 0.3) !important;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6) !important;
  flex-shrink: 0 !important;
}

.free-game-zone .ocfg-ank-chip,
.free-game-zone .ocfg-ank-chip.ball-3d {
  width: 31px !important;
  min-width: 31px !important;
  height: 31px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  position: relative !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7) !important;
  border: none !important;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.45) !important;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease !important;
}

/* 3D Specular Highlight Shine */
.free-game-zone .ocfg-ank-chip::after {
  content: "" !important;
  position: absolute !important;
  top: 2.5px !important;
  left: 6px !important;
  width: 10px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.6) !important;
  transform: rotate(-25deg) !important;
  pointer-events: none !important;
}

/* Ball 1: Ruby Rose */
.free-game-zone .ocfg-ank-chip.ball-ruby {
  background: radial-gradient(circle at 35% 28%, #fb7185 0%, #e11d48 55%, #881337 100%) !important;
  box-shadow: 0 3px 8px rgba(225, 29, 72, 0.45), 0 0 0 1px rgba(251, 113, 133, 0.35) !important;
}

/* Ball 2: Electric Cyan */
.free-game-zone .ocfg-ank-chip.ball-cyan {
  background: radial-gradient(circle at 35% 28%, #38bdf8 0%, #0284c7 55%, #0c4a6e 100%) !important;
  box-shadow: 0 3px 8px rgba(2, 132, 199, 0.45), 0 0 0 1px rgba(56, 189, 248, 0.35) !important;
}

/* Ball 3: Vivid Emerald */
.free-game-zone .ocfg-ank-chip.ball-emerald {
  background: radial-gradient(circle at 35% 28%, #34d399 0%, #059669 55%, #064e3b 100%) !important;
  box-shadow: 0 3px 8px rgba(5, 150, 105, 0.45), 0 0 0 1px rgba(52, 211, 153, 0.35) !important;
}

/* Ball 4: Radiant Golden Amber */
.free-game-zone .ocfg-ank-chip.ball-amber {
  background: radial-gradient(circle at 35% 28%, #fde047 0%, #f59e0b 55%, #78350f 100%) !important;
  box-shadow: 0 3px 8px rgba(245, 158, 11, 0.5), 0 0 0 1px rgba(253, 224, 71, 0.35) !important;
}

/* Ball 5: Cosmic Amethyst */
.free-game-zone .ocfg-ank-chip.ball-purple {
  background: radial-gradient(circle at 35% 28%, #c084fc 0%, #9333ea 55%, #4c1d95 100%) !important;
  box-shadow: 0 3px 8px rgba(147, 51, 234, 0.45), 0 0 0 1px rgba(192, 132, 252, 0.35) !important;
}

.ocfg-card:hover .ocfg-ank-chip,
.oc-3a-69:hover .l9w2v {
  border-color: rgba(245, 158, 11, 0.6) !important;
  color: #fbbf24 !important;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(217, 119, 6, 0.3) 100%) !important;
  transform: scale(1.06) !important;
}

.free-game-zone .ocfg-card:hover .ocfg-ank-chip {
  transform: scale(1.06) !important;
}

.free-game-zone .ocfg-ank-chip:hover {
  transform: translateY(-3px) scale(1.15) !important;
  z-index: 2 !important;
}

.ocfg-empty {
  font-size: 11.5px !important;
  color: rgba(255, 255, 255, 0.4) !important;
  font-style: italic !important;
  white-space: nowrap !important;
}

.free-game-zone .l-obj-giv td.v5a25 {
  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%) !important;
  color: #ffffff !important;
  border-color: rgba(168, 85, 247, 0.4) !important;
}

.free-game-zone .l-obj-giv td.v5a25-v4a5 {
  background: rgba(168, 85, 247, 0.2) !important;
  color: #f3e8ff !important;
  border-color: rgba(168, 85, 247, 0.3) !important;
}

.free-game-zone .l-obj-giv td.v5a25-v85b {
  background: rgba(251, 191, 36, 0.15) !important;
  color: #fbbf24 !important;
  border-color: rgba(168, 85, 247, 0.3) !important;
}

@media (max-width: 650px) {
  .ocfg {
    padding: 12px 10px !important;
  }
  .ocfg-grid,
  .d1635 {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .ocfg-card,
  .oc-3a-69 {
    padding: 10px 12px !important;
    gap: 8px !important;
  }
  .ocfg-market-name {
    font-size: 12.5px !important;
  }
  .ocfg-ank-chip,
  .oc-fg .oc-3a-69 .l9w2v {
    min-width: 28px !important;
    height: 28px !important;
    font-size: 14px !important;
    border-radius: 6px !important;
  }
  .free-game-zone .ocfg-ank-wrap,
  .free-game-zone .ocfg-ank-pod {
    padding: 3px 6px !important;
    gap: 5px !important;
  }
  .free-game-zone .ocfg-ank-chip,
  .free-game-zone .ocfg-ank-chip.ball-3d {
    width: 28px !important;
    min-width: 28px !important;
    height: 28px !important;
    font-size: 13.5px !important;
  }
  .free-game-zone .ocfg-ank-chip::after {
    top: 2px !important;
    left: 5px !important;
    width: 8px !important;
    height: 5px !important;
  }
}

@media (max-width: 375px) {
  .ocfg {
    padding: 10px 6px !important;
  }
  .ocfg-card,
  .oc-3a-69 {
    padding: 8px 10px !important;
    gap: 6px !important;
  }
  .ocfg-market-icon {
    width: 20px !important;
    height: 20px !important;
    font-size: 10px !important;
  }
  .ocfg-market-name {
    font-size: 11.5px !important;
  }
  .ocfg-ank-wrap {
    gap: 3px !important;
  }
  .ocfg-ank-chip,
  .oc-fg .oc-3a-69 .l9w2v {
    min-width: 24px !important;
    height: 24px !important;
    font-size: 12px !important;
    border-radius: 5px !important;
  }
  .free-game-zone .ocfg-ank-wrap,
  .free-game-zone .ocfg-ank-pod {
    padding: 2px 5px !important;
    gap: 3px !important;
  }
  .free-game-zone .ocfg-ank-chip,
  .free-game-zone .ocfg-ank-chip.ball-3d {
    width: 24px !important;
    min-width: 24px !important;
    height: 24px !important;
    font-size: 12px !important;
  }
  .free-game-zone .ocfg-ank-chip::after {
    top: 1.5px !important;
    left: 4px !important;
    width: 7px !important;
    height: 4px !important;
  }
}

.l-obj-giv {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0 !important;
}

.l-obj-giv td {
  padding: 6px 8px;
  border: 1px solid var(--border-subtle);
  font-size: 13px;
}

.v5a25 {
  background: rgba(245, 158, 11, 0.15) !important;
  color: var(--gold-light) !important;
  font-weight: 800;
  font-size: 15px !important;
  padding: 8px !important;
}

.v5a25-v4a5 {
  background: rgba(99, 102, 241, 0.15);
  color: #fff;
  font-weight: 700;
}

.v5a25-v85b {
  background: rgba(16, 185, 129, 0.15);
  color: var(--emerald-light);
  font-weight: 800;
  font-size: 16px;
}

.samll-text {
  color: var(--text-secondary);
}

/* ==========================================================================
   Modern Jodi & Panel Chart Links Section (.sta-div)
   ========================================================================== */
.sta-div {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.96) 0%, rgba(30, 41, 59, 0.96) 100%) !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
  border-radius: var(--radius-lg) !important;
  margin-bottom: 20px !important;
  box-shadow: var(--shadow-card), 0 0 20px rgba(0, 0, 0, 0.4) !important;
  position: relative !important;
  overflow: hidden !important;
  outline: none !important;
}

.sta-div::before {
  content: "" !important;
  position: absolute !important;
  top: 0; left: 0; right: 0; height: 3px !important;
  background: var(--gold-gradient) !important;
  z-index: 1 !important;
}

.sta-div.sta-panel::before {
  background: var(--emerald-gradient) !important;
}

.sta-header {
  background: linear-gradient(135deg, #1e1b4b 0%, #171c38 60%, #0f172a 100%) !important;
  padding: 14px 18px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  text-align: center !important;
}

.sta-badge {
  display: inline-flex !important;
  align-items: center !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 1px !important;
  padding: 3px 12px !important;
  border-radius: var(--radius-pill) !important;
  text-transform: uppercase !important;
  margin-bottom: 6px !important;
}

.badge-jodi {
  background: var(--gold-gradient) !important;
  color: var(--text-dark) !important;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.35) !important;
}

.badge-panel {
  background: var(--emerald-gradient) !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.35) !important;
}

.sta-title,
.sta-div h6 {
  color: #fff !important;
  font-family: var(--font-heading) !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  margin: 0 0 3px !important;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6) !important;
}

.sta-sub {
  font-size: 11.5px !important;
  color: var(--gold-light) !important;
  margin: 0 !important;
  opacity: 0.85 !important;
}

.sta-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
  gap: 10px !important;
  padding: 14px !important;
}

@media (max-width: 768px) {
  .sta-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 12px 10px !important;
  }
}

.sta-item,
.sta-div a {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  text-align: left !important;
  gap: 12px !important;
  background: rgba(15, 23, 42, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  text-decoration: none !important;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

.sta-item:hover,
.sta-div a:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(245, 158, 11, 0.5) !important;
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.95) 100%) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), 0 0 10px rgba(245, 158, 11, 0.15) !important;
}

.sta-item-name {
  font-family: var(--font-heading) !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #f1f5f9 !important;
  line-height: 1.35 !important;
  text-align: left !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow: visible !important;
  text-overflow: clip !important;
  flex: 1 !important;
  transition: color 0.15s ease !important;
}

.sta-item:hover .sta-item-name,
.sta-div a:hover {
  color: var(--gold-light) !important;
}

.sta-tag {
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: 0.5px !important;
  padding: 3px 7px !important;
  border-radius: 4px !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  transition: all 0.15s ease !important;
}

.tag-jodi {
  background: rgba(245, 158, 11, 0.15) !important;
  border: 1px solid rgba(245, 158, 11, 0.4) !important;
  color: #fbbf24 !important;
}

.sta-item:hover .tag-jodi {
  background: var(--gold-gradient) !important;
  color: var(--text-dark) !important;
}

.tag-panel {
  background: rgba(16, 185, 129, 0.15) !important;
  border: 1px solid rgba(16, 185, 129, 0.4) !important;
  color: #34d399 !important;
}

.sta-item:hover .tag-panel {
  background: var(--emerald-gradient) !important;
  color: #fff !important;
}

.qtn14 {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  margin-bottom: 14px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06), var(--shadow-sm);
  text-align: left;
  outline: none !important;
}

.qtn14 h6 {
  font-size: 16px;
  font-weight: 800;
  color: #0f172a !important;
  margin-bottom: 10px;
  border-bottom: 2px solid #f59e0b;
  padding-bottom: 6px;
}

.qtn14 p {
  font-size: 13.5px;
  color: #334155 !important;
  line-height: 1.7;
}

.q-crd {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: var(--radius-md);
  margin-top: 10px;
  padding: 12px 14px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.q-crd label span {
  font-size: 14px;
  font-weight: 800;
  color: #047857 !important;
  display: block;
  margin-bottom: 6px;
}

.q-crd p {
  color: #475569 !important;
}

.q-crd h2, .q-crd h3, .q-crd h4 {
  color: #0f172a !important;
}

.be-stone {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  margin-bottom: 14px;
  text-align: left;
  box-shadow: var(--shadow-card);
}

.c-stone {
  font-size: 15px;
  font-weight: 800;
  color: var(--gold-light);
  margin: 16px 0 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border-subtle);
  text-transform: uppercase;
}

.be-stone p {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 10px;
}

.lst-sec {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: 14px 18px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-card);
  outline: none !important;
}

.lst-sec h6, .lst-sec h3 {
  font-size: 14px;
  color: var(--gold-light) !important;
  font-weight: 800;
  margin-bottom: 6px;
}

.lst-sec p {
  font-size: 12px !important;
  color: var(--text-muted) !important;
  line-height: 1.7;
}

.dis12 {
  background: rgba(225, 29, 72, 0.08) !important;
  border: 1px solid rgba(225, 29, 72, 0.3) !important;
  border-radius: var(--radius-lg) !important;
  padding: 14px 18px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-card) !important;
  outline: none !important;
}

.dis12 h6 {
  color: var(--ruby-primary);
  font-size: 15px;
  font-weight: 800;
  margin-bottom: 8px;
}

.dis12 p {
  color: var(--text-secondary) !important;
  font-size: 12.5px !important;
  line-height: 1.6;
}

.clk1-rld,
.btm-clk1-f {
  position: fixed;
  bottom: 16px;
  right: 16px;
  background: var(--gold-gradient);
  color: var(--text-dark) !important;
  border: none;
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 20px rgba(245, 158, 11, 0.45);
  cursor: pointer;
  z-index: 999;
  transition: all 0.2s ease;
}

.clk1-rld:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 25px rgba(245, 158, 11, 0.65);
}

.mp-clk1 {
  position: fixed;
  bottom: 16px;
  left: 16px;
  background: var(--emerald-gradient);
  color: #fff !important;
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 20px rgba(16, 185, 129, 0.45);
  z-index: 999;
  text-decoration: none;
  transition: all 0.2s ease;
}

.mp-clk1:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 25px rgba(16, 185, 129, 0.65);
}

/* ==========================================================================
   Modern Luxury Footer (.theme1-footer)
   ========================================================================== */
.theme1-footer,
footer.oc-fg {
  background: linear-gradient(180deg, #131b2e 0%, #0c111e 100%) !important;
  border: 1px solid var(--border-card) !important;
  border-radius: var(--radius-lg) !important;
  position: relative !important;
  overflow: hidden !important;
  margin-top: 24px !important;
  margin-bottom: 20px !important;
  box-shadow: var(--shadow-card), 0 0 25px rgba(0, 0, 0, 0.5) !important;
  padding: 0 !important;
  text-align: center !important;
  /* max-width: 880px !important; */
  margin-left: auto !important;
  margin-right: auto !important;
}

.theme1-footer::before,
footer.oc-fg::before {
  content: "" !important;
  position: absolute !important;
  top: 0; left: 0; right: 0; height: 3px !important;
  background: var(--gold-gradient) !important;
  z-index: 2 !important;
}

.footer-inner {
  padding: 24px 20px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
}

/* Brand Section */
.footer-brand-section {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;
}

.footer-logo-wrap {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  text-decoration: none !important;
}

.footer-logo {
  max-height: 40px !important;
  max-width: 180px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5)) !important;
}

.footer-brand-title {
  font-family: var(--font-heading) !important;
  font-size: 19px !important;
  font-weight: 900 !important;
  letter-spacing: 0.8px !important;
  background: var(--gold-gradient) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-transform: uppercase !important;
  display: inline-block !important;
}

.footer-badge-pow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  background: rgba(245, 158, 11, 0.12) !important;
  border: 1px solid rgba(245, 158, 11, 0.35) !important;
  border-radius: var(--radius-pill) !important;
  padding: 4px 14px !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  color: var(--gold-light) !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
}

.badge-pow-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #10b981 !important;
  box-shadow: 0 0 8px #10b981 !important;
  animation: pulse-dot 1.8s infinite ease-in-out !important;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

.footer-tagline {
  font-size: 12.5px !important;
  color: var(--text-muted) !important;
  max-width: 560px !important;
  line-height: 1.55 !important;
  margin: 0 auto !important;
}

/* Quick Navigation Links Grid */
.footer-nav-section {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.footer-nav-title {
  font-family: var(--font-heading) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 1.5px !important;
  color: var(--gold-light) !important;
  text-transform: uppercase !important;
  opacity: 0.9 !important;
  margin: 0 !important;
}

.footer-links-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 8px !important;
  max-width: 680px !important;
  margin: 0 auto !important;
}

.footer-link-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: rgba(15, 23, 42, 0.75) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: var(--radius-pill) !important;
  padding: 6px 14px !important;
  color: var(--text-secondary) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.footer-link-pill:hover {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.95) 100%) !important;
  border-color: rgba(245, 158, 11, 0.5) !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 8px rgba(245, 158, 11, 0.2) !important;
}

.footer-link-wp {
  border-color: rgba(16, 185, 129, 0.4) !important;
  background: rgba(16, 185, 129, 0.1) !important;
  color: #34d399 !important;
}

.footer-link-wp:hover {
  border-color: #10b981 !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 10px rgba(16, 185, 129, 0.3) !important;
}

.footer-link-icon {
  font-size: 13px !important;
  display: inline-flex !important;
}

/* Responsible Gaming & Disclaimer */
.footer-disclaimer-box {
  background: rgba(15, 23, 42, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  text-align: center !important;
  max-width: 720px !important;
  margin: 0 auto !important;
}

.disclaimer-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  margin-bottom: 6px !important;
}

.badge-18 {
  background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%) !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  letter-spacing: 0.5px !important;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.3) !important;
}

.disclaimer-badge-text {
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #e2e8f0 !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
}

.disclaimer-text {
  font-size: 11.5px !important;
  color: var(--text-muted) !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

/* Bottom Bar */
.footer-bottom-bar {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-top: 16px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  gap: 10px !important;
}

.footer-copy {
  font-size: 12px !important;
  color: var(--text-muted) !important;
  margin: 0 !important;
  text-align: left !important;
}

.footer-domain-name {
  color: var(--gold-light) !important;
  font-weight: 700 !important;
}

.footer-status-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: rgba(16, 185, 129, 0.1) !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
  border-radius: var(--radius-pill) !important;
  padding: 4px 10px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #34d399 !important;
}

.status-live-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #10b981 !important;
}

.footer-sticky-spacer {
  height: 75px !important;
  width: 100% !important;
  display: block !important;
}

@media (max-width: 600px) {
  .footer-inner {
    padding: 18px 12px 14px !important;
    gap: 16px !important;
  }
  .footer-bottom-bar {
    flex-direction: column !important;
    text-align: center !important;
    gap: 8px !important;
  }
  .footer-copy {
    text-align: center !important;
  }
  .footer-links-grid {
    gap: 6px !important;
  }
  .footer-link-pill {
    padding: 5px 10px !important;
    font-size: 11.5px !important;
  }
}

/* Sleek Floating Dock / Bottom Pill Navigation */
.footer-sticky {
  position: fixed !important;
  bottom: 12px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: calc(100% - 24px) !important;
  max-width: 430px !important;
  background: rgb(245 158 11) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border: 1.5px solid rgba(245, 158, 11, 0.45) !important;
  border-radius: 9999px !important;
  padding: 7px 16px !important;
  z-index: 1000 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.75), 0 0 20px rgba(245, 158, 11, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.footer-sticky ul {
  display: flex !important;
  justify-content: space-around !important;
  align-items: center !important;
  list-style: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 6px !important;
}

.footer-sticky ul li {
  list-style: none !important;
  flex: 1 !important;
  text-align: center !important;
}

.footer-sticky li a {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  text-decoration: none !important;
  padding: 6px 4px !important;
  border-radius: 12px !important;
  transition: all 0.22s ease !important;
  position: relative !important;
  user-select: none !important;
}

.footer-sticky li a svg {
  width: 22px !important;
  height: 22px !important;
  max-width: 22px !important;
  max-height: 22px !important;
  fill: #f59e0b !important;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), fill 0.22s ease, filter 0.22s ease !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4)) !important;
}

.footer-sticky li a svg path {
  fill: currentColor !important;
}

.footer-sticky li a:hover,
.footer-sticky li a:focus,
.footer-sticky li a:active {
  color: #fef08a !important;
  background: rgba(245, 158, 11, 0.12) !important;
  transform: translateY(-2px) !important;
}

.footer-sticky li a:hover svg,
.footer-sticky li a:focus svg,
.footer-sticky li a:active svg {
  fill: #fef08a !important;
  transform: scale(1.18) !important;
  filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.6)) !important;
}

@media (max-width: 480px) {
  .footer-sticky {
    bottom: 10px !important;
    width: calc(100% - 16px) !important;
    padding: 6px 12px !important;
  }
  .footer-sticky li a {
    font-size: 10px !important;
    gap: 3px !important;
    padding: 4px 2px !important;
  }
  .footer-sticky li a svg {
    width: 20px !important;
    height: 20px !important;
  }
}

.sidebar-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  z-index: 9998;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.sidebar-overlay.active {
  opacity: 1;
  visibility: visible;
}

.sidebar {
  position: fixed;
  top: 0;
  left: -320px;
  width: 300px;
  height: 100%;
  background: var(--bg-card);
  border-right: 1px solid var(--border-card);
  z-index: 9999;
  box-shadow: 10px 0 30px rgba(0, 0, 0, 0.5);
  transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
  text-align: left;
}

.sidebar.active {
  left: 0;
}

.sidebar-header {
  padding: 18px 20px;
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sidebar-header h3 {
  color: var(--gold-light);
  font-size: 18px;
  margin: 0;
}

.sidebar-header .close-btn {
  color: var(--text-muted);
  font-size: 22px;
  cursor: pointer;
  transition: color 0.2s ease;
}

.sidebar-header .close-btn:hover {
  color: #fff;
}

.sidebar-menu {
  list-style: none;
  padding: 12px 0;
  margin: 0;
}

.sidebar-menu li a {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 600;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: all 0.2s ease;
}

.sidebar-menu li a svg {
  margin-right: 10px;
  fill: var(--gold-light);
}

.sidebar-menu li a:hover {
  background: rgba(245, 158, 11, 0.1);
  color: var(--gold-light);
  padding-left: 24px;
}

.vip-login-wrapper {
  max-width: 440px;
  margin: 20px auto;
}

.login-area {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: 24px 20px;
  box-shadow: var(--shadow-card);
  text-align: left;
}

.login-area h4 {
  color: var(--gold-light);
  font-size: 20px;
  font-weight: 800;
  text-align: center;
  margin-bottom: 16px;
}

.login-area .form-group {
  margin-bottom: 14px;
}

.login-area input[type="text"],
.login-area input[type="password"],
.login-area input[type="email"],
.login-area input[type="tel"] {
  width: 100%;
  padding: 12px 14px;
  background: var(--bg-card-alt);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.login-area input:focus {
  border-color: var(--gold-primary);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
}

.register-btn {
  display: block;
  width: 100%;
  padding: 12px;
  background: var(--gold-gradient);
  color: var(--text-dark) !important;
  font-size: 15px;
  font-weight: 800;
  border-radius: var(--radius-pill);
  border: none;
  cursor: pointer;
  text-align: center;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35);
  transition: all 0.2s ease;
}

.register-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.55);
}

.inline-buttons {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.inline-buttons .register-btn {
  background: var(--bg-card-alt);
  color: var(--text-secondary) !important;
  border: 1px solid var(--border-card);
  font-size: 13px;
  box-shadow: none;
}

.inline-buttons .register-btn:hover {
  border-color: var(--gold-light);
  color: #fff !important;
}

.k_chart {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  margin: 0 0 20px;
  padding: 12px;
  box-shadow: var(--shadow-card);
}

.k_head {
  background: var(--gold-gradient);
  color: var(--text-dark);
  font-weight: 800;
  font-size: 20px;
  padding: 10px;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  text-align: center;
}

.chart {
  background: var(--bg-card-alt);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 10px;
  margin-top: 8px;
}

.c_head {
  color: var(--gold-light);
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 4px;
}

.c_message {
  color: var(--text-secondary);
  font-size: 18px;
  font-weight: 700;
}

.fg-div h1 {
  color: var(--gold-light);
  font-size: 20px;
  margin-bottom: 12px;
}

.button2 {
  display: inline-block;
  background: var(--indigo-gradient);
  color: #fff !important;
  padding: 6px 18px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 700;
  margin: 8px 0;
}

.image-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  padding: 10px 0;
}

.image-box {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: 8px;
  box-shadow: var(--shadow-card);
  transition: transform 0.2s ease;
  cursor: pointer;
}

.image-box:hover {
  transform: scale(1.03);
  border-color: var(--gold-light);
}

.image-box img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  display: block;
}

.image-preview {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(8px);
  z-index: 10000;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.image-preview img {
  max-width: 90%;
  max-height: 90vh;
  border-radius: var(--radius-md);
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);
}

.image-preview .close-btn {
  position: absolute;
  top: 20px;
  right: 25px;
  color: #fff;
  font-size: 36px;
  cursor: pointer;
}

/* ===================================================
   CHART PAGE & TABLE STYLING (Jodi / Panel / Starline)
   =================================================== */

.chart-h1 {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
  color: var(--gold-light) !important;
  border: 1px solid var(--border-gold) !important;
  border-radius: var(--radius-lg) !important;
  padding: 12px 16px !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  margin: 10px 0 12px !important;
  box-shadow: var(--shadow-card), var(--shadow-glow-gold) !important;
  text-align: center !important;
  text-shadow: none !important;
}

.para3 {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-card) !important;
  border-radius: var(--radius-lg) !important;
  padding: 16px 18px !important;
  margin-bottom: 14px !important;
  box-shadow: var(--shadow-card) !important;
  text-align: center !important;
}

.para3 h2 {
  color: var(--gold-light) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  margin-bottom: 8px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.para3 p {
  color: var(--text-secondary) !important;
  font-size: 12.5px !important;
  line-height: 1.7 !important;
  margin: 0 !important;
}

.chart-result {
  background: linear-gradient(135deg, rgba(21, 29, 50, 0.95), rgba(26, 36, 62, 0.95)) !important;
  border: 1px solid var(--border-gold) !important;
  border-radius: var(--radius-lg) !important;
  padding: 14px 18px !important;
  margin: 12px 0 !important;
  box-shadow: var(--shadow-card), 0 0 20px rgba(245, 158, 11, 0.12) !important;
  text-align: center !important;
}

.chart-result div {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: var(--gold-light) !important;
  text-transform: uppercase !important;
  margin-bottom: 4px !important;
  text-shadow: none !important;
}

.chart-result span {
  font-size: 26px !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  font-family: var(--font-heading) !important;
  letter-spacing: 2px !important;
  text-shadow: 0 0 15px rgba(16, 185, 129, 0.5) !important;
  display: inline-block !important;
  padding: 4px 0 !important;
}

.chart-result a {
  background: var(--indigo-gradient) !important;
  color: #fff !important;
  border: 1px solid rgba(99, 102, 241, 0.4) !important;
  padding: 6px 18px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  border-radius: var(--radius-pill) !important;
  display: inline-block !important;
  margin-top: 8px !important;
  text-decoration: none !important;
  box-shadow: 0 2px 10px rgba(99, 102, 241, 0.35) !important;
  transition: all 0.2s ease !important;
}

.chart-result a:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.55) !important;
}

.button2 {
  display: inline-block !important;
  background: var(--gold-gradient) !important;
  color: var(--text-dark) !important;
  padding: 8px 22px !important;
  border-radius: var(--radius-pill) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  margin: 10px 0 !important;
  border: none !important;
  text-shadow: none !important;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35) !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.button2:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.55) !important;
}

.panel.panel-info {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-card) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-card) !important;
  overflow: hidden !important;
  margin: 14px auto !important;
  width: 100% !important;
}

.panel-heading {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  padding: 12px 16px !important;
}

.panel-heading h3 {
  color: var(--gold-light) !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin: 0 !important;
  text-align: center !important;
}

.panel-chart,
.chart-table {
  width: 100% !important;
  border-collapse: collapse !important;
  background: var(--bg-card) !important;
}

.panel-chart th,
.chart-table th {
  background: rgba(245, 158, 11, 0.12) !important;
  color: var(--gold-light) !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  padding: 8px 4px !important;
  border: 1px solid var(--border-subtle) !important;
  text-transform: uppercase !important;
}

.panel-chart td,
.chart-table td {
  border: 1px solid var(--border-subtle) !important;
  color: #f8fafc !important;
  padding: 6px 2px !important;
  font-family: "Segoe UI", Roboto, sans-serif !important;
}

.panel-chart tr:nth-child(even),
.chart-table tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.02) !important;
}

.panel-chart tr:hover,
.chart-table tr:hover {
  background: rgba(245, 158, 11, 0.04) !important;
}

.r {
  color: var(--ruby-primary) !important;
  font-weight: 800 !important;
}

/* Red digit styling in charts – Doublets & Difference ±5 */
/* High-specificity selectors to override .panel-chart td / .chart-table td */
.panel-chart td.chart-00, .panel-chart td.chart-11, .panel-chart td.chart-22,
.panel-chart td.chart-33, .panel-chart td.chart-44, .panel-chart td.chart-55,
.panel-chart td.chart-66, .panel-chart td.chart-77, .panel-chart td.chart-88,
.panel-chart td.chart-99,
.panel-chart td.chart-05, .panel-chart td.chart-50,
.panel-chart td.chart-16, .panel-chart td.chart-61,
.panel-chart td.chart-27, .panel-chart td.chart-72,
.panel-chart td.chart-38, .panel-chart td.chart-83,
.panel-chart td.chart-49, .panel-chart td.chart-94,
.chart-table td.chart-00, .chart-table td.chart-11, .chart-table td.chart-22,
.chart-table td.chart-33, .chart-table td.chart-44, .chart-table td.chart-55,
.chart-table td.chart-66, .chart-table td.chart-77, .chart-table td.chart-88,
.chart-table td.chart-99,
.chart-table td.chart-05, .chart-table td.chart-50,
.chart-table td.chart-16, .chart-table td.chart-61,
.chart-table td.chart-27, .chart-table td.chart-72,
.chart-table td.chart-38, .chart-table td.chart-83,
.chart-table td.chart-49, .chart-table td.chart-94,
td.css-00, td.css-05, td.css-11, td.css-16, td.css-22, td.css-27,
td.css-33, td.css-38, td.css-44, td.css-49, td.css-50, td.css-55,
td.css-61, td.css-66, td.css-72, td.css-77, td.css-83, td.css-88,
td.css-94, td.css-99, td.css-star {
  color: var(--ruby-primary) !important;
  font-weight: 800 !important;
}

.footer-text-div {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-card) !important;
  border-radius: var(--radius-lg) !important;
  padding: 20px 22px !important;
  margin: 16px 0 !important;
  box-shadow: var(--shadow-card) !important;
  text-align: left !important;
}

.footer-text-div p {
  color: var(--text-secondary) !important;
  font-size: 13px !important;
  line-height: 1.7 !important;
  margin-bottom: 10px !important;
}

.footer-text-div .small-heading {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: var(--gold-light) !important;
  margin-bottom: 8px !important;
  text-shadow: none !important;
  text-transform: uppercase !important;
}

.footer-text-div .faq-heading {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: var(--gold-light) !important;
  margin: 16px 0 10px !important;
}

.footer-text-div .faq-title {
  color: var(--emerald-light) !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  margin-top: 10px !important;
}

.footer-text-div .faq-ans {
  color: var(--text-secondary) !important;
  font-size: 13px !important;
  padding-left: 8px !important;
  border-left: 2px solid var(--border-subtle) !important;
  margin-bottom: 12px !important;
}

/* ===================================================
   STARLINE CHART PAGE STYLING
   =================================================== */

.result-table {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
}

.result-date {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
  color: var(--gold-light) !important;
  border: 1px solid var(--border-gold) !important;
  border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
  padding: 10px 16px !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  letter-spacing: 0.5px !important;
  text-align: center !important;
}

.result-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
  gap: 8px !important;
  padding: 12px !important;
  background: var(--bg-card) !important;
  border: 1px solid var(--border-card) !important;
  border-top: none !important;
  border-radius: 0 0 var(--radius-md) var(--radius-md) !important;
  box-shadow: var(--shadow-card) !important;
}

.result-cell {
  background: var(--bg-card-alt) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-sm) !important;
  padding: 8px 6px !important;
  text-align: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: all 0.2s ease !important;
}

.result-cell:hover {
  border-color: var(--border-gold) !important;
  transform: translateY(-2px) !important;
}

.result-cell .time-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--gold-light) !important;
  text-transform: uppercase !important;
  margin-bottom: 4px !important;
}

.result-cell .game-value {
  font-size: 16px !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  letter-spacing: 1px !important;
  font-family: var(--font-heading) !important;
}

@media (max-width: 768px) {
  .result-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
    padding: 8px 6px !important;
  }

  .result-cell {
    padding: 7px 3px !important;
    border-radius: 6px !important;
  }

  .result-cell .time-label {
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.2px !important;
    white-space: nowrap !important;
    margin-bottom: 2px !important;
  }

  .result-cell .game-value {
    font-size: 13.5px !important;
    font-weight: 900 !important;
    letter-spacing: 0.3px !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 360px) {
  .result-grid {
    gap: 4px !important;
    padding: 6px 4px !important;
  }

  .result-cell {
    padding: 6px 2px !important;
  }

  .result-cell .time-label {
    font-size: 9px !important;
  }

  .result-cell .game-value {
    font-size: 12px !important;
  }
}

/* ===================================================
   VIP GUESSING CARD SYSTEM (vip_plan_list.php)
   =================================================== */

.dp-guess-wrap {
  padding: 6px 0;
  width: 100%;
  box-sizing: border-box;
}

.dp-filter-wrap {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  padding: 12px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  margin-bottom: 16px;
}

.dp-select-box {
  flex: 1;
  min-width: 140px;
}

.filter-select,
.dp-select {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  background-color: var(--bg-card-alt);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: 13.5px;
  font-weight: 600;
  outline: none;
  transition: border-color 0.2s ease;
}

.filter-select:focus,
.dp-select:focus {
  border-color: var(--gold-primary);
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2);
}

.filter-select option {
  background: var(--bg-card-alt);
  color: var(--text-primary);
}

#dateSelect {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  background-color: var(--bg-card-alt);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: 13.5px;
  font-weight: 600;
  outline: none;
}

.dp-market-badge {
  background: var(--gold-gradient);
  color: var(--text-dark) !important;
  font-size: 13px;
  font-weight: 800;
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  border: none;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 10px rgba(245, 158, 11, 0.35);
  transition: all 0.2s ease;
}

.dp-market-badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(245, 158, 11, 0.55);
}

.gc-card-container {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
}

.gc-card {
  width: 100%;
  max-width: 580px;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  text-align: left;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.gc-card:hover {
  border-color: var(--border-gold);
}

.gc-header {
  padding: 12px 16px;
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  border-bottom: 1px solid var(--border-subtle);
}

.gc-star-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 10px;
}

.gc-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--gold-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.gc-user-name {
  font-size: 15px;
  font-weight: 800;
  color: var(--gold-light);
}

.gc-user-date {
  font-size: 11px;
  color: var(--text-muted);
}

.gc-avg-score {
  font-size: 20px;
  font-weight: 900;
  color: var(--gold-primary);
  line-height: 1;
}

.gc-avg-meta {
  font-size: 11px;
  color: var(--text-muted);
}

.gc-rate-prompt {
  font-size: 12px;
  font-weight: 800;
  color: var(--emerald-light);
  cursor: pointer;
  background: rgba(16, 185, 129, 0.15);
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.gc-rate-input-wrap {
  background: var(--bg-card-alt);
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-subtle);
  display: none;
  align-items: center;
  gap: 10px;
}

.gc-rate-input-wrap.open {
  display: flex;
}

.gc-rate-star {
  font-size: 24px;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.2);
  transition: transform 0.1s ease;
}

.gc-rate-star.selected,
.gc-rate-star.hovered {
  color: var(--gold-light);
}

.gc-submit-star {
  background: var(--gold-gradient);
  color: var(--text-dark);
  font-weight: 800;
  font-size: 12px;
  border: none;
  border-radius: var(--radius-pill);
  padding: 4px 14px;
  cursor: pointer;
}

.gc-market {
  background: rgba(245, 158, 11, 0.1);
  color: var(--gold-light);
  font-weight: 800;
  font-size: 13.5px;
  letter-spacing: 1px;
  padding: 6px 16px;
  border-bottom: 1px solid var(--border-subtle);
  text-transform: uppercase;
}

.gc-body {
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-primary);
  font-weight: 600;
}

.gc-actions {
  display: flex;
  gap: 8px;
  padding: 8px 16px 12px;
}

.gc-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-size: 12.5px;
  font-weight: 700;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
}

.gc-btn-like {
  background: rgba(16, 185, 129, 0.15);
  color: var(--emerald-light);
  border-color: rgba(16, 185, 129, 0.3);
  flex: 1;
}

.gc-btn-dislike {
  background: rgba(244, 63, 94, 0.15);
  color: var(--ruby-primary);
  border-color: rgba(244, 63, 94, 0.3);
  flex: 1;
}

.gc-btn-comment {
  background: rgba(99, 102, 241, 0.15);
  color: #a5b4fc;
  border-color: rgba(99, 102, 241, 0.3);
  flex: 1;
}

.gc-comments-section {
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-card-alt);
  display: none;
  padding: 12px 16px;
}

.gc-comment-input {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 13px;
  width: 100%;
}

.gc-comment-send {
  background: var(--indigo-gradient);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  cursor: pointer;
}

.gc-comment-item {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.gc-comment-bubble {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  flex: 1;
}

.gc-comment-name {
  color: var(--gold-light);
  font-weight: 700;
  font-size: 12px;
}

.gc-comment-text {
  color: var(--text-secondary);
  font-size: 12.5px;
}

/* ===================================================
   MATKA FREE OPEN & KHATRI PANNA STYLING
   =================================================== */

.fg-div .fg-main {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  margin-bottom: 14px;
}

.fg-div .fg-main > div:first-child {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  border-bottom: 1px solid var(--border-subtle);
  padding: 12px 14px;
}

.fg-div .fg-main h6 {
  background: transparent !important;
  color: var(--emerald-light) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  border: none !important;
  margin-bottom: 4px;
}

.fg-div .fg-main h5 {
  background: transparent !important;
  color: var(--gold-light) !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  border: none !important;
  margin-bottom: 4px;
}

.fg-div .fg-main .fg-p1 {
  background: transparent !important;
  color: var(--ruby-primary) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  border: none !important;
  margin: 0;
}

.fg-div .fg-c1 {
  margin: 10px 14px !important;
}

.fg-div .fg-c1 > div {
  background: var(--bg-card-alt) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-sm) !important;
  overflow: hidden;
}

.fg-div .fg-p2 {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(217, 119, 6, 0.15)) !important;
  color: var(--gold-light) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  padding: 6px 12px !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  text-shadow: none !important;
  margin: 0 !important;
}

.fg-div .fg-p4 {
  color: #ffffff !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  font-family: var(--font-heading) !important;
  letter-spacing: 2px !important;
  padding: 10px 0 !important;
  margin: 0 !important;
  text-shadow: 0 0 12px rgba(16, 185, 129, 0.4) !important;
}

/* KHATRI PANNA STYLING */
.k_chart {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-card) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-card) !important;
  padding: 14px !important;
  margin-bottom: 16px !important;
}

.k_head {
  background: transparent !important;
  padding: 0 !important;
}

.k_head .chart {
  background: var(--bg-card-alt) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-md) !important;
  padding: 12px 14px !important;
  margin-bottom: 10px !important;
  text-align: center;
}

.k_head .c_head {
  color: var(--gold-light) !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  font-family: var(--font-heading) !important;
  margin-bottom: 6px !important;
}

.k_head .c_message {
  color: var(--text-primary) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  line-height: 1.8 !important;
}

/* USER VERIFICATION (vip_verify_link.php) */
.nk-content {
  padding: 20px 10px;
}

.nk-content .card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-card);
  max-width: 480px;
  margin: 20px auto;
  text-align: left;
}

.nk-content .card h4 {
  color: var(--gold-light);
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 14px;
  text-align: center;
}

.nk-content .card p {
  color: var(--text-primary);
  font-size: 14px;
  margin-bottom: 8px;
}

/* POLICY & TOS CONTENT (privacy.php, tos.php, about_us.php) */
.ftr-sm {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-card) !important;
  border-radius: var(--radius-lg) !important;
  padding: 18px 22px !important;
  margin-bottom: 14px !important;
  box-shadow: var(--shadow-card) !important;
  outline: none !important;
  color: var(--text-primary) !important;
  text-align: left !important;
}

.ftr-sm p,
.ftr-sm span,
.ftr-sm div {
  color: var(--text-secondary) !important;
  line-height: 1.7 !important;
}

.ftr-sm h1,
.ftr-sm h2,
.ftr-sm h3,
.ftr-sm h4 {
  color: var(--gold-light) !important;
  margin-bottom: 10px !important;
}

.banner {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
  color: var(--gold-light) !important;
  border: 1px solid var(--border-gold) !important;
  border-radius: var(--radius-lg) !important;
  padding: 10px 16px !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  margin: 12px 0 8px !important;
  box-shadow: var(--shadow-card) !important;
  text-align: center !important;
}

/* ==========================================================================
   MATKA FINAL NUMBER CHART (SHUFFLED MULTI-THEME STYLING)
   ========================================================================== */
.mfnc-wrapper {
  width: 100%;
  max-width: 820px;
  margin: 12px auto 30px;
  padding: 0 10px;
  box-sizing: border-box;
}

/* 1. HERO HEADER: DARK AMETHYST & MAGENTA */
.mfnc-hero-card {
  background: linear-gradient(135deg, #180d2e 0%, #241142 50%, #130826 100%) !important;
  border: 2px solid #a855f7 !important;
  border-radius: var(--radius-lg, 14px) !important;
  padding: 22px 16px !important;
  text-align: center !important;
  margin-bottom: 16px !important;
  box-shadow: 0 10px 30px rgba(168, 85, 247, 0.25) !important;
  position: relative !important;
  overflow: hidden !important;
}

.mfnc-hero-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #ec4899, #a855f7, #06b6d4);
}

.mfnc-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%) !important;
  color: #ffffff !important;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1px;
  padding: 4px 14px;
  border-radius: 9999px;
  box-shadow: 0 2px 10px rgba(236, 72, 153, 0.4) !important;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.mfnc-hero-title {
  font-family: var(--font-heading, 'Outfit'), sans-serif;
  font-size: 22px;
  font-weight: 900;
  color: #ffffff !important;
  letter-spacing: 0.5px;
  margin: 0 0 6px;
  text-shadow: 0 0 15px rgba(168, 85, 247, 0.5) !important;
}

.mfnc-hero-sub {
  font-size: 13.5px;
  color: #c084fc !important;
  font-weight: 600;
  margin: 0;
}

/* 2. FORMULA CARD: LIGHT WARM CREAM */
.mfnc-formula-card {
  background: linear-gradient(135deg, #fffdf5 0%, #fef3c7 100%) !important;
  border: 2px solid #fde68a !important;
  border-radius: var(--radius-lg, 14px) !important;
  padding: 18px 16px !important;
  margin-bottom: 18px !important;
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.12) !important;
}

.mfnc-formula-header {
  text-align: center;
  border-bottom: 1px solid #fde68a !important;
  padding-bottom: 12px;
  margin-bottom: 14px;
}

.mfnc-formula-title {
  font-family: var(--font-heading, 'Outfit'), sans-serif;
  font-size: 17px;
  font-weight: 800;
  color: #78350f !important;
  margin: 0 0 4px;
}

.mfnc-formula-sub {
  font-size: 12.5px;
  color: #92400e !important;
  margin: 0;
}

.mfnc-steps-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.mfnc-step-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #ffffff !important;
  border: 1px solid #fde68a !important;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13.5px;
  color: #451a03 !important;
  line-height: 1.5;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.mfnc-step-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  color: #ffffff !important;
  font-family: var(--font-heading, 'Outfit'), sans-serif;
  font-weight: 900;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.35);
}

.mfnc-step-text {
  flex: 1;
}

.mfnc-highlight {
  color: #92400e !important;
  font-weight: 800;
  background: #fef08a !important;
  padding: 2px 7px;
  border-radius: 6px;
  border: 1px solid #facc15 !important;
  font-family: var(--font-heading, 'Outfit'), sans-serif;
  font-size: 13px;
}

.mfnc-highlight-green {
  color: #065f46 !important;
  font-weight: 800;
  background: #d1fae5 !important;
  padding: 2px 7px;
  border-radius: 6px;
  border: 1px solid #6ee7b7 !important;
  font-family: var(--font-heading, 'Outfit'), sans-serif;
  font-size: 13px;
}

.mfnc-note-alert {
  margin-top: 14px;
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%) !important;
  border: 1.5px solid #fca5a5 !important;
  border-radius: 10px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  color: #991b1b !important;
  line-height: 1.5;
}

.mfnc-note-alert b {
  color: #b91c1c !important;
  font-weight: 800;
}

/* 3. 10 FINAL NUMBER CARDS: LIGHT PEARL WITH DARK PODS */
.mfnc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

@media (max-width: 640px) {
  .mfnc-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

.mfnc-card {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-left: 4.5px solid #8b5cf6 !important;
  border-radius: 12px !important;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02) !important;
  transition: all 0.2s ease;
}

.mfnc-card:hover {
  transform: translateY(-2px);
  border-color: #cbd5e1 !important;
  border-left-color: #7c3aed !important;
  box-shadow: 0 6px 18px rgba(124, 58, 237, 0.12) !important;
}

.mfnc-card-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mfnc-final-num {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%) !important;
  color: #ffffff !important;
  font-family: var(--font-heading, 'Outfit'), sans-serif;
  font-size: 17px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3) !important;
  border: 1px solid #c7d2fe !important;
  flex-shrink: 0;
}

.mfnc-final-meta {
  display: flex;
  flex-direction: column;
}

.mfnc-final-label {
  font-size: 10.5px;
  color: #64748b !important;
  font-weight: 600;
}

.mfnc-final-val {
  font-size: 13.5px;
  font-weight: 800;
  color: #0f172a !important;
}

.mfnc-arrow {
  color: #8b5cf6 !important;
  font-size: 15px;
  font-weight: 900;
}

.mfnc-card-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.mfnc-chips-pod {
  display: flex;
  align-items: center;
  gap: 5px;
  background: #0f172a !important;
  padding: 4px 7px;
  border-radius: 9999px;
  border: 1px solid #334155 !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4) !important;
}

.mfnc-chip {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading, 'Outfit'), sans-serif;
  font-size: 14px;
  font-weight: 900;
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
  position: relative;
}

.mfnc-chip::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 5px;
  width: 8px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  transform: rotate(-25deg);
  pointer-events: none;
}

.mfnc-chip-ruby {
  background: radial-gradient(circle at 35% 28%, #fb7185 0%, #e11d48 55%, #881337 100%) !important;
  box-shadow: 0 2px 6px rgba(225, 29, 72, 0.45) !important;
}

.mfnc-chip-cyan {
  background: radial-gradient(circle at 35% 28%, #38bdf8 0%, #0284c7 55%, #0c4a6e 100%) !important;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.45) !important;
}

.mfnc-chip-emerald {
  background: radial-gradient(circle at 35% 28%, #34d399 0%, #059669 55%, #064e3b 100%) !important;
  box-shadow: 0 2px 6px rgba(5, 150, 105, 0.45) !important;
}

.mfnc-chip-amber {
  background: radial-gradient(circle at 35% 28%, #fde047 0%, #f59e0b 55%, #78350f 100%) !important;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.5) !important;
}

.mfnc-chips-tag {
  font-size: 10.5px;
  color: #64748b !important;
  font-weight: 600;
}

/* 4. GUIDE CARD: LIGHT MINT EMERALD */
.mfnc-guide-card {
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%) !important;
  border: 1.5px solid #a7f3d0 !important;
  border-radius: var(--radius-lg, 14px) !important;
  padding: 18px 20px !important;
  margin-bottom: 20px !important;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.08) !important;
  line-height: 1.75;
  font-size: 13.5px;
  color: #064e3b !important;
}

.mfnc-guide-card h3 {
  font-family: var(--font-heading, 'Outfit'), sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: #065f46 !important;
  margin: 0 0 10px;
  border-bottom: 1px solid #d1fae5 !important;
  padding-bottom: 8px;
}

.mfnc-guide-card p {
  color: #064e3b !important;
}

.mfnc-guide-card strong {
  color: #047857 !important;
}

/* ==========================================================================
   MATKA JODI COUNT CHART (SHUFFLED MULTI-THEME STYLING)
   ========================================================================== */
.mjcc-wrapper {
  width: 100%;
  max-width: 820px;
  margin: 12px auto 30px;
  padding: 0 10px;
  box-sizing: border-box;
}

/* 1. HERO HEADER: DARK OBSIDIAN & EMERALD */
.mjcc-hero-card {
  background: linear-gradient(135deg, #022c22 0%, #064e3b 55%, #021a14 100%) !important;
  border: 2px solid #10b981 !important;
  border-radius: var(--radius-lg, 14px) !important;
  padding: 22px 16px !important;
  text-align: center !important;
  margin-bottom: 16px !important;
  box-shadow: 0 10px 30px rgba(16, 185, 129, 0.25) !important;
  position: relative !important;
  overflow: hidden !important;
}

.mjcc-hero-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #10b981, #34d399, #06b6d4);
}

.mjcc-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: #ffffff !important;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1px;
  padding: 4px 14px;
  border-radius: 9999px;
  box-shadow: 0 2px 10px rgba(16, 185, 129, 0.4) !important;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.mjcc-hero-title {
  font-family: var(--font-heading, 'Outfit'), sans-serif;
  font-size: 22px;
  font-weight: 900;
  color: #ffffff !important;
  letter-spacing: 0.5px;
  margin: 0 0 6px;
  text-shadow: 0 0 15px rgba(16, 185, 129, 0.5) !important;
}

.mjcc-hero-sub {
  font-size: 13.5px;
  color: #a7f3d0 !important;
  font-weight: 600;
  margin: 0;
}

/* 2. CONCEPT CARD: LIGHT LEMON CREAM */
.mjcc-info-card {
  background: linear-gradient(135deg, #fefce8 0%, #fef08a 100%) !important;
  border: 1.5px solid #facc15 !important;
  border-radius: var(--radius-lg, 14px) !important;
  padding: 16px 18px !important;
  margin-bottom: 18px !important;
  box-shadow: 0 4px 16px rgba(234, 179, 8, 0.12) !important;
  display: flex !important;
  align-items: center;
  gap: 14px;
}

.mjcc-info-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: #fef9c3 !important;
  border: 1.5px solid #eab308 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.mjcc-info-content h3 {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 800;
  color: #854d0e !important;
  font-family: var(--font-heading, 'Outfit'), sans-serif;
}

.mjcc-info-content p {
  margin: 0;
  font-size: 13px;
  color: #713f12 !important;
  line-height: 1.5;
}

/* 3. JODI COUNT CARDS: LIGHT PEARL & CRISP TABLE */
.mjcc-cards-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 22px;
}

.mjcc-card {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-left-width: 5px !important;
  border-left-style: solid !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02) !important;
  transition: all 0.2s ease;
}

.mjcc-card:hover {
  border-color: #cbd5e1 !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08) !important;
}

.mjcc-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f1f5f9 !important;
}

.mjcc-count-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.mjcc-count-badge {
  padding: 4px 12px;
  border-radius: 6px;
  background: linear-gradient(135deg, #7c3aed, #6366f1);
  color: #ffffff !important;
  font-family: var(--font-heading, 'Outfit'), sans-serif;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 6px rgba(124, 58, 237, 0.25);
}

.mjcc-count-badge.badge-gold {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.25);
}

.mjcc-count-badge.badge-purple {
  background: linear-gradient(135deg, #8b5cf6, #6d28d9);
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(139, 92, 246, 0.25);
}

.mjcc-count-badge.badge-cyan {
  background: linear-gradient(135deg, #0284c7, #0369a1);
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.25);
}

.mjcc-count-badge.badge-emerald {
  background: linear-gradient(135deg, #059669, #047857);
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(5, 150, 105, 0.25);
}

.mjcc-count-badge.badge-ruby {
  background: linear-gradient(135deg, #e11d48, #be123c);
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(225, 29, 72, 0.25);
}

.mjcc-count-badge.badge-orange {
  background: linear-gradient(135deg, #ea580c, #c2410c);
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(234, 88, 12, 0.25);
}

.mjcc-count-badge.badge-pink {
  background: linear-gradient(135deg, #db2777, #be185d);
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(219, 39, 119, 0.25);
}

.mjcc-count-badge.badge-indigo {
  background: linear-gradient(135deg, #4f46e5, #3730a3);
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(79, 70, 229, 0.25);
}

.mjcc-count-badge.badge-teal {
  background: linear-gradient(135deg, #0d9488, #0f766e);
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(13, 148, 136, 0.25);
}

.mjcc-count-badge.badge-yellow {
  background: linear-gradient(135deg, #ca8a04, #a16207);
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(202, 138, 4, 0.25);
}

.mjcc-count-title {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b !important;
}

.mjcc-total-pill {
  font-size: 11.5px;
  font-weight: 700;
  color: #64748b !important;
  background: #f1f5f9 !important;
  padding: 3px 10px;
  border-radius: 9999px;
  border: 1px solid #e2e8f0 !important;
}

/* Chips */
.mjcc-chips-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mjcc-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 34px;
  padding: 0 10px;
  background: #f8fafc !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 8px;
  font-family: var(--font-heading, 'Outfit'), monospace, sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: #0f172a !important;
  letter-spacing: 0.5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  transition: all 0.15s ease;
}

.mjcc-chip:hover {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  border-color: #10b981 !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
}

/* 4. GUIDE CARD: LIGHT WARM CREAM */
.mjcc-guide-card {
  background: linear-gradient(135deg, #fffdf5 0%, #fef3c7 100%) !important;
  border: 1.5px solid #fde68a !important;
  border-radius: var(--radius-lg, 14px) !important;
  padding: 18px 20px !important;
  margin-bottom: 20px !important;
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.1) !important;
  line-height: 1.75;
  font-size: 13.5px;
  color: #451a03 !important;
}

.mjcc-guide-card h3 {
  font-family: var(--font-heading, 'Outfit'), sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: #78350f !important;
  margin: 0 0 10px;
  border-bottom: 1px solid #fde68a !important;
  padding-bottom: 8px;
}

.mjcc-guide-card p {
  color: #451a03 !important;
}

.mjcc-guide-card strong {
  color: #78350f !important;
}

/* ==========================================================================
   FIX OPEN TO CLOSE BY DATE (DHANVARSHA MULTI-THEME COMBINATION)
   ========================================================================== */
.fotc-wrapper {
  width: 100%;
  max-width: 820px;
  margin: 12px auto 30px;
  padding: 0 10px;
  box-sizing: border-box;
}

/* 1. HERO CARD: DARK ROYAL INDIGO */
.fotc-hero-card {
  background: linear-gradient(135deg, #1e1b4b 0%, #172554 60%, #0f172a 100%) !important;
  border: 2px solid #6366f1 !important;
  border-radius: var(--radius-lg, 14px) !important;
  padding: 22px 16px !important;
  text-align: center !important;
  margin-bottom: 16px !important;
  box-shadow: 0 10px 30px rgba(99, 102, 241, 0.25) !important;
  position: relative !important;
  overflow: hidden !important;
}

.fotc-hero-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #ec4899, #8b5cf6, #10b981);
}

.fotc-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%) !important;
  color: #ffffff !important;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1px;
  padding: 4px 14px;
  border-radius: 9999px;
  box-shadow: 0 2px 10px rgba(236, 72, 153, 0.4) !important;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.fotc-hero-title {
  font-family: var(--font-heading, 'Outfit'), sans-serif;
  font-size: 22px;
  font-weight: 900;
  color: #ffffff !important;
  letter-spacing: 0.5px;
  margin: 0 0 6px;
  text-shadow: 0 0 15px rgba(99, 102, 241, 0.5) !important;
}

.fotc-hero-sub {
  font-size: 13.5px;
  color: #c7d2fe !important;
  font-weight: 600;
  margin: 0;
}

/* 2. CONCEPT CARD: LIGHT GOLDEN PEARL */
.fotc-cream-card {
  background: linear-gradient(135deg, #fffbeb 0%, #fef9c3 100%) !important;
  border: 2px solid #f59e0b !important;
  border-radius: var(--radius-lg, 14px) !important;
  padding: 18px 20px !important;
  margin-bottom: 16px !important;
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.15) !important;
  color: #78350f !important;
}

.fotc-cream-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fef3c7 !important;
  color: #92400e !important;
  font-size: 11px;
  font-weight: 900;
  padding: 3px 10px;
  border-radius: 6px;
  border: 1px solid #f59e0b !important;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.fotc-cream-title {
  font-family: var(--font-heading, 'Outfit'), sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: #78350f !important;
  margin: 0 0 8px;
}

.fotc-cream-list {
  margin: 0;
  padding-left: 18px;
  font-size: 13.5px;
  line-height: 1.6;
  color: #92400e !important;
}

.fotc-cream-list li {
  margin-bottom: 5px;
}

.fotc-cream-list strong {
  color: #78350f !important;
}

/* 3. TODAY ACTIVE CARD: DARK OBSIDIAN & EMERALD */
.fotc-today-card {
  background: linear-gradient(135deg, #022c22 0%, #064e3b 50%, #021a14 100%) !important;
  border: 2px solid #10b981 !important;
  border-radius: var(--radius-lg, 14px) !important;
  padding: 18px 20px !important;
  margin-bottom: 18px !important;
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.25) !important;
  text-align: center !important;
}

.fotc-today-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(16, 185, 129, 0.2) !important;
  border: 1px solid #10b981 !important;
  color: #34d399 !important;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 12px;
  border-radius: 9999px;
  margin-bottom: 8px;
}

.fotc-today-title {
  font-family: var(--font-heading, 'Outfit'), sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: #ffffff !important;
  margin: 0 0 8px;
}

.fotc-today-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 6px;
}

.fotc-today-chip {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: #ffffff !important;
  font-family: var(--font-heading, 'Outfit'), sans-serif;
  font-size: 20px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4) !important;
  border: 1.5px solid #6ee7b7 !important;
}

.fotc-today-sub {
  font-size: 12.5px;
  color: #a7f3d0 !important;
  margin: 0;
}

/* 4. DATES GRID: LIGHT PEARL & CRISP TABLE */
.fotc-table-card {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: var(--radius-lg, 14px) !important;
  padding: 16px !important;
  margin-bottom: 20px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
}

.fotc-table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f1f5f9 !important;
}

.fotc-table-title {
  font-family: var(--font-heading, 'Outfit'), sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: #0f172a !important;
  margin: 0 0 2px;
}

.fotc-table-sub {
  font-size: 11px;
  color: #64748b !important;
  font-weight: 600;
}

.fotc-table-badge {
  background: #e0e7ff !important;
  color: #4338ca !important;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 9999px;
  border: 1px solid #c7d2fe !important;
}

.fotc-dates-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

@media (max-width: 600px) {
  .fotc-dates-grid {
    grid-template-columns: 1fr;
  }
}

.fotc-date-row {
  background: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 10px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.15s ease;
}

.fotc-date-row:hover {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05) !important;
}

.fotc-date-row.is-today {
  background: #ecfdf5 !important;
  border-color: #10b981 !important;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.25) !important;
}

.fotc-date-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading, 'Outfit'), sans-serif;
  font-size: 13.5px;
  font-weight: 800;
  color: #1e293b !important;
}

.fotc-date-tag-badge {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
  color: #ffffff !important;
  font-size: 12px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(59, 130, 246, 0.3) !important;
}

.fotc-date-row.is-today .fotc-date-tag-badge {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  box-shadow: 0 2px 5px rgba(16, 185, 129, 0.3) !important;
}

.today-marker {
  color: #059669 !important;
  font-size: 11px;
  font-weight: 800;
}

.fotc-chips-pod {
  display: flex;
  align-items: center;
  gap: 5px;
}

.fotc-chip {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading, 'Outfit'), sans-serif;
  font-size: 13.5px;
  font-weight: 900;
  color: #ffffff !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
  position: relative;
}

.fotc-chip::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 5px;
  width: 8px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  transform: rotate(-25deg);
  pointer-events: none;
}

.fotc-chip-ruby {
  background: radial-gradient(circle at 35% 28%, #fb7185 0%, #e11d48 55%, #881337 100%) !important;
}

.fotc-chip-cyan {
  background: radial-gradient(circle at 35% 28%, #38bdf8 0%, #0284c7 55%, #0c4a6e 100%) !important;
}

.fotc-chip-emerald {
  background: radial-gradient(circle at 35% 28%, #34d399 0%, #059669 55%, #064e3b 100%) !important;
}

.fotc-chip-amber {
  background: radial-gradient(circle at 35% 28%, #fde047 0%, #f59e0b 55%, #78350f 100%) !important;
  color: #ffffff !important;
}

/* 5. GUIDE CARD: LIGHT LEMON CREAM */
.fotc-guide-card {
  background: linear-gradient(135deg, #fefce8 0%, #fef08a 100%) !important;
  border: 1.5px solid #facc15 !important;
  border-radius: var(--radius-lg, 14px) !important;
  padding: 18px 20px !important;
  margin-bottom: 20px !important;
  box-shadow: 0 4px 16px rgba(234, 179, 8, 0.1) !important;
  line-height: 1.7;
  font-size: 13.5px;
  color: #713f12 !important;
}

.fotc-guide-card h3 {
  font-family: var(--font-heading, 'Outfit'), sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: #854d0e !important;
  margin: 0 0 8px;
  border-bottom: 1px solid #fde047 !important;
  padding-bottom: 6px;
}

.fotc-guide-card p {
  color: #713f12 !important;
}

.fotc-guide-card strong {
  color: #854d0e !important;
}

/* ==========================================================================
   MATKA JODI FAMILY CHART (SHUFFLED MULTI-THEME STYLING)
   ========================================================================== */
.mjfc-wrapper {
  width: 100%;
  max-width: 820px;
  margin: 12px auto 30px;
  padding: 0 10px;
  box-sizing: border-box;
}

/* 1. HERO CARD: LIGHT GOLDEN PEARL */
.mjfc-hero-card {
  background: linear-gradient(135deg, #ffffff 0%, #fffbeb 50%, #fef3c7 100%) !important;
  border: 2px solid #f59e0b !important;
  border-radius: var(--radius-lg, 14px) !important;
  padding: 22px 16px !important;
  text-align: center !important;
  margin-bottom: 16px !important;
  box-shadow: 0 8px 25px rgba(245, 158, 11, 0.18) !important;
  position: relative !important;
  overflow: hidden !important;
}

.mjfc-hero-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #f59e0b, #ec4899, #8b5cf6);
}

.mjfc-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  color: #ffffff !important;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1px;
  padding: 4px 14px;
  border-radius: 9999px;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.35) !important;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.mjfc-hero-title {
  font-family: var(--font-heading, 'Outfit'), sans-serif;
  font-size: 22px;
  font-weight: 900;
  color: #78350f !important;
  letter-spacing: 0.5px;
  margin: 0 0 6px;
  text-shadow: none !important;
}

.mjfc-hero-sub {
  font-size: 13.5px;
  color: #92400e !important;
  font-weight: 600;
  margin: 0;
}

/* 2. CONCEPT CARD: DARK ROYAL INDIGO */
.mjfc-cream-card {
  background: linear-gradient(135deg, #1e1b4b 0%, #172554 60%, #0f172a 100%) !important;
  border: 2px solid #6366f1 !important;
  border-radius: var(--radius-lg, 14px) !important;
  padding: 18px 20px !important;
  margin-bottom: 18px !important;
  box-shadow: 0 8px 24px rgba(99, 102, 241, 0.25) !important;
  color: #c7d2fe !important;
}

.mjfc-cream-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(99, 102, 241, 0.2) !important;
  color: #a5b4fc !important;
  font-size: 11px;
  font-weight: 900;
  padding: 3px 10px;
  border-radius: 6px;
  border: 1px solid #6366f1 !important;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.mjfc-cream-title {
  font-family: var(--font-heading, 'Outfit'), sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: #ffffff !important;
  margin: 0 0 8px;
  text-shadow: 0 0 10px rgba(99, 102, 241, 0.4) !important;
}

.mjfc-cream-list {
  margin: 0;
  padding-left: 18px;
  font-size: 13.5px;
  line-height: 1.6;
  color: #c7d2fe !important;
}

.mjfc-cream-list li {
  margin-bottom: 6px;
}

.mjfc-cream-list strong {
  color: #ffffff !important;
}

/* 3. FAMILY CARDS GRID (HYBRID SHUFFLED: LIGHT PEARL, HALF-RED CORAL, FULL-RED OBSIDIAN) */
.mjfc-cards-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 22px;
}

.mjfc-card {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-left-width: 5px !important;
  border-left-style: solid !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02) !important;
  transition: all 0.2s ease;
}

.mjfc-card:hover {
  border-color: #cbd5e1 !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08) !important;
}

/* Special styling for Half-Red Family */
.mjfc-card.card-half-red {
  background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%) !important;
  border: 1.5px solid #fda4af !important;
  border-left-width: 5px !important;
  border-left-style: solid !important;
  box-shadow: 0 2px 10px rgba(225, 29, 72, 0.08) !important;
}

.mjfc-card.card-half-red .mjfc-family-title {
  color: #9f1239 !important;
}

.mjfc-card.card-half-red .mjfc-chip {
  background: #ffffff !important;
  border-color: #fecdd3 !important;
  color: #9f1239 !important;
}

.mjfc-card.card-half-red .mjfc-chip:hover {
  background: linear-gradient(135deg, #f43f5e, #be123c) !important;
  border-color: #f43f5e !important;
  color: #ffffff !important;
}

/* Special styling for Full-Red Family */
.mjfc-card.card-full-red {
  background: linear-gradient(135deg, #180505 0%, #360a0a 60%, #1f0404 100%) !important;
  border: 1.5px solid #ef4444 !important;
  border-left-width: 5px !important;
  border-left-style: solid !important;
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.25) !important;
}

.mjfc-card.card-full-red .mjfc-card-header {
  border-bottom-color: rgba(239, 68, 68, 0.25) !important;
}

.mjfc-card.card-full-red .mjfc-family-title {
  color: #fecdd3 !important;
}

.mjfc-card.card-full-red .mjfc-total-pill {
  background: rgba(239, 68, 68, 0.2) !important;
  color: #fca5a5 !important;
  border-color: #dc2626 !important;
}

.mjfc-card.card-full-red .mjfc-chip {
  background: #450a0a !important;
  border-color: #b91c1c !important;
  color: #ffffff !important;
}

.mjfc-card.card-full-red .mjfc-chip:hover {
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  border-color: #f87171 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4) !important;
}

.mjfc-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f1f5f9 !important;
}

.mjfc-family-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.mjfc-family-badge {
  padding: 4px 14px;
  border-radius: 6px;
  color: #ffffff !important;
  font-family: var(--font-heading, 'Outfit'), sans-serif;
  font-size: 13.5px;
  font-weight: 900;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
}

.mjfc-family-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #1e293b !important;
}

.mjfc-total-pill {
  font-size: 11.5px;
  font-weight: 700;
  color: #64748b !important;
  background: #f1f5f9 !important;
  padding: 3px 10px;
  border-radius: 9999px;
  border: 1px solid #e2e8f0 !important;
}

/* Chips */
.mjfc-chips-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mjfc-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 34px;
  padding: 0 10px;
  background: #f8fafc !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 8px;
  font-family: var(--font-heading, 'Outfit'), monospace, sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: #0f172a !important;
  letter-spacing: 0.5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  transition: all 0.15s ease;
}

.mjfc-chip:hover {
  background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%) !important;
  border-color: #7c3aed !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.25) !important;
}

/* 4. GUIDE CARD: LIGHT MINT EMERALD */
.mjfc-guide-card {
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%) !important;
  border: 1.5px solid #a7f3d0 !important;
  border-radius: var(--radius-lg, 14px) !important;
  padding: 18px 20px !important;
  margin-bottom: 20px !important;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.08) !important;
  line-height: 1.7;
  font-size: 13.5px;
  color: #064e3b !important;
}

.mjfc-guide-card h3 {
  font-family: var(--font-heading, 'Outfit'), sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: #065f46 !important;
  margin: 0 0 8px;
  border-bottom: 1px solid #d1fae5 !important;
  padding-bottom: 6px;
}

.mjfc-guide-card p {
  color: #064e3b !important;
}

.mjfc-guide-card strong {
  color: #047857 !important;
}


/* ==========================================================================
   PENAL COUNT CHART (THEME 1 SHUFFLED MULTI-PALETTE STYLING)
   ========================================================================== */
.pcc-wrapper {
  width: 100%;
  max-width: 820px;
  margin: 12px auto 30px;
  padding: 0 10px;
  box-sizing: border-box;
}

/* 1. HERO HEADER: DARK THEME / LUXURY GOLD */
.pcc-hero-card {
  background: linear-gradient(135deg, #090d16 0%, #131d31 60%, #080c14 100%) !important;
  border: 2px solid #f59e0b !important;
  border-radius: 14px !important;
  padding: 22px 16px !important;
  text-align: center !important;
  margin-bottom: 16px !important;
  box-shadow: 0 10px 30px rgba(245, 158, 11, 0.22) !important;
  position: relative !important;
  overflow: hidden !important;
}

.pcc-hero-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #f59e0b, #10b981, #06b6d4);
}

.pcc-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: #ffffff !important;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1px;
  padding: 4px 14px;
  border-radius: 9999px;
  box-shadow: 0 2px 10px rgba(16, 185, 129, 0.4) !important;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.pcc-hero-title {
  font-family: var(--font-heading, 'Outfit'), sans-serif;
  font-size: 22px;
  font-weight: 900;
  color: #fbbf24 !important;
  letter-spacing: 0.5px;
  margin: 0 0 6px;
  text-shadow: 0 0 15px rgba(245, 158, 11, 0.4) !important;
}

.pcc-hero-sub {
  font-size: 13.5px;
  color: #cbd5e1 !important;
  font-weight: 600;
  margin: 0;
}

/* 2. CONCEPT CARD: LIGHT GOLDEN PEARL */
.pcc-concept-card {
  background: linear-gradient(135deg, #fffbeb 0%, #fef9c3 100%) !important;
  border: 2px solid #f59e0b !important;
  border-radius: 14px !important;
  padding: 18px 20px !important;
  margin-bottom: 18px !important;
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.15) !important;
  color: #78350f !important;
}

.pcc-concept-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fef3c7 !important;
  color: #92400e !important;
  font-size: 11px;
  font-weight: 900;
  padding: 3px 10px;
  border-radius: 6px;
  border: 1px solid #f59e0b !important;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.pcc-concept-title {
  font-family: var(--font-heading, 'Outfit'), sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: #78350f !important;
  margin: 0 0 8px;
}

.pcc-concept-list {
  margin: 0;
  padding-left: 18px;
  font-size: 13.5px;
  line-height: 1.65;
  color: #92400e !important;
}

.pcc-concept-list li {
  margin-bottom: 6px;
}

.pcc-concept-list strong {
  color: #78350f !important;
}

/* 3. PENAL COUNT CARDS: LIGHT PEARL & CRISP TABLE */
.pcc-cards-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 22px;
}

.pcc-card {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-left-width: 5px !important;
  border-left-style: solid !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02) !important;
  transition: all 0.2s ease;
}

.pcc-card:hover {
  border-color: #cbd5e1 !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08) !important;
}

.pcc-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f1f5f9 !important;
}

.pcc-count-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.pcc-count-badge {
  padding: 4px 14px;
  border-radius: 6px;
  color: #ffffff !important;
  font-family: var(--font-heading, 'Outfit'), sans-serif;
  font-size: 13.5px;
  font-weight: 900;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
}

.pcc-count-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #1e293b !important;
}

.pcc-total-pill {
  font-size: 11.5px;
  font-weight: 700;
  color: #64748b !important;
  background: #f1f5f9 !important;
  padding: 3px 10px;
  border-radius: 9999px;
  border: 1px solid #e2e8f0 !important;
}

/* 3-Digit Panna Chips */
.pcc-chips-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pcc-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 34px;
  padding: 0 10px;
  background: #f8fafc !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 8px;
  font-family: var(--font-heading, 'Outfit'), monospace, sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: #0f172a !important;
  letter-spacing: 0.5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  transition: all 0.15s ease;
}

.pcc-chip:hover {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  border-color: #f59e0b !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3) !important;
}

/* 4. GUIDE & FAQ CARD: LIGHT MINT EMERALD */
.pcc-guide-card {
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%) !important;
  border: 1.5px solid #a7f3d0 !important;
  border-radius: 14px !important;
  padding: 20px 22px !important;
  margin-bottom: 20px !important;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.08) !important;
  line-height: 1.7;
  font-size: 13.5px;
  color: #064e3b !important;
}

.pcc-guide-card h2 {
  font-family: var(--font-heading, 'Outfit'), sans-serif;
  font-size: 17px;
  font-weight: 800;
  color: #065f46 !important;
  margin: 16px 0 8px;
  border-bottom: 1px solid #d1fae5 !important;
  padding-bottom: 6px;
}

.pcc-guide-card h3 {
  font-family: var(--font-heading, 'Outfit'), sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: #065f46 !important;
  margin: 12px 0 4px;
}

.pcc-guide-card p {
  margin: 0 0 10px;
  color: #064e3b !important;
}

.pcc-faq-item {
  background: #ffffff !important;
  border: 1px solid #a7f3d0 !important;
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 10px;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.06);
}

.pcc-faq-item h4 {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 800;
  color: #047857 !important;
  font-family: var(--font-heading, 'Outfit'), sans-serif;
}

.pcc-faq-item p {
  margin: 0;
  font-size: 13px;
  color: #064e3b !important;
}


/* ==========================================================================
   PENAL TOTAL CHART (THEME 1 SHUFFLED MULTI-PALETTE STYLING)
   ========================================================================== */
.ptc-wrapper {
  width: 100%;
  max-width: 820px;
  margin: 12px auto 30px;
  padding: 0 10px;
  box-sizing: border-box;
}

/* 1. HERO HEADER: DARK ROYAL INDIGO & VIOLET NEON */
.ptc-hero-card {
  background: linear-gradient(135deg, #1e1b4b 0%, #2e1065 50%, #0f172a 100%) !important;
  border: 2px solid #a855f7 !important;
  border-radius: 14px !important;
  padding: 22px 16px !important;
  text-align: center !important;
  margin-bottom: 16px !important;
  box-shadow: 0 10px 30px rgba(168, 85, 247, 0.25) !important;
  position: relative !important;
  overflow: hidden !important;
}

.ptc-hero-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #ec4899, #a855f7, #06b6d4);
}

.ptc-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%) !important;
  color: #ffffff !important;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1px;
  padding: 4px 14px;
  border-radius: 9999px;
  box-shadow: 0 2px 10px rgba(168, 85, 247, 0.4) !important;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.ptc-hero-title {
  font-family: var(--font-heading, 'Outfit'), sans-serif;
  font-size: 22px;
  font-weight: 900;
  color: #ffffff !important;
  letter-spacing: 0.5px;
  margin: 0 0 6px;
  text-shadow: 0 0 15px rgba(168, 85, 247, 0.5) !important;
}

.ptc-hero-sub {
  font-size: 13.5px;
  color: #e9d5ff !important;
  font-weight: 600;
  margin: 0;
}

/* 2. CONCEPT CARD: LIGHT LEMON CREAM */
.ptc-concept-card {
  background: linear-gradient(135deg, #fefce8 0%, #fef08a 100%) !important;
  border: 1.5px solid #facc15 !important;
  border-radius: 14px !important;
  padding: 18px 20px !important;
  margin-bottom: 18px !important;
  box-shadow: 0 4px 16px rgba(234, 179, 8, 0.12) !important;
  color: #713f12 !important;
}

.ptc-concept-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #16a34a !important;
  color: #ffffff !important;
  font-size: 11px;
  font-weight: 900;
  padding: 3px 10px;
  border-radius: 6px;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.ptc-concept-title {
  font-family: var(--font-heading, 'Outfit'), sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: #854d0e !important;
  margin: 0 0 8px;
}

.ptc-concept-list {
  margin: 0;
  padding-left: 18px;
  font-size: 13.5px;
  line-height: 1.65;
  color: #713f12 !important;
}

.ptc-concept-list li {
  margin-bottom: 6px;
}

.ptc-concept-list strong {
  color: #854d0e !important;
}

/* 3. PENAL TOTAL CARDS: LIGHT PEARL & CRISP TABLE */
.ptc-cards-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 22px;
}

.ptc-card {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-left-width: 5px !important;
  border-left-style: solid !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02) !important;
  transition: all 0.2s ease;
}

.ptc-card:hover {
  border-color: #cbd5e1 !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08) !important;
}

.ptc-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f1f5f9 !important;
}

.ptc-count-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.ptc-count-badge {
  padding: 4px 14px;
  border-radius: 6px;
  color: #ffffff !important;
  font-family: var(--font-heading, 'Outfit'), sans-serif;
  font-size: 13.5px;
  font-weight: 900;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
}

.ptc-count-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #1e293b !important;
}

.ptc-total-pill {
  font-size: 11.5px;
  font-weight: 700;
  color: #64748b !important;
  background: #f1f5f9 !important;
  padding: 3px 10px;
  border-radius: 9999px;
  border: 1px solid #e2e8f0 !important;
}

/* 3-Digit Panna Chips */
.ptc-chips-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ptc-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 34px;
  padding: 0 10px;
  background: #f8fafc !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 8px;
  font-family: var(--font-heading, 'Outfit'), monospace, sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: #0f172a !important;
  letter-spacing: 0.5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  transition: all 0.15s ease;
}

.ptc-chip:hover {
  background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%) !important;
  border-color: #7c3aed !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.25) !important;
}

/* 4. GUIDE & FAQ CARD: LIGHT WARM CREAM */
.ptc-guide-card {
  background: linear-gradient(135deg, #fffdf5 0%, #fef3c7 100%) !important;
  border: 1.5px solid #fde68a !important;
  border-radius: 14px !important;
  padding: 20px 22px !important;
  margin-bottom: 20px !important;
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.1) !important;
  line-height: 1.7;
  font-size: 13.5px;
  color: #451a03 !important;
}

.ptc-guide-card h2 {
  font-family: var(--font-heading, 'Outfit'), sans-serif;
  font-size: 17px;
  font-weight: 800;
  color: #78350f !important;
  margin: 16px 0 8px;
  border-bottom: 1px solid #fde68a !important;
  padding-bottom: 6px;
}

.ptc-guide-card h3 {
  font-family: var(--font-heading, 'Outfit'), sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: #78350f !important;
  margin: 12px 0 4px;
}

.ptc-guide-card p {
  margin: 0 0 10px;
  color: #451a03 !important;
}

.ptc-faq-item {
  background: #ffffff !important;
  border: 1px solid #fde68a !important;
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 10px;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.06);
}

.ptc-faq-item h4 {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 800;
  color: #78350f !important;
  font-family: var(--font-heading, 'Outfit'), sans-serif;
}

.ptc-faq-item p {
  margin: 0;
  font-size: 13px;
  color: #451a03 !important;
}

/* ==========================================================================
   THEME 1 - ALL 22 CARD PANNA PENAL PATTI CHART (SHUFFLED COLOR COMBINATION)
   ========================================================================== */
.a22-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 8px 30px;
  box-sizing: border-box;
}

/* 1. HERO HEADER (EMERALD & CYAN NEON) */
.a22-hero-card {
  background: linear-gradient(135deg, #022c22 0%, #064e3b 50%, #083344 100%) !important;
  border: 2px solid #10b981 !important;
  border-radius: 16px !important;
  padding: 24px 18px 20px !important;
  margin-bottom: 20px !important;
  text-align: center !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 0 25px rgba(16, 185, 129, 0.25) !important;
  position: relative;
  overflow: hidden;
}

.a22-hero-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, #34d399, #06b6d4, #10b981, #38bdf8);
}

.a22-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #06b6d4, #0891b2) !important;
  color: #ffffff !important;
  padding: 5px 16px;
  border-radius: 50px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  box-shadow: 0 2px 10px rgba(6, 182, 212, 0.4);
  margin-bottom: 12px;
}

.a22-hero-title {
  font-family: var(--font-heading, 'Outfit'), sans-serif;
  font-size: clamp(20px, 4vw, 30px);
  font-weight: 900;
  color: #ffffff !important;
  margin: 0 0 8px !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
  letter-spacing: -0.3px;
  line-height: 1.25;
}

.a22-hero-sub {
  font-size: 13.5px;
  color: #a7f3d0 !important;
  max-width: 780px;
  margin: 0 auto;
  line-height: 1.5;
  font-weight: 500;
}

/* 2. CONCEPT BANNER (SOFT LAVENDER/LILAC) */
.a22-concept-card {
  background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%) !important;
  border: 1.5px solid #c4b5fd !important;
  border-radius: 14px !important;
  padding: 16px 18px !important;
  margin-bottom: 20px !important;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.08) !important;
}

.a22-concept-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.a22-concept-badge {
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 6px;
  text-transform: uppercase;
}

.a22-concept-title {
  font-family: var(--font-heading, 'Outfit'), sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: #4c1d95 !important;
  margin: 0;
}

.a22-concept-desc {
  font-size: 13px;
  color: #5b21b6 !important;
  margin: 0 0 10px;
  line-height: 1.6;
}

.a22-formula-box {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #ffffff;
  border: 1px dashed #8b5cf6;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 12.5px;
  color: #4c1d95;
  font-weight: 700;
}

.a22-formula-box span {
  color: #6d28d9;
}

/* 3. QUICK NAVIGATOR BAR */
.a22-nav-bar {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 22px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.a22-nav-label {
  font-size: 11.5px;
  font-weight: 800;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 8px;
  display: block;
  text-align: center;
}

.a22-nav-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.a22-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
  color: #ffffff !important;
  text-decoration: none !important;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.a22-nav-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}

/* 4. SECTION HEADING CARDS */
.a22-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
  border: 1.5px solid #4338ca;
  border-radius: 12px;
  padding: 12px 18px;
  margin-bottom: 16px;
  box-shadow: 0 4px 12px rgba(30, 27, 75, 0.15);
}

.a22-section-heading h2 {
  font-family: var(--font-heading, 'Outfit'), sans-serif;
  font-size: 17px;
  font-weight: 800;
  color: #ffffff !important;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.a22-section-heading .a22-count-badge {
  background: linear-gradient(135deg, #38bdf8, #0284c7);
  color: #ffffff;
  font-size: 11.5px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 20px;
  letter-spacing: 0.5px;
}

/* 5. SECTION 1: FAV CARDS GRID */
.a22-fav-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 28px;
}

@media (max-width: 640px) {
  .a22-fav-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}

@media (max-width: 420px) {
  .a22-fav-grid {
    grid-template-columns: 1fr;
  }
}

.a22-fav-card {
  background: #ffffff !important;
  border: 1.5px solid #fecdd3 !important;
  border-radius: 12px !important;
  padding: 14px !important;
  box-shadow: 0 2px 8px rgba(225, 29, 72, 0.05) !important;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
}

.a22-fav-card:hover {
  transform: translateY(-2px);
  border-color: #f43f5e !important;
  box-shadow: 0 6px 16px rgba(225, 29, 72, 0.12) !important;
}

.a22-fav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #ffe4e6;
  padding-bottom: 8px;
  margin-bottom: 10px;
}

.a22-fav-digit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, #e11d48, #be123c);
  color: #ffffff;
  font-size: 17px;
  font-weight: 900;
  box-shadow: 0 2px 6px rgba(225, 29, 72, 0.3);
}

.a22-fav-title {
  font-size: 12.5px;
  font-weight: 800;
  color: #9f1239;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.a22-fav-chips {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.a22-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff1f2;
  border: 1px solid #fecdd3;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 800;
  color: #be123c;
  padding: 5px 2px;
  font-family: monospace, sans-serif;
  transition: all 0.15s ease;
}

.a22-chip:hover {
  background: #e11d48;
  color: #ffffff;
  border-color: #e11d48;
}

/* 6. SECTION 2: ALL 22 SATTA CARDS */
.a22-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}

@media (max-width: 640px) {
  .a22-cards-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

.a22-card {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 14px !important;
  padding: 16px !important;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05) !important;
  transition: all 0.2s ease;
}

.a22-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.09) !important;
}

.a22-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid #f1f5f9;
}

.a22-card-badge {
  padding: 6px 14px;
  border-radius: 8px;
  color: #ffffff;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  font-family: monospace, sans-serif;
}

.a22-card-count {
  font-size: 11.5px;
  font-weight: 700;
  color: #64748b;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  padding: 3px 8px;
  border-radius: 6px;
}

.a22-card-panna-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}

@media (max-width: 380px) {
  .a22-card-panna-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.a22-card-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 800;
  color: #1e293b;
  padding: 5px 2px;
  font-family: monospace, sans-serif;
  transition: all 0.15s ease;
}

.a22-card-chip:hover {
  background: #0f172a;
  color: #ffffff;
  border-color: #0f172a;
}

/* 7. SECTION 3: GUIDE & FAQ CARD */
.a22-guide-card {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%) !important;
  border: 1.5px solid #86efac !important;
  border-radius: 14px !important;
  padding: 22px 24px !important;
  margin-bottom: 20px !important;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.08) !important;
  line-height: 1.7;
  font-size: 13.5px;
  color: #064e3b !important;
}

.a22-guide-card h2 {
  font-family: var(--font-heading, 'Outfit'), sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: #065f46 !important;
  margin: 16px 0 8px;
  border-bottom: 1px solid #86efac !important;
  padding-bottom: 6px;
}

.a22-guide-card h2:first-child {
  margin-top: 0;
}

.a22-guide-card p {
  margin: 0 0 12px;
  color: #064e3b !important;
}

.a22-faq-item {
  background: #ffffff !important;
  border: 1px solid #86efac !important;
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 10px;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.05);
}

.a22-faq-item h4 {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 800;
  color: #065f46 !important;
  font-family: var(--font-heading, 'Outfit'), sans-serif;
}

.a22-faq-item p {
  margin: 0;
  font-size: 13px;
  color: #064e3b !important;
}

.a22-jump-top-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #059669, #047857);
  color: #ffffff !important;
  font-weight: 700;
  font-size: 13px;
  padding: 8px 24px;
  border-radius: 50px;
  text-decoration: none !important;
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.3);
  transition: all 0.2s ease;
}

.a22-jump-top-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(5, 150, 105, 0.4);
}
/* ==========================================================================
   THEME 1 - MATKA FREE OPEN FIX ANK REDESIGN
   ========================================================================== */
.mfo-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 8px 30px;
  box-sizing: border-box;
}

/* 1. HERO HEADER */
.mfo-hero-card {
  background: linear-gradient(135deg, #0b132b 0%, #1c2541 50%, #1e1b4b 100%) !important;
  border: 2px solid #3b82f6 !important;
  border-radius: 16px !important;
  padding: 24px 18px 20px !important;
  margin-bottom: 20px !important;
  text-align: center !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 0 25px rgba(59, 130, 246, 0.25) !important;
  position: relative;
  overflow: hidden;
}

.mfo-hero-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, #10b981, #3b82f6, #8b5cf6, #ec4899);
}

.mfo-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #10b981, #059669) !important;
  color: #ffffff !important;
  padding: 5px 16px;
  border-radius: 50px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  box-shadow: 0 2px 10px rgba(16, 185, 129, 0.4);
  margin-bottom: 12px;
}

.mfo-pulse-dot {
  width: 8px;
  height: 8px;
  background: #ffffff;
  border-radius: 50%;
  display: inline-block;
  animation: mfoPulse 1.8s infinite ease-in-out;
}

@keyframes mfoPulse {
  0% { transform: scale(0.9); opacity: 0.8; box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); }
  70% { transform: scale(1.1); opacity: 1; box-shadow: 0 0 0 6px rgba(255, 255, 255, 0); }
  100% { transform: scale(0.9); opacity: 0.8; box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

.mfo-hero-title {
  font-family: var(--font-heading, 'Outfit'), sans-serif;
  font-size: clamp(22px, 4.5vw, 32px);
  font-weight: 900;
  color: #ffffff !important;
  margin: 0 0 8px !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
  letter-spacing: -0.3px;
  line-height: 1.25;
}

.mfo-hero-sub {
  font-size: 13.5px;
  color: #93c5fd !important;
  max-width: 760px;
  margin: 0 auto;
  line-height: 1.55;
  font-weight: 500;
}

/* 2. DATE & STATUS BAR */
.mfo-date-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 18px;
  margin-bottom: 22px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.mfo-date-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
  font-family: var(--font-heading, 'Outfit'), sans-serif;
}

.mfo-date-tag {
  background: #eff6ff;
  color: #2563eb;
  border: 1px solid #bfdbfe;
  padding: 4px 12px;
  border-radius: 6px;
  font-family: monospace, sans-serif;
  font-size: 13.5px;
  font-weight: 800;
}

.mfo-type-pill {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  padding: 5px 14px;
  border-radius: 50px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.3);
}

/* 3. MARKETS GRID */
.mfo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}

@media (max-width: 768px) {
  .mfo-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

.mfo-market-card {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 14px !important;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05) !important;
  overflow: hidden !important;
  display: flex;
  flex-direction: column;
  transition: all 0.2s ease;
}

.mfo-market-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1) !important;
  border-color: #cbd5e1 !important;
}

.mfo-card-header {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
  padding: 12px 14px !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 2px solid #3b82f6 !important;
}

.mfo-market-title {
  font-family: var(--font-heading, 'Outfit'), sans-serif;
  font-size: 14.5px;
  font-weight: 800;
  color: #ffffff !important;
  margin: 0;
  line-height: 1.3;
  display: flex;
  align-items: center;
  gap: 6px;
}

.mfo-market-title svg {
  color: #38bdf8;
  flex-shrink: 0;
}

.mfo-market-badge {
  background: rgba(59, 130, 246, 0.2);
  border: 1px solid rgba(59, 130, 246, 0.4);
  color: #60a5fa;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 4px;
  text-transform: uppercase;
  white-space: nowrap;
}

.mfo-card-body {
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1;
  background: #fafafa;
}

.mfo-ank-label {
  font-size: 11px;
  font-weight: 800;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.mfo-ank-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}

.mfo-ank-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  padding: 6px 12px;
  background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%);
  border: 1.5px solid #cbd5e1;
  border-radius: 8px;
  color: #0f172a;
  font-size: 17px;
  font-weight: 900;
  font-family: monospace, sans-serif;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  transition: all 0.15s ease;
}

.mfo-ank-chip:hover {
  background: #0f172a;
  color: #ffffff;
  border-color: #0f172a;
  transform: scale(1.05);
}

.mfo-empty-chip {
  font-size: 13px;
  font-weight: 700;
  color: #94a3b8;
  background: #f1f5f9;
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px dashed #cbd5e1;
}

/* 4. GUIDE & FAQ CARD */
.mfo-guide-card {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
  border: 1.5px solid #93c5fd !important;
  border-radius: 14px !important;
  padding: 22px 24px !important;
  margin-bottom: 20px !important;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.08) !important;
  line-height: 1.7;
  font-size: 13.5px;
  color: #1e3a8a !important;
}

.mfo-guide-card h2 {
  font-family: var(--font-heading, 'Outfit'), sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: #1e40af !important;
  margin: 16px 0 8px;
  border-bottom: 1px solid #bfdbfe !important;
  padding-bottom: 6px;
}

.mfo-guide-card h2:first-child {
  margin-top: 0;
}

.mfo-guide-card p {
  margin: 0 0 12px;
  color: #1e3a8a !important;
}

.mfo-faq-item {
  background: #ffffff !important;
  border: 1px solid #bfdbfe !important;
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 10px;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.05);
}

.mfo-faq-item h4 {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 800;
  color: #1e40af !important;
  font-family: var(--font-heading, 'Outfit'), sans-serif;
}

.mfo-faq-item p {
  margin: 0;
  font-size: 13px;
  color: #1e3a8a !important;
}

.mfo-nav-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 14px 0;
}

.mfo-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #ffffff !important;
  font-weight: 700;
  font-size: 13px;
  padding: 8px 22px;
  border-radius: 50px;
  text-decoration: none !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
  transition: all 0.2s ease;
}

.mfo-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.4);
}
/* ==========================================================================
   THEME 1 - KHATRI'S FAVOURITE PANNA CHART REDESIGN
   ========================================================================== */
.kfp-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 8px 30px;
  box-sizing: border-box;
}

/* 1. HERO HEADER */
.kfp-hero-card {
  background: linear-gradient(135deg, #2e1065 0%, #1e1b4b 50%, #3b0764 100%) !important;
  border: 2px solid #a855f7 !important;
  border-radius: 16px !important;
  padding: 24px 18px 20px !important;
  margin-bottom: 20px !important;
  text-align: center !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 0 25px rgba(168, 85, 247, 0.25) !important;
  position: relative;
  overflow: hidden;
}

.kfp-hero-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, #f59e0b, #ec4899, #8b5cf6, #3b82f6);
}

.kfp-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  color: #ffffff !important;
  padding: 5px 16px;
  border-radius: 50px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  box-shadow: 0 2px 10px rgba(245, 158, 11, 0.4);
  margin-bottom: 12px;
}

.kfp-hero-title {
  font-family: var(--font-heading, 'Outfit'), sans-serif;
  font-size: clamp(22px, 4.5vw, 32px);
  font-weight: 900;
  color: #ffffff !important;
  margin: 0 0 8px !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
  letter-spacing: -0.3px;
  line-height: 1.25;
}

.kfp-hero-sub {
  font-size: 13.5px;
  color: #e9d5ff !important;
  max-width: 760px;
  margin: 0 auto;
  line-height: 1.55;
  font-weight: 500;
}

/* 2. CONCEPT BANNER */
.kfp-concept-card {
  background: linear-gradient(135deg, #fffdf5 0%, #fef3c7 100%) !important;
  border: 1.5px solid #fde68a !important;
  border-radius: 14px !important;
  padding: 16px 18px !important;
  margin-bottom: 20px !important;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.08) !important;
}

.kfp-concept-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.kfp-concept-badge {
  background: linear-gradient(135deg, #d97706, #b45309);
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 6px;
  text-transform: uppercase;
}

.kfp-concept-title {
  font-family: var(--font-heading, 'Outfit'), sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: #78350f !important;
  margin: 0;
}

.kfp-concept-desc {
  font-size: 13px;
  color: #92400e !important;
  margin: 0 0 10px;
  line-height: 1.6;
}

.kfp-formula-box {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #ffffff;
  border: 1px dashed #f59e0b;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 12.5px;
  color: #78350f;
  font-weight: 700;
}

/* 3. QUICK NAVIGATOR */
.kfp-nav-bar {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 22px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.kfp-nav-label {
  font-size: 11.5px;
  font-weight: 800;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 8px;
  display: block;
  text-align: center;
}

.kfp-nav-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.kfp-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
  color: #ffffff !important;
  text-decoration: none !important;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.kfp-nav-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}

/* 4. DIGIT CARDS GRID */
.kfp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}

/* Mobile view: single card in one line */
@media (max-width: 768px) {
  .kfp-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
}

.kfp-card {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 14px !important;
  padding: 16px !important;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05) !important;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
}

.kfp-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1) !important;
}

.kfp-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid #f1f5f9;
}

.kfp-digit-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 8px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 900;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  font-family: var(--font-heading, 'Outfit'), sans-serif;
}

.kfp-card-count {
  font-size: 11.5px;
  font-weight: 700;
  color: #64748b;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  padding: 3px 8px;
  border-radius: 6px;
}

.kfp-chips-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

@media (max-width: 380px) {
  .kfp-chips-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
  }
}

.kfp-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 800;
  color: #1e293b;
  padding: 8px 4px;
  font-family: monospace, sans-serif;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
  transition: all 0.15s ease;
}

.kfp-chip:hover {
  background: #0f172a;
  color: #ffffff;
  border-color: #0f172a;
  transform: scale(1.05);
}

/* 5. GUIDE & FAQ CARD */
.kfp-guide-card {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%) !important;
  border: 1.5px solid #bae6fd !important;
  border-radius: 14px !important;
  padding: 22px 24px !important;
  margin-bottom: 20px !important;
  box-shadow: 0 4px 16px rgba(2, 132, 199, 0.08) !important;
  line-height: 1.7;
  font-size: 13.5px;
  color: #0369a1 !important;
}

.kfp-guide-card h2 {
  font-family: var(--font-heading, 'Outfit'), sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: #0284c7 !important;
  margin: 16px 0 8px;
  border-bottom: 1px solid #bae6fd !important;
  padding-bottom: 6px;
}

.kfp-guide-card h2:first-child {
  margin-top: 0;
}

.kfp-guide-card p {
  margin: 0 0 12px;
  color: #0369a1 !important;
}

.kfp-faq-item {
  background: #ffffff !important;
  border: 1px solid #bae6fd !important;
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 10px;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.05);
}

.kfp-faq-item h4 {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 800;
  color: #0284c7 !important;
  font-family: var(--font-heading, 'Outfit'), sans-serif;
}

.kfp-faq-item p {
  margin: 0;
  font-size: 13px;
  color: #0369a1 !important;
}

.kfp-nav-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 14px 0;
}

.kfp-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  color: #ffffff !important;
  font-weight: 700;
  font-size: 13px;
  padding: 8px 22px;
  border-radius: 50px;
  text-decoration: none !important;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
  transition: all 0.2s ease;
}

.kfp-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(124, 58, 237, 0.4);
}