@import url("https://fonts.googleapis.com/css?family=Share&display=swap");

:root {
  --card-border: 1px solid rgba(255, 255, 255, 0.06);
}

* {
  -webkit-tap-highlight-color: transparent;
}

html {
  overflow: hidden;
}

body {
  background-color: #000;
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 15px;
  height: calc(100vh - 0px);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.page {
  display: none;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#equities,
#forex,
#commodities,
#crypto,
#screener,
#earnings,
#homepage {
  padding-left: 8px;
  padding-right: 8px;
}

.active {
  display: block;
  visibility: visible !important;
}

.card {
  background-color: #202023;
  padding: 20px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: var(--card-border);
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  text-align: center;
}

.card h2 {
  margin: 0 0 10px 0;
  font-size: 74px;
  color: #fff;
  position: relative;
}

.card h2 span {
  font-size: 20px;
  position: absolute;
  top: -10px;
  right: -75px;
  color: #ffae42;
}

.card p {
  margin: 10px 0 0;
  font-size: 32px;
  color: #ffae42;
}

.wide {
  grid-column: span 2;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.equal-height {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100% !important;
}

.tall {
  grid-row: span 2;
  display: flex;
  justify-content: center;
  align-items: center;
}

.divider {
  height: 100%;
  width: 2px;
  background-color: #fff;
}

#fullscreen-btn {
  display: none;
  position: absolute;
  top: 24px;
  right: 10px;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 32px;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

#fullscreen-btn:hover {
  color: #6b7282;
}

#play-pause-btn {
  position: absolute;
  bottom: 30px;
  left: 30px;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 17px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: conic-gradient(#6b7282 0% 0%, #333 0% 100%);
  transition: background 1s linear;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

#play-pause-btn::before {
  content: "";
  position: absolute;
  width: 30px;
  height: 30px;
  background-color: #202023;
  border-radius: 50%;
}

#play-pause-btn i {
  position: relative;
  z-index: 1;
}

#prev-btn,
#next-btn,
#home-btn {
  position: absolute;
  bottom: 30px;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 20px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: conic-gradient(#6b7282 0% 0%, #333 0% 100%);
  transition: color 0.3s ease;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

#next-btn {
  right: 30px;
}

#prev-btn {
  right: 80px;
}

#home-btn {
  right: 130px;
}

#prev-btn:hover,
#next-btn:hover,
#home-btn:hover {
  color: #6b7282;
}

#dashboard {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.progress-bar {
  width: 80%;
  height: 40px;
  background-color: #333;
  border-radius: 10px;
  overflow: hidden;
  margin: 20px 0;
  position: relative;
}

.progress {
  height: 100%;
  border-radius: 10px 0 0 10px;
  position: relative;
  z-index: 1;
}

.progress-text {
  position: absolute;
  top: 180px;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #ffae42;
  font-size: 24px;
  z-index: 2;
  background-color: orange;
  border-radius: 5px;
  padding: 0 5px;
}

.split-flap {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px 0 50px 0;
}

.split-flap .digit {
  display: inline-block;
  text-align: center;
  color: #eee;
  background-color: #333;
  border: 1px solid #666;
  border-radius: 2px;
  margin-right: 1px;
  font-family: "Share", sans-serif;
  font-size: 150px;
  line-height: 1;
  width: 1.1ch;
}

.split-flap .digit[data-mode="alpha"] {
  width: 1.35ch;
}

.split-flap .digit[data-mode="words"] {
  width: 100%;
}

.split-flap .digit:last-child {
  margin-right: 0;
}

.hinge {
  height: 0.04em;
  background-color: #000;
}

.remaining-text {
  color: #fff;
  font-size: 32px;
}

.next-halving-text {
  color: #fff;
  font-size: 32px;
  margin-bottom: 0;
}

.date-time {
  font-size: 24px;
  color: #fff;
  margin-top: 0;
}

.estimated-text {
  color: #ffae42;
  font-size: 32px;
  margin-top: 10px;
}

.card .dynamic-date {
  color: #fff !important;
  font-size: 35px !important;
}

.price-container {
  display: flex;
  align-items: center;
  font-size: 60px;
  color: #fff;
}

.bdco-title {
  margin-right: 12px;
}

.bdco-value {
  display: inline-block;
  padding: 2px 14px;
  border-radius: 8px;
  font-weight: bold;
  line-height: 1.2;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.ism-title {
  margin-right: 12px;
}

.ism-value {
  display: inline-block;
  padding: 2px 14px;
  border-radius: 8px;
  font-weight: bold;
  line-height: 1.2;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.mayer-title {
  margin-right: 12px;
}

.mayer-value {
  display: inline-block;
  padding: 2px 14px;
  border-radius: 8px;
  font-weight: bold;
  line-height: 1.2;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.price-container-gold {
  display: flex;
  align-items: center;
  font-size: 50px;
  color: #fff;
}

.flashing-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-right: 15px;
  animation: flash 1s infinite alternate;
}

@keyframes flash {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.5;
  }
}

.price-change {
  margin-left: 15px;
  font-size: 40px;
}

.logo {
  position: absolute;
  top: 33px;
  left: 33px;
  width: 150px;
  height: auto;
}

/* ── Promo pill (bot-mode only) ──────────────────────────────────────────────
   Sits beside the logo, which is absolutely positioned at left:33 width:150 — so this
   starts at 199 and is vertically centred on the logo's 34px box. Only ever rendered
   for the ?_k= auto-post account; see js/promo-pill.js. */
.promo-pill {
  position: absolute;
  top: 34px;   /* centres on the logo's 34px box (mid 50) */
  left: 159px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px;
  border-radius: 6px;
  background: rgba(247, 147, 26, 0.12);
  border: 1.2px solid rgba(247, 147, 26, 0.45);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
}
/* MUST come with the display rule: `display:inline-flex` above outranks the browser's
   default [hidden]{display:none}, so without this the pill renders for EVERY visitor
   even while el.hidden is true — verified in preview (hidden:true but 313x31 painted). */
.promo-pill--clickable { cursor: pointer; transition: background 0.18s, border-color 0.18s; }
.promo-pill--clickable:hover { background: rgba(247,147,26,0.2); border-color: rgba(247,147,26,0.75); }
.promo-pill--clickable:focus-visible { outline: 2px solid rgba(247,147,26,0.9); outline-offset: 3px; }
.promo-pill[hidden] { display: none !important; }
.promo-pill-sep { color: rgba(255, 255, 255, 0.35); }
.promo-pill-price { color: #f7931a; font-weight: 700; }
/* The header is tight on a phone and the bot never captures at this width. */
@media (max-width: 900px) { .promo-pill { display: none; } }

/* Difficulty Adjustment Card Styles */
.difficulty-card {
  background-color: #202023;
  padding: 20px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 1px solid #202023;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.difficulty-card h1 {
  color: #f39c12;
  font-size: 32px;
  margin: 0;
  text-align: center;
}

.difficulty-card .remaining-blocks {
  font-size: 17px;
  margin: 0 0 20px 0;
  text-align: center;
  color: white;
}

.difficulty-card .adjustments {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-left: 60px;
  margin-bottom: -20px;
}

.difficulty-card .adjustments-left {
  display: flex;
  flex-direction: column;
  margin-right: 20px;
}

.difficulty-card .adjustment {
  display: flex;
  align-items: center;
  font-size: 18px;
  margin: 5px 0;
}

.difficulty-card .adjustment span {
  display: inline-block;
  margin-left: 5px;
}

.difficulty-card .arrow {
  margin-left: 5px;
  font-size: 18px !important;
}

.difficulty-card .progress {
  display: flex;
  align-items: center;
  margin-left: 20px;
}

.difficulty-card .progress-bar {
  position: relative;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: conic-gradient(#f39c12 0% 0%, #444 0% 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 50px;
}

.difficulty-card .progress-bar::before {
  content: "";
  position: absolute;
  width: 80px;
  height: 80px;
  background-color: #202023;
  border-radius: 50%;
}

.difficulty-card .progress-bar span {
  position: absolute;
  font-size: 18px;
  color: #fff;
}

/* Halving Progress Circle Styles */
.halving-progress-circle {
  position: relative;
  width: 800px;
  height: 800px;
  border-radius: 50%;
  background: conic-gradient(#ffae42 0% 0%, #444 0% 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px 0;
  z-index: 999;
}

.halving-progress-circle::before {
  content: "";
  position: absolute;
  width: 700px;
  height: 700px;
  background-color: #202023;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: -1;
}

.halving-progress-circle .inner-circle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  margin-top: 70px;
}

.halving-progress-circle .progress-text {
  font-size: 40px;
  color: #ffffff;
  background-color: #f49c12;
  border-radius: 5px;
  padding: 10px 10px 10px 10px;
}

.halving-progress-circle .progress-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
}

.marker {
  position: absolute;
  width: 2px;
  height: 80%;
  background-color: #fff;
}

.marker.vertical {
  height: 6.2%;
  width: 2px;
}

.marker.horizontal {
  width: 6.2%;
  height: 2px;
}

.marker.marker-0 {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.marker.marker-25 {
  top: 50%;
  left: 93.8%;
  transform: translateY(-50%);
}

.marker.marker-50 {
  top: 100%;
  left: 50%;
  transform: translate(-50%, -100%);
}

.marker.marker-75 {
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

/* Mobile Styles */
@media (max-width: 768px) {
  .card h2 {
    font-size: 20px;
  }

  .card p {
    font-size: 10px;
    vertical-align: top;
  }

  .wide {
    flex-direction: column;
    align-items: flex-start;
  }

  .wide div {
    margin-bottom: 10px;
  }

  .divider {
    width: 2px;
    height: 100%;
    background-color: #fff;
    margin: 10px 10px;
  }

  #fullscreen-btn,
  #play-pause-btn,
  #prev-btn,
  #next-btn,
  #home-btn {
    font-size: 16px;
    width: 24px;
    height: 24px;
  }

  #play-pause-btn {
    bottom: 30px;
    left: 15px;
    width: 28px;
    height: 28px;
  }
  
  .play-pause-container {
    left: 5px !important;
  }
  
  #footer-text {
    display: none;
  }

  #prev-btn,
  #next-btn,
  #home-btn {
    bottom: 30px;
  }

  #next-btn {
    right: 15px;
  }

  #prev-btn {
    right: 50px;
  }
  
  #home-btn {
    right: 85px;
  }

  .progress-bar {
    width: 100%;
    height: 20px;
  }

  .progress-text {
    font-size: 12px;
  }

  .split-flap .digit {
    font-size: 70px;
  }

  .remaining-text,
  .date-time,
  .estimated-text {
    font-size: 16px;
  }

  .card .dynamic-date {
    font-size: 25px !important;
  }

  .price-container {
    font-size: 30px;
  }

  .bdco-title {
    margin-right: 6px;
  }

  .bdco-value {
    padding: 1px 8px;
    border-radius: 6px;
  }

  .ism-title {
    margin-right: 6px;
  }

  .ism-value {
    padding: 1px 8px;
    border-radius: 6px;
  }

  .mayer-title {
    margin-right: 6px;
  }

  .mayer-value {
    padding: 1px 8px;
    border-radius: 6px;
  }

  .price-change {
    font-size: 20px;
  }

  .logo {
    width: 100px;
    left: 12px !important;
  }

  .header-icons {
    top: 10px;
  }

  .halving-progress-circle {
    width: 300px;
    height: 300px;
  }

  .halving-progress-circle::before {
    width: 200px;
    height: 200px;
  }
}

.displays {
  padding: 10px 10px 25px 10px;
  border-radius: 30px;
}

.flapper {
  margin-bottom: 2px;
  text-align: center;
}

.inputarea {
  margin: 24px 0;
}

#typesomething,
#showme {
  font-family: Roboto Condensed;
  font-size: 18px;
  padding: 14px;
  background-color: #eee;
  color: #333;
  border: 0;
  height: 170px;
}

#typesomething {
  width: 300px;
}

#showme:hover {
  background-color: #ddd;
}

#showme:active {
  background-color: #ccc;
}

div.inline {
  display: inline-block;
  vertical-align: bottom;
}

div.activity {
  width: 12px;
  height: 12px;
  border-radius: 6px;
  position: relative;
  top: 71px;
  left: -35px;
}

/* div.activity.active {
    background-color: #0f0;
} */

.flapper-flashing-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-right: 5px;
  position: absolute;
  top: -4px;
  left: -10px;
  animation: flash 1s infinite alternate;
}

#bitcoin-distribution-table {
  width: 100%;
  font-size: 1.2em;
  border-collapse: collapse;
  border-radius: 15px;
  overflow: hidden;
}

#bitcoin-distribution-table th,
#bitcoin-distribution-table td {
  padding: 12px;
  text-align: center;
  border: 1px solid #686868;
}

#bitcoin-distribution-table th {
  background-color: #333;
  color: #fff;
}

#bitcoin-distribution-table td {
  background-color: #fff2e0;
  color: #000000;
}

.wallet-type-container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.wallet-icon {
  font-size: 1.9em;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  background-color: #d7bc99;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  line-height: 1;
}

.wallet-type {
  color: #000000;
  font-weight: bold;
  text-transform: uppercase;
  line-height: 1;
}

.header-icons {
  position: absolute;
  top: 10px;
  right: 27px;
  display: flex;
  align-items: center;
  z-index: 999;
}

.live-button,
.date-time {
  margin-top: 26px;
  margin-right: 10px;
  font-size: 16px;
  color: white;
  display: flex;
  align-items: center;
}

.live-button {
  border: 1.2px solid white;
  padding: 5px 10px;
  border-radius: 6px;
  margin-right: 15px;
}

.dashboard-settings-btn {
  background: transparent;
  border: 1.2px solid rgba(255, 255, 255, 0.5);
  color: rgba(255, 255, 255, 0.7);
  -webkit-tap-highlight-color: transparent;
  padding: 8px 10px;
  border-radius: 6px;
  margin-right: 15px;
  margin-top: 25px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dashboard-settings-btn:hover {
  border-color: #fff;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  transform: scale(1.05);
}

.dashboard-settings-btn:active {
  transform: scale(0.95);
}

/* ── AI voice captions + orb (js/ai-captions.js) ──
   Floats above the bottom edge, over the dashboard, as an Apple-style glass panel. The live
   blur is skipped in the Android kiosk WebView (backdrop-filter flickers there): html.fc-noblur. */
.fc-wrap {
  position: fixed; left: 50%; bottom: 84px; z-index: 9000;
  transform: translate(-50%, 16px); opacity: 0; pointer-events: none;
  display: flex; align-items: center; gap: 16px;
  max-width: min(720px, calc(100vw - 48px)); box-sizing: border-box;
  padding: 14px 22px 14px 14px; border-radius: 30px;
  /* frosted glass: a light veil over a blurred, saturated backdrop */
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.04) 45%, rgba(255, 255, 255, 0.09) 100%), rgba(22, 22, 30, 0.42);
  -webkit-backdrop-filter: blur(28px) saturate(185%) brightness(1.08); backdrop-filter: blur(28px) saturate(185%) brightness(1.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  /* edge light (Fresnel rim), a brighter lip on top, a soft inner floor, and the drop shadow */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(255, 255, 255, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    inset 0 0 22px rgba(255, 255, 255, 0.08),
    inset 0 -14px 24px rgba(0, 0, 0, 0.18),
    0 1px 10px rgba(0, 0, 0, 0.30),
    0 18px 50px rgba(0, 0, 0, 0.40);
  transition: opacity 0.35s ease, transform 0.35s ease;
  isolation: isolate;
}
/* specular sheen across the upper-left of the glass */
.fc-wrap::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background:
    radial-gradient(120% 90% at 18% -10%, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 55%),
    linear-gradient(90deg, rgba(255, 120, 60, 0.05), rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0) 70%, rgba(90, 160, 255, 0.05));
}
/* desktop Chromium: real refraction of the live dashboard through the SVG lens (js/ai-captions.js) */
html.fc-lens .fc-wrap {
  -webkit-backdrop-filter: url(#fc-lens); backdrop-filter: url(#fc-lens);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.03) 45%, rgba(255, 255, 255, 0.07) 100%), rgba(18, 18, 26, 0.36);
}
html.fc-noblur .fc-wrap {
  -webkit-backdrop-filter: none; backdrop-filter: none;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04)), rgba(24, 24, 32, 0.86);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .fc-wrap { background: linear-gradient(160deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04)), rgba(24, 24, 32, 0.86); }
}
.fc-wrap.show { opacity: 1; transform: translate(-50%, 0); }
.fc-wrap.fc-wide { width: min(720px, calc(100vw - 48px)); }
/* nobody talking: just the orb, in a round glass bubble */
.fc-wrap:not(.fc-wide) { padding: 8px; gap: 0; border-radius: 50%; }
.fc-wrap.fc-no-orb:not(.fc-wide) { opacity: 0; }
.fc-orb { flex-shrink: 0; border-radius: 50%; display: block; }
.fc-text {
  flex: 1; min-width: 0; text-align: left;
  color: #fff; font-size: 19px; line-height: 1.38; font-weight: 500;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.fc-text:empty { display: none; }
.fc-text.fc-user { color: rgba(255, 255, 255, 0.6); font-style: italic; }
.fc-wrap.fc-no-orb .fc-orb { display: none; }
.fc-wrap.fc-no-orb { padding-left: 22px; }
.fc-wrap.fc-no-text .fc-text { display: none; }
.fc-wrap.fc-no-text { padding: 12px; border-radius: 50%; }
@media screen and (max-width: 767px) {
  .fc-wrap { bottom: 86px; max-width: calc(100vw - 24px); gap: 12px; padding: 12px 16px 12px 12px; border-radius: 24px; }
  .fc-wrap.fc-wide { width: calc(100vw - 24px); }
  .fc-text { font-size: 15px; }
}

/* ── Global search modal (js/global-search.js) ──
   The dashboard behind is dimmed and blurred with filter on the page itself, not
   backdrop-filter (that flickers on the Android kiosk WebView). */
.gs-overlay {
  position: fixed; inset: 0; z-index: 10000;
  display: none; align-items: flex-start; justify-content: center;
  padding: 12vh 16px 0; box-sizing: border-box;
  background: rgba(0, 0, 0, 0.55);
}
.gs-overlay.open { display: flex; }
body.gs-open > *:not(.gs-overlay) { filter: blur(6px); transition: filter 0.2s ease; }
.gs-modal {
  width: min(760px, 100%); max-height: 76vh; display: flex; flex-direction: column;
  background: #1b1b1f; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6); overflow: hidden;
}
.gs-input-row { display: flex; align-items: center; gap: 14px; padding: 18px 22px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.gs-input-row > i { color: rgba(255, 255, 255, 0.45); font-size: 22px; }
.gs-input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: #fff; font-size: 26px; font-family: inherit; }
.gs-input::placeholder { color: rgba(255, 255, 255, 0.3); }
.gs-close { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.55); border-radius: 6px; padding: 4px 9px; font-size: 12px; cursor: pointer; flex-shrink: 0; }
.gs-close:hover { color: #fff; border-color: rgba(255, 255, 255, 0.3); }
.gs-list { overflow-y: auto; padding: 6px; }
/* No results yet: hide the empty list and its line, so only one separator shows */
.gs-list:empty { display: none; }
.gs-list:empty + .gs-hint { border-top: none; }
.gs-hint:empty { display: none; }
.gs-item { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 16px; background: transparent; border: none; border-radius: 10px; color: #e2e8f0; text-align: left; cursor: pointer; font-family: inherit; }
.gs-item.active, .gs-item:hover { background: rgba(255, 255, 255, 0.07); }
.gs-kind { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; border: 1px solid; border-radius: 3px; padding: 3px 7px; width: 92px; text-align: center; flex-shrink: 0; box-sizing: border-box; }
.gs-k-equity    { color: #60a5fa; background: rgba(96, 165, 250, 0.07); border-color: rgba(96, 165, 250, 0.25); }
.gs-k-crypto    { color: #e0912f; background: rgba(247, 147, 26, 0.07); border-color: rgba(247, 147, 26, 0.25); }
.gs-k-forex     { color: #e05a5a; background: rgba(210, 60, 60, 0.07);  border-color: rgba(210, 60, 60, 0.25); }
.gs-k-commodity { color: #a3a3a3; background: rgba(200, 200, 200, 0.07); border-color: rgba(200, 200, 200, 0.22); }
.gs-sym { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 18px; color: #fff; min-width: 110px; flex-shrink: 0; }
.gs-name { flex: 1; min-width: 0; font-size: 15px; color: rgba(255, 255, 255, 0.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-exch { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: rgba(255, 255, 255, 0.35); flex-shrink: 0; }
.gs-msg { padding: 16px 18px; color: rgba(255, 255, 255, 0.45); font-size: 14px; }
.gs-hint { padding: 10px 22px; border-top: 1px solid rgba(255, 255, 255, 0.07); font-size: 12px; color: rgba(255, 255, 255, 0.35); min-height: 14px; }
@media screen and (max-width: 767px) {
  .gs-overlay { padding-top: 70px; }
  .gs-input-row { padding: 14px 16px; gap: 10px; }
  .gs-input { font-size: 18px; }
  .gs-item { padding: 10px 10px; gap: 10px; }
  .gs-kind { width: 76px; font-size: 9px; padding: 3px 4px; }
  .gs-sym { font-size: 15px; min-width: 64px; }
  .gs-name { font-size: 13px; }
  .gs-exch { display: none; }
}

.ai-mic-button {
  background: transparent;
  border: 1.2px solid #ff6b35;
  color: #ff6b35;
  -webkit-tap-highlight-color: transparent;
  padding: 8px 10px;
  border-radius: 6px;
  margin-right: 15px;
  margin-top: 25px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ai-mic-button:hover {
  border-color: #ff6b35;
  color: #ff6b35;
  background: rgba(255, 107, 53, 0.15);
  transform: scale(1.05);
}

.ai-mic-button:active {
  transform: scale(0.95);
}

.ai-mic-button.active {
  border-color: #00ff88;
  color: #00ff88;
  background: rgba(0, 255, 136, 0.1);
  /* Faster transition for volume-based animation responsiveness */
  transition: transform 0.05s ease-out, box-shadow 0.05s ease-out, filter 0.05s ease-out, border-color 0.3s ease, color 0.3s ease, background 0.3s ease;
}

.ai-mic-button.disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}

/* AI mic button is visible on ALL devices - no restrictions */

.live-dot {
  width: 10px;
  height: 10px;
  background-color: green;
  border-radius: 50%;
  margin-right: 7px;
  margin-bottom: 2px;
  animation: blink 2s infinite;
}

/* Same look as fading background-color green -> transparent, but an opacity animation runs on
   the GPU compositor, while a colour animation repaints every frame on every page (the dot is
   always on screen); that kept the Raspberry Pi kiosk busy at 60 fps (2026-11-03). */
@keyframes blink {
  0%,
  50%,
  100% {
    opacity: 1;
  }
  25%,
  75% {
    opacity: 0;
  }
}

#map-container {
  width: 100%;
  height: 80%;
  padding: 0;
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  overflow: hidden;
}

#map {
  height: 100%;
  width: 100%;
  position: relative;
  margin-top: 22px;
  max-height: 720px;
}

.leaflet-container {
  background: none !important;
}

.leaflet-control-attribution {
  display: none;
}

#reachable-nodes {
  position: absolute;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.7);
  padding: 15px;
  border-radius: 5px;
  color: #ffae42;
  font-size: 20px;
  text-align: center;
  z-index: 9999;
}

.wallet-distribution-text {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  text-align: center;
  margin-bottom: 10px !important;
}

#bitcoin-distribution-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0px 0px 40px 0px;
  font-size: 19px;
  text-align: left;
}

#bitcoin-distribution-table th,
#bitcoin-distribution-table td {
  padding: 8px;
  border: 0px solid #ddd;
}

#bitcoin-distribution-table th {
  background-color: #7e7d7d;
  font-weight: bold;
}

#bitcoin-distribution-table tbody tr:nth-child(even) {
  background-color: #be2506;
}

.wallet-100k {
  background-color: #be2506 !important;
}

.wallet-humpback {
  background-color: #cb5204 !important;
}

.wallet-whale {
  background-color: #e08300 !important;
}

.wallet-shark {
  background-color: #ff9e14 !important;
}

.wallet-fish {
  background-color: #ffb347 !important;
}

.wallet-crab {
  background-color: #ffc87a !important;
}

.wallet-shrimp {
  background-color: #ffddad !important;
}

.wallet-other {
  background-color: #cc99ff !important;
}

#bitcoin-distribution-table tbody tr.wallet-100k td,
#bitcoin-distribution-table tbody tr.wallet-humpback td,
#bitcoin-distribution-table tbody tr.wallet-whale td,
#bitcoin-distribution-table tbody tr.wallet-shark td,
#bitcoin-distribution-table tbody tr.wallet-fish td,
#bitcoin-distribution-table tbody tr.wallet-crab td,
#bitcoin-distribution-table tbody tr.wallet-shrimp td,
#bitcoin-distribution-table tbody tr.wallet-other td {
  background-color: inherit;
}

.left-align {
  display: flex;
  align-items: center;
}

.adjustment-next .left-align,
.adjustment-prev .left-align {
  display: flex;
  align-items: center;
}

.adjustments-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

@media (max-width: 1366px) {
  #page1 .card h2 {
    font-size: 50px;
  }

  #page1 .card p {
    font-size: 20px;
  }

  #page1 .difficulty-card .adjustment span {
    font-size: 16px;
  }

  #page1 .difficulty-card .progress-bar span {
    font-size: 16px;
  }

  #page1 .difficulty-card .remaining-blocks {
    font-size: 14px;
  }

  #page1 .difficulty-card h1 {
    font-size: 24px;
  }

  .difficulty-card .adjustments-left {
    display: flex;
    flex-direction: column;
    margin-right: 10px;
  }

  .progress-bar {
    margin: 0px 0;
  }
}

.satsusd-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start !important;
  margin-top: 20px;
  max-width: 1250px;
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
}

.satsusd-large-square {
  width: 180px;
  height: 180px;
  display: grid;
  grid-template-columns: repeat(10, 18px);
  grid-template-rows: repeat(10, 18px);
  gap: 1px;
  border: 0px solid #ccc;
  margin: 12px;
  box-sizing: border-box;
}

.satsusd-small-square {
  width: 18px;
  height: 18px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

.satsusd-price-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  margin-bottom: 20px;
  text-align: center;
}

.satsusd-price-container .satsusd-flashing-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: gray;
  margin-right: 10px;
}

#satsusd-value-container {
  display: flex;
  flex-direction: row;
  align-items: center;
}

#satsusd-value {
  font-size: 60px;
  margin-right: 10px;
  color: white;
}

#sats-per-dollar {
  color: white;
}

.satsusd-price-change {
  font-size: 40px;
}

.satsusd-flashing-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-right: 15px;
  animation: flash 1s infinite alternate;
}

.fear-greed-page {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.fear-greed-title {
  font-size: 2rem;
  color: white;
  margin-bottom: 20px;
  text-align: center;
}

.highcharts-figure {
  width: 100%;
  max-width: 1260px;
  height: 840px;
  margin: -80px auto;
}

.gauge-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px 0;
  min-height: 800px;
}

#fearGreedGauge {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}

/* Specific styling for Fear & Greed page */
#page10 .gauge-container {
  margin: 0;
  padding: 0;
  min-height: auto;
}

#page10 .price-container {
  margin: -60px 0 40px 0;
  padding: 0;
}

#page10 .card {
  padding: 5px;
}

.historical-data-container {
  margin-top: 95px;
  text-align: center;
}

.historical-data {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
}

.historical-data li {
  margin: 0 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.historical-data .label {
  color: #fff;
  font-size: 18px;
  margin-bottom: 15px;
}

.historical-data .value-wrapper {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.historical-data .value {
  font-weight: bold;
  color: white;
  font-size: 1.2rem;
}

/* Color coding based on value classification */
.value-wrapper.dark-green {
  background-color: #006400;
}

.value-wrapper.green {
  background-color: #27ae60;
}

.value-wrapper.yellow {
  background-color: #f1c40f;
}

.value-wrapper.red {
  background-color: #e74c3c;
}

.value-wrapper.dark-red {
  background-color: #8b0000;
}

.value-wrapper {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-left: 10px;
}

.value {
  font-weight: bold;
  color: white;
  font-size: 35px;
}

/* Triangle Container */
.triangle-container {
  position: relative;
  width: 1100px;
  height: 760px;
  margin: 0 auto;
}

/* SVG Styling */
.triangle-svg {
  width: 100%;
  height: 100%;
}

/* Layer Colors */
#layer1 {
  fill: #fff2e0;
} /* $100 */
#layer2 {
  fill: #ffddad;
} /* $1,000 */
#layer3 {
  fill: #ffc97b;
} /* $10,000 */
#layer4 {
  fill: #ffb347;
} /* $100,000 */
#layer5 {
  fill: #ff9f13;
} /* $1,000,000 */
#layer6 {
  fill: #ad6600;
} /* $10,000,000 */

.layer-content {
  position: absolute;
  width: 100%;
  text-align: center;
  color: #202023;
  font-weight: bold;
}

#content1 {
  top: calc(91.6667% - 5px);
}
#content2 {
  top: calc(75% - 5px);
}
#content3 {
  top: calc(58.3333% - 5px);
}
#content4 {
  top: calc(41.6667% - 5px);
}
#content5 {
  top: calc(25% - 5px);
}
#content6 {
  top: calc(8.3333% - 5px);
}

.layer-label {
  font-size: 20px;
  color: white;
  background: #0000003b;
  padding: 5px 5px;
  border-radius: 5px;
  display: inline-block;
}

.layer-value {
  font-size: 24px;
  margin-top: 3px;
  display: block;
}

.change-value {
  font-size: 0.9em;
  margin-left: 5px;
}

.play-pause-container {
  display: flex;
  align-items: center;
  gap: 10px;
  position: absolute;
  bottom: 0px;
  left: 0px !important;
}

#footer-text {
  font-size: 14px;
  color: #fff;
  margin-bottom: 41px;
  margin-left: 85px;
  z-index: 1;
}

.marketcap-text {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  text-align: center;
}

.worldassets-text {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  text-align: center;
  margin-bottom: 20px;
}

.node {
  position: absolute;
  border: 1px solid #fff;
  overflow: hidden;
  text-indent: 5px;
  font-size: 12px;
  line-height: 1.5;
  color: white;
}

.globalassets-text {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  text-align: center;
  margin-bottom: 10px !important;
}

.pricerange-text {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  text-align: center;
  margin-bottom: 10px !important;
}

.wealthdistribution-text {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  text-align: center;
  margin-bottom: 20px;
}

#page16 .card canvas {
  display: block;
  width: 100%;
  height: 350px;
  margin: 0 auto;
  box-sizing: border-box;
}

.mayermultiple-text {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  text-align: center;
  margin-bottom: 0px;
}

#mayerMultipleChart {
  width: 100% !important;
  height: 80% !important;
}

#settings-btn {
  position: absolute;
  top: 38px;
  right: 35px;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #fff;
  z-index: 9999;
}

#settings-btn:hover {
  color: #f39c12;
}

#settings-modal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  max-width: 800px;
  max-height: 90%;
  background-color: black;
  color: white;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
  z-index: 1000;
  overflow: auto;
}

.modal-content {
  padding: 20px;
}

#pages-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  justify-content: center;
  align-items: center;
}

.page-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border: 1px solid white;
  border-radius: 5px;
  padding: 10px;
  background-color: #333;
  cursor: grab;
}

.page-item img {
  width: 120px;
  height: auto;
  margin-bottom: 5px;
  border-radius: 5px;
}

.page-item input {
  margin-top: 5px;
}

.drag-handle {
  cursor: grab;
  font-size: 16px;
  margin-bottom: 5px;
}

#close-settings {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 20px;
  cursor: pointer;
  color: white;
}

#close-settings:hover {
  color: red;
}

#save-settings {
  display: block;
  width: 100%;
  padding: 10px;
  background-color: orange;
  border: none;
  border-radius: 5px;
  color: black;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  text-align: center;
  margin-top: 20px;
}

#save-settings:hover {
  background-color: darkorange;
}

.page-item.dragging {
  opacity: 0.5;
}

.placeholder {
  height: 140px;
  width: 120px;
  border: 2px dashed green;
  border-radius: 5px;
  margin: 5px;
}

/* Drop indicator */
.drop-indicator {
  position: absolute;
  width: 2px;
  height: 100%;
  background-color: green;
  pointer-events: none;
  z-index: 1000;
}

.page-item {
  position: relative;
}

.arrow-btn {
  position: absolute;
  bottom: 5px;
  width: 20px;
  height: 20px;
  border: none;
  background-color: #f39c12;
  color: black;
  border-radius: 50%;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
}

.arrow-btn:hover {
  background-color: #d0870d;
}

.arrow-left {
  left: 5px;
}

.arrow-right {
  right: 5px;
}

.settings-text {
  font-size: 20px;
  font-weight: bold;
  color: #ffffff;
  text-align: center;
  margin-top: 0px;
}

.thankyou-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  z-index: 1;
}

.logo,
#prev-btn,
#next-btn,
#play-pause-btn,
#fullscreen-btn {
  z-index: 10;
}

.center-text {
  position: absolute;
  z-index: 2;
  text-align: center;
}
.thank-you {
  font-size: 100px;
  font-weight: bold;
  color: white;
  text-shadow: 0 0 0px rgba(255, 255, 255, 0);
  animation: subtle-glow 2.5s ease-out infinite alternate;
}
.satoshi {
  font-size: 100px;
  font-weight: bold;
  color: #ffae42;
  text-shadow: 0 0 0px rgba(255, 174, 66, 0);
  animation: subtle-glow-orange 2.5s ease-out infinite alternate;
}
@keyframes subtle-glow {
  from {
    text-shadow: 0 0 0px rgba(255, 255, 255, 0);
  }
  to {
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.7),
      0 0 25px rgba(255, 255, 255, 0.5), 0 0 35px rgba(255, 255, 255, 0.3);
  }
}
@keyframes subtle-glow-orange {
  from {
    text-shadow: 0 0 0px rgba(255, 174, 66, 0);
  }
  to {
    text-shadow: 0 0 15px rgba(255, 174, 66, 0.7),
      0 0 25px rgba(255, 174, 66, 0.5), 0 0 35px rgba(255, 174, 66, 0.3);
  }
}
.circle {
  position: absolute;
  width: 45%;
  height: 45%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.circle .text {
  position: absolute;
  width: 100%;
  height: 100%;
  font-size: 25px;
  color: white;
  opacity: 0.8;
  text-align: center;
  transform-origin: center;
}
@keyframes rotate {
  0% {
    transform: rotate(calc(360deg / 21 * var(--i))) translateX(40%);
  }
  100% {
    transform: rotate(calc(360deg + 360deg / 21 * var(--i))) translateX(40%);
  }
}
.circle .text {
  animation: rotate 30s linear infinite;
  animation-fill-mode: forwards;
}

/* Page 17 */
#page17 {
  position: relative;
}

#page17::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1200px;
  height: 85%;
  background-color: #2a2a2d;
  clip-path: polygon(50% 0%, 100% 35%, 100% 100%, 0% 100%, 0% 35%);
  border-radius: 10px;
  z-index: 1;
}

.house-price-text {
  font-size: 36px;
  font-weight: bold;
  color: #fff;
  text-align: center;
  margin-bottom: 40px;
  z-index: 10;
}

#page17 .house-price-text {
  position: absolute;
  left: 50%;
  bottom: 110px;
  transform: translateX(-50%);
  margin-bottom: 0 !important;
  z-index: 10;
}

#page17 .price-container {
  transform: scale(1.5);
  transform-origin: top center;
  z-index: 10;
  margin-bottom: 70px;
}

#page17::after {
  content: "";
  position: absolute;
  width: 75px;
  height: 150px;
  top: 50%;
  left: 50%;
  transform: translate(460px, -280px);
  background-color: #2a2a2d;
  border-radius: 4px;
  z-index: 0;
}

.historical-house-prices,
.extended-historical-house-prices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 0 20px;
  align-items: stretch;
  z-index: 20;
  color: white;
}

.historical-price-card {
  background-color: #2a2a2d;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 40px;
  text-align: center;
  transition: transform 0.2s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 30;
}

/* Page 17 specific background color - desktop only */
@media screen and (min-width: 769px) {
  #page17 .historical-price-card {
    background-color: #202023;
  }
}

.historical-house-prices .historical-price-card {
  height: 170px;
  width: 238px;
}

.historical-house-prices .period-label {
  font-size: 36px;
  margin-bottom: 15px;
}

.historical-house-prices .price-value {
  font-size: 60px;
  margin-bottom: 0px;
}

.historical-house-prices .change-value {
  font-size: 32px;
  margin-top: 16px;
}

.extended-historical-house-prices {
  margin-top: 20px;
  margin-bottom: 110px;
}

.extended-historical-house-prices .historical-price-card {
  height: 55px;
  width: 238px;
  font-size: 0.8em;
  margin-bottom: -150px;
}

.extended-historical-house-prices .period-label {
  font-size: 23px;
  margin-bottom: 8px;
  color: #7d7b7b;
}

.extended-historical-house-prices .price-value {
  font-size: 30px;
  margin-bottom: 6px;
  color: #7d7b7b;
}

.extended-historical-house-prices .change-value {
  font-size: 17px;
  margin-top: 6px;
}

.historical-house-prices .historical-price-card:last-child,
.extended-historical-house-prices .historical-price-card:last-child {
  margin-right: 0;
}

/* Page 18 */

.polar-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
}

.centered-polar-image {
  max-width: 100%;
  max-height: 100%;
}

.powerlaw-text {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  text-align: center;
  margin-bottom: 10px !important;
}

/* Page 19 */
#page19 .card {
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#btcPowerLawChart {
  width: 100% !important;
  height: 80% !important;
}

#bandPrices {
  position: absolute;
  bottom: 200px;
  right: 70px;
  background: rgba(0, 0, 0, 0.7);
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #ccc;
  width: 200px;
  z-index: 10;
  color: white;
  text-align: left;
  font-size: 15px;
}

.model-box {
  position: absolute;
  bottom: 145px;
  right: 70px;
  background: rgba(0, 0, 0, 0.7);
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #ccc;
  width: 200px;
  z-index: 10;
  font-family: "Times New Roman", serif;
  color: white;
  text-align: left;
  font-size: 15px;
}

/* Page 20 */

#page20 .card {
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#btcStockToFlowChart {
  width: 100% !important;
  height: 80% !important;
}

.stocktoflow-text {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  text-align: center;
  margin-bottom: 10px !important;
}

#s2fMetrics {
  position: absolute;
  bottom: 250px;
  right: 70px;
  background: rgba(0, 0, 0, 0.7);
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #ccc;
  width: 200px;
  z-index: 10;
  color: white;
  text-align: left;
  font-size: 15px;
}

#halvingColorScale {
  position: absolute;
  bottom: 150px;
  right: 70px;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid rgba(128, 128, 128, 0.2);
  border-radius: 4px;
  width: 200px;
  background-color: rgba(255, 255, 255, 0.05);
}

