/* ==========================================================================

   ENTERPRISE DESIGN SYSTEM & CSS VARIABLES

   Palette: Warm Yellow, Pure White, Deep Charcoal/Black, Vibrant Red Accents

   ========================================================================== */

:root {

  --yellow-main: #FFB800;

  --yellow-dark: #E5A500;

  --yellow-light: #FFF8E1;

  --yellow-gradient: linear-gradient(135deg, #FFC107 0%, #FF9800 100%);

  --yellow-header: #FFC000;



  --bg-page: #F8FAFC;

  --bg-card: #FFFFFF;

  --bg-subtle: #F1F5F9;



  --text-dark: #0F172A;

  --text-muted: #475569;

  --text-light: #64748B;



  --red-live: #DC2626;

  --red-hover: #B91C1C;

  --red-light: #FEF2F2;



  --green-success: #16A34A;

  --green-light: #DCFCE7;



  --border-card: #E2E8F0;

  --border-table: #CBD5E1;

  --border-yellow: #F59E0B;



  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);

  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);

  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05);



  --radius-sm: 6px;

  --radius-md: 10px;

  --radius-lg: 14px;

}



* {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}



body {

  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  background-color: var(--bg-page);

  color: var(--text-dark);

  line-height: 1.5;

  -webkit-font-smoothing: antialiased;

}



/* CONTAINER */

.container {

  width: 100%;

  max-width: 1080px;

  margin: 0 auto;

  padding: 0 16px;

}



/* ==========================================================================

   1. BRAND HEADER & NAVIGATION

   ========================================================================== */

.brand-header {

  background: var(--yellow-gradient);

  border-bottom: 3px solid var(--yellow-dark);

  box-shadow: var(--shadow-md);

  position: sticky;

  top: 0;

  z-index: 100;

}



.brand-header-inner {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 12px 0;

  flex-wrap: wrap;

  gap: 12px;

}



.brand-title-wrap {

  display: flex;

  flex-direction: column;

}



.brand-logo-link {

  text-decoration: none;

  display: flex;

  align-items: center;

  gap: 8px;

}

.brand-header-logo {

  width: 40px;

  height: 40px;

  display: inline-block;

  object-fit: contain;

  vertical-align: middle;

  flex-shrink: 0;

  border-radius: 50%;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);

  transition: transform 0.2s ease;

}

.brand-logo-link:hover .brand-header-logo {

  transform: scale(1.05);

}



.brand-logo-text {

  font-size: 26px;

  font-weight: 900;

  letter-spacing: -0.5px;

  color: #000000;

  text-transform: uppercase;

}



.brand-tagline {

  font-size: 13px;

  font-weight: 700;

  color: #1F2937;

  letter-spacing: 0.2px;

}



.nav-menu {

  display: flex;

  gap: 6px;

  list-style: none;

  flex-wrap: wrap;

}



.nav-link {

  display: inline-block;

  padding: 8px 14px;

  font-size: 13px;

  font-weight: 700;

  color: #000000;

  text-decoration: none;

  border-radius: var(--radius-sm);

  background: rgba(255, 255, 255, 0.4);

  transition: all 0.2s ease;

  white-space: nowrap;

}



.nav-link:hover, .nav-link.active {

  background: #000000;

  color: #FFFFFF;

}



/* ==========================================================================

   2. LIVE SCROLLING TICKER & STATUS STRIP

   ========================================================================== */

.ticker-strip {

  background: #1E293B;

  color: #FFFFFF;

  overflow: hidden;

  white-space: nowrap;

  padding: 8px 0;

  font-size: 13px;

  font-weight: 600;

  border-bottom: 1px solid rgba(255, 255, 255, 0.1);

}



.ticker-content {

  display: inline-block;

  white-space: nowrap;

  animation: ticker-scroll 32s linear infinite;

}



.ticker-strip:hover .ticker-content {

  animation-play-state: paused;

}



@keyframes ticker-scroll {

  0% { transform: translateX(100vw); }

  100% { transform: translateX(-100%); }

}



.status-bar {

  background: #FFFFFF;

  border-bottom: 1px solid var(--border-card);

  padding: 10px 0;

  box-shadow: var(--shadow-sm);

  margin-bottom: 20px;

}



