/* webold3 theme — utility classes.
 *
 * The 66-property :root alias block that used to open this file is gone: every
 * name it defined has been renamed to its contract equivalent at all 579 call
 * sites, so the indirection was redundant (and, once renamed, circular).
 *
 * Colours below come from the seed contract in layouts/main.ejs. The only
 * literals that remain are per-category identity hues, which are deliberate
 * and exempt under docs/THEME_COLOR_SYSTEM.md §4.2.
 */

/* ── Utility classes ────────────────────────────────────────────────────────
   All hues below now come from the contract. Gradients that used to encode a
   brand hue collapse onto --grad-accent; the decorative multi-hue "bg-gold-*"
   family keeps its distinct hues (they are category identity, not brand) but
   pairs them with contract ink so text stays legible after a re-tone. */

/* Home */
.btn-login{
    background: var(--grad-accent);
    border: none;
    color: var(--ink-on-gold);
}
.btn-register{
    background: linear-gradient(0deg, var(--accent-deep) 0%, var(--accent-base) 100%);
    border: none;
    color: var(--ink-on-gold);
}
.btn-forgot-pass{
    background: linear-gradient(0deg, var(--state-danger) 0%, color-mix(in srgb, var(--state-danger) 70%, white) 100%);
    border: none;
    /* Danger FILL, not chrome: the ink must be bestInk(--seed-danger), which
       re-derives on every publish, not the fixed light pole. White measured
       3.76:1 on the seed stop and 2.62:1 on the lightened #f47c7c stop;
       --ink-on-danger is 5.58:1 and 8.02:1. Same repoint as
       blue/assets/theme.css:259-260. */
    color: var(--ink-on-danger);
}
.btn-admin-res{
    background: linear-gradient(0deg, var(--state-success) 0%, color-mix(in srgb, var(--state-success) 60%, white) 100%);
    border: none;
    /* Success FILL, not chrome. White was 3.30:1 on the seed stop and 2.02:1
       on the lightened #73c892 stop; --ink-on-success is 6.37:1 / 10.41:1 and
       tracks the seed on publish. Mirrors
       blue/pages/member/account-edit.ejs:222-223. */
    color: var(--ink-on-success);
}
/* IMG-COLOUR C5: the member-home menu glow (dashboard.ejs:217, 250) is gold; it was --state-success 55%. The class name is historical. */
.bg-red-gradient{
    background: radial-gradient(circle,
        color-mix(in srgb, var(--accent-base) 28%, transparent) 0%,
        color-mix(in srgb, var(--surface-page) 80%, transparent) 100%);
}

/* Lottery page gradients */
.bg-gradient-darkGreen{
    background: linear-gradient(180deg, var(--surface-card) 0%, var(--surface-chrome) 100%) no-repeat padding-box;
    box-shadow: inset 0 3px 6px var(--bg-scrim), var(--shadow-sm);
}
.bg-gradient-green-darkGreen{
    background: linear-gradient(180deg, var(--action-fill-hover) 0%, var(--surface-card) 100%) no-repeat padding-box;
}
.text-title-green *{
    color: var(--state-success);
    text-shadow: 0 0 29px var(--accent-glow);
}
.bg-blue{ background-color: var(--surface-chrome); }
.bg-blue-1{ background-color: var(--surface-raised); }
.bg-red-1{ background-color: var(--state-danger); }
.bg-red-2{ background-color: color-mix(in srgb, var(--state-danger) 80%, white); }
.bg-cyan{ background-color: var(--accent-bright); }
.bg-lightBlue{ background-color: var(--state-info); }
.bg-purple-1{ background-color: var(--surface-raised); }
.bg-gradient-purple-red{ background: linear-gradient(var(--surface-raised), var(--accent-deep), var(--state-danger)); }
.bg-gradient-cyan-green{ background: linear-gradient(0deg, var(--action-fill-hover) 0%, var(--state-success) 79%); }

.btn-gradient-blue{ background: linear-gradient(180deg, var(--surface-card) 0%, var(--accent-deep) 100%) no-repeat padding-box; }
.btn-gradient-gold{ background: var(--grad-accent); }
.btn-gradient-red{ background: linear-gradient(to bottom, var(--state-danger), color-mix(in srgb, var(--state-danger) 70%, white)); }

/* Gold identity */
.text-dark-gold{ color: var(--accent-deep); }
.nav-icon{ color: var(--accent-base); }
.border-darkGold{ border: 1px solid var(--line-accent); }

.btn-light-dark-gold{
    background: linear-gradient(var(--action-fill-hover), var(--accent-base), var(--accent-bright));
    --bs-btn-color: var(--ink-on-gold);
}
.btn-dark-gold{
    background: var(--grad-accent-hover);
    --bs-btn-color: var(--ink-on-gold);
}
.menu-light-gold{
    background: linear-gradient(180deg, var(--accent-text) 0%, var(--action-fill-hover) 50%, var(--accent-deep) 100%);
    --bs-btn-color: var(--ink-on-gold);
    --bs-btn-border-color: var(--accent-deep);
    --bs-btn-hover-border-color: var(--accent-deep);
    border-width: 0 0 4px;
}
.buttonDropShadow{
    border: solid var(--bg-scrim);
    border-width: 0 0 4px;
}
.btn-group-brown a, .btn-group-brown button{
    --bs-btn-border-radius: 0;
    --bs-btn-hover-bg: var(--accent-bright);
    --bs-btn-hover-border-color: var(--accent-bright);
    --bs-btn-color: var(--accent-bright);
    --bs-btn-hover-color: var(--ink-on-light);   /* IMG-COLOUR: navy on the --accent-bright hover fill (the C18 "two" pair); the gold ink was 1.20:1 */
}

/* Gradient backgrounds (lottery cards) */
.bg-dark-gold{
    background: linear-gradient(90deg, var(--accent-base) 0%, var(--action-fill-hover) 79%);
    color: var(--ink-on-gold);
}
.bg-light-gold{
    background: linear-gradient(var(--accent-base), var(--action-fill-hover), var(--accent-base));
    color: var(--ink-on-gold);
}
/* Category identity — the second hue is deliberate per-category colour, not
   brand, so it stays literal (THEME_COLOR_SYSTEM.md §4.2). The gold stop and
   the ink both come from the contract, so a re-tone still reads correctly. */