#halvingColorScale > div:first-child {
  font-size: 12px;
  margin-bottom: 5px;
  color: rgba(255, 255, 255, 0.7);
}

.halving-gradient-bar {
  display: flex;
  height: 20px;
  margin-bottom: 2px;
}

.halving-gradient {
  flex-grow: 1;
  background: linear-gradient(
    to right,
    #0047ab 0%,
    /* Dark Blue */ #00a6ed 20%,
    /* Light Blue */ #00ff94 30%,
    /* Cyan */ #4cbb17 40%,
    /* Green */ #ffd700 50%,
    /* Yellow */ #ffa500 60%,
    /* Orange */ #ff4500 70%,
    /* Orange Red */ #ff0000 80%,
    /* Red */ #dc143c 90%,
    /* Crimson */ #8b0000 100% /* Dark Red */
  );
}

.halving-scale-labels {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.7);
}

.s2f-formula {
  color: rgba(72, 217, 150, 1);
  font-size: 14px;
  margin-bottom: 8px;
}

.page-navigation {
  position: fixed;
  bottom: 0px;
  right: 0px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 1000;
}

#page-counter {
  font-size: 20px;
  color: #fff;
  margin-bottom: 30px;
  margin-right: 180px;
  background: rgba(0, 0, 0, 0.6);
  padding: 8px 15px;
  border-radius: 20px;
  font-weight: 500;
  letter-spacing: 2px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(5px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Navigation button enhanced styling - positions defined in earlier rule block */
#prev-btn,
#next-btn,
#home-btn {
  display: inline-flex;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5px);
}

/* Mobile nav button positioning */
/* Mobile home button - use initial position to follow flex flow */
@media (max-width: 768px) {
  #home-btn {
    width: 28px !important;
    height: 28px !important;
    font-size: 14px !important;
    position: initial;
  }
  
  #page-counter {
    font-size: 14px !important;
    padding: 6px 10px !important;
    margin-right: 0px !important;
  }
}

#hashrateChart {
  width: 100% !important;
  height: 80% !important;
}

#myChart {
  width: 100% !important;
  height: 80% !important;
}

#marketCapChart {
  width: 100% !important;
  height: 80% !important;
}

#priceRangeChart {
  width: 100% !important;
  height: 80% !important;
}

#treemapContainer {
  position: relative;
  width: 100% !important;
  height: 80% !important;
  margin-bottom: 30px;
}

#txChart {
  width: 100% !important;
  height: 80% !important;
}

.mayer-flashing-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-right: 15px;
  background-color: gray;
  animation: flash 1s infinite alternate;
}

@keyframes flash {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.5;
  }
}

.mayer-price-container {
  display: flex;
  align-items: center;
}

/* For 2K monitors (2560 x 1440) - Page 1 */
@media screen and (min-width: 2000px) and (max-width: 2600px) {
  #dashboard .card h2 {
    font-size: 90px;
  }

  #dashboard .card p {
    font-size: 38px;
  }

  #dashboard .card h2 span {
    font-size: 24px;
    right: -65px;
    top: -12px;
  }

  .difficulty-card .adjustment span {
    font-size: 20px;
  }

  .difficulty-card .progress-bar span {
    font-size: 20px;
  }

  .difficulty-card .remaining-blocks {
    font-size: 18px;
  }

  .difficulty-card h1 {
    font-size: 28px;
  }

  .difficulty-card .progress-bar {
    width: 130px;
    height: 130px;
  }

  .difficulty-card .progress-bar::before {
    width: 90px;
    height: 90px;
  }

  #dashboard {
    gap: 15px;
  }

  .card,
  .difficulty-card {
    padding: 25px;
  }

  .difficulty-card .adjustments {
    margin-bottom: -60px;
    margin-top: 50px;
  }

}

@media screen and (min-width: 3000px) {
  #dashboard .card h2 {
    font-size: 110px;
  }

  #dashboard .card p {
    font-size: 46px;
  }

  #dashboard .card h2 span {
    font-size: 30px;
    right: -80px;
    top: -15px;
  }
}

/* For 2K monitors (2560 x 1440) - Page 4 */
@media screen and (min-width: 2000px) and (max-width: 2600px) {
  .halving-progress-circle {
    width: 1200px;
    height: 1200px;
  }

  .halving-progress-circle::before {
    width: 1050px;
    height: 1050px;
  }

  .halving-progress-circle .progress-text {
    font-size: 60px;
    padding: 15px 18px;
    top: 275px;
  }

  .halving-progress-circle .inner-circle {
    margin-top: 100px !important;
  }

  .remaining-text {
    font-size: 60px !important;
    margin-top: 30px !important;
    margin-bottom: 15px !important;
  }

  .split-flap .digit {
    font-size: 210px;
    width: 1.2ch;
    line-height: 1;
    margin-right: 3px;
  }

  .next-halving-text {
    font-size: 40px !important;
    margin-top: 35px !important;
    margin-bottom: 15px !important;
  }

  .card .dynamic-date {
    font-size: 55px !important;
  }

  .marker.vertical {
    height: 6.27%;
    width: 3px;
  }

  .marker.horizontal {
    width: 6.27%;
    height: 3px;
  }
}

/* For 2K monitors (2560 x 1440) - Page 8 */
@media screen and (min-width: 2000px) and (max-width: 2600px) {
  #map-container {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  #map {
    height: 100%;
    width: 100%;
    transform: scale(1.6);
    transform-origin: center;
    margin-top: 320px;
    clip-path: inset(0 0 4% 0);
  }

  #reachable-nodes {
    bottom: 110px;
    font-size: 35px;
    padding: 20px 30px;
    background-color: rgba(0, 0, 0, 0.8);
    border-radius: 8px;
  }
}

/* For 2K monitors (2560 x 1440) - Page 9 */
@media screen and (min-width: 2000px) and (max-width: 2600px) {
  #page9 .satsusd-price-container {
    transform: scale(1.5);
    transform-origin: center top;
    margin-bottom: 60px;
  }

  #page9 #satsusd-value {
    font-size: 70px;
    margin-right: 30px;
  }

  #page9 .satsusd-price-change {
    font-size: 40px;
  }

  #page9 .satsusd-flashing-dot {
    width: 27px;
    height: 27px;
  }

  #page9 #sats-per-dollar {
    font-size: 40px;
    padding: 15px 30px;
    margin-bottom: 40px;
  }

  #page9 .satsusd-container {
    max-width: 1800px;
    margin-top: 40px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 40px;
    justify-content: center !important;
  }

  #page9 .satsusd-large-square {
    width: 280px;
    height: 280px;
    grid-template-columns: repeat(10, 28px);
    grid-template-rows: repeat(10, 28px);
    margin: 0;
  }

  #page9 .satsusd-small-square {
    width: 28px;
    height: 28px;
  }
}

/* For 2K monitors (2560 x 1440) - Page 10 */
@media screen and (min-width: 2000px) and (max-width: 2600px) {
  #page10 .price-container {
    font-size: 90px;
    margin-top: -60px;
    margin-bottom: 40px;
  }

  #page10 .value-wrapper {
    width: 130px;
    height: 130px;
  }

  #page10 .value {
    font-size: 70px !important;
    padding-right: 5px;
  }

  #page10 .price-change {
    font-size: 50px;
    margin-left: 20px;
  }

  #page10 .highcharts-figure {
    height: 900px;
    margin: -60px auto;
  }

  #page10 .historical-data-container {
    margin-top: 30px;
  }

  #page10 .historical-data {
    gap: 60px;
  }

  #page10 .historical-data li {
    margin: 0 25px;
  }

  #page10 .historical-data .label {
    font-size: 30px;
    margin-bottom: 20px;
  }

  #page10 .historical-data .value-wrapper {
    width: 100px;
    height: 100px;
  }

  #page10 .historical-data .value {
    font-size: 50px !important;
  }

  #page10 .value-wrapper {
    margin-left: 20px;
  }
}

/* General styling for the table (applies to all screen sizes) */
#bitcoin-distribution-table {
  border: none;
}

#bitcoin-distribution-table th,
#bitcoin-distribution-table td {
  border: none;
}

/* For 2K monitors (2560 x 1440) - Page 11 */
@media screen and (min-width: 2000px) and (max-width: 2600px) {
  #page11 #bitcoin-distribution-table {
    font-size: 23px;
    border: none;
    border-collapse: collapse;
  }

  #page11 #bitcoin-distribution-table th,
  #page11 #bitcoin-distribution-table td {
    height: 50px;
    padding: 8px;
    border: none !important;
  }

  #page11 #bitcoin-distribution-table th {
    font-weight: bold;
    font-size: 25px;
  }

  #page11 .wallet-type-container {
    padding: 5px 0;
  }

  #page11 .wallet-icon {
    font-size: 2.1em;
    width: 2.1em;
    height: 2.1em;
    margin-right: 12px;
  }

  #page11 .wallet-type {
    font-size: 24px;
  }
}

/* For 2K monitors (2560 x 1440) - Generic CSS */
@media screen and (min-width: 2000px) and (max-width: 2600px) {
  .card p {
    font-size: 45px;
  }

  .price-container {
    font-size: 80px !important;
  }

  #page27 .price-container {
    font-size: 80px !important;
  }

  .flashing-dot {
    width: 35px;
    height: 35px;
  }
}

/* For 2K monitors (2560 x 1440) - Page 13 */
.node .bitcoin-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: -2px;
  flex-wrap: nowrap;
  width: 100%;
  height: 100%;
}

.node {
  overflow: hidden;
  box-sizing: border-box;
}

@media screen and (min-width: 2000px) and (max-width: 2600px) {
  #page13 .node {
    font-size: 20px !important;
  }

  #page13 .node[style*="background: rgb(196, 121, 42)"] {
    font-size: 16px !important;
    padding: 8px !important;
  }

  #page13 .node[style*="background: rgb(196, 121, 42)"] .bitcoin-content {
    gap: 4px !important;
  }

  #page13 .node[style*="background: rgb(196, 121, 42)"] img {
    width: 35px !important;
    height: 35px !important;
  }

  #page13 .node[style*="background: rgb(196, 121, 42)"] span {
    font-size: 20px !important;
  }
}

/* For 2K monitors (2560 x 1440) - Page 15 */
@media screen and (min-width: 2000px) and (max-width: 2600px) {
  #page15 .wealthdistribution-text {
    font-size: 45px;
    margin-bottom: 5px !important;
  }

  #page15 #wealth-distribution-container {
    height: 85% !important;
    transform-origin: center center;
  }

  #page15 #wealth-distribution-container svg {
    width: 100%;
    height: 100%;
  }
}

/* For 2K monitors (2560 x 1440) - Page 17 */
@media screen and (min-width: 2000px) and (max-width: 2600px) {
  /* House Background Shape */
  #page17::before {
    width: 70%;
    height: 85%;
  }

  #page17::after {
    width: 90px;
    height: 150px;
    transform: translate(720px, -350px);
  }

  /* Main Title */
  #page17 .house-price-text {
    font-size: 50px;
    bottom: 170px;
  }

  /* Current Price Container */
  #page17 .price-container {
    transform: scale(1.8);
    transform-origin: top center;
    margin-bottom: 100px;
  }

  #page17 .flashing-dot {
    width: 24px;
    height: 24px;
  }

  /* Upper Historical Prices */
  #page17 .historical-house-prices {
    margin-top: 30px;
    gap: 24px;
  }

  #page17 .historical-house-prices .historical-price-card {
    height: 220px;
    width: 400px;
  }

  #page17 .historical-house-prices .period-label {
    font-size: 42px;
    margin-bottom: 20px;
  }

  #page17 .historical-house-prices .price-value {
    font-size: 70px;
    margin-bottom: 1px;
  }

  #page17 .historical-house-prices .change-value {
    font-size: 38px;
    margin-top: 20px;
  }

  /* Lower Historical Prices */
  #page17 .extended-historical-house-prices {
    margin-top: 30px;
    margin-bottom: 130px;
    gap: 24px;
  }

  #page17 .extended-historical-house-prices .historical-price-card {
    height: 100px;
    width: 400px;
    margin-bottom: -170px;
  }

  #page17 .extended-historical-house-prices .period-label {
    font-size: 27px;
    margin-bottom: 10px;
  }

  #page17 .extended-historical-house-prices .price-value {
    font-size: 36px;
    margin-bottom: 8px;
  }

  #page17 .extended-historical-house-prices .change-value {
    font-size: 22px;
    margin-top: 8px;
  }
}

@media screen and (min-width: 2000px) and (max-width: 2600px) {
  /* Main Title */
  #page24 .bigmac-price-text {
    font-size: 50px;
    bottom: 170px;
  }

@media screen and (min-width: 2000px) and (max-width: 2600px) {
  #page24 .price-container {
    font-size: 75px !important;
    margin-bottom: 100px !important;
    color: white !important; /* if you're missing text color too */
  }
}

  #page24 .flashing-dot {
    width: 30px;
    height: 30px;
  }

  /* Upper Historical Prices */
  #page24 .historical-bigmac-prices {
    margin-top: 30px;
    gap: 24px;
  }

  #page24 .historical-bigmac-prices .historical-price-card {
    height: 220px;
    width: 400px;
  }

  #page24 .historical-bigmac-prices .period-label {
    font-size: 42px;
    margin-bottom: 20px;
  }

  #page24 .historical-bigmac-prices .price-value {
    font-size: 70px;
    margin-bottom: 1px;
  }

  #page24 .historical-bigmac-prices .change-value {
    font-size: 38px;
    margin-top: 20px;
  }

  /* Lower Historical Prices */
  #page24 .extended-historical-bigmac-prices {
    margin-top: 30px;
    margin-bottom: 130px;
    gap: 24px;
  }

  #page24 .extended-historical-bigmac-prices .historical-price-card {
    height: 100px;
    width: 400px;
    margin-bottom: -170px;
  }

  #page24 .extended-historical-bigmac-prices .period-label {
    font-size: 27px;
    margin-bottom: 10px;
  }

  #page24 .extended-historical-bigmac-prices .price-value {
    font-size: 36px;
    margin-bottom: 8px;
  }

  #page24 .extended-historical-bigmac-prices .change-value {
    font-size: 22px;
    margin-top: 8px;
  }

  /* BigMac Image */
  #page24 .bigmac-img-wrapper img {
    width: 300px !important;
    height: auto;
  }
}

/* For 2K monitors (2560 x 1440) - Page 18 */
@media screen and (min-width: 2000px) and (max-width: 2600px) {
  #page18 .polar-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #page18 .centered-polar-image {
    width: 1250px;
    height: auto;
  }
}

/* For 2K monitors (2560 x 1440) - Page 19 */
@media screen and (min-width: 2000px) and (max-width: 2600px) {
  #page19 .powerlaw-text {
    font-size: 45px;
  }

  #page19 #bandPrices {
    bottom: 267px;
    right: 85px;
    padding: 15px;
    width: 270px;
    font-size: 19px;
  }

  #page19 #bandPrices div {
    margin-bottom: 8px;
    font-weight: bold;
  }

  #page19 .model-box {
    bottom: 187px;
    right: 85px;
    padding: 15px;
    width: 270px;
    font-size: 21px;
  }
}

/* For 2K monitors (2560 x 1440) - Page 20 */
@media screen and (min-width: 2000px) and (max-width: 2600px) {
  #page20 .stocktoflow-text {
    font-size: 45px;
  }

  #page20 #s2fMetrics {
    bottom: 345px;
    right: 85px;
    padding: 15px;
    width: 284px;
    font-size: 22px;
  }

  #page20 #s2fMetrics div {
    margin: 4px 0;
  }

  #page20 #s2fMetrics div:last-child {
    font-size: 20px !important;
    margin-top: 5px;
  }

  #page20 #halvingColorScale {
    bottom: 190px;
    right: 85px;
    padding: 22px;
    width: 270px;
  }

  #page20 #halvingColorScale > div:first-child {
    font-size: 20px;
    margin-bottom: 8px;
  }

  #page20 .halving-gradient-bar {
    height: 25px;
    margin-bottom: 4px;
  }

  #page20 .halving-scale-labels {
    font-size: 20px;
  }
}

/* For 2K monitors (2560 x 1440) - Page 21 */
@media screen and (min-width: 2000px) and (max-width: 2600px) {
  #page21 .thank-you {
    font-size: 140px;
  }

  #page21 .satoshi {
    font-size: 140px;
  }

  #page21 .circle {
    width: 48%;
    height: 48%;
  }

  #page21 .circle .text {
    font-size: 32px;
  }

  @keyframes rotate {
    0% {
      transform: rotate(calc(360deg / 21 * var(--i))) translateX(36%);
    }
    100% {
      transform: rotate(calc(360deg + 360deg / 21 * var(--i))) translateX(36%);
    }
  }
}

#page21 .thankyou-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  z-index: 1;
}

#page21 .center-text {
  position: absolute;
  z-index: 10;
  text-align: center;
}

#page21 .thank-you {
  font-size: 100px;
  font-weight: bold;
  color: white;
  text-shadow: 0 0 0px rgba(255, 255, 255, 0);
  animation: subtle-glow 2.5s ease-out infinite alternate;
}

#page21 .satoshi {
  font-size: 100px;
  font-weight: bold;
  color: #ffae42;
  text-shadow: 0 0 0px rgba(255, 174, 66, 0);
  animation: subtle-glow-orange 2.5s ease-out infinite alternate;
}

#circleTextCanvas {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 5;
}

@keyframes subtle-glow {
  from {
    text-shadow: 0 0 0px rgba(255, 255, 255, 0);
  }
  to {
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.7),
      0 0 25px rgba(255, 255, 255, 0.5), 0 0 35px rgba(255, 255, 255, 0.3);
  }
}

@keyframes subtle-glow-orange {
  from {
    text-shadow: 0 0 0px rgba(255, 174, 66, 0);
  }
  to {
    text-shadow: 0 0 15px rgba(255, 174, 66, 0.7),
      0 0 25px rgba(255, 174, 66, 0.5), 0 0 35px rgba(255, 174, 66, 0.3);
  }
}

/* Media queries for responsive text sizing */
@media screen and (min-width: 2000px) and (max-width: 2600px) {
  #page21 .thank-you {
    font-size: 140px;
  }

  #page21 .satoshi {
    font-size: 140px;
  }
}

@media (max-width: 768px) {
  #page21 .thank-you,
  #page21 .satoshi {
    font-size: 60px;
  }
}

/* Page 22 Card & Container */
#page22 .card {
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Removed justify-content: space-between */
  justify-content: flex-start;
  background-color: #202023;
  overflow: hidden;
}

.space-race-container {
  width: 100%;
  /* Let the container size itself based on content */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 10px; /* optional spacing */
  color: white;
  background-color: #202023;
  padding: 20px;
  box-sizing: border-box;
}

/* Title Styling */
.stocktoflow-text {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  text-align: center;
  margin-bottom: 10px;
}

/* Chart Container Styles */
#page22 .chart-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  position: relative;
  /* Reduced height so the footer doesn't get pushed too far down */
  height: 75%;
}

#spaceRaceChart {
  width: 100%;
  height: 100%;
  background-color: #202023;
}

/* Footer Styles */
.space-race-footer {
  width: 100%;
  margin-top: 5px;
  margin-bottom: 20px;
  text-align: center;
  position: relative;
  z-index: 10;
}

.space-race-total {
  font-size: 22px;
  color: #fff;
  text-align: center;
  margin-top: 5px;
  margin-bottom: 5px;
}

.space-race-updated {
  font-size: 16px;
  color: #999;
  text-align: center;
  margin-bottom: 5px;
  font-style: italic;
}

/* SVG Specific Styles */
.grid-line {
  stroke: #444;
  stroke-dasharray: 5, 5;
}

.bar {
  fill: url(#gradient);
  opacity: 0.7;
}

.country-label {
  text-anchor: middle;
  fill: white;
  font-size: 14px;
  dominant-baseline: middle;
}

.btc-value {
  text-anchor: middle;
  fill: #ffae42;
  font-size: 60px;
}

.usd-value {
  text-anchor: middle;
  fill: #999;
  font-size: 13px;
}

/* Flag and Rocket Animation Styles */
.flag-container {
  animation: float 2s infinite alternate;
}

@keyframes float {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-5px);
  }
}

.flame {
  animation: flicker 0.5s infinite alternate;
}

@keyframes flicker {
  from {
    opacity: 0.7;
  }
  to {
    opacity: 1;
  }
}

/* Page 7 - Bitcoin Clock */

#page7 .container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

#page7 #clock {
  width: 100%;
  height: 100%;
  max-width: 800px;
  max-height: 800px;
  display: block;
  margin: auto;
}

#page7 #clock text {
  font-family: "Jost", sans-serif;
}

#page7 #clock *:hover {
  transition: none;
  transform: none;
}

@media screen and (min-width: 1200px) and (max-width: 1999px) {
  #page7 .container {
    padding: 2vmin;
  }

  #page7 #clock {
    width: min(90vh, 90vw);
    height: min(90vh, 90vw);
  }
}

@media screen and (min-width: 2000px) and (max-width: 2999px) {
  #page7 .container {
    padding: 3vmin;
  }

  #page7 #clock {
    width: min(85vh, 85vw);
    height: min(85vh, 85vw);
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

@media screen and (min-width: 3000px) {
  #page7 .container {
    padding: 4vmin;
  }

  #page7 #clock {
    width: min(80vh, 80vw);
    height: min(80vh, 80vw);
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

@media (max-width: 1199px) and (min-width: 769px) {
  #page7 .container {
    padding: 1.5vmin;
  }

  #page7 #clock {
    width: min(95vh, 95vw);
    height: min(95vh, 95vw);
  }
}

@media (max-width: 768px) {
  #page7 .container {
    padding: 1vmin;
  }

  #page7 #clock {
    width: min(98vh, 98vw);
    height: min(98vh, 98vw);
  }
}

/* Page 22 */
#page22 .card {
  padding: 0 20px;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  border-radius: 10px;
  background-color: #202023;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

#page22 .split-outer {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

#page22 .split-layout {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 30px;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  padding-top: 50px;
}

#page22 .nodeversions-text {
  font-size: 32px;
  font-weight: bold;
  color: #ffae42;
  text-align: center;
  width: 100%;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 50px;
  left: 0;
  right: 0;
}

#page22 .left-panel {
  flex: 1;
  padding-left: 20px;
  min-width: 0;
}

#page22 .right-panel {
  flex: 1;
  padding-right: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#versionPieChart {
  width: 100%;
  max-width: 700px;
  max-height: 700px;
  height: auto;
  margin-top: 20px;
}

#node-version-table {
  width: 100%;
  border-collapse: collapse;
  font-family: "Jost", sans-serif;
  font-size: 0.95rem;
  color: #eee;
  background-color: #262626;
  border-radius: 12px;
  overflow: hidden;
  table-layout: fixed;
}

#node-version-table thead {
  background-color: #2c2c2c;
  color: #f7931a;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 0.85rem;
}

#node-version-table th,
#node-version-table td {
  padding: 9px 16px;
  border-bottom: 1px solid #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#node-version-table th:nth-child(1),
#node-version-table td:nth-child(1) {
  width: 33.33%;
  text-align: left;
}

#node-version-table th:nth-child(2),
#node-version-table td:nth-child(2) {
  width: 33.33%;
  text-align: center;
}

#node-version-table th:nth-child(3),
#node-version-table td:nth-child(3) {
  width: 33.33%;
  text-align: right;
}

#node-version-table tbody tr:nth-child(even) {
  background-color: #1f1f1f;
}

#node-version-table tbody tr:nth-child(odd) {
  background-color: #222;
}

#node-version-table tbody tr:hover {
  background-color: #2b2b2b !important;
  transition: background-color 0.2s ease-in-out;
}

#node-version-table tbody tr:last-child td {
  border-bottom: none;
}

@media screen and (min-width: 2000px) {
  #page22 .split-layout {
    max-width: 100%;
    padding: 0 80px;
    gap: 60px;
  }

  #page22 .left-panel {
    flex: 1.2;
  }

  #page22 .right-panel {
    flex: 1;
  }

  #versionPieChart {
    max-width: 1000px;
    max-height: 1000px;
  }

  #node-version-table {
    font-size: 1.15rem;
  }

  #node-version-table th,
  #node-version-table td {
    padding: 14px 24px;
  }

  #page22 .nodeversions-text {
    font-size: 45px;
    top: 80px;
  }
}

/* Page 23 */

#page23 .monthlyreturns-text {
  font-size: 25px;
  color: #ffae42;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 0;
}

#page23 #monthlyReturnsContainer {
  width: 100%;
  height: calc(100vh - 200px);
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#page23 #monthlyReturnsCanvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* For 2K monitors (2560 x 1440) - Page 23 Monthly Returns */
@media screen and (min-width: 2000px) and (max-width: 2600px) {
  #page23 .monthlyreturns-text {
    font-size: 45px;
    margin-top: 40px;
  }
}

/* Page 23 Monthly Returns Dynamic Title Styles */
#page23 .price-container {
  display: flex;
  align-items: center;
  font-size: 60px;
  color: #fff;
  margin: 20px 0;
}

#page23 #current-month-return {
  font-size: 50px;
  color: #fff;
}



/* Responsive adjustments for Page 23 */
@media screen and (max-width: 768px) {
  #page23 .price-container {
    font-size: 35px;
  }
  
  #page23 #current-month-return {
    font-size: 35px;
  }
}

/* Page 24 */

#page24 .bigmac-content-wrapper {
  margin-top: -130px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bigmac-price-text {
  font-size: 36px;
  font-weight: bold;
  color: #fff;
  text-align: center;
  margin-bottom: 40px;
  z-index: 10;
}

#page24 .period-label {
  color: #fbd7a6;
}

#page24 .bigmac-price-text {
  position: absolute;
  left: 50%;
  bottom: 80px;
  transform: translateX(-50%);
  margin-bottom: 0 !important;
  z-index: 10;
}

#page24 .price-container {
  transform: scale(1.5);
  transform-origin: top center;
  z-index: 10;
  margin-bottom: 60px;
  font-size: 40px;
}

.historical-bigmac-prices,
.extended-historical-bigmac-prices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 0 20px;
  align-items: stretch;
  z-index: 20;
  color: white;
}

.historical-price-card {
  background-color: #2a2a2d;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 40px;
  text-align: center;
  transition: transform 0.2s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 30;
}

.historical-price-card-17 {
  background-color: #202023;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 40px;
  text-align: center;
  transition: transform 0.2s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 30;
}

.historical-bigmac-prices .historical-price-card {
  height: 170px;
  width: 238px;
}

.historical-bigmac-prices .period-label {
  font-size: 36px;
  margin-bottom: 15px;
}

.historical-bigmac-prices .price-value {
  font-size: 40px;
  margin-bottom: 0px;
}

.historical-bigmac-prices .change-value {
  font-size: 32px;
  margin-top: 16px;
}

.extended-historical-bigmac-prices {
  margin-top: 20px;
  margin-bottom: 110px;
}

.extended-historical-bigmac-prices .historical-price-card {
  height: 55px;
  width: 238px;
  font-size: 0.8em;
  margin-bottom: -150px;
}

.extended-historical-bigmac-prices .period-label {
  font-size: 23px;
  margin-bottom: 8px;
  color: #7d7b7b;
}

.extended-historical-bigmac-prices .price-value {
  font-size: 30px;
  margin-bottom: 6px;
  color: #7d7b7b;
}

.extended-historical-bigmac-prices .change-value {
  font-size: 17px;
  margin-top: 6px;
}

.historical-bigmac-prices .historical-price-card:last-child,
.extended-historical-bigmac-prices .historical-price-card:last-child {
  margin-right: 0;
}

/* Page 25 */

#page25 .card {
    padding: 80px 20px 60px 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    height: 100%;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.dominance-cards-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    width: 100%;
    margin-bottom: 15px;
}

.dominance-card {
    background-color: #2a2a2d;
    border-radius: 10px;
    padding: 20px;
    text-align: left;
    min-height: 160px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.dominance-card-header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.dominance-card-header h3 {
    font-size: 16px;
    margin: 0;
    color: #ababab;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
    text-shadow: 0px 0px 0px #fff !important;
}

.bitcoin-icon {
    width: 40px;
    height: 40px;
    margin-right: 10px;
    vertical-align: middle;
}

.dominance-value {
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 8px;
    color: #fff;
}

.bitcoin-card .dominance-value {
    color: #f7931a;
}

.market-card .dominance-value {
    color: #3861fb;
}

.dominance-main-card .dominance-value {
    color: #16c784;
}

.dominance-change {
    font-size: 14px;
    color: #51cc8c;
}

.dominance-change.negative {
    color: #fc7172;
}

.market-comparison-section {
    width: 100%;
    margin-bottom: 15px;
}

.sparkline-container {
    height: 40px;
    margin-top: 10px;
    width: 100%;
    text-align: center;
}

.sparkline-container canvas {
    width: 100% !important;
    height: 40px !important;
}

.market-comparison-section h4 {
    font-size: 18px;
    color: #ababab;
    text-align: center;
    margin-bottom: 15px;
    font-weight: 500;
}

.market-comparison {
    height: 40px;
    border-radius: 20px;
    background-color: #2a2a2d;
    position: relative;
    overflow: hidden;
    margin-bottom: 15px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.bitcoin-bar {
    height: 100%;
    background: linear-gradient(90deg, #f7931a 0%, #ff8c00 100%);
    border-radius: 20px;
    transition: width 0.5s ease;
    min-width: 2px;
}

.comparison-legend {
    display: flex;
    justify-content: center;
    gap: 30px;
}

.legend-item {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #fff;
}

.legend-color {
    width: 15px;
    height: 15px;
    border-radius: 4px;
    margin-right: 8px;
}

.bitcoin-color {
    background-color: #f7931a;
}

.other-color {
    background-color: #333;
}

.dominance-chart-container {
    width: 100%;
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
    min-height: 250px;
    max-height: calc(100vh - 450px);
}

.dominance-chart-container h4 {
    font-size: 18px;
    color: #ababab;
    text-align: center;
    margin-bottom: 15px;
    font-weight: 500;
    flex-shrink: 0;
}

.dominance-chart-wrapper {
    flex: 1;
    position: relative;
    width: 100%;
}

#dominance-chart {
    width: 100% !important;
    height: 100% !important;
    position: absolute;
    top: 0;
    left: 0;
}

.dominance-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
}


/* Responsive Design for Page 25 */
@media (max-width: 768px) {
    #page25 .card {
        padding: 80px 20px 80px 20px;
    }
    
    .dominance-cards-row {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .dominance-card {
        min-height: 120px;
    }
    
    .dominance-value {
        font-size: 24px;
    }
    
    .dominance-card-header h3 {
        font-size: 14px;
    }
    
    .market-comparison-section h4,
    .dominance-chart-container h4 {
        font-size: 16px;
    }
    
    .comparison-legend {
        gap: 20px;
        font-size: 12px;
    }
    
    .dominance-chart-container {
        min-height: 200px;
        max-height: calc(100vh - 550px);
    }
}

/* For 2K monitors (2560 x 1440) - Page 25 */
@media screen and (min-width: 2000px) and (max-width: 2600px) {
    #page25 .card {
        padding: 80px 20px 100px 20px;
    }
    
    .dominance-cards-row {
        gap: 30px;
        margin-bottom: 40px;
    }
    
    .dominance-card {
        padding: 30px;
        min-height: 180px;
    }
    
    .dominance-card-header h3 {
        font-size: 20px;
        margin-bottom: 20px;
    }
    
    .dominance-value {
        font-size: 42px;
        margin-bottom: 12px;
    }
    
    .dominance-change {
        font-size: 18px;
    }
    
    .market-comparison-section {
        margin-bottom: 40px;
    }
    
    .market-comparison-section h4,
    .dominance-chart-container h4 {
        font-size: 24px;
        margin-bottom: 20px;
    }
    
    .market-comparison {
        height: 50px;
        margin-bottom: 20px;
    }
    
    .comparison-legend {
        gap: 40px;
        font-size: 18px;
    }
    
    .legend-color {
        width: 18px;
        height: 18px;
        margin-right: 10px;
    }
    
    .dominance-chart-container {
        min-height: 350px;
        max-height: calc(100vh - 550px);
    }
}

/* Page 26 */

.log-log-text {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  text-align: center;
  margin-top: 40px !important;
  margin-bottom: -40px !important;
}

.log-log-model-box {
  position: absolute;
  bottom: 170px;
  right: 70px;
  background: rgba(0, 0, 0, 0.7);
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #ccc;
  width: 155px;
  z-index: 10;
  font-family: 'Times New Roman', serif;
  color: white;
  text-align: left;
  font-size: 15px;
}

/* Page 26 */

.log-log-text {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  text-align: center;
  margin-top: 40px !important;
  margin-bottom: -40px !important;
}

.log-log-model-box {
  position: absolute;
  bottom: 170px;
  right: 70px;
  background: rgba(0, 0, 0, 0.7);
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #ccc;
  width: 155px;
  z-index: 10;
  font-family: 'Times New Roman', serif;
  color: white;
  text-align: left;
  font-size: 15px;
}

/* Page 28 - Google Trends */

.googletrends-text {
    font-size: 20px;
    font-weight: bold;
    color: #333;
    text-align: center;
    margin-bottom: 10px !important;
}

#page28 .card {
    position: relative;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#googleTrendsChart {
    width: 100% !important; 
    height: 80% !important;
}

#page28 .price-container {
    display: flex;
    align-items: center;
    font-size: 60px;
    color: #fff;
    margin-bottom: 20px;
}

@keyframes flash {
    from { opacity: 1; }
    to { opacity: 0.5; }
}

#page28 .price-change {
    margin-left: 15px;
    font-size: 40px;
}

/* For 2K monitors (2560 x 1440) - Page 28 */
@media screen and (min-width: 2000px) and (max-width: 2600px) {
    #page28 .googletrends-text {
        font-size: 45px;
    }
    
    #page28 .price-container {
        font-size: 80px !important;
    }
}

/* Mobile responsiveness for Page 28 */
@media (max-width: 768px) {
    #page28 .googletrends-text {
        font-size: 16px;
    }
    
    #page28 .price-container {
        font-size: 30px !important;
    }
    
    #page28 .price-change {
        font-size: 20px;
    }
}

/* Tablet responsiveness for Page 28 */
@media screen and (min-width: 769px) and (max-width: 1366px) {
    #page28 .googletrends-text {
        font-size: 18px;
    }
}

/* Override global h3 text-shadow specifically for performance cards */
#page29 .performance-metric-card h3,
#page29 .performance-stats-card h4 {
    text-shadow: none !important;
}

/* Page 29 - Bitcoin Historical Performance */
#page29 .card {
    padding: 80px 20px 80px 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    height: 100%;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

/* Top Metrics Row */
.performance-metrics-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    width: 100%;
    margin-bottom: 35px;
    height: 115px;
}

.performance-metric-card {
    background-color: #2a2a2d;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.performance-metric-header {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.performance-metric-header h3 {
    font-size: 18px;
    margin: 0 0 0 8px;
    color: #ababab;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
    text-shadow: none !important;
}

.performance-icon {
    font-size: 16px;
    color: #ababab;
}

.performance-metric-value {
    font-size: 40px;
    font-weight: bold;
    margin-bottom: 5px;
    color: #fff;
    text-shadow: none;
}

.cagr-card .performance-metric-value {
    color: #51cc8c;
}

.volatility-card .performance-metric-value {
    color: #ff9800;
}

.sharpe-card .performance-metric-value {
    color: #2196f3;
}

.performance-metric-subtitle {
    font-size: 14px;
    color: #888;
    margin: 0;
}

/* Main Content Area */
.performance-main-content {
    display: flex;
    flex: 1;
    gap: 25px;
    min-height: 0;
    max-height: calc(100vh - 330px);
    overflow: hidden;
}

/* Chart Section (Left) */
.performance-chart-section {
    flex: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.performance-section-title {
    font-size: 18px;
    color: #ababab;
    text-align: center;
    margin-bottom: 12px;
    font-weight: 500;
    flex-shrink: 0;
}

.performance-chart-container {
    flex: 1;
    position: relative;
    min-height: 300px;
    max-height: 100%;
}

#annualReturnsChart {
    width: 100% !important;
    height: 100% !important;
}

/* Stats Section (Right) */
.performance-stats-section {
    flex: 0.6;
    display: flex;
    flex-direction: column;
    max-height: 100%;
    overflow: hidden;
    margin-top: 6px;
}

.performance-stats-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
}

.performance-stats-card {
    background-color: #2a2a2d;
    border-radius: 8px;
    padding: 10px 25px;
    flex: 1;
    min-height: 0;
    max-height: calc(33.33% - 8px);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.performance-stats-title {
    font-size: 20px;
    color: #ababab;
    margin-bottom: 6px;
    margin-top: 20px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.best-months .performance-stats-title {
    color: #51cc8c;
}

.worst-months .performance-stats-title {
    color: #fc7172;
}

.additional-stats .performance-stats-title {
    color: #b621f3;
}

.performance-stats-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.performance-stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

.performance-stat-item:last-child {
    border-bottom: none;
}

.performance-stat-period {
    font-size: 18px;
    color: #ccc;
}

.performance-stat-value {
    font-size: 20px;
    font-weight: bold;
}

.performance-stat-value.positive {
    color: #51cc8c;
}

.performance-stat-value.negative {
    color: #fc7172;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .performance-main-content {
        flex-direction: column;
        gap: 20px;
    }
    
    .performance-chart-section {
        flex: none;
        height: 300px;
    }
    
    .performance-stats-section {
        flex: none;
    }
    
    .performance-stats-container {
        flex-direction: row;
        height: auto;
    }
}

@media (max-width: 768px) {
    #page29 .card {
        padding: 40px 20px 20px 20px;
    }
    
    .performance-metrics-row {
        grid-template-columns: 1fr;
        gap: 15px;
        height: auto;
    }
    
    .performance-metric-card {
        height: 100px;
    }
    
    .performance-metric-value {
        font-size: 28px;
    }
    
    .performance-stats-container {
        flex-direction: column;
    }
    
    .performance-main-content {
        gap: 15px;
    }
}

/* For 2K monitors (2560 x 1440) */
@media screen and (min-width: 2000px) and (max-width: 2600px) {
    #page29 .card {
        padding: 80px 60px 60px 60px;
    }
    
    .performance-metrics-row {
        gap: 30px;
        margin-bottom: 50px;
        height: 180px;
    }
    
    .performance-metric-card {
        padding: 30px;
    }
    
    .performance-metric-header h3 {
        font-size: 30px;
    }
    
    .performance-icon {
        font-size: 20px;
    }
    
    .performance-metric-value {
        font-size: 75px;
    }
    
    .performance-metric-subtitle {
        font-size: 25px;
    }
    
    .performance-main-content {
        gap: 40px;
    }
    
    .performance-section-title {
        font-size: 30px;
        margin-bottom: 30px;
    }
    
    .performance-stats-card {
        padding: 25px;
        padding: 35px 25px !important;
    }
    
    .performance-stats-title {
        font-size: 40px;
        margin-bottom: 20px;
    }
    
    .performance-stat-period {
        font-size: 30px;
    }
    
    .performance-stat-value {
        font-size: 30px;
    }
    .performance-stats-section {
    margin-top: 22px;
    }
    .performance-stats-container {
    gap: 26px;
    }
}

