/* meteor — component layer.
   main.css carries the Bootstrap-4-alpha grid/utilities plus the reference
   site's own rules (dark radial page, gold links, .card, .top-nav, .nav-tabs
   colours, .col-xs-5ths, .scrollbox, .icon-socmed). THIS file adds the pieces
   node_member needs that the reference site has no equivalent for — member
   bar, mobile menu panel, game grids, promo cards, form pages, data tables —
   all drawn in the same palette so the whole site reads as one design.

   Palette is selected per tenant by the panel's Meteor Color Palette field.
   The literals below are fallbacks only; palette-<slug>.css supplies dedicated
   Meteor token values before components resolve them.
*/

/* Rules that re-styled portal_legacy.css components (nav links, the category
   strip, form controls, body font) were removed on 2026-08-15: app.css loads
   last, so each one silently overrode the reference and the page drifted from
   it in ways only a rendered screenshot showed. app.css now carries ONLY
   classes the reference has no rule for. */
/* ── Theme tokens (the layer the reference's theme sheet owns) ──────
   Direction matters: portal_legacy.css DERIVES its --color-* palette FROM
   these (--color-primary: var(--accent, #DAA520), --color-bg-card:
   var(--card-bg, #333333), …). The reference sets them per theme in
   assets/css/theme/<slug>.css; meteor ships no theme sheet, so all 26 fell
   back to literals and no rule could follow a palette.
   They are declared here with meteor's palette as the single source. Do NOT
   alias them back to --color-* — that forms a cycle, which makes BOTH sides
   invalid and blanks the entire palette (shipped and caught 2026-08-15). */
:root {
  --accent: #DAA520;
  --accent-soft: #F5C358;
  --accent-brand: #800000;
  --accent-danger: #d9534f;
  --accent-success: #5cb85c;
  --accent-info: #24BBF2;
  --theme-primary: var(--accent);
  --theme-secondary: var(--accent-soft);
  --color-secondary: var(--accent-soft);
  --primary-bg: #000000;
  --secondary-bg: #222222;
  --panel-bg: #222222;
  --card-bg: #333333;
  --footer-bg: #000000;
  --sidebar-bg: #000000;
  --border-soft: #333333;
  --text-main: #ffffff;
  --text-muted: #cccccc;
  --text-muted-strong: #ffffff;
  --text-on-light: #1f2937;
  --text-on-light-muted: #4b5563;
  --result-pill-text: var(--accent);
  --provider-pill-text: var(--accent-soft);
  --scrollbar-thumb: rgba(220, 220, 220, 0.8);
  --dl-color-theme-accent1: #000000;
  /* Logo plates stay light on purpose: provider artwork is drawn for white. */
  --provider-plate-bg: #ffffff;
  --provider-plate-border: rgba(0, 0, 0, 0.15);
}

/* The mobile menu modal lives inside #app-header, and portal_legacy.css sets
   these three tokens ON #app-header — more specific than :root, so declaring
   them there had no effect and the modal kept Bootstrap's blue links
   (measured rgb(13,110,253)) on the #333 panel. Same selector, later sheet. */
#app-header {
  --game-tab-icon-filter: none;  /* light theme sheets override to invert the white icons */
  --legacy-mobile-menu-link-color: var(--accent);
  --legacy-mobile-menu-active-bg: var(--accent);
  --legacy-mobile-menu-active-color: var(--color-ink-on-accent);
}

:root {
  /* Aliases, not a second palette. portal_legacy.css owns the site colours as
     --color-*; every --mtr-* below resolves to one of them, so the ~100 uses in
     this file follow the panel-selected theme instead of pinning component
     colours. Every Meteor layout loads portal_legacy before this component
     layer and the selected palette after it. */
  --mtr-accent: var(--color-primary);
  /* Text drawn ON the accent. Light themes set a dark ink in their sheet; the
     default is white because every dark theme's accent is a saturated colour. */
  --color-ink-on-accent: #ffffff;
  --mtr-surface: var(--color-bg-medium);
  --mtr-surface-2: var(--color-bg-dark);
  --mtr-line: var(--color-border-card);
  --mtr-line-2: var(--color-border-breadcrumb);
  --mtr-control-line: var(--color-text-muted);
  --mtr-ink: var(--color-text-white);
  --mtr-ink-2: var(--color-text-muted);
  --mtr-ink-3: var(--text-muted);
  --mtr-ok: var(--color-accent-green);
  --mtr-warn: var(--color-accent-orange);
  --mtr-bad: var(--color-accent-red);
  --mtr-result: var(--color-accent-blue);
  --mtr-provider-plate: var(--provider-plate-bg);
  --mtr-provider-mega-plate: var(--mtr-provider-plate);
}