.bg-gold-purple{     background: linear-gradient(0deg, var(--state-info) 0%, var(--accent-text) 79%); color: var(--ink-on-light); }
.bg-gold-pink{       background: linear-gradient(0deg, var(--state-info) 0%, var(--accent-text) 79%); color: var(--ink-on-light); }
.bg-gold-light-blue{ background: linear-gradient(0deg, var(--state-info) 0%, var(--accent-text) 79%); color: var(--ink-on-light); }
.bg-gold-red{        background: linear-gradient(0deg, var(--state-info) 0%, var(--accent-text) 79%); color: var(--ink-on-light); }   /* IMG-COLOUR C19: .bg-gold-purple's accent gradient (was --state-danger); shows only with the art off */
.bg-gold-green{      background: linear-gradient(0deg, var(--state-success) 0%, var(--accent-text) 79%); color: var(--ink-on-gold); }
.bg-gold-brown{      background: linear-gradient(0deg, var(--state-danger) 0%, var(--accent-text) 79%); color: var(--ink-on-gold); }
.bg-gold-orange{     background: linear-gradient(0deg, var(--state-danger) 0%, var(--accent-text) 79%); color: var(--ink-on-gold); }
.bg-gold-gradient{ background: linear-gradient(to bottom, var(--accent-deep), var(--accent-deep)); }
.bg-darkGold-white{ background: linear-gradient(90deg, var(--accent-base) 0%, var(--action-fill-hover) 50%); }
.bg-dashboard{
    background-repeat: round;
    background-image: url('../assets/images/page/member/bg-dashboard.png');
}
.balance-container-background{
    background-repeat: round;
    background-image:url('../assets/images/page/member/balance-background.png');
}
.balance-text-container{ background: linear-gradient(to right, var(--accent-deep), var(--accent-base), var(--accent-deep)); }

/* Solid backgrounds — category identity (§4.2), ink from the contract. */
.bg-purple{ background: var(--state-info); color: var(--ink-on-light); }
.bg-pink{ background: var(--state-info); color: var(--ink-on-light); }
.bg-light-blue{ background: var(--state-info); color: var(--ink-on-light); }
.bg-green{ background: var(--state-success); color: var(--ink-on-success); }
.bg-brown{ background: var(--state-danger); color: var(--ink-on-danger); }
.bg-orange{ background: var(--state-danger); color: var(--ink-on-danger); }

.glass{
    background: var(--surface-skeleton);
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur( 7px );
    -webkit-backdrop-filter: blur( 7px );
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
}

/* Nav */
/* --bs-dark / --bs-highlight-color are BOOTSTRAP's own :root names, shipped by
   the CDN stylesheet. Nothing in this theme declares them, so these two links
   rendered in Bootstrap's stock greys and no re-tone of the seeds could reach
   them. Repointed onto the fixed-dark chrome pair (.nav-dark sits on the gold
   chrome, which does not follow the canvas), so the pairing holds at every
   palette. */
.nav-dark{
    --bs-link-color: var(--ink-on-gold);
    --bs-link-hover-color: var(--ink-on-light-dim);
    --bs-nav-link-font-weight: 600;
}
.nav-background{ background: var(--surface-chrome); }
.nav-footer li a{ --bs-nav-link-color: var(--accent-bright); }
/* IMG-COLOUR C13 (F2): the bottom bar is the navy chrome with a gold top rule; the active pill stays gold with navy ink.
   The rule is !important because the <ul> (partials/nav-mobile.ejs:1) carries Bootstrap .shadow (box-shadow … !important). */
.nav-mobile{
    background: var(--surface-chrome);
    box-shadow: inset 0 2px 0 var(--accent-base) !important;
}
.nav-mobile .nav-link.active, .nav-pills .show>.nav-link{
    background: radial-gradient(circle, var(--accent-base) 0%, var(--accent-deep) 100%);
}
.nav-mobile li a{
    --bs-nav-link-color: var(--ink-on-chrome);
    --bs-nav-underline-link-active-color: var(--accent-deep);
    --bs-nav-pills-link-active-color: var(--ink-on-gold);
    --bs-nav-pills-link-active-bg: var(--accent-bright);
    --bs-nav-pills-border-radius: var(--radius-pill);
    --bs-nav-link-hover-color: var(--accent-bright);
}

/* Animation */
.hoverBounceIn{
    transform: perspective(1px) translateZ(0);
    transition-duration: 0.5s;
}
.hoverBounceIn:hover,.hoverBounceIn:active,.hoverBounceIn:focus{
    transform: scale(1.1);
    transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
}
.hoverGrow{
    transform: perspective(1px) translateZ(0);
    transition-duration: 0.3s;
    transition-property: transform;
}
.hoverGrow:hover,.hoverGrow:active,.hoverGrow:focus{ transform: scale(1.1); }
.hoverShrink{
    transform: perspective(1px) translateZ(0);
    transition-duration: 0.3s;
    transition-property: transform;
}
.hoverShrink:hover,.hoverShrink:active,.hoverShrink:focus{ transform: scale(0.9); }

.img-dropshadow-1{ filter: drop-shadow(2px 2px 2px var(--bg-scrim)); }
.fs-7{ font-size: 0.75em; }

.popover-danger{
    --bs-popover-header-bg: var(--fill-danger);
    --bs-popover-header-color: var(--ink-on-danger);
}
.popover-main-color{
    --bs-popover-header-bg: var(--accent-base);
    --bs-popover-header-color: var(--ink-on-gold);
}