/* Page 30 - Bitcoin Million Dollar Wall */

#page30 .million-dollar-title {
  font-size: 48px;
  font-weight: bold;
  color: #fff;
  margin-bottom: 10px;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
}

#page30 .million-dollar-subtitle {
  font-size: 18px;
  color: #888;
  margin-bottom: 30px;
  line-height: 1.4;
}

#page30 .million-dollar-subtitle em {
  font-style: italic;
  color: #aaa;
}

#page30 .stats-container {
  display: flex;
  gap: 30px;
  margin-bottom: 20px;
  justify-content: center;
  align-items: center;
}

#page30 .stat-card {
  background-color: #2a2a2d;
  border-radius: 10px;
  padding: 25px 35px !important;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

#page30 .stat-label {
  font-size: 18px;
  color: #888;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
}

#page30 .stat-sublabel {
  font-size: 15px;
  color: #666;
  margin-top: 5px;
  text-align: center;
}

#page30 .current-price-card .current-price {
  font-size: 45px;
  font-weight: bold;
  color: #f7931a;
  margin: 0;
}

#page30 .progress-card .progress-percentage {
  font-size: 45px;
  font-weight: bold;
  color: #fff !important;
  margin: 0;
  display: block !important;
  visibility: visible !important;
}

#page30 .progress-bar-container {
  width: 100%;
  background-color: #333;
  border-radius: 25px;
  height: 8px;
  margin-top: 15px;
  overflow: hidden;
}

#page30 .progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #f7931a 0%, #ff8c00 100%);
  border-radius: 25px;
  transition: width 0.5s ease;
  width: 0%;
}

#page30 .circle-container {
  position: relative;
  width: 600px;
  height: 600px;
  margin: 20px auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

#page30 .dot-circle {
  position: relative;
  width: 100%;
  height: 100%;
}

#page30 .dot {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #444;
  transition: background-color 0.3s ease;
}

#page30 .dot.filled {
  background-color: #f7931a;
  box-shadow: 0 0 4px rgba(247, 147, 26, 0.5);
}

/* For 2K monitors (2560 x 1440) - Page 30 */
@media screen and (min-width: 2000px) and (max-width: 2600px) {
  #page30 .million-dollar-title {
    font-size: 64px;
  }
  
  #page30 .million-dollar-subtitle {
    font-size: 24px;
    margin-bottom: 50px;
  }
  
  #page30 .stats-container {
    gap: 50px;
    margin-top: 80px;
  }
  
  #page30 .stat-card {
    padding: 35px 45px;
    min-width: 320px;
  }
  
  #page30 .stat-label {
    font-size: 30px;
    margin-bottom: 15px;
  }
  
  #page30 .stat-sublabel {
    font-size: 22px;
    margin-top: 10px;
  }
  
  #page30 .current-price-card .current-price {
    font-size: 80px;
  }
  
  #page30 .progress-card .progress-percentage {
    font-size: 80px;
  }
  
  #page30 .circle-container {
    width: 900px;
    height: 900px;
    margin: 40px auto;
  }
  
  #page30 .dot {
    width: 14px;
    height: 14px;
  }
}

/* BTC Frame AI Indicator */

#ai-indicator {
  position: fixed;
  top: -20px;
  right: 425px;
  z-index: 9999;
  width: 120px;
  height: 60px;
}

/* Page 31 - Merchant Map */

#merchant-map {
  width: 100%;
  height: calc(100% - 20px);
  margin-top: 20px;
  background: #202023;
  cursor: default !important;
}

#merchant-map * {
  cursor: default !important;
}

#merchant-map .merchant-legend-inner a,
#merchant-map .merchant-legend-inner a *,
#merchant-map .btcmap-logo {
  cursor: pointer !important;
}

.leaflet-interactive {
  cursor: default !important;
}

/* For 2K monitors (2560 x 1440) - Page 31 */
@media screen and (min-width: 2000px) and (max-width: 2600px) {
  #page31 .merchant-map-card {
    overflow: hidden;
    position: relative;
  }

  #page31 #merchant-map {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1.6);
    transform-origin: center;
    margin-top: 150px;
    clip-path: inset(4% 0 4% 0);
  }

  #page31 .leaflet-bottom.leaflet-left {
    bottom: 400px;
  }

  #page31 .merchant-legend {
    transform: scale(0.8);
    font-size: 24px;
    padding: 20px 30px;
  }

  #page31 .merchant-legend {
    font-size: 24px;
    padding: 20px 30px;
    background-color: rgba(0, 0, 0, 0.8);
    border-radius: 8px;
  }

  #page31 .merchant-legend-inner {
    gap: 25px;
  }

  #page31 .btcmap-logo {
    height: 35px;
  }
}

/* Override Leaflet positioning to center legend */
.leaflet-bottom.leaflet-left {
  left: 50%;
  transform: translateX(-50%);
  bottom: 15px;
}

.merchant-legend {
  background: rgba(0, 0, 0, 0.8);
  padding: 12px 15px;
  border-radius: 6px;
  border: 1px solid #444;
  font-family: 'Jost', sans-serif;
}

.merchant-legend-inner {
  display: flex;
  align-items: center;
  gap: 15px;
}

.merchant-legend-inner a,
.merchant-legend-inner a img,
.merchant-legend-inner .btcmap-logo {
  cursor: pointer !important;
}

.merchant-legend-inner a {
  display: flex;
  align-items: center;
}

.btcmap-logo {
  height: 50px;
  width: auto;
  transition: opacity 0.2s;
}

.btcmap-logo:hover {
  opacity: 0.8;
}

.merchant-legend-content {
  display: flex;
  flex-direction: column;
}

.merchant-legend-total {
  font-size: 16px;
  color: #fff;
  margin-bottom: 8px;
}

.merchant-legend-total span {
  color: #f7931a;
  font-weight: 600;
}

.merchant-gradient {
  height: 12px;
  width: 100%;
  min-width: 280px;
  border-radius: 3px;
  background: linear-gradient(to right, 
    #feffcb 0%,
    #b6e1b6 25%,
    #64c1c0 50%,
    #348cbb 75%,
    #263394 100%
  );
}

.merchant-legend-labels {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-size: 12px;
  color: #888;
  margin-top: 5px;
}

/* Tooltip Styles */
.merchant-tooltip-container {
  background: rgba(20, 20, 23, 0.95) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  border-radius: 8px !important;
  padding: 0 !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4) !important;
  backdrop-filter: blur(10px);
}

.merchant-tooltip-container .leaflet-tooltip-content {
  margin: 0 !important;
}

.leaflet-tooltip.merchant-tooltip-container::before {
  display: none !important;
}

.merchant-tooltip {
  padding: 10px 16px;
  font-family: 'Jost', sans-serif;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.merchant-tooltip strong {
  font-size: 15px;
  color: #fff;
  font-weight: 500;
}

.merchant-tooltip .merchant-count {
  color: #f7931a;
  font-weight: 600;
  font-size: 15px;
}

.merchant-tooltip .merchant-label {
  color: #aaa;
  font-size: 14px;
}

/* Override Leaflet positioning to center legend */
.leaflet-bottom.leaflet-left {
  left: 50%;
  transform: translateX(-50%);
  bottom: 15px;
}

.merchant-legend {
  background: rgba(0, 0, 0, 0.8);
  padding: 12px 15px;
  border-radius: 6px;
  border: 1px solid #444;
  font-family: 'Jost', sans-serif;
}

.merchant-legend-inner {
  display: flex;
  align-items: center;
  gap: 15px;
}

.merchant-legend-inner a,
.merchant-legend-inner a img,
.merchant-legend-inner .btcmap-logo {
  cursor: pointer !important;
}

.merchant-legend-inner a {
  display: flex;
  align-items: center;
}

.btcmap-logo {
  height: 50px;
  width: auto;
  transition: opacity 0.2s;
}

.btcmap-logo:hover {
  opacity: 0.8;
}

.merchant-legend-content {
  display: flex;
  flex-direction: column;
}

.merchant-legend-total {
  font-size: 16px;
  color: #fff;
  margin-bottom: 8px;
}

.merchant-legend-total span {
  color: #f7931a;
  font-weight: 600;
}

.merchant-gradient {
  height: 12px;
  width: 100%;
  min-width: 280px;
  border-radius: 3px;
  background: linear-gradient(to right, 
    #feffcb 0%,
    #b6e1b6 25%,
    #64c1c0 50%,
    #348cbb 75%,
    #263394 100%
  );
}

.merchant-legend-labels {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-size: 12px;
  color: #888;
  margin-top: 5px;
}

/* Tooltip Styles */
.merchant-tooltip-container {
  background: rgba(20, 20, 23, 0.95) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  border-radius: 8px !important;
  padding: 0 !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4) !important;
  backdrop-filter: blur(10px);
}

.merchant-tooltip-container .leaflet-tooltip-content {
  margin: 0 !important;
}

.leaflet-tooltip.merchant-tooltip-container::before {
  display: none !important;
}

.merchant-tooltip {
  padding: 10px 16px;
  font-family: 'Jost', sans-serif;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.merchant-tooltip strong {
  font-size: 15px;
  color: #fff;
  font-weight: 500;
}

.merchant-tooltip .merchant-count {
  color: #f7931a;
  font-weight: 600;
  font-size: 15px;
}

.merchant-tooltip .merchant-label {
  color: #aaa;
  font-size: 14px;
}

/* =====================================================
   PAGE 32 - BTC LIQUIDATION LEVELS
   ===================================================== */

#page32 .liquidation-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 50px 30px 50px 30px;
  gap: 15px;
}

/* Legend Styles */
#page32 .liquidation-legend {
  display: flex;
  gap: 30px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

#page32 .legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #fff;
}

#page32 .legend-box {
  width: 20px;
  height: 14px;
  border-radius: 3px;
}

#page32 .legend-box.long-box {
  background: rgba(239, 68, 68, 0.7);
}

#page32 .legend-box.short-box {
  background: rgba(74, 222, 128, 0.7);
}

#page32 .legend-line {
  width: 30px;
  height: 2px;
  position: relative;
}

#page32 .legend-line.cum-long-line {
  background: #f87171;
}

#page32 .legend-line.cum-long-line::before {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  background: #f87171;
  border-radius: 50%;
  top: -3px;
  left: 50%;
  transform: translateX(-50%);
}

#page32 .legend-line.cum-short-line {
  background: #4ade80;
}

#page32 .legend-line.cum-short-line::before {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  background: #4ade80;
  border-radius: 50%;
  top: -3px;
  left: 50%;
  transform: translateX(-50%);
}

/* Chart Container */
#page32 .liquidation-chart-container {
  position: relative;
  width: calc(100% - 60px);
  flex: 1;
  min-height: 200px;
  max-height: calc(100% - 250px);
  margin: 15px 30px;
}

#page32 #liquidationChart {
  width: 100% !important;
  height: 100% !important;
}

/* Stats Grid */
#page32 .liquidation-stats-grid {
  display: flex;
  gap: 15px;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  margin-top: 20px;
}

#page32 .liquidation-stat-card {
  background-color: #2a2a2d;
  border-radius: 10px;
  padding: 10px 15px;
  min-width: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

#page32 .liquidation-stat-label {
  font-size: 12px;
  color: #888;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
}

#page32 .liquidation-stat-value {
  font-size: 24px;
  font-weight: 600;
  color: #fff;
}

#page32 .liquidation-stat-value.current-price {
  color: #f7931a;
}

#page32 .liquidation-stat-value.long-value {
  color: #ef4444;
}

#page32 .liquidation-stat-value.short-value {
  color: #4ade80;
}

#page32 .liquidation-stat-sublabel {
  font-size: 11px;
  color: #666;
  margin-top: 5px;
  text-align: center;
}

/* =====================================================
   2K MONITORS (2560 x 1440)
   ===================================================== */
@media screen and (min-width: 2000px) and (max-width: 2600px) {
  #page32 .liquidation-card {
    padding: 80px;
    gap: 25px;
  }

  #page32 .liquidation-legend {
    gap: 50px;
  }

  #page32 .legend-item {
    font-size: 20px;
    gap: 12px;
  }

  #page32 .legend-box {
    width: 28px;
    height: 20px;
  }

  #page32 .legend-line {
    width: 40px;
    height: 3px;
  }

  #page32 .legend-line.cum-long-line::before,
  #page32 .legend-line.cum-short-line::before {
    width: 12px;
    height: 12px;
    top: -4.5px;
  }

  #page32 .liquidation-watermark {
    font-size: 72px;
    bottom: 80px;
    right: 60px;
  }

  #page32 .liquidation-stats-grid {
    gap: 25px;
  }

  #page32 .liquidation-stat-card {
    padding: 25px 40px;
    min-width: 220px;
  }

  #page32 .liquidation-stat-label {
    font-size: 18px;
    margin-bottom: 12px;
  }

  #page32 .liquidation-stat-value {
    font-size: 36px;
  }

  #page32 .liquidation-stat-sublabel {
    font-size: 16px;
    margin-top: 8px;
  }
}

/* =====================================================
   4K MONITORS (3840 x 2160)
   ===================================================== */
@media screen and (min-width: 3800px) {
  #page32 .liquidation-card {
    padding: 40px;
    gap: 35px;
  }

  #page32 .liquidation-legend {
    gap: 70px;
  }

  #page32 .legend-item {
    font-size: 28px;
    gap: 16px;
  }

  #page32 .legend-box {
    width: 36px;
    height: 26px;
  }

  #page32 .legend-line {
    width: 50px;
    height: 4px;
  }

  #page32 .legend-line.cum-long-line::before,
  #page32 .legend-line.cum-short-line::before {
    width: 16px;
    height: 16px;
    top: -6px;
  }

  #page32 .liquidation-watermark {
    font-size: 96px;
    bottom: 100px;
    right: 80px;
  }

  #page32 .liquidation-stats-grid {
    gap: 35px;
  }

  #page32 .liquidation-stat-card {
    padding: 35px 55px;
    min-width: 300px;
  }

  #page32 .liquidation-stat-label {
    font-size: 24px;
    margin-bottom: 16px;
  }

  #page32 .liquidation-stat-value {
    font-size: 48px;
  }

  #page32 .liquidation-stat-sublabel {
    font-size: 20px;
    margin-top: 10px;
  }
}

/* =====================================================
   TABLET (768px - 1199px)
   ===================================================== */
@media screen and (min-width: 768px) and (max-width: 1199px) {
  #page32 .liquidation-card {
    padding: 15px;
    gap: 12px;
  }

  #page32 .liquidation-legend {
    gap: 20px;
  }

  #page32 .legend-item {
    font-size: 12px;
  }

  #page32 .liquidation-watermark {
    font-size: 36px;
    bottom: 40px;
    right: 30px;
  }

  #page32 .liquidation-stats-grid {
    gap: 10px;
  }

  #page32 .liquidation-stat-card {
    padding: 12px 18px;
    min-width: 130px;
  }

  #page32 .liquidation-stat-label {
    font-size: 10px;
  }

  #page32 .liquidation-stat-value {
    font-size: 18px;
  }

  #page32 .liquidation-stat-sublabel {
    font-size: 9px;
  }
}

/* =====================================================
   MOBILE PORTRAIT (max-width: 767px)
   ===================================================== */
@media screen and (max-width: 767px) {
  #page32 .liquidation-card {
    padding: 15px;
    gap: 10px;
    overflow-y: auto;
  }

  #page32 .liquidation-legend {
    gap: 8px 15px;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 320px;
    margin: 0 auto;
  }

  #page32 .legend-item {
    font-size: 10px;
    gap: 5px;
    flex: 0 0 auto;
  }

  #page32 .legend-box {
    width: 14px;
    height: 10px;
  }

  #page32 .legend-line {
    width: 20px;
  }

  #page32 .legend-line.cum-long-line::before,
  #page32 .legend-line.cum-short-line::before {
    width: 6px;
    height: 6px;
    top: -2px;
  }

  #page32 .liquidation-chart-container {
    min-height: 280px;
    width: calc(100% - 20px);
    max-height: calc(100% - 320px);
    margin: 10px;
  }

  #page32 .liquidation-stats-grid {
    gap: 8px;
    flex-direction: column;
    justify-content: center;
    width: calc(100% - 30px);
    margin: 0 15px;
    padding: 0;
  }

  /* All stat cards - full width stacked */
  #page32 .liquidation-stat-card {
    padding: 10px 15px;
    min-width: unset;
    width: 100%;
    max-width: 100%;
    flex: none;
    box-sizing: border-box;
  }

  #page32 .liquidation-stat-label {
    font-size: 11px;
    margin-bottom: 5px;
  }

  #page32 .liquidation-stat-value {
    font-size: 22px;
  }

  #page32 .liquidation-stat-card:first-child .liquidation-stat-value {
    font-size: 26px;
  }

  #page32 .liquidation-stat-sublabel {
    font-size: 9px;
    margin-top: 3px;
  }
}

/* =====================================================
   LANDSCAPE MODE FOR MOBILE DEVICES
   ===================================================== */
@media screen and (max-width: 932px) and (orientation: landscape) {
  #page32 .liquidation-card {
    padding: 10px;
    gap: 8px;
  }

  #page32 .liquidation-legend {
    gap: 15px;
  }

  #page32 .legend-item {
    font-size: 10px;
  }

  #page32 .legend-box {
    width: 14px;
    height: 10px;
  }

  #page32 .liquidation-chart-container {
    min-height: 150px;
  }

  #page32 .liquidation-watermark {
    font-size: 20px;
    bottom: 20px;
    right: 15px;
  }

  #page32 .liquidation-stats-grid {
    gap: 6px;
  }

  #page32 .liquidation-stat-card {
    padding: 8px 12px;
    min-width: 80px;
  }

  #page32 .liquidation-stat-label {
    font-size: 8px;
    margin-bottom: 4px;
  }

  #page32 .liquidation-stat-value {
    font-size: 12px;
  }

  #page32 .liquidation-stat-sublabel {
    font-size: 7px;
    margin-top: 2px;
  }
}

/* =====================================================
   PAGE 33 - BITCOIN HALVING TRACKER
   ===================================================== */

#page33 .halving-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 50px 30px 50px 30px;
  gap: 15px;
  overflow-x: hidden;
}

/* Legend Styles */
#page33 .halving-legend {
  display: flex;
  gap: 30px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

#page33 .legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #fff;
}

#page33 .legend-line {
  width: 30px;
  height: 3px;
  border-radius: 2px;
}

#page33 .legend-line.cycle-2012 {
  background: #a855f7;
}

#page33 .legend-line.cycle-2016 {
  background: #4ade80;
}

#page33 .legend-line.cycle-2020 {
  background: #3bc4f6;
}

#page33 .legend-line.cycle-2024 {
  background: #f7931a;
}

/* Chart Container */
#page33 .halving-chart-container {
  position: relative;
  width: calc(100% - 60px);
  flex: 1;
  min-height: 200px;
  max-height: calc(100% - 250px);
  margin: 10px 30px 30px 30px;
}

#page33 #halvingChart {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Page 34 - Rolling 4-Year CAGR (mirrors page 27 layout) */
#page34 .card {
  position: relative;
}
#page34 .price-container {
  position: absolute;
  top: 50px;
  left: 30px;
  right: 30px;
  font-size: 50px;
  z-index: 1;
  margin: 0;
  justify-content: center;
}
#page34 #cagr-value-badge {
  background-color: #f7931a;
  color: #fff;
}
#page34 .chart-container {
  margin-top: 60px;
}

/* Page 37 - Supply Unmoved 4+ Years (same layout as page 34; longer title, so a smaller font) */
#page37 .card {
  position: relative;
}
#page37 .price-container {
  position: absolute;
  top: 50px;
  left: 30px;
  right: 30px;
  font-size: 42px;
  z-index: 1;
  margin: 0;
  justify-content: center;
}
#page37 #supply4y-value-badge {
  background-color: #f7931a; /* neutral: the arrow and dot carry the direction */
  color: #fff;
}
#page37 .chart-container {
  margin-top: 60px;
}


/* Pages 38-45 - bitview on-chain charts (same layout as pages 34 and 37; badge colour set by JS) */
#page38 .card,
#page39 .card,
#page40 .card,
#page41 .card,
#page42 .card,
#page43 .card,
#page44 .card,
#page45 .card,
#page48 .card,
#page49 .card {
  position: relative;
}
#page38 .price-container,
#page39 .price-container,
#page40 .price-container,
#page41 .price-container,
#page42 .price-container,
#page43 .price-container,
#page44 .price-container,
#page45 .price-container,
#page48 .price-container,
#page49 .price-container {
  position: absolute;
  top: 50px;
  left: 30px;
  right: 30px;
  font-size: 42px;
  z-index: 1;
  margin: 0;
  justify-content: center;
}
#page38 .chart-container,
#page39 .chart-container,
#page40 .chart-container,
#page41 .chart-container,
#page42 .chart-container,
#page43 .chart-container,
#page44 .chart-container,
#page45 .chart-container,
#page48 .chart-container,
#page49 .chart-container {
  margin-top: 60px;
}
/* Small explainer line between a bitcoin page's title and its chart (page 42) */
.card .bv-desc {   /* .card prefix beats the generic .card p (32px orange) */
  position: absolute;
  top: 112px;
  left: 30px;
  right: 30px;
  margin: 0;
  text-align: center;
  font-size: 18px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.55);
  z-index: 1;
}

/* Page 49 - colour scale bar right under the title (gradient painted by page-049 JS) */
#page49 .bv49-scale {
  position: absolute;
  top: 116px;
  left: 30px;
  right: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.75);
  z-index: 1;
}
#page49 #bv49-scale-bar {
  width: 260px;
  height: 14px;
  border-radius: 3px;
}

/* Page 35 - Hyperliquid Liquidation Heatmap (HyperTracker-style layout) */
#page35 .card {
  position: relative;
  padding: 125px 24px 24px 24px;  /* +15px top gap below title */
}
#page35 .price-container {
  position: absolute;
  top: 50px;
  left: 30px;
  right: 30px;
  font-size: 40px;
  z-index: 2;
  margin: 0;
  justify-content: center;
}
#page35 #hl-value-badge {
  background-color: #a855f7;
  color: #fff;
}

/* Body: chart on the left, sidebar on the right */
#page35 #hl-body {
  display: flex;
  flex: 1;
  min-height: 0;
  gap: 16px;
  /* .card sets align-items:center, which shrink-wraps and centers any child
     that isn't full width. Without this the chart+sidebar row collapses to the
     sidebar's width (centered) once the canvas is hidden — the canvas's default
     300px intrinsic width was the only thing holding the row open. Pin to full
     width so #hl-chart-wrap (flex:1) always has real space to render into. */
  width: 100%;
  align-self: stretch;
}
#page35 #hl-chart-wrap {
  flex: 1;
  position: relative;
  min-width: 0;
  background: #000;
  border-radius: 6px;
  overflow: hidden;
}
#page35 #hlHeatmapChart {
  width: 100%;
  height: 100%;
  display: block;
}

/* Right sidebar — top clusters list */
#page35 #hl-cluster-list {
  width: 260px;
  display: flex;
  flex-direction: column;
  font-size: 14px;
  color: #ddd;
  background: #000;
  border-radius: 6px;
  padding: 12px 14px;
}
#page35 .hl-sidebar-header {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #888;
  letter-spacing: 0.4px;
  margin-bottom: 8px;
  text-transform: uppercase;
}
#page35 .hl-shorts-block,
#page35 .hl-longs-block {
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: center;
  gap: 6px;
}
#page35 .hl-current-marker {
  text-align: center;
  color: #fff;
  font-weight: bold;
  font-size: 16px;
  padding: 8px 0;
  border-top: 1px dashed rgba(255,255,255,0.4);
  border-bottom: 1px dashed rgba(255,255,255,0.4);
  margin: 6px 0;
}
#page35 .hl-row {
  display: grid;
  grid-template-columns: 64px 1fr 70px;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
#page35 .hl-row-size {
  font-weight: bold;
  text-align: right;
}
#page35 .hl-row-bar {
  height: 10px;
  background: rgba(255,255,255,0.05);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}
#page35 .hl-row-bar > span {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  display: block;
}
#page35 .hl-short .hl-row-size { color: #50dc78; }
#page35 .hl-short .hl-row-bar > span { background: rgba(80, 220, 120, 0.55); }
#page35 .hl-long  .hl-row-size { color: #ff6e3c; }
#page35 .hl-long  .hl-row-bar > span { background: rgba(255, 110, 60, 0.55); }
#page35 .hl-row-px {
  color: #bbb;
  font-size: 12px;
}

/* Bottom stats row — rounded card */
#page35 #hl-stats-footer {
  display: flex;
  align-items: stretch;
  margin-top: 31px;  /* +15px gap above stats card */
  padding: 16px 8px;
  background: #000;
  border-radius: 8px;
  gap: 0;
}
#page35 .hl-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 12px;
  border-right: 1px solid #1f1f22;
}
#page35 .hl-stat:last-child {
  border-right: none;
}
#page35 .hl-stat-label {
  font-size: 11px;
  color: #777;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-weight: 500;
  white-space: nowrap;
}
#page35 .hl-stat-value {
  font-size: 26px;
  font-weight: 600;
  color: #fff;
  line-height: 1;
  font-feature-settings: "tnum";  /* tabular figures for cleaner alignment */
  white-space: nowrap;
}


/* Price Comparison Box - Removed outer styling */

#page33 .halving-days-label {
  text-align: center;
  font-size: 16px;
  color: #f7931a;
  font-weight: 600;
  margin-bottom: 15px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

#page33 .halving-days-label .days-number {
  background-color: #000;
  padding: 6px 12px;
  border-radius: 6px;
  margin-right: 5px;
  border: 1px solid rgba(255, 255, 255, 0.20);
}

#page33 .halving-prices-grid {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  margin-top: 15px;
}

#page33 .halving-price-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 15px 25px;
  background-color: #2a2a2d;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  min-width: 160px;
}


#page33 .price-cycle-label {
  font-size: 12px;
  color: #888;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
  white-space: nowrap;
}

#page33 .halving-price-item.current .price-cycle-label {
  color: #f7931a;
}

#page33 .halving-price-item.cycle-2012 .price-cycle-label {
  color: #a855f7;
}

#page33 .halving-price-item.cycle-2016 .price-cycle-label {
  color: #4ade80;
}

#page33 .halving-price-item.cycle-2020 .price-cycle-label {
  color: #3bc4f6;
}

#page33 .price-value {
  font-size: 24px;
  font-weight: 600;
  color: #fff;
}

#page33 .halving-price-item.current .price-value {
  color: #f7931a;
}

#page33 .halving-price-item.cycle-2012 .price-value {
  color: #a855f7;
}

#page33 .halving-price-item.cycle-2016 .price-value {
  color: #4ade80;
}

#page33 .halving-price-item.cycle-2020 .price-value {
  color: #3bc4f6;
}

/* =====================================================
   4K MONITORS (3840px and above)
   ===================================================== */
@media screen and (min-width: 3840px) {
  #page33 .halving-card {
    padding: 60px 50px 50px 50px;
    gap: 30px;
  }

  #page33 .halving-legend {
    gap: 50px;
    margin-bottom: 20px;
  }

  #page33 .legend-item {
    font-size: 28px;
    gap: 16px;
  }

  #page33 .legend-line {
    width: 50px;
    height: 5px;
  }

  #page33 .halving-price-box {
    padding: 40px 50px;
    max-width: 1000px;
    border-radius: 20px;
  }

  #page33 .halving-days-label {
    font-size: 28px;
    margin-bottom: 25px;
  }

  #page33 .halving-prices-grid {
    gap: 20px;
  }

  #page33 .halving-price-item {
    padding: 16px 24px;
    border-radius: 12px;
  }

  /* Keep same font sizes as desktop */
}

/* =====================================================
   2K MONITORS (2000px - 2600px)
   ===================================================== */
@media screen and (min-width: 2000px) and (max-width: 2600px) {
  #page33 .halving-card {
    padding: 50px 40px 40px 40px;
    gap: 25px;
  }

  #page33 .halving-legend {
    gap: 40px;
    margin-bottom: 15px;
  }

  #page33 .legend-item {
    font-size: 22px;
    gap: 12px;
  }

  #page33 .legend-line {
    width: 40px;
    height: 4px;
  }

  #page33 .halving-price-box {
    padding: 30px 40px;
    max-width: 1000px;
  }

  #page33 .halving-days-label {
    font-size: 22px;
    margin-bottom: 20px;
  }

  #page33 .halving-prices-grid {
    gap: 16px;
    flex-wrap: nowrap;
  }

  #page33 .halving-price-item {
    padding: 15px 25px;
  }

  #page33 .price-cycle-label {
    font-size: 14px;
    margin-bottom: 10px;
  }

  #page33 .price-value {
    font-size: 28px;
  }

  #page33 .halving-price-item.current .price-value {
    font-size: 28px;
  }
}

/* =====================================================
   TABLET (768px - 1199px)
   ===================================================== */
@media screen and (min-width: 768px) and (max-width: 1199px) {
  #page33 .halving-card {
    padding: 20px 15px;
    gap: 12px;
  }

  #page33 .halving-legend {
    gap: 20px;
  }

  #page33 .legend-item {
    font-size: 12px;
  }

  #page33 .halving-chart-container {
    width: calc(100% - 30px);
    margin: 10px 15px;
  }

  #page33 .halving-price-box {
    padding: 15px 20px;
    width: calc(100% - 30px);
  }

  #page33 .halving-days-label {
    font-size: 14px;
    margin-bottom: 12px;
  }

  #page33 .halving-prices-grid {
    gap: 10px;
  }

  #page33 .halving-price-item {
    padding: 10px 15px;
    min-width: 120px;
  }

  #page33 .price-cycle-label {
    font-size: 11px;
    margin-bottom: 6px;
  }

  #page33 .price-value {
    font-size: 18px;
  }

  #page33 .halving-price-item.current .price-value {
    font-size: 18px;
  }
}

/* =====================================================
   MOBILE PORTRAIT (max-width: 767px)
   ===================================================== */
@media screen and (max-width: 767px) {
  #page33 .halving-card {
    padding: 15px;
    gap: 10px;
    overflow-y: auto;
  }

  #page33 .halving-legend {
    gap: 8px 15px;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 280px;
    margin: 0 auto 10px auto;
  }

  #page33 .legend-item {
    font-size: 10px;
    gap: 5px;
    flex: 0 0 auto;
  }

  #page33 .legend-line {
    width: 20px;
    height: 2px;
  }

  #page33 .halving-chart-container {
    min-height: 250px;
    width: calc(100% - 20px);
    max-height: calc(100% - 280px);
    margin: 10px;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  #page33 .halving-price-box {
    padding: 15px;
    width: calc(100% - 30px);
    margin: 0 15px;
  }

  #page33 .halving-days-label {
    font-size: 13px;
    margin-bottom: 12px;
  }

  #page33 .halving-prices-grid {
    flex-direction: column;
    gap: 8px;
    width: calc(100% - 30px);
    margin: 0 15px;
  }

  #page33 .halving-price-item {
    width: 100%;
    min-width: unset;
    padding: 10px 15px;
    box-sizing: border-box;
  }

  #page33 .halving-price-item.current {
    grid-column: 1;
  }

  #page33 .price-cycle-label {
    font-size: 11px;
    margin-bottom: 5px;
  }

  #page33 .price-value {
    font-size: 22px;
  }

  #page33 .halving-price-item.current .price-value {
    font-size: 22px;
  }
}

/* =====================================================
   LANDSCAPE MODE FOR MOBILE DEVICES
   ===================================================== */
@media screen and (max-width: 932px) and (orientation: landscape) {
  #page33 .halving-card {
    padding: 10px 15px;
    gap: 8px;
    flex-direction: row;
    flex-wrap: wrap;
  }

  #page33 .halving-legend {
    width: 100%;
    gap: 15px;
    margin-bottom: 5px;
  }

  #page33 .legend-item {
    font-size: 10px;
  }

  #page33 .halving-chart-container {
    flex: 1 1 60%;
    min-height: 150px;
    max-height: none;
    margin: 5px;
  }

  #page33 .halving-price-box {
    flex: 1 1 35%;
    padding: 10px;
    margin: 5px;
    width: auto;
  }

  #page33 .halving-days-label {
    font-size: 10px;
    margin-bottom: 8px;
  }

  #page33 .halving-prices-grid {
    flex-direction: column;
    gap: 5px;
  }

  #page33 .halving-price-item {
    padding: 5px 8px;
    min-width: unset;
  }

  #page33 .price-cycle-label {
    font-size: 9px;
    margin-bottom: 3px;
  }

  #page33 .price-value {
    font-size: 12px;
  }

  #page33 .halving-price-item.current .price-value {
    font-size: 12px;
  }
}

/* =====================================================
   WEATHER PAGE (Single Card Dashboard)
   ===================================================== */

/* Main Weather Card */
#weather .weather-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Loading State */
#weather .weather-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 20px;
}

#weather .weather-loading-spinner {
  width: 60px;
  height: 60px;
  border: 4px solid rgba(255, 255, 255, 0.1);
  border-top: 4px solid #6b7282;
  border-radius: 50%;
  animation: weather-spin 1s linear infinite;
}

@keyframes weather-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

#weather .weather-loading p {
  color: #888;
  font-size: 18px;
  margin: 0;
}

/* Error State */
#weather .weather-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 15px;
  color: #fc7172;
}

#weather .weather-error i { font-size: 60px; opacity: 0.7; }
#weather .weather-error p { font-size: 24px; margin: 0; color: #fff; }
#weather .weather-error span { font-size: 14px; color: #888; }

/* Weather Dashboard - Two Column Layout */
#weather .weather-dashboard {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
  width: 100%;
  height: 100%;
  padding: 50px 30px 50px 30px;
}

/* Left Column */
#weather .weather-left {
  display: flex;
  flex-direction: column;
  gap: 15px;
  height: 100%;
}

/* Right Column */
#weather .weather-right {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* Current Weather Row - Two Cards */
#weather .current-weather-row {
  flex: 1;
  display: flex;
  gap: 15px;
  min-height: 0;
}

#weather .current-card {
  flex: 1;
  background: linear-gradient(145deg, rgba(200, 200, 215, 0.14) 0%, rgba(140, 140, 160, 0.04) 100%);
  border: var(--card-border);
  border-radius: 15px;
  padding: 20px 25px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

#weather .current-card:hover {
  background: rgba(255, 255, 255, 0.05);
}

#weather .current-card.visual-card {
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* Keep visual card content above animation layer */
#weather .current-card.visual-card > *:not(.weather-anim-layer) {
  position: relative;
  z-index: 1;
}

/* Icon drop-shadow so icons pop off gradient backgrounds */
#weather .weather-icon i,
#weather .forecast-icon i {
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.45));
}

/* Weather animation overlays */
#weather .weather-anim-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

/* Rain drops */
@keyframes weatherRainDrop {
  0%   { transform: translateY(-12px); opacity: 0; }
  15%  { opacity: 0.6; }
  100% { transform: translateY(400px); opacity: 0; }
}
#weather .weather-anim-layer .w-drop {
  position: absolute;
  width: 1.5px;
  height: 14px;
  border-radius: 2px;
  background: rgba(180,220,255,0.45);
  animation: weatherRainDrop 1.2s linear infinite;
}

/* Snow flakes */
@keyframes weatherSnowFall {
  0%   { transform: translateY(-8px) translateX(0); opacity: 0; }
  15%  { opacity: 0.85; }
  100% { transform: translateY(400px) translateX(12px); opacity: 0; }
}
#weather .weather-anim-layer .w-flake {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.8);
  animation: weatherSnowFall 2.5s ease-in infinite;
}

/* Lightning flash */
@keyframes weatherFlash {
  0%, 88%, 100% { opacity: 0; }
  90%, 94% { opacity: 0.12; }
}
#weather .weather-anim-layer .w-lightning {
  position: absolute;
  inset: 0;
  background: #fff;
  animation: weatherFlash 3s ease-in-out infinite;
}

/* Large fog clouds — slow visible drift */
@keyframes weatherFogDrift {
  0%   { transform: translateX(-8%) translateY(0); }
  25%  { transform: translateX(6%) translateY(-4%); }
  50%  { transform: translateX(12%) translateY(-2%); }
  75%  { transform: translateX(3%) translateY(3%); }
  100% { transform: translateX(-8%) translateY(0); }
}
#weather .weather-anim-layer .w-fog {
  position: absolute;
  left: -10%;
  width: 120%;
  height: 50%;
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 40%, transparent 70%);
  filter: blur(22px);
  border-radius: 50%;
  opacity: 0.5;
  animation: weatherFogDrift 6s ease-in-out infinite;
}
/* Smaller mist wisps — floating around */
@keyframes weatherMistFloat {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(30px, -15px); }
  50%  { transform: translate(-20px, -25px); }
  75%  { transform: translate(-30px, 10px); }
  100% { transform: translate(0, 0); }
}
#weather .weather-anim-layer .w-mist {
  position: absolute;
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.5), rgba(255,255,255,0.12), transparent);
  filter: blur(12px);
  border-radius: 50%;
  opacity: 0.45;
  animation: weatherMistFloat 5s ease-in-out infinite;
}

/* Stars twinkle */
@keyframes weatherTwinkle {
  0%, 100% { opacity: 0; transform: scale(0.8); }
  50% { opacity: 0.9; transform: scale(1.2); }
}
#weather .weather-anim-layer .w-star {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.85);
  box-shadow: 0 0 3px rgba(255,255,255,0.4);
  animation: weatherTwinkle 3s ease-in-out infinite;
}

/* Sunlight glow — single breathing radial light */
@keyframes weatherSunglow {
  0%, 100% { opacity: 0.6; transform: scale(0.95); }
  50% { opacity: 1; transform: scale(1.05); }
}
#weather .weather-anim-layer .w-sunglow {
  position: absolute;
  top: -30%;
  left: -10%;
  width: 80%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 40% 30%, rgba(255,220,120,0.35) 0%, rgba(255,180,60,0.12) 40%, transparent 70%);
  filter: blur(20px);
  animation: weatherSunglow 6s ease-in-out infinite;
}

/* Forecast Section - 50% height */
#weather .forecast {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#weather .location-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: 1px solid rgba(255,255,255,0.12);
  padding: 5px 12px;
  border-radius: 6px;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  width: fit-content;
  margin-bottom: 10px;
}

#weather .location-badge svg { width: 11px; height: 11px; opacity: 0.5; }

#weather .day-name {
  font-size: 52px;
  color: #fff;
  font-weight: 700;
  line-height: 1.1;
}

#weather .date {
  font-size: 20px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 10px;
}

#weather .temperature {
  font-size: 100px;
  color: #fff;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: flex-start;
}

