:root {
  --bg-dark: #1e1e1e;        /* mall.html body bg */
  --bg-soft: #171717;        /* card bg */
  --card: #171717;
  --accent: #2f49d1;         /* primary accent */
  --text: #676767;
  --text-strong: #ffffff;
  --muted: #2e2e2e;
  --yellow: #f7b91c;
}

body { background: var(--bg-dark); color: var(--text); }
.nunito-font { font-family: 'Nunito', sans-serif; }
.navbar, .card { background: var(--card); border-color: #2e2e2e !important; }
.navbar .navbar-brand { color: #fff; }
.btn-primary { background-color: var(--accent); border-color: var(--accent); }
.btn-outline-primary { color: var(--accent); border-color: var(--accent); }
.btn-outline-primary:hover { background-color: var(--accent); color: #fff; }
.text-premium-yellow { color: var(--yellow); }
.table-dark { --bs-table-bg: #171717; --bs-table-striped-bg: #1f1f1f; --bs-table-striped-color: #cfcfcf; }

/* Mall-style utility classes */
.bg-card { background-color: var(--card) !important; }
.icon-background { background: #2d2d2d; }
.bg-details { background-color: var(--bg-dark); }
.search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); }

.chart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1rem;
}
.tv-mode .chart-grid {
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
}
.chart-card { height: 320px; }
.chart-card .card-body { height: calc(100% - 56px); }

/* TV mode: scale up UI slightly when ?tv=1 is present
   We detect via body class toggled from server by adding query param and CSS only can't detect; keep font-size large by default and provide enough spacing. */
@media (min-width: 1200px) {
  [href*='?tv=1'] body { font-size: 1.2rem; }
}

/* Flash effect for price updates: black background briefly */
.flash-black {
  background-color: #000 !important;
  transition: background-color 0.6s ease;
}
/* Keep text readable during flash */
.flash-black td, .flash-black th {
  color: #fff !important;
}

/* Collapsible chart rows spacing */
.chart-row .collapse { transition: height .2s ease; }

/* Header-only layout */
.content-header { background: #171717; }

/* TV mode styling */
.tv-mode main { padding-top: 0 !important; }
.tv-mode .chart-grid { gap: 1.25rem; }
.tv-mode .card { border-width: 0; box-shadow: none; }
.tv-mode .chart-card { height: 420px; }
.tv-mode .card-header { padding: .75rem 1rem; }
.tv-mode .card-body { padding: .5rem 1rem 1rem; }
.tv-mode { font-size: 18px; }
.tv-mode .h3, .tv-mode .h4, .tv-mode h1, .tv-mode h2, .tv-mode h3, .tv-mode h4 { font-size: 1.35rem; }
.tv-mode .btn, .tv-mode select, .tv-mode .form-select-sm { transform: scale(1.05); transform-origin: left center; }