:root {
  --ink: #18202f;
  --muted: #677184;
  --paper: #f4f7f4;
  --surface: #ffffff;
  --line: rgba(24, 32, 47, 0.14);
  --teal: #007c78;
  --teal-dark: #005c5a;
  --coral: #e15d4f;
  --gold: #d89b24;
  --plum: #55345f;
  --shadow: 0 18px 45px rgba(24, 32, 47, 0.12);
}

html,
body {
  background: var(--paper) !important;
  color: var(--ink);
  font-family: Inter, "Segoe UI", Arial, sans-serif !important;
  line-height: 1.45 !important;
}

body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% 10%, rgba(225, 93, 79, 0.12), transparent 26%),
    radial-gradient(circle at 88% 2%, rgba(0, 124, 120, 0.12), transparent 28%),
    var(--paper) !important;
  background-size: auto !important;
}

a:link,
a:hover,
a:active,
a:visited {
  color: inherit !important;
}

#header {
  max-width: 1180px;
  margin: 0 auto !important;
  padding: 18px 18px 0 !important;
  text-align: left !important;
}

#logo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: var(--shadow);
}

#logo a {
  display: flex;
  align-items: center;
}

#logo::after {
  content: "Satta King";
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

img#logo-img,
#logo-img {
  width: 210px !important;
  max-width: 56vw !important;
  max-height: 68px !important;
  object-fit: contain !important;
  margin: 0 !important;
}

#main-content {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 18px 30px;
}

#section {
  width: 100% !important;
  margin: 18px 0 0 !important;
  padding: 0 0 18px !important;
  text-align: left !important;
}

#section > div:first-child {
  min-height: 0 !important;
  padding: 18px 20px !important;
  border-radius: 8px;
  background: var(--ink);
  border-left: 8px solid var(--coral);
  box-shadow: var(--shadow);
}

#section .abs {
  min-height: 0 !important;
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  color: #fff !important;
  font-family: Inter, "Segoe UI", Arial, sans-serif !important;
  font-size: clamp(1rem, 2vw, 1.45rem) !important;
  line-height: 1.45 !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

#section > div:nth-of-type(2) {
  min-height: 0 !important;
  display: block !important;
  margin-top: 16px;
  padding: 28px !important;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(0, 124, 120, 0.98), rgba(85, 52, 95, 0.96)) !important;
  background-blend-mode: normal;
  box-shadow: var(--shadow);
}

#section > div:nth-of-type(2) > div {
  max-width: 760px !important;
  min-height: 0 !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #fff !important;
  text-align: left !important;
}

#section > div:nth-of-type(2) span {
  display: none !important;
}

#section > div:nth-of-type(2) h2 {
  margin: 0 0 12px !important;
  color: #fff !important;
  text-shadow: none !important;
  font-family: Inter, "Segoe UI", Arial, sans-serif !important;
  font-size: 0 !important;
  font-weight: 900 !important;
  line-height: 0.95 !important;
  max-width: 720px;
}

#section > div:nth-of-type(2) h2::before {
  content: "Satta King Result Center";
  display: block;
  color: #fff;
  font-size: clamp(2rem, 6vw, 4.2rem);
  line-height: 0.98;
}

#section > div:nth-of-type(2) p {
  max-width: 710px;
  padding: 0 !important;
  color: rgba(255, 255, 255, 0.88) !important;
  font-family: Inter, "Segoe UI", Arial, sans-serif !important;
  font-size: clamp(0.98rem, 2vw, 1.1rem) !important;
  font-weight: 500 !important;
  line-height: 1.65 !important;
  text-align: left !important;
}

.pulse-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 14px;
}

.pulse-strip span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 950;
  text-align: center;
  box-shadow: 0 10px 22px rgba(24, 32, 47, 0.07);
}

.pulse-strip span:nth-child(2) {
  background: var(--teal);
  color: #fff;
}

.pulse-strip span:nth-child(3) {
  background: rgba(216, 155, 36, 0.18);
  color: #5d4210;
}

.marquee-container {
  min-height: 0 !important;
  margin-top: 16px;
  padding: 10px 0;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.72);
}

.marquee-container marquee {
  display: block;
}

.marq,
.marq1 {
  font-family: Inter, "Segoe UI", Arial, sans-serif !important;
  color: var(--ink) !important;
  text-shadow: none !important;
}

.marq {
  padding-left: 20px;
  color: var(--teal-dark) !important;
  letter-spacing: 0.04em;
}