#weather .temperature .degree {
  font-size: 32px;
  margin-top: 12px;
}

#weather .temp-range {
  font-size: 20px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 8px;
}

#weather .weather-icon {
  width: 160px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#weather .weather-condition {
  font-size: 40px;
  color: #fff;
  margin-top: 10px;
  font-weight: 600;
  text-align: center;
  text-transform: capitalize;
}

#weather .feels-like {
  font-size: 20px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 5px;
  text-align: center;
}

#weather .forecast-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

#weather .forecast-title {
  font-size: 20px;
  color: #ffae42;
  text-transform: uppercase;
  letter-spacing: 2px;
}

#weather .forecast-controls {
  display: flex;
  gap: 15px;
  align-items: center;
}

#weather .location-search {
  display: flex;
  gap: 5px;
  background: rgba(255, 255, 255, 0.1);
  padding: 4px 4px 4px 8px;
  border-radius: 25px;
  align-items: center;
  height: 43px;
  box-sizing: border-box;
}

#weather .location-search input {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 14px;
  font-family: inherit;
  font-weight: 400;
  text-transform: uppercase;
  padding: 4px 12px;
  margin: 0;
  width: 180px;
  outline: none;
  line-height: 1;
}

#weather .location-search input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

#weather .location-search button {
  background: #f7931a;
  border: none;
  -webkit-tap-highlight-color: transparent;
  border-radius: 20px;
  padding: 6px 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

#weather .location-search button:hover {
  background: #ffae42;
}

#weather .location-search button svg {
  fill: #000;
}

#weather .forecast-toggles {
  display: flex;
  gap: 15px;
  align-items: center;
}

#weather .forecast-toggle {
  display: flex;
  gap: 5px;
  background: rgba(255, 255, 255, 0.08);
  padding: 4px;
  border-radius: 25px;
}

#weather .unit-toggle .toggle-btn {
  padding: 8px 12px;
  min-width: 45px;
}

#weather .toggle-btn {
  padding: 8px 16px;
  border: none;
  background: transparent;
  -webkit-tap-highlight-color: transparent;
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
  cursor: pointer;
  border-radius: 20px;
  font-family: inherit;
  transition: all 0.3s ease;
}

#weather .toggle-btn.active {
  background: #f7931a;
  color: #000;
  font-weight: 600;
}

#weather .forecast-days {
  display: flex;
  gap: 10px;
  flex: 1;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

#weather .forecast-day {
  flex: 1 1 0;
  min-width: 0;
  max-width: 100%;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  padding: 15px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  border: var(--card-border);
  transition: all 0.3s ease;
  overflow: hidden;
  position: relative;
}

/* Keep forecast text/icons above animation layer */
#weather .forecast-day > *:not(.weather-anim-layer) {
  position: relative;
  z-index: 1;
}

/* Week view - smaller sizes to fit 7 cards in same space as 3 */
#weather .forecast-days.week-view {
  gap: 8px;
}
#weather .forecast-days.week-view .forecast-day {
  padding: 12px 6px;
}
#weather .forecast-days.week-view .forecast-day-name {
  font-size: 18px;
}
#weather .forecast-days.week-view .forecast-high {
  font-size: 32px;
}

#weather .forecast-day:hover {
  background: rgba(255, 255, 255, 0.06);
}

#weather .forecast-day.today {
  background: linear-gradient(180deg, rgba(247, 147, 26, 0.03) 0%, rgba(247, 147, 26, 0.08) 100%);
}

#weather .forecast-day-name {
  font-size: 28px;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
}

#weather .forecast-day.today .forecast-day-name {
  color: #ffae42;
}

#weather .forecast-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 10px 0;
}

#weather .forecast-high {
  font-size: 48px;
  color: #fff;
  font-weight: 700;
}

/* Highlights Section */
#weather .highlights-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(4, 1fr);
  gap: 10px;
  height: 100%;
}

#weather .highlight-card {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 10px;
  padding: 12px 15px;
  border: var(--card-border);
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
  overflow: hidden;
}

#weather .highlight-card:hover {
  background: rgba(255, 255, 255, 0.06);
}

#weather .highlight-label {
  font-size: 20px;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 1px;
  flex-shrink: 0;
  background: rgb(255 255 255 / 3%);
  padding: 9px 15px;
  margin: -12px -15px 0 -15px;
  border-radius: 8px 8px 0 0;
}

#weather .highlight-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#weather .highlight-value {
  font-size: 48px;
  color: #fff;
  font-weight: 700;
  line-height: 1;
}

#weather .highlight-unit {
  font-size: 17px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 3px;
}

#weather .highlight-inline {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

#weather .highlight-unit-inline {
  font-size: 20px;
  color: rgba(255, 255, 255, 0.5);
}

/* UV Index */
#weather .uv-meter {
  width: 100%;
  height: 8px;
  background: linear-gradient(90deg, #4ade80, #fbbf24, #ef4444);
  border-radius: 4px;
  margin-top: 8px;
  position: relative;
}

#weather .uv-indicator {
  position: absolute;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid #f7931a;
  left: 30%;
}

#weather .uv-status {
  font-size: 14px;
  color: #4ade80;
  margin-top: 5px;
  font-weight: 600;
}

/* Wind Status */
#weather .wind-visual {
  display: flex;
  align-items: center;
  gap: 15px;
}

#weather .wind-compass {
  width: 55px;
  height: 55px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

#weather .wind-arrow {
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 26px solid #f7931a;
  transform: rotate(45deg);
}

/* Sunrise/Sunset */
#weather .sun-times {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 8px;
}

#weather .sun-time {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

#weather .sun-time-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
}

#weather .sun-time-value {
  font-size: 24px;
  color: #fff;
  font-weight: 600;
}

#weather .sun-arc {
  width: 100%;
  height: 40px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 80px 80px 0 0;
  border-bottom: none;
  position: relative;
  margin-top: 8px;
}

#weather .sun-position {
  width: 16px;
  height: 16px;
  background: #f7931a;
  border-radius: 50%;
  position: absolute;
  top: 5px;
  left: 60%;
  transform: translateX(-50%);
  box-shadow: 0 0 12px rgba(247, 147, 26, 0.6);
}

/* Humidity */
#weather .humidity-bar {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  margin-top: 8px;
  overflow: hidden;
}

#weather .humidity-fill {
  height: 100%;
  background: linear-gradient(90deg, #3bc4f6, #60a5fa);
  border-radius: 4px;
  width: 0%;
  transition: width 0.5s ease;
}

/* Visibility & Pressure Status */
#weather .visibility-status,
#weather .pressure-status {
  font-size: 17px;
  margin-top: 5px;
  font-weight: 600;
}

#weather .visibility-status { color: #4ade80; }
#weather .pressure-status { color: rgba(255, 255, 255, 0.5); }

/* Rain Chance */
#weather .rain-drops {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

#weather .rain-drop {
  width: 10px;
  height: 14px;
  background: #3bc4f6;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  opacity: 0.3;
}

#weather .rain-drop.active { opacity: 1; }

/* =====================================================
   WEATHER PAGE - 2K MONITORS (min-width: 2000px)
   ===================================================== */
@media (min-width: 2000px) {
  #weather .weather-card { padding: 50px 60px; }
  #weather .weather-dashboard { gap: 50px; }
  #weather .weather-left { gap: 35px; }
  #weather .location-badge { padding: 6px 14px; font-size: 12px; }
  #weather .day-name { font-size: 85px; }
  #weather .date { font-size: 34px; }
  #weather .temperature { font-size: 180px; }
  #weather .temperature .degree { font-size: 60px; }
  #weather .temp-range { font-size: 32px; }
  #weather .weather-icon { width: 380px; height: 380px; }
  #weather .weather-icon i { font-size: 350px !important; }
  #weather .weather-condition { font-size: 55px; }
  #weather .feels-like { font-size: 30px; }
  #weather .forecast-title { font-size: 34px; }
  #weather .forecast-icon { padding: 20px 0; }
  #weather .forecast-icon i { font-size: 200px !important; }
  #weather .forecast-days.week-view .forecast-icon i { font-size: 100px !important; }
  #weather .forecast-day-name { font-size: 40px; }
  #weather .forecast-days.week-view .forecast-day-name { font-size: 24px; }
  #weather .forecast-high { font-size: 48px; }
  #weather .forecast-days.week-view .forecast-high { font-size: 38px; }
  #weather .highlights-title { font-size: 34px; }
  #weather .highlight-content { padding-left: 25px; padding-right: 25px; }
  #weather .highlight-label { font-size: 30px; padding-top: 15px; }
  #weather .highlight-value { font-size: 72px; }
  #weather .highlight-unit { font-size: 30px; }
  #weather .highlight-unit-inline { font-size: 28px; }
  #weather .sun-time-value { font-size: 38px; }
  #weather .sun-time-label { font-size: 16px; }
  #weather .wind-compass { width: 85px; height: 85px; }
  #weather .visibility-status,
  #weather .pressure-status { font-size: 30px; }
  #weather .uv-status { font-size: 20px; }
  #weather .toggle-btn { font-size: 20px; padding: 10px 20px; }
}

/* =====================================================
   WEATHER PAGE - TABLET (max-width: 1200px)
   ===================================================== */
@media (max-width: 1200px) {
  #weather {
    overflow-y: auto;
    overflow-x: hidden;
  }
  #weather .weather-card { 
    padding: 15px; 
    overflow-y: auto;
    overflow-x: hidden;
    height: auto;
    max-height: none;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  #weather .weather-dashboard {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    gap: 15px;
    height: auto;
    max-height: none;
    padding: 15px;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
  }

  #weather .weather-left { 
    gap: 15px;
    height: auto;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
  }
  #weather .weather-right {
    height: auto;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  #weather .current-weather-row {
    flex: none;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  
  /* Keep forecast width stable when switching between Today/Week */
  #weather .forecast {
    flex: none;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
  }
  #weather .forecast-days {
    display: flex;
    width: 100%;
    max-width: 100%;
    gap: 10px;
    box-sizing: border-box;
  }
  #weather .forecast-day {
    flex: 1 1 0;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }
  
  /* Week view: smaller elements and reduced gap to fit same space as Today */
  #weather .forecast-days.week-view {
    gap: 5px;
  }
  #weather .forecast-days.week-view .forecast-day {
    padding: 8px 3px;
  }
  #weather .forecast-days.week-view .forecast-day-name {
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  #weather .forecast-days.week-view .forecast-high {
    font-size: 16px;
  }
  #weather .forecast-days.week-view .forecast-icon i {
    font-size: 40px !important;
  }
  
  #weather .temperature { font-size: 90px; }
  #weather .weather-icon { width: 140px; height: 140px; }
  #weather .weather-condition { font-size: 26px; }

  #weather .highlights-grid {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto;
  }

  #weather .highlight-value { font-size: 36px; }
  #weather .forecast-high { font-size: 22px; }
}

/* =====================================================
   WEATHER PAGE - MOBILE (max-width: 768px)
   ===================================================== */
@media (max-width: 768px) {
  #weather {
    overflow-y: auto;
    overflow-x: hidden;
  }
  #weather .weather-card { 
    padding: 10px;
    overflow-y: auto;
    overflow-x: hidden;
    height: auto;
    max-height: none;
  }
  #weather .weather-dashboard { 
    gap: 12px;
    padding: 5px;
    height: auto;
    max-height: none;
  }
  #weather .weather-left {
    height: auto;
  }
  #weather .weather-right {
    height: auto;
  }
  
  #weather .location-badge { padding: 4px 10px; font-size: 9px; margin-bottom: 8px; }
  #weather .location-badge svg { width: 10px; height: 10px; }

  /* Stack current weather cards vertically on mobile */
  #weather .current-weather-row {
    flex-direction: column;
    gap: 12px;
  }

  #weather .day-name { font-size: 32px; }
  #weather .date { font-size: 16px; margin-bottom: 10px; }
  #weather .temperature { font-size: 72px; }
  #weather .temperature .degree { font-size: 28px; margin-top: 10px; }
  #weather .temp-range { font-size: 16px; }

  #weather .weather-icon { width: 100px; height: 100px; }
  #weather .weather-icon i { font-size: 90px !important; }
  #weather .forecast-icon i { font-size: 55px !important; }
  #weather .weather-condition { font-size: 18px; margin-top: 10px; }
  #weather .feels-like { font-size: 14px; }

  #weather .forecast-header { 
    flex-direction: row; 
    align-items: center; 
    justify-content: space-between;
    gap: 10px; 
    margin-bottom: 12px; 
  }
  #weather .forecast-header > .forecast-title {
    display: none;
  }
  #weather .forecast-controls {
    flex-direction: row;
    gap: 8px;
    width: 100%;
    justify-content: space-between;
  }
  #weather .location-search {
    padding: 4px 4px 4px 8px;
    flex: 1;
    min-width: 0;
    border-radius: 25px;
    height: 33px;
    box-sizing: border-box;
  }
  #weather .location-search input {
    width: 80px;
    flex: 1;
    font-size: 14px;
    min-width: 0;
    padding: 6px 10px;
  }
  #weather .location-search button {
    padding: 6px 10px;
    border-radius: 20px;
    width: auto;
    height: auto;
  }
  #weather .location-search button svg {
    width: 14px;
    height: 14px;
  }
  #weather .forecast-toggles {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
  }
  #weather .forecast-title { font-size: 18px; }
  #weather .toggle-btn { padding: 6px 7px; font-size: 11px; }
  #weather .unit-toggle .toggle-btn { padding: 6px 8px; min-width: 30px; }
  #weather .forecast-days {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  #weather .forecast-day { padding: 10px 5px; gap: 8px; }
  /* Make first day (TODAY) span full width on mobile week view */
  #weather .forecast-days.week-view .forecast-day:first-child {
    grid-column: 1 / -1;
  }
  #weather .forecast-day-name { font-size: 12px; }
  #weather .forecast-high { font-size: 18px; }

  #weather .highlights-title { font-size: 18px; margin-bottom: 10px; }
  #weather .highlights-grid { 
    grid-template-columns: 1fr 1fr;
    gap: 8px; 
  }
  #weather .highlight-card { padding: 10px 12px 20px; }
  #weather .highlight-label { font-size: 12px; margin-bottom: 5px; margin: -10px -12px 0 -12px; padding: 9px 12px; }
  #weather .highlight-value { font-size: 28px; }
  #weather .highlight-unit { font-size: 12px; }
  #weather .highlight-unit-inline { font-size: 14px; }
  #weather .uv-status, #weather .visibility-status, #weather .pressure-status { font-size: 12px; }
  #weather .wind-compass { width: 40px; height: 40px; }
  #weather .wind-arrow { border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 20px solid #f7931a; }
  #weather .sun-arc { height: 30px; }
  #weather .sun-position { width: 10px; height: 10px; }
  #weather .sun-time-value { font-size: 16px; }
  #weather .sun-time-label { font-size: 9px; }
  #weather .rain-drops { gap: 5px; }
  #weather .rain-drop { width: 8px; height: 12px; }
}

/* =====================================================
   WEATHER PAGE - SMALL MOBILE (max-width: 480px)
   ===================================================== */
@media (max-width: 480px) {
  #weather {
    overflow-y: auto;
    overflow-x: hidden;
  }
  #weather .weather-card {
    overflow-y: auto;
    overflow-x: hidden;
    height: auto;
    max-height: none;
  }
  #weather .temperature { font-size: 56px; }
  #weather .temperature .degree { font-size: 22px; }
  #weather .day-name { font-size: 24px; }
  #weather .date { font-size: 14px; }
  #weather .weather-icon { width: 90px; height: 90px; }
  #weather .weather-icon i { font-size: 80px !important; }
  #weather .forecast-icon i { font-size: 45px !important; }
  #weather .weather-condition { font-size: 20px; }
  #weather .feels-like { font-size: 16px; }
  #weather .highlight-value { font-size: 28px; padding-top: 20px; }
  #weather .forecast-days { grid-template-columns: repeat(3, 1fr); }
  #weather .forecast-high { font-size: 25px; }
  #weather .forecast-day-name { font-size: 15px; }
}

/* =====================================================
   EQUITIES PAGE (Two Column Layout)
   Follows weather UI principles
   ===================================================== */

/* Main Equity Card */
#equities .equity-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}

/* Loading State */
#equities .equities-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 20px;
}

#equities .equities-loading-spinner {
  width: 60px;
  height: 60px;
  border: 4px solid rgba(255, 255, 255, 0.1);
  border-top: 4px solid #6b7282;
  border-radius: 50%;
  animation: equities-spin 1s linear infinite;
}

@keyframes equities-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

#equities .equities-loading p {
  color: #888;
  font-size: 18px;
  margin: 0;
}

/* Error State */
#equities .equities-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 15px;
  color: #fc7172;
}

#equities .equities-error i { font-size: 60px; opacity: 0.7; }
#equities .equities-error p { font-size: 24px; margin: 0; color: #fff; }
#equities .equities-error span { font-size: 14px; color: #888; }

/* Equity Dashboard - Two Column Layout */
/* Tier 2: soft ticker-switch transition — dim the current view while the next
   symbol loads, then fade back in, instead of blanking to a spinner. */
#equities #equities-content { transition: opacity 0.18s ease; }
#equities #equities-content.equity-switching { opacity: 0.4; pointer-events: none; }

#equities .equity-dashboard {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
  width: 100%;
  height: 100%;
  padding: 50px 30px;
}

/* Left Column */
#equities .equity-left {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
}

/* Right Column */
#equities .equity-right {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* Current Equity Row - Two Cards */
#equities .current-equity-row {
  flex: 0.9;
  display: flex;
  gap: 10px;
  min-height: 0;
}

#equities .current-card {
  flex: 0 0 calc((100% - 20px) / 3);
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.03);
  border: var(--card-border);
  border-radius: 15px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  transition: all 0.3s ease;
}

#equities .current-card:hover {
  background: rgba(255, 255, 255, 0.05);
}

#equities .visual-card-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

#equities .current-card.visual-card {
  flex: 1;
  align-items: stretch;
  justify-content: flex-start;
  padding: 15px 0 0 0;
  border-radius: 0 0 15px 15px;
  border-top: none;
}

/* Chart Header with Market Status and Range Toggle */
#equities .chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding: 0 15px;
}

#equities .chart-range-toggle {
  display: flex;
  gap: 5px;
  background: rgba(255, 255, 255, 0.1);
  padding: 4px;
  border-radius: 20px;
}

#equities .range-btn {
  background: transparent;
  border: none;
  -webkit-tap-highlight-color: transparent;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}

#equities .range-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

#equities .range-btn.active {
  background: #f7931a;
  color: #000;
}

/* Price Card Wrapper (mirrors visual-card-wrapper) */
#equities .price-card-wrapper {
  flex: 0 0 calc((100% - 20px) / 3);
  display: flex;
  flex-direction: column;
  min-width: 0;
}

#equities .price-card-tabs {
  display: flex;
  padding: 0;
}

#equities .current-card.price-card {
  flex: 1;
  border-radius: 0 0 15px 15px;
  border-top: none;
}

/* Equity Badge */
#equities .equity-badge {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  flex: 1;
  background: rgb(255 255 255 / 3%);
  padding: 10px 16px;
  border-radius: 15px 15px 0 0;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  border: var(--card-border);
  border-bottom: none;
  letter-spacing: 0.02em;
  transition: all 0.3s ease;
}


#equities .equity-badge i { font-size: 13px; }

#equities .equity-badge #equity-badge-status {
  font-weight: 700;
  letter-spacing: 0.5px;
}

#equities .equity-badge #equity-badge {
  opacity: 0.8;
}

/* Ticker Search */
#equities .ticker-search {
  display: flex;
  gap: 5px;
  background: rgba(255, 255, 255, 0.1);
  padding: 4px 4px 4px 8px;
  border-radius: 25px;
  align-items: center;
  height: 43px;
  box-sizing: border-box;
}

#equities .ticker-input {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 16px;
  font-family: inherit;
  font-weight: 400;
  padding: 4px 12px;
  margin: 0;
  width: 160px;
  outline: none;
  text-transform: uppercase;
  line-height: 1;
}

/* Asset search boxes: never let Chrome autofill paint them light blue / white
   (autocomplete="off" in index.php stops the suggestion popup; this covers a box
   Chrome already autofilled). */
#equity-ticker-input:-webkit-autofill, #earnings-search-input:-webkit-autofill,
#forex-pair-input:-webkit-autofill, #commodity-input:-webkit-autofill, #crypto-coin-input:-webkit-autofill {
  -webkit-text-fill-color: #fff;
  caret-color: #fff;
  transition: background-color 99999s ease-out 0s;
}

#equities .ticker-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
  text-transform: none;
}

#equities .search-btn {
  background: #f7931a;
  border: none;
  -webkit-tap-highlight-color: transparent;
  border-radius: 20px;
  padding: 6px 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

#equities .search-btn:hover {
  background: #ffae42;
}

#equities .search-btn svg {
  fill: #000;
}

/* Equity Info */
#equities .equity-symbol {
  font-size: 42px;
  color: #fff;
  font-weight: 700;
  line-height: 1.1;
  margin-top: 10px;
}

#equities .equity-date {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 8px;
  margin-bottom: 15px;
}

#equities .equity-price {
  font-size: 58px;
  color: #fff;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: baseline;
  margin-top: auto;
}

#equities .equity-price .decimal {
  font-size: 40px;
  margin-top: 10px;
}

#equities .equity-change-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}

#equities .equity-change-value {
  font-size: 22px;
  font-weight: 600;
}

#equities .equity-change-percent {
  font-size: 22px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 8px;
}

#equities .positive { color: #4ade80; }
#equities .negative { color: #ef4444; }
#equities .positive-bg { background: rgba(74, 222, 128, 0.2); color: #4ade80; }
#equities .negative-bg { background: rgba(239, 68, 68, 0.2); color: #ef4444; }

/* Equity Visual (Main Chart) */
#equities .equity-visual {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  width: 100%;
}

#equities .equity-chart-container {
  flex: 1;
  width: 100%;
  min-height: 120px;
  position: relative;
}

#equities .equity-chart-container svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Static dot for all market status indicators */
.equity-market-status,
.forex-market-status,
.commodity-market-status,
.crypto-market-status {
  white-space: nowrap;
  flex-shrink: 0;
}

.equity-market-status::before,
.forex-market-status::before,
.commodity-market-status::before,
.crypto-market-status::before {
  content: '●';
  display: inline-block;
  margin-right: 5px;
}

#equities .equity-market-status {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 0px;
}

#equities .equity-market-status.open { color: #4ade80; }
#equities .equity-market-status.closed { color: #ef4444; }
#equities .equity-market-status.pre-market { color: #60a5fa; }
#equities .equity-market-status.after-hours { color: #60a5fa; }

/* Indices Section */
#equities .equity-indices {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding-top: 8px;
}

/* Shared cards navigation controls (arrows + search) */
.cards-nav-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cards-arrows {
  display: flex;
  gap: 4px;
}
.cards-arrow-btn {
  background: rgba(255, 255, 255, 0.08);
  border: var(--card-border);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.5);
  transition: all 0.2s ease;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
}
.cards-arrow-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
}
.cards-arrow-btn:active {
  transform: scale(0.92);
}
.cards-arrow-btn svg {
  flex-shrink: 0;
}

#equities .indices-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}

#equities .indices-title {
  font-size: 20px;
  color: #ffae42;
  text-transform: uppercase;
  letter-spacing: 2px;
}

#equities .equity-indices-container {
  display: flex;
  gap: 10px;
  -webkit-tap-highlight-color: transparent;
  flex: 1;
  width: 100%;
}

#equities .equity-index-card {
  flex: 1 1 0;
  min-width: 0;
  -webkit-tap-highlight-color: transparent;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  padding: 12px 0 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  border: none;
  transition: all 0.3s ease;
  overflow: hidden;
  position: relative;
}

#equities .equity-index-card:hover {
  background: rgba(255, 255, 255, 0.06);
}

#equities .equity-index-name {
  font-size: 25px;
  color: rgb(166 166 166 / 50%);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 6px;
  margin-top: 25px;
  font-weight: 600;
}

#equities .equity-index-price {
  font-family: 'JetBrains Mono', monospace;
  font-size: 40px;
  color: #fff;
  font-weight: 700;
  margin-bottom: 6px;
}

.sidebar-price-whole {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
}

.sidebar-price-dec {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6em;
  font-weight: 500;
  color: #6e6e76;
  vertical-align: baseline;
}

#equities .equity-index-change {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

#equities .equity-index-percent {
  font-size: 25px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 6px;
}

#equities .equity-index-value {
  font-size: 18px;
}

#equities .equity-index-chart {
  height: 40px;
  margin-top: 10px;
  margin-bottom: 5px;
  width: 100%;
}

#equities .equity-index-chart svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Market Stats Grid */
#equities .stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(5, minmax(0, 1fr));
  gap: 6px;
  height: 100%;
}

#equities .highlight-card {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  padding: 6px 10px;
  border: var(--card-border);
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
  overflow: hidden;
  min-height: 0;
}

/* Hide company-specific cards for ETFs */
#equities.is-etf .company-card {
  display: none;
}

/* Hide ETF-specific cards by default, show for ETFs */
#equities .etf-card {
  display: none;
}

#equities.is-etf .etf-card {
  display: flex;
}

/* Adjust grid for ETF view (10 cards = 5 rows) */
#equities.is-etf .stats-grid {
  grid-template-rows: repeat(5, minmax(0, 1fr));
}

#equities .highlight-card:hover {
  background: rgba(255, 255, 255, 0.06);
}

#equities .highlight-label {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 1px;
  flex-shrink: 0;
  background: rgb(255 255 255 / 3%);
  padding: 9px 10px;
  margin: -6px -10px -10px -10px;
  border-radius: 5px 5px 0 0;
}

#equities .highlight-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#equities .highlight-value {
  font-size: 40px;
  color: #fff;
  font-weight: 700;
  line-height: 1;
  padding-top: 15px;
}

#equities .highlight-unit {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 2px;
}

#equities .highlight-inline {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
}

#equities .highlight-unit-inline {
  font-size: 20px;
  color: rgba(255, 255, 255, 0.5);
}

#equities .highlight-status {
  font-size: 13px;
  margin-top: 3px;
  font-weight: 600;
}

/* Volume Bar */
#equities .volume-bar {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  margin-top: 12px;
  overflow: hidden;
}

/* Center volume card content vertically */
#equities .highlight-card:has(.volume-bar) .highlight-content {
  padding-top: 0;
  margin-top: -10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#equities .volume-fill {
  height: 100%;
  background: linear-gradient(90deg, #f7931a, #ffae42);
  border-radius: 5px;
  width: 50%;
  transition: width 0.5s ease;
}

/* Fear & Greed Canvas Gauge */
#equities .fear-greed-content {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px 0;
}

#equities #equity-fear-greed-canvas {
  display: block;
  font-weight: 600;
}

/* 52 Week Range */
#equities .range-bar {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  margin-top: 12px;
  position: relative;
}

#equities .range-indicator {
  position: absolute;
  width: 15px;
  height: 15px;
  background: #f7931a;
  border-radius: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  left: 50%;
}

#equities .range-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-size: 18px;
  color: rgba(255, 255, 255, 0.7);
}

#equities .range-low-wrapper,
#equities .range-high-wrapper {
  display: flex;
  align-items: center;
  gap: 4px;
}

#equities .range-arrow {
  font-size: 12px;
}

#equities .range-arrow.down {
  color: #ef4444;
}

#equities .range-arrow.up {
  color: #4ade80;
}

#equities .range-separator {
  color: rgba(255, 255, 255, 0.3);
  font-weight: 300;
  padding: 0 10px;
}

/* Movers List */
#equities .movers-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

#equities .equity-mover-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
}

#equities .equity-mover-symbol {
  color: #fff;
  font-weight: 600;
}

#equities .equity-mover-change {
  font-weight: 600;
}

/* =====================================================
   EQUITIES PAGE - 2K MONITORS (min-width: 2000px)
   ===================================================== */
@media (min-width: 2000px) {
  #equities .equity-card { padding: 50px 60px; }
  #equities .current-card { flex: 0 0 calc((100% - 20px) / 3); }
  #equities .equity-dashboard { gap: 50px; padding: 50px 30px; }
  #equities .equity-left { gap: 35px; }
  #equities .equity-badge { padding: 12px 24px; font-size: 16px; }
  #equities .equity-symbol { font-size: 75px; }
  #equities .equity-date { font-size: 34px; }
  #equities .equity-price { font-size: 120px; }
  #equities .equity-price .decimal { font-size: 90px; }
  #equities .equity-change-value { font-size: 42px; }
  #equities .equity-change-percent { font-size: 42px; }
  #equities .equity-mini-chart { width: 380px; height: 200px; }
  #equities .equity-market-status { font-size: 30px; }
  #equities .indices-title { font-size: 34px; }
  #equities .equity-index-name { font-size: 45px; }
  #equities .equity-index-price { font-size: 75px; }
  #equities .equity-index-percent { font-size: 40px; }
  #equities .equity-index-value { font-size: 30px; }
  #equities .highlight-label { font-size: 30px; padding-top: 15px; }
  #equities .highlight-value { font-size: 72px; }
  #equities .highlight-unit { font-size: 30px; }
  #equities .highlight-unit-inline { font-size: 28px; }
  #equities .highlight-status { font-size: 28px; }
}

/* =====================================================
   EQUITIES PAGE - SMALLER DESKTOPS (max-width: 1600px)
   ===================================================== */
@media (max-width: 1600px) {
  #equities .equity-dashboard { gap: 15px; }
  #equities .equity-left { gap: 6px; }
  #equities .current-equity-row { gap: 10px; }
  #equities .current-card { padding: 12px 15px; }
  #equities .equity-badge { padding: 10px 16px; font-size: 13px; }
  #equities .equity-symbol { font-size: 36px; margin-top: 6px; }
  #equities .equity-date { font-size: 15px; margin-top: 4px; margin-bottom: 10px; }
  #equities .equity-change-row { margin-top: 12px; gap: 8px; }
  #equities .equity-change-value { font-size: 18px; }
  #equities .equity-change-percent { font-size: 18px; padding: 4px 10px; }
  #equities .equity-market-status { font-size: 14px; }
  #equities .indices-title { font-size: 17px; }
  #equities .indices-header { margin-bottom: 12px; }
  #equities .equity-indices { padding-top: 6px; }
  #equities .equity-index-card { padding: 8px 0 0 0; border-radius: 10px; }
  #equities .equity-index-name { font-size: 20px; margin-bottom: 4px; }
  #equities .equity-index-price { font-size: 32px; margin-bottom: 4px; }
  #equities .equity-index-percent { font-size: 14px; padding: 3px 6px; }
  #equities .equity-index-value { font-size: 13px; }
  #equities .equity-index-chart { height: 30px; margin-top: 6px; margin-bottom: 5px; }
  #equities .stats-grid { gap: 4px; }
  #equities .highlight-card { padding: 4px 8px; border-radius: 6px; }
  #equities .highlight-label { font-size: 14px; margin: -4px -8px 0 -8px; padding: 9px 8px; }
  #equities .highlight-value { font-size: 32px; }
  #equities .highlight-unit { font-size: 12px; }
  #equities .highlight-unit-inline { font-size: 16px; }
  #equities .highlight-status { font-size: 15px; }
  #equities .range-labels { font-size: 12px; margin-top: 10px; }
  #equities .volume-bar { margin-top: 8px; height: 6px; }
  #equities .range-bar { margin-top: 8px; height: 6px; }
  #equities .range-indicator { width: 12px; height: 12px; top: 50%; transform: translate(-50%, -50%); }
  #equities .ticker-input { font-size: 14px; width: 100px; }
  #equities .search-btn { padding: 6px 10px; }
  #equities .range-btn { font-size: 13px; padding: 4px 10px; }
  #equities .chart-header { margin-bottom: 6px; }
  #equities #equity-fear-greed-canvas { max-width: 150px; max-height: 90px; }
}

/* =====================================================
   EQUITIES PAGE - SHORTER SCREENS (max-height: 800px)
   ===================================================== */
@media (max-height: 800px) {
  #equities .equity-dashboard { gap: 10px; }
  #equities .equity-left { gap: 4px; }
  #equities .current-equity-row { gap: 8px; flex: 0.8; }
  #equities .current-card { padding: 10px 12px; }
  #equities .equity-badge { padding: 10px 16px; font-size: 13px; }
  #equities .equity-symbol { font-size: 32px; margin-top: 4px; }
  #equities .equity-date { font-size: 14px; margin-top: 2px; margin-bottom: 6px; }
  #equities .equity-change-row { margin-top: 8px; gap: 6px; }
  #equities .equity-change-value { font-size: 16px; }
  #equities .equity-change-percent { font-size: 16px; padding: 3px 8px; }
  #equities .equity-market-status { font-size: 13px; }
  #equities .indices-title { font-size: 15px; }
  #equities .indices-header { margin-bottom: 4px; }
  #equities .equity-indices { padding-top: 4px; }
  #equities .equity-index-card { padding: 6px 0 0 0; }
  #equities .equity-index-name { font-size: 18px; margin-bottom: 2px; }
  #equities .equity-index-price { font-size: 28px; margin-bottom: 2px; }
  #equities .equity-index-percent { font-size: 13px; padding: 2px 5px; }
  #equities .equity-index-value { font-size: 12px; }
  #equities .equity-index-change { gap: 3px; }
  #equities .equity-index-chart { height: 25px; margin-top: 4px; margin-bottom: 10px; }
  #equities .stats-grid { gap: 3px; }
  #equities .highlight-card { padding: 3px 6px; }
  #equities .highlight-label { font-size: 13px; margin: -3px -6px 0 -6px; padding: 9px 6px; }
  #equities .highlight-value { font-size: 24px; }
  #equities .highlight-unit { font-size: 11px; }
  #equities .highlight-unit-inline { font-size: 14px; }
  #equities .highlight-status { font-size: 10px; }
  #equities .range-labels { font-size: 11px; margin-top: 6px; }
  #equities .volume-bar { margin-top: 6px; height: 5px; }
  #equities .range-bar { margin-top: 6px; height: 5px; }
  #equities .range-indicator { width: 10px; height: 10px; top: 50%; transform: translate(-50%, -50%); }
  #equities .ticker-input { font-size: 13px; width: 60px; }
  #equities .search-btn { padding: 5px 8px; }
  #equities .range-btn { font-size: 12px; padding: 3px 8px; }
  #equities .chart-header { margin-bottom: 4px; padding: 0 10px; }
  #equities #equity-fear-greed-canvas { max-width: 110px; max-height: 68px; }
}

/* =====================================================
   EQUITIES PAGE - TABLET (max-width: 1200px)
   ===================================================== */
@media (max-width: 1200px) {
  #equities {
    overflow-y: auto;
    overflow-x: hidden;
  }
  #equities .equity-card { 
    padding: 15px; 
    overflow-y: auto;
    overflow-x: hidden;
    height: auto;
    max-height: none;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  #equities .equity-dashboard {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    gap: 15px;
    height: auto;
    max-height: none;
    padding: 80px 15px 60px 15px;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
  }

  #equities .equity-left { 
    gap: 15px;
    height: auto;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
  }
  #equities .equity-right {
    height: auto;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  #equities .current-equity-row {
    flex: none;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  
  #equities .equity-price { font-size: 90px; }
  #equities .equity-mini-chart { width: 100%; height: 100px; }

  #equities .stats-grid {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto;
  }

  #equities .highlight-value { font-size: 36px; }
  #equities .chart-header { 
    padding: 0 9px;
  }
  #equities .indices-header { margin-bottom: 8px; }
  #equities .equity-indices { padding-top: 6px; }
}

/* =====================================================
   EQUITIES PAGE - TABLETS (768px - 899px)
   ===================================================== */
@media (min-width: 768px) and (max-width: 899px) {
  #equities .indices-header { margin-bottom: 8px; }
  #equities .equity-indices { padding-top: 6px; }
}

/* =====================================================
   EQUITIES PAGE - MOBILE (max-width: 767px)
   ===================================================== */
@media (max-width: 767px) {
  #equities {
    overflow-y: auto;
    overflow-x: hidden;
  }
  #equities .equity-card { 
    padding: 10px;
    overflow-y: auto;
    overflow-x: hidden;
    height: auto;
    max-height: none;
  }
  #equities .equity-dashboard { 
    gap: 12px;
    padding: 5px;
    height: auto;
    max-height: none;
  }
  #equities .equity-left {
    height: auto;
  }
  #equities .equity-right {
    height: auto;
  }
  
  #equities .equity-badge { padding: 8px 14px; font-size: 13px; }
  #equities .equity-badge i { font-size: 13px; }
  #equities .price-card-wrapper { flex: none; width: 100%; }
  #equities .current-card.price-card { border-radius: 0 0 15px 15px; padding: 15px 15px 20px; }

  /* Stack current equity cards vertically on mobile */
  #equities .current-equity-row {
    flex-direction: column;
    gap: 12px;
  }

  #equities .equity-symbol { font-size: 32px; }
  #equities .equity-date { font-size: 16px; margin-bottom: 10px; }
  #equities .equity-price { font-size: 72px; }
  #equities .equity-price .decimal { font-size: 36px; margin-top: 10px; }
  #equities .equity-change-value { font-size: 20px; }
  #equities .equity-change-percent { font-size: 20px; padding: 6px 12px; }

  #equities .equity-chart-container { min-height: 100px; }
  #equities .equity-market-status { font-size: 14px; }
  
  #equities .chart-header { 
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 9px;
  }
  
  #equities .chart-range-toggle {
    gap: 0;
  }
  #equities .range-btn { 
    font-size: 12px; 
    padding: 4px 8px; 
  }

  #equities .range-separator {
    padding: 0 3px;
  }

  #equities .indices-header { 
    flex-direction: row; 
    align-items: center; 
    justify-content: space-between;
    gap: 10px; 
    margin-bottom: 10px; 
  }
  #equities .indices-title { font-size: 18px; }
  #equities .equity-indices {
    padding-top: 0;
  }
  #equities .equity-indices-container {
    flex-direction: column;
    gap: 8px;
  }
  #equities .equity-index-card { 
    padding: 10px 0 0 0; 
    flex: none;
    height: auto;
    min-height: auto;
  }
  #equities .cards-arrows { display: none; }
  #equities .equity-index-name { font-size: 14px; margin-bottom: 5px; margin-top: 10px; }
  #equities .equity-index-price { font-size: 28px; margin-bottom: 5px; }
  #equities .equity-index-percent { font-size: 16px; }
  #equities .equity-index-chart { height: 40px; margin-top: 10px; margin-bottom: 10px; }

  #equities .stats-grid { 
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    height: auto;
    gap: 8px; 
  }
  #equities .highlight-card { padding: 10px 12px 20px; }
  #equities .highlight-label { font-size: 10px; margin-bottom: 5px; margin: -10px -12px 0 -12px; padding: 9px 12px; border-radius: 5px 5px 0 0; }
  #equities .highlight-value { font-size: 28px; }
  #equities .highlight-unit { font-size: 12px; }
  #equities .highlight-unit-inline { font-size: 14px; }
  #equities .highlight-status { font-size: 12px; }
  #equities #equity-fear-greed-canvas { max-width: 120px; max-height: 75px; }
  #equities .fear-greed-content { padding: 2px 0; }
  
  #equities .ticker-input { width: 80px; font-size: 14px; padding: 6px 10px; }
  #equities .search-btn { padding: 6px 10px; }
}