/* ── Header ─────────────────────────────────────────────────────── */
.logo-text {
  display: inline-block;
  padding: 8px 4px;
  font-size: 34px;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: var(--mtr-accent);
  text-shadow: 0 2px 0 color-mix(in srgb, var(--mtr-surface-2) 60%, transparent);
}
#app-header.fixed .logo-text { font-size: 22px; transition: font-size .3s; }

.form-header-signin .btn { min-width: 92px; }
.auth-msg {
  display: block;
  margin-top: 4px;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
}
.auth-msg-ok  { background: color-mix(in srgb, var(--mtr-ok) 18%, transparent); color: var(--mtr-ok); }
.auth-msg-err { background: color-mix(in srgb, var(--mtr-bad) 18%, transparent); color: var(--mtr-bad); }

/* Contact pills. main.css sizes `.icon-socmed img` only — meteor draws these
   with inline SVG (no icon font), which would otherwise render at its
   intrinsic 24px-viewBox size scaled to the container and blow up. */
.icon-socmed svg { width: 32px; height: 32px; vertical-align: middle; color: var(--mtr-accent); }/* Authenticated single-line member bar (clock · user/balance · actions). */
.member-bar { padding-top: 10px; font-size: 13px; color: var(--mtr-ink-2); }
.member-bar-item { color: var(--mtr-ink-2); text-decoration: none; }
.member-bar-item svg { vertical-align: -2px; margin-right: 3px; }
a.member-bar-item:hover { color: var(--mtr-ink); }
.member-bar .member-name { color: var(--mtr-ink); font-weight: 700; }
.member-bar-sep { margin: 0 6px; color: var(--mtr-line-2); }

