/* ==========================================================================
   Layout and metrics are taken verbatim from the live Parimatch predictions
   lobby (logged-in capture, 2026-08-18).

   The palette is sampled from the DD Predict logo: a cool near-neutral silver
   and one vivid teal, #04d3bb at hue 173. Surfaces sit at hue 205 - the same
   lightness the old navy had, moved into the accent's family so the teal
   belongs on them rather than sitting on top of them.

   It replaces a palette taken from b9myr9.com, the site this one succeeded,
   which was a blue-violet navy with two blue accents. Nothing on the page was
   the colour of the logo.

   Yes and No were moved as part of this and the reasoning is in the tokens
   below. Every colour here was contrast-checked against all three surfaces;
   the lowest is 5.18 against a 4.5 bar.
   ========================================================================== */
:root {
  /* The detail overlay hangs off the header, so the height has to be a single
     source of truth — a hard-coded offset leaves a strip of lobby showing
     through on whichever breakpoint it does not match. */
  --header-h: 68px;

  /* Surfaces — hue 205, the accent's family */
  --background-secondary: #0a1c29;   /* page */
  --background-main: #122c3f;        /* card */
  --background-tertiary: #18364b;    /* chip / elevated */
  --background-header: #0c2232;
  --field-background: #16344a;
  /* A card lit up, not a different card. The old value for this was left
     behind by the repaint and sat at hue 221 while the card moved to 205, so
     hovering changed the hue instead of the lightness and looked like the
     card had turned a different colour. Same hue, one step brighter. */
  --background-hover: #183952;

  /* Text */
  --text-title: #eceff1;
  --text-body: #90a4ae;
  /* Was only ever a fallback inside var(--text-secondary, #8b93a7) and the
     token itself was never defined anywhere - so the fallback was the real
     value, and nothing could restyle it. Defined now, and cooled to 205. */
  --text-secondary: #92a2ad;
  --text-primary: #04d3bb;           /* percentages, active nav, chart — the logo teal */
  --field-placeholder: rgba(236, 239, 241, .55);

  /* Outcome buttons */
  /* Yes and No, moved off the accent.
     The teal landed 28 degrees from the old green and 33 from the old
     blue, and the percentage sits between the two buttons on every card -
     three meanings inside 64 degrees, where somebody decides a stake. The
     old No was also the old accent exactly, so it meant nothing any more.
     45 degrees apart now, minimum. Both buttons carry their own word, so
     colour reinforces rather than carries. */
  --text-outcome-up: #34d149;        /* Yes */
  --text-outcome-down: #ff8173;      /* No  */
  --control-disabled: #24445a;
  --text-disable: #ffffff33;

  /* Chips */
  --chips-background-default: #18364b;
  --chips-background-selected: #04d3bb2e;
  --chips-text-default: #cfd8dc;
  --chips-text-selected: #04d3bb;
  --radius-chips: 16px;

  /* Brand */
  --background-badge: #04d3bb;
  --text-inversion: #ffffff;
  --success: #04d3bb;
  /* Lifted from #e5484d, which only reached 3.68 against a card - an error
     message is body text and 4.5 is the bar. Pushed to hue 350 as well, so a
     failure and a No outcome are not the same colour on the same screen. */
  --danger: #ff73a6;

  /* Metrics */
  --size-4: 4px; --size-6: 6px; --size-8: 8px; --size-12: 12px; --size-14: 14px;
  --radius-field: 28px;   /* --radius-advanced-field-regular-default on the original */

  --font: Inter, -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI",
          "Oxygen", "Ubuntu", "Cantarell", "Open Sans", "Helvetica Neue", Arial, sans-serif;
}

/* Typography scale (site's own classes) */
.title-1-semibold   { font-weight: 500; font-size: 24px; line-height: 30px; }
.body-semibold      { font-weight: 700; font-size: 16px; line-height: 18px; letter-spacing: -.16px; }
.caption-1-regular  { font-weight: 400; font-size: 12px; line-height: 16px; letter-spacing: -.24px; }
.caption-1-semibold { font-weight: 600; font-size: 12px; line-height: 16px; letter-spacing: -.24px; }
.caption-1-medium   { font-weight: 500; font-size: 12px; line-height: 16px; letter-spacing: .4px; }
.chips-text         { font-weight: 400; font-size: 14px; line-height: 18px; }

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Elements below set their own display, which would otherwise beat [hidden]. */
[hidden] { display: none !important; }
html, body {
  background: var(--background-secondary);
  color: var(--text-title);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}
button, input { font-family: inherit; }

/* ==========================================================================
   Header
   ========================================================================== */