.marq1 {
  display: inline-flex !important;
  min-width: 42px;
  justify-content: center;
  margin: 0 16px 0 6px;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--gold);
  color: #1b1608 !important;
}

.result {
  min-height: 0 !important;
  margin: 16px 0 !important;
  padding: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px;
  background: #ffffff !important;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.live-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 18px 0 10px;
  padding: 14px 18px;
  border-radius: 8px;
  background: linear-gradient(135deg, #172033, #006d69);
  color: #ffffff;
  box-shadow: var(--shadow);
}

.live-section-title span {
  font-size: clamp(1.05rem, 2.5vw, 1.65rem);
  font-weight: 950;
  letter-spacing: 0.02em;
  color: #ffffff !important;
  text-shadow: none !important;
}

.live-section-title strong {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff !important;
  font-size: 0.86rem;
  font-weight: 900;
  white-space: nowrap;
  text-shadow: none !important;
}

.result > div {
  width: 100%;
}

.live-card-inner {
  display: grid;
  justify-items: center;
  gap: 10px;
}

.live-card-grid {
  width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  align-items: stretch;
  gap: 12px;
}

.live-game-item {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 10px;
  min-height: 132px;
  padding: 16px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff, #fbfcf8);
  box-shadow: 0 12px 28px rgba(24, 32, 47, 0.08);
}

.live-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.live-card-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(0, 124, 120, 0.11);
  color: var(--teal-dark);
  font-size: 0.76rem;
  font-weight: 950;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.live-card-meta span:first-child {
  background: var(--ink);
  color: #fff;
}

.live-card-time {
  display: none !important;
}

.result353 {
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--ink) !important;
  font-family: Inter, "Segoe UI", Arial, sans-serif !important;
  text-shadow: none !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  text-transform: uppercase;
  -webkit-box-reflect: unset !important;
}

.result353:first-child {
  font-size: clamp(0.82rem, 1.25vw, 1rem) !important;
  color: var(--muted) !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
  line-height: 1.25 !important;
  overflow-wrap: anywhere;
}

.result353:last-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 150px);
  min-height: 64px;
  margin-top: 0 !important;
  padding: 8px 14px !important;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--coral), #c94b78);
  color: #fff !important;
  font-size: clamp(2.15rem, 5vw, 3.3rem) !important;
  font-weight: 950 !important;
  box-shadow: 0 16px 34px rgba(225, 93, 79, 0.28);
  white-space: nowrap;
}

#live-time {
  width: auto !important;
  max-width: 100% !important;
  display: inline-flex !important;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(0, 124, 120, 0.12);
  color: var(--teal-dark) !important;
  font-weight: 900 !important;
  white-space: normal !important;
}

#section + div,
#main-content > div[style*="color: aqua"] {
  color: var(--teal-dark) !important;
}

.main-content,
div.main-content {
  width: 100% !important;
  margin: 16px 0 0 !important;
  display: block !important;
}

.quick-result-board {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 10px !important;
  margin: 0 0 22px !important;
}