/* =====================================================
   EQUITIES PAGE - SMALL MOBILE (max-width: 480px)
   ===================================================== */
@media (max-width: 480px) {
  #equities {
    overflow-y: auto;
    overflow-x: hidden;
  }
  #equities .equity-card {
    overflow-y: auto;
    overflow-x: hidden;
    height: auto;
    max-height: none;
  }
  #equities .equity-price { font-size: 56px; }
  #equities .equity-price .decimal { font-size: 28px; }
  #equities .equity-symbol { font-size: 24px; }
  #equities .equity-date { font-size: 14px; }
  #equities .highlight-value { font-size: 24px; padding-top: 20px; }
  #equities .equity-index-price { font-size: 24px; }
  #equities .indices-header { margin-bottom: 15px; }
  #equities .equity-indices { padding-top: 0; }
}

/* =====================================================
   FOREX PAGE (Two Column Layout)
   Follows equities UI principles
   ===================================================== */

/* Main Forex Card */
#forex .forex-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Loading State */
#forex .forex-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 20px;
}

#forex .forex-loading-spinner {
  width: 60px;
  height: 60px;
  border: 4px solid rgba(255, 255, 255, 0.1);
  border-top: 4px solid #6b7282;
  border-radius: 50%;
  animation: forex-spin 1s linear infinite;
}

@keyframes forex-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

#forex .forex-loading p {
  color: #888;
  font-size: 18px;
  margin: 0;
}

/* Error State */
#forex .forex-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 15px;
  color: #fc7172;
}

#forex .forex-error i { font-size: 60px; opacity: 0.7; }
#forex .forex-error p { font-size: 24px; margin: 0; color: #fff; }
#forex .forex-error span { font-size: 14px; color: #888; }

/* Forex Dashboard - Two Column Layout */
#forex .forex-dashboard {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
  width: 100%;
  height: 100%;
  padding: 50px 30px;
}

/* Left Column */
#forex .forex-left {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
}

/* Right Column */
#forex .forex-right {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* Current Forex Row - Two Cards */
#forex .current-forex-row {
  flex: 0.9;
  display: flex;
  gap: 10px;
  min-height: 0;
}

#forex .current-card {
  flex: 0 0 calc((100% - 20px) / 3);
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.03);
  border: var(--card-border);
  border-radius: 15px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  transition: all 0.3s ease;
}

#forex .current-card:hover {
  background: rgba(255, 255, 255, 0.05);
}

#forex .visual-card-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

#forex .current-card.visual-card {
  flex: 1;
  align-items: stretch;
  justify-content: flex-start;
  padding: 15px 0 0 0;
  border-radius: 0 0 15px 15px;
  border-top: none;
}

/* Chart Header with Market Status and Range Toggle */
#forex .chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding: 0 15px;
}

#forex .chart-range-toggle {
  display: flex;
  gap: 5px;
  background: rgba(255, 255, 255, 0.1);
  padding: 4px;
  border-radius: 20px;
}

#forex .range-btn {
  background: transparent;
  border: none;
  -webkit-tap-highlight-color: transparent;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}

#forex .range-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

#forex .range-btn.active {
  background: #f7931a;
  color: #000;
}

/* Forex Badge */
#forex .price-card-wrapper {
  flex: 0 0 calc((100% - 20px) / 3);
  display: flex;
  flex-direction: column;
  min-width: 0;
}

#forex .price-card-tabs {
  display: flex;
  padding: 0;
}

#forex .current-card.price-card {
  flex: 1;
  border-radius: 0 0 15px 15px;
  border-top: none;
}

#forex .forex-badge {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  flex: 1;
  background: rgb(255 255 255 / 3%);
  padding: 10px 16px;
  border-radius: 15px 15px 0 0;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  border: var(--card-border);
  border-bottom: none;
  letter-spacing: 0.02em;
  transition: all 0.3s ease;
}

#forex .forex-badge.closed {
  color: rgba(255, 255, 255, 0.6);
}

#forex .forex-badge i { font-size: 13px; }

#forex .forex-badge #forex-badge-status {
  font-weight: 700;
  letter-spacing: 0.5px;
}

#forex .forex-badge #forex-badge {
  opacity: 0.8;
}

/* Pair Search */
#forex .pair-search {
  display: flex;
  gap: 5px;
  background: rgba(255, 255, 255, 0.1);
  padding: 4px 4px 4px 8px;
  border-radius: 25px;
  align-items: center;
  height: 43px;
  box-sizing: border-box;
}

#forex .pair-input {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 16px;
  font-family: inherit;
  font-weight: 600;
  padding: 4px 12px;
  margin: 0;
  width: 120px;
  outline: none;
  text-transform: uppercase;
  line-height: 1;
}

#forex .pair-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
  text-transform: none;
}

#forex .search-btn {
  background: #f7931a;
  border: none;
  -webkit-tap-highlight-color: transparent;
  border-radius: 20px;
  padding: 6px 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

#forex .search-btn:hover {
  background: #ffae42;
}

#forex .search-btn svg {
  fill: #000;
}

/* Forex Info */
#forex .forex-pair {
  font-size: 42px;
  color: #fff;
  font-weight: 700;
  line-height: 1.1;
  margin-top: 10px;
}

#forex .forex-date {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 8px;
  margin-bottom: 15px;
}

#forex .forex-rate {
  font-size: 80px;
  color: #fff;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: baseline;
  margin-top: auto;
}

#forex .forex-rate .decimal {
  font-size: 40px;
  margin-top: 10px;
}

#forex .forex-change-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}

#forex .forex-change-value {
  font-size: 22px;
  font-weight: 600;
}

#forex .forex-change-percent {
  font-size: 22px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 8px;
}

#forex .positive { color: #4ade80; }
#forex .negative { color: #ef4444; }
#forex .positive-bg { background: rgba(74, 222, 128, 0.2); color: #4ade80; }
#forex .negative-bg { background: rgba(239, 68, 68, 0.2); color: #ef4444; }

/* Forex Visual (Main Chart) */
#forex .forex-visual {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  width: 100%;
}

#forex .forex-chart-container {
  flex: 1;
  width: 100%;
  min-height: 120px;
  position: relative;
}

#forex .forex-chart-container svg {
  width: 100%;
  height: 100%;
  display: block;
}

#forex .forex-market-status {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 0px;
}

#forex .forex-market-status.open { color: #4ade80; }
#forex .forex-market-status.closed { color: #ef4444; }

/* Pairs Section */
#forex .forex-pairs {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding-top: 8px;
}

#forex .pairs-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}

#forex .pairs-title {
  font-size: 20px;
  color: #f7931a;
  text-transform: uppercase;
  letter-spacing: 2px;
}

#forex .forex-pairs-container {
  display: flex;
  gap: 10px;
  -webkit-tap-highlight-color: transparent;
  flex: 1;
  width: 100%;
}

#forex .forex-pair-card {
  flex: 1 1 0;
  min-width: 0;
  -webkit-tap-highlight-color: transparent;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  padding: 12px 0 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  border: none;
  transition: all 0.3s ease;
  overflow: hidden;
  position: relative;
}

#forex .forex-pair-card:hover {
  background: rgba(255, 255, 255, 0.06);
}

#forex .forex-pair-name {
  font-size: 25px;
  color: rgb(166 166 166 / 50%);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 6px;
  margin-top: 25px;
  font-weight: 600;
}

#forex .forex-pair-rate {
  font-family: 'JetBrains Mono', monospace;
  font-size: 40px;
  color: #fff;
  font-weight: 700;
  margin-bottom: 6px;
}

#forex .forex-pair-change {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

#forex .forex-pair-percent {
  font-size: 25px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 6px;
}

#forex .forex-pair-value {
  font-size: 18px;
}

#forex .forex-pair-chart {
  height: 40px;
  margin-top: 10px;
  margin-bottom: 5px;
  width: 100%;
}

#forex .forex-pair-chart svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Market Stats Grid */
#forex .stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(5, 1fr);
  gap: 6px;
  height: 100%;
}

#forex .highlight-card {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  padding: 6px 10px;
  border: var(--card-border);
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
  overflow: hidden;
}

#forex .highlight-card:hover {
  background: rgba(255, 255, 255, 0.06);
}

#forex .highlight-label {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 1px;
  flex-shrink: 0;
  background: rgb(255 255 255 / 3%);
  padding: 9px 10px;
  margin: -6px -10px -10px -10px;
  border-radius: 5px 5px 0 0;
}

#forex .highlight-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#forex .highlight-value {
  font-size: 40px;
  color: #fff;
  font-weight: 700;
  line-height: 1;
  padding-top: 15px;
}

#forex .highlight-unit {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 2px;
}

#forex .highlight-inline {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
}

#forex .highlight-unit-inline {
  font-size: 20px;
  color: rgba(255, 255, 255, 0.5);
}

#forex .highlight-status {
  font-size: 13px;
  margin-top: 3px;
  font-weight: 600;
}

/* Weekly Range Bar */
#forex .range-bar {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  margin-top: 12px;
  position: relative;
}

#forex .range-indicator {
  position: absolute;
  width: 15px;
  height: 15px;
  background: #f7931a;
  border-radius: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  left: 50%;
}

#forex .range-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-size: 18px;
  color: rgba(255, 255, 255, 0.7);
}

#forex .range-low-wrapper,
#forex .range-high-wrapper {
  display: flex;
  align-items: center;
  gap: 4px;
}

#forex .range-arrow {
  font-size: 12px;
}

#forex .range-arrow.down {
  color: #ef4444;
}

#forex .range-arrow.up {
  color: #4ade80;
}

#forex .range-separator {
  color: rgba(255, 255, 255, 0.3);
  font-weight: 300;
  padding: 0 10px;
}

/* =====================================================
   FOREX PAGE - 2K MONITORS (min-width: 2000px)
   ===================================================== */
@media (min-width: 2000px) {
  #forex .forex-card { padding: 50px 60px; }
  #forex .current-card { flex: 0 0 calc((100% - 20px) / 3); }
  #forex .forex-dashboard { gap: 50px; padding: 50px 30px; }
  #forex .forex-left { gap: 35px; }
  #forex .forex-badge { padding: 12px 24px; font-size: 16px; }
  #forex .forex-pair { font-size: 75px; }
  #forex .forex-date { font-size: 34px; }
  #forex .forex-rate { font-size: 120px; }
  #forex .forex-rate .decimal { font-size: 90px; }
  #forex .forex-change-value { font-size: 42px; }
  #forex .forex-change-percent { font-size: 42px; }
  #forex .forex-market-status { font-size: 30px; }
  #forex .pairs-title { font-size: 34px; }
  #forex .forex-pair-name { font-size: 45px; }
  #forex .forex-pair-rate { font-size: 75px; }
  #forex .forex-pair-percent { font-size: 40px; }
  #forex .forex-pair-value { font-size: 30px; }
  #forex .highlight-label { font-size: 30px; padding-top: 15px; }
  #forex .highlight-value { font-size: 72px; }
  #forex .highlight-unit { font-size: 30px; }
  #forex .highlight-unit-inline { font-size: 28px; }
  #forex .highlight-status { font-size: 28px; }
}

/* =====================================================
   FOREX PAGE - SMALLER DESKTOPS (max-width: 1600px)
   ===================================================== */
@media (max-width: 1600px) {
  #forex .forex-dashboard { gap: 15px; }
  #forex .forex-left { gap: 6px; }
  #forex .current-forex-row { gap: 10px; }
  #forex .current-card { padding: 12px 15px; }
  #forex .forex-badge { padding: 10px 16px; font-size: 13px; }
  #forex .forex-pair { font-size: 36px; margin-top: 6px; }
  #forex .forex-date { font-size: 15px; margin-top: 4px; margin-bottom: 10px; }
  #forex .forex-change-row { margin-top: 12px; gap: 8px; }
  #forex .forex-change-value { font-size: 18px; }
  #forex .forex-change-percent { font-size: 18px; padding: 4px 10px; }
  #forex .forex-market-status { font-size: 14px; }
  #forex .pairs-title { font-size: 17px; }
  #forex .pairs-header { margin-bottom: 12px; }
  #forex .forex-pairs { padding-top: 6px; }
  #forex .forex-pair-card { padding: 8px 0 0 0; border-radius: 10px; }
  #forex .forex-pair-name { font-size: 25px; margin-bottom: 4px; }
  #forex .forex-pair-rate { font-size: 35px; margin-bottom: 4px; }
  #forex .forex-pair-percent { font-size: 20px; padding: 3px 6px; }
  #forex .forex-pair-value { font-size: 16px; }
  #forex .forex-pair-chart { height: 30px; margin-top: 6px; margin-bottom: 5px; }
  #forex .stats-grid { gap: 4px; }
  #forex .highlight-card { padding: 4px 8px; border-radius: 6px; }
  #forex .highlight-label { font-size: 14px; margin: -4px -8px 0 -8px; padding: 9px 8px; }
  #forex .highlight-value { font-size: 32px; }
  #forex .highlight-unit { font-size: 12px; }
  #forex .highlight-unit-inline { font-size: 16px; }
  #forex .highlight-status { font-size: 15px; }
  #forex .range-labels { font-size: 12px; margin-top: 10px; }
  #forex .range-bar { margin-top: 8px; height: 6px; }
  #forex .range-indicator { width: 12px; height: 12px; top: 50%; transform: translate(-50%, -50%); }
  #forex .pair-input { font-size: 14px; width: 100px; }
  #forex .search-btn { padding: 6px 10px; }
  #forex .range-btn { font-size: 13px; padding: 4px 10px; }
  #forex .chart-header { margin-bottom: 6px; }
}

/* =====================================================
   FOREX PAGE - SHORTER SCREENS (max-height: 800px)
   ===================================================== */
@media (max-height: 800px) {
  #forex .forex-dashboard { gap: 10px; }
  #forex .forex-left { gap: 4px; }
  #forex .current-forex-row { gap: 8px; flex: 0.8; }
  #forex .current-card { padding: 10px 12px; }
  #forex .forex-badge { padding: 10px 16px; font-size: 13px; }
  #forex .forex-pair { font-size: 32px; margin-top: 4px; }
  #forex .forex-date { font-size: 14px; margin-top: 2px; margin-bottom: 6px; }
  #forex .forex-change-row { margin-top: 8px; gap: 6px; }
  #forex .forex-change-value { font-size: 16px; }
  #forex .forex-change-percent { font-size: 16px; padding: 3px 8px; }
  #forex .forex-market-status { font-size: 13px; }
  #forex .pairs-title { font-size: 15px; }
  #forex .pairs-header { margin-bottom: 4px; }
  #forex .forex-pairs { padding-top: 4px; }
  #forex .forex-pair-card { padding: 6px 0 0 0; }
  #forex .forex-pair-name { font-size: 18px; margin-bottom: 2px; }
  #forex .forex-pair-rate { font-size: 28px; margin-bottom: 2px; }
  #forex .forex-pair-percent { font-size: 13px; padding: 2px 5px; }
  #forex .forex-pair-value { font-size: 12px; }
  #forex .forex-pair-change { gap: 3px; }
  #forex .forex-pair-chart { height: 25px; margin-top: 4px; margin-bottom: 10px; }
  #forex .stats-grid { gap: 3px; }
  #forex .highlight-card { padding: 3px 6px; }
  #forex .highlight-label { font-size: 13px; margin: -3px -6px 0 -6px; padding: 9px 6px; }
  #forex .highlight-value { font-size: 24px; }
  #forex .highlight-unit { font-size: 11px; }
  #forex .highlight-unit-inline { font-size: 14px; }
  #forex .highlight-status { font-size: 10px; }
  #forex .range-labels { font-size: 11px; margin-top: 6px; }
  #forex .range-bar { margin-top: 6px; height: 5px; }
  #forex .range-indicator { width: 10px; height: 10px; top: 50%; transform: translate(-50%, -50%); }
  #forex .pair-input { font-size: 13px; width: 60px; }
  #forex .search-btn { padding: 5px 8px; }
  #forex .range-btn { font-size: 12px; padding: 3px 8px; }
  #forex .chart-header { margin-bottom: 4px; padding: 0 10px; }
}

/* =====================================================
   FOREX PAGE - TABLET (max-width: 1200px)
   ===================================================== */
@media (max-width: 1200px) {
  #forex {
    overflow-y: auto;
    overflow-x: hidden;
  }
  #forex .forex-card { 
    padding: 15px;
    overflow-y: auto;
    overflow-x: hidden;
    height: auto;
    max-height: none;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  #forex .forex-dashboard {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    gap: 15px;
    height: auto;
    max-height: none;
    padding: 80px 15px 60px 15px;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
  }
  #forex .forex-left { 
    flex: 0 0 auto;
    gap: 15px;
    height: auto;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
  }
  #forex .forex-right {
    height: auto;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  #forex .current-forex-row {
    flex-direction: column;
    gap: 15px;
    flex: none;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  #forex .forex-rate { font-size: 90px; }
  #forex .stats-grid {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto;
  }
  #forex .highlight-value { font-size: 36px; }
  #forex .chart-header { 
    padding: 0 9px;
  }
  #forex .pairs-header { margin-bottom: 8px; }
  #forex .forex-pairs { padding-top: 6px; }
}

/* =====================================================
   FOREX PAGE - TABLETS (768px - 899px)
   ===================================================== */
@media (min-width: 768px) and (max-width: 899px) {
  #forex .pairs-header { margin-bottom: 8px; }
  #forex .forex-pairs { padding-top: 6px; }
}

/* =====================================================
   FOREX PAGE - MOBILE (max-width: 767px)
   ===================================================== */
@media (max-width: 767px) {
  #forex {
    overflow-y: auto;
    overflow-x: hidden;
  }
  #forex .forex-card { 
    overflow-y: auto;
    overflow-x: hidden;
    height: auto;
    max-height: none;
    padding: 10px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  #forex .forex-dashboard { 
    grid-template-columns: minmax(0, 1fr);
    padding: 5px;
    gap: 12px;
    height: auto;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
  }
  #forex .forex-left {
    gap: 10px;
  }
  #forex .forex-right {
    height: auto;
  }
  #forex .forex-badge { padding: 8px 14px; font-size: 13px; }
  #forex .forex-badge i { font-size: 13px; }
  #forex .price-card-wrapper { flex: none; width: 100%; }
  #forex .current-card.price-card { border-radius: 0 0 15px 15px; padding: 15px 15px 20px; }

  #forex .current-forex-row {
    flex-direction: column;
    gap: 15px;
  }
  #forex .forex-pair { font-size: 32px; }
  #forex .forex-date { font-size: 16px; margin-bottom: 10px; }
  #forex .forex-rate { font-size: 72px; }
  #forex .forex-rate .decimal { font-size: 36px; margin-top: 10px; }
  #forex .forex-change-value { font-size: 20px; }
  #forex .forex-change-percent { font-size: 20px; padding: 6px 12px; }

  #forex .forex-chart-container { min-height: 100px; }
  #forex .forex-market-status { font-size: 14px; }

  #forex .chart-header { 
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 2px;
  }
  #forex .chart-range-toggle {
    gap: 0;
  }
  #forex .range-separator {
    padding: 0 3px;
  }
  #forex .range-btn { 
    font-size: 12px;
    padding: 4px 8px;
  }
  #forex .pairs-header { 
    flex-direction: row;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    margin-top: 5px;
    margin-bottom: 10px;
  }
  #forex .pairs-title { font-size: 18px; }
  #forex .forex-pairs {
    margin-top: 0;
  }
  #forex .forex-pairs-container {
    flex-direction: column;
  }
  #forex .forex-pair-card { 
    padding: 10px 0 0 0;
    flex: none;
    height: auto;
    min-height: auto;
  }
  #forex .forex-pair-name { font-size: 14px; margin-bottom: 5px; margin-top: 10px; }
  #forex .forex-pair-rate { font-size: 28px; margin-bottom: 5px; }
  #forex .forex-pair-percent { font-size: 16px; }
  #forex .forex-pair-chart { height: 40px; margin-top: 10px; margin-bottom: 10px; }
  #forex .cards-arrows { display: none; }

  #forex .stats-grid { 
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    height: auto;
    gap: 8px;
  }
  #forex .highlight-card { padding: 10px 12px 20px; }
  #forex .highlight-label { font-size: 10px; margin-bottom: 5px; margin: -10px -12px 0 -12px; padding: 9px 12px; border-radius: 5px 5px 0 0; }
  #forex .highlight-value { font-size: 28px; }
  #forex .highlight-unit { font-size: 12px; }
  #forex .highlight-unit-inline { font-size: 14px; }
  #forex .highlight-status { font-size: 12px; }

  #forex .pair-input { width: 100px; font-size: 14px; padding: 6px 10px; }
  #forex .search-btn { padding: 6px 10px; }
}

/* =====================================================
   FOREX PAGE - VERY SMALL SCREENS (max-width: 480px)
   ===================================================== */
@media (max-width: 480px) {
  #forex {
    overflow-y: auto;
    overflow-x: hidden;
  }
  #forex .forex-card {
    overflow-y: auto;
    overflow-x: hidden;
    height: auto;
    max-height: none;
  }
  #forex .forex-rate { font-size: 56px; }
  #forex .forex-rate .decimal { font-size: 28px; }
  #forex .forex-pair { font-size: 24px; }
  #forex .forex-date { font-size: 14px; }
  #forex .highlight-value { font-size: 24px; padding-top: 20px; }
  #forex .forex-pair-rate { font-size: 24px; }
  #forex .pairs-header { margin-bottom: 15px; }
  #forex .forex-pairs { padding-top: 0; }
}

/* =====================================================
   COMMODITIES PAGE - BASE STYLES
   ===================================================== */

#commodities .commodity-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}

#commodities .commodity-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 20px;
}

#commodities .commodity-loading-spinner {
  width: 60px;
  height: 60px;
  border: 4px solid rgba(255, 255, 255, 0.1);
  border-left-color: #6b7282;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

#commodities .commodity-loading p {
  color: #888;
  font-size: 18px;
  margin: 0;
  letter-spacing: 2px;
}

#commodities .commodity-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 15px;
  color: #ef4444;
}

#commodities .commodity-error i { font-size: 60px; opacity: 0.7; }
#commodities .commodity-error p { font-size: 24px; margin: 0; color: #fff; }
#commodities .commodity-error span { font-size: 14px; color: #888; }

/* Commodity Dashboard - Two Column Layout */
#commodities .commodity-dashboard {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
  width: 100%;
  height: 100%;
  padding: 50px 30px;
}

#commodities .commodity-left {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
}

/* Right Column */
#commodities .commodity-right {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

#commodities .current-commodity-row {
  flex: 0.9;
  display: flex;
  gap: 10px;
  min-height: 0;
}

#commodities .current-card {
  flex: 0 0 calc((100% - 20px) / 3);
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.03);
  border: var(--card-border);
  border-radius: 15px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition: background 0.2s ease;
}

#commodities .current-card:hover {
  background: rgba(255, 255, 255, 0.05);
}

#commodities .visual-card-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

#commodities .current-card.visual-card {
  flex: 1;
  align-items: stretch;
  justify-content: flex-start;
  padding: 15px 0 0 0;
  border-radius: 0 0 15px 15px;
  border-top: none;
}

/* Chart Header */
#commodities .chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding: 0 15px;
}

#commodities .chart-range-toggle {
  display: flex;
  gap: 5px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 4px;
}

#commodities .range-btn {
  background: transparent;
  border: none;
  -webkit-tap-highlight-color: transparent;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  padding: 6px 12px;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 600;
}

#commodities .range-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

#commodities .range-btn.active {
  background: #f7931a;
  color: #000;
}

/* Commodity Badge */
#commodities .price-card-wrapper {
  flex: 0 0 calc((100% - 20px) / 3);
  display: flex;
  flex-direction: column;
  min-width: 0;
}

#commodities .price-card-tabs {
  display: flex;
  padding: 0;
}

#commodities .current-card.price-card {
  flex: 1;
  border-radius: 0 0 15px 15px;
  border-top: none;
}

#commodities .commodity-badge {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  flex: 1;
  background: rgb(255 255 255 / 3%);
  padding: 10px 16px;
  border-radius: 15px 15px 0 0;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  border: var(--card-border);
  border-bottom: none;
  letter-spacing: 0.02em;
  transition: all 0.3s ease;
}

#commodities .commodity-badge.closed {
  color: rgba(255, 255, 255, 0.6);
}

#commodities .commodity-badge i { font-size: 13px; }

#commodities .commodity-badge #commodity-badge-status {
  font-weight: 700;
  letter-spacing: 0.5px;
}

#commodities .commodity-badge #commodity-badge {
  opacity: 0.8;
}

/* Commodity Search */
#commodities .commodity-search {
  display: flex;
  gap: 5px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 25px;
  padding: 4px 4px 4px 8px;
  align-items: center;
  height: 43px;
  box-sizing: border-box;
}

#commodities .commodity-input {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 16px;
  font-family: inherit;
  font-weight: 600;
  padding: 4px 12px;
  margin: 0;
  width: 150px;
  outline: none;
  text-transform: uppercase;
  line-height: 1;
}

#commodities .commodity-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
  text-transform: none;
}

#commodities .search-btn {
  background: #f7931a;
  border: none;
  -webkit-tap-highlight-color: transparent;
  border-radius: 20px;
  padding: 6px 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
  margin: 0;
}

#commodities .search-btn:hover {
  background: #ffae42;
}

#commodities .search-btn svg {
  fill: #000;
}

/* Commodity Name and Price */
#commodities .commodity-name {
  font-size: 42px;
  color: #fff;
  font-weight: 700;
  margin-top: 10px;
  letter-spacing: 1px;
}

#commodities .commodity-date {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 8px;
  margin-bottom: 15px;
}

#commodities .commodity-price {
  font-size: 70px;
  color: #fff;
  font-weight: 700;
  line-height: 1;
  margin-top: auto;
  display: flex;
  align-items: baseline;
}

#commodities .commodity-price .decimal {
  font-size: 40px;
  margin-top: 10px;
}

#commodities .commodity-unit {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 5px;
}

#commodities .commodity-change-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

#commodities .commodity-change-value {
  font-size: 22px;
  font-weight: 600;
}

#commodities .commodity-change-percent {
  font-size: 22px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 8px;
}

#commodities .positive { color: #4ade80; }
#commodities .negative { color: #ef4444; }
#commodities .positive-bg { background: rgba(74, 222, 128, 0.2); color: #4ade80; }
#commodities .negative-bg { background: rgba(239, 68, 68, 0.2); color: #ef4444; }

/* Commodity Visual (Main Chart) */
#commodities .commodity-visual {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

#commodities .commodity-chart-container {
  flex: 1;
  width: 100%;
  min-height: 120px;
  position: relative;
}

#commodities .commodity-chart-container svg {
  width: 100%;
  height: 100%;
  display: block;
}

#commodities .commodity-market-status {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 0px;
}

#commodities .commodity-market-status.open { color: #4ade80; }
#commodities .commodity-market-status.closed { color: #ef4444; }
#commodities .commodity-market-status.limited { color: #fbbf24; }

/* Commodities Section */
#commodities .commodities-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding-top: 8px;
}

#commodities .commodities-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}

#commodities .commodities-title {
  font-size: 20px;
  color: #f7931a;
  text-transform: uppercase;
  letter-spacing: 1px;
}

#commodities .commodities-container {
  display: flex;
  gap: 10px;
  -webkit-tap-highlight-color: transparent;
  flex: 1;
  min-height: 0;
}

#commodities .commodity-item-card {
  flex: 1 1 0;
  min-width: 0;
  -webkit-tap-highlight-color: transparent;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  padding: 12px 0 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  border: none;
  transition: all 0.3s ease;
  overflow: hidden;
  position: relative;
}

#commodities .commodity-item-card:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* Remove tap highlight from all card child elements */
#equities .equity-index-card *,
#forex .forex-pair-card *,
#commodities .commodity-item-card * {
  -webkit-tap-highlight-color: transparent;
}

#commodities .commodity-item-name {
  font-size: 25px;
  color: rgb(166 166 166 / 50%);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 6px;
  margin-top: 25px;
  font-weight: 600;
}

#commodities .commodity-item-price {
  font-family: 'JetBrains Mono', monospace;
  font-size: 40px;
  color: #fff;
  font-weight: 700;
  margin-bottom: 6px;
}

#commodities .commodity-item-change {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

#commodities .commodity-item-percent {
  font-size: 25px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 6px;
}

#commodities .commodity-item-value {
  font-size: 18px;
}

#commodities .commodity-item-chart {
  height: 40px;
  margin-top: 10px;
  margin-bottom: 5px;
  width: 100%;
}

#commodities .commodity-item-chart svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Stats Grid */
#commodities .stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(5, 1fr);
  gap: 6px;
  height: 100%;
}

#commodities .highlight-card {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  padding: 6px 10px;
  border: var(--card-border);
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
  overflow: hidden;
}

#commodities .highlight-card:hover {
  background: rgba(255, 255, 255, 0.06);
}

#commodities .highlight-label {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 1px;
  flex-shrink: 0;
  background: rgb(255 255 255 / 3%);
  padding: 9px 10px;
  margin: -6px -10px -10px -10px;
  border-radius: 5px 5px 0 0;
}

#commodities .highlight-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#commodities .highlight-value {
  font-size: 40px;
  color: #fff;
  font-weight: 700;
  line-height: 1;
  padding-top: 15px;
}

#commodities .highlight-unit {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 2px;
}

#commodities .highlight-inline {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
}

#commodities .highlight-unit-inline {
  font-size: 20px;
  color: rgba(255, 255, 255, 0.5);
}

#commodities .highlight-status {
  font-size: 13px;
  margin-top: 3px;
  font-weight: 600;
}

/* Range Bar */
#commodities .range-bar {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  position: relative;
  margin-top: 10px;
}

#commodities .range-indicator {
  position: absolute;
  width: 15px;
  height: 15px;
  background: #f7931a;
  border-radius: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  left: 50%;
}

#commodities .range-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-size: 18px;
  color: rgba(255, 255, 255, 0.5);
}

#commodities .range-low-wrapper,
#commodities .range-high-wrapper {
  display: flex;
  align-items: center;
  gap: 4px;
}

#commodities .range-arrow {
  font-size: 12px;
}

#commodities .range-arrow.down {
  color: #ef4444;
}

#commodities .range-arrow.up {
  color: #4ade80;
}

#commodities .range-separator {
  color: rgba(255, 255, 255, 0.3);
  font-weight: 300;
  padding: 0 10px;
}

/* =====================================================
   COMMODITIES PAGE - LARGE SCREENS (2000px+)
   ===================================================== */
@media (min-width: 2000px) {
  #commodities .commodity-card { padding: 50px 60px; }
  #commodities .current-card { flex: 0 0 calc((100% - 20px) / 3); }
  #commodities .commodity-dashboard { gap: 50px; padding: 50px 30px; }
  #commodities .commodity-left { gap: 35px; }
  #commodities .commodity-badge { padding: 12px 24px; font-size: 16px; }
  #commodities .commodity-name { font-size: 75px; }
  #commodities .commodity-date { font-size: 34px; }
  #commodities .commodity-price { font-size: 120px; }
  #commodities .commodity-price .decimal { font-size: 90px; }
  #commodities .commodity-change-value { font-size: 42px; }
  #commodities .commodity-change-percent { font-size: 42px; }
  #commodities .commodity-market-status { font-size: 30px; }
  #commodities .commodities-title { font-size: 34px; }
  #commodities .commodity-item-name { font-size: 45px; }
  #commodities .commodity-item-price { font-size: 75px; }
  #commodities .commodity-item-percent { font-size: 40px; }
  #commodities .commodity-item-value { font-size: 30px; }
  #commodities .highlight-label { font-size: 30px; padding-top: 15px; }
  #commodities .highlight-value { font-size: 72px; }
  #commodities .highlight-unit { font-size: 30px; }
  #commodities .highlight-unit-inline { font-size: 28px; }
  #commodities .highlight-status { font-size: 28px; }
}

/* =====================================================
   COMMODITIES PAGE - MID-LARGE SCREENS (max-width: 1600px)
   ===================================================== */
@media (max-width: 1600px) {
  #commodities .commodity-dashboard { gap: 15px; }
  #commodities .commodity-left { gap: 6px; }
  #commodities .current-commodity-row { gap: 10px; }
  #commodities .current-card { padding: 12px 15px; }
  #commodities .commodity-badge { padding: 10px 16px; font-size: 13px; }
  #commodities .commodity-name { font-size: 36px; margin-top: 6px; }
  #commodities .commodity-date { font-size: 15px; margin-top: 4px; margin-bottom: 10px; }
  #commodities .commodity-change-row { margin-top: 12px; gap: 8px; }
  #commodities .commodity-change-value { font-size: 18px; }
  #commodities .commodity-change-percent { font-size: 18px; padding: 4px 10px; }
  #commodities .commodity-market-status { font-size: 14px; }
  #commodities .commodities-title { font-size: 17px; }
  #commodities .commodities-header { margin-bottom: 12px; }
  #commodities .commodities-section { padding-top: 6px; }
  #commodities .commodity-item-card { padding: 8px 0 0 0; border-radius: 10px; }
  #commodities .commodity-item-name { font-size: 25px; margin-bottom: 4px; }
  #commodities .commodity-item-price { font-size: 35px; margin-bottom: 4px; }
  #commodities .commodity-item-percent { font-size: 20px; padding: 3px 6px; }
  #commodities .commodity-item-value { font-size: 16px; }
  #commodities .commodity-item-chart { height: 30px; margin-top: 6px; margin-bottom: 5px; }
  #commodities .stats-grid { gap: 4px; }
  #commodities .highlight-card { padding: 4px 8px; border-radius: 6px; }
  #commodities .highlight-label { font-size: 14px; margin: -4px -8px 0 -8px; padding: 9px 8px; }
  #commodities .highlight-value { font-size: 32px; }
  #commodities .highlight-unit { font-size: 12px; }
  #commodities .highlight-unit-inline { font-size: 16px; }
  #commodities .highlight-status { font-size: 15px; }
  #commodities .range-labels { font-size: 12px; margin-top: 10px; }
  #commodities .range-bar { margin-top: 8px; height: 6px; }
  #commodities .range-indicator { width: 12px; height: 12px; top: 50%; transform: translate(-50%, -50%); }
  #commodities .commodity-input { font-size: 14px; width: 100px; }
  #commodities .search-btn { padding: 6px 10px; }
  #commodities .range-btn { font-size: 13px; padding: 4px 10px; }
  #commodities .chart-header { margin-bottom: 6px; }
}

/* =====================================================
   COMMODITIES PAGE - SMALLER SCREENS (max-height: 800px)
   ===================================================== */
@media (max-height: 800px) {
  #commodities .commodity-dashboard { gap: 10px; }
  #commodities .commodity-left { gap: 4px; }
  #commodities .current-commodity-row { gap: 8px; flex: 0.8; }
  #commodities .current-card { padding: 10px 12px; }
  #commodities .commodity-badge { padding: 10px 16px; font-size: 13px; }
  #commodities .commodity-name { font-size: 32px; margin-top: 4px; }
  #commodities .commodity-date { font-size: 14px; margin-top: 2px; margin-bottom: 6px; }
  #commodities .commodity-change-row { margin-top: 8px; gap: 6px; }
  #commodities .commodity-change-value { font-size: 16px; }
  #commodities .commodity-change-percent { font-size: 16px; padding: 3px 8px; }
  #commodities .commodity-market-status { font-size: 13px; }
  #commodities .commodities-title { font-size: 15px; }
  #commodities .commodities-header { margin-bottom: 4px; }
  #commodities .commodities-section { padding-top: 4px; }
  #commodities .commodity-item-card { padding: 6px 0 0 0; }
  #commodities .commodity-item-name { font-size: 18px; margin-bottom: 2px; }
  #commodities .commodity-item-price { font-size: 28px; margin-bottom: 2px; }
  #commodities .commodity-item-percent { font-size: 13px; padding: 2px 5px; }
  #commodities .commodity-item-value { font-size: 12px; }
  #commodities .commodity-item-change { gap: 3px; }
  #commodities .commodity-item-chart { height: 25px; margin-top: 4px; margin-bottom: 10px; }
  #commodities .stats-grid { gap: 3px; }
  #commodities .highlight-card { padding: 3px 6px; }
  #commodities .highlight-label { font-size: 13px; margin: -3px -6px 0 -6px; padding: 9px 6px; }
  #commodities .highlight-value { font-size: 24px; }
  #commodities .highlight-unit { font-size: 11px; }
  #commodities .highlight-unit-inline { font-size: 14px; }
  #commodities .highlight-status { font-size: 10px; }
  #commodities .range-labels { font-size: 11px; margin-top: 6px; }
  #commodities .range-bar { margin-top: 6px; height: 5px; }
  #commodities .range-indicator { width: 10px; height: 10px; top: 50%; transform: translate(-50%, -50%); }
  #commodities .commodity-input { font-size: 13px; width: 60px; }
  #commodities .search-btn { padding: 5px 8px; }
  #commodities .range-btn { font-size: 12px; padding: 3px 8px; }
  #commodities .chart-header { margin-bottom: 4px; padding: 0 10px; }
}

/* =====================================================
   COMMODITIES PAGE - TABLET (max-width: 1200px)
   ===================================================== */
@media (max-width: 1200px) {
  #commodities {
    overflow-y: auto;
    overflow-x: hidden;
  }
  #commodities .commodity-card { 
    padding: 15px;
    overflow-y: auto;
    overflow-x: hidden;
    height: auto;
    max-height: none;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  #commodities .commodity-dashboard {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    gap: 15px;
    height: auto;
    max-height: none;
    padding: 80px 15px 60px 15px;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
  }
  #commodities .commodity-left { 
    flex: 0 0 auto;
    gap: 15px;
    height: auto;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
  }
  #commodities .commodity-right {
    height: auto;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  #commodities .current-commodity-row {
    flex-direction: column;
    gap: 15px;
    flex: none;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  #commodities .commodity-price { font-size: 90px; }
  #commodities .stats-grid {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto;
  }
  #commodities .highlight-value { font-size: 36px; }
  #commodities .chart-header { 
    padding: 0 9px;
  }
  #commodities .commodities-header { margin-bottom: 8px; }
  #commodities .commodities-section { padding-top: 6px; }
}

/* =====================================================
   COMMODITIES PAGE - TABLETS (768px - 899px)
   ===================================================== */
@media (min-width: 768px) and (max-width: 899px) {
  #commodities .commodities-header { margin-bottom: 8px; }
  #commodities .commodities-section { padding-top: 6px; }
}

/* =====================================================
   COMMODITIES PAGE - MOBILE (max-width: 767px)
   ===================================================== */