/* ── Nav ────────────────────────────────────────────────────────── */
.navbar .dropdown { position: relative; }
.navbar .dropdown .dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1010;
  min-width: 180px;
  padding: 4px 0;
  background: color-mix(in srgb, var(--mtr-surface-2) 95%, transparent);
  border: solid 1px var(--mtr-line);
  border-radius: 6px;
}
.navbar .dropdown:hover .dropdown-menu,
.navbar .dropdown.open .dropdown-menu { display: block; }
.navbar .dropdown .dropdown-item {
  display: block;
  padding: 7px 14px;
  color: var(--mtr-accent);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.navbar .dropdown .dropdown-item:hover { background: color-mix(in srgb, var(--mtr-ink) 8%, transparent); color: var(--mtr-ink); }

/* Hamburger drawn in CSS — the reference uses FontAwesome, which this
   template does not ship (SVG/CSS only, no icon font download). */
.navbar-toggler-bars { display: inline-block; width: 16px; height: 2px; background: currentColor; position: relative; vertical-align: 2px; }
.navbar-toggler-bars::before,
.navbar-toggler-bars::after { content: ""; position: absolute; left: 0; width: 16px; height: 2px; background: currentColor; }
.navbar-toggler-bars::before { top: -5px; }
.navbar-toggler-bars::after  { top: 5px; }.mobile-menu .btn { color: var(--mtr-accent); border-color: var(--mtr-line-2); font-weight: 700; }

.meteor-recommendations-panel {
  color: var(--mtr-ink);
  background: linear-gradient(135deg, var(--mtr-surface), var(--mtr-surface-2));
  border: 1px solid var(--mtr-accent);
}
.meteor-recommendations-title { margin-bottom: 12px; color: var(--mtr-accent); }
.meteor-recommendations-copy { margin-bottom: 12px; color: var(--mtr-ink-2); font-size: 12px; }
.meteor-recommendation-card {
  overflow: hidden;
  color: var(--mtr-ink);
  background: color-mix(in srgb, var(--mtr-accent) 8%, var(--mtr-surface));
  border: 1px solid color-mix(in srgb, var(--mtr-accent) 30%, var(--mtr-line));
}
.meteor-recommendation-media { aspect-ratio: 1 / 1; background: var(--mtr-provider-plate); }
.meteor-recommendation-media .card-game-icon { width: 100%; height: 100%; object-fit: cover; }
.meteor-recommendation-name { min-height: 36px; color: var(--mtr-ink); font-size: 13px; font-weight: 600; }
.meteor-recommendation-hint { margin-top: 4px; color: var(--mtr-accent); font-size: 12px; }
.favorites-empty-title { color: var(--mtr-ink); }
.favorites-empty-copy { color: var(--mtr-ink-2); }
.meteor-ticker-emphasis { color: var(--mtr-accent); }

.meteor-qris-warning {
  margin-bottom: 12px;
  padding: 10px;
  background: color-mix(in srgb, var(--mtr-accent) 12%, transparent);
  border: 1px solid var(--mtr-accent);
}
.meteor-qris-container {
  display: flex;
  width: 100%;
  max-width: 260px;
  aspect-ratio: 1 / 1;
  margin-inline: auto;
  padding: 5px;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  background: var(--mtr-surface-2);
}
.meteor-qris-container > div {
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  max-height: 100%;
  box-sizing: border-box;
}
.meteor-qris-container svg,
.meteor-qris-raster-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.meteor-qris-raster {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--mtr-provider-plate);
  border: 1px solid var(--mtr-line);
}
.app-nav-loading {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--mtr-surface-2) 78%, transparent);
}
.app-nav-loading-spinner {
  width: 42px;
  height: 42px;
  border: 4px solid color-mix(in srgb, var(--mtr-ink) 30%, transparent);
  border-top-color: var(--mtr-ink);
  border-radius: 50%;
  animation: appNavSpin .8s linear infinite;
}
.app-nav-loading-label {
  margin-top: 14px;
  color: var(--mtr-ink);
  font-size: 14px;
  letter-spacing: .5px;
}
.mobile-menu-panel {
  border-top: solid 1px var(--mtr-line);
  background: color-mix(in srgb, var(--mtr-surface-2) 92%, transparent);
}
.mobile-menu-panel .nav-stacked { padding: 6px 0; margin: 0; list-style: none; }
.mobile-menu-panel .nav-link {
  display: block;
  padding: 10px 16px;
  color: var(--mtr-accent);
  font-weight: 700;
  font-size: 14px;
  border-bottom: solid 1px color-mix(in srgb, var(--mtr-ink) 6%, transparent);
}
.mobile-menu-panel .nav-link.active { color: var(--mtr-ink); background: color-mix(in srgb, var(--mtr-ink) 6%, transparent); }
.nav-group-label {
  display: block;
  padding: 8px 16px 4px;
  color: var(--mtr-ink-3);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── Announcement marquee ───────────────────────────────────────── */
.announcement {
  padding: 6px 0;
  background: color-mix(in srgb, var(--mtr-surface-2) 60%, transparent);
  border-top: solid 1px var(--mtr-line);
  border-bottom: solid 1px var(--mtr-line);
  color: var(--mtr-ink);
  font-weight: 700;
  font-size: 14px;
}

/* ── Home: lucky number widget ──────────────────────────────────── */
.widget-lucky-number .small { color: var(--mtr-ink-2); letter-spacing: 0.06em; }
.lucky-row { display: flex; gap: 6px; justify-content: center; margin-top: 6px; }
.lucky-row.lucky-row-hot { background: var(--mtr-bad); border-radius: 4px; padding: 2px 6px; }
.lucky-digit {
  min-width: 34px;
  font-size: 26px;
  font-weight: 700;
  color: var(--mtr-ink-2);
  text-align: center;
}
.lucky-row-hot .lucky-digit { color: var(--color-ink-on-accent); }

/* ── Home: category strip ───────────────────────────────────────── */
.game-tab-select:hover .game-tab-icon,
.game-tab-select:hover .game-tab-label,
.game-tab-select.active .game-tab-icon,
.game-tab-select.active .game-tab-label { color: var(--mtr-accent); }

/* ── Markets: desktop table + mobile cards ──────────────────────── */
.all-markets .nav-tabs { margin-bottom: 0; }
.all-markets .nav-tabs .nav-link {
  padding: 8px 16px;
  font-weight: 700;
  border: none;
  border-radius: 4px 4px 0 0;
}
.table-wrapper { border: solid 1px var(--mtr-line); border-top: none; background: var(--mtr-surface); }
.market-table { margin-bottom: 0; color: var(--mtr-ink); }
.market-table thead th {
  padding: 10px 8px;
  border-bottom: solid 2px var(--mtr-line-2);
  color: var(--mtr-ink-2);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.market-table tbody td { padding: 10px 8px; border-top: solid 1px color-mix(in srgb, var(--mtr-ink) 6%, transparent); vertical-align: middle; }
.market-table tbody tr:nth-of-type(odd) { background: color-mix(in srgb, var(--mtr-ink) 3%, transparent); }
/* Market name is a <button> (it submits the launch form) but must read as the
   plain gold link the reference shows — strip the UA button chrome. */
.market-name {
  padding: 0;
  border: none;
  background: none;
  color: var(--mtr-accent);
  font: inherit;
  font-weight: 700;
  text-align: inherit;
  cursor: pointer;
}
.market-name:hover { color: var(--mtr-ink); text-decoration: none; }
.market-launch { display: inline; margin: 0; }
.market-table .market-round { color: var(--mtr-result); font-size: 12px; }
.market-result { color: var(--mtr-ok); font-size: 26px; font-weight: 700; letter-spacing: 0.04em; }
.market-closed { color: var(--mtr-bad); font-weight: 700; font-size: 12px; }

.card-market { margin-bottom: 12px; }
.card-market .card-block { padding: 10px; }
.card-market .card-title { color: var(--mtr-accent); font-size: 14px; font-weight: 700; margin-bottom: 8px; }
.card-market .badge-round {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  background: var(--mtr-result);
  color: var(--color-text-on-light);
  font-size: 11px;
  font-weight: 700;
}
.card-market .badge-time {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--mtr-result) 85%, transparent);
  color: var(--color-text-on-light);
  font-size: 11px;
  font-weight: 700;
}
.card-market .market-date { margin-top: 6px; color: var(--mtr-ink-2); font-size: 12px; }
.card-market .market-result { display: block; margin-top: 6px; font-size: 34px; }

