/* inner-light.css — DEV-091 (test-team PDF 2026-10-13 #12 + the R twins of #3/#4; owner 2026-10-14 00:15 "ทำต่อ", option B):
   the redesigned INNER member pages (lottery list / yeekee rounds — LtShell `.lt-page` · bet page V2 — `.lb-root` · หวยชุด + closed yeekee —
   `.ls-root` / `.yk-root` · member pages, results, game hubs — MbShell `.mb-page` + gl-*) adopt the CLASSIC HOME's tone: the light `#eee`
   panel, WHITE cards, dark text, gold accents exactly as the classic home (views/main.vue + member.css / ruay-refresh.css) uses them;
   the red theme = the same palette with its own red (themes/red.css). SAME STRUCTURE — this file changes tokens, surfaces and colours only.

   Loaded (versioned, DEV-038) by composables/useInnerTone.ts on an in-scope page whose context carries `meta.inner_tone = "light"`
   (bff env INNER_TONE, services/bff/app/inner_tone.py) and whose theme is default / red — blue / gold keep their own classic home tones
   (their inner pages already use those tokens) and never get this sheet or the body class. Every rule is scoped by `body.inner-light`,
   so a dark render (INNER_TONE=dark = today's look) is byte-identical and nothing here can leak.

   Every colour is an existing value of the site (source in the comment next to it — nothing invented):
     member.css .twbox #eee · ruay-refresh.css --rg-gold #d5ad6d / --rg-gold-deep #b47e18 / --rg-edge(-strong) / --rg-shadow / .rg-card #fff #333 /
     .rg-card__cap #fffdf7 #f6efe0 #5a4a1e / .rg-skin .bar-back a #6b4f0d / .rg-menu a.menu-btn #111 · member.css .golden-btn gradient stops ·
     themes/red.css --t-primary-dark #C62828 / --t-primary-darker #B71C1C / #D32F2F · bootstrap.css (loaded on every member page) .alert-* text /
     background / border colours and .form-control border #ced4da · black / white alphas for shadows and mirrored surfaces. */

/* =====================================================================================================================================
   1. tokens — default theme (the classic home palette)
   ===================================================================================================================================== */