.board-title,
tr.board-title {
  height: auto !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.board-title th {
  padding: 0 0 8px !important;
  color: var(--ink) !important;
  font-family: Inter, "Segoe UI", Arial, sans-serif !important;
  font-size: clamp(1.35rem, 3vw, 2.35rem) !important;
  font-weight: 950 !important;
  text-align: left;
}

.board-head,
tr.board-head {
  height: auto !important;
  border: 0 !important;
  background: var(--teal) !important;
  box-shadow: none !important;
}

.board-head th {
  padding: 14px 16px !important;
  color: #fff !important;
  font-family: Inter, "Segoe UI", Arial, sans-serif !important;
  font-size: 0.9rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

tr.game-result,
tr.holder,
#MK {
  height: auto !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: var(--surface) !important;
  background-image: none !important;
  box-shadow: 0 10px 24px rgba(24, 32, 47, 0.08) !important;
  overflow: hidden;
}

tr.game-result:hover {
  background: #fffaf1 !important;
}

tr.game-result td {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 16px !important;
}

tr.game-result td:first-child {
  border-left: 6px solid var(--coral);
  border-radius: 8px 0 0 8px;
}

tr.game-result td:last-child {
  border-right: 1px solid var(--line);
  border-radius: 0 8px 8px 0;
}

.games-name,
.game-details {
  width: 58% !important;
  text-align: left !important;
  padding-left: 18px !important;
  font-family: Inter, "Segoe UI", Arial, sans-serif !important;
}

.today-date,
.yesterday-date,
.today-number,
.yesterday-number {
  width: 21% !important;
  text-align: center !important;
  padding-right: 0 !important;
}

.game-details > .game-name,
.game-details .game-name {
  color: var(--ink);
  font-size: clamp(1rem, 2vw, 1.24rem) !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
}

.game-details > .game-time,
.game-details .game-time {
  float: none !important;
  display: inline-block;
  margin-top: 7px !important;
  padding: 5px 9px !important;
  border-radius: 999px;
  background: rgba(85, 52, 95, 0.1);
  color: var(--plum);
  font-size: 0.78rem !important;
  font-weight: 800 !important;
}

.game-link a {
  display: inline-flex;
  margin-top: 8px;
  color: var(--teal-dark) !important;
  font-weight: 900;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

.today-number p,
.yesterday-number p {
  display: inline-flex;
  min-width: 54px;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  border-radius: 8px;
  background: var(--ink);
  color: #fff;
  font-family: Inter, "Segoe UI", Arial, sans-serif !important;
  font-size: clamp(1.45rem, 4vw, 2.15rem) !important;
  font-weight: 950 !important;
}

.yesterday-number p {
  background: rgba(24, 32, 47, 0.1);
  color: var(--ink);
}

.chart-heading-box,
div.nav-link.chart-heading-box {
  width: 100% !important;
  margin: 24px 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: var(--plum) !important;
  background-image: none !important;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.chart-heading-link {
  max-width: none !important;
  width: 100% !important;
}

.chart-heading-text {
  padding: 22px !important;
  color: #fff !important;
  font-family: Inter, "Segoe UI", Arial, sans-serif !important;
  font-size: clamp(1rem, 2.4vw, 1.45rem) !important;
  font-weight: 900 !important;
  line-height: 1.35 !important;
}

.chart-table-wrapper {
  margin-top: 0;
  border-radius: 0;
  background: transparent;
}

.chart-table-wrapper table,
.chart-table-wrapper tr,
.chart-table-wrapper th,
.chart-table-wrapper td {
  box-shadow: none !important;
}

.chart-table-wrapper tr.game-result,
.chart-table-wrapper tr.holder,
.chart-table-wrapper #MK {
  border-radius: 0 !important;
  background-image: linear-gradient(315deg, #f5d020 0%, #f53803 74%) !important;
  box-shadow: none !important;
}

.chart-table-wrapper tr.game-result td {
  border: inherit;
  padding: inherit;
}

#dynamic-charts {
  min-height: 360px !important;
  padding: 0 !important;
}

#dynamic-charts .chart-skeleton,
.chart-form-skeleton {
  color: var(--muted) !important;
  font-family: Inter, "Segoe UI", Arial, sans-serif !important;
}

#chart-form-container {
  margin: 18px 0 0 !important;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

#chart-form,
div#chart-form {
  border: 0 !important;
  background: #fff !important;
  background-image: none !important;
  color: var(--ink) !important;
  border-radius: 8px;
}

select#month,
select#year,
input#direct-chart {
  border: 1px solid var(--line) !important;
  border-radius: 8px;
  background: #f8faf9 !important;
  background-image: none !important;
  color: var(--ink) !important;
}

input#direct-chart,
input.log,
input.post {
  background: var(--teal) !important;
  color: #fff !important;
}

.collapsible {
  margin-top: 10px !important;
  border-radius: 8px !important;
  background: #fff !important;
  background-image: none !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  font-family: Inter, "Segoe UI", Arial, sans-serif !important;
  box-shadow: 0 8px 20px rgba(24, 32, 47, 0.06);
}

.collapsible:hover,
.active {
  background: var(--ink) !important;
  color: #fff !important;
}

.collapsible::after {
  color: var(--coral) !important;
}

.content {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 18px !important;
  color: var(--ink) !important;
  background: rgba(255, 255, 255, 0.72) !important;
  border-radius: 0 0 8px 8px;
}

.content ul {
  list-style: disc !important;
}

.content strong {
  color: var(--teal-dark) !important;
}

.float {
  width: 62px !important;
  height: 62px !important;
  right: 18px !important;
  bottom: 92px !important;
  background: var(--teal) !important;
  box-shadow: var(--shadow) !important;
}

.float img {
  width: 62px !important;
  height: 62px !important;
}

.float-text {
  left: -128px !important;
  background: var(--ink) !important;
  color: #fff !important;
  text-shadow: none !important;
  border-radius: 999px !important;
}

#Refresh {
  right: 18px !important;
  bottom: 18px !important;
}