/* Button variants used across webold3 pages.

   Every one of these rules used to be written in BOOTSTRAP's palette names —
   --bs-light, --bs-white, --bs-primary, --bs-success, --bs-warning, --bs-info.
   Those are declared by the CDN bootstrap.min.css at :root, not by this theme,
   so the buttons rendered in stock Bootstrap colours (primary = #0d6efd blue)
   and a re-tone of the six seeds could not move them at all. Two of the pairs
   were also unreadable as written: --bs-warning #ffc107 on --bs-white measured
   1.6:1 and --bs-primary #0d6efd on --bs-light 3.9:1.

   Rewritten rule-by-rule onto the contract's action pair, so the surface and
   the ink on it move together: soft tint + semantic ink at rest, solid fill +
   its own auto-ink on hover/active. No markup in this theme carries any of
   these five classes today, so nothing changes on screen; they are kept because
   shared /assets markup and admin-authored content can still use them. */
.btn-soft-green{
    --bs-btn-bg:var(--soft-success);
    --bs-btn-color:var(--ink-success);
    --bs-btn-active-color:var(--ink-on-success);
    --bs-btn-active-bg: var(--fill-success);
    --bs-btn-active-border-color:var(--bs-btn-border-color);
    --bs-btn-hover-color:var(--ink-on-success);
    --bs-btn-hover-bg:var(--fill-success);
}
.btn-soft-warning{
    --bs-btn-bg:var(--soft-warning);
    --bs-btn-active-bg:var(--fill-warning);
    --bs-btn-color:var(--ink-warning);
    --bs-btn-active-color:var(--ink-on-warning);
    --bs-btn-hover-color:var(--ink-on-warning);
    --bs-btn-hover-bg:var(--fill-warning);
}
.btn-soft-info{
    --bs-btn-bg:var(--state-info-tint);
    --bs-btn-active-bg:var(--state-info);
    --bs-btn-color:var(--ink-accent);
    --bs-btn-hover-color:var(--ink-on-light);
    --bs-btn-hover-bg:var(--state-info);
    --bs-btn-active-color:var(--ink-on-light);
    --bs-bg-opacity: 0.25;
    background-image: var(--bs-gradient)!important;
}
.btn-soft-primary{
    --bs-btn-bg:var(--action-soft);
    --bs-btn-active-bg:var(--action-fill);
    --bs-btn-color:var(--ink-on-soft);
    --bs-btn-active-color:var(--ink-on-action);
    --bs-btn-hover-color:var(--ink-on-action);
    --bs-btn-hover-bg:var(--action-fill);
}
.btn-soft-white{
    --bs-btn-bg:var(--surface-light);
    --bs-btn-active-bg:var(--action-fill);
    --bs-btn-color:var(--ink-on-light);
    --bs-btn-active-color:var(--ink-on-action);
    --bs-btn-hover-color:var(--ink-on-action);
    --bs-btn-hover-bg:var(--action-fill);
}

/* ── Browser autofill ────────────────────────────────────────────────────────
   Added 2026-09-15. No theme had ANY -webkit-autofill rule, which is a hole the
   polarity work would otherwise have left open: Chrome paints an autofilled
   field with its own background AND its own -webkit-text-fill-color, and
   -webkit-text-fill-color beats `color`. So an input that this pass just made
   legible at every palette goes back to browser-default styling the moment the
   field is autofilled — a pale box with dark text sitting in a dark theme.

   The 1000px inset box-shadow is the standard way to repaint that background,
   since Chrome ignores `background` here. Both halves are canvas-derived, so
   they move together exactly like the input they replace: surface is the canvas
   lifted 8% toward the light pole, ink is the canvas-dependent ladder.
   caret-color is set too — it is a text colour, and it inherits nothing. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: var(--ink-hi);
  -webkit-box-shadow: 0 0 0 1000px color-mix(in srgb, var(--ink-bright) 8%, var(--seed-canvas)) inset;
          box-shadow: 0 0 0 1000px color-mix(in srgb, var(--ink-bright) 8%, var(--seed-canvas)) inset;
  caret-color: var(--ink-hi);
  transition: background-color 5000s ease-in-out 0s;
}

/* ── webold3-img image skin: the member header's mobile balance pill (IMG-BALANCE, 2026-09-30) ───────────────────────────
   Lives here, not in css/skin.css: skin.css is linked only from pages/index.ejs, while this header (partials/nav.ejs:122-129,
   the "col-7 d-block d-lg-none" balance span) is on the member pages, which all link this file. Same gating as skin.css:
   geometry + fallback on the default palette only (bare body, from the first paint), the image also needs the theme class.
   Art: docs/design/webold3-img/art/balance-pill.png 239x89 -> images/skin/balance-pill-v1.webp. Horizontal 3-slice at a fixed
   32 px height (scale 32/89): the coin end (art x 0-88) is drawn 32 px wide and the rounded right end (art x 195-238) 15.82 px;
   only the plain blue middle stretches, so any balance ("0฿" … "1,234,567.89฿") fits. White text (>= 4.95:1 on the middle,
   measured on the art), vertically centred, starting after the coin. The span, its label (#showRealBalanceNavMobile, set by
   reloadRealBalanceNav) and the "฿" node are untouched; the span holds no icon. Desktop (>= 992 px) keeps its own balance
   (the showRealBalanceNav pill in the dark user box). Fallback (art missing or not yet requested): a navy chrome pill body (IMG-COLOUR C14). */