/* ── Game grids (/games/:category) ──────────────────────────────── */
.game-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 10px; }
.game-tile {
  display: block;
  overflow: hidden;
  border: solid 1px var(--mtr-line);
  border-radius: 8px;
  background: var(--mtr-surface);
  text-align: center;
}
.game-tile img { width: 100%; height: auto; display: block; aspect-ratio: 4 / 3; object-fit: cover; }
.game-tile .game-name {
  display: block;
  padding: 8px 6px;
  color: var(--mtr-ink);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.game-tile:hover { border-color: var(--mtr-accent); }
.provider-strip { display: flex; flex-wrap: wrap; gap: 8px; }
.provider-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 110px;
  min-height: 56px;
  padding: 6px 10px;
  border: solid 1px var(--provider-plate-border);
  border-radius: 6px;
  /* Light plate, like the reference gives every provider logo. Provider artwork
     is drawn for white backgrounds — on the dark surface this used, anything
     with dark ink (NetEnt, RedTiger, NoLimitCity, SpadeGaming, 3Oaks)
     disappeared entirely. Measured plate luminance was 13%. */
  background: var(--provider-plate-bg);
  color: var(--color-text-on-light);
  font-weight: 700;
  font-size: 12px;
}
.provider-chip img { max-height: 40px; max-width: 96px; width: auto; object-fit: contain; }
.provider-chip.active { border-color: var(--mtr-accent); box-shadow: 0 0 0 2px var(--mtr-accent); }