@media (max-width: 767px) {
  #commodities {
    overflow-y: auto;
    overflow-x: hidden;
  }
  #commodities .commodity-card { 
    overflow-y: auto;
    overflow-x: hidden;
    height: auto;
    max-height: none;
    padding: 10px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  #commodities .commodity-dashboard { 
    grid-template-columns: minmax(0, 1fr);
    padding: 5px;
    gap: 12px;
    height: auto;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
  }
  #commodities .commodity-left {
    gap: 10px;
  }
  #commodities .commodity-right {
    height: auto;
  }
  #commodities .commodity-badge { padding: 8px 14px; font-size: 13px; }
  #commodities .commodity-badge i { font-size: 13px; }
  #commodities .price-card-wrapper { flex: none; width: 100%; }
  #commodities .current-card.price-card { border-radius: 0 0 15px 15px; padding: 15px 15px 20px; }

  #commodities .current-commodity-row {
    flex-direction: column;
    gap: 15px;
  }
  #commodities .commodity-name { font-size: 32px; }
  #commodities .commodity-date { font-size: 16px; margin-bottom: 10px; }
  #commodities .commodity-price { font-size: 72px; }
  #commodities .commodity-price .decimal { font-size: 36px; margin-top: 10px; }
  #commodities .commodity-change-value { font-size: 20px; }
  #commodities .commodity-change-percent { font-size: 20px; padding: 6px 12px; }

  #commodities .commodity-chart-container { min-height: 100px; }
  #commodities .commodity-market-status { font-size: 14px; }

  #commodities .chart-header { 
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 9px;
  }
  #commodities .chart-range-toggle {
    gap: 0;
  }
  #commodities .range-separator {
    padding: 0 3px;
  }
  #commodities .range-btn { 
    font-size: 12px;
    padding: 4px 8px;
  }
  #commodities .commodities-header { 
    flex-direction: row;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    margin-top: 5px;
    margin-bottom: 10px;
  }
  #commodities .commodities-title { font-size: 14px; }
  #commodities .commodities-section {
    margin-top: 0;
    padding-top: 0;
  }
  #commodities .commodities-container {
    flex-direction: column;
  }
  #commodities .commodity-item-card { 
    padding: 10px 0 0 0;
    flex: none;
    height: auto;
    min-height: auto;
  }
  #commodities .commodity-item-name { font-size: 14px; margin-bottom: 5px; margin-top: 10px; }
  #commodities .cards-arrows { display: none; }
  #commodities .commodity-item-price { font-size: 28px; margin-bottom: 5px; }
  #commodities .commodity-item-percent { font-size: 16px; }
  #commodities .commodity-item-chart { height: 40px; margin-top: 10px; margin-bottom: 10px; }

  #commodities .stats-grid { 
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    height: auto;
    gap: 8px;
  }
  #commodities .highlight-card { padding: 10px 12px 20px; }
  #commodities .highlight-label { font-size: 10px; margin-bottom: 5px; margin: -10px -12px 0 -12px; padding: 9px 12px; border-radius: 5px 5px 0 0; }
  #commodities .highlight-value { font-size: 28px; }
  #commodities .highlight-unit { font-size: 12px; }
  #commodities .highlight-unit-inline { font-size: 14px; }
  #commodities .highlight-status { font-size: 12px; }

  #commodities .commodity-input { width: 80px; font-size: 14px; }
  #commodities .search-btn { padding: 6px 10px; }
}

/* =====================================================
   COMMODITIES PAGE - VERY SMALL SCREENS (max-width: 480px)
   ===================================================== */
@media (max-width: 480px) {
  #commodities {
    overflow-y: auto;
    overflow-x: hidden;
  }
  #commodities .commodity-card {
    overflow-y: auto;
    overflow-x: hidden;
    height: auto;
    max-height: none;
  }
  #commodities .commodity-price { font-size: 56px; }
  #commodities .commodity-price .decimal { font-size: 28px; }
  #commodities .commodity-name { font-size: 24px; }
  #commodities .commodity-date { font-size: 14px; }
  #commodities .highlight-value { font-size: 24px; padding-top: 20px; }
  #commodities .commodity-item-price { font-size: 24px; }
  #commodities .commodities-header { margin-bottom: 15px; }
  #commodities .commodities-section { padding-top: 0; }
}

/* =====================================================
   CRYPTO DASHBOARD STYLES
   (Mirrored from commodities dashboard exactly)
   ===================================================== */

#crypto .crypto-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}

#crypto .crypto-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 20px;
}

#crypto .crypto-loading-spinner {
  width: 60px;
  height: 60px;
  border: 4px solid rgba(255, 255, 255, 0.1);
  border-left-color: #6b7282;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

#crypto .crypto-loading p {
  color: #888;
  font-size: 18px;
  margin: 0;
  letter-spacing: 2px;
}

#crypto .crypto-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 15px;
  color: #ef4444;
}

#crypto .crypto-error i { font-size: 60px; opacity: 0.7; }
#crypto .crypto-error p { font-size: 24px; margin: 0; color: #fff; }
#crypto .crypto-error span { font-size: 14px; color: #888; }

/* Crypto Dashboard - Two Column Layout */
#crypto .crypto-dashboard {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
  width: 100%;
  height: 100%;
  padding: 50px 0;
  box-sizing: border-box;
}

#crypto .crypto-left {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
}

#crypto .crypto-right {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

#crypto .current-crypto-row {
  flex: 0.9;
  display: flex;
  gap: 10px;
  min-height: 0;
}

#crypto .current-card {
  flex: 0 0 calc((100% - 20px) / 3);
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.03);
  border: var(--card-border);
  border-radius: 15px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition: background 0.2s ease;
}

#crypto .current-card:hover {
  background: rgba(255, 255, 255, 0.05);
}

#crypto .visual-card-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

#crypto .current-card.visual-card {
  flex: 1;
  align-items: stretch;
  justify-content: flex-start;
  padding: 15px 0 0 0;
  border-radius: 0 0 15px 15px;
  border-top: none;
}

#crypto .chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding: 0 15px;
}

#crypto .chart-range-toggle {
  display: flex;
  gap: 5px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 4px;
}

#crypto .range-btn {
  background: transparent;
  border: none;
  -webkit-tap-highlight-color: transparent;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  padding: 6px 12px;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 600;
}

#crypto .range-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

#crypto .range-btn.active {
  background: #f7931a;
  color: #000;
}

/* Crypto Badge */
#crypto .price-card-wrapper {
  flex: 0 0 calc((100% - 20px) / 3);
  display: flex;
  flex-direction: column;
  min-width: 0;
}

#crypto .price-card-tabs {
  display: flex;
  padding: 0;
}

#crypto .current-card.price-card {
  flex: 1;
  border-radius: 0 0 15px 15px;
  border-top: none;
}

#crypto .crypto-badge {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  flex: 1;
  background: rgb(255 255 255 / 3%);
  padding: 10px 16px;
  border-radius: 15px 15px 0 0;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  border: var(--card-border);
  border-bottom: none;
  letter-spacing: 0.02em;
  transition: all 0.3s ease;
}

#crypto .crypto-badge.closed {
  color: rgba(255, 255, 255, 0.6);
}

#crypto .crypto-badge i { font-size: 13px; }

#crypto .crypto-badge #crypto-badge-status {
  font-weight: 700;
  letter-spacing: 0.5px;
}

#crypto .crypto-badge #crypto-badge {
  opacity: 0.8;
}

/* Crypto Name and Price */
#crypto .crypto-name {
  font-size: 42px;
  color: #fff;
  font-weight: 700;
  margin-top: 10px;
  letter-spacing: 1px;
}

#crypto .crypto-date {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 8px;
  margin-bottom: 15px;
}

#crypto .crypto-price {
  font-size: 50px;
  color: #fff;
  font-weight: 700;
  line-height: 1;
  margin-top: auto;
  display: flex;
  align-items: baseline;
}

#crypto .crypto-price .decimal {
  font-size: 40px;
  margin-top: 10px;
}

/* Change Row */
#crypto .crypto-change-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

#crypto .crypto-change-value {
  font-size: 22px;
  font-weight: 600;
}

#crypto .crypto-change-value.positive { color: #4ade80; }
#crypto .crypto-change-value.negative { color: #ef4444; }

#crypto .crypto-change-percent {
  font-size: 22px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 8px;
}

#crypto .crypto-change-percent.positive-bg { background: rgba(74, 222, 128, 0.2); color: #4ade80; }
#crypto .crypto-change-percent.negative-bg { background: rgba(239, 68, 68, 0.2); color: #ef4444; }

/* Market Status */
#crypto .crypto-market-status {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 0px;
}

#crypto .crypto-market-status.open { color: #4ade80; }

/* Chart */
#crypto .crypto-visual {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

#crypto .crypto-chart-container {
  flex: 1;
  width: 100%;
  min-height: 120px;
  position: relative;
}

#crypto .crypto-chart-container svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Major Cryptos Section */
#crypto .crypto-coins {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding-top: 8px;
}

#crypto .coins-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}

#crypto .coins-title {
  font-size: 20px;
  color: #f7931a;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Coin Search */
#crypto .coin-search {
  display: flex;
  gap: 5px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 25px;
  padding: 4px 4px 4px 8px;
  align-items: center;
  height: 43px;
  box-sizing: border-box;
}

#crypto .coin-search input {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 16px;
  font-family: inherit;
  font-weight: 600;
  padding: 4px 12px;
  margin: 0;
  width: 120px;
  outline: none;
  text-transform: uppercase;
  line-height: 1;
}

#crypto .coin-search input::placeholder {
  color: rgba(255, 255, 255, 0.4);
  text-transform: none;
}

#crypto .search-btn {
  background: #f7931a;
  border: none;
  -webkit-tap-highlight-color: transparent;
  border-radius: 20px;
  padding: 6px 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
  margin: 0;
}

#crypto .search-btn:hover { background: #ffae42; }
#crypto .search-btn svg { fill: #000; }

/* Crypto Coin Cards Container */
#crypto .crypto-coins-container {
  display: flex;
  gap: 10px;
  -webkit-tap-highlight-color: transparent;
  flex: 1;
  min-height: 0;
}

#crypto .crypto-coin-card {
  flex: 1 1 0;
  min-width: 0;
  -webkit-tap-highlight-color: transparent;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  padding: 12px 0 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  border: none;
  transition: all 0.3s ease;
  overflow: hidden;
  position: relative;
}

#crypto .crypto-coin-card:hover {
  background: rgba(255, 255, 255, 0.06);
}

#crypto .crypto-coin-card *,
#crypto .crypto-coins-container * {
  -webkit-tap-highlight-color: transparent;
}

#crypto .crypto-coin-name {
  font-size: 25px;
  color: rgb(166 166 166 / 50%);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 6px;
  margin-top: 25px;
  font-weight: 600;
}

#crypto .crypto-coin-price {
  font-family: 'JetBrains Mono', monospace;
  font-size: 40px;
  color: #fff;
  font-weight: 700;
  margin-bottom: 6px;
}

#crypto .crypto-coin-change {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

#crypto .crypto-coin-percent {
  font-size: 25px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 6px;
}

#crypto .crypto-coin-value {
  font-size: 18px;
}

#crypto .positive { color: #4ade80; }
#crypto .negative { color: #ef4444; }
#crypto .positive-bg { background: rgba(74, 222, 128, 0.2); color: #4ade80; }
#crypto .negative-bg { background: rgba(239, 68, 68, 0.2); color: #ef4444; }

#crypto .crypto-coin-sparkline {
  height: 40px;
  margin-top: 10px;
  margin-bottom: 5px;
  width: 100%;
}

#crypto .crypto-coin-sparkline svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Stats Grid */
#crypto .stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(5, minmax(0, 1fr));
  gap: 6px;
  height: 100%;
}

#crypto .highlight-card {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  padding: 6px 10px;
  border: var(--card-border);
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
  overflow: hidden;
  min-height: 0;
}

#crypto .highlight-card:hover {
  background: rgba(255, 255, 255, 0.06);
}

#crypto .highlight-label {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 1px;
  flex-shrink: 0;
  background: rgb(255 255 255 / 3%);
  padding: 9px 10px;
  margin: -6px -10px -10px -10px;
  border-radius: 5px 5px 0 0;
}

#crypto .highlight-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Fear & Greed Canvas Gauge */
#crypto .fear-greed-content {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px 0;
}

#crypto #crypto-fear-greed-canvas {
  display: block;
  font-weight: 600;
}

#crypto .highlight-value {
  font-size: 40px;
  color: #fff;
  font-weight: 700;
  line-height: 1;
  padding-top: 15px;
}

#crypto .highlight-status {
  font-size: 13px;
  margin-top: 3px;
  font-weight: 600;
}

#crypto .highlight-inline {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
}

#crypto .highlight-unit-inline {
  font-size: 20px;
  color: rgba(255, 255, 255, 0.5);
}

/* Range Bars */
#crypto .range-bar {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  position: relative;
  margin-top: 10px;
}

#crypto .range-indicator {
  position: absolute;
  width: 15px;
  height: 15px;
  background: #f7931a;
  border-radius: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  left: 50%;
}

#crypto .range-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-size: 18px;
  color: rgba(255, 255, 255, 0.5);
}

#crypto .range-low-wrapper,
#crypto .range-high-wrapper {
  display: flex;
  align-items: center;
  gap: 4px;
}

#crypto .range-arrow { font-size: 12px; }
#crypto .range-arrow.down { color: #ef4444; }
#crypto .range-arrow.up { color: #4ade80; }
#crypto .range-separator { color: rgba(255, 255, 255, 0.3); font-weight: 300; padding: 0 10px; }

/* ---- RESPONSIVE BREAKPOINTS ---- */

/* =====================================================
   CRYPTO PAGE - 2K MONITORS (min-width: 2000px)
   ===================================================== */
@media (min-width: 2000px) {
  #crypto .crypto-card { padding: 50px 60px; }
  #crypto .current-card { flex: 0 0 calc((100% - 20px) / 3); }
  #crypto .crypto-dashboard { gap: 50px; padding: 50px 30px; }
  #crypto .crypto-left { gap: 35px; }
  #crypto .crypto-badge { padding: 12px 24px; font-size: 16px; }
  #crypto .crypto-name { font-size: 75px; }
  #crypto .crypto-date { font-size: 34px; }
  #crypto .crypto-price { font-size: 120px; }
  #crypto .crypto-price .decimal { font-size: 90px; }
  #crypto .crypto-change-value { font-size: 42px; }
  #crypto .crypto-change-percent { font-size: 42px; }
  #crypto .crypto-market-status { font-size: 30px; }
  #crypto .coins-title { font-size: 34px; }
  #crypto .crypto-coin-name { font-size: 45px; }
  #crypto .crypto-coin-price { font-size: 75px; }
  #crypto .crypto-coin-percent { font-size: 40px; }
  #crypto .highlight-label { font-size: 30px; padding-top: 15px; }
  #crypto .highlight-value { font-size: 72px; }
  #crypto .highlight-unit-inline { font-size: 28px; }
  #crypto .highlight-status { font-size: 28px; }
}

/* =====================================================
   CRYPTO PAGE - SMALLER DESKTOPS (max-width: 1600px)
   ===================================================== */
@media (max-width: 1600px) {
  #crypto .crypto-dashboard { gap: 15px; }
  #crypto .crypto-left { gap: 6px; }
  #crypto .current-crypto-row { gap: 10px; }
  #crypto .current-card { padding: 12px 15px; }
  #crypto .crypto-badge { padding: 10px 16px; font-size: 13px; }
  #crypto .crypto-name { font-size: 36px; margin-top: 6px; }
  #crypto .crypto-date { font-size: 15px; margin-top: 4px; margin-bottom: 10px; }
  #crypto .crypto-change-row { margin-top: 12px; gap: 8px; }
  #crypto .crypto-change-value { font-size: 18px; }
  #crypto .crypto-change-percent { font-size: 18px; padding: 4px 10px; }
  #crypto .crypto-market-status { font-size: 14px; }
  #crypto .coins-title { font-size: 17px; }
  #crypto .coins-header { margin-bottom: 12px; }
  #crypto .crypto-coins { padding-top: 6px; }
  #crypto .crypto-coin-card { padding: 8px 0 0 0; border-radius: 10px; }
  #crypto .crypto-coin-name { font-size: 20px; margin-bottom: 4px; }
  #crypto .crypto-coin-price { font-size: 32px; margin-bottom: 4px; }
  #crypto .crypto-coin-percent { font-size: 14px; padding: 3px 6px; }
  #crypto .crypto-coin-sparkline { height: 30px; margin-top: 6px; margin-bottom: 5px; }
  #crypto .stats-grid { gap: 4px; }
  #crypto .highlight-card { padding: 4px 8px; border-radius: 6px; }
  #crypto .highlight-label { font-size: 14px; margin: -4px -8px 0 -8px; padding: 9px 8px; }
  #crypto .highlight-value { font-size: 26px; }
  #crypto .highlight-unit { font-size: 12px; }
  #crypto .highlight-unit-inline { font-size: 16px; }
  #crypto .highlight-status { font-size: 11px; }
  #crypto .range-labels { font-size: 12px; margin-top: 10px; }
  #crypto .range-bar { margin-top: 8px; height: 6px; }
  #crypto .range-indicator { width: 12px; height: 12px; top: 50%; transform: translate(-50%, -50%); }
  #crypto .coin-search input { font-size: 14px; width: 100px; }
  #crypto .search-btn { padding: 6px 10px; }
  #crypto .range-btn { font-size: 13px; padding: 4px 10px; }
  #crypto .chart-header { margin-bottom: 6px; }
  #crypto #crypto-fear-greed-canvas { max-width: 150px; max-height: 90px; }
}

/* =====================================================
   CRYPTO PAGE - SHORTER SCREENS (max-height: 800px)
   ===================================================== */
@media (max-height: 800px) {
  #crypto .crypto-dashboard { gap: 10px; }
  #crypto .crypto-left { gap: 4px; }
  #crypto .current-crypto-row { gap: 8px; flex: 0.8; }
  #crypto .current-card { padding: 10px 12px; }
  #crypto .crypto-badge { padding: 10px 16px; font-size: 13px; }
  #crypto .crypto-name { font-size: 32px; margin-top: 4px; }
  #crypto .crypto-date { font-size: 14px; margin-top: 2px; margin-bottom: 6px; }
  #crypto .crypto-change-row { margin-top: 8px; gap: 6px; }
  #crypto .crypto-change-value { font-size: 16px; }
  #crypto .crypto-change-percent { font-size: 16px; padding: 3px 8px; }
  #crypto .crypto-market-status { font-size: 13px; }
  #crypto .coins-title { font-size: 15px; }
  #crypto .coins-header { margin-bottom: 4px; }
  #crypto .crypto-coins { padding-top: 4px; }
  #crypto .crypto-coin-card { padding: 6px 0 0 0; }
  #crypto .crypto-coin-name { font-size: 18px; margin-bottom: 2px; }
  #crypto .crypto-coin-price { font-size: 28px; margin-bottom: 2px; }
  #crypto .crypto-coin-percent { font-size: 13px; padding: 2px 5px; }
  #crypto .crypto-coin-change { gap: 3px; }
  #crypto .crypto-coin-sparkline { height: 25px; margin-top: 4px; margin-bottom: 10px; }
  #crypto .stats-grid { gap: 3px; }
  #crypto .highlight-card { padding: 3px 6px; }
  #crypto .highlight-label { font-size: 13px; margin: -3px -6px 0 -6px; padding: 9px 6px; }
  #crypto .highlight-value { font-size: 24px; }
  #crypto .highlight-unit-inline { font-size: 14px; }
  #crypto .highlight-status { font-size: 10px; }
  #crypto .range-labels { font-size: 11px; margin-top: 6px; }
  #crypto .range-bar { margin-top: 6px; height: 5px; }
  #crypto .range-indicator { width: 10px; height: 10px; top: 50%; transform: translate(-50%, -50%); }
  #crypto .coin-search input { font-size: 13px; width: 60px; }
  #crypto .search-btn { padding: 5px 8px; }
  #crypto .range-btn { font-size: 12px; padding: 3px 8px; }
  #crypto .chart-header { margin-bottom: 4px; padding: 0 10px; }
  #crypto #crypto-fear-greed-canvas { max-width: 110px; max-height: 68px; }
}

/* =====================================================
   CRYPTO PAGE - TABLET (max-width: 1200px)
   ===================================================== */
@media (max-width: 1200px) {
  #crypto {
    overflow-y: auto;
    overflow-x: hidden;
  }
  #crypto .crypto-card { 
    padding: 15px;
    overflow-y: auto;
    overflow-x: hidden;
    height: auto;
    max-height: none;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  #crypto .crypto-dashboard {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    gap: 15px;
    height: auto;
    max-height: none;
    padding: 80px 15px 60px 15px;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
  }
  #crypto .crypto-left { 
    flex: 0 0 auto;
    gap: 15px;
    height: auto;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
  }
  #crypto .crypto-right {
    height: auto;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  #crypto .current-crypto-row {
    flex-direction: column;
    gap: 15px;
    flex: none;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  #crypto .crypto-price { font-size: 90px; }
  #crypto .stats-grid {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto;
  }
  #crypto .highlight-value { font-size: 36px; }
  #crypto .chart-header { 
    padding: 0 9px;
  }
  #crypto .coins-header { margin-bottom: 8px; }
  #crypto .crypto-coins { padding-top: 6px; }
}

/* =====================================================
   CRYPTO PAGE - TABLETS (768px - 899px)
   ===================================================== */
@media (min-width: 768px) and (max-width: 899px) {
  #crypto .coins-header { margin-bottom: 8px; }
  #crypto .crypto-coins { padding-top: 6px; }
}

/* =====================================================
   CRYPTO PAGE - MOBILE (max-width: 767px)
   ===================================================== */
@media (max-width: 767px) {
  #crypto {
    overflow-y: auto;
    overflow-x: hidden;
  }
  #crypto .crypto-card { 
    overflow-y: auto;
    overflow-x: hidden;
    height: auto;
    max-height: none;
    padding: 10px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  #crypto .crypto-dashboard { 
    grid-template-columns: minmax(0, 1fr);
    padding: 5px;
    gap: 12px;
    height: auto;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
  }
  #crypto .crypto-left {
    gap: 10px;
  }
  #crypto .crypto-right {
    height: auto;
  }
  #crypto .crypto-badge { padding: 8px 14px; font-size: 13px; }
  #crypto .crypto-badge i { font-size: 13px; }
  #crypto .price-card-wrapper { flex: none; width: 100%; }
  #crypto .current-card.price-card { border-radius: 0 0 15px 15px; padding: 15px 15px 20px; }

  #crypto .current-crypto-row {
    flex-direction: column;
    gap: 15px;
  }
  #crypto .crypto-name { font-size: 32px; }
  #crypto .crypto-date { font-size: 16px; margin-bottom: 10px; }
  #crypto .crypto-price { font-size: 72px; }
  #crypto .crypto-price .decimal { font-size: 36px; margin-top: 10px; }
  #crypto .crypto-change-value { font-size: 20px; }
  #crypto .crypto-change-percent { font-size: 20px; padding: 6px 12px; }

  #crypto .crypto-chart-container { min-height: 100px; }
  #crypto .crypto-market-status { font-size: 14px; }

  #crypto .chart-header { 
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 9px;
  }
  #crypto .range-separator {
    padding: 0 3px;
  }
  #crypto .chart-range-toggle {
    gap: 0;
  }
  #crypto .range-btn { 
    font-size: 12px;
    padding: 4px 8px;
  }
  #crypto .coins-header { 
    flex-direction: row;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    margin-top: 5px;
    margin-bottom: 10px;
  }
  #crypto .coins-title { font-size: 16px; }
  #crypto .crypto-coins {
    margin-top: 0;
    padding-top: 0;
  }
  #crypto .crypto-coins-container {
    flex-direction: column;
  }
  #crypto .crypto-coin-card { 
    padding: 10px 0 0 0;
    flex: none;
    height: auto;
    min-height: auto;
  }
  #crypto .crypto-coin-name { font-size: 14px; margin-bottom: 5px; margin-top: 10px; }
  #crypto .cards-arrows { display: none; }
  #crypto .crypto-coin-price { font-size: 28px; margin-bottom: 5px; }
  #crypto .crypto-coin-percent { font-size: 16px; }
  #crypto .crypto-coin-sparkline { height: 40px; margin-top: 10px; margin-bottom: 10px; }

  #crypto .stats-grid { 
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    height: auto;
    gap: 8px;
  }
  #crypto .highlight-card { padding: 10px 12px 20px; }
  #crypto .highlight-label { font-size: 10px; margin-bottom: 5px; margin: -10px -12px 0 -12px; padding: 9px 12px; border-radius: 5px 5px 0 0; }
  #crypto .highlight-value { font-size: 28px; }
  #crypto .highlight-unit-inline { font-size: 14px; }
  #crypto .highlight-status { font-size: 12px; }
  #crypto #crypto-fear-greed-canvas { max-width: 120px; max-height: 75px; }
  #crypto .fear-greed-content { padding: 2px 0; }

  #crypto .coin-search input { width: 80px; font-size: 14px; }
  #crypto .search-btn { padding: 6px 10px; }
}

/* =====================================================
   CRYPTO PAGE - VERY SMALL SCREENS (max-width: 480px)
   ===================================================== */
@media (max-width: 480px) {
  #crypto {
    overflow-y: auto;
    overflow-x: hidden;
  }
  #crypto .crypto-card {
    overflow-y: auto;
    overflow-x: hidden;
    height: auto;
    max-height: none;
  }
  #crypto .crypto-price { font-size: 56px; }
  #crypto .crypto-price .decimal { font-size: 28px; }
  #crypto .crypto-name { font-size: 24px; }
  #crypto .crypto-date { font-size: 14px; }
  #crypto .highlight-value { font-size: 24px; padding-top: 20px; }
  #crypto .crypto-coin-price { font-size: 24px; }
  #crypto .coins-header { margin-bottom: 15px; }
  #crypto .crypto-coins { padding-top: 0; }
}

/* ===== Dashboard Settings Modal ===== */

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

@keyframes ds-slideUp {
  from { opacity: 0; transform: translate(-50%, -45%); }
  to { opacity: 1; transform: translate(-50%, -50%); }
}

.ds-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 10000;
  animation: ds-fadeIn 0.2s ease-out;
}

.ds-modal,
.ds-modal * {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

.ds-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 92%;
  max-width: 640px;
  max-height: 85vh;
  background: #111;
  border: var(--card-border);
  border-radius: 16px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: ds-slideUp 0.25s ease-out;
  z-index: 10001;
}

.ds-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

.ds-title {
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  margin: 0;
  letter-spacing: 0.02em;
}

.ds-close-btn {
  background: #63636329;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 22px;
  cursor: pointer;
  padding: 3px 8px;
  line-height: 1;
  border-radius: 6px;
  transition: color 0.2s ease, background 0.2s ease;
}

.ds-close-btn:hover {
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.08);
}

.ds-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 24px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.15) transparent;
}

.ds-body::-webkit-scrollbar {
  width: 6px;
}

.ds-body::-webkit-scrollbar-track {
  background: transparent;
}

.ds-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
}

/* Category Card */
.ds-category-card {
  background: rgba(255, 255, 255, 0.03);
  border: var(--card-border);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.3s ease;
  margin-bottom: 12px;
}

.ds-category-card:hover {
  border-color: rgba(255, 255, 255, 0.12);
}

.ds-category-card.disabled {
  opacity: 0.5;
}

.ds-category-header {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  cursor: pointer;
  user-select: none;
  gap: 8px;
}

.ds-category-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.ds-chevron {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.3);
  transition: transform 0.25s ease, color 0.2s ease;
  cursor: pointer;
  padding: 4px;
  margin-right: -4px;
}

.ds-chevron:hover {
  color: rgba(255, 255, 255, 0.6);
}

.ds-chevron-open {
  transform: rotate(90deg);
}

/* Reorder arrows */
.ds-reorder-btns {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  margin-right: 10px;
  flex-shrink: 0;
}

.ds-reorder-btn {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.18);
  font-size: 11px;
  cursor: pointer;
  padding: 6px 6px;
  line-height: 1;
  border-radius: 6px;
  transition: color 0.15s ease, background 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.ds-reorder-btn:hover {
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.06);
}

.ds-reorder-btn:active {
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.1);
}

.ds-reorder-hidden {
  opacity: 0;
  pointer-events: none;
}

.ds-category-icon {
  font-size: 16px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  flex-shrink: 0;
}

.ds-category-icon.home { background: rgba(148, 163, 184, 0.15); color: #94a3b8; }
.ds-category-icon.equities { background: rgba(96, 165, 250, 0.15); color: #60a5fa; }
.ds-category-icon.commodities { background: rgba(192, 192, 192, 0.15); color: #c0c0c0; }
.ds-category-icon.forex { background: rgba(239, 71, 111, 0.15); color: #ef476f; }
.ds-category-icon.crypto { background: rgba(167, 139, 250, 0.15); color: #a78bfa; }
.ds-category-icon.screener { background: rgba(250, 204, 21, 0.15); color: #facc15; }
.ds-category-icon.earnings { background: rgba(34, 211, 238, 0.15); color: #22d3ee; }
.ds-category-icon.fed_watch { background: rgba(110, 168, 254, 0.13); color: #6ea8fe; }
.ds-category-icon.bitcoin { background: rgba(247, 147, 26, 0.15); color: #f7931a; }
.ds-category-icon.weather { background: rgba(56, 189, 248, 0.10); color: #fbbf24; --fa-primary-color: #fbbf24; --fa-secondary-color: #f7931a; --fa-secondary-opacity: 1; }
.ds-category-icon.heatmap { background: rgba(255, 255, 255, 0.08); color: #34d399; --fa-primary-color: #34d399; --fa-secondary-color: #ef4444; --fa-secondary-opacity: 1; }
.ds-category-icon.market_breadth { background: rgba(96, 165, 250, 0.15); color: #60a5fa; }
.ds-category-icon.market_sentiment { background: rgba(163, 230, 53, 0.12); color: #a3e635; }
.ds-category-icon.news { background: rgba(224, 95, 58, 0.15); color: #e05f3a; }

.ds-category-name {
  font-size: 14px;
  font-weight: 500;
  color: #fff;
}

.ds-category-count {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.35);
  margin-left: 4px;
}

/* Toggle Switch */
.ds-toggle {
  position: relative;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}

.ds-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.ds-toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  transition: background 0.3s ease;
}

.ds-toggle-slider::before {
  content: '';
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.3s ease;
}

.ds-toggle input:checked + .ds-toggle-slider {
  background: #10b981;
}

.ds-toggle input:checked + .ds-toggle-slider::before {
  transform: translateX(20px);
}

/* Chips Area */
.ds-chips-area {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.35s ease;
  padding: 0 16px;
}

.ds-chips-area.expanded {
  max-height: 800px;
  padding: 0 16px 14px;
}

.ds-search-row {
  margin-bottom: 10px;
  position: relative;
}

.ds-search-input {
  width: 100%;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  font-size: 12px;
  outline: none;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}

.ds-search-input::placeholder {
  color: rgba(255, 255, 255, 0.25);
}

.ds-search-input:focus {
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.06);
}

/* Search dropdown */
.ds-search-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 100;
  max-height: 220px;
  overflow-y: auto;
  background: #1a1a1a;
  border: var(--card-border);
  border-top: none;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.ds-search-result {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  transition: background 0.15s ease;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.ds-search-result:last-child {
  border-bottom: none;
}

.ds-search-result:hover {
  background: rgba(255, 255, 255, 0.08);
}

.ds-result-symbol {
  font-weight: 700;
  color: #fff;
  font-size: 12px;
  min-width: 60px;
  letter-spacing: 0.03em;
}

.ds-result-name {
  color: rgba(255, 255, 255, 0.6);
  font-size: 11px;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ds-result-meta {
  color: rgba(255, 255, 255, 0.25);
  font-size: 10px;
  white-space: nowrap;
}

.ds-search-result-city {
  display: flex;
  align-items: center;
}

.ds-result-city-label {
  font-weight: 600;
  color: #fff;
  font-size: 12px;
  letter-spacing: 0.02em;
}

.ds-chips-toolbar {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-bottom: 10px;
  padding-top: 2px;
}

.ds-chips-toolbar a {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  text-decoration: none;
  transition: color 0.2s ease;
  letter-spacing: 0.02em;
}

.ds-chips-toolbar a:hover {
  color: rgba(255, 255, 255, 0.8);
}

.ds-chips-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.ds-chips-grid-equities { grid-template-columns: repeat(6, 1fr); }
.ds-chips-grid-commodities { grid-template-columns: repeat(6, 1fr); }
.ds-chips-grid-forex { grid-template-columns: repeat(6, 1fr); }
.ds-chips-grid-crypto { grid-template-columns: repeat(6, 1fr); }
.ds-chips-grid-screener { grid-template-columns: repeat(3, 1fr); }
.ds-chips-grid-bitcoin { grid-template-columns: repeat(3, 1fr); }
.ds-chips-grid-weather { grid-template-columns: repeat(4, 1fr); }

.ds-chip {
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
  transition: all 0.2s ease;
  user-select: none;
  letter-spacing: 0.03em;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  touch-action: manipulation;
}

.ds-chip:hover {
  transform: scale(1.05);
  border-color: rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.8);
}

.ds-chip.selected {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
  font-weight: 600;
}

.ds-chip .ds-chip-label {
  display: block;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Custom-added chips with remove button */
.ds-chip-custom {
  padding-right: 6px;
  display: flex;
  align-items: center;
}

.ds-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: 4px;
  border-radius: 50%;
  font-size: 14px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition: all 0.15s ease;
  vertical-align: middle;
}

.ds-chip-remove:hover {
  background: rgba(255, 60, 60, 0.3);
  color: #ff6b6b;
}

/* Header actions (export, import, reset icons) */
.ds-header-actions {
  display: flex;
  align-items: center;
  gap: 2px;
}

.ds-header-divider {
  width: 1px;
  height: 16px;
  background: rgba(255, 255, 255, 0.1);
  margin: 0 6px;
}

.ds-header-icon {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.3);
  font-size: 14px;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 6px;
  transition: color 0.2s ease, background 0.2s ease;
}

.ds-header-icon:hover {
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.08);
}

.ds-header-icon--danger:hover {
  color: #ff6666;
  background: rgba(255, 68, 68, 0.1);
}

/* Custom tooltips */
[data-tooltip] {
  position: relative;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #222;
  color: #eee;
  font-size: 11px;
  font-weight: 400;
  white-space: nowrap;
  padding: 5px 10px;
  border-radius: 6px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 10010;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

[data-tooltip]:hover::after {
  opacity: 1;
}

/* Auto-Rotation Section */
.ds-category-icon.rotation {
  background: rgba(107, 114, 130, 0.2);
  color: #6b7282;
}

.ds-interval-options {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  padding: 12px 16px 16px;
  transition: opacity 0.3s ease;
}

.ds-interval-options.disabled {
  opacity: 0.35;
  pointer-events: none;
}

.ds-interval-btn {
  flex: 1;
  min-width: 0;
  padding: 8px 4px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.55);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.ds-interval-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.8);
  border-color: rgba(255, 255, 255, 0.2);
}

.ds-interval-btn.active {
  background: rgba(107, 114, 130, 0.25);
  color: #fff;
  border-color: rgba(107, 114, 130, 0.5);
  font-weight: 600;
}

/* Footer */
.ds-footer {
  padding: 16px 24px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}


.ds-save-btn {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
  letter-spacing: 0.03em;
}

.ds-save-btn:hover {
  background: linear-gradient(135deg, #059669, #047857);
  box-shadow: 0 4px 20px rgba(16, 185, 129, 0.3);
  transform: translateY(-1px);
}

.ds-save-btn:active {
  transform: translateY(0);
}

/* Toast notification */
.ds-toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  padding: 12px 24px;
  border-radius: 10px;
  font-size: 13px;
  z-index: 10002;
  opacity: 0;
  transition: all 0.3s ease;
  pointer-events: none;
}

.ds-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* =====================================================================
   TECHNICAL INDICATORS — Tabs, Gauges, Full View Modal
   ===================================================================== */

/* Tab Bar */
.visual-card-tabs {
  display: flex;
  gap: 2px;
  padding: 0;
}

.visual-tab {
  flex: 1;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: none;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  letter-spacing: 0.02em;
}

.visual-tab:first-child {
  border-radius: 15px 0 0 0;
}

.visual-tab:last-child {
  border-radius: 0 15px 0 0;
}

.visual-tab:hover {
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.03);
}

.visual-tab.active {
  color: #fff;
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.06);
}

/* Tab Content */
.visual-tab-content {
  display: none;
  height: 100%;
}

.visual-tab-content.active {
  display: flex;
  flex-direction: column;
}

/* Gauges Container (inside card) */
.tech-gauges {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 4px;
  padding: 16px 8px 0;
  flex: 1;
}

.tech-gw {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.tech-gw-mid {
  border-left: 1px solid rgba(255, 255, 255, 0.06);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  padding: 0 4px;
}

.tech-gc {
  width: 100%;
  max-width: 180px;
  height: auto;
}

.tech-gs {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.02em;
  transition: color 0.4s;
  color: #94a3b8;
}

.tech-sig-buy { color: #4ade80; }
.tech-sig-sell { color: #f87171; }
.tech-sig-neutral { color: #94a3b8; }
.tech-sig-strong-buy { color: #166534; }
.tech-sig-strong-sell { color: #991b1b; }

.tech-gcs {
  display: flex;
  gap: 16px;
  font-size: 11px;
  color: #94a3b8;
}

.tech-gci {
  text-align: center;
}

.tech-l {
  font-weight: 600;
  font-size: 10px;
}

.tech-l-s { color: #ef4444; }
.tech-l-n { color: #94a3b8; }
.tech-l-b { color: #22c55e; }

.tech-v {
  font-weight: 700;
  font-size: 14px;
  color: #e2e8f0;
  margin-top: 1px;
}

.tech-gt {
  font-size: 10px;
  font-weight: 600;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-top: 2px;
}

.tech-gw-mid .tech-gt,
.tech-fv-gw:nth-child(2) .tech-gt {
  color: #f7931a;
}

/* Timeframe Toggle (card) */
.tech-tf-row {
  display: flex;
  justify-content: center;
  gap: 4px;
  padding: 8px 15px 4px;
}

.tech-tf-btn {
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 14px;
  border-radius: 4px;
  border: var(--card-border);
  background: transparent;
  color: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition: all 0.2s;
}

.tech-tf-btn:hover {
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.6);
}

.tech-tf-btn.active {
  background: rgba(247, 147, 26, 0.12);
  border-color: #f7931a;
  color: #f7931a;
}

/* Timeframe Toggle (full view popup) */
.tech-fv-tf-row {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-bottom: 24px;
}

.tech-fv-tf-btn {
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 18px;
  border-radius: 4px;
  border: var(--card-border);
  background: transparent;
  color: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition: all 0.2s;
}

.tech-fv-tf-btn:hover {
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.6);
}

.tech-fv-tf-btn.active {
  background: rgba(247, 147, 26, 0.12);
  border-color: #f7931a;
  color: #f7931a;
}

/* Full View Link */
.tech-full-view-wrap {
  text-align: center;
  padding: 25px 0;
}

.tech-full-view-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s;
  letter-spacing: 0.02em;
  padding: 10px 20px;
  border: var(--card-border);
  border-radius: 10px;
  background: transparent;
}

.tech-full-view-link:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.2);
}

/* =====================================================================
   FULL VIEW MODAL
   ===================================================================== */

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

@keyframes tech-slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.tech-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 10000;
  animation: tech-fadeIn 0.2s ease-out;
  overflow: hidden;
}

.tech-modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 94%;
  max-width: 1100px;
  max-height: 92vh;
  background: #111;
  border: var(--card-border);
  border-radius: 16px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  animation: tech-fadeIn 0.25s ease-out;
  z-index: 10001;
  -webkit-tap-highlight-color: transparent;
}

.tech-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgb(255 255 255 / 3%);
  flex-shrink: 0;
}

.tech-modal-title {
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  margin: 0;
  letter-spacing: 0.02em;
}

.tech-modal-close {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: var(--card-border);
  background: rgba(255, 255, 255, 0.04);
  color: #999;
  font-size: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.tech-modal-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.tech-modal-body {
  padding: 24px;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.tech-modal-body::-webkit-scrollbar {
  display: none;
}

/* Full View Gauges */
.tech-fv-gauges {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 8px;
  padding: 16px 12px 24px;
  margin-bottom: 20px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
}

.tech-fv-gw {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0 12px;
}

.tech-fv-gw:nth-child(2) {
  padding: 0 12px;
}

.tech-fv-gc {
  width: 230px;
  height: 125px;
}

/* Full View Tables */
.tech-fv-tables {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  width: 100%;
}

.tech-fv-section {
  flex: 1;
  min-width: 320px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  overflow: hidden;
}

.tech-fv-heading {
  display: none;
}

/* Table Rows */
.tech-rw {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  padding: 7px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  font-size: 12px;
  transition: background 0.15s;
}

.tech-rw:hover {
  background: rgba(255, 255, 255, 0.015);
}

.tech-hd {
  color: #94a3b8;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 0;
  padding: 10px 12px;
  margin-top: 0;
}

.tech-hd:hover {
  background: rgba(255, 255, 255, 0.04);
}

.tech-cn {
  color: #e2e8f0;
  text-align: left;
}

.tech-cv {
  text-align: center;
  color: #94a3b8;
}

.tech-ca {
  text-align: right;
  font-weight: 600;
  white-space: nowrap;
}

.tech-buy { color: #22c55e; }
.tech-sell { color: #ef4444; }
.tech-neutral { color: #475569; }

.tech-dim {
  opacity: 0.4;
}

/* SMALLER DESKTOP — Technical View compact fit */
@media screen and (max-height: 900px) and (min-width: 768px) {
  .tech-tf-row {
    padding: 4px 15px 2px;
  }
  .tech-gauges {
    padding: 10px 8px 0;
  }
  .tech-gc {
    max-width: 140px;
  }
  .tech-gcs {
    gap: 8px;
  }
  .tech-gs {
    font-size: 11px;
  }
  .tech-v {
    font-size: 12px;
  }
  .tech-gt {
    font-size: 9px;
    margin-top: 0;
  }
  .tech-full-view-wrap {
    padding: 6px 0 15px;
  }
  .tech-full-view-link {
    font-size: 11px;
    padding: 6px 14px;
    gap: 5px;
    border: var(--card-border);
    border-radius: 8px;
    background: transparent;
  }
}

/* =====================================================
   UNIFIED CARD INNER CONTENT (frame-* design system)
   Shared by equities, crypto, forex, commodities cards
   ===================================================== */

#equities .price-card.up,
#forex .price-card.up,
#commodities .price-card.up,
#crypto .price-card.up {
  background: linear-gradient(180deg, rgba(46, 204, 113, 0.03) 0%, rgba(46, 204, 113, 0.14) 100%);
}

#equities .price-card.down,
#forex .price-card.down,
#commodities .price-card.down,
#crypto .price-card.down {
  background: linear-gradient(180deg, rgba(231, 76, 60, 0.03) 0%, rgba(231, 76, 60, 0.14) 100%);
}

#equities .equity-index-card::before,
#forex .forex-pair-card::before,
#commodities .commodity-item-card::before,
#crypto .crypto-coin-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.06), transparent);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

.frame-card-inner {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 20px 22px 22px;
}

.frame-card-inner.up {
  background: rgb(46 204 113 / 3%);
}

.frame-card-inner.down {
  background: rgb(255 16 16 / 3%);
}

.frame-ticker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 32px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.06em;
  line-height: 1;
}

.frame-date {
  font-family: 'DM Sans', sans-serif;
  font-size: 20px;
  font-weight: 500;
  color: #6e6e76;
  margin-top: 14px;
}

.frame-price-line {
  margin-top: auto;
}

.frame-price-whole {
  font-family: 'JetBrains Mono', monospace;
  font-size: 76px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.04em;
  line-height: 1;
}

.frame-price-dec {
  font-family: 'JetBrains Mono', monospace;
  font-size: 42px;
  font-weight: 500;
  color: #6e6e76;
  vertical-align: baseline;
}

.frame-price-unit {
  font-family: 'JetBrains Mono', monospace;
  font-size: 16px;
  font-weight: 500;
  color: #6e6e76;
  margin-top: 10px;
  letter-spacing: 0.02em;
}

.frame-change-bar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: auto;
  padding: 7px 12px;
  border-radius: 9px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
}

.frame-change-bar.up {
  background: rgba(46, 204, 113, 0.18);
  color: #2ecc71;
}

.frame-change-bar.down {
  background: rgba(231, 76, 60, 0.18);
  color: #e74c3c;
}

.frame-arrow-up {
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 9px solid #2ecc71;
  flex-shrink: 0;
}

.frame-arrow-down {
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 9px solid #e74c3c;
  flex-shrink: 0;
}

.frame-change-dollars {
  font-size: 20px;
}

.frame-change-sep {
  width: 2px;
  height: 18px;
  border-radius: 1px;
}

.frame-change-bar.up .frame-change-sep {
  background: rgba(46, 204, 113, 0.35);
}

.frame-change-bar.down .frame-change-sep {
  background: rgba(231, 76, 60, 0.35);
}

.frame-change-pct {
  font-size: 18px;
  padding: 4px 10px;
  border-radius: 7px;
}

.frame-change-bar.up .frame-change-pct {
  background: rgba(46, 204, 113, 0.22);
}

.frame-change-bar.down .frame-change-pct {
  background: rgba(231, 76, 60, 0.22);
}

@media screen and (max-width: 1400px) and (max-height: 900px) {
  .frame-price-whole { font-size: 60px; }
  .frame-price-dec { font-size: 34px; }
  .frame-change-bar {
    gap: 7px;
    padding: 4px 9px;
    border-radius: 6px;
  }
  .frame-change-dollars { font-size: 14px; }
  .frame-change-pct { font-size: 12px; padding: 2px 7px; border-radius: 5px; }
  .frame-change-sep { height: 12px; }
  .frame-arrow-up { border-left-width: 4px; border-right-width: 4px; border-bottom-width: 6px; }
  .frame-arrow-down { border-left-width: 4px; border-right-width: 4px; border-top-width: 6px; }
  #equities #equity-fear-greed-canvas { max-width: 110px; max-height: 68px; }
  #equities .equity-badge { font-size: 12px; }
  #forex .forex-badge { font-size: 12px; }
  #commodities .commodity-badge { font-size: 12px; }
  #crypto .crypto-badge { font-size: 12px; }
  #crypto #crypto-fear-greed-canvas { max-width: 110px; max-height: 68px; }
  #equities .range-labels { font-size: 12px; }
  #forex .range-labels { font-size: 12px; }
  #commodities .range-labels { font-size: 12px; }
  #crypto .range-labels { font-size: 11px; }
  #weather .highlight-value { font-size: 30px; }
  #weather .weather-condition { font-size: 30px; }
}

/* ============================================================
   SCREENER DASHBOARD (shared by all 9 presets)
   ============================================================ */

#screener .screener-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  align-items: stretch;
  text-align: left;
  padding: 85px 20px 90px 20px;
  min-height: 0;
}

#screener .screener-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 20px;
}

#screener .screener-loading-spinner {
  width: 60px;
  height: 60px;
  border: 4px solid rgba(255, 255, 255, 0.1);
  border-top: 4px solid #6b7282;
  border-radius: 50%;
  animation: equities-spin 1s linear infinite;
}

#screener .screener-loading p {
  color: #888;
  font-size: 18px;
  margin: 0;
}

#screener .screener-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 15px;
  color: #ff6b6b;
  font-size: 18px;
}

#screener .screener-error i {
  font-size: 40px;
}

#screener .screener-dashboard {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

#screener .screener-table-wrap {
  flex: 1;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

#screener .screener-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 15px;
}

#screener .screener-table thead {
  position: sticky;
  top: 0;
  z-index: 2;
}

#screener .screener-table th {
  background: #1a1a1d;
  color: #888;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.5px;
  padding: 12px 10px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

#screener .screener-table th:hover {
  color: #ccc;
}