:root:not(:has(style#dp-overrides:not(:empty))):not(:has(style#mh-theme-seeds)) body span:has(> #showRealBalanceNavMobile){
  display:inline-flex; align-items:center; box-sizing:border-box; height:32px; padding:0 4px 0 2px !important;
  border-style:solid; border-color:transparent; border-width:0 16px 0 32px; border-radius:0;
  font-size:.875rem; line-height:1; white-space:nowrap; color:var(--ink-on-chrome) !important;
  background-color:transparent !important; background-image:linear-gradient(var(--surface-chrome),var(--surface-chrome));
  background-clip:padding-box; background-origin:padding-box;
  /* 4 px in from the top and bottom: inside the art's opaque blue body (art rows 7-82 of 89), so it never peeks out */
  background-size:100% calc(100% - 8px); background-position:center; background-repeat:no-repeat}
:root:not(:has(style#dp-overrides:not(:empty))):not(:has(style#mh-theme-seeds)) body.theme-webold3-img span:has(> #showRealBalanceNavMobile){
  border-image:url('images/skin/balance-pill-v1.webp') 0 44 0 89 fill / 0 15.82px 0 32px / 0 stretch}

/* ── Member header logo (IMG-LOGO2, 2026-09-30): on phones and tablets (< 992 px) the logo moves right so its centre sits at
   --logo-x % of the header's width (sabaideelotto: the plain blue between the lotus / gold ribbon and the temples of the
   banner art). It is only shifted (position:relative + translate): its size, its place in the layout and its vertical
   position do not change. Desktop (>= 992 px) unchanged. */
.main-banner-background{
  --logo-x: 30;   /* the logo's centre in % of the header width: nudge this one number (e.g. 28 or 32) */
}
@media not all and (min-width: 992px){
  .main-banner-background{container-type:inline-size; --logo-col-left:32px}
  /* 1cqw = 1 % of the header's content box, which is 24 px narrower than the header (12 px side padding): 1 % of the header
     width = 1cqw + .24px. Where the logo's column starts, from the header's left edge (Bootstrap containers: fluid < 576,
     540 px, 720 px): */
  @media (min-width: 576px){ .main-banner-background{--logo-col-left:calc(50cqw - 238px)} }
  @media (min-width: 768px){ .main-banner-background{--logo-col-left:calc(50cqw - 240px)} }
  .main-banner-background .col-5 > a > img{position:relative; translate:-50% 0;
    left:calc(var(--logo-x) * (1cqw + .24px) - var(--logo-col-left))}
}
/* phones: never closer than 6 px to the balance pill, even with the longest balance ("1,234,567.89฿" = 146 px, left edge at
   header width - 226 px); caps the centre at 90.625 % of the header width - 222.85 px (bites only below ~375 px) */
@media not all and (min-width: 576px){
  .main-banner-background .col-5 > a > img{left:calc(min(var(--logo-x) * (1cqw + .24px), 90.625cqw - 201.1px) - var(--logo-col-left))}
}

/* ══ IMG-COLOUR (2026-09-30): blue / gold / white. docs/featurelog/webold3-img-colour-plan-20260930.md §D ══ */
/* Shared (assets/css/main.css) and Bootstrap classes, re-coloured here: this file loads after both, and a page's own
   <style> loads after this file. The theme's own rules changed in place above: C5 .bg-red-gradient, C13 .nav-mobile,
   C14 the IMG-BALANCE fallback fill and ink, C19 .bg-gold-red. Tokens only (layouts/main.ejs). */

/* C1 + C15: the shared "main-color" names (main.css:2-11 ship two fixed yellows and a grey) follow the theme. */
:root{
    --main-color: var(--accent-base);               /* C1 */
    --main-color-subtle: var(--accent-base);        /* C1 */
    --main-color-nav-mobile: var(--accent-base);    /* C1 */
    --main-color-footer: var(--surface-chrome);     /* C15 */
}

/* C1: with both yellows on one gold, a class whose fill and ink both come from them gets the gold pair: the balance
   badges (.text-bg-main-color-subtle), the logout and modal-footer .btn-main-color (its hover/active/disabled ink was
   never set, so it inherited), and the quick-amount .btn-outline-main-color on hover and press. */
.text-bg-main-color-subtle{
    background-color: var(--accent-base) !important;
    color: var(--ink-on-gold) !important;
}
.btn-main-color{
    --bs-btn-color: var(--ink-on-gold);
    --bs-btn-hover-color: var(--ink-on-gold);
    --bs-btn-active-color: var(--ink-on-gold);
    --bs-btn-disabled-color: var(--ink-on-gold);
}
.btn-outline-main-color{
    --bs-btn-hover-color: var(--ink-on-gold);
    --bs-btn-active-color: var(--ink-on-gold);
}

/* C2: the modal headers (.text-bg-main-color, main.css:60-64) take the gold band with navy ink, the pair
   partials/modal/price-rate.ejs:12-13 uses. Their close glyphs (the .fa-xmark in .btn-close, .light-gold-text) and
   .text-dark titles take the same ink. */
.text-bg-main-color{
    background: var(--surface-gold) !important;
    color: var(--ink-on-gold) !important;
}
.text-bg-main-color .btn-close{ --bs-btn-close-color: var(--ink-on-gold); }
.text-bg-main-color .btn-close,
.text-bg-main-color .light-gold-text,
.text-bg-main-color .text-dark{ color: var(--ink-on-gold) !important; }

/* C3: the bars (.bg-main-color, main.css:65-68): the side-menu header (partials/nav.ejs:23), the announcement bar
   (dashboard.ejs:112) and the เลขเด่น modal headers sit on the page blue with white ink and a gold rule. The pill bar's
   ring is !important to beat its Bootstrap .shadow-sm. */
.bg-main-color{
    background: var(--surface-page) !important;
    color: var(--ink-on-page);
    box-shadow: inset 0 -2px 0 var(--accent-base);
}
.bg-main-color.rounded-pill{ box-shadow: inset 0 0 0 1.5px var(--accent-base) !important; }
#nav-close-btn{ color: var(--ink-on-page); }

/* C4: the rules modal #policy (partials/modal/policy.ejs; a copy in pages/register.ejs) on the price-rate pattern
   (price-rate.ejs:7-8): the modal rung with white ink (!important: the markup carries Bootstrap .text-dark), the body one
   rung down, and the four Bootstrap .bg-danger/.text-white section bars gold on blue. */
#policy .modal-content{
    background: var(--surface-modal);
    color: var(--ink-on-modal) !important;
    border-color: var(--line-strong);
}
#policy .modal-body{ background: var(--elev-2); }
#policy .modal-body .bg-danger{
    background: color-mix(in srgb, var(--accent-base) 12%, var(--elev-2)) !important;   /* = --accent-tint over the body rung, opaque */
    color: var(--ink-accent) !important;
    box-shadow: inset 0 0 0 1px var(--accent-base);
}