/* ── Promotions ─────────────────────────────────────────────────── */
.promo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.promo-card { overflow: hidden; border: solid 1px var(--mtr-line); border-radius: 8px; background: var(--mtr-surface); }
.promo-card img { width: 100%; height: auto; display: block; }
.promo-card .promo-body { padding: 12px; }
.promo-card .promo-title { color: var(--mtr-accent); font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.promo-card .promo-text { color: var(--mtr-ink-2); font-size: 13px; line-height: 1.6; }

/* ── Member pages ───────────────────────────────────────────────
   The reference wraps every logged-in page in .main-content.bg-blur-content
   with an <h4> title, then cards: .card-profile (header strip + table) for
   account data, .card-block for panels. Tables carry TWO tbodys — a th/td one
   for ≥md and a stacked one for phones — which is why mobile reuses the same
   markup instead of a forked view. */
.main-content {
  /* The reference renders member pages inside its .container; meteor's <main>
     is full-bleed (#container-body.container-fluid), so the width and gutters
     have to come from here or every member page runs edge-to-edge. */
  max-width: 1180px;
  margin: 0 auto;
  padding: 14px 16px 24px;
}
.bg-blur-content { background: transparent; }
.main-content > h4 {
  margin: 0 0 12px;
  color: var(--mtr-accent);
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 0.03em;
}
.card-profile { margin-bottom: 14px; }
.card-profile .card-header {
  padding: 9px 14px;
  background: var(--mtr-surface-2);
  border-bottom: solid 1px var(--mtr-line);
  color: var(--mtr-accent);
  font-size: 13px;
  letter-spacing: 0.06em;
}
.card-profile .table { width: 100%; margin: 0; color: var(--mtr-ink); font-size: 13px; }
.card-profile .table th,
.card-profile .table td {
  padding: 9px 14px;
  border-top: solid 1px color-mix(in srgb, var(--mtr-ink) 6%, transparent);
  vertical-align: middle;
}
.card-profile .table th {
  width: 42%;
  color: var(--mtr-ink-2);
  font-weight: 400;
  text-align: left;
  white-space: nowrap;
}.card-profile .px-1 { padding: 10px 14px 0; color: var(--mtr-ink-2); font-size: 12px; letter-spacing: 0.05em; }

/* Deposit/withdraw tab strip — same shape as the market tabs but neutral. */
.main-content .nav-tabs { border-bottom: solid 1px var(--mtr-line); }
.main-content .nav-tabs .nav-link {
  padding: 8px 16px;
  border: none;
  color: var(--mtr-ink-2);
  font-weight: 700;
  font-size: 13px;
}
.main-content .nav-tabs .nav-link.active {
  background: color-mix(in srgb, var(--mtr-ink) 6%, transparent);
  color: var(--mtr-accent);
  border-radius: 4px 4px 0 0;
}
.tab-content > .tab-pane { display: none; }
.tab-content > .tab-pane.active { display: block; }

/* Report filter/stepper buttons. Scoped to .main-content on purpose: a bare
   `.btn-group .btn` rule outranks `.btn-danger`/`.btn-warning` (two classes vs
   one) and silently bleached the header sign-in buttons. */
.main-content .btn-group .btn {
  padding: 6px 14px;
  border: solid 1px var(--mtr-line-2);
  background: var(--mtr-surface);
  color: var(--mtr-ink);
  font-size: 13px;
  cursor: pointer;
}
/* Ink and hover derive from the accent instead of the gold this was written
   against, or a red theme's active button turned gold on hover. */
.main-content .btn-group .btn-primary,
.main-content .btn-group .btn-primary.active {
  background: var(--mtr-accent);
  border-color: var(--mtr-accent);
  color: var(--color-ink-on-accent);
  font-weight: 700;
}
.main-content .btn-group .btn:hover { background: color-mix(in srgb, var(--mtr-ink) 10%, transparent); }
.main-content .btn-group .btn-primary:hover {
  background: color-mix(in srgb, var(--mtr-accent) 82%, var(--mtr-ink) 18%);
  color: var(--color-ink-on-accent);
}

/* Bootstrap's own primary/secondary are BLUE and GREY: stock colours that made
   the QRIS picker blue and the request button grey on a red site, next to a
   bank picker that was already themed. Semantic colours (success, danger,
   warning) are deliberately left alone — they mean online, cancel and caution,
   not brand. */
.main-content .btn-primary,
.main-content .btn-primary:focus {
  background-color: var(--mtr-accent);
  border-color: var(--mtr-accent);
  color: var(--color-ink-on-accent);
}
.main-content .btn-primary:hover {
  background-color: color-mix(in srgb, var(--mtr-accent) 82%, var(--mtr-ink) 18%);
  border-color: var(--mtr-accent);
}
.main-content .btn-secondary,
.main-content .btn-secondary:focus {
  background-color: var(--mtr-surface);
  border-color: var(--mtr-line-2);
  color: var(--color-text);
}
.main-content .btn-secondary:hover {
  background-color: color-mix(in srgb, var(--mtr-ink) 12%, transparent);
  border-color: var(--mtr-line-2);
}

/* The compact QRIS submit sits directly beside the amount field. Its ordinary
   secondary border uses the same dark line as the card and disappears on the
   Meteor palettes, so keep this one action on the palette's form-control line. */
.main-content .meteor-qris-send-button,
.main-content .meteor-qris-send-button:focus,
.main-content .meteor-qris-send-button:hover {
  border: 1px solid var(--mtr-control-line);
}

/* Referral link rows (label + value + copy). */
.label-group { margin-bottom: 6px; }
.label-title {
  display: inline-block;
  min-width: 54px;
  padding: 2px 8px;
  border-radius: 3px;
  background: var(--mtr-surface-2);
  color: var(--mtr-ink-2);
  font-size: 11px;
  letter-spacing: 0.06em;
}
.label-content { margin-left: 8px; color: var(--mtr-ink); font-size: 13px; word-break: break-all; }

/* ── Forms + panels (deposit, withdraw, profile, register) ──────── */
.page-head { margin: 14px 0 10px; }
.page-head h1, .page-head h2 {
  margin: 0;
  color: var(--mtr-accent);
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.page-head .page-sub { color: var(--mtr-ink-3); font-size: 13px; }

.panel { padding: 16px; border: solid 1px var(--mtr-line); border-radius: 8px; background: var(--mtr-surface); }
.panel + .panel { margin-top: 14px; }
.panel-title {
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: solid 1px var(--mtr-line);
  color: var(--mtr-ink);
  font-size: 15px;
  font-weight: 700;
}
.form-group { margin-bottom: 12px; }
.form-group > label { display: block; margin-bottom: 4px; color: var(--mtr-ink-2); font-size: 13px; font-weight: 700; }select.form-control option { background: var(--mtr-surface-2); color: var(--mtr-ink); }
.form-hint { color: var(--mtr-ink-3); font-size: 12px; }
.form-error { color: var(--mtr-bad); font-size: 12px; }

.btn-mtr {
  display: inline-block;
  padding: 8px 18px;
  border: none;
  border-radius: 4px;
  background: var(--mtr-accent);
  color: var(--color-ink-on-accent);
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}
.btn-mtr:hover { background: color-mix(in srgb, var(--mtr-accent) 82%, var(--mtr-ink) 18%); color: var(--color-ink-on-accent); }
.btn-mtr-ghost { background: transparent; border: solid 1px var(--mtr-line-2); color: var(--mtr-ink); }
.btn-mtr-ghost:hover { background: color-mix(in srgb, var(--mtr-ink) 8%, transparent); color: var(--mtr-ink); }
.btn-mtr[disabled] { opacity: .5; cursor: not-allowed; }

/* ── Data tables (histories, referral, messages) ────────────────── */
.data-table { width: 100%; margin-bottom: 0; color: var(--mtr-ink); font-size: 13px; }
.data-table thead th {
  padding: 9px 8px;
  border-bottom: solid 2px var(--mtr-line-2);
  color: var(--mtr-ink-2);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.data-table tbody td { padding: 9px 8px; border-top: solid 1px color-mix(in srgb, var(--mtr-ink) 6%, transparent); }
.data-table tbody tr:nth-of-type(odd) { background: color-mix(in srgb, var(--mtr-ink) 3%, transparent); }
.table-scroll { overflow-x: auto; }
.empty-state { padding: 28px 12px; color: var(--mtr-ink-3); text-align: center; font-size: 14px; }

/* Meteor-only maintenance route. The shared v1-v7 maintenance document keeps
   its original stylesheet and markup; this surface consumes the active panel
   palette through the same tokens as every other Meteor page. */
body.meteor-maintenance-page #app-header .header-info,
body.meteor-maintenance-page #app-header .top-nav {
  display: none !important;
}
body.meteor-maintenance-page #app-header .logo {
  float: none;
  text-align: center !important;
}
body.meteor-maintenance-page #container-body {
  display: grid;
  min-height: clamp(360px, 62vh, 620px);
  place-items: center;
}
.meteor-maintenance-panel {
  width: min(100%, 640px);
  margin-block: clamp(32px, 8vh, 88px);
  padding: clamp(28px, 6vw, 56px);
  overflow-wrap: anywhere;
  border: 1px solid var(--mtr-line);
  border-radius: 8px;
  background: var(--mtr-surface);
  color: var(--mtr-ink);
  text-align: center;
}
.meteor-maintenance-icon {
  display: inline-grid;
  width: 64px;
  height: 64px;
  margin-bottom: 20px;
  place-items: center;
  border: 1px solid var(--mtr-line-2);
  border-radius: 50%;
  background: var(--mtr-surface-2);
  color: var(--mtr-accent);
  font-size: 24px;
}
.meteor-maintenance-panel h1 {
  margin: 0 0 12px;
  color: var(--mtr-accent);
  font-size: clamp(24px, 5vw, 42px);
  font-weight: 800;
  line-height: 1.15;
}
.meteor-maintenance-panel p {
  max-width: 55ch;
  margin: 0 auto 24px;
  color: var(--mtr-ink-2);
  font-size: 16px;
  line-height: 1.6;
}

