/* ==========================================================================
   88M — dark theme (/m)
   Loaded after m.css, and only for the countries in DARK_REGIONS
   (inc/i18n.php) — Indonesia today. Every other country never downloads it.

   Two layers. The tokens in :root flip the palette for every rule that already
   paints through var(--c-*) / var(--m-*). The rules below it are the ones
   m.css and theme.css paint with a literal colour — a white card, a pale tint
   — repeated with the same selector so source order wins and their own
   :hover / .active variants (more specific) still apply on top.

   Kept as they are on purpose: brand colours and the logo pair, the gold VIP
   buttons and medals, country flags, uploaded artwork, and white text on a
   coloured button.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* Ink & surfaces. On /m the ground is `--c-soft` and the cards sit on it,
     so the card is the lighter of the two. */
  --c-ink:     #edf0f4;
  --c-body:    #b3bbc6;
  --c-muted:   #8a93a0;
  --c-faint:   #5c6572;
  --c-line:    #29303a;
  --c-surface: #0b0e13;
  --c-soft:    #0b0e13;
  --c-soft-2:  #1d232c;

  /* The dark theme's accent is teal, not blue (sample/darkbutton): every rule
     that paints a button, a link, an icon or an active tab in the brand blue
     turns teal through these tokens. The header pair is NOT touched (21 Oct
     2026): `.m-cta .join` keeps the logo green and `.m-cta .login` the logo
     orange, exactly as on the light theme — the `--m-logo-*` tokens are left
     to m.css. The confirm buttons' orange and the VIP gold stay too. */
  --c-blue:       #07b5a5;
  --c-blue-mid:   #09d6c3;
  --c-blue-light: #2ee3d1;
  --c-blue-deep:  #064e48;
  --m-blue:       #09d6c3;
  --m-blue-lit:   #2ee3d1;
  --m-blue-deep:  #07b5a5;

  --m-ground: #0b0e13;
  --m-line:   #262d37;
  --m-shadow: 0 1px 3px rgba(0, 0, 0, .4);
  --m-card:   0 2px 12px rgba(0, 0, 0, .45);

  /* Blue, indigo and purple tiles all read as the one accent on dark; green
     and amber keep their own meaning. */
  --m-tint-blue:   rgba(9, 214, 195, .14);
  --m-tint-indigo: rgba(9, 214, 195, .14);
  --m-tint-green:  rgba(35, 164, 85, .18);
  --m-tint-purple: rgba(9, 214, 195, .14);
  --m-tint-amber:  rgba(255, 180, 40, .16);

  --shadow-card: 0 2px 12px rgba(0, 0, 0, .45);
  --shadow-pop:  0 10px 34px rgba(0, 0, 0, .6);

  /* Dark-only */
  --d-card:     #161b22;
  --d-raised:   #1d232c;
  --d-input:    #0f1318;
  --d-tint-blue:  rgba(9, 214, 195, .14);
  --d-tint-green: rgba(35, 164, 85, .16);
  --d-tint-red:   rgba(228, 0, 43, .16);
  --d-tint-amber: rgba(255, 196, 0, .13);
  --d-text-green: #5fd38d;
  --d-text-red:   #ff8a9a;
  --d-text-amber: #f2c96b;
  --d-text-blue:  #2ee3d1;
}