/* C6: Bootstrap's green "go" buttons (ส่งโพย, รับยอด, ฝากเงิน, บันทึก …) move to the action pair, mapped through --bs-btn-*
   like the btn-soft-* rules above. The outline variant (คัดลอก, ดึงชุดตัวเลข) sits on white (the price modal, the pull-poy
   table), so at rest it is paper with navy ink and a deep-gold outline; it fills gold on hover and press. */
.btn-success{
    --bs-btn-color: var(--ink-on-action);
    --bs-btn-bg: var(--action-fill);
    --bs-btn-border-color: var(--action-fill);
    --bs-btn-hover-color: var(--ink-on-action);
    --bs-btn-hover-bg: var(--action-fill-hover);
    --bs-btn-hover-border-color: var(--action-fill-hover);
    --bs-btn-active-color: var(--ink-on-action);
    --bs-btn-active-bg: var(--action-fill-active);
    --bs-btn-active-border-color: var(--action-fill-active);
    --bs-btn-disabled-color: var(--ink-on-action);
    --bs-btn-disabled-bg: var(--action-fill);
    --bs-btn-disabled-border-color: var(--action-fill);
    --bs-btn-focus-box-shadow: 0 0 0 0.25rem var(--ring-focus);
}
.btn-outline-success{
    --bs-btn-color: var(--ink-on-light);
    --bs-btn-bg: var(--surface-light);
    --bs-btn-border-color: var(--accent-deep);
    --bs-btn-hover-color: var(--ink-on-action);
    --bs-btn-hover-bg: var(--action-fill);
    --bs-btn-hover-border-color: var(--action-fill);
    --bs-btn-active-color: var(--ink-on-action);
    --bs-btn-active-bg: var(--action-fill-active);
    --bs-btn-active-border-color: var(--action-fill-active);
    --bs-btn-disabled-color: var(--ink-on-light);
    --bs-btn-disabled-bg: var(--surface-light);
    --bs-btn-disabled-border-color: var(--accent-deep);
    --bs-btn-focus-box-shadow: 0 0 0 0.25rem var(--ring-focus);
}

/* C6/C9 (review): the เลขชุด - ดึงโพย modal (#pull-poy-modal; government/stock.ejs:85, yeekee(-vip)-buy.ejs:901) is an inline
   --surface-card modal. Its search placeholder had Bootstrap's dark ink on the field's inline --surface-hover (1.49:1) and
   takes the hover rung's ladder step; the footer "ปิด" (Bootstrap's stock secondary outline, 2.36:1) is a neutral outline whose
   hover and press land on the hover rung. Mapped through --bs-btn-* so Bootstrap's own hover fill never meets the new ink. */
#pull-poy-modal .form-control::placeholder{ color: var(--ink-mid); opacity: 1; }
#pull-poy-modal .btn-outline-secondary{
    --bs-btn-color: var(--ink-mid);
    --bs-btn-border-color: var(--line-strong);
    --bs-btn-hover-color: var(--ink-hi);
    --bs-btn-hover-bg: var(--surface-hover);
    --bs-btn-hover-border-color: var(--line-strong);
    --bs-btn-active-color: var(--ink-hi);
    --bs-btn-active-bg: var(--surface-hover);
    --bs-btn-active-border-color: var(--line-strong);
    --bs-btn-focus-box-shadow: 0 0 0 0.25rem var(--ring-focus);
}

/* C11: footer-leak guard. pages/index.ejs:60-71 styles every [data-bs-target="#price-rate"|"#policy"] as a green 50 px pill,
   the footer links too (partials/footer.ejs:128, 133, 158, 161). These are Bootstrap's own .nav-underline .nav-link values,
   so the guard is a no-op once that rule is scoped to the login panel (E6); keyboard focus keeps Bootstrap's ring. The
   links' colour stays with their .text-white / .text-dark. */
footer .nav-link[data-bs-target="#price-rate"],
footer .nav-link[data-bs-target="#policy"]{
    display: block;
    height: auto;
    background: none;
    border: 0;
    border-bottom: var(--bs-nav-underline-border-width) solid transparent;
    border-radius: 0;
}
footer .nav-link[data-bs-target="#price-rate"]:not(:focus-visible),
footer .nav-link[data-bs-target="#policy"]:not(:focus-visible){ box-shadow: none !important; }

/* C15: the footer column pills (Bootstrap primary/info/warning/success with bg-gradient and .text-light/.text-white) are
   flat gold with navy ink on the navy panel (--main-color-footer above). The "site online" dot is no .badge: it stays green. */
.bg-main-color-footer .badge.rounded-pill:is(.bg-primary, .bg-info, .bg-warning, .bg-success){
    background-color: var(--accent-base) !important;
    background-image: none !important;
    color: var(--ink-on-gold) !important;
}

/* C1b: the shared yellows that read main.css's fixed -rgb triplets, which C1's :root re-point cannot reach. Only the ones
   webold3-img uses: the header balance pill (partials/nav.ejs:124; IMG-BALANCE paints it under the art, so this is its
   art-off look, fill and ink together), the digit boxes lottery-core.js builds in #pincode / #pincode_2 (lottery-board.css
   repaints them where it is linked, with the same gold edge), and bank.ejs's help text (its own .bank-modal .text-gold wins). */
.bg-main-color-subtle{
    background-color: var(--accent-base) !important;
    color: var(--ink-on-gold);
}
/* the pill also carries .text-main-color, which lottery-board.css:27 forces to --ink-on-card !important on the bet pages */
.bg-main-color-subtle.text-main-color{ color: var(--ink-on-gold) !important; }
.bg-main-color-subtle-rgb{ background-color: var(--accent-tint); }
.border-main-color{ border-color: var(--accent-base) !important; }
.text-gold{ color: var(--accent-text); }