@media (max-width: 575.98px) {
  body.meteor-maintenance-page #container-body {
    min-height: clamp(320px, 58vh, 520px);
  }
  .meteor-maintenance-panel {
    margin-block: 24px;
    padding: 28px 20px;
  }
}

.status-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}
.status-pill.is-ok      { background: color-mix(in srgb, var(--mtr-ok) 20%, transparent); color: var(--mtr-ok); }
.status-pill.is-pending { background: color-mix(in srgb, var(--mtr-warn) 20%, transparent); color: var(--mtr-warn); }
.status-pill.is-bad     { background: color-mix(in srgb, var(--mtr-bad) 20%, transparent); color: var(--mtr-bad); }

.pager { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: 12px; }
.pager a, .pager span {
  padding: 5px 10px;
  border: solid 1px var(--mtr-line);
  border-radius: 4px;
  background: var(--mtr-surface);
  color: var(--mtr-ink);
  font-size: 13px;
}
.pager .is-current { background: var(--mtr-accent); border-color: var(--mtr-accent); color: var(--color-ink-on-accent); font-weight: 700; }

/* ── Misc ───────────────────────────────────────────────────────── */
.footer-links { padding-left: 0; list-style: none; }
.footer-links li { padding: 3px 0; }
.footer-links a { color: var(--mtr-ink-2); font-size: 13px; }
.footer-links a:hover { color: var(--mtr-accent); }
/* Footer column headings are <div>, not <hN> — upstream moved every template
   off heading tags there so the page keeps one meaningful heading outline. */