#Refresh img {
  border: 3px solid #fff;
  box-shadow: var(--shadow);
}

footer {
  margin-top: 30px;
  border-radius: 8px 8px 0 0;
  overflow: hidden;
  background: var(--ink);
}

.privacy {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center !important;
  padding: 16px;
}

.policy {
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 999px;
  color: #fff !important;
  font-size: 0.78rem !important;
  padding: 8px 12px !important;
  margin: 0 !important;
}

footer {
  margin-top: 26px !important;
  border-radius: 8px 8px 0 0 !important;
  background: #f7f9f4 !important;
  border-top: 4px solid var(--teal);
  color: var(--ink) !important;
  box-shadow: 0 -12px 34px rgba(24, 32, 47, 0.08);
}

footer > div:first-child {
  padding: 16px 12px 6px !important;
}

footer .privacy {
  background: transparent !important;
  padding: 14px 12px 18px !important;
}

footer .policy {
  border: 1px solid rgba(0, 124, 120, 0.22) !important;
  background: #ffffff !important;
  color: var(--teal-dark) !important;
  box-shadow: 0 8px 18px rgba(24, 32, 47, 0.06);
}

footer .policy:hover {
  background: var(--teal) !important;
  color: #ffffff !important;
}

footer > div:last-child {
  background: var(--ink) !important;
  padding: 16px 18px !important;
}

footer > div:last-child p {
  max-width: 1180px;
  margin: 0 auto !important;
  color: rgba(255, 255, 255, 0.82) !important;
  font-size: 0.84rem !important;
  line-height: 1.65 !important;
}

footer > div:last-child strong {
  color: #ffffff !important;
}

#section > div:nth-of-type(2) {
  display: none !important;
}

.upcoming-board {
  display: none !important;
}

@media (max-width: 720px) {
  #header,
  #main-content {
    padding-left: 8px;
    padding-right: 8px;
  }

  #logo {
    align-items: center;
    flex-direction: row;
    padding: 10px 12px;
  }

  #logo::after {
    min-height: 30px;
    padding: 0 10px;
    font-size: 0.64rem;
  }

  img#logo-img,
  #logo-img {
    width: 150px !important;
    max-height: 54px !important;
  }

  #section {
    margin-top: 10px !important;
  }

  #section > div:first-child {
    padding: 12px 14px !important;
    border-left-width: 5px;
  }

  #section .abs {
    font-size: 0.88rem !important;
  }

  #section > div:nth-of-type(2) {
    margin-top: 10px;
    padding: 18px !important;
  }

  #section > div:nth-of-type(2) h2::before {
    font-size: clamp(1.85rem, 12vw, 3.1rem);
    line-height: 1.02;
  }

  #section > div:nth-of-type(2) p {
    font-size: 0.92rem !important;
    line-height: 1.55 !important;
  }

  .pulse-strip {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .pulse-strip span {
    min-height: 38px;
  }

  .quick-result-board {
    border-spacing: 0 8px !important;
  }

  .board-title th {
    font-size: 1.18rem !important;
  }

  .board-head th {
    padding: 9px 5px !important;
    font-size: 0.66rem !important;
  }

  tr.game-result td {
    padding: 10px 5px !important;
  }

  .games-name,
  .game-details {
    width: 50% !important;
    padding-left: 7px !important;
  }

  .today-date,
  .yesterday-date,
  .today-number,
  .yesterday-number {
    width: 25% !important;
  }

  .today-number p,
  .yesterday-number p {
    min-width: 36px;
    min-height: 38px;
    font-size: 1.18rem !important;
    border-radius: 7px;
  }

  .game-details > .game-name,
  .game-details .game-name {
    font-size: 0.86rem !important;
    line-height: 1.2 !important;
  }

  .live-game-item .result353:first-child {
    font-size: 0.66rem !important;
    line-height: 1.15 !important;
    letter-spacing: 0.05em !important;
  }

  .game-details > .game-time,
  .game-details .game-time,
  .game-link a {
    font-size: 0.64rem !important;
  }

  .result {
    padding: 8px !important;
  }

  .live-section-title {
    margin: 10px 0 8px;
    padding: 10px 12px;
  }

  .live-section-title span {
    font-size: 1rem;
  }

  .live-section-title strong {
    min-height: 28px;
    padding: 0 9px;
    font-size: 0.68rem;
  }

  .live-card-inner {
    gap: 6px;
  }

  .live-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .live-game-item {
    min-height: 82px;
    padding: 8px 5px;
    gap: 5px;
  }

  .live-card-meta span {
    min-height: 28px;
    padding: 4px 9px;
    font-size: 0.64rem;
  }

  .live-card-time {
    font-size: 0.76rem;
    line-height: 1.35;
  }

  .result353:last-child {
    width: min(100%, 82px);
    min-height: 38px;
    font-size: clamp(1.25rem, 8vw, 1.9rem) !important;
    padding: 5px 7px !important;
    border-radius: 7px;
  }

  .chart-heading-text {
    padding: 16px !important;
    font-size: 0.95rem !important;
  }

  .float,
  .float img {
    width: 54px !important;
    height: 54px !important;
  }

  .float {
    bottom: 78px !important;
    right: 10px !important;
  }

  .float-text {
    display: none !important;
  }
}