.status-bar-inner {

  display: flex;

  align-items: center;

  justify-content: space-between;

  flex-wrap: wrap;

  gap: 10px;

  font-size: 13px;

}



.live-indicator-pill {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  background: var(--red-light);

  color: var(--red-live);

  font-weight: 800;

  padding: 5px 12px;

  border-radius: 9999px;

  border: 1px solid rgba(220, 38, 38, 0.3);

  text-transform: uppercase;

  letter-spacing: 0.5px;

}



.live-dot {

  width: 9px;

  height: 9px;

  background-color: var(--red-live);

  border-radius: 50%;

  display: inline-block;

  box-shadow: 0 0 0 rgba(220, 38, 38, 0.4);

  animation: live-pulse 1.8s infinite;

}



@keyframes live-pulse {

  0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7); }

  70% { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }

  100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }

}



.status-clock {

  color: var(--text-dark);

  font-weight: 600;

  display: inline-flex;

  align-items: center;

  gap: 6px;

}



.status-clock strong {

  color: var(--red-live);

  font-variant-numeric: tabular-nums;

}



.draw-schedule-summary {

  color: var(--text-muted);

  font-size: 12px;

}



/* ==========================================================================

   ACTION CONTROLS BAR (Refresh Button, Date Search)

   ========================================================================== */

.action-controls-bar {

  display: flex;

  align-items: center;

  justify-content: space-between;

  flex-wrap: wrap;

  gap: 12px;

  background: var(--bg-card);

  padding: 14px 18px;

  border-radius: var(--radius-md);

  border: 1px solid var(--border-card);

  box-shadow: var(--shadow-sm);

  margin-bottom: 20px;

}



.controls-left {

  display: flex;

  align-items: center;

  gap: 12px;

  flex-wrap: wrap;

}



.btn-refresh {

  background: var(--red-live);

  color: #FFFFFF;

  border: none;

  padding: 10px 18px;

  font-size: 14px;

  font-weight: 700;

  border-radius: var(--radius-sm);

  cursor: pointer;

  display: inline-flex;

  align-items: center;

  gap: 8px;

  box-shadow: 0 2px 4px rgba(220, 38, 38, 0.25);

  transition: all 0.2s ease;

}



.btn-refresh:hover {

  background: var(--red-hover);

  transform: translateY(-1px);

}



.btn-refresh:active {

  transform: translateY(0);

}



.btn-refresh.loading .refresh-icon {

  animation: spin 0.8s linear infinite;

}



@keyframes spin {

  100% { transform: rotate(360deg); }

}



.refresh-meta {

  font-size: 12px;

  color: var(--text-muted);

}



.controls-right {

  display: flex;

  align-items: center;

  gap: 8px;

}



.search-form {

  display: flex;

  align-items: center;

  gap: 6px;

}



.search-label {

  font-size: 13px;

  font-weight: 600;

  color: var(--text-dark);

}



.date-input {

  padding: 8px 10px;

  font-size: 13px;

  border: 1px solid var(--border-card);

  border-radius: var(--radius-sm);

  background: #FFFFFF;

  color: var(--text-dark);

  font-family: inherit;

}



.btn-search {

  background: #0F172A;

  color: #FFFFFF;

  border: none;

  padding: 8px 14px;

  font-size: 13px;

  font-weight: 700;

  border-radius: var(--radius-sm);

  cursor: pointer;

  transition: background 0.2s ease;

}



.btn-search:hover {

  background: #334155;

}



.btn-reset {

  background: var(--bg-subtle);

  color: var(--text-muted);

  border: 1px solid var(--border-card);

  padding: 8px 12px;

  font-size: 13px;

  font-weight: 600;

  border-radius: var(--radius-sm);

  text-decoration: none;

  transition: background 0.2s ease;

}



.btn-reset:hover {

  background: #E2E8F0;

  color: var(--text-dark);

}



/* ==========================================================================

   RESULT CARDS & EIGHT-COLUMN TABLE

   ========================================================================== */

.result-section {

  margin-bottom: 28px;

}



.section-header-wrap {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 14px;

  padding-bottom: 8px;

  border-bottom: 2px solid var(--yellow-main);

}