.section-title {
  margin-bottom: 6px;
  color: var(--mtr-accent);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.legal { margin-top: 18px; padding-top: 12px; border-top: solid 1px var(--mtr-line); color: var(--mtr-ink-3); }
.footer-article { margin-top: 14px; color: var(--mtr-ink-3); line-height: 1.7; }
.footer-article a { color: var(--mtr-accent); }

.card.card-block { padding: 14px; margin-bottom: 14px; }
.card.card-block h5 { color: var(--mtr-accent); font-size: 15px; font-weight: 700; }.btn-spinner {
  display: inline-block;
  width: 12px; height: 12px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: -2px;
  animation: btn-spin 0.6s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* Mobile: the header sign-in strip is hidden (BS4a .hidden-sm-down) and the
   home page shows the stacked form instead — same split as the reference. */
@media (max-width: 767px) {
  .logo-text { font-size: 26px; }
  .page-head h1, .page-head h2 { font-size: 17px; }
  .panel { padding: 12px; }
  .market-result { font-size: 22px; }
  /* Member bar wraps to its own centred line instead of fighting the logo. */
  .header-info { float: none !important; }
  .member-bar { padding-top: 6px; text-align: center; font-size: 12px; }
  .member-bar-sep { margin: 0 3px; }
  .card-market .market-result { font-size: 30px; }
}

/* main.css pins the lucky-number widget to the right edge from 768px up (the
   reference site's behaviour). At 768–1599px there is no free gutter there, so
   it lands on top of the Result column — the one number players come for. Float
   it only when the viewport is actually wide enough; below that it sits in the
   flow under the banner. */
@media (min-width: 768px) and (max-width: 1599px) {}
@media (min-width: 1600px) {}


/* ==========================================================================
   Game drill-down (games page). Lifted verbatim from the legacy repo's
   src/views/public/games.ejs <style> block, which is where that repo keeps
   these rules. Moved into the stylesheet here so the XHR page appends do not
   re-inject a <style> tag on every load.
   ========================================================================== */
  /* === Drill-down container — fills below header, dark theme. === */
  .game-drilldown-container {
    padding-top: 0.75rem;
    padding-bottom: 1rem;
    color: var(--mtr-ink);
  }

  /* === KEMBALI back button — boiji parity: btn-link with chevron-left,
     left-aligned above the title strip. Primary color so it's discoverable
     without overpowering the page title underneath. === */
  .game-drilldown-back-wrap {
    margin-bottom: 0.25rem;
  }
  .game-drilldown-back {
    color: var(--mtr-accent);
    text-decoration: none;
    font-weight: 500;
    padding: 0.25rem 0.5rem;
    font-size: 0.9rem;
  }
  .game-drilldown-back:hover {
    color: var(--color-secondary);
    text-decoration: underline;
  }
  .game-drilldown-back i {
    margin-right: 0.25rem;
  }
  .game-drilldown-title {
    color: var(--mtr-ink);
    text-align: center;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin: 0 0 0.75rem 0;
    font-size: 1.05rem;
  }

  /* === Search bar — flat dark input + addon with circle-X. === */
  .game-drilldown-search {
    margin-bottom: 0.75rem;
  }
  .game-drilldown-search .form-control {
    background: var(--mtr-surface);
    border: 1px solid var(--mtr-line);
    color: var(--mtr-ink);
    box-shadow: none;
    border-right: none;
  }
  .game-drilldown-search .form-control::placeholder {
    color: var(--mtr-ink-2);
  }
  .game-drilldown-search .form-control:focus {
    box-shadow: none;
    outline: none;
    border-color: var(--mtr-accent);
  }
  .game-drilldown-search .input-group-text {
    background: var(--mtr-surface);
    border: 1px solid var(--mtr-line);
    border-left: none;
    color: var(--mtr-ink-2);
  }
  .game-drilldown-search .btn-clear-game-filter {
    color: inherit;
    text-decoration: none;
    line-height: 1;
  }
  .game-drilldown-search .btn-clear-game-filter:hover {
    color: var(--mtr-accent);
  }

  /* === Card grid — boiji card-game-col tight padding. === */
  .game-drilldown-grid {
    margin-left: -2px;
    margin-right: -2px;
  }  .card-game-col .card.game-card-link {
    margin-bottom: 0;
    border: none;
    background: var(--mtr-surface);
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    border-radius: 4px;
    transition: transform 0.15s ease;
  }
  .card-game-col .card.game-card-link:hover {
    transform: translateY(-2px);
  }
  .card-game-col .card-game-logo {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--color-bg-darkest);
  }
  .card-game-col .card-game-icon {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    display: block;
  }
  .card-game-col .card-game-label {
    min-height: 22px;
    line-height: 1.2;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--mtr-ink);
    background: var(--color-bg-darkest);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 4px;
    /* Full multi-line wrap, no ellipsis: long game names render in full. */
    white-space: normal;
  }

  /* === TAMPILKAN LEBIH — primary-colored link button. === */
  .btn-show-more.game-drilldown-more {
    color: var(--mtr-accent);
    text-decoration: none;
    font-weight: 600;
    letter-spacing: 0.03em;
    font-size: 0.95rem;
  }
  .btn-show-more.game-drilldown-more:hover {
    color: var(--color-secondary);
    text-decoration: underline;
  }

