/* ---- Theme variables ---- */
:root {
  --bg: #242933;
  --card: #2e3440;
  --card-hover: #393e4a;
  --text: #eaeaea;
  --muted-1: #e0e0e0;
  --muted-2: #c0c0c0;
  --muted-3: #a0a0a0;
  --muted-4: #d0d0d0;
  --border: #444;
  --border-2: #555;

  /* Betfair-style colours */
  --back-bg: #a6d8ff;
  --back-bg-hover: #75c2fd;
  --back-text: #0b2a4a;

  --lay-bg: #fac9d1;
  --lay-bg-hover: #f694aa;
  --lay-text: #4a0b1f;

  --row-alt: rgba(255,255,255,0.02);
  --row-sep: #3b3b4a;
  --sticky: #232334;
}

/* ---- Base ---- */
body {
  font-family: Arial, sans-serif;
  padding: 1rem;
  background-color: var(--bg);
  color: var(--text);
}

/* Each tournament section */
.tournament-group { margin-bottom: 2rem; }
.tournament-title {
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
  color: var(--muted-1);
}

/* Grid of event cards */
.events-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.event-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  width: 220px;
  cursor: pointer;
  background-color: var(--card);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  transition: background-color 0.2s ease;
  filter: drop-shadow(0.5px 0.5px 2px black);
}
.event-card:hover { background-color: var(--card-hover); }
.event-title { font-weight: bold; margin-bottom: 0.25rem; color: #fff; }
.event-competition { font-size: 0.85rem; margin-bottom: 0.25rem; color: var(--muted-2); }
.event-date { font-size: 0.8rem; color: var(--muted-3); }
.market-list { margin-top: 0.5rem; padding-left: 1rem; display: none; color: var(--muted-4); }

/* Details view */
#event-details { margin-top: 1rem; }

.back-button {
  display: inline-block;
  margin-bottom: 1rem;
  padding: 0.5rem 1rem;
  background-color: var(--card);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  color: white;
  filter: drop-shadow(1px 1px black);
}
.back-button:hover { background-color: var(--card-hover); }

/* ===== Centered, constrained ladder container (CSS-only) ===== */
#markets-container {
  width: min(50vw, 960px);     /* half-page, capped */
  margin: 0 auto;              /* center horizontally */
  padding-inline: 0.5rem;      /* a touch of side padding */
}
#markets-container > h2 {
  text-align: center;
  margin: 0 0 0.5rem 0;
}
@media (max-width: 900px) {
  #markets-container {
    width: 100%;
    max-width: 100%;
  }
}

/* ---- Market table base (shared) ---------------------------------------- */
.market-table {
  /* Shared look */
  width: 100%;
  border-collapse: collapse;
  background-color: var(--card);
  table-layout: fixed;
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.6rem;
  filter: drop-shadow(1px 1px 4px black);

  /* Default column width variables (safe fallbacks) */
  --w1: 40%;
  --w2: 15%;
  --w3: 15%;
  --w4: 15%;
  --w5: 15%;
  --w6: 0%;
}

.market-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--card); /* ensure sticky header isn’t transparent */
}

.market-table th,
.market-table td {
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--border-2);
}