@media (max-width: 380px) {
  .live-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .live-game-item {
    min-height: 76px;
    padding: 7px 4px;
  }

  .live-game-item .result353:first-child {
    font-size: 0.6rem !important;
  }

  .result353:last-child {
    width: min(100%, 72px);
    min-height: 34px;
    font-size: 1.18rem !important;
  }
}

/* Dynamic monthly chart redesign */
#mix-chart.chart-table-wrapper {
  width: 100% !important;
  margin: 20px 0 24px !important;
  padding: 8px 0 14px !important;
  border-radius: 8px;
  background: transparent !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

#mix-chart.chart-table-wrapper .month h3 {
  margin: 0 !important;
  color: #ffffff !important;
  font-family: Inter, "Segoe UI", Arial, sans-serif !important;
  font-size: clamp(1rem, 2.4vw, 1.45rem) !important;
  font-weight: 950 !important;
  line-height: 1.35 !important;
  text-shadow: none !important;
}

#mix-chart.chart-table-wrapper .s-link {
  background: #f7f9f4 !important;
  border: 0 !important;
}

.nav-link {
  width: 100% !important;
  margin: 20px 0 !important;
  padding: 0 !important;
  border-radius: 8px !important;
  overflow: hidden;
  background: linear-gradient(135deg, var(--plum), var(--teal-dark)) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: var(--shadow);
}

.nav-link a {
  display: block !important;
  padding: 18px 20px !important;
  color: #ffffff !important;
  text-decoration: none !important;
}

.nav-text {
  margin: 0 !important;
  color: #ffffff !important;
  font-family: Inter, "Segoe UI", Arial, sans-serif !important;
  font-size: clamp(0.96rem, 2.2vw, 1.18rem) !important;
  font-weight: 900 !important;
  line-height: 1.35 !important;
  text-align: center !important;
  text-shadow: none !important;
}

#dynamic-charts .chart,
.chart-table-wrapper .chart {
  overflow-x: auto !important;
  padding: 8px 0 14px;
  border-radius: 8px;
  background: transparent !important;
}

#dynamic-charts .chart-table,
.chart-table-wrapper .chart-table {
  width: 100% !important;
  min-width: 620px;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  overflow: hidden;
  border: 1px solid rgba(24, 32, 47, 0.14) !important;
  border-radius: 8px;
  background: #ffffff !important;
  box-shadow: 0 16px 36px rgba(24, 32, 47, 0.12) !important;
}

#dynamic-charts .chart-head,
.chart-table-wrapper .chart-head {
  height: auto !important;
  background: #172033 !important;
  background-image: none !important;
}

#dynamic-charts .chart-head .month,
.chart-table-wrapper .chart-head .month {
  padding: 15px 14px !important;
  border: 0 !important;
  color: #ffffff !important;
  font-family: Inter, "Segoe UI", Arial, sans-serif !important;
  font-size: 1rem !important;
  font-weight: 950 !important;
  line-height: 1.35 !important;
  text-align: center !important;
}

#dynamic-charts .date-name,
.chart-table-wrapper .date-name {
  height: auto !important;
  background: var(--teal) !important;
  background-image: none !important;
}

#dynamic-charts .date-name th,
.chart-table-wrapper .date-name th,
#dynamic-charts .date-name .name,
.chart-table-wrapper .date-name .name {
  padding: 11px 10px !important;
  border: 0 !important;
  border-right: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
  font-family: Inter, "Segoe UI", Arial, sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 950 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
  text-shadow: none !important;
}

#dynamic-charts .day-number,
.chart-table-wrapper .day-number {
  height: auto !important;
  background: #ffffff !important;
  background-image: none !important;
}