/* --- Teal accent: what the tokens cannot reach --------------------------- */
/* Glows and gradients written as literal blues in m.css. */
.btn-upload,
.btn-addbank { --cta-glow: rgba(9, 214, 195, .26); }
.cat-tab.active,
.m-rb-claim,
.m-rb-empty .go { box-shadow: 0 6px 14px rgba(9, 214, 195, .22); }
.m-acc-tabs a.active,
.m-msg-tabs a.active { background: linear-gradient(to right, #07b5a5, #09d6c3); color: #000; }

/* --- theme.css ----------------------------------------------------------- */
.flag-intl { background: #1e2a3a; }
.lang-opt { border-right-color: var(--c-line); }
.lang-opt.active { color: var(--d-text-blue); }
.rail-btn { background: var(--d-raised); }
.auth-alert { background: var(--d-tint-red); border-color: rgba(228, 0, 43, .35); color: var(--d-text-red); }
.field-err { color: var(--d-text-red); }

/* --- Frame: header, drawer, bottom nav ----------------------------------- */
.block,
.m-header,
.m-drawer,
.m-bottom,
.m-footer { background: var(--d-card); }
.m-header { border-bottom: 1px solid var(--m-line); }
.drawer-lang .lang-head { border-bottom-color: var(--m-line); }

/* --- Home & product pages ------------------------------------------------ */
.m-ticker,
.m-quick,
.cat-panels,
.prov-list,
.m-sec,
.plat-grid,
.m-promo-card .body,
.m-promo-item,
.m-promo-detail { background: var(--d-card); }
.cat-tab { background: var(--d-raised); color: var(--c-body); }
.m-quick .mq-ico { background: var(--m-blue); }
.prov-card .pc-acts .desk { background: var(--d-raised); }
.m-page-bar .sel,
.pp-trigger,
.m-filter .sort,
.m-filter .search { background: var(--d-raised); }
.pp-panel { background: var(--d-card); }

/* --- Sign in / register --------------------------------------------------- */
.m-auth { background: var(--d-card); }
.reg-note { background: var(--d-tint-amber); border-color: rgba(240, 201, 138, .35); color: var(--d-text-amber); }

/* --- Member area --------------------------------------------------------- */
.m-acc-user, .m-acc-verify, .m-acc-tile, .m-acc-card, .m-signout, .m-wallet, .m-rb-card,
.m-chip-wallet,
.m-opt.active,
.m-msg-item,
.m-msg-foot,
.acc-count,
.amt-chip { background: var(--d-card); }
.m-acc-user .vip { color: var(--d-text-blue); }
.m-acc-user .nm i { color: var(--d-text-blue); }
.m-acc-user .tier { background: #2c3440; }
.m-acc-verify .icons .done::after { background: var(--d-card); }
.m-acc-tile .ic.tint-blue,
.m-acc-tile .ic.tint-indigo,
.m-acc-tile .ic.tint-purple { color: #2ee3d1; }
/* The tile marks are traced two-tone artwork with their blues written into
   the SVG; on dark they are drawn in the one accent. */
.m-acc-tile .ic:is(.tint-blue, .tint-indigo, .tint-purple) svg [fill]:not([fill="none"]) { fill: currentColor; }
.m-acc-tile .ic:is(.tint-blue, .tint-indigo, .tint-purple) svg [stroke]:not([stroke="none"]) { stroke: currentColor; }
.m-acc-tile .ic .dot { border-color: var(--d-card); }

/* Wallet: the silver plate becomes gunmetal, the stack behind it with it. */
.m-wallet-stack::before { background: #262d37; box-shadow: 0 2px 6px rgba(0, 0, 0, .4); }
.m-wallet-top {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='132' height='48'%3E%3Ctext x='0' y='40' font-family='Poppins,Arial,sans-serif' font-size='46' font-weight='800' fill='%23ffffff' fill-opacity='0.03'%3E88M%3C/text%3E%3C/svg%3E")
      30% 100% / 66px 24px no-repeat,
    linear-gradient(180deg, #222932, #1a2028);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 3px 8px rgba(0, 0, 0, .45);
}
.m-wallet-top::before {
  background: linear-gradient(120deg,
    transparent 0 58.4%,
    rgba(255, 255, 255, .06) 58.4% 58.6%,
    transparent 58.6% 59.7%,
    rgba(255, 255, 255, .06) 59.7% 59.9%,
    rgba(255, 255, 255, .03) 59.9% 100%);
}
.m-chip-wallet .ic { background: var(--d-tint-amber); color: var(--d-text-amber); }

.m-referral { background: linear-gradient(160deg, #0b2f2c, #0d3a36 60%, #0a2b28); }
.m-referral .code { background: rgba(0, 0, 0, .3); }

/* Rebate */
.m-rb-chip { background: var(--d-raised); }
.m-rb-claim[disabled] { background: var(--d-raised); }
.m-rb-note { background: var(--d-tint-blue); }
.m-rb-note .ic { background: var(--d-card); }

/* Notes */
.acc-note.ok,
.vf-prize,
.rf-copy.copied,
.ref-msg-box .rmb-copy.copied,
.shr-item.copied { background: var(--d-tint-green); color: var(--d-text-green); }
.shr-item.copied .shr-ico { color: var(--d-text-green); }
.acc-note.err,
.vf-err { background: var(--d-tint-red); color: var(--d-text-red); }
.vf-locked { background: var(--d-tint-amber); color: var(--d-text-amber); }
.vf-box input,
.vf-box select { background: var(--d-input); color: var(--c-ink); }
.vf-ghost, .vf-ghost:disabled, .cf-btn.ghost { background: var(--d-raised); }

/* Referral */
.ref-badge.lv2 { background: var(--d-raised); color: var(--c-body); }
.ref-badge.lv3 { background: var(--d-tint-amber); }
.ref-badge.lv4 { background: var(--d-tint-blue); color: var(--d-text-blue); }
.ref-super { background: linear-gradient(135deg, var(--d-card), #12171d); }
.ref-rungs .ln.is-me { background: var(--d-tint-blue); }
.ref-msg-box .rmb-copy { background: var(--d-raised); }

/* The QR stays black-on-white — a scanner needs the contrast — but the plate
   round it no longer glares. */
.ref-qr-box { background: var(--d-card); }
.ref-qr-dl { background: var(--d-raised); }
.ref-qr-dl:active { background: var(--c-soft-2); }

/* --- VIP ------------------------------------------------------------------ */
.m-vip-tabs { background: rgba(11, 14, 19, .95); }
.m-vip-card { background: var(--d-card); }
.m-vip-pick button { background: var(--d-raised); }

/* --- Dialogs -------------------------------------------------------------- */
.cf-icon { background: var(--d-tint-amber); }
.rf-x,
.msgv-x { background: var(--d-raised); }
.game-pick .gp-box,
.shr-menu,
.hp-box { background: var(--d-card); }
.shr-toggle { background: var(--d-raised); }
.game-pick .gp-demo:hover { background: var(--d-raised); }
.hp-text { color: var(--c-ink); }

/* --- Footer --------------------------------------------------------------- */
/* The responsible-gaming marks and FPX are drawn in near-black ink. Painted
   white they read as the same marks; everything else keeps its own colour. */
.foot-badges img[src*="age-18"],
.foot-badges img[src*="gamcare"],
.foot-badges img[src*="begambleaware"],
.foot-badges img[src*="fpx"] { filter: brightness(0) invert(.92); }
/* Curaçao's wordmark is mid-grey and its seal is in colour: a light plate
   keeps both as they are. */
.foot-licence img { background: #e9ecf0; border-radius: 6px; padding: 4px 8px; box-sizing: content-box; }

/* --- Tabs drawn in the light grey ------------------------------------------ */
.m-acc-tabs a,
.m-msg-tabs a { background: #262d37; color: var(--c-body); }

/* Bottom nav: the active label was the deep blue, which sinks into the bar. */
.m-bottom a.active { color: var(--d-text-blue); }

/* The wallet's Deposit pill is cut out of the plate by a 6px ring in the
   plate's own colour, and the blue sheet behind it fades towards white. */
.m-wallet .dep {
  box-shadow:
    0 0 0 6px #1d232b,
    0 5px 11px rgba(0, 0, 0, .4),
    inset 0 1px 0 rgba(255, 255, 255, .24);
}
.m-wallet-stack::after {
  background: linear-gradient(180deg,
    var(--m-blue-deep) 0%, var(--m-blue-lit) 38%, #0a8f84 72%, #123a37 100%);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .4);
}

/* VIP hero: the copy sits above the picture on its own cream wash; on dark it
   becomes a gold glow on the ground, the picture under it unchanged. */
.m-vip-hero {
  background:
    radial-gradient(ellipse 420px 260px at 50% 20%, rgba(200, 162, 86, .22), transparent 70%),
    linear-gradient(180deg, #17140f, var(--c-soft));
}

/* With color-scheme dark the browser paints a bare <input> its own grey;
   the search sits inside a box that is already the field. */
.m-filter .search input { background: transparent; color: var(--c-ink); }

/* --- App download: banner, header mark, download.php (21 Oct 2026) ------- */
/* The buttons go teal through --m-blue-*; these are the literals around them. */
.m-appbar { background: var(--d-card); }
.m-header .hdr-app { color: var(--d-text-blue); }
.m-header .hdr-app .dot { box-shadow: 0 0 0 2px var(--d-card); }
.m-dl-sec { background: var(--d-card); }
.m-dl-art,
.app-dl-art { background: #06110f; }
.m-dl-feats .ic { color: var(--d-text-blue); }
.m-dl-steps li::before { color: #000; }
.m-dl-note { color: var(--d-text-amber); }