/* Column alignment + widths (driven by CSS vars) */
.market-table th:nth-child(1),
.market-table td:nth-child(1) {
  text-align: left;
  width: var(--w1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.market-table th:nth-child(2),
.market-table td:nth-child(2) { text-align: right; width: var(--w2); }
.market-table th:nth-child(3),
.market-table td:nth-child(3) { text-align: right; width: var(--w3); }
.market-table th:nth-child(4),
.market-table td:nth-child(4) { text-align: right; width: var(--w4); }
.market-table th:nth-child(5),
.market-table td:nth-child(5) { text-align: right; width: var(--w5); }
.market-table th:nth-child(6),
.market-table td:nth-child(6) { text-align: right; width: var(--w6); }

/* Alt row tint for readability */
.market-table tbody tr:nth-child(odd) {
  background: var(--row-alt);
}

/* Visual grouping: thin separator after each handicap pair */
.market-table tbody tr.pair-end td {
  border-bottom: 2px solid var(--row-sep);
}

/* Two-line quote tiles */
.quote-cell { padding: 0; }
.quote {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.05;
  padding: 0.38rem 0.5rem;
  min-height: 2.1rem;
  border-radius: 6px;
  user-select: none;
  cursor: pointer;
  transition: transform 0.04s ease, filter 0.1s ease, background-color 0.1s ease;
}

/* Back (blue) */
.quote-cell.back .quote {
  background: var(--back-bg);
  color: var(--back-text);
}
.quote-cell.back .quote:hover {
  background: var(--back-bg-hover);
  transform: translateY(-1px);
}

/* Lay (pink) */
.quote-cell.lay .quote {
  background: var(--lay-bg);
  color: var(--lay-text);
}
.quote-cell.lay .quote:hover {
  background: var(--lay-bg-hover);
  transform: translateY(-1px);
}

/* Two-line content */
.quote-price {
  font-weight: 700;
  font-size: 0.98rem;
}
.quote-size {
  margin-top: 2px;
  font-size: 0.78rem;
  opacity: 0.9;
}

/* ---- Table types -------------------------------------------------------- */
/* Non-handicap: 5 columns */
.market-table.non-handicap {
  /* 1: Name | 2..5: quotes/metrics */
  --w1: 40%;
  --w2: 15%;
  --w3: 15%;
  --w4: 15%;
  --w5: 15%;
  --w6: 0%;
}

/* Handicap: 6 columns */
.market-table.handicap {
  /* 1: Selection | 2..6: quotes/metrics */
  --w1: 34%;
  --w2: 13%;
  --w3: 13%;
  --w4: 13%;
  --w5: 13%;
  --w6: 14%;
}

/* ===== Compact ladder overrides ===== */
.market-table.compact { font-size: 0.95rem; }

.market-table.compact thead th {
  padding: 0.35rem 0.5rem;
  line-height: 1.1;
}

.market-table.compact th,
.market-table.compact td {
  padding: 0.3rem 0.45rem;
  border: 1px solid #555;
  line-height: 1.1;
}

/* Quote tiles: smaller padding/height */
.market-table.compact .quote {
  padding: 0.22rem 0.38rem;
  min-height: 1.55rem;
  border-radius: 5px;
}
.market-table.compact .quote-price { font-size: 0.9rem; }
.market-table.compact .quote-size  { font-size: 0.72rem; margin-top: 1px; }

/* Subtler pair separator */
.market-table.compact tbody tr.pair-end td { border-bottom: 1px solid #49495a; }

/* Denser rows alt tint */
.market-table.compact tbody tr:nth-child(odd) { background: rgba(255,255,255,0.015); }

/* Compact — override widths per type */
.market-table.compact.non-handicap {
  --w1: 38%;
  --w2: 15.5%;
  --w3: 15.5%;
  --w4: 15.5%;
  --w5: 15.5%;
}
.market-table.compact.handicap {
  --w1: 32%;
  --w2: 13.6%;
  --w3: 13.6%;
  --w4: 13.6%;
  --w5: 13.6%;
  --w6: 14.6%;
}

/* Tighten surrounding spacing in details view */
#markets-container > div { margin-bottom: 0.6rem !important; }

/* === Bulloff control (range + number) ==================================== */
:root {
  --accent: #22c55e;
  --accent-weak: #86efac;
  --thumb-shadow: rgba(34, 197, 94, 0.45);
  --track-fill-shadow: rgba(34,197,94,0.18);
}

/* Make inputs match theme */
#bulloffNumber,
#bulloffSlider,
#bulloffDisplay {
  font-family: inherit;
  color: var(--text);
}

/* Number input */
#bulloffNumber {
  background: var(--card);
  border: 1px solid var(--border-2);
  border-radius: 6px;
  padding: 0.28rem 0.45rem;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
#bulloffNumber:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--track-fill-shadow);
}

/* Range (cross-browser) */
#bulloffSlider {
  --track-h: 8px;
  --thumb-d: 18px;
  --track-bg: #3a3f4b;
  --tick: rgba(255,255,255,0.07);

  width: 100%;
  height: var(--thumb-d);
  background: transparent;
  appearance: none;
  cursor: pointer;

  /* Fallback track for Firefox using element background */
  background-image:
    linear-gradient(to right, var(--accent) 0 var(--val, 0%), var(--track-bg) var(--val, 0%) 100%),
    repeating-linear-gradient(
      to right,
      transparent 0 calc(10% - 1px),
      var(--tick) calc(10% - 1px) 10%
    );
  background-size: 100% var(--track-h), 100% var(--track-h);
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 999px;
}