.section-title {

  font-size: 20px;

  font-weight: 800;

  color: var(--text-dark);

  display: flex;

  align-items: center;

  gap: 8px;

}



.section-subtitle {

  font-size: 13px;

  color: var(--text-muted);

}



.result-card {

  background: var(--bg-card);

  border: 1px solid var(--border-card);

  border-radius: var(--radius-lg);

  box-shadow: var(--shadow-sm);

  margin-bottom: 20px;

  overflow: hidden;

  transition: box-shadow 0.2s ease, border-color 0.2s ease;

}



.result-card:hover {

  box-shadow: var(--shadow-md);

  border-color: #CBD5E1;

}



.result-card-today {

  border: 2px solid var(--yellow-main);

  box-shadow: var(--shadow-md);

}



.result-card-today .result-card-header {

  background: var(--yellow-light);

  border-bottom: 1px solid #FDE68A;

}



.result-card-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 12px 18px;

  background: #FFFFFF;

  border-bottom: 1px solid var(--border-card);

  flex-wrap: wrap;

  gap: 10px;

}



.result-card-title-group {

  display: flex;

  align-items: center;

  gap: 8px;

}



.result-card-title {

  font-size: 16px;

  font-weight: 800;

  color: var(--text-dark);

}



.status-badge {

  display: inline-block;

  padding: 4px 10px;

  font-size: 11px;

  font-weight: 800;

  border-radius: 9999px;

  text-transform: uppercase;

  letter-spacing: 0.4px;

}



.badge-live {

  background: var(--red-light);

  color: var(--red-live);

  border: 1px solid rgba(220, 38, 38, 0.3);

}



.badge-pending {

  background: #FFFBEB;

  color: #B45309;

  border: 1px solid #FCD34D;

}



.badge-completed {

  background: var(--green-light);

  color: var(--green-success);

  border: 1px solid rgba(22, 163, 74, 0.3);

}



.table-legend-strip {

  display: flex;

  justify-content: flex-end;

  gap: 14px;

  padding: 6px 16px;

  background: #F8FAFC;

  border-bottom: 1px solid var(--border-card);

  font-size: 11px;

  color: var(--text-muted);

}



.legend-item strong {

  color: var(--text-dark);

}



/* HORIZONTAL SCROLL WRAPPER (Mobile First, no wrap) */

.table-responsive {

  width: 100%;

  overflow-x: auto;

  -webkit-overflow-scrolling: touch;

}



/* EIGHT-COLUMN RESULT TABLE */

.result-grid-table {

  width: 100%;

  min-width: 520px; /* guarantees 8 columns strictly in one horizontal row */

  border-collapse: collapse;

  text-align: center;

}



.result-grid-table thead tr {

  background: var(--yellow-gradient);

}



.result-grid-table th {

  padding: 10px 4px;

  border: 1px solid #E5A500;

  color: #000000;

  font-weight: 800;

  width: 12.5%;

}



.th-baji-num {

  font-size: 14px;

  line-height: 1.2;

}



.th-baji-time {

  font-size: 10px;

  font-weight: 600;

  color: #1F2937;

  opacity: 0.9;

}



.result-grid-table td {

  border: 1px solid var(--border-card);

  padding: 12px 4px;

  vertical-align: middle;

}



/* PATTI ROW (MUST APPEAR ABOVE GHOR ROW) */

.row-patti {

  background: #FFFFFF;

}



.row-patti td {

  border-bottom: 1px dashed #CBD5E1;

}



.cell-patti-val .cell-data {

  font-size: 17px;

  font-weight: 700;

  color: #0F172A;

  letter-spacing: 0.5px;

}



/* GHOR ROW (IMMEDIATELY BELOW PATTI ROW) */

.row-ghor {

  background: #FFFDF5;

}



.cell-ghor-val .cell-data {

  font-size: 21px;

  font-weight: 900;

  color: var(--red-live);

}



.cell-empty .cell-data {

  color: #94A3B8;

  font-weight: 600;

  font-size: 16px;

}



.cell-label-tag {

  display: block;

  font-size: 9px;

  font-weight: 700;

  text-transform: uppercase;

  color: #64748B;

  margin-bottom: 2px;

  letter-spacing: 0.4px;

}



/* ==========================================================================

   TIPS & LUCKY NUMBER REFERENCE PANELS

   ========================================================================== */