body.inner-light .lt-page,
body.inner-light .lb-root,
body.inner-light .ls-root,
body.inner-light .yk-root,
body.inner-light .lb-root:not([data-lt-theme='blue']):not([data-lt-theme='gold']) {
  --lt-bg: #eeeeee;                                   /* member.css .twbox background (the home's menu panel) */
  --lt-card: #ffffff;                                 /* ruay-refresh.css .rg-card / .rg-menu a.menu-btn */
  --lt-card-2: #fffdf7;                               /* ruay-refresh.css .rg-card__cap gradient start */
  --lt-card-3: #f6efe0;                               /* ruay-refresh.css .rg-card__cap gradient end */
  --lt-text: #111111;                                 /* member.css a.menu-btn / ruay-refresh.css .rg-hero .credit-btn (owner: black labels) */
  --lt-text-2: #333333;                               /* ruay-refresh.css .rg-card color */
  --lt-muted: #5a4a1e;                                /* ruay-refresh.css .rg-card__cap color (7.5:1 on #eee, 9:1 on white) */
  --lt-border: rgba(0, 0, 0, 0.08);                   /* ruay-refresh.css .rg-card border */
  --lt-border-strong: rgba(180, 126, 24, 0.6);        /* ruay-refresh.css --rg-edge-strong */
  --lt-primary: #d5ad6d;                              /* ruay-refresh.css --rg-gold (member.css .gold-text #D5AD6D) — FILLS, with the black ink below */
  --lt-primary-dark: #b47e18;                         /* ruay-refresh.css --rg-gold-deep (hover fill) */
  --lt-primary-ink: #111111;                          /* owner 2026-09-28 "เห็นไม่ชัด ขอ font สีดำ" — black labels on the gold buttons */
  --lt-primary-soft: rgba(213, 173, 109, 0.22);       /* --rg-gold at 22 % (tinted chips / washes) */
  --lt-primary-glow: rgba(213, 173, 109, 0.35);       /* --rg-gold at 35 % (button glow) */
  --lt-grad: linear-gradient(160deg, #b47e11, #d5ad6d 30%, #fef1a2 62%, #bc881b);   /* member.css .golden-btn stops (#a54e07 ends dropped: 3.3:1 under black) */
  --lt-accent: #6b4f0d;                               /* ruay-refresh.css .rg-skin .bar-back a — gold-coloured TEXT on white (7.4:1) */
  --lt-ok: #155724;  --lt-ok-soft: #d4edda;           /* bootstrap.css .alert-success text / background */
  --lt-warn: #856404; --lt-warn-soft: #fff3cd;        /* bootstrap.css .alert-warning */
  --lt-bad: #721c24;  --lt-bad-soft: #f8d7da;         /* bootstrap.css .alert-danger */
  --lt-info: #0c5460; --lt-info-soft: #d1ecf1;        /* bootstrap.css .alert-info */
  --lt-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);        /* ruay-refresh.css --rg-shadow */
  --lb-three: #721c24; --lb-three-soft: #f8d7da;      /* 3 ตัว = the danger pair */
  --lb-two: #0c5460;   --lb-two-soft: #d1ecf1;        /* 2 ตัว = the info pair */
  --lb-run: #155724;   --lb-run-soft: #d4edda;        /* เลขวิ่ง = the success pair */
  --pill-bg: #ffffff; --pill-bg-hover: #fffdf7;       /* ruay-refresh.css .rg-skin .bar-back a (white pill) */
  --pill-border: rgba(180, 126, 24, 0.28);            /* ruay-refresh.css --rg-edge */
  --pill-border-hover: rgba(180, 126, 24, 0.6);       /* --rg-edge-strong */
  --pill-text: #6b4f0d; --pill-focus: #b47e18;
  --il-surface: rgba(0, 0, 0, 0.05);                  /* the dark design's rgba(255,255,255,.04–.08) lift, mirrored (keys / rows / tiles inside cards) */
  --il-surface-hover: rgba(0, 0, 0, 0.09);
  --il-ctrl-border: rgba(0, 0, 0, 0.12);              /* border of a control on a white card */
  --il-input-border: #ced4da;                         /* bootstrap.css .form-control border */
  --il-ok-border: #c3e6cb; --il-warn-border: #ffeeba; --il-bad-border: #f5c6cb; --il-info-border: #bee5eb;   /* bootstrap.css .alert-* borders */
  --il-disabled: #6c757d;                             /* bootstrap.css .text-secondary (disabled labels) */
  color: var(--lt-text);
}
body.inner-light .mb-page {
  --mb-bg: #eeeeee; --mb-card: #ffffff; --mb-card-2: #fffdf7; --mb-card-3: #f6efe0;
  --mb-text: #111111; --mb-text-2: #333333; --mb-muted: #5a4a1e;
  --mb-border: rgba(0, 0, 0, 0.08); --mb-border-strong: rgba(180, 126, 24, 0.6);
  --mb-primary: #d5ad6d; --mb-primary-dark: #b47e18; --mb-primary-ink: #111111; --mb-primary-soft: rgba(213, 173, 109, 0.22); --mb-primary-glow: rgba(213, 173, 109, 0.35);
  --mb-grad: linear-gradient(160deg, #b47e11, #d5ad6d 30%, #fef1a2 62%, #bc881b);
  --mb-head-grad: linear-gradient(160deg, rgba(213, 173, 109, 0.3), rgba(213, 173, 109, 0.06) 60%, transparent);
  --mb-accent: #6b4f0d;
  --mb-ok: #155724; --mb-ok-soft: #d4edda; --mb-wait: #856404; --mb-wait-soft: #fff3cd; --mb-bad: #721c24; --mb-bad-soft: #f8d7da; --mb-info: #0c5460; --mb-info-soft: #d1ecf1;
  --mb-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  --pill-bg: #ffffff; --pill-bg-hover: #fffdf7; --pill-border: rgba(180, 126, 24, 0.28); --pill-border-hover: rgba(180, 126, 24, 0.6); --pill-text: #6b4f0d; --pill-focus: #b47e18;
  --il-surface: rgba(0, 0, 0, 0.05); --il-surface-hover: rgba(0, 0, 0, 0.09); --il-ctrl-border: rgba(0, 0, 0, 0.12); --il-input-border: #ced4da;
  --il-ok-border: #c3e6cb; --il-warn-border: #ffeeba; --il-bad-border: #f5c6cb; --il-info-border: #bee5eb; --il-disabled: #6c757d;
  color: var(--mb-text);
}

/* =====================================================================================================================================
   2. tokens — red theme: the same classic palette with the theme's red (themes/red.css) where default uses gold
   ===================================================================================================================================== */
body.inner-light .lt-page[data-lt-theme='red'],
body.inner-light .lb-root[data-lt-theme='red'],
body.inner-light .ls-root[data-lt-theme='red'],
body.inner-light .yk-root[data-lt-theme='red'],
body.inner-light .lb-root[data-lt-theme='red']:not([data-lt-theme='blue']):not([data-lt-theme='gold']) {
  --lt-primary: #c62828;                              /* red.css --t-primary-dark (white ink 6.3:1) */
  --lt-primary-dark: #b71c1c;                         /* red.css --t-primary-darker */
  --lt-primary-ink: #ffffff;                          /* red.css --t-text-white */
  --lt-primary-soft: rgba(229, 57, 53, 0.12);         /* --t-primary #E53935 at 12 % */
  --lt-primary-glow: rgba(229, 57, 53, 0.3);
  --lt-grad: linear-gradient(160deg, #b71c1c, #c62828 55%, #d32f2f);   /* red.css --t-btn-primary-bg stops (the pink #FFCDD2 dropped: white ink) */
  --lt-accent: #b71c1c;                               /* red TEXT on white (7.2:1) */
  --lt-border-strong: rgba(198, 40, 40, 0.45);
  --pill-text: #b71c1c; --pill-border: rgba(198, 40, 40, 0.3); --pill-border-hover: rgba(198, 40, 40, 0.6); --pill-focus: #c62828;
}
body.inner-light .mb-page[data-mb-theme='red'] {
  --mb-primary: #c62828; --mb-primary-dark: #b71c1c; --mb-primary-ink: #ffffff; --mb-primary-soft: rgba(229, 57, 53, 0.12); --mb-primary-glow: rgba(229, 57, 53, 0.3);
  --mb-grad: linear-gradient(160deg, #b71c1c, #c62828 55%, #d32f2f);
  --mb-head-grad: linear-gradient(160deg, rgba(229, 57, 53, 0.16), rgba(229, 57, 53, 0.04) 60%, transparent);
  --mb-accent: #b71c1c; --mb-border-strong: rgba(198, 40, 40, 0.45);
  --pill-text: #b71c1c; --pill-border: rgba(198, 40, 40, 0.3); --pill-border-hover: rgba(198, 40, 40, 0.6); --pill-focus: #c62828;
}

/* =====================================================================================================================================
   3. the page panel — the home's light `.twbox` panel on the dark site body (the MbShell page already is one: background var(--mb-bg))
   ===================================================================================================================================== */
body.inner-light .lt-page,
body.inner-light .lb-root .lb-page,
body.inner-light .ls-root .ls-page { background: var(--lt-bg); border-radius: 0; isolation: isolate; }
@media (min-width: 576px) {
  body.inner-light .lt-page, body.inner-light .lb-root .lb-page, body.inner-light .ls-root .ls-page { border-radius: 20px; }
}
body.inner-light .lt-page { padding-top: 6px; }
/* the success slip (#printpoy.open, LbPanelSuccess) sits after #wrapper, outside .lb-page — it continues the panel instead of floating on the dark body */
body.inner-light .lb-root #printpoy.open { background: var(--lt-bg); margin-top: 0 !important; padding: 4px var(--lt-gutter) 20px; }
body.inner-light .lb-root:has(#printpoy.open) .lb-page { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
@media (min-width: 576px) { body.inner-light .lb-root #printpoy.open { border-radius: 0 0 20px 20px; } }
@media (min-width: 992px) { body.inner-light .lb-root #printpoy.open { max-width: none; padding-left: calc((100% - 760px) / 2); padding-right: calc((100% - 760px) / 2); } body.inner-light .lb-root:has(#printpoy.open) .lb-page { border-radius: 20px 20px 0 0; } }
body.inner-light .mb-page { box-shadow: var(--mb-shadow); }
body.inner-light .mb-page .mb-sticky, body.inner-light .lt-page .lt-sticky { background: linear-gradient(180deg, var(--lt-bg, var(--mb-bg)) 78%, rgba(238, 238, 238, 0)); backdrop-filter: none; }
body.inner-light .lt-page .lt-sticky { background: linear-gradient(180deg, var(--lt-bg) 70%, rgba(238, 238, 238, 0)); }

/* =====================================================================================================================================
   4. gold / red as TEXT — the dark design colours text with the fill token; on white that text uses the accent (≥ 4.5:1)
   ===================================================================================================================================== */
body.inner-light .lt-page .lt-top__link, body.inner-light .lt-page .lt-top__link:visited, body.inner-light .lt-page .lt-filter b,
body.inner-light .lt-page .lt-section__icon, body.inner-light .lt-page .lt-card__flag svg, body.inner-light .lt-page .lt-af-badge,
body.inner-light .lt-page .lt-af-badge:visited, body.inner-light .lt-page .lt-ykrow__no, body.inner-light .lt-page .lt-ykrow__link,
body.inner-light .lt-page .lt-finished > summary::after, body.inner-light .lt-page .lt-empty__icon,
body.inner-light .lb-root .lb-type--tool i, body.inner-light .lb-root .lb-mirror--tool b, body.inner-light .lb-root .lb-slots label.number span,
body.inner-light .ui-betui__text i,
body.inner-light .mb-page .mb-top__link, body.inner-light .mb-page .mb-top__link:visited, body.inner-light .mb-page .mb-chip b,
body.inner-light .mb-page .mb-chips--sub .mb-chip--active b, body.inner-light .mb-page .mb-chips--sub .mb-chip--active i,
body.inner-light .mb-page .mb-card__title i, body.inner-light .mb-page .mb-hero__label i, body.inner-light .mb-page .mb-tile__label i,
body.inner-light .mb-page .mb-disclosure__more, body.inner-light .mb-page .mb-link, body.inner-light .mb-page .mb-link:visited,
body.inner-light .mb-page .mb-modal__icon--soft, body.inner-light .mb-page .mb-num--more, body.inner-light .mb-page .mb-line__n,
body.inner-light .mb-page .mb-field > label i, body.inner-light .mb-page .jp-pot__label i, body.inner-light .mb-page .jp-digit--result,
body.inner-light .mb-page .jp-item__n, body.inner-light .mb-page .jp-pts, body.inner-light .mb-page .jp-range__to, body.inner-light .mb-page .mb-empty__icon,
body.inner-light .mb-page .rs-section__icon, body.inner-light .mb-page .rs-card__flag svg, body.inner-light .mb-page .rs-line--big .rs-num,
body.inner-light .mb-page .rs-ykrow__no, body.inner-light .mb-page .gl-promo__text b, body.inner-light .mb-page .gl-prov__enter,
body.inner-light .mb-page .gl-strip__title i, body.inner-light .mb-page .gl-search:focus-within { color: var(--lt-accent, var(--mb-accent)); }
body.inner-light .lb-root .lb-slots label.number span { background: var(--lt-primary); }
body.inner-light .lt-page .lt-top__link:hover, body.inner-light .mb-page .mb-top__link:hover, body.inner-light .mb-page .mb-link:hover { color: var(--lt-text, var(--mb-text)); }
body.inner-light .lb-root .lb-type--tool { --c: var(--lt-accent); }
body.inner-light .lb-root .lb-mirror--tool { --c: var(--lt-accent); }
body.inner-light .mb-page .jp-pot__amount { background: none; -webkit-background-clip: border-box; background-clip: border-box; -webkit-text-fill-color: var(--mb-accent); color: var(--mb-accent); filter: none; }

/* =====================================================================================================================================
   5. surfaces — the dark design lifts surfaces with rgba(255,255,255,…) (invisible on white): controls on the PANEL become white tiles
      (the home's menu tiles: #fff, rgba(0,0,0,.07) border, 0 2px 8px rgba(0,0,0,.08) shadow); surfaces INSIDE a white card mirror to a
      light grey lift; status borders use the bootstrap alert borders
   ===================================================================================================================================== */
/* panel-level controls → white tiles */
body.inner-light .lt-page .lt-search, body.inner-light .lt-page .lt-filter, body.inner-light .lt-page .lt-summary__tile,
body.inner-light .lt-page .lt-ykrow, body.inner-light .lt-page .lt-ykrow:visited,
body.inner-light .lb-root .lb-segment, body.inner-light .ls-root .ls-nav__btn, body.inner-light .yk-root .ls-nav__btn,
body.inner-light .mb-page .mb-chip, body.inner-light .mb-page .mb-chip:visited, body.inner-light .mb-page .mb-chips--sub .mb-chip,
body.inner-light .ui-steps { background: #ffffff; border-color: rgba(0, 0, 0, 0.07); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); }
body.inner-light .lt-page .lt-search { border-color: var(--il-input-border); }
/* summary tiles that sit on the panel itself (poy / request / jackpot heads) are white tiles like the home's menu; tiles inside a card stay grey */
body.inner-light .mb-page .mb-head > .mb-tiles > .mb-tile { background: #ffffff; border-color: rgba(0, 0, 0, 0.07); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); }
body.inner-light .lt-page .lt-filter--active, body.inner-light .mb-page .mb-chip--active, body.inner-light .mb-page .mb-chip--active:visited { background: var(--lt-grad, var(--mb-grad)); color: var(--lt-primary-ink, var(--mb-primary-ink)); border-color: transparent; box-shadow: 0 4px 14px var(--lt-primary-glow, var(--mb-primary-glow)); }
body.inner-light .mb-page .mb-chips--sub .mb-chip--active { background: var(--mb-primary-soft); color: var(--mb-text); border-color: var(--mb-border-strong); box-shadow: none; }
body.inner-light .mb-page .mb-chip--active b, body.inner-light .mb-page .mb-chip--active i { color: var(--mb-primary-ink); }
body.inner-light .lt-page .lt-filter--active b { color: var(--lt-primary-ink); }
body.inner-light .ls-root .ls-nav__btn--active, body.inner-light .ls-root .ls-nav__btn.active, body.inner-light .yk-root .ls-nav__btn--active, body.inner-light .yk-root .ls-nav__btn.active { background: var(--lt-primary); color: var(--lt-primary-ink); border-color: var(--lt-primary); }
body.inner-light .lt-page .lt-ykrow--open { border-color: var(--il-ok-border); }
/* in-card surfaces → mirrored light grey lift */
body.inner-light .lt-page .lt-search__clear, body.inner-light .lt-page .lt-card__flag, body.inner-light .lt-page .lt-btn--muted,
body.inner-light .lt-page .lt-btn--muted:visited, body.inner-light .lt-page .lt-round, body.inner-light .lt-page .lt-round:visited,
body.inner-light .lt-page .lt-digits b, body.inner-light .lt-page .lt-status--closed,
body.inner-light .lb-root .lb-types__tab, body.inner-light .lb-root .lb-type, body.inner-light .lb-root .lb-meta--link,
body.inner-light .lb-root .lb-board__tabs, body.inner-light .lb-root .lb-mirror, body.inner-light .lb-root .lb-hundreds__tab,
body.inner-light .lb-root .lb-num, body.inner-light .lb-root .lb-rood, body.inner-light .lb-root .lb-key, body.inner-light .lb-root .lb-btn--ghost,
body.inner-light .lb-root .lb-switch__btn--back, body.inner-light .lb-root .lb-picked__chip--close, body.inner-light .lb-root .lb-num-chip--closed,
body.inner-light .lb-root .lb-sheet__close, body.inner-light .lb-root .lb-keys--ying .btn, body.inner-light .lb-root .lb-srow,
body.inner-light .lb-root .lb-srow__no, body.inner-light .ui-steps__no, body.inner-light .ui-betui__btn, body.inner-light .ui-betui__pill,
body.inner-light .ls-root .ls-btn--ghost, body.inner-light .ls-root .ls-status--lose, body.inner-light .ls-root .ls-piece,
body.inner-light .ls-root .ls-prize, body.inner-light .ls-root .ls-row, body.inner-light .ls-root .ls-clear, body.inner-light .yk-root .yk-fact,
body.inner-light .yk-root .yk-row, body.inner-light .yk-root .yk-pages .page-link,
body.inner-light .mb-page .mb-row__icon, body.inner-light .mb-page .mb-row__icon--zero, body.inner-light .mb-page .mb-row__icon--muted,
body.inner-light .mb-page .mb-status--muted, body.inner-light .mb-page .mb-btn, body.inner-light .mb-page .mb-btn--ghost,
body.inner-light .mb-page .mb-btn--ghost:visited, body.inner-light .mb-page .mb-tile, body.inner-light .mb-page .mb-kv > div,
body.inner-light .mb-page .mb-num, body.inner-light .mb-page .mb-line, body.inner-light .mb-page .mb-digits b, body.inner-light .mb-page .mb-preview__row,
body.inner-light .mb-page .jp-digit, body.inner-light .mb-page .jp-winner, body.inner-light .mb-page .jp-step, body.inner-light .mb-page .jp-item,
body.inner-light .mb-page .mb-key, body.inner-light .mb-page .rs-line, body.inner-light .mb-page .rs-num, body.inner-light .mb-page .rs-card__flag,
body.inner-light .mb-page .rs-card__note, body.inner-light .mb-page .pd-line__k { background: var(--il-surface); }
body.inner-light .lb-root .lb-srow--close { background: rgba(0, 0, 0, 0.015); }
body.inner-light .lb-root .lb-crow td { background: rgba(0, 0, 0, 0.035); }
body.inner-light .lb-root .lb-crow.multiply-close td { background: rgba(0, 0, 0, 0.015); }
body.inner-light .ls-root .ls-review__table td { background: var(--il-surface); }
body.inner-light .lt-page .lt-search__clear:hover, body.inner-light .lb-root .lb-key:hover, body.inner-light .lb-root .lb-btn--ghost:hover,
body.inner-light .lb-root .lb-sheet__close:hover, body.inner-light .lb-root .lb-top__link:hover, body.inner-light .ui-betui__pill:hover,
body.inner-light .ls-root .ls-top__link:hover, body.inner-light .yk-root .ls-top__link:hover, body.inner-light .ls-root .ls-btn--ghost:hover,
body.inner-light .mb-page .mb-btn--ghost:hover, body.inner-light .mb-page .mb-key:hover { background: var(--il-surface-hover); }
/* controls on a white card need a visible edge */
body.inner-light .lb-root .lb-type, body.inner-light .lb-root .lb-types__tab, body.inner-light .lb-root .lb-num, body.inner-light .lb-root .lb-key,
body.inner-light .lb-root .lb-mirror, body.inner-light .lb-root .lb-hundreds__tab, body.inner-light .lb-root .lb-keys--ying .btn,
body.inner-light .mb-page .mb-key, body.inner-light .mb-page .mb-btn--ghost, body.inner-light .mb-page .mb-btn--ghost:visited,
body.inner-light .lb-root .lb-btn--ghost, body.inner-light .ls-root .ls-btn--ghost, body.inner-light .ls-root .ls-key, body.inner-light .yk-root .yk-pages .page-link { border-color: var(--il-ctrl-border); }
/* !important twins of the dark design's pinned states (same weight, higher specificity) */
body.inner-light .lb-root .lb-tool, body.inner-light .lb-root .lb-tool.option2btn, body.inner-light .lb-root .lb-tool.bet_two,
body.inner-light .lb-root .lb-tool:hover, body.inner-light .lb-root .lb-tool:focus, body.inner-light .lb-root .lb-tool:active, body.inner-light .lb-root .lb-tool.focus { background: var(--il-surface) !important; border-color: var(--il-ctrl-border) !important; }
body.inner-light .lb-root #numlist-tab1.lb-hundreds .lb-hundreds__tab { background: var(--il-surface) !important; border-color: var(--il-ctrl-border) !important; }
body.inner-light .lb-root .lb-pull__btn, body.inner-light .lb-root .lb-pull__btn.number-sets { background: linear-gradient(180deg, var(--lt-card-2), var(--lt-card)) !important; color: var(--lt-text) !important; box-shadow: var(--lt-shadow); }
body.inner-light .ls-root .ls-key { background: var(--il-surface) !important; }
body.inner-light .ls-root .ls-key--blank { background: transparent !important; border-color: transparent !important; }
body.inner-light .lb-root .box__chip-lists .price.lb-chip { background: var(--lt-card-2) !important; color: var(--lt-text) !important; border-color: var(--il-ctrl-border) !important; }
body.inner-light .lb-root .box__chip-lists .price.lb-chip.active, body.inner-light .lb-root .box__chip-lists .price.lb-chip:hover { background: var(--lt-primary) !important; color: var(--lt-primary-ink) !important; border-color: var(--lt-primary) !important; }
/* status chips / banners — bootstrap alert borders instead of the dark design's bright rgba rings */
body.inner-light .lt-page .lt-status--open, body.inner-light .lt-page .lt-card--open, body.inner-light .mb-page .mb-status--ok, body.inner-light .mb-page .mb-banner--ok,
body.inner-light .mb-page .rs-card--drawn, body.inner-light .mb-page .rs-ykrow--drawn, body.inner-light .mb-page .pd-line--win, body.inner-light .lb-root .lb-sheet__head--ok,
body.inner-light .lb-root .lb-slip__total, body.inner-light .lb-root #printpoy.open .pagemodal, body.inner-light .ls-root .ls-done, body.inner-light .lb-root .lb-success__icon { border-color: var(--il-ok-border) !important; }
body.inner-light .lt-page .lt-status--closing, body.inner-light .lt-page .lt-status--grace, body.inner-light .lt-page .lt-card--closing, body.inner-light .mb-page .mb-status--wait,
body.inner-light .mb-page .mb-banner--soft, body.inner-light .lb-root .lb-limits, body.inner-light .ls-root .ls-closed { border-color: var(--il-warn-border) !important; }
body.inner-light .lt-page .lt-status--abort, body.inner-light .mb-page .mb-status--bad, body.inner-light .mb-page .mb-banner--bad, body.inner-light .mb-page .mb-btn--danger,
body.inner-light .mb-page .mb-line--invalid, body.inner-light .mb-page .mb-preview__row--bad, body.inner-light .mb-page .pd-confirm, body.inner-light .lb-root .lb-closed { border-color: var(--il-bad-border) !important; }
body.inner-light .lt-page .lt-status--result, body.inner-light .lt-page .lt-status--wait, body.inner-light .mb-page .mb-status--info, body.inner-light .mb-page .mb-banner--info { border-color: var(--il-info-border) !important; }
body.inner-light .lt-page .lt-status--closed { border-color: var(--il-ctrl-border); }
body.inner-light .mb-page .mb-btn--danger:hover { background: var(--mb-bad); color: #ffffff; }
body.inner-light .mb-page .mb-btn--danger-solid { background: var(--mb-bad); }
body.inner-light .mb-page .mb-btn--danger-solid:hover { background: #c62828; }

/* =====================================================================================================================================
   6. hard-coded dark values of the dark design (dark ink on a fill that is now dark, dark overlays, dark shadows)
   ===================================================================================================================================== */
body.inner-light .lb-root .lb-board__tab.active, body.inner-light .lb-root #number-tab.lb-board__tabs .lb-board__tab.active { color: #ffffff !important; }
body.inner-light .lb-root .lb-num.btn-limitnum.active, body.inner-light .lb-root .lb-num.btn.btn-limitnum.active { color: #ffffff; }
body.inner-light .lb-root .lb-keys--ying .btn.yeekee__submit, body.inner-light .yk-root .yk-row--hit .yk-row__rank, body.inner-light .ls-root .ls-done__icon { color: #ffffff; }
body.inner-light .mb-page .gl-badge--new, body.inner-light .mb-page .gl-badge--closed { color: #ffffff; }
body.inner-light .mb-page .mb-btn--solid, body.inner-light .mb-page .mb-btn--solid:visited, body.inner-light .mb-page .mb-btn--solid:hover { background: var(--mb-grad); color: var(--mb-primary-ink); text-shadow: none; }
body.inner-light .lb-root .overlay-disable { background: rgba(238, 238, 238, 0.86); }
body.inner-light .lb-root .overlay-disable::after { background: var(--lt-card); color: var(--lt-text); }
body.inner-light .lb-root .lb-grid-block { background: var(--lt-card-3); }
body.inner-light .mb-page .gl-prov { box-shadow: var(--mb-shadow); }
body.inner-light .mb-page .gl-prov__ph { color: rgba(0, 0, 0, 0.14); }
body.inner-light .mb-page .gl-tile--skeleton .gl-sk-name, body.inner-light .mb-page .gl-tile--skeleton .gl-sk-play { background: rgba(0, 0, 0, 0.08); }
body.inner-light .mb-page .gl-hero__text i { color: var(--mb-bad); }
/* DEV-090 "บันทึกรูปโพย" status line under the slip-detail button (its dark-design greens / reds) */
body.inner-light .mb-page .pd-save__msg[data-kind='ok'] { color: var(--mb-ok); }
body.inner-light .mb-page .pd-save__msg[data-kind='bad'] { color: var(--mb-bad); }
body.inner-light .mb-page .pd-save__msg { opacity: 1; }
body.inner-light .ls-root .ls-flag, body.inner-light .lb-root .lb-sheet__panel { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); }
body.inner-light .mb-page .mb-modal__box { box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); }
body.inner-light .mb-page .mb-btn:disabled, body.inner-light .mb-page .mb-btn--disabled, body.inner-light .mb-page .mb-key:disabled { background: var(--il-surface); color: var(--il-disabled); border-color: var(--il-ctrl-border); opacity: 1; }
body.inner-light .lb-root .lb-bar__cta:disabled, body.inner-light .ls-root .ls-bar__cta:disabled, body.inner-light .ls-root .ls-btn--primary:disabled { opacity: 0.55; }
body.inner-light .mb-page .gl-pager a[aria-disabled="true"], body.inner-light .mb-page .gl-more__btn:disabled { opacity: 0.55; }
body.inner-light .lt-page .lt-card--closed, body.inner-light .lt-page .lt-card--result, body.inner-light .mb-page .rs-card--abort, body.inner-light .mb-page .pd-line--cancel, body.inner-light .mb-page .poy-card--cancel { opacity: 1; }
body.inner-light .lt-page .lt-card--closed .lt-card__name, body.inner-light .lt-page .lt-card--result .lt-card__name { color: var(--lt-text-2); }

/* =====================================================================================================================================
   7. inputs — white fields with the bootstrap form border (the dark design used a black-alpha well + dark colour-scheme)
   ===================================================================================================================================== */
body.inner-light .mb-page .mb-input, body.inner-light .mb-page .mb-select, body.inner-light .lb-root .lb-input, body.inner-light .lb-root .lb-input:focus,
body.inner-light .lb-root .lb-search, body.inner-light .lb-root .lb-note, body.inner-light .ls-root .ls-row__amount .lottery_amount, body.inner-light .ls-root .ls-row__amount .lottery_amount:focus,
body.inner-light .lb-root .lb-ying__input { background: #ffffff; color: var(--lt-text, var(--mb-text)); border-color: var(--il-input-border); }
body.inner-light .mb-page .mb-input:focus, body.inner-light .mb-page .mb-select:focus, body.inner-light .lb-root .lb-input:focus, body.inner-light .lb-root .lb-search:focus-within,
body.inner-light .ls-root .ls-row__amount .lottery_amount:focus { border-color: var(--lt-primary-dark, var(--mb-primary-dark)); box-shadow: 0 0 0 3px var(--lt-primary-soft, var(--mb-primary-soft)); }
body.inner-light .mb-page .mb-input[type='date'] { color-scheme: light; }
body.inner-light .lb-root .lb-input--ro { background: var(--lt-card-2); }
body.inner-light .lb-root .lb-slots label.number, body.inner-light .ls-root .ls-slots label.number, body.inner-light .ls-root .ls-digit, body.inner-light .yk-root .yk-tile { background: var(--lt-card-3); }
body.inner-light .lb-root .lb-ying__input { border-color: var(--lt-border-strong); }

/* =====================================================================================================================================
   8. sticky strips, bottom bars, sheets, dialogs — opaque white, soft shadow (the home's panel look), never a dark remnant
   ===================================================================================================================================== */
body.inner-light .lb-root .lb-strip { background: #ffffff; border-color: var(--il-ctrl-border); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); }
body.inner-light .lb-root .lb-bar, body.inner-light .ls-root .ls-bar { background: #ffffff; border-top: 1px solid var(--lt-border-strong); box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.12); backdrop-filter: none; }
body.inner-light .mb-page .mb-bottom { background: linear-gradient(180deg, rgba(238, 238, 238, 0), var(--mb-bg) 35%); }
body.inner-light .lb-root .lb-sheet__panel { border-color: var(--lt-border-strong); }
body.inner-light .lb-root .lb-sheet__head::before { background: var(--il-ctrl-border); }
body.inner-light .lb-root .lb-slip { background: var(--lt-card); }
body.inner-light .lb-root .lb-review__head, body.inner-light .lb-root .lb-totals__item, body.inner-light .lb-root .lb-cart__total, body.inner-light .lb-root .lb-ying__stat,
body.inner-light .lb-root .lb-srows__totals > div, body.inner-light .ls-root .ls-totals__item { background: var(--lt-card-3); }
body.inner-light .lb-root .lb-modal .modal-content, body.inner-light .ls-root .modal-content, body.inner-light .yk-root .modal-content { background: var(--lt-card); color: var(--lt-text); }
body.inner-light .mb-page .mb-modal { background: rgba(17, 17, 17, 0.55); }
body.inner-light .ls-root .ls-top__link, body.inner-light .yk-root .ls-top__link, body.inner-light .lb-root .lb-top__link { color: var(--lt-text-2); }

/* =====================================================================================================================================
   9. statement (/member/statement) — DEV-091 (test-team #3 twin): 2 rows of equal segments + the "อื่น ๆ" sheet (markup in
      views/statement/core.vue, light render only) — ≥ 48 px taps, 17 px labels
   ===================================================================================================================================== */
body.inner-light .mb-page .mb-chips--seg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 2px 0 4px; }
body.inner-light .mb-page .mb-chips--seg .mb-chip { flex-direction: column; justify-content: center; gap: 1px; min-height: 56px; padding: 6px 4px; font-size: 17px; line-height: 1.2; text-align: center; white-space: normal; border-radius: 14px; }
body.inner-light .mb-page .mb-chips--seg .mb-chip i { display: none; }
body.inner-light .mb-page .mb-chips--seg .mb-chip b { font-size: 14px; line-height: 1.1; }
body.inner-light .mb-page .st-viewing { margin: 2px 0 0; font-size: 17px; line-height: 1.4; color: var(--mb-text-2); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
body.inner-light .mb-page .st-viewing b { color: var(--mb-text); font-weight: 800; }
body.inner-light .mb-page .st-viewing i { color: var(--mb-accent); font-size: 14px; }
body.inner-light .mb-page .st-sheet__box { max-width: 520px; gap: 10px; }
body.inner-light .mb-page .st-sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
body.inner-light .mb-page .st-sheet__head .mb-btn--sm { min-height: 48px; }
body.inner-light .mb-page .st-sheet__label { margin: 6px 0 0; font-size: 17px; font-weight: 800; color: var(--mb-text-2); }
body.inner-light .mb-page .st-sheet .mb-range { margin-top: 2px; }

/* =====================================================================================================================================
   10. results (/member/result/all) — DEV-091 (test-team #4 twin): the type chips are an equal grid (4 per row on phones, one row on desktop),
       name + count per chip, 56 px — the DEV-089 cards keep their row layout and get the white-card tone from the tokens above
   ===================================================================================================================================== */
body.inner-light .mb-page:has(.rs-hero) .mb-sticky .mb-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 2px 0 4px; }
body.inner-light .mb-page:has(.rs-hero) .mb-sticky .mb-chip { flex-direction: column; justify-content: center; gap: 1px; min-height: 56px; padding: 6px 4px; font-size: 16px; line-height: 1.2; text-align: center; white-space: normal; border-radius: 14px; }
body.inner-light .mb-page:has(.rs-hero) .mb-sticky .mb-chip i { display: none; }
body.inner-light .mb-page:has(.rs-hero) .mb-sticky .mb-chip b { font-size: 14px; line-height: 1.1; }
@media (min-width: 992px) { body.inner-light .mb-page:has(.rs-hero) .mb-sticky .mb-chips { grid-template-columns: repeat(8, minmax(0, 1fr)); } }