#screener .screener-table th.sort-asc::after { content: ' \25B2'; font-size: 9px; }
#screener .screener-table th.sort-desc::after { content: ' \25BC'; font-size: 9px; }

#screener .screener-table td {
  padding: 0 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  white-space: nowrap;
  vertical-align: middle;
  box-sizing: border-box;
}

#screener .screener-row {
  cursor: pointer;
  transition: background 0.15s;
}

#screener .screener-row:nth-child(odd) {
  background: rgba(255, 255, 255, 0.03);
}

#screener .screener-row:hover {
  background: rgba(255, 255, 255, 0.07);
}

#screener .screener-rank {
  color: #555;
  font-size: 13px;
  width: 35px;
}

#screener .screener-symbol {
  color: #ffae42;
  font-weight: 700;
  font-size: 15px;
}

#screener .screener-name {
  color: #ccc;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}

#screener .screener-price {
  color: #fff;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding-right: 4px;
}

#screener .screener-change {
  font-variant-numeric: tabular-nums;
}

#screener .screener-change .change-val {
  display: inline-block;
  width: 75px;
  text-align: left;
}

#screener .screener-change .change-arrow {
  display: inline-block;
  width: 14px;
  text-align: center;
}

#screener .screener-positive {
  color: #00c853;
  font-weight: 600;
}

#screener .screener-negative {
  color: #ff5252;
  font-weight: 600;
}

@keyframes screenerRowFlash {
  0%   { background: rgba(255, 255, 255, 0.12); }
  100% { background: transparent; }
}

#screener .screener-flash {
  animation: screenerRowFlash 1.5s ease-out;
}

#screener .screener-volume,
#screener .screener-mcap {
  color: #aaa;
  font-variant-numeric: tabular-nums;
}

#screener .screener-pe,
#screener .screener-fwdpe,
#screener .screener-high,
#screener .screener-low,
#screener .screener-div,
#screener .screener-shares {
  color: #aaa;
  font-variant-numeric: tabular-nums;
}

#screener .screener-rating {
  color: #aaa;
  font-size: 12px;
  white-space: nowrap;
}

#screener .screener-empty {
  text-align: center;
  color: #666;
  padding: 40px 10px;
  font-size: 16px;
}

/* Screener responsive */
@media screen and (min-width: 1921px) {
  #screener .screener-card { padding: 100px 30px 90px 30px; }
  #screener .screener-badge { font-size: 28px; padding: 14px 30px; }
  #screener .screener-count { font-size: 22px; }
  #screener .screener-table { font-size: 22px; }
  #screener .screener-table th { font-size: 16px; padding: 16px 14px; }
  #screener .screener-table td { padding: 0 14px; }
  #screener .screener-rank { font-size: 18px; }
  #screener .screener-symbol { font-size: 22px; }
  #screener .screener-rating { font-size: 16px; }
}

@media screen and (max-width: 1024px) {
  #screener .screener-card { padding: 70px 15px 70px 15px; }
  #screener .screener-badge { font-size: 15px; padding: 8px 14px; }
  #screener .screener-table { font-size: 13px; }
  #screener .screener-table th { font-size: 11px; padding: 10px 8px; }
  #screener .screener-table td { padding: 0 8px; }
  #screener .screener-name { max-width: 150px; }
  #screener .screener-rating { font-size: 11px; }
}

@media screen and (max-width: 767px) {
  #screener .screener-card { padding: 15px 10px 15px 10px; }
  #screener .screener-badge { font-size: 13px; padding: 8px 12px; }
  #screener .screener-table { font-size: 12px; table-layout: auto; }
  #screener .screener-table th { font-size: 10px; padding: 8px 6px; }
  #screener .screener-table td { padding: 0 6px; }
  #screener .screener-table-wrap { overflow-x: hidden; }
  #screener .screener-name { max-width: 100px; }
  #screener .screener-rank { display: none; }
  #screener .screener-table th:first-child { display: none; }
  #screener .screener-volume,
  #screener .screener-mcap,
  #screener .screener-pe,
  #screener .screener-fwdpe,
  #screener .screener-high,
  #screener .screener-low,
  #screener .screener-div,
  #screener .screener-shares,
  #screener .screener-rating,
  #screener .screener-table th:nth-child(n+7) { display: none; }
}

@media screen and (max-width: 767px) {
  .header-icons {
    right: 15px !important;
  }
  .frame-change-bar {
    margin-top: 20px;
  }
}

/* ============================================================
   SCREENER TICKER BAR
   ============================================================ */

#screener .screener-ticker-bar {
  display: flex;
  align-items: stretch;
  height: 34px;
  margin-bottom: 8px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  overflow: hidden;
}

#screener .screener-ticker-badge {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 14px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  white-space: nowrap;
  flex-shrink: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.07);
}

#screener .screener-ticker-badge .stb-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

#screener .screener-ticker-tape {
  flex: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-width: 0;
}

#screener .screener-ticker-track {
  display: flex;
  align-items: center;
  white-space: nowrap;
  will-change: transform;
  animation: screener-ticker-scroll linear infinite;
}

#screener .screener-ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 18px;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

#screener .screener-ticker-item .sti-sym {
  color: #cdd6e0;
  font-weight: 700;
}

#screener .screener-ticker-item .sti-price {
  color: #8b9cb0;
}

#screener .screener-ticker-item.up   .sti-chg { color: #4ade80; }
#screener .screener-ticker-item.down .sti-chg { color: #f87171; }
#screener .screener-ticker-item.flat .sti-chg { color: #8b9cb0; }

@keyframes screener-ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ============================================================
   SCREENER VISUALIZATIONS — Stats Strip, Chart, Inline Bars
   ============================================================ */

/* Stats Strip */
#screener .screener-stats-strip {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
  flex-shrink: 0;
}

#screener .screener-stat-card {
  flex: 1;
  background: rgba(255, 255, 255, 0.04);
  border: var(--card-border);
  border-radius: 10px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  overflow: hidden;
}

#screener .screener-stat-card .stat-icon {
  font-size: 28px;
  color: #444;
  flex-shrink: 0;
  width: 36px;
  text-align: center;
}

#screener .screener-stat-top-gainer .stat-icon { color: #00c853; }
#screener .screener-stat-top-loser  .stat-icon { color: #ff5252; }
#screener .screener-stat-card .screener-stat-icon-topvol { color: #ff6b35; }
#screener .screener-stat-card .screener-stat-icon-toppe  { color: #2979ff; }
#screener .screener-stat-card .screener-stat-icon-topmcap { color: #ffd600; }

#screener .screener-stat-card .stat-body {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

#screener .screener-stat-card .stat-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #888;
  margin-bottom: 2px;
  white-space: nowrap;
}

#screener .screener-stat-card .stat-symbol {
  font-size: 16px;
  color: #fff;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#screener .screener-stat-card .stat-value {
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: #ccc;
  flex-shrink: 0;
  margin-left: auto;
}


/* Volume Mini Bar */
#screener .vol-bar-bg {
  height: 3px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 2px;
  margin-top: 3px;
  overflow: hidden;
}

#screener .vol-bar-fill {
  height: 100%;
  background: rgba(160, 160, 170, 0.55);
  border-radius: 2px;
}

/* Day Range Column */
#screener .screener-range-th {
  width: 60px;
  min-width: 50px;
}

#screener .screener-range {
  width: 60px;
  min-width: 50px;
  padding: 0 6px 0 2px;
  vertical-align: middle;
}

#screener .day-range-bar {
  margin-top: 0;
}

#screener .day-range-track {
  height: 3px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  position: relative;
}

#screener .day-range-dot {
  position: absolute;
  top: -3px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ffae42;
  transform: translateX(-50%);
  box-shadow: 0 0 4px rgba(255, 174, 66, 0.6);
}

/* Responsive — large monitors (2K+) */
@media screen and (min-width: 1921px) {
  #screener .screener-stats-strip { gap: 16px; margin-bottom: 16px; }
  #screener .screener-stat-card { padding: 16px 24px; gap: 20px; }
  #screener .screener-stat-card .stat-icon { font-size: 36px; width: 44px; }
  #screener .screener-stat-card .stat-label { font-size: 15px; }
  #screener .screener-stat-card .stat-symbol { font-size: 20px; }
  #screener .screener-stat-card .stat-value { font-size: 30px; }
  #screener .day-range-dot { width: 12px; height: 12px; top: -4px; }
  #screener .day-range-track { height: 4px; }
  #screener .vol-bar-bg { height: 4px; margin-top: 4px; }
}

/* Responsive — tablet */
@media screen and (max-width: 1024px) {
  #screener .screener-stat-card .stat-icon { font-size: 22px; width: 28px; }
  #screener .screener-stat-card .stat-value { font-size: 16px; }
  #screener .screener-stat-card .stat-symbol { font-size: 13px; }
  #screener .screener-stat-card .stat-label { font-size: 10px; }
}

/* Responsive — mobile */
@media screen and (max-width: 767px) {
  #screener .screener-stats-strip { gap: 5px; margin-bottom: 6px; }
  #screener .screener-stat-card {
    display: flex;
    flex-direction: column;
    padding: 8px 10px;
    gap: 2px;
  }
  #screener .screener-stat-card .stat-icon { display: none; }
  #screener .screener-stat-card .stat-body { display: contents; }
  #screener .screener-stat-card .stat-label { font-size: 8px; }
  #screener .screener-stat-card .stat-symbol { font-size: 11px; }
  #screener .screener-stat-card .stat-value { font-size: 13px; margin-left: 0; }
  #screener .day-range-dot { width: 7px; height: 7px; top: -2px; }
}

/* ============================================================
   VIEW TABS (Live View / Technical Analysis) — Header
   ============================================================ */

.view-tabs {
  position: absolute;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 2px;
  z-index: 999;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 0 0 10px 10px;
  padding: 3px;
  padding-top: 0;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: var(--card-border);
  border-top: none;
}

.view-tab {
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  color: rgba(255, 255, 255, 0.45);
  background: transparent;
  border: none;
  border-radius: 0 0 8px 8px;
  cursor: pointer;
  transition: all 0.25s ease;
  white-space: nowrap;
  letter-spacing: 0.3px;
}

.view-tab i {
  margin-right: 6px;
  font-size: 11px;
}

.view-tab:hover {
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.06);
}

.view-tab.active {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}


/* ============================================================
   TECHNICAL ANALYSIS PAGE
   ============================================================ */

#technical-analysis .ta-card {
  overflow: hidden;
  padding: 65px 20px 70px 20px;
  align-items: stretch;
  text-align: left;
  justify-content: flex-start;
}

#technical-analysis .ta-dashboard {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

/* View sections — only one active at a time */
.ta-view-section {
  display: none;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.ta-view-section.active {
  display: flex;
}

/* Technical Analysis view: metrics + chart fill remaining space */
.ta-view-technical .ta-chart-section {
  flex: 1;
  min-height: 0;
}

.ta-view-technical .ta-plotly-chart {
  height: 100%;
  min-height: 0;
}

/* AI Analysis view: bottom-row fills the space */
.ta-view-ai .ta-bottom-row {
  flex: 1;
  min-height: 0;
  margin-bottom: 0;
  grid-template-rows: 1fr;
  align-items: stretch;
}

.ta-view-ai .ta-bottom-left,
.ta-view-ai .ta-bottom-right {
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.15) transparent;
}

.ta-view-ai .ta-section-card {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.ta-view-ai .ta-section-card .ta-analysis-content,
.ta-view-ai .ta-section-card .ta-ml-content {
  flex: 1;
  overflow-y: auto;
}


.ta-view-ai .ta-plotly-chart-small {
  flex: 1;
  min-height: 150px;
}

/* Market Regime view */
.ta-view-regime { display: none; flex: 1; min-height: 0; }
.ta-view-regime.active { display: flex; flex-direction: column; }

.ta-regime-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 16px;
  flex: 1;
  min-height: 0;
}
.ta-regime-left {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
}
.ta-regime-right {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.ta-regime-card {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.ta-regime-plot {
  flex: 1;
  min-height: 180px;
}
.ta-regime-plot-main {
  flex: 1;
  min-height: 300px;
}
.ta-regime-badge {
  font-size: 13px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 6px;
}

/* Loading state */
#technical-analysis .ta-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 20px;
}

#technical-analysis .ta-loading-spinner {
  width: 60px;
  height: 60px;
  border: 4px solid rgba(255, 255, 255, 0.1);
  border-top: 4px solid #6b7282;
  border-radius: 50%;
  animation: ta-spin 1s linear infinite;
}

@keyframes ta-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

#technical-analysis .ta-loading p {
  color: #888;
  font-size: 18px;
  margin: 0;
}

/* Error state */
#technical-analysis .ta-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 60vh;
  color: rgba(255,255,255,0.5);
  font-size: 15px;
  text-align: center;
}

#technical-analysis .ta-error i {
  font-size: 40px;
  color: #ff4444;
  margin-bottom: 15px;
}

/* ================================================================
   TA Header Row — Asset Card
   ================================================================ */
.ta-header-row {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  height: 90px;
  padding: 0 15px;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  margin-bottom: 16px;
}
.ta-header-row:hover { background: rgba(255, 255, 255, 0.06); }
.ta-header-row::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right, var(--accent, rgba(255,255,255,0.05)), transparent 55%);
}

/* ── Vertical Divider ── */
.ta-vdiv {
  width: 1px;
  height: 40px;
  background: rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
  margin: 0 20px;
}