.info-panels-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 20px;

  margin-bottom: 28px;

}



.info-card {

  background: var(--bg-card);

  border: 1px solid var(--border-card);

  border-radius: var(--radius-lg);

  box-shadow: var(--shadow-sm);

  padding: 18px;

}



.info-card-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 14px;

  padding-bottom: 8px;

  border-bottom: 2px solid var(--yellow-main);

}



.info-card-title {

  font-size: 17px;

  font-weight: 800;

  color: var(--text-dark);

}



.tips-table {

  width: 100%;

  border-collapse: collapse;

  font-size: 13px;

}



.tips-table th, .tips-table td {

  padding: 8px 10px;

  border: 1px solid var(--border-card);

  text-align: center;

}



.tips-table th {

  background: var(--yellow-light);

  color: var(--text-dark);

  font-weight: 700;

}



.tips-table tr:nth-child(even) {

  background: #F8FAFC;

}



.badge-baji-num {

  font-weight: 700;

  background: #E2E8F0;

  padding: 2px 6px;

  border-radius: 4px;

  font-size: 11px;

}



/* LUCKY NUMBER INTERACTIVE BOX */

.lucky-box {

  text-align: center;

  padding: 14px 0;

}



.lucky-display {

  display: flex;

  justify-content: center;

  gap: 12px;

  margin: 16px 0;

}



.lucky-digit {

  width: 48px;

  height: 48px;

  border-radius: 50%;

  background: var(--yellow-gradient);

  color: #000000;

  font-size: 24px;

  font-weight: 900;

  display: flex;

  align-items: center;

  justify-content: center;

  box-shadow: 0 4px 6px rgba(245, 158, 11, 0.3);

}



.btn-lucky {

  background: #0F172A;

  color: #FFFFFF;

  border: none;

  padding: 10px 20px;

  font-size: 13px;

  font-weight: 700;

  border-radius: var(--radius-sm);

  cursor: pointer;

  transition: background 0.2s ease;

}



.btn-lucky:hover {

  background: #334155;

}



/* ==========================================================================

   PATTI RULES ACCORDION / REFERENCE

   ========================================================================== */

.patti-rules-card {

  background: var(--bg-card);

  border: 1px solid var(--border-card);

  border-radius: var(--radius-lg);

  box-shadow: var(--shadow-sm);

  padding: 18px;

  margin-bottom: 28px;

}



.rules-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 14px;

  margin-top: 12px;

}



.rule-box {

  background: #F8FAFC;

  border: 1px solid var(--border-card);

  border-radius: var(--radius-md);

  padding: 12px;

  font-size: 13px;

}



.rule-box h4 {

  font-size: 14px;

  color: var(--text-dark);

  margin-bottom: 6px;

}



/* ==========================================================================

   ADVERTISING AREA (RESERVED PLACEHOLDER)

   ========================================================================== */

.ad-placeholder {

  border: 2px dashed #CBD5E1;

  background: #F8FAFC;

  border-radius: var(--radius-md);

  padding: 18px;

  text-align: center;

  margin: 24px 0;

}



.ad-label {

  font-size: 11px;

  font-weight: 700;

  color: #94A3B8;

  text-transform: uppercase;

  letter-spacing: 1px;

}



/* ==========================================================================

   FOOTER

   ========================================================================== */

.page-footer {

  background: #0F172A;

  color: #94A3B8;

  padding: 36px 0 24px;

  margin-top: 40px;

  font-size: 13px;

  border-top: 4px solid var(--yellow-main);

}



.footer-inner {

  display: flex;

  flex-direction: column;

  gap: 20px;

}



.footer-top {

  display: flex;

  align-items: center;

  justify-content: space-between;

  flex-wrap: wrap;

  gap: 16px;

  padding-bottom: 16px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.1);

}



.footer-brand h4 {

  color: #FFFFFF;

  font-size: 18px;

  font-weight: 800;

}



.footer-nav {

  display: flex;

  gap: 14px;

  list-style: none;

  flex-wrap: wrap;

}



.footer-nav a {

  color: #CBD5E1;

  text-decoration: none;

  font-weight: 600;

}



.footer-nav a:hover {

  color: var(--yellow-main);

}