/* C17: Bootstrap's semantic utilities and the shared .text-red (main.css) follow the seeds, fill and ink together (white on
   --state-success / --state-danger is 3.30 / 3.76:1). .text-bg-* always; .bg-* only on badges and buttons, where the ink goes
   with it (a .bg-opacity-* tint keeps Bootstrap's own; the footer pills are C15's). */
.text-bg-success{ background-color: var(--state-success) !important; color: var(--ink-on-success) !important; }
.text-bg-danger{ background-color: var(--state-danger) !important; color: var(--ink-on-danger) !important; }
:is(.text-bg-success, .text-bg-danger) :is(.text-white, .text-light){ color: inherit !important; }
:is(.badge, .btn, button).bg-success:not([class*="bg-opacity-"]){
    background-color: var(--state-success) !important;
    color: var(--ink-on-success) !important;
}
:is(.badge, .btn, button).bg-danger:not([class*="bg-opacity-"]){
    background-color: var(--state-danger) !important;
    color: var(--ink-on-danger) !important;
}
/* Text: the semantic inks on canvas surfaces. On fixed-light surfaces (light utilities, Bootstrap's white tables, cards and
   modals except the repainted ones, the inline white panels, lottery/index's .lotto-time) the hue leans on the dark pole:
   65% (the cashback modal's inline pair uses 70%) keeps >= 4.5:1 on Bootstrap's greys as well. */