/* WebKit track */
#bulloffSlider::-webkit-slider-runnable-track {
  height: var(--track-h);
  border-radius: 999px;
  background:
    linear-gradient(to right, var(--accent) 0 var(--val, 0%), var(--track-bg) var(--val, 0%) 100%),
    repeating-linear-gradient(
      to right,
      transparent 0 calc(10% - 1px),
      var(--tick) calc(10% - 1px) 10%
    );
  box-shadow:
    inset 0 0 0 1px var(--border-2),
    0 0 0 1px var(--track-fill-shadow);
}

/* WebKit thumb */
#bulloffSlider::-webkit-slider-thumb {
  appearance: none;
  width: var(--thumb-d);
  height: var(--thumb-d);
  margin-top: calc((var(--thumb-d) - var(--track-h)) / -2);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--accent-weak), var(--accent));
  border: 1px solid #0f9f42;
  box-shadow:
    0 0 0 2px rgba(0,0,0,0.35),
    0 4px 10px var(--thumb-shadow),
    inset 0 -2px 4px rgba(0,0,0,0.25);
  transition: transform 0.08s ease, box-shadow 0.15s ease, background 0.2s ease;
}
#bulloffSlider:hover::-webkit-slider-thumb { transform: scale(1.02); }
#bulloffSlider:active::-webkit-slider-thumb { transform: scale(0.98); }

/* Firefox track & thumb */
#bulloffSlider::-moz-range-track {
  height: var(--track-h);
  border-radius: 999px;
  background:
    linear-gradient(to right, var(--accent) 0 var(--val, 0%), var(--track-bg) var(--val, 0%) 100%),
    repeating-linear-gradient(
      to right,
      transparent 0 calc(10% - 1px),
      var(--tick) calc(10% - 1px) 10%
    );
  box-shadow:
    inset 0 0 0 1px var(--border-2),
    0 0 0 1px var(--track-fill-shadow);
}
#bulloffSlider::-moz-range-thumb {
  width: var(--thumb-d);
  height: var(--thumb-d);
  border-radius: 50%;
  border: 1px solid #0f9f42;
  background: radial-gradient(circle at 30% 30%, var(--accent-weak), var(--accent));
  box-shadow:
    0 0 0 2px rgba(0,0,0,0.35),
    0 4px 10px var(--thumb-shadow),
    inset 0 -2px 4px rgba(0,0,0,0.25);
  transition: transform 0.08s ease, box-shadow 0.15s ease, background 0.2s ease;
}
#bulloffSlider:hover::-moz-range-thumb { transform: scale(1.02); }
#bulloffSlider:active::-moz-range-thumb { transform: scale(0.98); }

/* Focus ring */
#bulloffSlider:focus { outline: none; }
#bulloffSlider:focus-visible::-webkit-slider-runnable-track,
#bulloffSlider:focus-visible::-moz-range-track {
  box-shadow:
    inset 0 0 0 1px var(--accent),
    0 0 0 3px var(--track-fill-shadow);
}

/* Disabled */
#bulloffSlider:disabled { cursor: not-allowed; filter: grayscale(0.2) opacity(0.7); }
#bulloffSlider:disabled::-webkit-slider-thumb,
#bulloffSlider:disabled::-moz-range-thumb {
  border-color: var(--border-2);
  box-shadow: none;
}

/* === Good-price highlight for target cells =============================== */
/* Works with classes added by JS: .is-good + .intent-back / .intent-lay */
.market-table .quote-cell { position: relative; } /* for the ::before accent bar */