.header {
  background: var(--background-header);
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h);
}
.header__inner {
  max-width: 1920px; margin: 0 auto; height: 100%;
  display: flex; align-items: center; gap: 24px; padding: 0 24px;
}
.burger {
  background: none; border: none; cursor: pointer; padding: 4px;
  display: flex; flex-direction: column; gap: 4px;
}
.burger span { width: 18px; height: 2px; background: #fff; border-radius: 2px; }

.logo {
  display: flex; align-items: center; text-decoration: none;
  min-width: 0; flex-shrink: 0;
}
/* Served at 2x so it stays sharp on retina; width follows from the aspect. */
.logo__img { display: block; height: 32px; width: auto; }

.nav { display: flex; align-items: center; gap: 4px; }
.nav__item {
  display: flex; align-items: center; gap: 7px;
  background: none; border: none; cursor: pointer;
  color: var(--text-title); font-size: 15px; font-weight: 500;
  padding: 8px 14px; border-radius: 8px; white-space: nowrap;
  transition: color .15s, background .15s;
}
.nav__item:hover { background: #ffffff0f; }
.nav__item.is-active { color: var(--text-primary); }
.nav__item svg { width: 18px; height: 18px; flex-shrink: 0; }

.header__spacer { flex: 1; }
.header__tools { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.icon-btn {
  position: relative; background: none; border: none; cursor: pointer;
  color: #fff; width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 8px; transition: background .15s;
}
.icon-btn:hover { background: #ffffff14; }
.icon-btn svg { width: 21px; height: 21px; }
.icon-btn__badge {
  position: absolute; top: -3px; right: -6px;
  background: var(--danger); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 1;
  padding: 3px 5px; border-radius: 8px; min-width: 18px; text-align: center;
}
.lang { display: flex; align-items: center; gap: 6px; color: var(--text-title); font-size: 14px; font-weight: 500; }
.lang__flag { width: 22px; height: 16px; border-radius: 3px; object-fit: cover; }

.balance {
  display: flex; align-items: center; gap: 8px;
  background: var(--background-tertiary); border-radius: 999px;
  padding: 7px 12px 7px 8px; cursor: pointer;
  color: #fff; font-size: 15px; font-weight: 600; border: none;
}
.balance__coin {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--background-badge); color: #04231f;
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
}
.balance__caret { color: var(--text-body); font-size: 10px; }

/* ---- the wallet: method picker, the office's accounts, copy ---- */
.wmeth { display: flex; gap: 6px; margin: 0 0 14px; }
.wmeth__opt {
  flex: 1; background: var(--background-tertiary); border: 1px solid #ffffff1f;
  border-radius: 10px; color: var(--text-body); cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 600; padding: 10px;
}
.wmeth__opt.is-on { background: var(--chips-background-selected); border-color: var(--text-primary); color: var(--text-primary); }

/* One of the office's accounts. A card, because a member reads it off while
   holding their phone in the other hand. */
.wacct {
  background: var(--background-tertiary); border: 1px solid #ffffff1f;
  border-radius: 12px; padding: 12px 14px; margin: 0 0 10px; cursor: pointer;
}
.wacct.is-on { border-color: var(--text-primary); }
.wacct__pick { display: block; font-size: 11px; font-weight: 700; letter-spacing: .3px;
  text-transform: uppercase; color: var(--text-primary); margin-bottom: 8px; }
.wacct:not(.is-on) .wacct__pick { color: var(--field-placeholder); }
.wacct__row { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.wacct__k { color: var(--text-body); font-size: 12px; min-width: 62px; }
.wacct__v { color: var(--text-title); font-size: 14px; font-weight: 600; flex: 1; word-break: break-all; }
.wacct__note { color: var(--text-body); font-size: 12px; margin: 8px 0 0; }

.wcopy {
  background: #ffffff14; border: 0; border-radius: 8px; color: var(--text-title);
  cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; padding: 6px 10px;
  flex-shrink: 0;
}
.wcopy:hover { background: var(--text-primary); color: var(--background-secondary); }

/* Lit while a deposit or withdrawal is waiting on the office. Amber, not the
   accent: the accent means "ours", this means "not yet". */
.balance__pending {
  width: 8px; height: 8px; border-radius: 50%;
  background: #e8a44a;
  box-shadow: 0 0 0 2px var(--background-tertiary);
  animation: pulse 1.6s infinite;
}

.deposit {
  display: flex; align-items: center; gap: 7px;
  background: var(--success); color: #04170f; border: none;
  border-radius: 999px; padding: 10px 18px;
  font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap;
  transition: filter .15s;
}
.deposit:hover { filter: brightness(1.1); }

/* ==========================================================================
   Page
   ========================================================================== */
.page { max-width: 1500px; margin: 0 auto; padding: 24px 24px 96px; }
.page__title { margin-bottom: 16px; color: var(--text-title); }

.section { width: 100%; display: flex; flex-direction: column; gap: var(--size-12); }

/* Category chips */
.chips {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  padding-bottom: 2px;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  width: max-content; flex-shrink: 0;
  background: var(--chips-background-default);
  border: none; border-radius: var(--radius-chips); cursor: pointer;
  height: 32px; padding: 0 var(--size-12);
  display: flex; align-items: center; justify-content: center;
  color: var(--chips-text-default);
  transition: background-color .3s cubic-bezier(.4, 0, .2, 1);
  white-space: nowrap;
}
.chip:hover { background: #ffffff1f; }
.chip.is-active { background: var(--chips-background-selected); color: var(--chips-text-selected); }

/* Search field */
.field { position: relative; width: 100%; }
.field__icon {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; color: #9e9ea0; pointer-events: none;
}
.field__input {
  width: 100%; height: 56px;
  background: var(--field-background); border: none; outline: none;
  border-radius: var(--radius-field); color: #fff;
  padding: 0 48px 0 52px; font-size: 15px;
}
.field__input::placeholder { color: var(--field-placeholder); }
.field__clear {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: #9e9ea0; cursor: pointer;
  width: 22px; height: 22px; display: none; place-items: center; font-size: 18px;
}
.field__input:not(:placeholder-shown) ~ .field__clear { display: grid; }

/* Status dropdown + live indicator row */
.subhead { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dropdown {
  display: flex; align-items: center; gap: 8px;
  background: var(--background-tertiary); border: none; cursor: pointer;
  border-radius: var(--radius-chips); height: 32px; padding: 0 12px;
  color: var(--text-title);
}
.dropdown__caret { color: #9e9ea0; font-size: 9px; }
.subhead__spacer { flex: 1; }

.feed { display: flex; align-items: center; gap: 6px; color: var(--text-body); white-space: nowrap; }
.feed__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-disable); flex-shrink: 0; }
.feed[data-state="live"]    { color: var(--text-outcome-up); }
.feed[data-state="live"] .feed__dot    { background: var(--text-outcome-up); animation: pulse 1.6s infinite; }
.feed[data-state="loading"] .feed__dot { background: #e8a44a; animation: pulse .8s infinite; }
.feed[data-state="error"]   { color: var(--danger); }
.feed[data-state="error"] .feed__dot   { background: var(--danger); }
@keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: .3 } }

.ghost-btn {
  background: #ffffff26; border: none; color: #fff; cursor: pointer;
  border-radius: var(--radius-chips); height: 32px; padding: 0 14px;
  font-size: 12px; font-weight: 600; transition: background .15s;
}
.ghost-btn:hover { background: #ffffff40; }
.ghost-btn--lg {
  height: 40px; padding: 0 20px; border-radius: 999px;
  font-size: 14px; font-weight: 700; letter-spacing: .3px;
}

/* ==========================================================================
   Market grid — exact geometry from the original
   ========================================================================== */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  align-items: stretch;
  gap: 12px;
}

.card {
  display: flex; flex-direction: column; justify-content: space-between;
  gap: var(--size-8); padding: var(--size-12);
  border-radius: var(--size-8); background: var(--background-main);
  height: 200px; cursor: pointer;
  min-width: 0;   /* grid items default to min-width:auto and refuse to shrink */
}
.card:hover { background: var(--background-hover); }

.card__head { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 8px; }
.card__img { width: 40px; height: 40px; border-radius: 4px; object-fit: cover; flex-shrink: 0; }
.card__title-wrap { display: flex; align-items: center; min-width: 0; }
.card__title {
  color: var(--text-title);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card__vol { color: var(--text-body); }

/* Options list — scrolls inside the fixed-height card */
.options {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 160px; overflow-y: scroll;
}
.options::-webkit-scrollbar { width: 4px; }
.options::-webkit-scrollbar-track { background: transparent; }
.options::-webkit-scrollbar-thumb { background: var(--text-body); border-radius: 2px; }

.opt { display: flex; align-items: center; gap: 8px; min-width: 0; }
.opt__name {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--text-title);
}
.opt__pct { color: var(--text-primary); flex-shrink: 0; border-radius: 3px; }
/* Flash an outcome whose price moved on the last refresh */
.opt__pct.is-up   { animation: flash-up 1.4s ease-out; }
.opt__pct.is-down { animation: flash-down 1.4s ease-out; }
@keyframes flash-up {
  0%   { background: color-mix(in srgb, var(--text-outcome-up) 45%, transparent); color: var(--text-outcome-up); }
  100% { background: transparent; color: var(--text-primary); }
}
@keyframes flash-down {
  0%   { background: color-mix(in srgb, var(--danger) 45%, transparent); color: #ffc2d4; }
  100% { background: transparent; color: var(--text-primary); }
}

.opt__btns { display: flex; gap: 4px; flex-shrink: 0; }
.opt-btn {
  flex: 1; width: 64px; border: none; border-radius: var(--size-8);
  padding: var(--size-14) var(--size-6); cursor: pointer;
  transition: filter .15s;
}
/* First child = Yes (up), second = No (down) — the original keys off position */
.opt-btn:nth-child(1) { background-color: color-mix(in srgb, var(--text-outcome-up) 25%, transparent); color: var(--text-outcome-up); }
.opt-btn:nth-child(2) { background-color: color-mix(in srgb, var(--text-outcome-down) 25%, transparent); color: var(--text-outcome-down); }
.opt-btn:not(:disabled):hover { filter: brightness(1.35); }
.opt-btn:disabled { background-color: var(--control-disabled); color: var(--text-disable); cursor: not-allowed; }

/* Binary market card (gauge + Buy Yes/No) */
.card--binary .card__head { align-items: center; }
.gauge { margin-left: auto; text-align: center; flex-shrink: 0; }
.gauge__value { color: var(--text-title); margin-top: -20px; font-weight: 600; font-size: 13px; }
.gauge__label { color: var(--text-body); font-size: 10px; line-height: 14px; }
.card__buy { display: flex; gap: 8px; margin-top: auto; }
.buy-btn {
  flex: 1; border: none; border-radius: var(--size-8);
  padding: var(--size-14) var(--size-6); cursor: pointer;
  font-weight: 700; font-size: 16px; line-height: 18px; letter-spacing: -.16px;
  transition: filter .15s;
}
.buy-btn:nth-child(1) { background-color: color-mix(in srgb, var(--text-outcome-up) 25%, transparent); color: var(--text-outcome-up); }
.buy-btn:nth-child(2) { background-color: color-mix(in srgb, var(--text-outcome-down) 25%, transparent); color: var(--text-outcome-down); }
.buy-btn:not(:disabled):hover { filter: brightness(1.35); }
/* Without this a blocked binary market looks perfectly clickable and simply
   does nothing when tapped. */
.buy-btn:disabled {
  background-color: var(--control-disabled);
  color: var(--text-disable);
  cursor: not-allowed;
}

/* Infinite-scroll sentinel */
.load-more { height: 40px; }

/* ==========================================================================
   Event detail — opened by clicking a card
   ========================================================================== */
.detail[hidden] { display: none; }
.detail {
  position: fixed; inset: var(--header-h) 0 0; z-index: 45;
  background: var(--background-secondary);
  overflow-y: auto;
}
.detail__inner { max-width: 1100px; margin: 0 auto; padding: 20px 24px 96px; }

.detail__back {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; cursor: pointer;
  color: var(--text-primary); font-size: 14px; font-weight: 600;
  padding: 8px 0; margin-bottom: 16px;
}
.detail__back:hover { text-decoration: underline; }

.detail__head { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.detail__img { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.detail__headtext { flex: 1; min-width: 0; }
.detail__title { font-size: 26px; line-height: 32px; font-weight: 700; color: var(--text-title); }
.detail__gauge { text-align: center; flex-shrink: 0; }
.detail__gauge .gauge__value { font-size: 16px; }

/* Stat blocks — TOTAL VOL. / 24H VOL. / START DATE / END DATE */
.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px; margin-bottom: 20px;
}
.stat { background: var(--background-main); border-radius: var(--size-8); padding: 14px 16px; }
.stat__label {
  color: var(--text-body); font-size: 11px; font-weight: 500;
  letter-spacing: .6px; text-transform: uppercase;
}
.stat__value { color: var(--text-title); font-size: 18px; font-weight: 700; margin-top: 4px; }

.detail__body { display: grid; grid-template-columns: 1fr 340px; gap: 20px; align-items: start; }
.detail__main, .detail__side { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

.panel { background: var(--background-main); border-radius: var(--size-8); padding: 16px; }
.panel__title { font-size: 14px; font-weight: 700; color: var(--text-title); margin-bottom: 10px; }
.panel__text { color: var(--text-body); font-size: 13px; line-height: 1.65; white-space: pre-wrap; }
.panel__text--scroll { max-height: 300px; overflow-y: auto; }

/* Price chart */
.chart-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.chart-panel__title { font-size: 14px; font-weight: 700; color: var(--text-title); }
.ranges { display: flex; gap: 4px; }
.range {
  background: var(--background-tertiary); border: none; cursor: pointer;
  color: var(--text-body); border-radius: 8px;
  padding: 5px 10px; font-size: 11px; font-weight: 600;
}
.range:hover { color: var(--text-title); }
.range.is-active { background: var(--chips-background-selected); color: var(--chips-text-selected); }
.chart { position: relative; }
.chart svg { width: 100%; height: 100%; display: block; overflow: visible; }
.chart__empty, .chart__loading {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--text-body); font-size: 13px;
}
.chart__grid line { stroke: #ffffff10; stroke-width: 1; }
.chart__axis { fill: var(--text-body); font-size: 10px; }
.chart__line { fill: none; stroke: var(--text-primary); stroke-width: 2; stroke-linejoin: round; }
.chart__area { fill: url(#chartFill); }
.chart__last { fill: var(--text-primary); }

/* FAQ */
.faq__item { border-bottom: 1px solid #ffffff0d; }
.faq__item:last-child { border-bottom: none; }
.faq__q {
  width: 100%; background: none; border: none; cursor: pointer; text-align: left;
  color: var(--text-title); font-size: 14px; font-weight: 600;
  padding: 14px 28px 14px 0; position: relative;
}
.faq__q::after {
  content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  color: var(--text-primary); font-size: 18px; font-weight: 400;
}
.faq__item.is-open .faq__q::after { content: '−'; }
.faq__a { color: var(--text-body); font-size: 13px; line-height: 1.65; padding: 0 0 14px; }
.faq__item:not(.is-open) .faq__a { display: none; }

.detail__outcomes { padding: 4px 16px 12px; }
.detail__outcomes-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 0 10px; border-bottom: 1px solid #ffffff12;
  color: var(--text-body); font-size: 12px;
}
.detail__outcomes-head span:first-child { flex: 1; }
.detail__col-chance { width: 56px; text-align: right; }
.detail__col-actions { width: 132px; }

.detail-opt {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid #ffffff0d;
}
.detail-opt:last-child { border-bottom: none; }
.detail-opt__name { flex: 1; min-width: 0; color: var(--text-title); font-size: 14px; }
.detail-opt__pct {
  width: 56px; text-align: right; flex-shrink: 0;
  color: var(--text-primary); font-size: 15px; font-weight: 600; border-radius: 3px;
}
.detail-opt__pct.is-up   { animation: flash-up 1.4s ease-out; }
.detail-opt__pct.is-down { animation: flash-down 1.4s ease-out; }
.detail-opt__btns { display: flex; gap: 6px; width: 132px; flex-shrink: 0; }
.detail-opt__btns .opt-btn { width: 63px; }

.detail__rules { background: var(--background-main); border-radius: var(--size-8); padding: 16px; }
.detail__rules-title { font-size: 14px; font-weight: 700; color: var(--text-title); margin-bottom: 8px; }
.detail__rules-text {
  color: var(--text-body); font-size: 13px; line-height: 1.6;
  white-space: pre-wrap; max-height: 420px; overflow-y: auto;
}

@media (max-width: 900px) {
  .detail { inset: 56px 0 0; }
  .detail__inner { padding: 14px 12px 90px; }
  .detail__title { font-size: 20px; line-height: 26px; }
  .detail__img { width: 48px; height: 48px; }
  .detail__body { grid-template-columns: 1fr; }
  .detail__gauge { display: none; }
}

/* ==========================================================================
   Empty state
   ========================================================================== */
.empty { text-align: center; padding: 90px 0; }
.empty__icon { font-size: 38px; margin-bottom: 12px; opacity: .7; }
.empty__title { color: var(--text-title); font-size: 16px; font-weight: 600; }
.empty__hint { color: var(--text-body); font-size: 13px; margin-top: 6px; }

/* ==========================================================================
   Bet slip
   ========================================================================== */
/* `hidden` must beat the layout display values below */
/* [hidden] must beat the layout display values these elements set. */
.slip[hidden], .slip-overlay[hidden], .toast[hidden], .empty[hidden],
.feed[hidden], .chart__legend[hidden] { display: none; }

.slip-overlay { position: fixed; inset: 0; background: #000000a6; z-index: 90; }
.slip {
  position: fixed; top: 0; right: 0; bottom: 0; width: 360px; max-width: 92vw;
  background: var(--background-main); z-index: 100;
  padding: 20px; display: flex; flex-direction: column; gap: 14px;
  box-shadow: -8px 0 40px #000000a0;
}
.slip__head { display: flex; align-items: center; justify-content: space-between; }
.slip__title { font-size: 18px; font-weight: 700; color: #fff; }
.slip__close {
  border: none; background: #ffffff1a; color: #fff; cursor: pointer;
  width: 30px; height: 30px; border-radius: 8px; font-size: 17px;
}
.slip__market { color: var(--text-body); font-size: 13px; line-height: 1.4; }
.slip__pick {
  background: var(--background-tertiary); border-radius: var(--size-8); padding: 14px;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  color: var(--text-title); font-size: 14px;
}
.slip__side { font-weight: 700; white-space: nowrap; }
.slip__side--yes { color: var(--text-outcome-up); }
.slip__side--no  { color: var(--text-outcome-down); }
.slip__label { color: var(--text-body); font-size: 12px; }
.slip__stake {
  width: 100%; background: var(--field-background); border: 1px solid #ffffff1a;
  border-radius: var(--radius-field); color: #fff; padding: 13px 14px; font-size: 16px; outline: none;
}
.slip__stake:focus { border-color: var(--text-primary); }
.slip__chips { display: flex; gap: 6px; }
.slip__chip {
  flex: 1; background: #ffffff14; border: none; color: var(--text-title);
  border-radius: 8px; padding: 8px 0; font-size: 12px; font-weight: 600; cursor: pointer;
}
.slip__chip:hover { background: #ffffff26; }
.slip__row { display: flex; justify-content: space-between; font-size: 13px; color: var(--text-body); }
.slip__row strong { color: var(--text-primary); font-size: 16px; }
/* The profit line sits under the return it is part of, so it is quieter
   than the rows above rather than another one of them. */
.slip__row--sub { font-size: 12px; opacity: .72; margin-top: -4px; }
.slip__confirm {
  display: block; width: 100%; border: none; border-radius: var(--size-8);
  cursor: pointer; text-align: center; text-decoration: none;
  background: var(--background-badge); color: var(--text-inversion);
  padding: 15px; font-size: 15px; font-weight: 700; margin-top: auto;
  transition: filter .15s;
}
.slip__confirm:hover { filter: brightness(1.12); }
.slip__login {
  display: block; text-align: center; color: var(--text-primary);
  font-size: 13px; text-decoration: none; padding: 2px 0;
}
.slip__login:hover { text-decoration: underline; }
.slip__note { color: var(--text-disable); font-size: 11px; line-height: 1.5; }
.slip__note code { color: var(--text-body); }

/* Toast */
.toast {
  position: fixed; left: 50%; bottom: 34px; transform: translateX(-50%);
  background: var(--background-tertiary); color: var(--text-title); border-left: 3px solid var(--text-outcome-up);
  border-radius: var(--size-8); padding: 13px 20px; font-size: 14px;
  z-index: 200; box-shadow: 0 8px 28px #000000a0;
}

/* ==========================================================================
   Mobile — matches the captured 390px layout
   ========================================================================== */

@media (max-width: 900px) {
  :root { --header-h: 56px; }
  /* Must stay off <body>: overflow on the body box makes it the scroll
     container and silently kills position:sticky on the header. */
  html { overflow-x: hidden; }

  .header__inner { padding: 0 10px; gap: 8px; }
  .nav, .burger, .lang, .icon-btn--search, .icon-btn--chat { display: none; }
  .logo__img { height: 24px; }
  .header__spacer { flex: 1; }
  .header__tools { gap: 8px; }

  /* Chips and the status row must scroll, never widen the page */
  .subhead { flex-wrap: wrap; row-gap: 8px; }
  .subhead__spacer { display: none; }
  .feed { font-size: 11px; }

  /* Card, options list and outcome buttons keep their desktop geometry —
     the original has no mobile overrides for them, the grid just folds to
     one column. Only the percentage gets a fixed gutter so long candidate
     names cannot push the buttons around. */
  .opt__pct { min-width: 30px; text-align: right; }
  .deposit { padding: 8px 14px; font-size: 12px; }
  .ghost-btn--lg { height: 34px; padding: 0 14px; font-size: 12px; }
  .deposit span { display: inline; }
  .balance { padding: 6px 10px 6px 6px; font-size: 14px; }

  /* 24 at the foot, not 90. The larger figure was clearance for a fixed bottom
     bar that has been removed; left behind it is a band of empty page under the
     last card on every phone. */
  .page { padding: 16px 12px 24px; }
  .page__title { font-size: 22px; line-height: 28px; }
  .field__input { height: 52px; }
  .grid { grid-template-columns: 1fr; }   /* card keeps its 200px height */

  .slip { width: 100%; max-width: 100%; top: auto; height: 88vh; border-radius: 16px 16px 0 0; }
}

/* --- Detail top bar: back arrow + category, matching the original --- */
.detail__bar {
  display: flex; align-items: center; gap: 8px;
  height: 48px; margin: -20px -24px 12px; padding: 0 12px;
  border-bottom: 1px solid #ffffff12; position: relative;
}
.detail__back {
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  color: var(--text-title); width: 34px; height: 34px; border-radius: 8px;
  padding: 0; margin: 0;
}
.detail__back:hover { background: #ffffff14; text-decoration: none; }
.detail__bartitle {
  position: absolute; left: 50%; transform: translateX(-50%);
  color: var(--text-title); font-size: 15px; font-weight: 600;
}

/* --- Chart: right-hand 0-100 axis, dotted grid, multi-series legend --- */
/* Plot box has the fixed height; the legend flows beneath it, inside the panel. */
.chart__plot { position: relative; height: 250px; }
.chart__grid line { stroke: #ffffff1f; stroke-width: 1; stroke-dasharray: 3 5; }
.chart__line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart__legend {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px;
  margin-top: 10px;
}
.legend__item {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--text-body); font-size: 12px;
}
.legend__item i { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* Range pills sit alone on their row now that the chart has no title */
.chart-panel__head { justify-content: flex-start; }
.range { padding: 6px 12px; border-radius: 999px; font-size: 12px; }

@media (max-width: 900px) {
  .detail__bar { margin: -14px -12px 10px; }
  .chart__plot { height: 220px; }
  .ranges { flex-wrap: wrap; }
}

/* --- Chart hover: crosshair, per-series dots, readout panel --- */
.chart__plot { cursor: crosshair; }
.chart__crosshair { stroke: #ffffff59; stroke-width: 1; stroke-dasharray: 4 4; }
.chart__dot { stroke: var(--background-main); stroke-width: 2; }
.chart__tip {
  position: absolute; z-index: 3; pointer-events: none;
  background: var(--background-tertiary);
  border: 1px solid #ffffff1f; border-radius: 10px;
  padding: 10px 12px; min-width: 160px;
  box-shadow: 0 8px 24px #00000073;
}
.chart__tip-date {
  color: var(--text-title); font-size: 12px; font-weight: 700; margin-bottom: 7px;
}
.chart__tip-row {
  display: flex; align-items: center; gap: 7px;
  color: var(--text-body); font-size: 12px; line-height: 1.7; white-space: nowrap;
}
.chart__tip-row i { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

@media (max-width: 900px) {
  .chart__plot { cursor: default; }
  .chart__tip { min-width: 140px; padding: 8px 10px; }
}

/* --- Settled markets: result label in place of the outcome buttons --- */
.result {
  display: inline-flex; align-items: center; justify-content: center;
  width: 132px; border-radius: var(--size-8);
  padding: var(--size-14) var(--size-6);
  font-weight: 600; white-space: nowrap;
}
.opt__btns .result { width: 132px; }
.result--won {
  background-color: color-mix(in srgb, var(--text-outcome-up) 25%, transparent);
  color: var(--text-outcome-up);
}
.result--lost { background: var(--control-disabled); color: var(--text-disable); }
.result--wide { width: 100%; flex: 1; font-size: 15px; }

@media (max-width: 900px) {
  .result, .opt__btns .result { width: 108px; }
}

/* --- Odds format switch: Malay / HK / Indo / Decimal / % --- */
.odds-picker {
  display: flex; gap: 2px; flex-shrink: 0;
  background: var(--background-tertiary);
  border-radius: var(--radius-chips); padding: 3px;
}
.odds-opt {
  background: none; border: none; cursor: pointer;
  color: var(--text-body); border-radius: 13px;
  padding: 0 10px; height: 26px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
  transition: background .15s, color .15s;
}
.odds-opt:hover { color: var(--text-title); }
.odds-opt.is-active { background: var(--chips-background-selected); color: var(--chips-text-selected); }

@media (max-width: 900px) {
  .odds-picker { padding: 2px; }
  .odds-opt { padding: 0 8px; height: 24px; font-size: 11px; }
}

/* --- Sandbox login --- */
.login[hidden], .login-overlay[hidden] { display: none; }
.login {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 340px; max-width: 92vw; z-index: 110;
  background: var(--background-main); border-radius: 12px; padding: 20px;
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 18px 50px #000000a6;
}
.login__head { display: flex; align-items: center; justify-content: space-between; }
.login__title { font-size: 17px; font-weight: 700; color: #fff; }
.login__hint { color: var(--text-body); font-size: 12px; }
.login__err { color: var(--danger); font-size: 12.5px; }
.login__err[hidden] { display: none; }

/* --- My bets drawer --- */
.slip--wide { width: 400px; }
.pipcount {
  display: inline-grid; place-items: center; margin-left: 7px;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--text-primary); color: var(--background-secondary);
  border-radius: 999px; font-size: 11px; font-weight: 700;
}
.mb__summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mb__stat {
  background: var(--background-tertiary); border-radius: var(--size-8);
  padding: 10px 12px; display: flex; flex-direction: column; gap: 3px;
}
.mb__stat span { color: var(--text-body); font-size: 11px; }
.mb__stat b { font-size: 15px; font-weight: 700; }
.is-up { color: var(--text-outcome-up); }
.is-down { color: var(--danger); }

.mb__tabs { display: flex; gap: 4px; background: var(--background-tertiary); border-radius: 999px; padding: 4px; }
.mb__tab {
  flex: 1; background: none; border: none; cursor: pointer;
  color: var(--text-body); border-radius: 999px; padding: 7px 0;
  font-size: 13px; font-weight: 600;
}
.mb__tab.is-active { background: var(--chips-background-selected); color: var(--chips-text-selected); }

.mb__list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.mb__empty { color: var(--text-body); font-size: 13px; text-align: center; padding: 30px 10px; line-height: 1.6; }

.mb__bet {
  background: var(--background-tertiary); border-radius: var(--size-8);
  padding: 12px; display: flex; flex-direction: column; gap: 7px;
}
.mb__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.mb__market {
  color: var(--text-title); font-size: 13px; font-weight: 600; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mb__status {
  flex-shrink: 0; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  padding: 3px 8px; border-radius: 5px; letter-spacing: .4px;
}
.mb__status--open { background: #ffffff1a; color: var(--text-body); }
.mb__status--won { background: color-mix(in srgb, var(--text-outcome-up) 25%, transparent); color: var(--text-outcome-up); }
.mb__status--lost { background: color-mix(in srgb, var(--danger) 22%, transparent); color: #ffc2d4; }
.mb__status--void { background: #ffffff14; color: var(--text-disable); }

.mb__pick { display: flex; align-items: center; gap: 8px; color: var(--text-title); font-size: 12.5px; }
.mb__pick > span:nth-child(2) { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb__odds { color: var(--text-primary); font-weight: 700; font-size: 13px; }
.mb__foot { display: flex; align-items: center; gap: 14px; color: var(--text-body); font-size: 12px; }
.mb__foot b { color: var(--text-title); font-weight: 600; }
.mb__pl { margin-left: auto; font-weight: 700; font-size: 13px; }
.mb__when { color: var(--text-disable); font-size: 11px; }

.mb__logout { display: none; }

@media (max-width: 900px) {
  .slip--wide { width: 100%; }
  .mb__summary { grid-template-columns: repeat(3, 1fr); }
}

/* --- Cash out --- */
.mb__cash {
  align-self: flex-start; border: none; cursor: pointer;
  background: #ffffff1a; color: var(--text-title);
  border-radius: 7px; padding: 7px 13px;
  font-size: 12.5px; font-weight: 600; font-family: inherit;
  transition: background .15s, color .15s;
}
.mb__cash:hover:not(:disabled) { background: #ffffff2e; }
.mb__cash:disabled { opacity: .6; cursor: default; }
.mb__cash.is-quoted {
  background: color-mix(in srgb, var(--text-outcome-up) 25%, transparent);
  color: var(--text-outcome-up);
}
.mb__quote { color: var(--text-body); font-size: 11.5px; }
.mb__status--sold { background: #ffffff1f; color: var(--text-title); }

/* Stake limits, stated before the bet rather than after it is refused. */
.slip__limit {
  margin: 8px 0 0; font-size: 12px; line-height: 1.45;
  color: var(--text-secondary);
}
.slip__limit.is-warn { color: var(--danger); }
.slip__confirm.is-off { opacity: .45; pointer-events: none; }
.slip--void #slipPayout, .slip--void #slipReturn { opacity: .35; }

@media (max-width: 420px) { .logo__img { height: 20px; } }

/* Scroll lock while the detail overlay is up. The lock has to sit on <html>:
   overflow on <body> alone still leaves the document scrolling underneath. */
html.is-locked, html.is-locked body { overflow: hidden; }

/* Logged in, the mobile header ran to 459px against a 390px screen and the page
   scrolled sideways — which also drags a sticky header out of view. Log out
   moves into the My bets panel, where it is still one tap away. */
@media (max-width: 560px) {
  .header__tools { gap: 8px; }
  #logoutBtn { display: none; }
  .mb__logout { display: block; width: 100%; margin-top: 12px; }
  /* DEPOSIT becomes a "+" on the green pill. The header has run past the
     viewport before with fewer buttons than this. */
  #depositBtn .btn__wide   { display: none; }
  #depositBtn .btn__narrow { display: inline; }
  #depositBtn { padding: 8px 12px; }
}

/* ==========================================================================
   The sign-up menu
   ========================================================================== */

/* Anchored to the header rather than to the button.
 *
 * position:absolute against .header__inner, not the button: the button is
 * inside a flex row that reflows at three breakpoints, and a menu hung off it
 * moves with every one of them. The header is the thing that stays put. */
.header__inner { position: relative; }

.authmenu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 60;
  width: 340px;
  max-width: calc(100vw - 24px);
  background: #fff;
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 12px 40px #00000038, 0 2px 8px #00000024;
}

.authmenu__title {
  text-align: center;
  color: #111;
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 16px;
}

.authbtn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%;
  border-radius: 10px;
  cursor: pointer;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  padding: 13px 16px;
  margin-bottom: 10px;
  transition: filter .15s, background .15s;
}

.authbtn--dark  { background: #111; color: #fff; border: 1px solid #111; }
.authbtn--dark:hover  { filter: brightness(1.35); }
.authbtn--light { background: #fff; color: #111; border: 1px solid #d7d9dd; }
.authbtn--light:hover { background: #f4f5f7; }

.authbtn[disabled] { opacity: .55; cursor: default; filter: none; }

.authbtn__icon { width: 20px; height: 20px; flex-shrink: 0; }

.authmenu__legal {
  color: #6b7280;
  font-size: 12px;
  line-height: 1.55;
  margin: 14px 0 0;
}
.authmenu__legal a { color: #6b7280; text-decoration: underline; }
.authmenu__legal a:hover { color: #111; }

/* The provider scripts draw their own things - a One Tap prompt, an Apple
   overlay - and neither is asked to. Kept out of the way if one appears. */
#credential_picker_container, #credential_picker_iframe { z-index: 70 !important; }

/* One word or two, by how much room there is. The header has run past the
   viewport before now - see the 560px block above - and REGISTER is four
   characters longer than the button it sits next to. */
.btn__narrow { display: none; }

/* Small phones: 360px and 320px still pushed the logged-in header past the
   viewport. Trimming the padding and the logo buys back the ~50px needed. */
@media (max-width: 400px) {
  .btn__wide   { display: none; }
  .btn__narrow { display: inline; }

  .header__inner { padding: 0 8px; gap: 6px; }
  .header__tools { gap: 6px; }
  .logo__img { height: 18px; }
  .ghost-btn--lg { padding: 0 10px; font-size: 11px; }
  .balance { padding: 6px 9px 6px 6px; font-size: 13px; gap: 5px; }
  .balance img, .balance svg { width: 18px; height: 18px; }
}

@media (max-width: 340px) {
  .logo__img { height: 15px; }
  .ghost-btn--lg { padding: 0 8px; }
  .balance { font-size: 12px; padding: 6px 7px 6px 5px; }
}

/* Live position value on an open bet — the decision the cash-out button asks
   for cannot be made without it. */
.mb__now {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin-top: 8px; padding: 8px 10px; border-radius: 10px;
  background: #ffffff0a; font-size: 12px; color: var(--text-body);
}
.mb__now-label { font-weight: 700; letter-spacing: .3px; text-transform: uppercase; font-size: 11px; }
.mb__now b { font-size: 15px; font-weight: 700; }
.mb__now-sub { margin-left: auto; color: var(--text-disable); font-size: 11px; }
/* Up and down on an open position are the same two meanings as Yes and
   No, so they are the same two colours. They were a different green and
   a different red, which quietly said they were something else. */
.mb__now.is-up { background: color-mix(in srgb, var(--text-outcome-up) 12%, transparent); }
.mb__now.is-up .mb__now-label, .mb__now.is-up b { color: var(--success, var(--text-outcome-up)); }
.mb__now.is-down { background: color-mix(in srgb, var(--text-outcome-down) 12%, transparent); }
.mb__now.is-down .mb__now-label, .mb__now.is-down b { color: var(--danger, var(--danger)); }

/* House-market stat blocks carry sentences, not figures — let them wrap. */
.stat__value { overflow-wrap: anywhere; }

/* ---------- Loading placeholders ----------
   Drawn in place of cards while a category is still being fetched. An empty
   grid reads as "nothing here", which is the wrong thing to say about a tab
   that is simply still loading. */
.card--skel { cursor: default; pointer-events: none; }
.skel {
  display: block;
  border-radius: 4px;
  background: linear-gradient(90deg, #153042 0%, #1d3f57 50%, #153042 100%);
  background-size: 200% 100%;
  animation: skel-sweep 1.4s ease-in-out infinite;
}
.skel--img { width: 40px; height: 40px; flex-shrink: 0; }
.skel--line { height: 12px; width: 100%; margin: 4px 0; }
.skel--short { width: 55%; }
.card--skel .card__title-wrap { display: block; flex: 1; min-width: 0; }
.card--skel .opt { padding: 6px 0; }

@keyframes skel-sweep {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .skel { animation: none; background: #153042; }
}

/* The quiet second action in the login box: a member who has never had a
   password here says so, rather than guessing at one and being told no. Reads
   as a link, not a rival to the main button. */
.slip__link {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 6px 0;
  background: none;
  border: 0;
  color: inherit;
  opacity: .72;
  font: inherit;
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
}
.slip__link:hover { opacity: 1; }

/* The one line under the Log in button, switching the box between logging in
   and opening an account. Set off by a rule because it is a different action,
   not a second way to do the same one. */
.login__switch {
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid #ffffff14;
  opacity: .72;
}
.login__switch:hover { opacity: 1; }

/* Where to send the money. Set apart from the form because it is the thing
   being read, not filled in, and the line breaks the operator typed are the
   account number and the name - they have to survive. */
.wform__pay {
  white-space: pre-wrap;
  background: #ffffff0d;
  border: 1px solid #ffffff1a;
  border-radius: var(--size-8);
  padding: 12px 14px;
  margin-bottom: 14px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-primary);
}

/* ---------- Wallet ----------
   The member's own statement, in the same drawer shape as My bets so the two
   read as one place rather than two features. */
.wrow {
  padding: 11px 14px;
  border-bottom: 1px solid var(--border-subtle, #ffffff14);
}
.wrow__top {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.wrow__what { font-size: 14px; color: #fff; }
.wrow__ref { font-size: 11px; opacity: .5; }
.wrow__sub {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-top: 3px; font-size: 12px; opacity: .62;
}
.wrow__note { text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wrow__status { font-weight: 600; opacity: .9; }
.wrow__why {
  margin-top: 5px; font-size: 12px; line-height: 1.4;
  padding: 6px 8px; border-radius: 6px;
  background: #ffffff0d; opacity: .85;
}
.wform { padding: 14px; }
.wform__hint { margin: 6px 0 14px; font-size: 12px; line-height: 1.45; opacity: .6; }
.wform__err { margin: 8px 0 0; font-size: 13px; color: var(--danger); }
.wform__stop {
  margin: 0 0 14px; padding: 12px; border-radius: 8px;
  background: #ffffff0d; font-size: 13px; line-height: 1.5;
}

/* Why a card's buttons are dead.
   Only drawn when every side on the card is blocked — a row of greyed buttons
   with no explanation is what made a brand-new tab read as broken. */
.card__blocked {
  margin: 6px 0 0;
  padding: 5px 10px;
  border-radius: 6px;
  background: #ffffff0d;
  color: var(--text-body);
  font-size: 11.5px;
  line-height: 1.4;
  text-align: center;
}