.text-success{ color: var(--ink-success) !important; }
.text-danger{ color: var(--ink-danger) !important; }
.text-red{ color: var(--ink-danger); }
:where(.bg-white, .bg-light, .list-group-item-light, .table-secondary-new, .table, .card, .lotto-time,
    [style*="background-color: var(--ink-bright)"], [style*="background-color:var(--ink-bright)"],
    [style*="background: var(--ink-bright)"], [style*="background:var(--ink-bright)"],
    .modal-content:not(:is(#policy, #price-rate, #registerModal, #elementModal, #modalSelectCoupon, .bank-modal, .credit-promo-modal, .promo-page) *)) .text-success,
.text-success:where(.bg-white, .bg-light, .list-group-item-light, .table-secondary-new, .lotto-time){
    color: color-mix(in srgb, var(--state-success) 65%, var(--ink-on-light)) !important;
}
:where(.bg-white, .bg-light, .list-group-item-light, .table-secondary-new, .table, .card, .lotto-time,
    [style*="background-color: var(--ink-bright)"], [style*="background-color:var(--ink-bright)"],
    [style*="background: var(--ink-bright)"], [style*="background:var(--ink-bright)"],
    .modal-content:not(:is(#policy, #price-rate, #registerModal, #elementModal, #modalSelectCoupon, .bank-modal, .credit-promo-modal, .promo-page) *)) :is(.text-danger, .text-red),
:is(.text-danger, .text-red):where(.bg-white, .bg-light, .list-group-item-light, .table-secondary-new, .lotto-time){
    color: color-mix(in srgb, var(--state-danger) 65%, var(--ink-on-light)) !important;
}
/* the add-bank modal sits on the modal rung (bank.ejs's .bank-modal .modal-content): its required-field asterisks keep the
   semantic ink (4.48:1, the F5 level). Goes with that bank.ejs change: on the old deep-gold fill this ink would be 1.30:1. */
.bank-modal .text-danger{ color: var(--ink-danger) !important; }

/* C16: the shared lottery-core.js re-skins its SweetAlert popups crimson at runtime (<style id="hh-swal-theme">, appended last;
   iconColor lands inline), so these need the extra .swal2-container weight or !important. The popups sit on the modal rung
   with its inks and gold accents; confirm is the action pair, cancel/deny ("ยกเลิก", "✎ แก้ไขโพย": back out, nothing is
   removed) a neutral raised button. Icons: error --state-danger, warning/question/info gold. */
.swal2-container .hh-swal.swal2-popup{
    background: var(--surface-modal);
    color: var(--ink-on-modal);
    border-color: var(--line-strong);
    box-shadow: var(--shadow-lg);
}
.swal2-container .hh-swal .swal2-title{ color: var(--ink-on-modal); }
.swal2-container .hh-swal .swal2-html-container{ color: var(--ink-mid); }
.swal2-container .hh-swal .swal2-icon:is(.swal2-warning, .swal2-question, .swal2-info){
    color: var(--accent-base) !important;
    border-color: var(--accent-base) !important;
}
.swal2-container .hh-swal .swal2-icon.swal2-error,
.swal2-icon.swal2-error[style*="color"]{
    color: var(--state-danger) !important;
    border-color: var(--state-danger) !important;
}
.swal2-container .hh-swal .swal2-icon.swal2-error [class^="swal2-x-mark-line"],
.swal2-icon.swal2-error[style*="color"] [class^="swal2-x-mark-line"]{ background-color: var(--state-danger) !important; }
.swal2-container .hh-swal .swal2-icon.swal2-success{ color: var(--state-success) !important; border-color: var(--state-success) !important; }
.swal2-container .hh-swal .swal2-icon.swal2-success [class^="swal2-success-line"]{ background-color: var(--state-success) !important; }
.swal2-container .hh-swal .swal2-icon.swal2-success .swal2-success-ring{ border-color: color-mix(in srgb, var(--state-success) 30%, transparent) !important; }
.swal2-container .hh-swal :is(.btn-success, .swal2-styled.swal2-confirm){
    background: var(--action-fill) !important;
    color: var(--ink-on-action) !important;
    box-shadow: 0 8px 20px var(--accent-glow) !important;
}
.swal2-container .hh-swal :is(.btn-success, .swal2-styled.swal2-confirm):hover{ background: var(--action-fill-hover) !important; }
.swal2-container .hh-swal :is(.btn-success, .swal2-styled.swal2-confirm):active{ background: var(--action-fill-active) !important; }
.swal2-container .hh-swal :is(.btn-danger, .swal2-styled.swal2-cancel, .swal2-styled.swal2-deny){
    background: var(--surface-raised) !important;
    color: var(--ink-on-raised) !important;
    border-color: var(--line-strong) !important;
    box-shadow: none !important;
}
.swal2-container .hh-swal :is(.btn-danger, .swal2-styled.swal2-cancel, .swal2-styled.swal2-deny):hover{ background: var(--surface-hover) !important; }
.swal2-container .hh-swal :is(.btn, .swal2-styled):focus-visible{ box-shadow: 0 0 0 3px var(--ring-focus) !important; }
.hh-swal .hh-alert-head{
    background: var(--accent-tint);
    border-color: color-mix(in srgb, var(--accent-base) 35%, transparent);
    color: var(--ink-accent);
}
.hh-swal .hh-note-warn{ color: var(--accent-text); }
/* the rate tables inside the popups: Bootstrap's white cells go transparent on the modal rung, the head is the gold band */
.hh-swal .hh-rate-table{ box-shadow: var(--shadow-sm); }
.hh-swal .hh-rate-table .table{
    --bs-table-bg: transparent;
    --bs-table-color: var(--ink-on-modal);
    --bs-table-border-color: var(--line);
    --bs-table-hover-bg: transparent;
    --bs-table-hover-color: var(--ink-on-modal);
}
.hh-swal .hh-rate-table thead th{ background: var(--surface-gold); color: var(--ink-on-gold); }
.hh-swal .hh-rate-table tbody td{ border-color: var(--line); color: var(--ink-on-modal); }
.hh-swal .hh-rate-table tbody tr:nth-child(even){ background: color-mix(in srgb, var(--ink-hi) 4%, transparent); }
.hh-swal .hh-rate-table tbody tr:hover{ background: var(--accent-tint); }
/* inline colours in the popup HTML, told apart by the popup's icon: the crimson totals of the confirm (warning) popups take
   the gold text tier; the green "still allowed" count of the quota (error) popup keeps its meaning on the semantic ink */
.swal2-container .hh-swal.swal2-icon-warning .swal2-html-container [style*="color"]{ color: var(--accent-text) !important; }
.swal2-container .hh-swal.swal2-icon-error .swal2-html-container [style*="color"]{ color: var(--ink-success) !important; }
.hh-swal .text-success{ color: var(--ink-success) !important; }
.hh-swal :is(.text-danger, .text-red){ color: var(--ink-danger) !important; }
/* the price-modal stake table (stakePageHtml2 into #stake_content_form2, Bootstrap's white cells): the group title and the
   number cells take the bet-type category (C18) of their table (#title_<type>); the remove button stays red (F4) */
table[id^="title_bet_three"] .stake-form-group-title{ --bs-table-bg: color-mix(in srgb, var(--accent-base) 18%, var(--surface-light)); color: var(--ink-on-light) !important; }
table[id^="title_bet_two"] .stake-form-group-title{ --bs-table-bg: color-mix(in srgb, var(--state-info) 18%, var(--surface-light)); color: var(--ink-on-light) !important; }
table[id^="title_bet_run"] .stake-form-group-title{ --bs-table-bg: color-mix(in srgb, var(--accent-deep) 22%, var(--surface-light)); color: var(--ink-on-light) !important; }
table[id^="title_bet_three"] td.text-bg-success{ background-color: var(--accent-base) !important; color: var(--ink-on-gold) !important; }
table[id^="title_bet_two"] td.text-bg-success{ background-color: var(--state-info) !important; color: var(--ink-on-light) !important; }
table[id^="title_bet_run"] td.text-bg-success{ background-color: var(--accent-deep) !important; color: var(--ink-on-gold) !important; }
/* the selected bet-type badges (setBadge / setBadge2: three = .text-bg-danger, two = .text-bg-primary, run = .text-bg-success) */
.lotto-selected-badges .badge.text-bg-danger{ background-color: var(--accent-base) !important; color: var(--ink-on-gold) !important; }
.lotto-selected-badges .badge.text-bg-primary{ background-color: var(--state-info) !important; color: var(--ink-on-light) !important; }
.lotto-selected-badges .badge.text-bg-success{ background-color: var(--accent-deep) !important; color: var(--ink-on-gold) !important; }
/* "ไม่พบเลขเด่นวันนี้" (getNews into #showNewsLottery) is information, not an error: a gold-tinted blue chip, readable inside
   the white เลขเด่น modal body */
#showNewsLottery .alert-danger{
    background-color: var(--surface-page) !important;
    background-image: linear-gradient(var(--accent-tint), var(--accent-tint));
    color: var(--accent-text) !important;
    box-shadow: inset 0 0 0 1px var(--accent-base);
}

/* C19b: the home lottery-card title pills (partials/lottery-section.ejs:26, shared .bg-red !important) show only with the art
   off; there they take the accent pair. Gated: under the art a missing pill image still falls back to the red with the art's
   white title (skin.css), which must not change. */
:root:is(:has(style#dp-overrides:not(:empty)), :has(style#mh-theme-seeds)) .bg-red{
    background-color: var(--accent-base) !important;
    color: var(--ink-on-gold);
}

/* C20 (owner F8): the lucky-draw floating group follows the palette. lucky-draw-widget.css (byte-frozen) is linked from the
   footer partial, after this file, so these win on weight (#id.class). Fills gold, the menu buttons the chrome; the toggle and
   the restore tab are already gold through main.ejs's --theme-gold* names. Admin colours (per-campaign wheel/box/shop/check-in
   designs, the web-chat colours) are set inline or on #mh-web-chat-root and stay as the admin set them. */
#luckyDrawFloatingGroup.ldx-float-group .ldx-float-btn{
    background: var(--surface-chrome);
    border-color: color-mix(in srgb, var(--accent-base) 35%, transparent);
    color: var(--ink-on-chrome);
    box-shadow: var(--shadow-lg);
}
#luckyDrawFloatingGroup.ldx-float-group .ldx-float-btn:hover{
    border-color: color-mix(in srgb, var(--accent-base) 60%, transparent);
    box-shadow: var(--shadow-lg), 0 0 20px var(--accent-glow);
}
#luckyDrawFloatingGroup.ldx-float-group .ldx-float-btn b{ color: var(--ink-on-chrome); }
#luckyDrawFloatingGroup.ldx-float-group .ldx-float-btn small{ color: var(--accent-bright); }
#luckyDrawFloatingGroup.ldx-float-group .ldx-float-btn .ldx-float-icon{
    background: color-mix(in srgb, var(--accent-base) 16%, transparent);
    border-color: color-mix(in srgb, var(--accent-base) 35%, transparent);
    color: var(--accent-text);
}
#luckyDrawFloatingGroup.ldx-float-group .ldx-float-badge{
    background: var(--accent-base);
    color: var(--ink-on-gold);
    box-shadow: 0 6px 16px var(--accent-glow);
}
#luckyDrawFloatingGroup.ldx-float-group .ldx-float-hide:hover{ background: var(--accent-base); color: var(--ink-on-gold); }
#luckyDrawFloatingGroup.ldx-float-group .ldx-float-toggle-badge{
    background: var(--surface-chrome);
    color: var(--ink-on-chrome);
    box-shadow: var(--shadow);
}
#luckyDrawFloatingGroup.ldx-float-group .ldx-float-toggle.has-chat-unread::after{ border-color: color-mix(in srgb, var(--accent-base) 75%, transparent); }
@media (prefers-reduced-motion: no-preference){
    #luckyDrawFloatingGroup.ldx-float-group .ldx-float-toggle.has-chat-unread{ animation-name: img-ldx-unread-pulse; }
}
@keyframes img-ldx-unread-pulse{
    0%, 100%{ box-shadow: 0 8px 22px color-mix(in srgb, var(--surface-page) 28%, transparent), 0 0 0 1px color-mix(in srgb, var(--ink-bright) 12%, transparent), 0 0 18px var(--theme-gold-glow); }
    50%{ box-shadow: 0 8px 22px color-mix(in srgb, var(--surface-page) 28%, transparent), 0 0 0 4px color-mix(in srgb, var(--accent-base) 40%, transparent), 0 0 26px color-mix(in srgb, var(--accent-base) 50%, transparent); }
}

/* Install-time completions (review backlog, 2026-10-01). */
/* C1: the shared .btn-main-color has no pressed fill, so a pressed button went transparent: press it on the action pair. */
.btn-main-color{ --bs-btn-active-bg: var(--action-fill-active); --bs-btn-active-border-color: var(--action-fill-active); }
/* C4: the #policy footer on the price-rate rung (its Bootstrap .bg-light is !important). */
#policy .modal-footer{ background: var(--elev-4) !important; border-top-color: var(--line); }
/* C15: the footer's "รองรับ" label (Bootstrap .text-secondary) on the navy panel: 3.88 -> 6.05. */
.bg-main-color-footer .text-secondary{ color: var(--ink-on-chrome-dim) !important; }
/* C20: the web chat's white rich card and date pill (the widget CSS is frozen): the gold --accent on white was 1.80. */
#mh-web-chat-root .mh-card-desc{ color: var(--ink-on-light-dim); }
#mh-web-chat-root .mh-date-divider span{ color: var(--ink-on-light-dim); }

/* IMG-COLOUR follow-up (owner, 2026-10-01): the two BACKLOG colour questions, colour only; the ported .ejs stay as webold3's.
   TOPWIN prize amounts: the theme's gold text ink instead of the 55% success mix (pages/member/dashboard.ejs:84). The page
   sets --w3-topwin-win on .w3-topwin after this file loads, so this rule is one step more specific. */
section.w3-topwin{ --w3-topwin-win: var(--ink-accent); }
/* The deposit cards' "ขั้นต่ำ" badge (the card builder in pages/member/deposit.ejs:3378-3381 prints it with Bootstrap danger
   classes): a soft gold chip on the fixed light pair, so it does not compete with the gold buttons. */
#showElementDeposit label.radio-tile-label + .badge{
    background-color: color-mix(in srgb, var(--accent-base) 20%, var(--surface-light)) !important;
    border-color: color-mix(in srgb, var(--accent-base) 50%, var(--surface-light)) !important;
    color: var(--ink-on-light) !important;
}
#showElementDeposit label.radio-tile-label + .badge i{ color: var(--accent-deep) !important; }