.footer-disclaimer {

  line-height: 1.6;

  font-size: 12px;

  color: #64748B;

  background: rgba(0, 0, 0, 0.2);

  padding: 12px 16px;

  border-radius: var(--radius-sm);

  border-left: 3px solid var(--yellow-main);

}



.footer-bottom {

  text-align: center;

  font-size: 12px;

  color: #64748B;

  padding-top: 10px;

}



/* ==========================================================================

   TOAST NOTIFICATION

   ========================================================================== */

.toast-msg {

  position: fixed;

  bottom: 24px;

  right: 24px;

  background: #0F172A;

  color: #FFFFFF;

  padding: 12px 20px;

  border-radius: var(--radius-sm);

  font-size: 13px;

  font-weight: 700;

  box-shadow: var(--shadow-lg);

  z-index: 1000;

  display: none;

  align-items: center;

  gap: 8px;

  border-left: 4px solid var(--green-success);

}



.toast-msg.show {

  display: flex;

  animation: toast-in 0.3s ease;

}



@keyframes toast-in {

  from { transform: translateY(20px); opacity: 0; }

  to { transform: translateY(0); opacity: 1; }

}



/* ==========================================================================

   MOBILE RESPONSIVENESS

   ========================================================================== */


/* =====================================================================
   DISTINCTIVE LAST-30-DAYS ARCHIVE
   History cards use date-led, compact two-row cards inspired by the
   supplied references while keeping the live-result table unchanged.
   ===================================================================== */
#today-result-section {
  margin-bottom: 0;
}
#old-results {
  margin-top: 78px;
  scroll-margin-top: 100px;
}
#old-results .section-header-wrap {
  margin-bottom: 22px;
  padding: 0 0 12px;
  border-bottom: 3px solid var(--yellow-main);
}
#old-results .section-title {
  font-size: clamp(22px, 2.4vw, 28px);
  letter-spacing: -0.45px;
}
#old-results .section-title > span {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #FFF0B3;
  font-size: 19px;
}
#old-results .result-card {
  margin-bottom: 18px;
  border: 1px solid #E4E7EC;
  border-radius: 12px;
  box-shadow: 0 3px 10px rgba(15, 23, 42, .045);
  overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease;
}
#old-results .result-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 7px 18px rgba(15, 23, 42, .075);
}
#old-results .result-card-header {
  justify-content: center;
  min-height: 48px;
  padding: 11px 14px;
  background: #FFE16A;
  border-bottom: 0;
  text-align: center;
}
#old-results .result-card-title-group {
  justify-content: center;
  width: 100%;
}
#old-results .calendar-icon,
#old-results .status-badge,
#old-results .table-legend-strip,
#old-results .result-grid-table thead {
  display: none;
}
#old-results .result-card-title {
  font-size: clamp(15px, 1.8vw, 19px);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: .15px;
  color: #242424;
}
#old-results .table-responsive {
  overflow-x: auto;
  overscroll-behavior-x: contain;
}
#old-results .result-grid-table {
  min-width: 0;
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}
#old-results .result-grid-table td {
  width: 12.5%;
  padding: 13px 3px;
  border: 0;
  border-right: 1px solid #E1E5EA;
  border-bottom: 1px solid #E1E5EA;
  text-align: center;
  vertical-align: middle;
}
#old-results .result-grid-table td:last-child {
  border-right: 0;
}
#old-results .result-grid-table tbody tr:last-child td {
  border-bottom: 0;
}
#old-results .row-patti {
  background: #FFFFFF;
}
#old-results .row-ghor {
  background: #FFF9D9;
}
#old-results .cell-label-tag {
  display: none;
}
#old-results .cell-patti-val .cell-data {
  display: block;
  color: #172033;
  font-size: clamp(13px, 1.65vw, 19px);
  line-height: 1.25;
  font-weight: 750;
  letter-spacing: .1px;
  overflow-wrap: anywhere;
}
#old-results .cell-ghor-val .cell-data {
  display: inline-grid;
  place-items: center;
  min-width: 28px;
  min-height: 28px;
  padding: 2px 5px;
  border-radius: 50%;
  background: #FFEDAA;
  color: #252525;
  font-size: clamp(13px, 1.6vw, 18px);
  line-height: 1;
  font-weight: 850;
}
#old-results .cell-empty .cell-data {
  color: #A1A8B3;
  font-size: 16px;
  font-weight: 600;
}
#old-results .result-card-pending .result-card-header {
  background: #FFE16A;
}
#old-results .result-card-pending .row-patti,
#old-results .result-card-pending .row-ghor {
  background: #F8FAFC;
}
@media (min-width: 769px) {
  #old-results .result-card {
    margin-bottom: 20px;
  }
  #old-results .result-grid-table td {
    padding-top: 15px;
    padding-bottom: 15px;
  }
}
@media (max-width: 768px) {
  #old-results {
    margin-top: 58px;
  }
  #old-results .section-header-wrap {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 17px;
  }
  #old-results .section-subtitle {
    padding-left: 42px;
    font-size: 12px;
  }
  #old-results .result-card {
    margin-bottom: 15px;
    border-radius: 9px;
  }
  #old-results .result-card-header {
    min-height: 43px;
    padding: 9px 6px;
  }
  #old-results .result-grid-table td {
    padding: 11px 1px;
  }
  #old-results .cell-patti-val .cell-data {
    font-size: clamp(11px, 3.15vw, 16px);
  }
  #old-results .cell-ghor-val .cell-data {
    min-width: 24px;
    min-height: 24px;
    font-size: clamp(12px, 3.2vw, 16px);
  }
}
@media (max-width: 360px) {
  #old-results .result-card-title {
    font-size: 14px;
  }
  #old-results .result-grid-table td {
    padding: 9px 0;
  }
}