#dynamic-charts .day-number:nth-child(even),
.chart-table-wrapper .day-number:nth-child(even) {
  background: #f3f7f4 !important;
}

#dynamic-charts .day-number:hover,
.chart-table-wrapper .day-number:hover {
  background: #fff6e5 !important;
}

#dynamic-charts .day-number td,
.chart-table-wrapper .day-number td,
#dynamic-charts .day-number .day,
#dynamic-charts .day-number .number,
.chart-table-wrapper .day-number .day,
.chart-table-wrapper .day-number .number {
  min-width: 72px;
  padding: 10px 9px !important;
  border: 0 !important;
  border-right: 1px solid rgba(24, 32, 47, 0.09) !important;
  border-bottom: 1px solid rgba(24, 32, 47, 0.08) !important;
  color: var(--ink) !important;
  font-family: Inter, "Segoe UI", Arial, sans-serif !important;
  font-size: 0.96rem !important;
  font-weight: 900 !important;
  text-align: center !important;
  text-shadow: none !important;
}

#dynamic-charts .day-number .day,
.chart-table-wrapper .day-number .day {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 92px;
  background: inherit !important;
  color: var(--plum) !important;
}

#dynamic-charts .number[style*="background-color:red"],
.chart-table-wrapper .number[style*="background-color:red"] {
  background: #ffe084 !important;
  color: #332400 !important;
  box-shadow: inset 0 0 0 2px rgba(216, 155, 36, 0.35);
}

#dynamic-charts td.e-link,
.chart-table-wrapper td.e-link,
#dynamic-charts td.d-link,
.chart-table-wrapper td.d-link {
  position: relative;
  background: linear-gradient(135deg, #006d69, #009f95) !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
  font-family: Inter, "Segoe UI", Arial, sans-serif !important;
  font-size: clamp(1rem, 2.4vw, 1.35rem) !important;
  font-weight: 950 !important;
  text-shadow: none !important;
}

#dynamic-charts tr.option,
.chart-table-wrapper tr.option {
  position: relative;
  background: #f7f9f4 !important;
  color: var(--ink) !important;
}

#dynamic-charts tr.option::after,
.chart-table-wrapper tr.option::after {
  content: "Current Chart";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 18px;
  border-radius: 999px;
  background: #ffffff;
  color: var(--ink);
  border: 1px solid rgba(0, 124, 120, 0.22);
  box-shadow: 0 10px 24px rgba(24, 32, 47, 0.12);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  font-size: 0.82rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  pointer-events: none;
}

#dynamic-charts tr.option td,
.chart-table-wrapper tr.option td {
  overflow: hidden;
}

#dynamic-charts td.e-link:hover,
.chart-table-wrapper td.e-link:hover,
#dynamic-charts td.d-link:hover,
.chart-table-wrapper td.d-link:hover {
  background: #004f4c !important;
}

#dynamic-charts td.e-link a,
.chart-table-wrapper td.e-link a,
#dynamic-charts td.d-link a,
.chart-table-wrapper td.d-link a {
  display: block;
  padding: 13px 10px !important;
  color: #ffffff !important;
  text-decoration: none !important;
}

#dynamic-charts td.d-link,
.chart-table-wrapper td.d-link {
  background: linear-gradient(135deg, #55345f, #007c78) !important;
  color: #ffffff !important;
}

#dynamic-charts td.d-link a,
.chart-table-wrapper td.d-link a {
  color: #ffffff !important;
}

#dynamic-charts td.e-link *,
.chart-table-wrapper td.e-link *,
#dynamic-charts td.d-link *,
.chart-table-wrapper td.d-link * {
  color: #ffffff !important;
  text-shadow: none !important;
}

@media (max-width: 720px) {
  #dynamic-charts .chart,
  .chart-table-wrapper .chart {
    margin-left: -8px;
    margin-right: -8px;
    padding-left: 8px;
    padding-right: 8px;
  }

  #dynamic-charts .chart-table,
  .chart-table-wrapper .chart-table {
    min-width: 560px;
  }

  #dynamic-charts .chart-head .month,
  .chart-table-wrapper .chart-head .month {
    padding: 12px 10px !important;
    font-size: 0.82rem !important;
  }

  #dynamic-charts .date-name th,
  .chart-table-wrapper .date-name th,
  #dynamic-charts .day-number td,
  .chart-table-wrapper .day-number td {
    padding: 8px 7px !important;
    font-size: 0.78rem !important;
  }

  #dynamic-charts .day-number .day,
  .chart-table-wrapper .day-number .day {
    min-width: 78px;
  }
}