.market-table .quote-cell.is-good {
  background: #e6ffed !important;                /* light green background */
  color: #065f46 !important;                      /* deep teal text for contrast */
  font-weight: 700;
  border-radius: 6px;
  box-shadow:
    inset 0 0 0 2px #22c55e,                      /* green ring */
    0 0 0 2px rgba(34,197,94,0.25);               /* soft outer glow */
}

.market-table .quote-cell.is-good .quote-price {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.market-table .quote-cell.is-good.intent-back { color: #065f46; }
.market-table .quote-cell.is-good.intent-lay  { color: #064e3b; }

/* ---- New styles based on code block ---- */
.market-block { padding: 0.6rem 0.75rem 0.8rem; background: var(--card); border:1px solid var(--border); border-radius:8px; filter: drop-shadow(1px 1px 3px black); }
.market-heading { font-weight:600; margin-bottom:0.5rem; color: var(--muted-1); }
.bulloff-controls { display:flex; gap:0.75rem; align-items:center; margin:0.25rem 0 1rem; }
.bulloff-controls label { font-weight:600; }

/* === Primary market block overrides (no card chrome) === */
.market-block.primary-market {
  background: var(--bg);
  padding: 0.25rem 0.25rem 0.4rem;
  border: none;
  box-shadow: none;
  filter: none;
}
.market-block.primary-market .market-heading {
  background: transparent;
  border: none;
  box-shadow: none;
  color: var(--text);
  font-weight: 600;
  margin-bottom: 0.35rem;
}
.market-block.primary-market .market-table {
  filter: none; /* remove drop shadow */
}
.market-block.primary-market .market-table th,
.market-block.primary-market .market-table td {
  border-color: var(--border); /* subtle border or remove by setting transparent */
}
/* Optionally remove borders entirely: uncomment if desired */
/* .market-block.primary-market .market-table th, .market-block.primary-market .market-table td { border: none; } */

/* Event summary table styling */
.event-summary-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.5rem 0 1rem;
  background: var(--card);
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
}
.event-summary-table th, .event-summary-table td {
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border-2);
  text-align: left;
  font-size: 0.85rem;
}
.event-summary-table thead th { background: var(--card-hover); }
.event-summary-table td:last-child { font-weight: 600; }

/* Event summary key/value layout */
.event-summary-wrap { display:flex; gap:1rem; align-items:flex-start; flex-wrap:wrap; margin:0.5rem 0 1rem; }
.event-summary-table.kv { width:auto; border-collapse:collapse; background:var(--card); filter:drop-shadow(0 1px 2px rgba(0,0,0,0.4)); }
.event-summary-table.kv th { text-align:right; padding:0.35rem 0.6rem; font-weight:600; color:var(--muted-2); white-space:nowrap; }
.event-summary-table.kv td { padding:0.35rem 0.6rem; border-left:1px solid var(--border-2); font-weight:500; }
.event-summary-table.kv tr { border-bottom:1px solid var(--border-2); }
.event-summary-table.kv tr:last-child { border-bottom:none; }
.pricing-trigger-btn { background:var(--accent,#22c55e); color:#fff; border:none; padding:0.55rem 0.9rem; border-radius:6px; cursor:pointer; font-weight:600; filter:drop-shadow(0 1px 2px rgba(0,0,0,0.4)); }
.pricing-trigger-btn[disabled] { background:var(--card-hover); cursor:not-allowed; opacity:0.65; }
.pricing-trigger-btn:not([disabled]):hover { background:#16a34a; }

/* Center event summary container */
#event-summary { /* center summary block and its children */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  margin: 0.75rem auto 1.25rem;
}
.event-summary-card { /* constrain card width and center */
  width: 100%;
  max-width: 640px;
  margin: 0 auto 1rem;
}
.event-summary-heading { text-align: center; letter-spacing: 0.7px; }
.event-summary-table.kv { margin: 0.25rem auto 0; }
/* Optional: narrow screens keep full width */
@media (max-width: 700px) {
  .event-summary-card { max-width: 100%; }
}

/* Burger button */
.burger { position: absolute; top: 0.75rem; right: 0.75rem; background: var(--card); color: var(--text); border:1px solid var(--border-2); padding:0.4rem 0.6rem; border-radius:6px; cursor:pointer; font-size:1.1rem; }
.burger.open { background: var(--card-hover); }
.burger:hover { background: var(--card-hover); }
/* Sidebar */
.sidebar { position: fixed; top:0; right:-280px; width:260px; height:100%; background: var(--card); box-shadow:-2px 0 6px rgba(0,0,0,0.5); padding:1rem; display:flex; flex-direction:column; gap:1rem; transition:right 0.25s ease; z-index:1000; }
.sidebar.open { right:0; }
.sidebar h3 { margin:0 0 0.5rem; font-size:1rem; color: var(--muted-1); }
.sidebar .pricing-trigger-btn { width:100%; }
/* Adjust details view to relative for burger placement */
#event-details { position: relative; }

/* Sidebar overlay */
.sidebar-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.35); backdrop-filter:blur(2px); opacity:0; pointer-events:none; transition:opacity 0.25s ease; z-index:999; }
.sidebar-overlay.visible { opacity:1; pointer-events:auto; }
.sidebar-close { background:transparent; border:none; color:var(--muted-2); font-size:1.4rem; cursor:pointer; align-self:flex-end; margin:-0.25rem -0.25rem 0.25rem 0; }
.sidebar-close:hover { color:var(--text); }
.sidebar-close:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* Event summary card */
.event-summary-card { background: var(--card); border:1px solid var(--border); border-radius:8px; padding:0.75rem 1rem 0.9rem; filter:drop-shadow(1px 1px 4px rgba(0,0,0,0.5)); width: min(50vw, 640px); margin:0 auto 1rem; }
.event-summary-heading { font-weight:600; font-size:0.95rem; letter-spacing:0.5px; margin:0 0 0.5rem; color: var(--muted-1); text-transform:uppercase; }

/* Unify handicap/non-handicap visual density (match odds look) */
.market-table.handicap, .market-table.non-handicap { font-size:0.95rem; }
.market-table.handicap thead th, .market-table.non-handicap thead th { font-size:0.72rem; letter-spacing:0.5px; text-transform:uppercase; }

/* Tighten handicap table row heights to match non-handicap */
.market-table.handicap th, .market-table.handicap td { padding:0.42rem 0.55rem; }

/* Ensure handicap quote cells mimic same tile size */
.market-table.handicap .quote { min-height:2.1rem; }

/* ---- Adjusted styles based on code block ---- */
.event-summary-card { /* adjust to full width of markets container while retaining style */
  max-width: 960px;
  width: 100%;
}
.event-summary-heading { font-size: 1.05rem; }

/* Elevate font size for summary table cells to reduce awkward small appearance */
.event-summary-table,
.event-summary-table.kv {
  font-size: 0.95rem; /* closer to body text for consistency */
  line-height: 1.25;
}
.event-summary-table.kv th { font-size: 0.95rem; }
.event-summary-table.kv td { font-size: 0.95rem; }

/* Provide a bit more horizontal breathing room */
.event-summary-table.kv th,
.event-summary-table.kv td { padding: 0.45rem 0.75rem; }

/* Slightly emphasize labels without shrinking text */
.event-summary-table.kv th { font-weight: 600; color: var(--muted-1); }
.event-summary-table.kv td { font-weight: 500; }

/* Responsive reduction only when very narrow */
@media (max-width: 600px) {
  .event-summary-table,
  .event-summary-table.kv { font-size: 0.9rem; }
  .event-summary-table.kv th,
  .event-summary-table.kv td { padding: 0.4rem 0.6rem; }
}

/* ---- New styles for event page title and info boxes ---- */
.event-page-title { text-align:center; margin:0 0 0.75rem; font-size:1.4rem; font-weight:600; letter-spacing:0.5px; }
.event-info-boxes { display:flex; gap:1rem; justify-content:center; margin:0 0 1rem; flex-wrap:wrap; }
.event-info-box { background: var(--card); border:1px solid var(--border); border-radius:8px; padding:0.55rem 0.9rem; min-width:130px; text-align:center; filter:drop-shadow(0 1px 3px rgba(0,0,0,0.4)); }
.event-info-label { font-size:0.7rem; letter-spacing:1px; text-transform:uppercase; color: var(--muted-2); margin-bottom:0.25rem; }
.event-info-value { font-size:0.95rem; font-weight:600; }

/* New styles for horizontal mini tables (event-info-tables, event-mini-table) */
.event-info-tables { display:flex; gap:1rem; justify-content:center; align-items:flex-start; margin:0 0 1rem; flex-wrap:wrap; }
.event-mini-table { border-collapse:collapse; background: var(--card); border:1px solid var(--border); border-radius:8px; overflow:hidden; min-width:120px; filter:drop-shadow(0 1px 3px rgba(0,0,0,0.4)); }
.event-mini-table th { background: var(--card-hover); padding:0.4rem 0.6rem; font-size:0.7rem; letter-spacing:1px; text-transform:uppercase; color: var(--muted-2); text-align:center; }
.event-mini-table td { padding:0.5rem 0.75rem; font-size:0.95rem; font-weight:600; text-align:center; }
@media (max-width:600px){ .event-mini-table { min-width:100px; } }

/* ---- New styles for event page title and info boxes ---- */
.event-page-title { margin:0 0 1.25rem; }
.event-info-tables { margin:0 0 1.25rem; }
.bulloff-controls { margin:0.5rem 0 1.25rem; }

/* Unify handicap layout with match odds (remove extra card chrome) */
.market-block.handicap-layout { background: var(--bg); border:none; box-shadow:none; filter:none; padding:0.25rem 0.25rem 0.6rem; }
.market-block.handicap-layout .market-heading { margin-bottom:0.35rem; color: var(--text); }
.market-block.handicap-layout .market-table.handicap { background: var(--card); filter:none; }
.market-block.handicap-layout .market-table.handicap th,
.market-block.handicap-layout .market-table.handicap td { border-color: var(--border); }
/* Remove drop shadow inside handicap table if any inherited */
.market-block.handicap-layout .market-table.handicap { box-shadow:none; }

/* Editable length mini table inputs and save button */
.event-mini-table.length-table.editing th { background: var(--accent); color:#fff; }
.event-mini-table.length-table.editing td { background: var(--card-hover); }
.length-input { width:80px; background:var(--card); border:1px solid var(--border-2); border-radius:4px; padding:0.25rem 0.4rem; color:var(--text); text-align:center; font-weight:600; }
.length-input:focus { outline:2px solid var(--accent); outline-offset:2px; }
.length-save-btn { background:var(--accent); color:#fff; border:none; padding:0.3rem 0.6rem; border-radius:4px; font-size:0.7rem; cursor:pointer; font-weight:600; }
.length-save-btn:hover { background:#16a34a; }
.length-save-btn:disabled { opacity:0.6; cursor:wait; }

/* === Diagnostics (centered intrinsic tables) === */
.diag-wrapper {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap; /* stack on narrow screens */
  gap: 2rem;
  margin: 1.25rem auto 0;
  width: 100%;
  max-width: 100%;
  overflow: visible; /* no scroll bars */
}
.diag-wrapper .diag-table {
  flex: 0 0 auto;           /* intrinsic width (sum of column widths) */
  width: auto;              /* allow table to size to content */
  table-layout: auto;       /* columns fit content */
  white-space: nowrap;      /* no wrapping in any cell */
  border-collapse: collapse;
  background: var(--card);
  filter: drop-shadow(1px 1px 3px rgba(0,0,0,0.4));
}
.diag-wrapper .diag-table thead tr:first-child th {
  background: var(--card-hover);
  font-size: 0.85rem;
  letter-spacing: 0.5px;
}
.diag-wrapper .diag-table th,
.diag-wrapper .diag-table td {
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border-2);
  text-align: left;
  font-size: 0.78rem;
  white-space: nowrap; /* enforce single line */
}
.diag-wrapper .diag-table tbody tr:nth-child(odd) { background: var(--row-alt); }

/* --- Dynamic price level cell coloring --- */
.dpl-high { background: #4b1f1f !important; color: #ffb3b3 !important; font-weight:600; }
.dpl-low  { background: #1f3d1f !important; color: #b3ffb3 !important; font-weight:600; }