/* HOT / RTP corner badges on a game tile. node_member surfaces both flags
   (mst_api_games.tags + RTP); the legacy drill-down has neither, so these few
   rules are ours — they only position Bootstrap badges inside the thumbnail. */
.card-game-col .card-game-logo { position: relative; }
.card-game-col .card-game-badge { position: absolute; top: 4px; left: 4px; font-size: 0.6rem; }
.card-game-col .card-game-rtp   { position: absolute; top: 4px; right: 4px; font-size: 0.6rem; }

/* ── Contrast fix over a reference bug ──────────────────────────────
   portal_legacy paints .label-title (the WEB/WAP badges on the referral
   page) white with color: var(--color-text-dark), which derives from
   --dl-color-theme-accent1 — and several reference theme sheets set that
   token to #ffffff (crimson-fortune among them): white on white.
   The badge background is always white, so the ink is a constant dark. */
.label-group .label-title {
  color: var(--color-text-on-light);
}

/* ── Light-theme support for the category strip ─────────────────────
   The boiji category icons are white line-art drawn for dark plates. Light
   theme sheets set --game-tab-icon-filter (appended per sheet, keyed on the
   sheet's own --panel-bg luminance) so the OFF icons inverted read dark on the
   light strip; the coloured _on icon of the active tab is left untouched.
   Dark themes define nothing and keep the icons exactly as before. */
.game-tab-select:not(.is-active) .game-tab-icon:not([src*="_on"]) {
  filter: var(--game-tab-icon-filter, none);
}

/* Brand-name fallback when the tenant has no logo uploaded. */
#app-header .brand-name {
  display: inline-block;
  padding: 14px 0;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: var(--mtr-accent);
  text-transform: uppercase;
}

/* ── Surfaces portal_legacy hardcodes dark ──────────────────────────
   .card (a flat #222 gradient), the last-10 depo/WD ticker boxes, the
   socmed/banks bars and the card header/footer strips are all literal dark
   colours in portal_legacy — the one part of it that ignores the palette.
   On a light theme the page and the text follow the tokens while these
   boxes stay near-black: dark text on a dark box (busur4d, sandstone).
   Retokenised here the way the v-series themes every surface. Dark themes
   resolve to the same dark family as before; light themes lighten. */
.card {
  background: var(--color-bg-card);
  border-color: var(--mtr-line);
  color: var(--mtr-ink);
}
.card .card-header,
.card .card-footer {
  background-color: var(--color-bg-dark);
  color: var(--mtr-ink);
}
.last-deposit,
.last-withdraw,
.card-socmed,
.card-banks {
  background: var(--mtr-surface);
  color: var(--mtr-ink);
}

/* Sticky header: portal_legacy pins it with a literal black background —
   invisible on dark themes, a full-width black band on light ones the
   moment the member scrolls. Same surface token the resting header uses. */
#app-header.fixed {
  background-color: var(--color-bg-dark);
}

/* ── Meteor tenant-managed INFO pages ──────────────────────────────
   Tenant copy is sanitized at the panel and again before render. Its
   presentation therefore stays inside the panel-selected Meteor palette. */
body.meteor-information-page #container-body {
  padding-top: 1.25rem;
  padding-bottom: 2rem;
}
body.meteor-information-page .meteor-information-content {
  max-width: 75ch;
  color: var(--color-text);
  font-size: 1rem;
  line-height: 1.55;
}
body.meteor-information-page .meteor-information-content h1,
body.meteor-information-page .meteor-information-content h2,
body.meteor-information-page .meteor-information-content h3,
body.meteor-information-page .meteor-information-content h4 {
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  color: var(--color-text);
}
body.meteor-information-page .meteor-information-content > :first-child {
  margin-top: 0;
}
body.meteor-information-page .meteor-information-content a {
  color: var(--color-primary);
}
body.meteor-information-page .meteor-information-content table {
  width: 100%;
  margin: 1rem 0;
  border-collapse: collapse;
}
body.meteor-information-page .meteor-information-content th,
body.meteor-information-page .meteor-information-content td {
  padding: 0.65rem;
  border: 1px solid var(--color-border-card);
  text-align: left;
  vertical-align: top;
}
body.meteor-information-page .meteor-information-content blockquote {
  margin: 1rem 0;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-border-card);
  color: var(--color-text-muted);
}

@media (max-width: 767.98px) {
  body.meteor-information-page #container-body {
    padding: 1rem 0.75rem 1.5rem;
  }
  body.meteor-information-page .meteor-information-content {
    max-width: none;
    overflow-wrap: anywhere;
  }
  body.meteor-information-page .meteor-information-content table {
    display: block;
    overflow-x: auto;
  }
}