/* =====================================================================
   FFKOLKATA LIVE BOARD — distinct from the historical archive
   ===================================================================== */
.live-controls {
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  flex-wrap:wrap; margin: 22px 0 24px; padding:15px 18px;
  background:#fff; border:1px solid #E4E7EC; border-radius:14px;
  box-shadow:0 5px 18px rgba(15,23,42,.045);
}
.live-controls-copy,.live-controls-actions {display:flex;align-items:center;gap:12px;}
.live-controls-copy strong {display:block;font-size:14px;color:#111827;letter-spacing:.1px;}
.live-controls-copy span:not(.live-controls-dot) {display:block;color:#64748B;font-size:12px;margin-top:2px;}
.live-controls-dot {width:10px;height:10px;border-radius:50%;background:#E11D48;box-shadow:0 0 0 5px #FFE4E6;flex:0 0 auto;}
.live-controls-actions {justify-content:flex-end;flex-wrap:wrap;}
.live-controls .btn-refresh {border-radius:9px;padding:10px 15px;box-shadow:none;background:#111827;}
.live-controls .btn-refresh:hover {background:#374151;}
.live-controls .refresh-meta {font-size:12px;white-space:nowrap;}
.live-controls .refresh-meta strong {color:#111827;}
#today-result-section {margin-bottom:0;}
#today-result-section .section-header-wrap {margin-bottom:15px;padding-bottom:11px;border-bottom:3px solid #FFB800;}
#today-result-section .section-title {font-size:clamp(22px,2.5vw,29px);letter-spacing:-.55px;gap:10px;}
.live-title-mark {display:inline-grid;place-items:center;width:32px;height:32px;border-radius:10px;background:#FFE9A3;}
.live-title-mark span {width:10px;height:10px;background:#E11D48;border-radius:50%;box-shadow:0 0 0 5px #FFD8DE;}
#today-result-section .section-subtitle {font-size:12px;color:#64748B;}
#today-result-section .result-card {border:1px solid #D8DEE8;border-radius:15px;overflow:hidden;box-shadow:0 8px 24px rgba(15,23,42,.065);}
#today-result-section .result-card-header {padding:15px 18px;background:#111827;color:#fff;border-bottom:0;}
#today-result-section .result-card-title {color:#fff;font-size:16px;font-weight:800;letter-spacing:.05px;}
#today-result-section .calendar-icon {display:inline-grid;place-items:center;width:30px;height:30px;border-radius:9px;background:#2D3748;font-size:16px;}
#today-result-section .status-badge {font-size:10px;letter-spacing:.45px;padding:6px 10px;}
#today-result-section .badge-live {background:#DCFCE7;color:#166534;border-color:#86EFAC;}
#today-result-section .badge-pending {background:#FFF4D6;color:#92400E;border-color:#FCD34D;}
#today-result-section .table-legend-strip {justify-content:flex-start;gap:18px;padding:9px 16px;background:#F8FAFC;font-size:11px;}
#today-result-section .result-grid-table {width:100%;min-width:0;table-layout:fixed;}
#today-result-section .result-grid-table thead tr {background:#FFB800;}
#today-result-section .result-grid-table th {padding:12px 3px;border-color:#E5A500;color:#171717;}
#today-result-section .th-baji-num {font-size:14px;font-weight:900;}
#today-result-section .th-baji-time {font-size:10px;white-space:nowrap;}
#today-result-section .result-grid-table td {padding:15px 3px;border-color:#E6EAF0;}
#today-result-section .row-patti {background:#fff;}
#today-result-section .row-ghor {background:#FFF9E6;}
#today-result-section .cell-label-tag {font-size:9px;letter-spacing:.65px;margin-bottom:5px;color:#7C8798;}
#today-result-section .cell-patti-val .cell-data {font-size:clamp(13px,1.7vw,19px);font-weight:850;}
#today-result-section .cell-ghor-val .cell-data {display:inline-grid;place-items:center;min-width:30px;min-height:30px;border-radius:50%;background:#FFE8A3;color:#171717;font-size:clamp(15px,1.8vw,20px);font-weight:900;}
#today-result-section .cell-empty .cell-data {font-size:18px;color:#A0A8B5;}
#today-result-section .result-card-pending .row-patti,
#today-result-section .result-card-pending .row-ghor {background:#F8FAFC;}

/* Action Bar & Centered Refresh Button */
.refresh-action-bar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 22px 0 16px;
  gap: 10px;
  text-align: center;
}
.refresh-btn-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.btn-refresh-live {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: #111827;
  color: #FFFFFF;
  border: 1px solid #111827;
  padding: 11px 24px;
  font-size: 14px;
  font-weight: 700;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 44px;
  touch-action: manipulation;
}
.btn-refresh-live:hover:not(:disabled) {
  background: #1F2937;
  border-color: #1F2937;
  box-shadow: 0 4px 12px rgba(17, 24, 39, 0.15);
  transform: translateY(-1px);
}
.btn-refresh-live:active:not(:disabled) {
  transform: translateY(0);
}
.btn-refresh-live:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}
.btn-refresh-live .refresh-icon {
  color: #FFB800;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.btn-refresh-live.loading .refresh-icon {
  animation: spin 0.8s linear infinite;
}
.refresh-status-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  color: #475569;
}
.refresh-dot-live {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #16A34A;
  box-shadow: 0 0 0 3px #DCFCE7;
  display: inline-block;
}
.refresh-status-info strong {
  color: #0F172A;
  font-weight: 700;
}

/* Social Sharing Strip */
.social-share-strip {
  margin-top: 14px;
  margin-bottom: 24px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 14px 18px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}
.social-share-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #1E293B;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.social-share-header svg {
  color: #FFB800;
}
.social-btn-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.social-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 44px;
  box-sizing: border-box;
  touch-action: manipulation;
  white-space: nowrap;
}
.social-share-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.social-share-btn:active {
  transform: translateY(0);
}
.social-btn-whatsapp {
  background: #25D366;
  color: #FFFFFF;
  border-color: #20BA5A;
}
.social-btn-whatsapp:hover {
  background: #20BA5A;
  color: #FFFFFF;
}
.social-btn-facebook {
  background: #1877F2;
  color: #FFFFFF;
  border-color: #166FE5;
}
.social-btn-facebook:hover {
  background: #166FE5;
  color: #FFFFFF;
}
.social-btn-telegram {
  background: #229ED9;
  color: #FFFFFF;
  border-color: #1E8EC4;
}
.social-btn-telegram:hover {
  background: #1E8EC4;
  color: #FFFFFF;
}
.social-btn-general {
  background: #FFB800;
  color: #111827;
  border-color: #E5A500;
}
.social-btn-general:hover {
  background: #FFA000;
  color: #111827;
}

#old-results {margin-top:24px;}
@media (max-width:768px) {
  .live-controls {align-items:stretch;margin:17px 0 22px;padding:13px;border-radius:12px;gap:13px;}
  .live-controls-actions {justify-content:space-between;}
  .live-controls .refresh-meta {font-size:11px;}
  .live-controls .btn-refresh {padding:9px 12px;font-size:12px;}
  #today-result-section .section-header-wrap {align-items:flex-start;flex-direction:column;gap:5px;}
  #today-result-section .section-subtitle {padding-left:42px;}
  #today-result-section .result-card {border-radius:12px;}
  #today-result-section .result-card-header {padding:12px 10px;gap:8px;}
  #today-result-section .result-card-title {font-size:13px;}
  #today-result-section .calendar-icon {width:25px;height:25px;font-size:13px;}
  #today-result-section .status-badge {font-size:8px;padding:5px 6px;}
  #today-result-section .table-legend-strip {gap:10px;padding:8px 9px;font-size:9px;}
  #today-result-section .result-grid-table th {padding:9px 1px;}
  #today-result-section .th-baji-num {font-size:clamp(10px,2.8vw,13px);}
  #today-result-section .th-baji-time {font-size:clamp(7px,2vw,9px);letter-spacing:-.2px;}
  #today-result-section .result-grid-table td {padding:11px 1px;}
  #today-result-section .cell-label-tag {font-size:8px;letter-spacing:0;margin-bottom:4px;}
  #today-result-section .cell-patti-val .cell-data {font-size:clamp(10px,3.2vw,15px);letter-spacing:0;}
  #today-result-section .cell-ghor-val .cell-data {min-width:23px;min-height:23px;font-size:clamp(12px,3.3vw,16px);}
  #today-result-section .cell-empty .cell-data {font-size:14px;}
  .refresh-action-bar {margin:18px 0 14px;gap:8px;}
  .refresh-btn-container {display:flex;justify-content:center;align-items:center;width:100%;}
  .btn-refresh-live {width:auto;min-width:200px;max-width:92%;padding:11px 20px;}
  .refresh-status-info {width:100%;justify-content:center;font-size:12px;}
  .social-share-strip {padding:12px 14px;}
  .social-btn-grid {grid-template-columns:repeat(2, 1fr);gap:8px;}
  #old-results {margin-top:20px;}
}
@media (max-width:360px) {
  #today-result-section .result-card-header {padding:10px 7px;}
  #today-result-section .result-card-title {font-size:12px;}
  #today-result-section .status-badge {max-width:125px;white-space:normal;text-align:center;}
  #today-result-section .table-legend-strip {gap:7px;font-size:8px;}
  .social-share-btn {font-size:12px;padding:9px 6px;gap:5px;}
}

@media (max-width: 768px) {

  .brand-header-inner {

    flex-direction: column;

    align-items: flex-start;

  }

  .brand-header-logo {

    width: 34px;

    height: 34px;

  }



  .nav-menu {

    width: 100%;

    overflow-x: auto;

    flex-wrap: nowrap;

    padding-bottom: 4px;

  }



  .status-bar-inner {

    flex-direction: column;

    align-items: flex-start;

  }



  .action-controls-bar {

    flex-direction: column;

    align-items: stretch;

  }



  .controls-right, .search-form {

    width: 100%;

    flex-wrap: wrap;

  }



  .date-input {

    flex: 1;

  }



  .info-panels-grid, .rules-grid {

    grid-template-columns: 1fr;

  }

}


/* Compact result cards: date centered in the header row; no Patti/Ghor legend labels. */
.result-card-header {
  position: relative;
  justify-content: center;
  min-height: 54px;
  padding: 12px 170px;
}
.result-card-title-group {
  justify-content: center;
  width: 100%;
  text-align: center;
}
.result-card-title {
  width: 100%;
  text-align: center;
}
.result-card-header > .status-badge {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
}
.table-legend-strip { display: none !important; }
.cell-label-tag { display: none !important; }
.cell-data { display: block; }
@media (max-width: 600px) {
  .result-card-header { min-height: 48px; padding: 12px 8px; }
  .result-card-header > .status-badge { position: static; transform: none; margin: 4px auto 0; }
  .result-card-header { flex-direction: column; gap: 4px; }
  .result-card-title { font-size: 15px; }
}