/* ── Text on the admin background image (2026-10-06, owner: /member/request-all heading unreadable) ───────────────────────
   partials/nav.ejs:3-5 paints the body with settings.bg_image (a photo: bright sky, sun glow) on every page with the nav. Page
   headings placed straight on #page-wrapper (request-all, news, poy, loyalty, promotion-free, get-credit) are white ink over it.
   One reusable halo, .text-on-image: a tight 1 px outline in --seed-ink (the never-flipping dark pole) plus a soft dark glow.
   Default palette only (the gate used above): a preset or published palette may flip the ink to dark, where a dark halo smudges. */
:root:not(:has(style#dp-overrides:not(:empty))):not(:has(style#mh-theme-seeds)) body :is(
    .text-on-image,
    #page-wrapper > :is(h1, h2, h3, h4, h5, h6),
    #page-wrapper > div > p.text-muted.text-center){
    text-shadow:
         1px  0   0 color-mix(in srgb, var(--seed-ink) 85%, transparent),
        -1px  0   0 color-mix(in srgb, var(--seed-ink) 85%, transparent),
         0    1px 0 color-mix(in srgb, var(--seed-ink) 85%, transparent),
         0   -1px 0 color-mix(in srgb, var(--seed-ink) 85%, transparent),
         0    0   6px color-mix(in srgb, var(--seed-ink) 75%, transparent),
         0    0  14px color-mix(in srgb, var(--seed-ink) 55%, transparent);
}
/* The empty / error states those pages print into their content div (<p class="text-muted text-center">: request-all,
   news, poy): Bootstrap's .text-muted is a dark grey (!important) that vanishes on the blue. Page ink instead (tokens only,
   flips with any palette). Empty states inside white panels (numbersets-detail) are deeper than this and keep the grey. */
#page-wrapper > div > p.text-muted.text-center{ color: var(--ink-on-page) !important; }