/* ── Badge ── */
.ta-col-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  flex-shrink: 0;
}
.ta-badge {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  padding: 7px 4px;
  border-radius: 2px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid;
  white-space: nowrap;
}
.ta-badge-crypto    { color: #c97a20; background: rgba(247,147,26,0.07);  border-color: rgba(247,147,26,0.2); }
.ta-badge-equity    { color: #60a5fa; background: rgba(96,165,250,0.07);  border-color: rgba(96,165,250,0.2); }
.ta-badge-forex     { color: #c04444; background: rgba(210,60,60,0.07);   border-color: rgba(210,60,60,0.2); }
.ta-badge-commodity { color: #888;    background: rgba(200,200,200,0.07); border-color: rgba(200,200,200,0.18); }

/* ── Identity ── */
.ta-card-identity {
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0px;
  margin-right: 40px;
}
.ta-symbol {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 40px;
  color: #fff;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.ta-name {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: rgba(255,255,255,0.35);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Price ── */
.ta-card-price {
  flex: 0 0 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-right: 40px;
}
.ta-price-row {
  display: flex;
  align-items: baseline;
  gap: 3px;
  line-height: 1;
}
.ta-currency {
  font-family: 'Jost', sans-serif;
  font-size: 25px;
  font-weight: 500;
  color: rgba(255,255,255,0.5);
  margin-right: 2px;
  align-self: flex-start;
  margin-top: 2px;
}
.ta-price-int {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  font-size: 45px;
  color: #fff;
  letter-spacing: -0.01em;
  line-height: 1;
}
.ta-price-dec {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
  font-size: 30px;
  color: rgba(255,255,255,0.45);
  margin-bottom: 2px;
}

/* ── Change Group (pct + abs in one box) ── */
.ta-change-group {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  height: 56px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 0 18px;
}
.ta-change-group-divider {
  width: 1px;
  height: 30px;
  background: rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
  margin: 0 18px;
}
.ta-change-pct {
  font-family: 'JetBrains Mono', monospace;
  font-size: 25px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 5px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.ta-arrow { font-size: 20px; }

/* ── Change Absolute ── */
.ta-col-abs {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}
.ta-change-abs {
  font-family: 'JetBrains Mono', monospace;
  font-size: 20px;
  font-weight: 500;
  white-space: nowrap;
}
.ta-change-bar {
  width: 80px;
  height: 2px;
  background: rgba(255, 255, 255, 0.06);
}
.ta-change-bar-fill { height: 100%; }

/* Up / Down color states */
.ta-is-up   { color: #4ade80; }
.ta-is-down { color: #ef4444; }
.ta-is-up .ta-change-bar-fill   { background: #4ade80; }
.ta-is-down .ta-change-bar-fill { background: #ef4444; }

/* ── Stats Group ── */
.ta-stats-group {
  flex: 0 0 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  height: 56px;
  margin-left: 40px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 0 18px;
}
.ta-stat-block {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.ta-stats-divider {
  width: 1px;
  height: 30px;
  background: rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
  margin: 0 20px;
}
.ta-stat-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 15px;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.ta-stat-lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: rgba(255,255,255,0.25);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ── Timeframe Buttons ── */
.ta-tf-group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-left: auto;
}
.ta-period-toggle {
  display: flex;
  align-items: center;
  gap: 2px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  padding: 3px;
}
.ta-period-btn {
  font-family: 'JetBrains Mono', monospace;
  font-size: 20px;
  font-weight: 400;
  color: rgba(255,255,255,0.4);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 5px 9px;
  border-radius: 3px;
  letter-spacing: 0.04em;
  transition: color 0.15s, background 0.15s;
  line-height: 1;
  white-space: nowrap;
}
.ta-period-btn:hover { color: rgba(255,255,255,0.7); }
.ta-period-btn.active {
  background: rgb(255 255 255 / 20%);
  color: #d0d0d0;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Metrics row */
.ta-metrics-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.ta-metric-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 14px 16px;
  transition: all 0.3s ease;
}

.ta-metric-card:hover {
  background: rgba(255, 255, 255, 0.06);
}

.ta-metric-label {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.45);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 6px;
}

.ta-metric-value {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
}

.ta-metric-value.positive { color: #4ade80; }
.ta-metric-value.negative { color: #ff4444; }

/* Chart section */
.ta-chart-section {
  margin-bottom: 0;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  overflow: hidden;
}

.ta-plotly-chart {
  width: 100%;
  min-height: 300px;
}

.ta-plotly-chart-small {
  width: 100%;
  min-height: 300px;
  overflow: hidden;
}

/* Bottom row */
.ta-bottom-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 0;
}

/* Section cards (ML, Analysis, Company) */
.ta-section-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 18px;
  transition: all 0.3s ease;
}

.ta-section-card:hover {
  background: rgba(255, 255, 255, 0.05);
}

.ta-section-title {
  font-size: 14px;
  font-weight: 700;
  color: rgba(255,255,255,0.7);
  margin-bottom: 14px;
  padding-bottom: 17px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  letter-spacing: 0.3px;
}

.ta-section-title i {
  margin-right: 8px;
  color: #f7931a;
}

/* ML model selector in title bar */
.ta-section-title--flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ta-section-title--flex > span {
  display: flex;
  align-items: center;
}
.ta-ml-model-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  color: rgba(255,255,255,0.7);
  font-size: 11px;
  font-weight: 500;
  font-family: 'Inter', system-ui, sans-serif;
  padding: 4px 24px 4px 8px;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s ease, background 0.2s ease;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='rgba(255,255,255,0.4)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}
.ta-ml-model-select:hover {
  border-color: rgba(255,255,255,0.25);
  background-color: rgba(255,255,255,0.06);
}
.ta-ml-model-select:focus {
  border-color: rgba(247,147,26,0.5);
  box-shadow: 0 0 0 2px rgba(247,147,26,0.15);
}
.ta-ml-model-select option {
  background: #1a1a1a;
  color: rgba(255,255,255,0.8);
  padding: 6px;
}

/* ML Prediction content */
.ta-ml-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.ta-ml-loading {
  color: rgba(255,255,255,0.4);
  font-size: 13px;
  text-align: center;
  padding: 20px;
}

.ta-ml-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 8px;
  flex: 1;
  min-height: 0;
}

.ta-ml-item {
  padding: 10px;
  border-radius: 14px;
  border: var(--card-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 2px;
  min-height: 0;
  overflow: hidden;
}

.ta-ml-item-icon {
  font-size: clamp(16px, 1.8vw, 22px);
  margin-bottom: 2px;
  opacity: 0.9;
}

.ta-ml-item-label {
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.ta-ml-item-value {
  font-size: clamp(18px, 2.2vw, 27px);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.5px;
}

/* ML tile sentiment colors */
.ta-ml-green     { background: linear-gradient(135deg, rgba(34,197,94,0.18), rgba(34,197,94,0.05)); border-color: rgba(34,197,94,0.25); }
.ta-ml-green .ta-ml-item-icon { color: #22c55e; }
.ta-ml-green .ta-ml-item-value { color: #4ade80; }

.ta-ml-red       { background: linear-gradient(135deg, rgba(239,68,68,0.18), rgba(239,68,68,0.05)); border-color: rgba(239,68,68,0.25); }
.ta-ml-red .ta-ml-item-icon { color: #ef4444; }
.ta-ml-red .ta-ml-item-value { color: #f87171; }

.ta-ml-emerald   { background: linear-gradient(135deg, rgba(16,185,129,0.18), rgba(16,185,129,0.05)); border-color: rgba(16,185,129,0.25); }
.ta-ml-emerald .ta-ml-item-icon { color: #10b981; }
.ta-ml-emerald .ta-ml-item-value { color: #34d399; }

.ta-ml-pink      { background: linear-gradient(135deg, rgba(236,72,153,0.18), rgba(236,72,153,0.05)); border-color: rgba(236,72,153,0.25); }
.ta-ml-pink .ta-ml-item-icon { color: #ec4899; }
.ta-ml-pink .ta-ml-item-value { color: #f472b6; }

.ta-ml-blue      { background: linear-gradient(135deg, rgba(59,130,246,0.18), rgba(59,130,246,0.05)); border-color: rgba(59,130,246,0.25); }
.ta-ml-blue .ta-ml-item-icon { color: #3b82f6; }
.ta-ml-blue .ta-ml-item-value { color: #60a5fa; }

.ta-ml-teal      { background: linear-gradient(135deg, rgba(20,184,166,0.18), rgba(20,184,166,0.05)); border-color: rgba(20,184,166,0.25); }
.ta-ml-teal .ta-ml-item-icon { color: #14b8a6; }
.ta-ml-teal .ta-ml-item-value { color: #2dd4bf; }

.ta-ml-orange    { background: linear-gradient(135deg, rgba(249,115,22,0.18), rgba(249,115,22,0.05)); border-color: rgba(249,115,22,0.25); }
.ta-ml-orange .ta-ml-item-icon { color: #f97316; }
.ta-ml-orange .ta-ml-item-value { color: #fb923c; }

.ta-ml-accuracy {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin-top: auto;
  flex-shrink: 0;
}
.ta-ml-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 4px;
  background: rgba(255,255,255,0.03);
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.05);
}
.ta-ml-stat-label {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.ta-ml-stat-value {
  font-size: 20px;
  font-weight: 700;
  color: rgba(255,255,255,0.8);
}
/* Confidence interval subtitle below predicted price */
.ta-ml-ci-subtitle {
  font-size: 11px;
  color: rgba(255,255,255,0.35);
  text-align: center;
  margin-top: 2px;
}

/* Analysis insights */
.ta-analysis-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  overflow-y: auto;
}

.ta-sentiment-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
#ta-analysis-section > .ta-section-title--flex {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
#ta-analysis-section > .ta-section-title--flex > .ai-orb {
  justify-self: end;
}
.ta-sentiment-chip {
  font-size: 15px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 5px;
  letter-spacing: 0.3px;
}
.ta-sentiment-chip.bullish {
  background: rgba(74, 222, 128, 0.12);
  color: #4ade80;
}
.ta-sentiment-chip.bearish {
  background: rgba(255, 68, 68, 0.12);
  color: #ff4444;
}
.ta-sentiment-chip.neutral {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.5);
}

.ta-insight {
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 17px;
  line-height: 1.4;
  color: rgba(255,255,255,0.85);
  border-left: 3px solid;
  display: flex;
  align-items: center;
}

.ta-insight.bullish {
  background: rgba(74, 222, 128, 0.06);
  border-left-color: #4ade80;
}

.ta-insight.bearish {
  background: rgba(255, 68, 68, 0.06);
  border-left-color: #ff4444;
}

.ta-insight.neutral {
  background: rgba(255, 255, 255, 0.03);
  border-left-color: rgba(255,255,255,0.2);
}

/* Company info */
.ta-company-content {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  flex: 1;
  min-height: 0;
  align-content: stretch;
}

.ta-company-item {
  padding: 6px 10px;
  background: rgba(255,255,255,0.03);
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.04);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
}

.ta-company-label {
  font-size: 10px;
  font-weight: 600;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ta-company-value {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
  margin-top: 4px;
}


/* ============================================================
   TECHNICAL ANALYSIS — RESPONSIVE
   ============================================================ */

/* ── TA Header Card: tighten at smaller desktops ── */
@media screen and (max-width: 1400px) {
  .ta-vdiv { margin: 0 14px; }
  .ta-header-row { padding: 0 20px; }
  .ta-symbol { font-size: 18px; }
  .ta-name { font-size: 12px; }
  .ta-price-int { font-size: 32px; }
  .ta-currency { font-size: 15px; }
  .ta-price-dec { font-size: 14px; }
  .ta-change-pct { font-size: 16px; }
  .ta-change-abs { font-size: 14px; }
  .ta-stat-val { font-size: 14px; }
  .ta-stat-lbl { font-size: 10px; }
  .ta-period-btn { font-size: 13px; padding: 5px 7px; }
  .ta-ml-item-icon { display: none; }
  .ta-ml-stat-label { font-size: 9px; }
  .ta-ml-item-value { font-size: clamp(18px, 2.2vw, 23px); }
  .ta-insight { font-size: 12px; }
}

@media screen and (max-width: 1200px) {
  .ta-bottom-row { grid-template-columns: 1fr; }
  .ta-metrics-row { grid-template-columns: repeat(2, 1fr); }
  .ta-regime-grid { grid-template-columns: 1fr; }
}

@media screen and (max-width: 768px) {
  #technical-analysis .ta-card { padding: 65px 15px 70px 15px; }

  /* TA Header Card — mobile */
  .ta-header-row {
    height: auto;
    min-height: 0;
    padding: 14px 16px;
    flex-wrap: wrap;
    gap: 0;
    align-items: center;
    position: relative;
  }
  .ta-header-row > .ta-vdiv { display: none; }

  .ta-col-badge { order: 1; width: auto; margin-right: 24px; flex-shrink: 0; }
  .ta-badge { writing-mode: horizontal-tb; transform: none; padding: 3px 7px; }

  .ta-card-identity { order: 1; flex: 1 1 0; min-width: 0; max-width: 55%; }
  .ta-symbol { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ta-name { font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  .ta-card-price { position: absolute; top: 14px; right: 16px; text-align: right; flex-shrink: 0; }
  .ta-price-int { font-size: 26px; }
  .ta-currency { font-size: 13px; }
  .ta-price-dec { font-size: 12px; }

  .ta-col-pct { position: absolute; bottom: 14px; right: 16px; }
  .ta-change-pct { font-size: 14px; }

  .ta-col-abs { display: none !important; }
  .ta-stats-group { display: none !important; }
  .ta-stats-divider { display: none !important; }

  .ta-tf-group { order: 5; width: 100%; margin-left: 0; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.05); }
  .ta-period-toggle { width: 100%; justify-content: space-between; background: transparent; border: none; padding: 0; }
  .ta-period-btn { flex: 1; text-align: center; font-size: 13px; padding: 6px 4px; }

  /* Other TA mobile rules */
  .ta-metrics-row { grid-template-columns: 1fr 1fr; gap: 8px; }
  .ta-metric-value { font-size: 18px; }
  .ta-plotly-chart { min-height: 400px; }
  .ta-company-content { grid-template-columns: 1fr 1fr; }

  .view-tabs { display: none !important; }
  .ta-view-ai .ta-bottom-row { grid-template-columns: 1fr; }
  .ta-analysis-content { grid-template-columns: 1fr; }
}

@media screen and (max-width: 480px) {
  .ta-metrics-row { grid-template-columns: 1fr; }
  .ta-ml-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   TIER SYSTEM — Upgrade Modal, Pricing, Activation, Locks, Banner
   ═══════════════════════════════════════════════════════════════ */

/* ── Premium Lock Overlay ──────────────────────────────────── */
.premium-locked { position: relative; opacity: 0.5; }
.premium-lock-icon {
  position: absolute; top: 4px; right: 4px;
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(0,0,0,0.6); display: flex;
  align-items: center; justify-content: center; z-index: 2;
}
.premium-lock-icon i { font-size: 9px; color: #9ca3af; }

/* ── Trial Banner ──────────────────────────────────────────── */
.trial-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 8px 16px; font-size: 13px; font-weight: 500;
}
.trial-banner--warning {
  background: linear-gradient(90deg, #92400e, #b45309);
  color: #fef3c7;
}
.trial-banner--expired {
  background: linear-gradient(90deg, #991b1b, #dc2626);
  color: #fecaca;
}
.trial-banner-btn {
  background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.3);
  color: #fff; padding: 4px 14px; border-radius: 6px; font-size: 12px;
  font-weight: 600; cursor: pointer; letter-spacing: 0.5px;
}
.trial-banner-btn:hover { background: rgba(255,255,255,0.3); }
.trial-banner-close {
  background: none; border: none; color: rgba(255,255,255,0.6);
  font-size: 18px; cursor: pointer; padding: 0 4px;
}

/* ── Upgrade Modal ─────────────────────────────────────────── */
.upgrade-modal {
  display: none; position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,0.85); backdrop-filter: blur(8px);
  /* flex-start + margin:auto on the content, NOT align-items:center. Once the modal is
     taller than the viewport (it is on a phone, where the two plan cards stack) centring
     pushes the overflow out of BOTH ends, and the top half cannot be scrolled back to —
     scroll offsets do not go negative. Measured at 390x844: top -180, bottom 1024.
     Auto margins still centre it whenever there IS room, so the desktop look is
     unchanged, and it simply scrolls when there is not. */
  align-items: flex-start; justify-content: center;
  overflow-y: auto; padding: 24px;
}
.upgrade-modal.active { display: flex; }
.upgrade-modal-content {
  background: #0d0f12; border: 1px solid #1e2128;
  border-radius: 16px; max-width: 860px; width: 100%;
  padding: 36px 32px; position: relative;
  margin: auto;   /* see .upgrade-modal — centres when it fits, scrolls when it does not */
}
.upgrade-modal-close {
  position: absolute; top: 16px; right: 16px;
  /* Circular hit target. Was a bare glyph with no bounds, which made it both hard to
     aim at and easy to miss; it is now the modal's only dismiss control (the
     "Maybe later" link was removed), so it needs to read as a real button. */
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid #1e2128;
  color: #6b7280; font-size: 20px; line-height: 1;
  cursor: pointer; padding: 0;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.upgrade-modal-close:hover {
  background: rgba(255,255,255,0.12);
  border-color: #2b2f38;
  color: #fff;
}
.upgrade-modal-close:focus-visible {
  outline: 2px solid #4a5060; outline-offset: 2px;
}
.upgrade-modal-header { text-align: center; margin-bottom: 28px; }
.upgrade-modal-header h2 {
  color: #fff; font-size: 28px; font-weight: 600; margin: 0 0 8px;
}
.upgrade-feature-text {
  color: #f59e0b; font-size: 15px; margin: 0 0 4px;
  font-weight: 500;
}

.upgrade-modal-sub { color: #6b7280; font-size: 16px; margin: 0; line-height: 1.6; }

/* Keep the subtitle on ONE line wherever there is physically room for it. The string is
   ~97 characters; at 16px that needs roughly 720px of text width, so the modal was widened
   640px -> 860px (which also gives the two plan cards more room after the font bump).
   Below a 900px viewport a single line genuinely cannot fit, so it is allowed to wrap there
   rather than overflow the dialog or force a horizontal scrollbar. */
@media (min-width: 900px) {
  .upgrade-modal-sub { white-space: nowrap; }
}

/* Plans grid */
.upgrade-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; }
.upgrade-plan-card {
  background: #141619; border: 1px solid #1e2128;
  border-radius: 12px; padding: 24px; position: relative;
  /* flex column + margin-top:auto on the button pins both CTAs to the same baseline.
     Without it the button sat directly under the last feature, so the shorter card's
     button floated ~55px higher with dead space beneath it. */
  display: flex; flex-direction: column;
}
.upgrade-plan-card--popular { border-color: #f59e0b; }
.upgrade-plan-badge {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  background: #f59e0b; color: #000; font-size: 11px; font-weight: 700;
  padding: 3px 10px; border-radius: 10px; letter-spacing: 1px;
}
.upgrade-plan-name {
  color: #9ca3af; font-size: 15px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px;
}
.upgrade-plan-price { color: #fff; margin-bottom: 4px; }
.upgrade-price-dollar { font-size: 20px; vertical-align: top; }
.upgrade-price-amount { font-size: 42px; font-weight: 700; }
.upgrade-price-cents { font-size: 20px; vertical-align: top; }
.upgrade-price-period { font-size: 15px; color: #6b7280; }
.upgrade-plan-monthly-equiv { color: #6b7280; font-size: 14px; margin-bottom: 12px; }
.upgrade-plan-features {
  list-style: none; padding: 0; margin: 16px auto; text-align: left; display: inline-block;
}
.upgrade-plan-features li {
  color: #9ca3af; font-size: 15px; padding: 4px 0;
}
.upgrade-plan-features i { color: #34d399; margin-right: 8px; font-size: 12px; }
.upgrade-plan-btn {
  width: 100%; padding: 10px; border-radius: 8px; margin-top: auto;
  font-size: 15px; font-weight: 600; cursor: pointer;
  border: 1px solid #2a2f38; background: #1a1d23;
  color: #fff; letter-spacing: 0.5px; transition: background 0.2s;
}
.upgrade-plan-btn:hover { background: #2a2f38; }
.upgrade-plan-btn--primary {
  background: #fff; color: #0d0f12; border-color: #fff;
}
.upgrade-plan-btn--primary:hover { background: #e5e7eb; }

/* Device code section in modal */
.upgrade-device-section {
  border-top: 1px solid #1e2128; padding-top: 20px; text-align: center;
}
.upgrade-device-text { color: #6b7280; font-size: 13px; margin: 0 0 10px; }
.upgrade-device-input-row { display: flex; gap: 8px; max-width: 340px; margin: 0 auto; }
.upgrade-device-input {
  flex: 1; background: #141619; border: 1px solid #2a2f38;
  color: #fff; padding: 8px 12px; border-radius: 8px;
  font-size: 14px; font-family: 'Courier New', monospace;
  letter-spacing: 2px; text-transform: uppercase;
}
.upgrade-device-input::placeholder { color: #4a5060; letter-spacing: 1px; }
.upgrade-device-btn {
  background: #1a1d23; border: 1px solid #2a2f38;
  color: #fff; padding: 8px 16px; border-radius: 8px;
  font-size: 15px; font-weight: 600; cursor: pointer;
}
.upgrade-device-btn:hover { background: #2a2f38; }
.upgrade-device-msg {
  font-size: 12px; margin-top: 8px; text-align: center;
  color: #6b7280;
}
.upgrade-device-msg.error { color: #ef4444; }
.upgrade-device-msg.success { color: #34d399; }

/* .upgrade-modal-footer removed 2026-09-04 along with its "Maybe later" link — the
   circular close button, Escape, and backdrop-click are the dismiss paths now. */

/* Device promo banner */
.upgrade-device-promo {
  display: flex; align-items: center; gap: 16px;
  background: linear-gradient(135deg, rgba(247,147,26,0.08), rgba(247,147,26,0.02));
  border: 1px solid rgba(247,147,26,0.15); border-radius: 12px;
  padding: 16px 20px; margin-bottom: 24px;
}
.upgrade-device-promo-icon {
  width: 40px; height: 40px; border-radius: 10px;
  background: rgba(247,147,26,0.12);
  display: flex; align-items: center; justify-content: center;
  color: #f7931a; font-size: 18px; flex-shrink: 0;
}
.upgrade-device-promo-title { color: #fff; font-size: 14px; font-weight: 600; margin-bottom: 2px; }
.upgrade-device-promo-sub { color: #6b7280; font-size: 12px; line-height: 1.5; }
.upgrade-device-promo-btn {
  flex-shrink: 0; padding: 8px 18px; border-radius: 8px;
  background: rgba(247,147,26,0.12); border: 1px solid rgba(247,147,26,0.25);
  color: #f7931a !important; font-size: 12px; font-weight: 600;
  text-decoration: none !important; white-space: nowrap; transition: background 0.2s;
}
.upgrade-device-promo-btn:hover { background: rgba(247,147,26,0.2); }
@media screen and (max-width: 768px) {
  .upgrade-device-promo { flex-direction: column; text-align: center; }
  .upgrade-device-promo-btn { width: 100%; text-align: center; }
}

/* ── Pricing Page ──────────────────────────────────────────── */
.pricing-container {
  padding: 50px 24px 60px; box-sizing: border-box;
  max-width: 1000px; margin: 0 auto;
}
.pricing-header { text-align: center; margin-bottom: 40px; }
.pricing-header h1 { color: #fff; font-size: 28px; font-weight: 600; margin: 0 0 8px; }
.pricing-header p { color: #6b7280; font-size: 15px; margin: 0; }

.pricing-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.pricing-card {
  background: #141619; border: 1px solid #1e2128;
  border-radius: 14px; padding: 28px 20px; position: relative;
  /* flex column + margin-top:auto on the button pins every CTA to the card's bottom
     edge; they used to float directly under each card's last feature, so the four
     buttons sat at four different heights. */
  display: flex; flex-direction: column;
}
.pricing-card--popular { border-color: #f59e0b; }
.pricing-card-badge {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  background: #f59e0b; color: #000; font-size: 10px; font-weight: 700;
  padding: 3px 10px; border-radius: 10px; letter-spacing: 1px;
}
.pricing-card-name {
  color: #9ca3af; font-size: 14px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px;
}
.pricing-card-price { color: #fff; margin-bottom: 4px; }
.pricing-dollar { font-size: 18px; vertical-align: top; }
.pricing-amount { font-size: 40px; font-weight: 700; }
.pricing-cents { font-size: 18px; vertical-align: top; }
.pricing-period { font-size: 13px; color: #6b7280; }
.pricing-card-desc { color: #6b7280; font-size: 12px; margin-bottom: 16px; }
.pricing-card-equiv { color: #f59e0b; font-size: 12px; margin-bottom: 16px; font-weight: 500; }
/* inline-block so the list shrinks to its own content and is centred by the card's
   text-align, while text-align:left inside puts every tick on one vertical line.
   As a full-width block each row centred independently and the ticks staggered
   diagonally down the card. */
.pricing-features {
  list-style: none; padding: 0; margin: 0 0 20px;
  display: inline-block; text-align: left;
}
/* flex row rather than an inline icon + text: a wrapped second line used to run back
   under the tick. As a flex item the tick keeps its own column and the label hangs. */
.pricing-features li {
  color: #9ca3af; font-size: 13px; padding: 5px 0;
  display: flex; align-items: flex-start; gap: 8px; line-height: 1.45;
}
.pricing-features i { margin-right: 0; font-size: 11px; flex: 0 0 auto; margin-top: 4px; }
.pricing-features .fa-check { color: #34d399; }
.pricing-features .fa-times { color: #4a5060; }
.pricing-feature-disabled { opacity: 0.5; }
.pricing-card-btn {
  display: block; width: 100%; padding: 10px; border-radius: 8px;
  margin-top: auto;
  font-size: 13px; font-weight: 600; cursor: pointer;
  border: 1px solid #2a2f38; background: #1a1d23;
  color: #fff; text-align: center; text-decoration: none;
  letter-spacing: 0.5px; transition: background 0.2s;
}
.pricing-card-btn:hover { background: #2a2f38; }
.pricing-card-btn--primary {
  background: #fff; color: #0d0f12; border-color: #fff;
}
.pricing-card-btn--primary:hover { background: #e5e7eb; }
.pricing-card-current {
  text-align: center; color: #4a5060; font-size: 13px;
  padding: 10px; font-weight: 500;
}
.pricing-device-section { text-align: center; margin-top: 32px; color: #6b7280; font-size: 13px; }
.pricing-device-section a { color: #9ca3af; }

/* ── Activation Page ───────────────────────────────────────── */
.activate-container {
  padding: 60px 24px 80px; box-sizing: border-box;
  max-width: 480px; margin: 0 auto; text-align: center;
}
.activate-logo {
  height: 36px; margin-bottom: 24px;
  filter: brightness(0) invert(1);
}
.activate-title {
  color: #fff; font-size: 28px; font-weight: 600; margin: 0 0 12px;
}
.activate-subtitle {
  color: #6b7280; font-size: 14px; line-height: 1.6;
  margin: 0 0 32px;
}
.activate-options { text-align: left; }
.activate-option {
  background: #141619; border: 1px solid #1e2128;
  border-radius: 12px; padding: 20px; margin-bottom: 16px;
}
.activate-option h3 { color: #fff; font-size: 16px; margin: 0 0 6px; }
.activate-option p { color: #6b7280; font-size: 13px; margin: 0 0 12px; }
.activate-option-btn {
  background: #1a1d23; border: 1px solid #2a2f38;
  color: #fff; padding: 10px 20px; border-radius: 8px;
  font-size: 13px; font-weight: 600; cursor: pointer; width: 100%;
}
.activate-option-btn:hover { background: #2a2f38; }
.activate-option-btn--primary {
  background: #fff; color: #0d0f12; border-color: #fff;
}
.activate-option-btn--primary:hover { background: #e5e7eb; }
.activate-code-form { text-align: left; }
.activate-code-input {
  width: 100%; background: #0d0f12; border: 1px solid #2a2f38;
  color: #fff; padding: 10px 12px; border-radius: 8px;
  font-size: 14px; box-sizing: border-box;
}
.activate-code-input::placeholder { color: #4a5060; }
.activate-steps {
  display: flex; gap: 16px; margin-bottom: 28px;
  text-align: center;
}
.activate-step {
  flex: 1; background: #141619; border: 1px solid #1e2128;
  border-radius: 10px; padding: 16px 12px;
  color: #9ca3af; font-size: 12px; line-height: 1.5;
}
.activate-step-num {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: #1e2128; color: #fff; font-size: 12px; font-weight: 700;
  margin: 0 auto 8px;
}
.activate-hint {
  color: #4a5060; font-size: 12px; margin: 12px 0 0; line-height: 1.5;
}
.activate-footer { margin-top: 24px; }
.activate-footer-note { color: #4a5060; font-size: 13px; margin: 0 0 12px; }
.activate-footer-note a { color: #9ca3af; text-decoration: underline; }
.activate-footer-note a:hover { color: #fff; }
.activate-footer > a { color: #4a5060; font-size: 13px; text-decoration: none; }
.activate-footer > a:hover { color: #6b7280; }

@media (max-width: 480px) {
  .activate-steps { flex-direction: column; gap: 8px; }
}

/* ── Toast ─────────────────────────────────────────────────── */
.tier-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: #141619; border: 1px solid #1e2128;
  color: #fff; padding: 12px 24px; border-radius: 10px;
  font-size: 13px; font-weight: 500; z-index: 10001;
  opacity: 0; transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
}
.tier-toast--visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.tier-toast--success { border-color: #34d399; }
.tier-toast--error { border-color: #ef4444; }

/* ── Account Panel Tier Badges ─────────────────────────────── */
.acct-subscription { padding: 4px 0; }
.acct-sub-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.acct-sub-label { color: #6b7280; font-size: 13px; }
.acct-sub-trial-days { color: #f59e0b; font-size: 12px; }
.acct-sub-info { color: #6b7280; font-size: 12px; }
.acct-tier-badge {
  display: inline-block; padding: 2px 10px; border-radius: 10px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.5px;
}
.acct-tier-free { background: rgba(107,114,128,0.15); color: #9ca3af; }
.acct-tier-trial { background: rgba(245,158,11,0.15); color: #f59e0b; }
.acct-tier-device { background: rgba(52,211,153,0.15); color: #34d399; }
.acct-tier-subscriber { background: rgba(96,165,250,0.15); color: #60a5fa; }
.acct-btn-upgrade {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  color: #000 !important; border: none !important; font-weight: 700 !important;
}
.acct-btn-upgrade:hover { opacity: 0.9; }
.acct-device-section { padding: 4px 0; }

/* ── Account — Data Storage Section ─────────────────────────── */
.acct-data-section { padding: 4px 0; }
.acct-storage-badge {
  display: inline-block; padding: 3px 10px; border-radius: 9999px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.5px;
}
.acct-storage-cloud { background: rgba(52,211,153,0.15); color: #34d399; }
.acct-storage-local { background: rgba(251,191,36,0.15); color: #fbbf24; }
.acct-storage-warning {
  margin: 10px 0 4px; padding: 10px 12px; border-radius: 8px;
  background: rgba(251,191,36,0.08); border: 1px solid rgba(251,191,36,0.2);
  font-size: 12px; color: #fbbf24; line-height: 1.5;
}
.acct-storage-warning i { margin-right: 6px; }
.acct-btn-toggle-mode { font-size: 12px !important; opacity: 0.7; }
.acct-btn-toggle-mode:hover { opacity: 1; }

/* ── Responsive — Pricing ──────────────────────────────────── */
@media screen and (max-width: 768px) {
  .pricing-grid { grid-template-columns: 1fr; max-width: 380px; margin: 0 auto; }
  .upgrade-plans { grid-template-columns: 1fr; }
  .upgrade-modal-content { padding: 24px 16px; }
}

/* ============================================================
   EARNINGS CALENDAR
   ============================================================ */

#earnings .hp-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: visible;
  align-items: stretch;
  justify-content: flex-start;
  text-align: left;
  padding: 60px 20px 70px 20px;
  min-height: 0;
  box-sizing: border-box;
  position: relative;
}

.page.active#earnings { display: flex !important; }

#earnings-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Period Navigation Bar — matches .view-tabs style */
.earnings-nav {
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 2px;
  z-index: 999;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 0 0 10px 10px;
  padding: 0 3px 3px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: var(--card-border);
  border-top: none;
}
.earnings-period-btn {
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  color: rgba(255, 255, 255, 0.45);
  background: transparent;
  border: none;
  border-radius: 0 0 8px 8px;
  cursor: pointer;
  transition: all 0.25s ease;
  white-space: nowrap;
  letter-spacing: 0.3px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.earnings-period-btn:hover {
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.06);
}
.earnings-period-btn.active {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* Filter Bar */
.earnings-filter-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  flex-shrink: 0;
  flex-wrap: wrap;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

#earnings .ticker-search {
  display: flex;
  align-items: center;
  gap: 0;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 0 10px;
  height: 32px;
}
#earnings .ticker-input {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 12px;
  font-family: inherit;
  font-weight: 400;
  padding: 4px 6px;
  margin: 0;
  width: 170px;
  outline: none;
  line-height: 1;
}
#earnings .ticker-input::placeholder {
  color: rgba(255,255,255,0.35);
}
.earnings-search-icon {
  color: rgba(255,255,255,0.35);
  display: flex;
  align-items: center;
}

.earnings-filters-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.earnings-filter-chip {
  padding: 0 12px;
  height: 32px;
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  color: rgba(255,255,255,0.45);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  letter-spacing: 0.3px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
.earnings-filter-chip:hover {
  color: rgba(255,255,255,0.8);
  border-color: rgba(255,255,255,0.15);
}
.earnings-filter-chip.active {
  color: #22d3ee !important;
  background: rgba(34,211,238,0.1) !important;
  border-color: rgba(34,211,238,0.4) !important;
  display: inline-flex !important;
}

.earnings-filter-sep {
  width: 1px;
  height: 18px;
  background: rgba(255,255,255,0.08);
  flex-shrink: 0;
}

.earnings-filter-select {
  padding: 0 26px 0 10px;
  height: 32px;
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  color: rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  cursor: pointer;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='rgba(255,255,255,0.4)' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.earnings-filter-select:hover {
  border-color: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.8);
}
.earnings-filter-select option {
  background: #1a1a1d;
  color: #ccc;
}

.earnings-result-count {
  font-size: 11px;
  color: #555;
  margin-left: auto;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  height: 32px;
}

/* Loading */
.earnings-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: 20px;
}
.earnings-loading-spinner {
  width: 60px; height: 60px;
  border: 4px solid rgba(255,255,255,0.1);
  border-top: 4px solid #6b7282;
  border-radius: 50%;
  animation: equities-spin 1s linear infinite;
}
.earnings-loading p {
  color: #888;
  font-size: 18px;
  margin: 0;
  letter-spacing: 0.15em;
}

/* Error */
.earnings-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: 15px;
  color: #ff6b6b;
  font-size: 18px;
}
.earnings-error i { font-size: 40px; }

/* Day Tabs (mobile only) */
.earnings-day-tabs {
  display: none;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  gap: 6px;
  padding: 10px 15px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}
.earnings-day-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 14px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.08);
  color: #888;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s ease;
  font-family: inherit;
}
.earnings-day-tab:hover { border-color: rgba(255,255,255,0.15); color: #aaa; }
.earnings-day-tab.active {
  background: rgba(34,211,238,0.12) !important;
  border-color: #22d3ee !important;
  color: #22d3ee !important;
  display: flex !important;
}
.edt-day { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.edt-date { font-size: 11px; opacity: 0.7; }

/* Grid */
.earnings-grid {
  display: grid;
  gap: 12px;
  flex: 1;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 15px 0;
  align-content: start;
}

/* Day Column */
.earnings-day-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.earnings-day-header {
  text-align: center;
  padding: 14px 8px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.06);
  position: sticky;
  top: 0;
  z-index: 2;
}
.earnings-day-name {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.earnings-day-date { font-size: 12px; color: #888; margin-top: 2px; }
.earnings-day-count { font-size: 11px; color: #22d3ee; margin-top: 4px; font-weight: 600; }

/* Company Card */
.earnings-company-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 12px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.earnings-company-card:hover {
  border-color: rgba(34,211,238,0.3);
  background: rgba(255,255,255,0.05);
}
.ecc-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.ecc-ticker {
  font-size: 14px;
  font-weight: 700;
  color: #22d3ee;
  letter-spacing: 0.02em;
}
.ecc-timing {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 4px;
  letter-spacing: 0.05em;
}
.ecc-timing-bmo { background: rgba(251,191,36,0.15); color: #fbbf24; }
.ecc-timing-amc { background: rgba(139,111,247,0.15); color: #a78bfa; }
.ecc-mcap { font-size: 11px; color: #888; font-weight: 600; margin-left: auto; }
.ecc-name {
  font-size: 12px;
  color: #aaa;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 6px;
}
.ecc-bottom {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 12px;
  flex-wrap: wrap;
}
.ecc-price { color: #fff; font-weight: 600; }
.ecc-pe { color: #888; }
.ecc-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 6px;
}
.ecc-sector {
  font-size: 10px;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ecc-vol { font-size: 10px; color: #555; }

.earnings-positive { color: #4ade80; }
.earnings-negative { color: #f87171; }

#earnings .earnings-empty {
  text-align: center !important;
  color: #888;
  font-size: 16px;
  padding: 60px 20px;
  grid-column: 1 / -1;
}

/* Earnings responsive — Small desktop */
@media screen and (max-width: 1400px) {
  #earnings .ticker-input { width: 130px; }
}
/* Earnings responsive — TV */
@media screen and (min-width: 1921px) {
  #earnings .hp-card { padding: 100px 30px 90px 30px; }
}
/* Earnings responsive — Tablet */
@media screen and (max-width: 1024px) {
  #earnings .hp-card { padding: 70px 15px 70px 15px; }
}
/* Earnings responsive — Mobile */
@media (max-width: 768px) {
  #earnings .hp-card { padding: 15px 10px 15px 10px; }
  .earnings-nav {
    position: static;
    transform: none;
    border-radius: 8px;
    padding: 3px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    justify-content: center;
    margin-bottom: 8px;
  }
  /* 8px sides, not 10: the four period buttons measured 347px against a 344px nav, so
     "This Month" was clipped at the right edge. */
  .earnings-period-btn { padding: 6px 8px; font-size: 11px; border-radius: 6px; }
  .earnings-filter-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 8px 0;
  }
  #earnings .ticker-input { width: 100%; min-width: 0; }
  /* border-box: the search shell is width:100% with 10px of side padding, so as
     content-box it came out 358px wide inside a 338px column and the magnifier icon
     was cut off by the card edge. */
  #earnings .ticker-search { width: 100%; box-sizing: border-box; }

  /* Wrap the filters instead of scrolling them. This row was flex-wrap:nowrap with
     overflow-x:auto, but the element itself resolved to its 931px max-content width
     rather than a 338px scroll box, so the scroller never engaged and the AMC chip, all
     three dropdowns (All Cap / All P/E / All Sectors) and Reset sat past the card edge
     with no way to reach them. Wrapping puts every control on screen; width/min-width
     pin the box to the column so a stray wide child cannot stretch it again. */
  .earnings-filters-row {
    flex-wrap: wrap;
    overflow-x: visible;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    gap: 6px;
  }
  .earnings-filter-select { max-width: 100%; }

  /* Let every control grow to fill its own wrapped line, so no row ends with a ragged
     gap on the right. flex-grow distributes each line's leftover space among the items
     on THAT line, so the chips and selects widen proportionally and each row ends flush
     with the card edge. min-width:0 keeps a long option label from forcing an overflow. */
  .earnings-filters-row > * {
    flex: 1 1 auto;
    min-width: 0;
  }
  .earnings-result-count { margin-left: 0; text-align: center; }
  .earnings-day-tabs { display: flex !important; }
  .earnings-grid {
    grid-template-columns: 1fr !important;
    padding: 10px 0;
  }
  .earnings-day-col { display: none; }
  .earnings-day-col.active { display: flex !important; }
  .earnings-day-header { position: static; }
}
/* ============================================================================
 * SCREENER HOME — TradingView-style hot-list cards (added 2026-05-24)
 * Outer `.card` is UNTOUCHED (the user explicitly does not want it changed).
 * Inner 3x3 grid must fit the parent height — no scroll, no overflow.
 * ========================================================================== */
#screener .screener-dash-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, auto);   /* rows size to content — no big bottom gaps */
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
}
#screener .hl-card {
  position: relative;
  background: linear-gradient(135deg, #14161c 0%, #0d0f14 100%);
  border-radius: 12px;
  padding: 12px 14px 10px 14px;
  cursor: pointer;
  overflow: hidden;
  border: 1px solid #1f222b;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.25s ease;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  min-width: 0;
}
#screener .hl-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--accent, #4ade80);
  opacity: 0.55;
  transition: opacity 0.25s ease, width 0.2s ease;
}
#screener .hl-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent, #4ade80) 40%, #1f222b);
  box-shadow:
    0 10px 30px -10px rgba(0,0,0,0.7),
    0 0 0 1px color-mix(in srgb, var(--accent, #4ade80) 22%, transparent);
}
#screener .hl-card:hover::before {
  opacity: 1;
  width: 4px;
}
#screener .hl-card-glow {
  position: absolute;
  top: -40%; right: -25%;
  width: 70%; height: 80%;
  background: radial-gradient(closest-side, var(--accent, #4ade80) 0%, transparent 75%);
  opacity: 0.08;
  pointer-events: none;
}

/* Header */
#screener .hl-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
}
#screener .hl-card-icon {
  width: 36px; height: 36px;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--accent, #4ade80) 14%, #15171d);
  color: var(--accent, #4ade80);
  font-size: 15px;
  flex-shrink: 0;
}
#screener .hl-card-title-block { flex: 1; min-width: 0; overflow: hidden; }
#screener .hl-card-title {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#screener .hl-card-meta {
  font-size: 11px;
  color: #6b7282;
  margin-top: 2px;
}
#screener .hl-card-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  padding: 4px 8px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--pill, #4ade80) 12%, transparent);
  color: var(--pill, #4ade80);
  border: 1px solid color-mix(in srgb, var(--pill, #4ade80) 28%, transparent);
  flex-shrink: 0;
}
#screener .hl-pill-dot {
  width: 6px; height: 6px;
  background: currentColor;
  border-radius: 50%;
  box-shadow: 0 0 6px currentColor;
  animation: hl-pulse 1.4s ease-in-out infinite alternate;
}
@keyframes hl-pulse {
  from { opacity: 0.45; }
  to   { opacity: 1; }
}

/* Hero: big top mover */
#screener .hl-card-hero {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 2px 2px 6px 2px;
  border-bottom: 1px solid #1c1f27;
}
#screener .hl-hero-sym {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.4px;
  font-feature-settings: "tnum";
  line-height: 1.1;
}
#screener .hl-hero-pct {
  font-size: 16px;
  font-weight: 700;
  font-feature-settings: "tnum";
  line-height: 1.1;
}
#screener .hl-hero-pct.up   { color: #4ade80; }
#screener .hl-hero-pct.down { color: #f87171; }
#screener .hl-hero-pct.flat { color: #6b7282; }

/* Ticker rows — sized to content, no flex stretching */
#screener .hl-card-table {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
#screener .hl-row {
  display: grid;
  grid-template-columns: 16px 52px 1fr 56px;
  grid-template-rows: auto 3px;
  grid-template-areas:
    "rank sym  px  chg"
    "bar  bar  bar bar";
  align-items: center;
  gap: 0 6px;
  font-size: 12px;
  font-feature-settings: "tnum";
  padding: 2px 2px;
  border-radius: 3px;
  transition: background 0.15s ease;
}
#screener .hl-row:hover { background: rgba(255,255,255,0.025); }
#screener .hl-row-empty { opacity: 0; pointer-events: none; }
#screener .hl-row-rank {
  grid-area: rank;
  color: #4a5060;
  font-size: 10px;
  font-weight: 700;
  text-align: center;
}
#screener .hl-row-sym {
  grid-area: sym;
  color: #d8dbe2;
  font-weight: 700;
  letter-spacing: 0.2px;
}
#screener .hl-row-px {
  grid-area: px;
  color: #9aa0ab;
  text-align: left;
  font-size: 12px;
}
#screener .hl-row-chg {
  grid-area: chg;
  text-align: right;
  font-weight: 600;
  font-size: 12px;
}
#screener .hl-row-chg.up   { color: #4ade80; }
#screener .hl-row-chg.down { color: #f87171; }
#screener .hl-row-chg.flat { color: #6b7282; }
#screener .hl-row-bar {
  grid-area: bar;
  display: block;
  background: rgba(255,255,255,0.03);
  border-radius: 2px;
  overflow: hidden;
  height: 3px;
  margin-top: 3px;
}
#screener .hl-row-bar-fill {
  display: block;
  height: 100%;
  border-radius: 2px;
  transition: width 0.4s ease;
}
#screener .hl-row-bar-fill.up   { background: linear-gradient(to right, rgba(74,222,128,0.4), #4ade80); }
#screener .hl-row-bar-fill.down { background: linear-gradient(to right, rgba(248,113,113,0.4), #f87171); }
#screener .hl-row-bar-fill.flat { background: #2a2d36; }

/* Skeleton shimmer */
#screener .hl-skel .hl-skel-bar {
  display: block;
  height: 10px;
  border-radius: 4px;
  background: linear-gradient(90deg, #181a20 0%, #25282f 50%, #181a20 100%);
  background-size: 200% 100%;
  animation: hl-shimmer 1.4s linear infinite;
}
#screener .hl-skel .w50 { width: 50%; }
#screener .hl-skel .w60 { width: 60%; }
#screener .hl-skel .w70 { width: 70%; }
#screener .hl-skel .w80 { width: 80%; }
#screener .hl-skel .w90 { width: 90%; }
@keyframes hl-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* Responsive: 2 cols on smaller widths, 1 col on narrow */
@media (max-width: 1280px) {
  #screener .screener-dash-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  #screener .screener-dash-grid { grid-template-columns: 1fr; gap: 12px; padding: 12px; }
  #screener .hl-card { min-height: auto; }
}


/* Page 47 - Bitcoin Needed to Retire (heat grid) */
#page47 .retire-sub {
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: #9aa0a6;
  margin: 8px 0 10px; /* same spacing as page 36's legend row */
}
#page47 .retire-sub span { color: #f7931a; }
#page47 #retire-grid {
  width: 100%;
  height: calc(100% - 130px); /* page 36's chart height, so the title sits at the same place */
  min-height: 380px;
  padding-bottom: 56px;       /* keeps the last row above the BITCOIN / home / arrow buttons */
  box-sizing: border-box;
  display: flex;
  align-items: stretch;
}
#page47 .retire-table {
  width: 100%;
  height: 100%;
  border-collapse: separate;
  border-spacing: 5px;
  table-layout: fixed;
  font-variant-numeric: tabular-nums;
}
#page47 .retire-table th {
  color: #9aa0a6;
  font-size: 15px;
  font-weight: 700;
  padding: 4px 0 8px;
}
#page47 .retire-table .retire-corner {
  text-align: left;
  font-size: 12px;
  line-height: 1.25;
  width: 9%;
  color: #ffffff; /* "Age today" in white (owner, 2026-10-28) */
}
#page47 .retire-table .retire-corner span { display: block; color: #6b7280; font-weight: 600; }
#page47 .retire-table .retire-age {
  text-align: left;
  color: #e8eaed;
  font-size: 20px;
  padding-left: 6px;
}
#page47 .retire-table td {
  text-align: center;
  font-size: clamp(14px, 1.45vw, 24px);
  font-weight: 800;
  border-radius: 8px;
}
#page47 .retire-table td.retire-now {
  box-shadow: inset 0 0 0 3px #ffffff;
  background: #b91c1c !important; /* "Now" column in red (owner, 2026-10-28); overrides the inline heat colour */
  color: #fff !important;
}
/* The first future column (+5 years) takes the ember the "Now" column had, so it separates clearly
   from the next one (owner, 2026-10-28). */
#page47 .retire-table td.retire-next {
  background: rgb(189, 63, 12) !important;
  color: #fff !important;
}
#page47 .retire-table td.retire-none {
  color: #3f4247;
  background: #1c1d20;
  font-weight: 600;
}

/* =====================================================
   PHONES (mobile app) - bitcoin pages 11, 15, 34, 35, 37-47
   ===================================================== */
@media screen and (max-width: 767px) {
  /* Title + badge header: smaller, and the chart starts below it instead of under it */
  #page34 .price-container,
  #page37 .price-container,
  #page38 .price-container,
  #page39 .price-container,
  #page40 .price-container,
  #page41 .price-container,
  #page42 .price-container,
  #page43 .price-container,
  #page44 .price-container,
  #page45 .price-container,
  #page48 .price-container,
  #page49 .price-container {
    top: 18px;
    left: 12px;
    right: 12px;
    font-size: 22px;
    flex-wrap: wrap;
    row-gap: 4px;
  }
  #page37 .price-container {
    font-size: 18px; /* longer title: keeps title + badge on one line */
  }
  #page49 .bv49-scale {
    top: 48px;
    left: 12px;
    right: 12px;
    gap: 6px;
    font-size: 12px;
  }
  #page49 #bv49-scale-bar {
    width: 120px;
    height: 10px;
  }
  #page49 .chart-container {
    margin-top: 84px;   /* below the scale bar */
  }
  #page34 .chart-container,
  #page37 .chart-container,
  #page38 .chart-container,
  #page39 .chart-container,
  #page40 .chart-container,
  #page41 .chart-container,
  #page42 .chart-container,
  #page43 .chart-container,
  #page44 .chart-container,
  #page45 .chart-container,
  #page48 .chart-container,
  #page49 .chart-container {
    margin-top: 72px;
  }
  /* Explainer line wraps to a few rows here, so the chart starts below it */
  .card .bv-desc {
    top: 80px;   /* below the title, which wraps to two rows here */
    left: 12px;
    right: 12px;
    font-size: 12px;
  }
  #page42 .chart-container {
    margin-top: 124px;
  }

  /* Page 11: drop the Weekly Change and Total BTC columns so the table fits */
  #page11 #bitcoin-distribution-table {
    width: 100%;
    font-size: 11px;
  }
  #page11 #bitcoin-distribution-table th:nth-child(4),
  #page11 #bitcoin-distribution-table td:nth-child(4),
  #page11 #bitcoin-distribution-table th:nth-child(6),
  #page11 #bitcoin-distribution-table td:nth-child(6) {
    display: none;
  }
  #page11 .card {
    padding-left: 8px;
    padding-right: 8px;
  }
  #page11 #bitcoin-distribution-table th,
  #page11 #bitcoin-distribution-table td {
    padding: 6px 3px;
    white-space: normal;
  }
  #page11 #bitcoin-distribution-table td > span {
    padding: 3px 5px !important; /* the change pill (inline style) */
    gap: 2px !important;
  }
  #page11 .wallet-icon {
    font-size: 1.2em;
    width: 1.6em;
    height: 1.6em;
    margin-right: 4px;
  }

  /* Page 35: title, then the heatmap at full width, the cluster list under it, stats as a 2x2 grid.
     The card scrolls. */
  #page35 .card {
    padding: 62px 10px 70px;
    height: auto;
    min-height: 100%;
    overflow: visible;
  }
  #page35 .price-container {
    top: 18px;
    left: 12px;
    right: 12px;
    font-size: 22px;
  }
  #page35 #hl-body {
    flex-direction: column;
    flex: none;
    gap: 12px;
  }
  #page35 #hl-chart-wrap {
    flex: none;
    height: 360px;
  }
  #page35 #hl-cluster-list {
    width: auto;
    padding: 10px 12px;
  }
  #page35 #hl-stats-footer {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 14px;
    margin-top: 12px;
    padding: 12px 6px;
  }

  /* Page 47: 6 year columns on phones (JS), tighter cells */
  #page47 .retire-sub {
    font-size: 11px;
    padding: 0 8px;
  }
  #page47 #retire-grid {
    min-height: 0;
    padding-bottom: 64px;
  }
  #page47 .retire-table {
    border-spacing: 3px;
  }
  #page47 .retire-table th {
    font-size: 12px;
  }
  #page47 .retire-table .retire-corner {
    width: 16%;
    font-size: 10px;
  }
  #page47 .retire-table .retire-age {
    font-size: 15px;
    padding-left: 2px;
  }
  #page47 .retire-table td {
    font-size: 14px;
    border-radius: 6px;
  }
  #page47 .retire-table td.retire-now {
    box-shadow: inset 0 0 0 2px #ffffff;
  }
  /* Header: the search button (between mic and settings) made the icon row wider; tighten
     it so LIVE does not touch the FRAME logo. */
  body .header-icons { gap: 5px !important; }
  body .header-icons .date-time { font-size: 11px !important; }

  /* Financials: the Income Statement | Balance Sheet title switch fits the width */
  #technical-analysis .ta-view-financials .is-stmt-toggle {
    max-width: 100%;
  }
  #technical-analysis .ta-view-financials .is-fin-head .is-stmt-toggle button {
    font-size: 16px;
    padding: 4px 9px;
  }
  #technical-analysis .ta-view-financials .is-fin-head .is-stmt-toggle { order: 2; margin-top: 10px; }
  #technical-analysis .ta-view-financials .is-fin-head .is-quarter-lbl { order: 3; flex-basis: 100%; margin: 6px 0 0; }
  /* Financials tab body: 2 KPI columns, charts stacked (same as the standalone page under 1024px) */
  #technical-analysis .ta-view-financials #ta-fin-root { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  #technical-analysis .ta-view-financials #ta-fin-root .is-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #technical-analysis .ta-view-financials #ta-fin-root .is-charts { grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(4, 260px); flex: none; }
}

/* ── LITE MODE (html.frame-lite, set in index.php's head) ──
   Endless decorative animations rest on low-power devices: in an Android WebView any running
   animation redraws the whole screen every frame (about 0.6 of a core on the RK3576 kiosk tablet,
   2026-11-06). They show their normal still state; the ones that would look wrong frozen (a
   shimmer streak, hanging raindrops, a stuck lightning flash) are hidden. Loading skeletons and
   spinners, the screener ticker and the AI border/orb keep moving. */
html.frame-lite .flashing-dot,
html.frame-lite .flapper-flashing-dot,
html.frame-lite .live-dot,
html.frame-lite .satsusd-flashing-dot,
html.frame-lite .mayer-flashing-dot,
html.frame-lite .thank-you,
html.frame-lite .satoshi,
html.frame-lite .circle .text,
html.frame-lite .flag-container,
html.frame-lite .flame,
html.frame-lite #screener .hl-pill-dot,
html.frame-lite .ai-orb-ball,
html.frame-lite .ai-orb-rings::before,
html.frame-lite .ai-orb-rings::after,
html.frame-lite .weather-anim-layer .w-fog,
html.frame-lite .weather-anim-layer .w-mist,
html.frame-lite .weather-anim-layer .w-star,
html.frame-lite .weather-anim-layer .w-sunglow { animation: none !important; }
html.frame-lite #page1 .supply-progress::after,
html.frame-lite .weather-anim-layer .w-drop,
html.frame-lite .weather-anim-layer .w-flake,
html.frame-lite .weather-anim-layer .w-lightning { display: none !important; }