/* ==========================================
           CSS Variables & Base (Premium Dark Theme)
           ========================================== */
      :root {
        --bg-base: rgb(var(--bg-06, 6 11 25));
        --bg-panel: rgb(var(--bg-22, 13 20 42));
        --bg-panel-light: rgb(var(--panel-03, 22 32 64));
        --bg-header: rgb(var(--bg-18, 10 17 40));
        --primary: var(--blue-8, 10 102 194);
        --primary-light: var(--blue-3, 61 138 229);
        --accent: rgb(var(--cyan, 0 210 255));
        --accent-gold: rgb(var(--gold, 250 204 21));
        --text-main: rgb(var(--text, 30 58 95));
        /* เดิมอิง --text-dim-4 (227 242 253 — เกือบขาว ออกแบบไว้ให้ "เห็นชัดบนพื้นน้ำเงิน/เข้ม")
           แต่ --text-muted ใช้เป็นสีข้อความรองทั่วไปบนพื้นหลังอ่อนของธีมนี้เอง (--bg-panel,
           --bg-base, body ล้วนเป็นโทนขาว/ฟ้าอ่อน) ทำให้ข้อความ/ไอคอนที่ใช้ var(--text-muted)
           แทบมองไม่เห็นบนพื้นของตัวเอง (เกือบขาวบนเกือบขาว) — เปลี่ยนไปอิง --text-dim
           (เทาอมฟ้ากลาง ตัดกับพื้นอ่อนได้จริง) แทน */
        --text-muted: rgb(var(--text-dim, 100 116 139));
        /* เดิมอิง --panel-07 (221 237 253) ซึ่งเป็นโทน "พื้นหลังชั้นถัดไป" ใกล้เคียง --bg-panel
           (220 238 251) มากจนเส้นขอบแทบไม่เห็น — เปลี่ยนไปอิง --panel-12 (144 202 249,
           คอมเมนต์ในไฟล์ token เองว่า "border ฟ้าอ่อน") ซึ่งเป็นโทนที่ตั้งใจไว้สำหรับเป็นเส้นขอบจริง */
        --border: rgb(var(--panel-12, 144 202 249));
        --border-light: rgb(var(--panel-14, 40 56 99));
        --radius-sm: 8px;
        --radius-md: 12px;
        --radius-lg: 20px;
        --sidebar-width: 260px;
        --mobile-nav-height: 75px;
        /* Default/fallback before layouts/main.ejs's _syncHeaderOffset() JS measures
           the real .mobile-sticky-wrapper height on DOMContentLoaded/load and overwrites
           this. Was 185px (a rough guess far from reality — measured wrapper height on
           lottery pages, top-header + mobile-sub-nav, is ~128px), causing a visible
           "gap flashes then settles" jump on every page load/reload on mobile before
           JS corrected it. Set close to the real measured value so the JS correction
           is a no-op/imperceptible in the common case, instead of relying on JS to
           paper over a wrong static guess after first paint. */
        --mobile-header-offset: 130px;
      }

      html {
        background-color: var(--bg-base);
        /* กันหน้าขาวแว้บตอนโหลด (html default ขาว) */
        scroll-padding-top: 70px;
        /* desktop: prevent fixed header from covering scroll targets */
        /* Themed scrollbar (Firefox) — inherited ทั้งหน้า; element ที่ตั้ง scrollbar-width:none เอง override ได้ */
        scrollbar-width: thin;
        scrollbar-color: var(--accent-on-body, rgb(var(--cyan-2, 255 130 200))) rgba(255, 255, 255, 0.05);
      }

      @media (max-width: 992px) {
        html {
          scroll-padding-top: var(--mobile-header-offset, 130px);
          /* mobile: sticky header height */
        }
      }

      /* ── Themed scrollbars (global, WebKit/Chromium) ───────────────────
         element-specific rules (เช่นแถบแท็บแนวนอนที่ตั้ง display:none) มี
         specificity สูงกว่า จึง override ตัวนี้ได้ — ของที่ตั้งใจซ่อนยังซ่อนอยู่ */
      ::-webkit-scrollbar {
        width: 10px;
        height: 10px;
      }

      ::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.04);
      }

      ::-webkit-scrollbar-thumb {
        /* --cyan-2 at low opacity assumed a dark default body — now that
           the body can be any admin-picked color (incl. similar blues),
           a translucent accent can blend invisibly into it. Opacity would
           re-introduce that same blending (it mixes with whatever's behind
           the near-transparent track, i.e. the body again), so this uses a
           SOLID color instead: --accent-on-body keeps the accent hue but
           nudges its lightness to guarantee contrast against the actual
           body color, so the thumb stays visible regardless of admin hue. */
        background: var(--accent-on-body, rgb(var(--cyan-2, 255 130 200)));
        border: 2px solid transparent;
        border-radius: 10px;
        background-clip: content-box;
      }

      ::-webkit-scrollbar-thumb:hover {
        background: var(--accent-on-body, rgb(var(--cyan-2, 255 130 200)));
        filter: brightness(0.85);
        border: 2px solid transparent;
        background-clip: content-box;
      }

      ::-webkit-scrollbar-corner {
        background: transparent;
      }

      /* ── Global Reset & Base Elements ── */
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        background-color: var(--bg-base);
        color: var(--text-main);
        font-family: 'Kanit', sans-serif;
        overflow-x: hidden;
        -webkit-font-smoothing: antialiased;
      }

      a {
        text-decoration: none;
        color: inherit;
      }

      ul {
        list-style: none;
      }

      button {
        font-family: inherit;
        cursor: pointer;
        border: none;
        background: none;
      }

      /* ==========================================
           Layout Structure (Flex / Grid)
           ========================================== */
      .app-layout {
        display: flex;
        height: 100vh;
        overflow: hidden;
      }

      /* --- Sidebar --- */
      .sidebar {
        width: var(--sidebar-width);
        background-color: rgb(var(--bg-16, 6 11 25));
        display: flex;
        flex-direction: column;
        z-index: 50;
        transition: all 0.3s ease;
      }

      .sidebar-logo {
        display: none;
        padding: 30px 20px 20px;
        text-align: center;
      }

      .sidebar-logo-text {
        font-size: 2.2rem;
        font-weight: 900;
        background: linear-gradient(90deg, rgb(var(--primary, 56 189 248)), rgb(var(--primary-deep, 14 165 233)));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        letter-spacing: 2px;
        text-shadow: 0 2px 10px rgb(var(--primary, 56 189 248) / 0.2);
      }

      .sidebar-nav {
        padding: 10px 15px;
        flex: 1;
        overflow-y: auto;
      }

      .sidebar-nav::-webkit-scrollbar {
        width: 4px;
      }

      .sidebar-nav::-webkit-scrollbar-thumb {
        background-color: rgb(var(--blue-deep-2, 30 58 138));
        border-radius: 4px;
      }

      /* Every nav-item.tab-nav-btn button centered as a group within the
         desktop sidebar list (not stretched full-width). Width lives on the
         <li> (a definite-size flex item) rather than .nav-item itself, so
         .nav-item's existing width:100% just fills that narrower <li>. */
      .desktop-menu-list {
        display: flex;
        flex-direction: column;
        align-items: center;
        list-style: none;
        margin: 0;
        padding: 0;
      }

      .desktop-menu-list li {
        width: 90%;
      }

      .nav-item {
        display: flex;
        align-items: center;
        width: 100%;
        padding: 12px 20px;
        margin-bottom: 12px;
        border-radius: 12px;
        background: rgb(var(--blue-5, 37 99 235));
        color: #fff;
        font-weight: 700;
        font-size: 1.1rem;
        transition: all 0.3s ease;
        position: relative;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        border-left: 4px solid rgb(var(--blue-soft, 147 197 253));
      }

      /* Tab-style nav buttons (category tabs in the sidebar) — full border
         so the button edges stay visible against the pink page background,
         not just the existing left accent stripe. */
      .nav-item.tab-nav-btn {
        border: 1.5px solid rgba(255, 255, 255, 0.4);
        border-left: 4px solid rgb(var(--blue-soft, 147 197 253));
      }

      .nav-item .icon-emoji {
        font-size: 1.8rem;
        margin-right: 15px;
        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
      }

      .nav-item img.icon-emoji {
        width: 2.2rem;
        height: 2.2rem;
        object-fit: contain;
        flex-shrink: 0;
        border-radius: 8px;
        filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.55));
        transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
          filter 0.3s ease;
      }

      .nav-item:hover img.icon-emoji,
      .nav-item.active img.icon-emoji {
        transform: scale(1.2) rotate(-6deg);
        filter: drop-shadow(0 4px 12px rgba(255, 255, 255, 0.45));
      }

      .nav-item:hover,
      .nav-item.active {
        background: rgb(var(--blue-7, 29 78 216));
        transform: translateX(5px);
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
        border-left-color: rgb(var(--blue-2, 96 165 250));
      }

      /* --- Main Content --- */
      .main-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        position: relative;
      }

      /* --- Header --- */
      .top-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 70px;
        padding: 0 30px;
        background-color: rgb(var(--bg-13, 8 13 30));
        border-bottom: 2px solid rgb(var(--bg-23, 15 23 42));
        position: sticky;
        top: 0;
        z-index: 40;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
      }

      .header-left {
        display: flex;
        align-items: center;
        gap: 25px;
      }

      .header-logo {
        display: flex;
        align-items: center;
        gap: 6px;
      }

      .header-logo .logo-text {
        font-size: 1.9rem;
        font-weight: 900;
        color: #ffffff;
        letter-spacing: 1.5px;
        font-style: italic;
        text-shadow: 0 0 12px rgba(0, 0, 0, 0.25);
      }

      .header-logo .logo-highlight {
        color: rgb(var(--primary, 56 189 248));
      }

      .header-logo .logo-shark {
        font-size: 1.9rem;
        filter: drop-shadow(0 0 8px rgb(var(--primary, 56 189 248) / 0.7));
        animation: floatShark 3s ease-in-out infinite;
      }

      @keyframes floatShark {

        0%,
        100% {
          transform: translateY(0) rotate(0deg);
        }

        50% {
          transform: translateY(-4px) rotate(3deg);
        }
      }

      .header-favorites {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #ffffff;
        font-weight: 600;
        font-size: 0.95rem;
        cursor: pointer;
        transition: all 0.3s;
        white-space: nowrap;
      }

      .header-favorites:hover {
        color: rgb(var(--cyan-light, 144 202 249));
        text-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
      }

      .header-favorites i {
        color: rgb(var(--danger, 239 68 68));
        filter: drop-shadow(0 0 5px rgb(var(--danger, 239 68 68) / 0.6));
      }

      /* ── Header Action Cards (quick-link icons) ── */
      .header-actions {
        display: flex;
        gap: 12px;
        align-items: center;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
      }

      .action-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: rgb(var(--bg-10, 7 16 38));
        border: 1px solid rgb(var(--primary, 56 189 248) / 0.15);
        border-radius: 8px 8px 16px 16px;
        padding: 6px 12px;
        min-width: 85px;
        height: 80px;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        cursor: pointer;
        transform: translateY(5px);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
        z-index: 45;
      }

      .action-card:hover {
        background: linear-gradient(180deg, rgb(var(--blue, 59 130 246)) 0%, rgb(var(--blue-deep, 30 64 175)) 100%);
        border-color: rgb(var(--blue, 59 130 246));
        transform: translateY(0px);
        box-shadow: 0 6px 15px rgb(var(--blue, 59 130 246) / 0.35);
      }

      .action-card .emoji {
        font-size: 1.7rem;
        margin-bottom: 3px;
        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
        transition: transform 0.3s ease;
      }

      .action-card:hover .emoji {
        transform: scale(1.2);
        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
      }

      /* ── Action Card Icon Wrapper ─────────────────────────────── */
      .action-card-icon {
        width: 2.4rem;
        height: 2.4rem;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 5px;
        flex-shrink: 0;
        transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
      }

      .action-card:hover .action-card-icon {
        transform: translateY(-4px) scale(1.12);
      }

      /* ── Action Card Images ─────────────────────────────────── */
      .action-card-img {
        width: 2rem;
        height: 2rem;
        object-fit: contain;
        flex-shrink: 0;
        filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.4));
        transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
          filter 0.3s ease;
      }

      .action-card:hover .action-card-img {
        transform: scale(1.15);
        filter: drop-shadow(0 3px 10px rgba(255, 255, 255, 0.3));
      }

      /* Action card icon rendered as a Font Awesome glyph (e.g. กลุ่มเลขเด็ด) */
      .action-card-icon--group .fa-solid {
        font-size: 1.7rem;
        color: rgb(var(--gold, 250 204 21));
        filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.4));
        transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
      }

      .action-card:hover .action-card-icon--group .fa-solid {
        transform: scale(1.15);
      }

      /* Logo: original colors, flexible size */
      .action-card-logo {
        width: auto;
        max-width: 3rem;
        max-height: 1.8rem;
        filter: none;
        border-radius: 3px;
        transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
          filter 0.3s ease;
      }

      .action-card:hover .action-card-logo {
        transform: scale(1.08);
        filter: drop-shadow(0 2px 8px rgb(var(--primary, 56 189 248) / 0.5));
      }

      .action-card span:not(.emoji) {
        font-size: 0.78rem;
        font-weight: 700;
        color: #ffffff;
        letter-spacing: 0.5px;
        transition: color 0.3s ease;
      }

      /* hover: คงสีตัวหนังสือเดิม (ไม่เปลี่ยน) */

      /* ── Header Auth (login/register buttons + logged-in state) ── */
      .header-auth {
        display: flex;
        gap: 10px;
        align-items: center;
        position: relative;
        z-index: 200;
        flex-shrink: 0;
      }

      .header-auth .btn-register,
      .header-auth .btn-login {
        cursor: pointer;
        position: relative;
        z-index: 1;
      }

      /* scope ด้วย .header-auth — กัน Bootstrap .btn (หน้า lottery) ทับสไตล์ปุ่ม header */
      .header-auth .btn {
        padding: 10px 22px;
        border-radius: 6px;
        font-weight: 700;
        font-size: 0.95rem;
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(255, 255, 255, 0.15);
        letter-spacing: 0.5px;
      }

      .header-auth .btn-register {
        background: linear-gradient(180deg, rgb(var(--blue, 59 130 246)) 0%, rgb(var(--blue-deep, 30 64 175)) 100%);
        color: rgb(var(--text-on-accent, 255 255 255));
        box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.2), 0 4px 10px rgba(0, 0, 0, 0.3);
      }

      .header-auth .btn-login {
        background: #ffffff !important;
        color: #000000 !important;
        border-color: rgba(255, 255, 255, 0.3) !important;
        box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.4), 0 4px 10px rgba(0, 0, 0, 0.1) !important;
      }

      .header-auth .btn-register:hover,
      .header-auth .btn-login:hover {
        filter: brightness(1.15);
        transform: translateY(-2px);
        box-shadow: 0 6px 15px rgba(255, 255, 255, 0.15);
      }

      /* state-lock: กัน Bootstrap .btn:hover/:active/:focus-visible (หน้า lottery)
         เปลี่ยน background/color/border ตอน hover — ล็อกให้เหมือน /member ทุก state */
      .header-auth .btn-login:hover,
      .header-auth .btn-login:active,
      .header-auth .btn-login:focus-visible {
        background: #ffffff !important;
        color: #000000 !important;
        border-color: rgba(255, 255, 255, 0.3) !important;
      }

      .header-auth .btn-register:hover,
      .header-auth .btn-register:active,
      .header-auth .btn-register:focus-visible {
        background: linear-gradient(180deg, rgb(var(--blue, 59 130 246)) 0%, rgb(var(--blue-deep, 30 64 175)) 100%);
        color: rgb(var(--text-on-accent, 255 255 255));
        border-color: rgba(255, 255, 255, 0.15);
      }

      /* ── Logged-in header state ── */
      .auth-loggedin-wrap {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-shrink: 0;
      }

      .auth-user-pill {
        display: flex;
        align-items: center;
        gap: 6px;
        background: rgba(255, 255, 255, 0.07);
        border: 1px solid rgba(255, 255, 255, 0.13);
        border-radius: 20px;
        padding: 6px 14px;
        font-size: 0.88rem;
        color: #ffffff;
        white-space: nowrap;
        backdrop-filter: blur(6px);
      }

      .auth-coin-icon {
        color: rgb(var(--gold-warm, 251 191 36));
        font-size: 0.9rem;
      }

      .auth-user-icon {
        color: #ffffff;
        font-size: 0.85rem;
      }

      .auth-sep {
        color: rgba(255, 255, 255, 0.4);
        font-weight: 300;
      }

      #showUsername {
        color: #ffffff;
        font-weight: 600;
        max-width: 80px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .btn-member-menu {
        background: linear-gradient(180deg, rgb(var(--blue, 59 130 246)) 0%, rgb(var(--blue-deep, 30 64 175)) 100%);
        color: rgb(var(--text-on-accent, 255 255 255));
        box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.4), 0 4px 10px rgba(0, 0, 0, 0.3);
      }

      .btn-member-menu:hover {
        filter: brightness(1.15);
        transform: translateY(-2px);
      }

      .btn-logout {
        background: rgb(var(--danger, 239 68 68) / 0.15);
        border: 1px solid rgb(var(--danger, 239 68 68) / 0.35);
        color: rgb(var(--danger-light, 248 113 113));
        padding: 8px 12px;
        font-size: 0.88rem;
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.2s ease;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }

      .btn-logout:hover {
        background: rgb(var(--danger, 239 68 68) / 0.3);
        border-color: rgb(var(--danger, 239 68 68) / 0.6);
        color: rgb(var(--light-red, 254 242 242));
        transform: translateY(-1px);
      }

      /* ── Header logged-in: balance display ── */
      .hdr-balance {
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 0.92rem;
        font-weight: 700;
        color: rgb(var(--text, 226 232 240));
        white-space: nowrap;
      }

      #showRealBalance {
        color: rgb(var(--gold-warm, 251 191 36));
        font-weight: 700;
        font-size: 0.92rem;
        min-width: 40px;
        text-align: right;
      }

      .hdr-balance-cur {
        color: rgba(255, 255, 255, 0.85);
        font-size: 0.78rem;
        font-weight: 500;
        margin-left: 1px;
      }

      .hdr-balance-refresh {
        background: none;
        border: none;
        cursor: pointer;
        color: rgba(255, 255, 255, 0.85);
        font-size: 0.8rem;
        padding: 2px 4px;
        border-radius: 4px;
        transition: color 0.2s ease, transform 0.3s ease;
        display: inline-flex;
        align-items: center;
      }

      .hdr-balance-refresh:hover {
        color: #ffffff;
      }

      .hdr-balance-refresh.spinning i {
        animation: hdrRefreshSpin 0.6s linear;
      }

      @keyframes hdrRefreshSpin {
        from {
          transform: rotate(0deg);
        }

        to {
          transform: rotate(360deg);
        }
      }

      /* ── Deposit button (scope กัน Bootstrap .btn ทับ) ── */
      .header-auth .hdr-btn-deposit {
        background: #ffffff;
        color: #000 !important;
        font-weight: 700;
        font-size: 0.88rem;
        padding: 7px 18px;
        border-radius: 6px;
        border: 1px solid rgba(255, 255, 255, 0.18);
        box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.4), 0 3px 8px rgba(0, 0, 0, 0.25);
        white-space: nowrap;
        transition: filter 0.2s ease, transform 0.2s ease;
        text-decoration: none;
      }

      .header-auth .hdr-btn-deposit:hover,
      .header-auth .hdr-btn-deposit:active,
      .header-auth .hdr-btn-deposit:focus-visible {
        background: #ffffff;
        border-color: rgba(255, 255, 255, 0.18);
      }

      .header-auth .hdr-btn-deposit:hover {
        filter: brightness(1.12);
        transform: translateY(-1px);
      }

      /* ── User icon + dropdown wrapper ── */
      .hdr-user-wrap {
        position: relative;
        flex-shrink: 0;
      }

      .hdr-user-btn {
        width: 36px;
        height: 36px;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.15);
        color: #ffffff;
        font-size: 0.95rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
        flex-shrink: 0;
      }

      .hdr-user-btn:hover,
      .hdr-user-wrap.active .hdr-user-btn {
        background: rgba(255, 255, 255, 0.22);
        border-color: rgba(255, 255, 255, 0.5);
        color: #ffffff;
      }

      /* ── Dropdown panel ── */
      .hdr-dropdown {
        position: absolute;
        top: calc(100% + 10px);
        right: 0;
        min-width: 170px;
        background: #ffffff;
        border-radius: 10px;
        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22), 0 2px 8px rgba(0, 0, 0, 0.12);
        overflow: hidden;
        z-index: 1000;

        /* hidden by default */
        opacity: 0;
        transform: translateY(-6px) scale(0.97);
        pointer-events: none;
        transition: opacity 0.18s ease, transform 0.18s ease;
        transform-origin: top right;
      }

      .hdr-user-wrap.active .hdr-dropdown {
        opacity: 1;
        transform: translateY(0) scale(1);
        pointer-events: all;
      }

      @media (max-width: 768px) {
        .hdr-user-wrap {
          display: none;
        }
      }

      /* ── Dropdown items ──
           color is FIXED (#1e3a5f, light-blue's own --text default), not
           var()-linked — .hdr-dropdown (below) is hardcoded #ffffff
           regardless of admin settings, so pinning this to --text would
           turn it light-colored (unreadable on white) if an admin sets an
           unusual color_website_font_web / color_website. */
      .hdr-dropdown-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 11px 14px;
        color: #1e3a5f;
        font-size: 0.88rem;
        font-weight: 500;
        text-decoration: none;
        background: none;
        border: none;
        width: 100%;
        text-align: left;
        cursor: pointer;
        transition: background 0.15s ease, color 0.15s ease;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
      }

      .hdr-dropdown-item:last-child {
        border-bottom: none;
      }

      .hdr-dropdown-item:hover {
        background: rgb(var(--text-bright, 241 245 249));
        color: rgb(var(--bg-23, 15 23 42));
      }

      .hdr-dd-icon {
        width: 16px;
        text-align: center;
        /* FIXED — same reason as .hdr-dropdown-item above (white dropdown bg is constant) */
        color: #6b7280;
        font-size: 0.82rem;
        flex-shrink: 0;
        transition: color 0.15s ease;
      }

      .hdr-dropdown-item:hover .hdr-dd-icon {
        color: rgb(var(--primary-deep, 14 165 233));
      }

      /* ── Logout item ── */
      .hdr-dropdown-item--logout {
        color: rgb(var(--danger-2, 220 38 38));
      }

      .hdr-dropdown-item--logout .hdr-dd-icon {
        color: rgb(var(--danger-2, 220 38 38));
      }

      .hdr-dropdown-item--logout:hover {
        background: rgb(var(--light-red, 254 242 242));
        color: rgb(var(--danger-deep, 185 28 28));
      }

      .hdr-dropdown-item--logout:hover .hdr-dd-icon {
        color: rgb(var(--danger-deep, 185 28 28));
      }

      /* ── Dropdown arrow caret ── */
      .hdr-dropdown::before {
        content: '';
        position: absolute;
        top: -6px;
        right: 12px;
        width: 12px;
        height: 12px;
        background: #ffffff;
        transform: rotate(45deg);
        box-shadow: -2px -2px 4px rgba(0, 0, 0, 0.06);
        border-radius: 2px;
      }

      /* --- Mobile Specific Elements Hidden on Desktop --- */
      .hamburger-btn,
      .mobile-logo,
      .mobile-sub-nav,
      .bottom-nav,
      .sidebar-overlay,
      .mobile-menu-list,
      .msidebar-header,
      .msidebar-auth,
      .msidebar-nav,
      .msidebar-logout-wrap {
        display: none;
      }

      /* --- Content Container --- */
      .content-container {
        padding: 25px 30px;
        max-width: 1600px;
        margin: 0 auto;
        width: 100%;
      }

      /* --- Marquee Container --- */
      .marquee-container {
        width: 100%;
        max-width: 1600px;
        margin: 20px auto 0;
        padding: 0 30px;
        width: 100%;
      }

      /* --- Marquee --- */
      .marquee-wrapper {
        background-color: var(--bg-panel);
        border: 2px solid #ffffff;
        border-radius: 30px;
        padding: 10px 25px;
        display: flex;
        align-items: center;
        gap: 15px;
        margin-bottom: 25px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
      }

      .marquee-icon {
        color: var(--accent-gold);
        font-size: 1.2rem;
        flex-shrink: 0;
        animation: pulse 2s infinite;
      }

      @keyframes pulse {
        0% {
          transform: scale(1);
        }

        50% {
          transform: scale(1.15);
        }

        100% {
          transform: scale(1);
        }
      }

      .marquee-content {
        flex: 1;
        overflow: hidden;
        white-space: nowrap;
      }

      .marquee-text {
        display: inline-block;
        font-size: 0.95rem;
        /* was --text-main (= body-adaptive --text) — sits on --bg-panel
           (bg-22, always pale), not body, so use the fixed --text-on-panel. */
        color: rgb(var(--text-on-panel, 30 58 95));
        animation: marquee 25s linear infinite;
      }

      @keyframes marquee {
        0% {
          transform: translateX(100%);
        }

        100% {
          transform: translateX(-100%);
        }
      }

      /* --- Hero Banner ───────────────────────────────────────────────
           aspect-ratio: 21/7 is only a fallback shown before JS measures
           the real image and sets the exact ratio inline (see index.js
           applyAspectForSlide) — so the full image is always visible,
           never cropped, at any screen size. max-height guards against
           unusually tall/portrait uploads blowing out the layout. ── */
      .hero-banner {
        width: 100%;
        max-width: 100%;
        aspect-ratio: 21/7;
        max-height: 70vh;
        background: linear-gradient(45deg, rgb(var(--panel-03, 22 32 64)), rgb(var(--panel-14, 40 56 99)));
        border-radius: var(--radius-lg);
        overflow: hidden;
        margin: 20px auto 40px;
        position: relative;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
      }

      .hero-banner img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }

      /* Placeholder Banner Content */
      .hero-placeholder-content {
        position: absolute;
        text-align: center;
        z-index: 2;
      }

      .hero-placeholder-content h1 {
        font-size: 3.5rem;
        background: linear-gradient(to right, rgb(var(--cyan, 0 210 255)), rgb(var(--gold, 250 204 21)));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        margin-bottom: 10px;
        font-weight: 700;
      }

      /* --- Sections --- */
      .game-section {
        margin-bottom: 45px;
        /* จุดหยุดตอน scrollIntoView จากเมนู sidebar/sub-nav — เผื่อ header fixed 70px */
        scroll-margin-top: 90px;
      }

      @media (max-width: 992px) {
        .game-section {
          /* mobile: header sticky สูงตาม --mobile-header-offset (คำนวณจาก JS) */
          scroll-margin-top: calc(var(--mobile-header-offset, 130px) + 10px);
        }
      }

      .section-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;
        padding: 8px 20px 8px 24px;
        background: rgb(var(--primary) / 0.15);
        border: 1px solid rgb(var(--primary) / 0.25);
        border-radius: var(--radius-md);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.10);
        position: relative;
        overflow: hidden;
        transition: background 0.25s ease, box-shadow 0.25s ease;
      }

      /* ── decoration: gold accent bar + soft diagonal sheen ── */
      .section-header::before {
        content: '';
        position: absolute;
        left: 0;
        top: 5px;
        bottom: 5px;
        width: 4px;
        border-radius: 4px;
        background: linear-gradient(180deg, var(--accent-gold), rgba(255, 255, 255, 0.35));
      }

      .section-header::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(120deg, rgba(255, 255, 255, 0.14), transparent 55%);
        pointer-events: none;
      }

      .section-header:hover {
        background: rgb(var(--primary) / 0.25);
        box-shadow: 0 6px 22px rgba(0, 0, 0, 0.14);
      }

      @media (max-width: 576px) {
        .section-header {
          padding: 7px 16px 7px 20px;
        }
      }

      .section-title {
        font-size: 1.5rem;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 12px;
      }

      .section-title i {
        color: var(--accent-gold);
        font-size: 1.4rem;
      }

      .see-all {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 0.82rem;
        color: var(--accent-on-body);
        text-decoration: none;
        font-weight: 500;
        white-space: nowrap;
        transition: opacity 0.2s;
      }

      .see-all:hover {
        opacity: 0.75;
      }

      /* ── Horizontal-scroll nav arrows — functional, ported from web3
         bx-theme-v2-no2/pages/member/dashboard.ejs's .cat-nav-scroll-btn
         (real buttons that scroll + auto-hide at the scroll ends, wired
         up in assets/index.js) ── */
      .cat-nav-scroll-btn {
        display: none;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        /* .float-menu-wrap is now hidden on mobile, so no longer a conflict.
           .mobile-sticky-wrapper (fixed header) is z-index:100 — stay below
           it so the sticky header always covers these arrows when the row
           scrolls underneath it, instead of poking through on top. */
        z-index: 90;
        width: 28px;
        height: 28px;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        border: 1px solid var(--border);
        background: #ffffff;
        color: var(--accent-gold);
        font-size: 0.72rem;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
        cursor: pointer;
        transition: opacity 0.15s, background 0.15s, transform 0.1s;
      }

      .cat-nav-scroll-btn:active {
        transform: translateY(-50%) scale(0.9);
      }

      .cat-nav-scroll-btn:hover {
        background: #f2f2f2;
      }

      .cat-nav-scroll-btn--left {
        left: -2px;
      }

      .cat-nav-scroll-btn--right {
        right: -2px;
      }

      .cat-nav-scroll-btn.is-hidden {
        opacity: 0;
        pointer-events: none;
      }

      @media (max-width: 992px) {
        .cat-nav-scroll-btn {
          display: flex;
        }
      }

      /* --- Hot Games Provider Tabs --- */
      .hot-provider-row-wrap {
        position: relative;
        /* z-index (any value) forces this to establish its own stacking
           context — otherwise .hot-provider-btn.active/:hover's transform
           (translateY) promotes that provider's own local stacking context
           just enough to paint over the scroll-arrow buttons despite their
           higher z-index, since position:relative alone doesn't isolate one. */
        z-index: 0;
      }

      .hot-provider-row {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 16px;
        overflow-x: auto;
        padding: 10px 0 6px;
        /* top space so the active lift + ring isn't clipped */
        scrollbar-width: none;
        margin-bottom: 22px;
      }

      .hot-provider-row::-webkit-scrollbar {
        display: none;
      }

      .hot-provider-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        cursor: pointer;
        flex-shrink: 0;
        background: none;
        border: none;
        padding: 0;
      }

      .hot-provider-img-wrap {
        width: 72px;
        height: 72px;
        border-radius: 50%;
        background: var(--bg-panel-light);
        border: 3px solid var(--border-light);
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
      }

      .hot-provider-btn:hover .hot-provider-img-wrap,
      .hot-provider-btn.active .hot-provider-img-wrap {
        border-color: var(--accent);
        box-shadow: 0 0 0 3px rgb(var(--cyan, 0 210 255) / 0.25), 0 4px 16px rgb(var(--cyan, 0 210 255) / 0.2);
        transform: translateY(-4px);
      }

      .hot-provider-img-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
        transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
          filter 0.3s ease;
        filter: brightness(0.9) saturate(1.1);
      }

      .hot-provider-btn:hover .hot-provider-img-wrap img,
      .hot-provider-btn.active .hot-provider-img-wrap img {
        transform: scale(1.12);
        filter: brightness(1.05) saturate(1.3) drop-shadow(0 2px 8px rgb(var(--cyan, 0 210 255) / 0.5));
      }

      .hot-provider-label {
        font-size: 0.72rem;
        color: rgb(var(--text-2, 100 116 139));
        text-align: center;
        max-width: 72px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        transition: color 0.2s;
      }

      .hot-provider-btn.active .hot-provider-label,
      .hot-provider-btn:hover .hot-provider-label {
        color: var(--accent-on-body);
      }

      /* ── Hot Games Grid Cards ── */
      .hot-games-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 16px;
        min-height: 60px;
      }

      .hot-game-card {
        position: relative;
        border-radius: var(--radius-md);
        overflow: hidden;
        cursor: pointer;
        border: 1px solid var(--border-light);
        background: var(--bg-panel-light);
        transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
      }

      .hot-game-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 12px 25px rgba(0, 0, 0, 0.5);
        border-color: var(--accent);
      }

      .hot-game-card img {
        width: 100%;
        aspect-ratio: 3/4;
        object-fit: cover;
        display: block;
        transition: transform 0.4s;
      }

      .hot-game-card:hover img {
        transform: scale(1.07);
      }

      .hot-game-badge {
        position: absolute;
        top: 6px;
        left: 6px;
        background: rgba(0, 0, 0, 0.6);
        border-radius: 4px;
        padding: 3px 7px;
        font-size: 0.68rem;
        color: #fff;
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 3px;
      }

      .hot-game-badge .badge-diamond {
        color: rgb(var(--blue-2, 96 165 250));
        font-size: 0.72rem;
      }

      .hot-game-footer {
        padding: 6px 8px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 4px;
      }

      .hot-game-footer-name {
        font-size: 0.75rem;
        /* was --text-main (body-adaptive) — sits on the game card's own
           white background (bg-01/02, always white by design), not body,
           so use the fixed --text-on-panel instead. */
        color: rgb(var(--text-on-panel, 30 58 95));
        font-weight: 500;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 1;
      }

      .hot-game-footer-right {
        display: flex;
        align-items: center;
        gap: 4px;
        flex-shrink: 0;
      }

      .hot-game-players {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 0.72rem;
        /* same white-card-footer context as .hot-game-footer-name — fixed
           dark text, not body-adaptive --text-2. */
        color: rgb(var(--text-on-panel, 100 116 139));
      }

      .hot-game-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgb(var(--success, 34 197 94));
        flex-shrink: 0;
        animation: blink-green 1.4s ease-in-out infinite;
      }

      @keyframes blink-green {

        0%,
        100% {
          opacity: 1;
          box-shadow: 0 0 0 0 rgb(var(--success, 34 197 94) / 0.6);
        }

        50% {
          opacity: 0.4;
          box-shadow: 0 0 0 4px rgb(var(--success, 34 197 94) / 0);
        }
      }

      .hot-game-heart {
        /* same white-card-footer context as .hot-game-footer-name — fixed
           dark text, not body-adaptive --text-2. */
        color: rgb(var(--text-on-panel, 100 116 139));
        font-size: 0.8rem;
        cursor: pointer;
        transition: color 0.2s;
        flex-shrink: 0;
      }

      .hot-game-heart:hover {
        color: rgb(var(--rose, 244 63 94));
      }

      .hot-game-overlay {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        opacity: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px;
        transition: opacity 0.3s;
      }

      .hot-game-card:hover .hot-game-overlay {
        opacity: 1;
      }

      .hot-game-play {
        padding: 9px 22px;
        background: #ffffff;
        color: #000000;
        text-align: center;
        border-radius: var(--radius-sm);
        font-size: 0.82rem;
        font-weight: 600;
        transform: scale(0.85);
        opacity: 0;
        transition: all 0.3s;
        cursor: pointer;
        white-space: nowrap;
      }

      .hot-game-card:hover .hot-game-play {
        opacity: 1;
        transform: scale(1);
      }

      .hot-game-footer {
        padding: 6px 8px;
        font-size: 0.75rem;
        color: var(--text-main);
        font-weight: 500;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .hot-skeleton {
        aspect-ratio: 3/4;
        border-radius: var(--radius-md);
        background: linear-gradient(90deg, var(--bg-panel-light) 25%, var(--border-light) 50%, var(--bg-panel-light) 75%);
        background-size: 200% 100%;
        animation: shimmer 1.4s infinite;
      }

      @keyframes shimmer {
        0% {
          background-position: 200% 0;
        }

        100% {
          background-position: -200% 0;
        }
      }

      /* --- Lottery Section --- */
      .lotto-box {
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        overflow: hidden;
        background-color: rgb(var(--bg-04, 4 8 20));
        margin-bottom: 40px;
        --text: 30 58 95;
        --text-bright: 15 42 68;
        --text-2: 107 114 128;
        --text-dim: 71 85 105;
        --text-muted: 100 116 139;
        --text-muted-2: 100 116 139;
      }

      .lotto-header {
        background: linear-gradient(90deg, rgb(var(--blue-deep, 30 64 175)), rgb(var(--blue, 59 130 246)));
        padding: 15px 20px;
        font-size: 1.3rem;
        font-weight: 600;
        color: #fff;
        border-bottom: 1px solid var(--border);
        display: flex;
        align-items: center;
        gap: 10px;
      }

      /* .see-all's base rule uses --accent-on-body (tuned against the plain
         body) — inside .lotto-header it instead sits on the same
         --blue-deep/--blue gradient as the heading text above, so match it
         to --text-on-accent here too. */
      .lotto-header .see-all {
        color: rgb(var(--text-on-accent, 255 255 255));
      }

      .lotto-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 15px;
        padding: 20px;
      }

      /* ซ่อนการ์ดหวยแบบ toggle ได้ (แทนการลบ markup/array entry ออก) — เอากลับมาแสดงแค่ลบ class นี้ */
      .lotto-hidden {
        display: none !important;
      }

      /* ── ป้องกันชื่อหวยยาวดันขนาดคอลัมน์ grid ให้เบี้ยว ──
         CSS Grid's ค่าเริ่มต้นของ 1fr คือ minmax(auto, 1fr) — ขนาดต่ำสุด "auto" จะยึดตาม
         intrinsic content size ของ item ถ้าไม่ตั้ง min-width:0 ที่ตัว grid item เอง (div ตรงนี้คือ
         #llot-X) การตั้ง min-width:0 แค่ที่ .lotto-card (ซึ่งอยู่ลึกกว่า ผ่าน <a> ที่เป็น inline)
         ไม่พอ ต้องตั้งที่ grid item โดยตรง + ทำให้ <a> เป็น block เพื่อไม่ให้ inline sizing รั่วขึ้นมา */
      .lotto-grid>div {
        min-width: 0;
      }

      .lotto-grid>div>a {
        display: block;
        min-width: 0;
      }

      .lotto-card {
        background-color: rgb(var(--bg-01, 3 7 18));
        border: 1px solid rgb(var(--panel-11, 31 41 55));
        border-radius: 8px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        transition: all 0.3s ease;
        min-width: 0;
        /* prevent overflow in grid */
      }

      .lotto-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
        border-color: var(--accent);
      }

      .lotto-card-header {
        padding: 10px 15px;
        font-weight: 600;
        font-size: 0.9rem;
        color: #ffffff;
        display: flex;
        align-items: flex-start;
        gap: 8px;
      }

      /* ชื่อหวยยาวตัดขึ้นบรรทัดใหม่แทนการตัด ... — min-width:0 (ร่วมกับ .lotto-grid > div
         ด้านบน) ยังจำเป็นเพื่อกัน grid column ขยายตามความยาวคำ */
      .lotto-card-header span:not(img) {
        overflow-wrap: break-word;
        min-width: 0;
      }

      .lotto-card-body {
        padding: 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex: 1;
        gap: 10px;
        background-color: rgb(var(--bg-03, 2 6 16));
      }

      .lotto-info {
        display: flex;
        flex-direction: column;
        gap: 4px;
      }

      .lotto-timer {
        font-weight: 600;
        font-size: 0.95rem;
        color: rgb(var(--danger, 239 68 68));
        display: flex;
        align-items: center;
        gap: 5px;
        animation: blink-red-white 1s step-start infinite;
      }

      @keyframes blink-red-white {

        0%,
        100% {
          color: rgb(var(--danger, 239 68 68));
        }

        50% {
          /* was --text-2 (body-adaptive) — this blinks on --bg-03 (card
             tier, always near-white), so use the fixed --text-on-panel. */
          color: rgb(var(--text-on-panel, 107 114 128));
        }
      }

      .lotto-timer.outputting {
        color: rgb(var(--amber, 245 158 11));
        animation: none;
      }

      .lotto-desc {
        font-size: 0.75rem;
        /* was --text-2 (body-adaptive) — sits on --bg-03 (card tier, always
           near-white), so use the fixed --text-on-panel. */
        color: rgb(var(--text-on-panel, 203 213 225));
        display: flex;
        align-items: center;
        gap: 4px;
      }

      .btn-lotto {
        padding: 8px 16px;
        border-radius: 6px;
        font-size: 0.85rem;
        font-weight: 600;
        text-align: center;
        transition: all 0.2s;
        border: none;
      }

      .btn-lotto-play {
        background: #ffffff;
        color: #000000;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
      }

      .btn-lotto-play:hover {
        opacity: 0.9;
        transform: scale(1.03);
      }

      .btn-lotto-closed {
        background-color: rgb(var(--panel-11, 31 41 55));
        /* was --text-muted-2 (107 114 128) — measured 4.24:1 against the
           actual panel-11 tint, just under AA 4.5:1. --text-dim is a shade
           darker and comfortably clears it while staying a muted gray. */
        color: rgb(var(--text-dim, 71 85 105));
        cursor: not-allowed;
      }

      .lotto-num-badge {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.2);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 0.8rem;
        font-weight: 700;
        border: 1px solid rgba(255, 255, 255, 0.4);
      }

      .lotto-flag-badge {
        font-size: 1.2rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }

      @media (max-width: 1200px) {
        .lotto-grid {
          grid-template-columns: repeat(3, 1fr);
        }
      }

      @media (max-width: 768px) {
        .lotto-grid {
          grid-template-columns: repeat(2, 1fr);
          padding: 10px;
          gap: 10px;
        }

        .lotto-card-header {
          padding: 8px 10px;
          font-size: 0.8rem;
          gap: 6px;
        }

        .lotto-card-header img {
          width: 26px !important;
          height: 26px !important;
        }

        .lotto-card-body {
          padding: 8px 10px;
          flex-direction: column;
          align-items: flex-start;
          gap: 8px;
        }

        .lotto-info {
          gap: 3px;
          width: 100%;
        }

        .lotto-timer {
          font-size: 0.8rem;
        }

        .lotto-desc {
          font-size: 0.7rem;
        }

        .btn-lotto {
          width: 100%;
          padding: 7px 10px;
          font-size: 0.8rem;
        }
      }

      @media (max-width: 480px) {
        .lotto-grid {
          grid-template-columns: repeat(2, 1fr);
          padding: 8px;
          gap: 8px;
        }

        .lotto-card-header {
          padding: 7px 8px;
          font-size: 0.72rem;
          gap: 5px;
        }

        .lotto-card-header img {
          width: 22px !important;
          height: 22px !important;
        }

        .lotto-card-body {
          padding: 7px 8px;
        }

        .lotto-timer {
          font-size: 0.72rem;
        }

        .lotto-desc {
          font-size: 0.65rem;
        }

        .btn-lotto {
          padding: 6px 8px;
          font-size: 0.72rem;
          border-radius: 5px;
        }
      }

      /* --- Lotto Tab Bar --- */
      .lotto-tabs {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
        padding: 10px;
        background: rgb(var(--bg-03, 2 6 16));
        border-bottom: 1px solid rgb(var(--panel-06, 26 37 64));
      }

      @media (max-width: 768px) {
        .lotto-tabs {
          grid-template-columns: repeat(2, 1fr);
          gap: 8px;
          padding: 8px;
          border-bottom: none;
        }
      }

      .lotto-tab-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 18px 10px 16px;
        background: rgb(var(--bg-04, 4 8 20));
        border: 1px solid rgb(var(--panel-06, 26 37 64));
        border-radius: 10px;
        font-size: 0.78rem;
        font-weight: 600;
        color: rgb(var(--text-muted-2, 107 114 128));
        cursor: pointer;
        transition: color 0.2s, background 0.2s, border-color 0.2s;
        letter-spacing: 0.01em;
      }

      .lotto-tab-btn i {
        font-size: 1.15rem;
        color: rgb(var(--text-dim, 148 163 184));
        transition: color 0.2s;
      }

      .lotto-tab-btn span {
        white-space: nowrap;
      }

      .lotto-tab-btn:hover {
        /* --accent-on-card (theme-tokens.ejs) is purpose-built for accent-hue
           text sitting on a --bg-04 card — nudges lightness to clear 4.5:1
           against it, unlike --blue-deep which can land too light depending
           on the admin's color_website_secondary hue (measured 3.34:1 once). */
        color: var(--accent-on-card, rgb(21, 101, 192));
        background: rgb(var(--blue, 30 136 229) / 0.06);
      }

      .lotto-tab-btn.active {
        color: var(--accent-on-card, rgb(21, 101, 192));
        border-color: rgb(var(--blue, 30 136 229) / 0.4);
        background: rgb(var(--blue, 30 136 229) / 0.1);
      }

      .lotto-tab-btn.active i {
        color: var(--accent-on-card, rgb(21, 101, 192));
      }

      @media (max-width: 768px) {
        .lotto-tab-btn {
          padding: 11px 6px 10px;
          gap: 6px;
          font-size: 0.72rem;
        }

        .lotto-tab-btn i {
          font-size: 1.1rem;
        }
      }

      .lotto-tab-panel {
        display: none;
      }

      .lotto-tab-panel.active {
        display: block;
      }

      /* --- Lotto Bet Panel Wrapper (default: desktop block) --- */
      .lotto-panel-bet-wrap {
        display: block;
      }

      .lotto-vtabs {
        display: none;
      }

      .lotto-groups-wrap {
        display: block;
      }

      /* --- Lotto Vertical Tab (Mobile only) --- */
      @media (max-width: 768px) {
        .lotto-panel-bet-wrap {
          display: flex;
          min-height: 420px;
          align-items: stretch;
        }

        /* ── sidebar ── */
        .lotto-vtabs {
          display: flex;
          flex-direction: column;
          width: 76px;
          flex-shrink: 0;
          background: rgb(var(--bg-03, 2 6 16));
          border-right: 1px solid rgb(var(--panel-12, 22 31 56));
          overflow-y: auto;
          scrollbar-width: none;
        }

        .lotto-vtabs::-webkit-scrollbar {
          display: none;
        }

        .lotto-vtab-btn {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 5px;
          padding: 13px 4px;
          width: 100%;
          border: none;
          border-left: 3px solid transparent;
          background: transparent;
          color: rgb(var(--text-muted-2, 107 114 128));
          font-size: 0.62rem;
          font-weight: 600;
          cursor: pointer;
          transition: all 0.2s;
          line-height: 1.3;
          text-align: center;
        }

        .lotto-vtab-btn i {
          font-size: 1.05rem;
          transition: color 0.2s;
        }

        .lotto-vtab-btn:active {
          background: rgb(var(--blue, 30 136 229) / 0.15);
        }

        .lotto-vtab-btn.active {
          color: rgb(var(--blue-deep, 21 101 192));
          border-left-color: rgb(var(--blue, 30 136 229));
          background: rgb(var(--blue, 30 136 229) / 0.08);
        }

        .lotto-vtab-btn.active i {
          color: rgb(var(--blue-deep, 21 101 192));
        }

        /* ── content area ── */
        .lotto-groups-wrap {
          flex: 1;
          overflow-y: auto;
          min-width: 0;
        }

        /* ── hide all groups, show only .active ── */
        #lotto-panel-bet .lotto-group {
          display: none;
        }

        #lotto-panel-bet .lotto-group.active {
          display: block;
        }

        /* ── hide collapse header on mobile (vtab handles nav) ── */
        #lotto-panel-bet .lotto-group-header {
          display: none;
        }

        /* ── always show body on mobile ── */
        #lotto-panel-bet .lotto-group-body {
          display: block !important;
          padding: 8px 10px 12px;
        }

        /* ── tighten grid on mobile inside groups-wrap ── */
        #lotto-panel-bet .lotto-grid {
          grid-template-columns: repeat(2, 1fr);
          gap: 8px;
          padding: 0;
        }
      }

      /* --- Lotto Group (collapse) --- */
      .lotto-group {
        border-bottom: 1px solid rgb(var(--bg-27, 21 31 53));
      }

      .lotto-group:last-child {
        border-bottom: none;
      }

      .lotto-group-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 11px 20px;
        cursor: pointer;
        font-weight: 700;
        font-size: 0.95rem;
        /* was --text (body-adaptive) — sits on --bg-04 (a card tier, always
           near-white by design), not body, so use the fixed --text-on-panel. */
        color: rgb(var(--text-on-panel, 226 232 240));
        background: rgb(var(--bg-04, 4 8 20));
        user-select: none;
        transition: background 0.2s;
        gap: 8px;
      }

      /* hover/open: accent tint บนพื้นเข้ม bg-04 (เข้มทุกธีม) — ไม่กลืนกับพื้นหลังหน้า */
      .lotto-group-header:hover {
        background-color: rgb(var(--bg-04, 4 8 20));
        background-image: linear-gradient(rgb(var(--blue, 59 130 246) / 0.22), rgb(var(--blue, 59 130 246) / 0.22));
      }

      .lotto-group.open .lotto-group-header {
        background-color: rgb(var(--bg-04, 4 8 20));
        background-image: linear-gradient(rgb(var(--blue, 59 130 246) / 0.13), rgb(var(--blue, 59 130 246) / 0.13));
        box-shadow: inset 3px 0 0 rgb(var(--blue, 59 130 246));
      }

      .lotto-group-header span {
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .lgg-icon {
        transition: transform 0.3s ease;
        /* was raw --blue — exact-matched to the admin's secondary hue, can
           be too light against --bg-04's fixed near-white card. */
        color: var(--accent-on-card, rgb(var(--blue, 59 130 246)));
        flex-shrink: 0;
      }

      .lotto-group.open .lgg-icon {
        transform: rotate(180deg);
      }

      .lotto-group-body {
        display: none;
        padding: 15px 20px 20px;
        /* เดิมใช้ --bg-12 (~164 10 125) ซึ่งอยู่ในช่วง bg-07..15 ที่ theme-tokens.ejs เตือนไว้ว่า
           ใกล้เคียงสี body มากเกินไป (ดูเหมือนสีเดียวกัน) เปลี่ยนมาใช้ --bg-04 ให้เข้มขึ้นชัดเจน
           และเข้าชุดกับ .lotto-group-header ที่ใช้ --bg-04 อยู่แล้วด้านบน */
        background: rgb(var(--bg-04, 4 8 20));
      }

      .lotto-group.open .lotto-group-body {
        display: block;
      }

      /* Hide empty grid slots */
      .lotto-group-body .lotto-grid>div:empty {
        display: none;
      }

      /* --- Lotto Placeholder Panels --- */
      .lotto-panel-placeholder {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 12px;
        padding: 60px 20px;
        color: rgb(var(--text-dim-2, 156 163 175));
        font-size: 1rem;
        font-weight: 600;
      }

      .lotto-placeholder-sub {
        font-size: 0.82rem;
        color: rgb(var(--text-faint, 75 85 99));
        font-weight: 400;
      }

      /* --- All lotto tab panels: small-phone tuning (≤360px / 320px) --- */
      @media (max-width: 360px) {

        /* tab bar */
        .lotto-tabs {
          gap: 6px;
          padding: 6px;
        }

        .lotto-tab-btn {
          padding: 10px 4px 9px;
          font-size: 0.66rem;
          gap: 5px;
        }

        .lotto-tab-btn i {
          font-size: 1rem;
        }

        /* bet panel: slim sidebar + 2-up cards (ย่อ font/padding ให้ 2 ใบพอดีที่ 320px) */
        .lotto-vtabs {
          width: 54px;
        }

        .lotto-vtab-btn {
          font-size: 0.56rem;
          padding: 11px 2px;
          gap: 4px;
        }

        .lotto-vtab-btn i {
          font-size: 0.95rem;
        }

        #lotto-panel-bet .lotto-group-body {
          padding: 8px 6px 10px;
        }

        #lotto-panel-bet .lotto-grid {
          grid-template-columns: repeat(2, 1fr);
          gap: 6px;
        }

        #lotto-panel-bet .lotto-card-header {
          font-size: 0.6rem;
          padding: 6px;
          gap: 4px;
        }

        #lotto-panel-bet .lotto-card-header img {
          width: 18px !important;
          height: 18px !important;
        }

        #lotto-panel-bet .lotto-card-body {
          padding: 6px;
          gap: 6px;
        }

        #lotto-panel-bet .lotto-timer {
          font-size: 0.62rem;
        }

        #lotto-panel-bet .lotto-desc {
          font-size: 0.56rem;
        }

        #lotto-panel-bet .btn-lotto {
          padding: 6px 4px;
          font-size: 0.6rem;
        }

        /* placeholder panels (history etc.) */
        .lotto-panel-placeholder {
          padding: 40px 16px;
          font-size: 0.92rem;
        }
      }

      /* ════════ Lottery Result Panel (lotto-panel-results) ════════ */
      .lr-wrap {
        padding: 12px;
      }

      /* controls: เลือกงวด + filter */
      .lr-controls {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
        margin-bottom: 14px;
      }

      .lr-date {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        height: 40px;
        padding: 0 12px;
        background: rgb(var(--bg-04, 4 8 20));
        border: 1px solid rgb(var(--panel-06, 26 37 64));
        border-radius: 10px;
        transition: border-color 0.2s, box-shadow 0.2s;
      }

      .lr-date i {
        color: rgb(var(--blue-2, 96 165 250));
        font-size: 0.9rem;
      }

      .lr-date:focus-within {
        border-color: rgb(var(--blue, 59 130 246));
        box-shadow: 0 0 0 3px rgb(var(--blue, 59 130 246) / 0.15);
      }

      .lr-date__input {
        background: transparent;
        border: none;
        outline: none;
        color: rgb(var(--text-on-panel, 15 23 42));
        font-family: inherit;
        font-size: 0.86rem;
        font-weight: 600;
        color-scheme: dark;
        min-width: 132px;
      }

      /* filter pills */
      .lr-filters {
        display: flex;
        gap: 7px;
        flex: 1;
        overflow-x: auto;
        scrollbar-width: none;
      }

      .lr-filters::-webkit-scrollbar {
        display: none;
      }

      .lr-filter {
        flex-shrink: 0;
        padding: 8px 16px;
        border-radius: 50px;
        border: 1px solid rgb(var(--panel-06, 26 37 64));
        background: rgb(var(--bg-04, 4 8 20));
        color: rgb(var(--text-dim, 148 163 184));
        font-family: inherit;
        font-size: 0.8rem;
        font-weight: 600;
        white-space: nowrap;
        cursor: pointer;
        transition: color 0.2s, background 0.2s, border-color 0.2s, box-shadow 0.2s;
      }

      .lr-filter:hover {
        color: rgb(var(--slate, 107 114 128));
        border-color: rgb(var(--panel-15, 42 58 90));
      }

      .lr-filter.active {
        color: rgb(var(--text-on-accent, 255 255 255));
        background: linear-gradient(135deg, rgb(var(--blue, 59 130 246)), rgb(var(--blue-5, 37 99 235)));
        border-color: rgb(var(--blue, 59 130 246));
        box-shadow: 0 2px 10px rgb(var(--blue, 59 130 246) / 0.35);
      }

      /* results — mobile: stacked cards/sections */
      .lr-grid {
        display: flex;
        flex-direction: column;
        gap: 14px;
      }

      /* result card (หวยรัฐบาลไทย / ออมสิน / ธ.ก.ส) */
      .lr-card {
        background: linear-gradient(160deg, rgb(var(--bg-05, 5 10 25)) 0%, rgb(var(--bg-02, 3 6 16)) 100%);
        border: 1px solid rgb(var(--panel-06, 26 37 64));
        border-radius: 14px;
        padding: 14px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
        transition: border-color 0.2s;
      }

      .lr-card:hover {
        border-color: rgb(var(--panel-15, 42 58 90));
      }

      .lr-card--feature {
        border-color: rgb(var(--gold-2, 245 200 66) / 0.3);
        box-shadow: 0 4px 20px rgb(var(--gold-2, 245 200 66) / 0.1), 0 4px 16px rgba(0, 0, 0, 0.4);
      }

      .lr-card__head {
        display: flex;
        align-items: center;
        gap: 9px;
        margin-bottom: 12px;
      }

      .lr-card__flag {
        width: 30px;
        height: 30px;
        border-radius: 6px;
        object-fit: cover;
        flex-shrink: 0;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
      }

      .lr-card__title {
        color: rgb(var(--text-on-panel, 15 23 42));
        font-weight: 700;
        font-size: 0.95rem;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .lr-card__date {
        margin-left: auto;
        padding: 3px 12px;
        background: rgb(var(--gold-2, 245 200 66) / 0.12);
        border: 1px solid rgb(var(--gold-2, 245 200 66) / 0.25);
        border-radius: 50px;
        color: rgb(var(--gold-2, 245 200 66));
        font-size: 0.74rem;
        font-weight: 700;
        white-space: nowrap;
      }

      /* card body: full-width tiles stacked, others in a 2-col group */
      .lr-card__body {
        display: flex;
        flex-direction: column;
        gap: 10px;
      }

      .lr-card__grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
      }

      /* prize tile */
      .lr-tile {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        min-height: 70px;
        padding: 12px 8px;
        border-radius: 10px;
        border: 1px solid transparent;
      }

      .lr-tile__label {
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.3px;
        color: rgb(var(--text-dim, 148 163 184));
      }

      .lr-tile__value {
        font-size: 1.5rem;
        font-weight: 800;
        letter-spacing: 3px;
        line-height: 1;
        font-variant-numeric: tabular-nums;
      }

      .lr-tile--gold {
        background: rgb(var(--gold-2, 245 200 66) / 0.10);
        border-color: rgb(var(--gold-2, 245 200 66) / 0.28);
      }

      .lr-tile--gold .lr-tile__label {
        color: rgb(var(--gold-2, 245 200 66));
      }

      .lr-tile--gold .lr-tile__value {
        color: rgb(var(--gold-2, 245 200 66));
      }

      .lr-tile--blue {
        background: rgb(var(--blue, 59 130 246) / 0.12);
        border-color: rgb(var(--blue, 59 130 246) / 0.28);
      }

      .lr-tile--blue .lr-tile__label {
        color: rgb(var(--slate, 107 114 128));
      }

      .lr-tile--blue .lr-tile__value {
        color: rgb(var(--text-on-panel, 15 23 42));
      }

      .lr-tile--cyan {
        background: rgb(var(--cyan-2, 34 211 238) / 0.10);
        border-color: rgb(var(--cyan-2, 34 211 238) / 0.25);
      }

      .lr-tile--cyan .lr-tile__label {
        color: rgb(var(--slate, 107 114 128));
      }

      .lr-tile--cyan .lr-tile__value {
        color: rgb(var(--text-on-panel, 15 23 42));
      }

      .lr-tile.is-pending .lr-tile__value {
        color: rgb(var(--text-dim, 148 163 184));
        font-size: 0.82rem;
        letter-spacing: 0;
        font-weight: 600;
      }

      .lr-card--feature .lr-tile--gold .lr-tile__value {
        font-size: 2rem;
        letter-spacing: 6px;
      }

      /* grid section (ต่างประเทศ / หุ้น / หุ้น VIP) */
      .lr-section {
        background: linear-gradient(160deg, rgb(var(--bg-05, 5 10 25)) 0%, rgb(var(--bg-02, 3 6 16)) 100%);
        border: 1px solid rgb(var(--panel-06, 26 37 64));
        border-radius: 14px;
        padding: 14px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
      }

      .lr-section__head {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 12px;
        flex-wrap: wrap;
      }

      .lr-section__title {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        color: rgb(var(--text-on-panel, 15 23 42));
        font-weight: 700;
        font-size: 0.95rem;
      }

      .lr-section__title i {
        color: rgb(var(--blue-2, 96 165 250));
        font-size: 0.9rem;
      }

      .lr-mini-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
      }

      .lr-mini {
        background: rgb(var(--bg-04, 4 8 20));
        border: 1px solid rgb(var(--panel-12, 22 31 56));
        border-radius: 10px;
        padding: 9px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        transition: border-color 0.2s;
      }

      .lr-mini:hover {
        border-color: rgb(var(--panel-15, 42 58 90));
      }

      .lr-mini__head {
        display: flex;
        align-items: center;
        gap: 6px;
        color: rgb(var(--text-on-panel, 15 23 42));
        font-weight: 700;
        font-size: 0.8rem;
        min-width: 0;
      }

      .lr-mini__head img {
        width: 22px;
        height: 22px;
        border-radius: 4px;
        object-fit: cover;
        flex-shrink: 0;
      }

      .lr-mini__head span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .lr-mini__row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 7px;
      }

      .lr-mini__cell {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        background: rgb(var(--bg-02, 3 6 16));
        border: 1px solid rgb(var(--panel-04, 22 33 60));
        border-radius: 8px;
        padding: 7px 4px;
      }

      .lr-mini__label {
        font-size: 0.64rem;
        font-weight: 700;
        letter-spacing: 0.2px;
        color: rgb(var(--text-dim, 148 163 184));
      }

      .lr-mini__value {
        font-size: 1.05rem;
        font-weight: 800;
        letter-spacing: 1px;
        line-height: 1;
        font-variant-numeric: tabular-nums;
      }

      .lr-mini__value--blue {
        color: rgb(var(--blue-2, 96 165 250));
      }

      .lr-mini__value--cyan {
        color: rgb(var(--cyan-2, 34 211 238));
      }

      .lr-mini__value.is-pending {
        color: rgb(var(--text-dim, 148 163 184));
        font-size: 0.72rem;
        letter-spacing: 0;
        font-weight: 600;
      }

      /* states */
      .lr-loading,
      .lr-empty {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 50px 20px;
        color: rgb(var(--text-muted-2, 107 114 128));
        font-size: 0.9rem;
        font-weight: 600;
      }

      .lr-loading i {
        font-size: 1.8rem;
        color: rgb(var(--blue, 59 130 246));
      }

      .lr-empty i {
        font-size: 1.8rem;
        color: rgb(var(--text-faint-2, 55 65 81));
      }

      /* responsive: more mini-cards per row on wider viewports */
      @media (min-width: 560px) {
        .lr-mini-grid {
          grid-template-columns: repeat(3, 1fr);
        }
      }

      @media (min-width: 900px) {
        .lr-mini-grid {
          grid-template-columns: repeat(4, 1fr);
        }

        /* Thai-gov cards: featured card (รัฐบาล) spans 2 rows in col 1;
           ออมสิน + ธ.ก.ส stack in col 2; foreign/stock sections span full width */
        .lr-grid {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 14px;
        }

        .lr-card--feature {
          grid-row: span 2;
        }

        .lr-section {
          grid-column: 1 / -1;
        }
      }

      /* mobile (small phones): stack controls full-width, scale numbers to fit */
      @media (max-width: 480px) {
        .lr-wrap {
          padding: 10px;
        }

        .lr-controls {
          gap: 8px;
          margin-bottom: 12px;
        }

        .lr-date {
          flex: 1 1 100%;
        }

        .lr-date__input {
          flex: 1;
          min-width: 0;
        }

        .lr-filters {
          flex: 1 1 100%;
        }

        .lr-card,
        .lr-section {
          padding: 12px;
        }

        .lr-card__grid {
          gap: 8px;
        }

        .lr-tile {
          min-height: 62px;
          padding: 10px 6px;
        }

        .lr-tile__value {
          font-size: 1.3rem;
          letter-spacing: 2px;
        }

        .lr-card--feature .lr-tile--gold .lr-tile__value {
          font-size: 1.7rem;
          letter-spacing: 4px;
        }

        .lr-mini-grid {
          gap: 8px;
        }

        .lr-mini__row {
          gap: 6px;
        }

        .lr-mini__cell {
          padding: 6px 3px;
        }

        .lr-mini__value {
          font-size: 0.98rem;
        }

        .lr-loading,
        .lr-empty {
          padding: 40px 16px;
        }
      }

      /* very small phones (≤360px): single-column mini-cards so foreign/stock
         items get full width instead of being squeezed 2-up at 320px */
      @media (max-width: 360px) {
        .lr-wrap {
          padding: 8px;
        }

        .lr-card,
        .lr-section {
          padding: 11px;
        }

        .lr-tile__value {
          font-size: 1.2rem;
          letter-spacing: 1px;
        }

        .lr-card--feature .lr-tile--gold .lr-tile__value {
          font-size: 1.5rem;
          letter-spacing: 3px;
        }

        .lr-mini-grid {
          grid-template-columns: 1fr;
        }

        .lr-mini__head {
          font-size: 0.82rem;
        }

        .lr-mini__label {
          font-size: 0.66rem;
        }

        .lr-mini__value {
          font-size: 1.05rem;
          letter-spacing: 1px;
        }
      }

      /* ════════ Payout Rate Panel (lotto-panel-payout) ════════ */
      .pr-wrap {
        padding: 12px;
        display: flex;
        flex-direction: column;
        gap: 14px;
      }

      /* rate-table image (settings.price_image) */
      .pr-image-card {
        max-width: 560px;
        margin: 0 auto;
        width: 100%;
        background: linear-gradient(160deg, rgb(var(--bg-05, 5 10 25)) 0%, rgb(var(--bg-02, 3 6 16)) 100%);
        border: 1px solid rgb(var(--panel-12, 22 31 56));
        border-radius: 14px;
        padding: 10px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
      }

      .pr-image {
        display: block;
        width: 100%;
        height: auto;
        border-radius: 10px;
        max-width: 560px;
        margin: 0 auto;
      }

      /* structured per-type rates */
      .pr-rates {
        background: linear-gradient(160deg, rgb(var(--bg-05, 5 10 25)) 0%, rgb(var(--bg-02, 3 6 16)) 100%);
        border: 1px solid rgb(var(--panel-12, 22 31 56));
        border-radius: 14px;
        padding: 14px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
        max-width: 560px;
        margin: 0 auto;
        width: 100%;
      }

      .pr-rates__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding-bottom: 10px;
        margin-bottom: 12px;
        border-bottom: 1px solid rgb(var(--panel-06, 26 37 64));
      }

      .pr-rates__title {
        color: rgb(var(--text-on-panel, 15 23 42));
        font-weight: 700;
        font-size: 0.95rem;
      }

      .pr-rates__title i {
        color: rgb(var(--gold-2, 245 200 66));
        margin-right: 4px;
      }

      .pr-rates__unit {
        padding: 3px 12px;
        background: rgb(var(--gold-2, 245 200 66) / 0.12);
        border: 1px solid rgb(var(--gold-2, 245 200 66) / 0.25);
        border-radius: 50px;
        color: rgb(var(--gold-2, 245 200 66));
        font-size: 0.72rem;
        font-weight: 700;
      }

      .pr-group {
        margin-bottom: 14px;
      }

      .pr-group:last-of-type {
        margin-bottom: 0;
      }

      .pr-group__label {
        display: inline-block;
        font-size: 0.78rem;
        font-weight: 700;
        margin-bottom: 8px;
        padding-left: 9px;
        border-left: 3px solid rgb(var(--blue, 59 130 246));
        color: rgb(var(--slate, 107 114 128));
      }

      .pr-group__label--three {
        border-left-color: rgb(var(--blue, 59 130 246));
      }

      .pr-group__label--two {
        border-left-color: rgb(var(--cyan-2, 34 211 238));
      }

      .pr-group__label--run {
        border-left-color: rgb(var(--gold-2, 245 200 66));
      }

      .pr-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 9px;
      }

      .pr-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 11px 13px;
        background: rgb(var(--bg-04, 4 8 20));
        border: 1px solid rgb(var(--panel-12, 22 31 56));
        border-left-width: 3px;
        border-radius: 10px;
        transition: border-color 0.2s;
      }

      .pr-item:hover {
        border-color: rgb(var(--panel-15, 42 58 90));
      }

      .pr-item__name {
        color: rgb(var(--text-on-panel, 15 23 42));
        font-size: 0.84rem;
        font-weight: 600;
      }

      .pr-item__rate {
        font-size: 1.15rem;
        font-weight: 800;
        letter-spacing: 0.5px;
        font-variant-numeric: tabular-nums;
      }

      .pr-item--three {
        border-left-color: rgb(var(--blue-deep, 21 101 192));
      }

      .pr-item--three .pr-item__rate {
        color: rgb(var(--blue-deep, 21 101 192));
      }

      .pr-item--two {
        border-left-color: rgb(var(--primary, 30 136 229));
      }

      .pr-item--two .pr-item__rate {
        color: rgb(var(--blue-deep, 21 101 192));
      }

      .pr-item--run {
        border-left-color: rgb(180 83 9);
      }

      .pr-item--run .pr-item__rate {
        color: rgb(180 83 9);
      }

      .pr-note {
        margin: 14px 0 0;
        padding-top: 12px;
        border-top: 1px solid rgb(var(--panel-06, 26 37 64));
        color: rgb(var(--text-muted-2, 107 114 128));
        font-size: 0.76rem;
        line-height: 1.5;
      }

      .pr-note i {
        color: rgb(var(--blue, 59 130 246));
        margin-right: 4px;
      }

      /* responsive: wider viewports fit more rate items per row */
      @media (min-width: 560px) {
        .pr-grid {
          grid-template-columns: repeat(3, 1fr);
        }
      }

      @media (min-width: 900px) {
        .pr-grid {
          grid-template-columns: repeat(4, 1fr);
        }
      }

      /* mobile (≤480px): tighten the rate panel */
      @media (max-width: 480px) {
        .pr-wrap {
          padding: 10px;
          gap: 12px;
        }

        .pr-image-card,
        .pr-rates {
          padding: 12px;
        }

        .pr-grid {
          gap: 8px;
        }

        .pr-item {
          padding: 9px 11px;
        }

        .pr-item__name {
          font-size: 0.8rem;
        }

        .pr-item__rate {
          font-size: 1.05rem;
        }
      }

      /* very small phones (≤360px): one rate per row so name + rate never clash */
      @media (max-width: 360px) {
        .pr-wrap {
          padding: 8px;
        }

        .pr-image-card,
        .pr-rates {
          padding: 11px;
        }

        .pr-grid {
          grid-template-columns: 1fr;
        }
      }

      /* ============================================================
         Transaction / โพยหวย panel  (lotto-panel-transaction)
         ============================================================ */
      .tx-wrap {
        display: flex;
        flex-direction: column;
        gap: 16px;
      }

      .tx-content {
        display: flex;
        flex-direction: column;
        gap: 18px;
        padding: 16px;
      }

      /* login gate */
      .tx-gate {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        text-align: center;
        padding: 48px 16px;
        color: rgb(var(--text-dim, 148 163 184));
      }

      .tx-gate i {
        color: rgb(var(--blue, 59 130 246));
      }

      .tx-gate__title {
        color: rgb(var(--text-bright, 241 245 249));
        font-weight: 700;
        font-size: 1.05rem;
      }

      .tx-gate__sub {
        font-size: 0.85rem;
        color: rgb(var(--text-muted-2, 107 114 128));
      }

      .tx-gate__btn {
        margin-top: 8px;
        padding: 10px 26px;
        border: none;
        border-radius: 50px;
        cursor: pointer;
        color: rgb(var(--text-on-accent, 255 255 255));
        font-weight: 700;
        font-size: 0.9rem;
        background: linear-gradient(135deg, rgb(var(--blue, 59 130 246)), rgb(var(--blue-5, 37 99 235)));
        box-shadow: 0 2px 12px rgb(var(--blue, 59 130 246) / 0.4);
      }

      /* main sub-tabs (lottery / yeekee / yeekeevip) */
      .tx-maintabs {
        display: flex;
        gap: 8px;
      }

      .tx-maintab {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        padding: 10px 6px;
        border: 1px solid rgb(var(--panel-06, 26 37 64));
        border-radius: 12px;
        cursor: pointer;
        background: rgb(var(--bg-04, 4 8 20));
        color: rgb(var(--text-dim, 148 163 184));
        font-weight: 600;
        font-size: 0.82rem;
        transition: all 0.18s ease;
      }

      .tx-maintab i {
        font-size: 1rem;
      }

      .tx-maintab:hover {
        color: rgb(var(--slate, 107 114 128));
        border-color: rgb(var(--panel-13, 36 52 92));
      }

      .tx-maintab.active {
        color: rgb(var(--text-on-accent, 255 255 255));
        border-color: rgb(var(--blue, 59 130 246));
        background: linear-gradient(135deg, rgb(var(--blue, 59 130 246)), rgb(var(--blue-5, 37 99 235)));
        box-shadow: 0 2px 12px rgb(var(--blue, 59 130 246) / 0.35);
      }

      /* panes */
      .tx-tab-pane {
        display: none;
        flex-direction: column;
        gap: 16px;
      }

      .tx-tab-pane.active {
        display: flex;
      }

      /* summary card */
      .tx-summary {
        background: linear-gradient(160deg, rgb(var(--bg-05, 5 10 25)) 0%, rgb(var(--bg-02, 3 6 16)) 100%);
        border: 1px solid rgb(var(--panel-12, 22 31 56));
        border-radius: 14px;
        overflow: hidden;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
      }

      .tx-summary__head {
        padding: 12px 16px;
        font-weight: 700;
        font-size: 0.92rem;
        color: rgb(var(--text-on-accent, 255 255 255));
        background: linear-gradient(135deg, rgb(var(--blue-5, 37 99 235)), rgb(var(--blue-7, 29 78 216)));
      }

      .tx-summary__head i {
        margin-right: 6px;
      }

      .tx-summary__grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        padding: 12px;
      }

      .tx-stat {
        display: flex;
        flex-direction: column;
        gap: 4px;
        align-items: center;
        text-align: center;
        background: rgb(var(--bg-02, 3 6 16));
        border: 1px solid rgb(var(--panel-04, 22 33 60));
        border-radius: 10px;
        padding: 12px 8px;
      }

      .tx-stat__label {
        font-size: 0.72rem;
        color: rgb(var(--text-dim, 148 163 184));
      }

      .tx-stat__value {
        font-size: 1.05rem;
        font-weight: 700;
        color: rgb(var(--text-on-panel, 15 23 42));
      }

      .tx-stat--buy .tx-stat__value {
        color: rgb(var(--blue-2, 96 165 250));
      }

      .tx-stat--win .tx-stat__value {
        color: rgb(var(--success-mint, 52 211 153));
      }

      .tx-stat--result .tx-stat__value {
        color: rgb(var(--text-on-panel, 15 23 42));
      }

      .tx-stat--wait .tx-stat__value {
        color: rgb(var(--text-dim, 148 163 184));
      }

      /* filter pills */
      .tx-filters {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: flex-start;
      }

      .tx-filter {
        padding: 8px 16px;
        border-radius: 50px;
        border: 1px solid rgb(var(--panel-06, 26 37 64));
        cursor: pointer;
        background: rgb(var(--bg-04, 4 8 20));
        color: rgb(var(--text-dim, 148 163 184));
        font-size: 0.82rem;
        font-weight: 600;
        transition: all 0.18s ease;
      }

      .tx-filter:hover {
        color: rgb(var(--slate, 107 114 128));
        border-color: rgb(var(--panel-13, 36 52 92));
      }

      .tx-filter.active {
        color: rgb(var(--text-on-accent, 255 255 255));
        border-color: rgb(var(--blue, 59 130 246));
        background: linear-gradient(135deg, rgb(var(--blue, 59 130 246)), rgb(var(--blue-5, 37 99 235)));
        box-shadow: 0 2px 10px rgb(var(--blue, 59 130 246) / 0.35);
      }

      /* filter panes */
      .tx-filter-pane {
        display: none;
      }

      .tx-filter-pane.active {
        display: block;
      }

      /* date-range search box */
      .tx-search {
        display: flex;
        flex-direction: column;
        gap: 10px;
        background: rgb(var(--bg-04, 4 8 20));
        border: 1px solid rgb(var(--panel-06, 26 37 64));
        border-radius: 12px;
        padding: 12px;
        margin-bottom: 14px;
      }

      .tx-date {
        display: flex;
        flex-direction: column;
        gap: 4px;
        flex: 1;
      }

      .tx-date label {
        font-size: 0.74rem;
        font-weight: 700;
        color: rgb(var(--text-dim, 148 163 184));
      }

      .tx-date input[type="date"] {
        height: 40px;
        padding: 0 12px;
        border-radius: 10px;
        width: 100%;
        background: rgb(var(--bg-02, 3 6 16));
        border: 1px solid rgb(var(--panel-06, 26 37 64));
        color: rgb(var(--text-on-panel, 15 23 42));
        color-scheme: dark;
        font-size: 0.85rem;
      }

      .tx-date input[type="date"]:focus {
        outline: none;
        border-color: rgb(var(--blue, 59 130 246));
      }

      .tx-search-btn {
        height: 40px;
        padding: 0 18px;
        border: none;
        border-radius: 10px;
        cursor: pointer;
        color: rgb(var(--text-on-accent, 255 255 255));
        font-weight: 700;
        font-size: 0.85rem;
        white-space: nowrap;
        background: linear-gradient(135deg, rgb(var(--blue, 59 130 246)), rgb(var(--blue-5, 37 99 235)));
        box-shadow: 0 2px 10px rgb(var(--blue, 59 130 246) / 0.3);
      }

      .tx-search-btn:hover {
        filter: brightness(1.08);
      }

      /* poy cards grid */
      .tx-cards {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
      }

      .tx-card {
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 100%;
        background: linear-gradient(160deg, rgb(var(--bg-05, 5 10 25)) 0%, rgb(var(--bg-02, 3 6 16)) 100%);
        border: 1px solid rgb(var(--panel-12, 22 31 56));
        border-radius: 14px;
        padding: 14px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
        transition: transform 0.18s ease, border-color 0.18s ease;
      }

      .tx-card:hover {
        transform: translateY(-2px);
        border-color: rgb(var(--panel-16, 42 58 99));
      }

      .tx-card__top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
      }

      .tx-card__trx {
        font-size: 0.78rem;
        color: rgb(var(--text-muted-2, 107 114 128));
      }

      .tx-card__title {
        font-size: 0.92rem;
        font-weight: 700;
        color: rgb(var(--text-on-panel, 15 23 42));
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .tx-card__price {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: rgb(var(--bg-02, 3 6 16));
        border: 1px solid rgb(var(--panel-12, 22 31 56));
        border-radius: 8px;
        padding: 8px 11px;
        font-size: 0.82rem;
        color: rgb(var(--text-dim, 148 163 184));
      }

      .tx-card__price-val {
        font-weight: 700;
        color: rgb(var(--blue-2, 96 165 250));
      }

      .tx-card__foot {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
      }

      .tx-card__time {
        font-size: 0.76rem;
        color: rgb(var(--text-muted-2, 107 114 128));
      }

      .tx-detail-btn {
        padding: 6px 16px;
        border-radius: 50px;
        cursor: pointer;
        font-size: 0.78rem;
        font-weight: 600;
        background: transparent;
        border: 1px solid rgb(var(--blue, 59 130 246));
        color: rgb(var(--blue-2, 96 165 250));
        transition: all 0.18s ease;
      }

      .tx-detail-btn:hover {
        background: rgb(var(--blue, 59 130 246) / 0.14);
        color: rgb(var(--blue-deep, 30 64 175));
      }

      /* status badges */
      .tx-badge {
        display: inline-block;
        padding: 3px 11px;
        border-radius: 50px;
        font-size: 0.72rem;
        font-weight: 700;
        border: 1px solid transparent;
        white-space: nowrap;
      }

      .tx-badge--success {
        background: rgb(var(--success, 34 197 94) / 0.14);
        color: rgb(var(--text-on-panel, 15 23 42));
        border-color: rgb(var(--success, 34 197 94) / 0.3);
      }

      .tx-badge--warning {
        background: rgb(var(--amber, 245 158 11) / 0.14);
        color: rgb(var(--text-on-panel, 15 23 42));
        border-color: rgb(var(--amber, 245 158 11) / 0.3);
      }

      .tx-badge--danger {
        background: rgb(var(--danger, 239 68 68) / 0.14);
        color: rgb(var(--text-on-panel, 15 23 42));
        border-color: rgb(var(--danger, 239 68 68) / 0.3);
      }

      .tx-badge--secondary {
        background: rgb(var(--text-dim, 148 163 184) / 0.12);
        color: rgb(var(--text-on-panel, 15 23 42));
        border-color: rgb(var(--text-dim, 148 163 184) / 0.25);
      }

      /* loading / empty */
      .tx-loading,
      .tx-empty {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        text-align: center;
        padding: 36px 16px;
        color: rgb(var(--text-muted-2, 107 114 128));
      }

      .tx-loading i,
      .tx-empty i {
        font-size: 1.6rem;
        color: rgb(var(--blue, 59 130 246));
      }

      .tx-empty__title {
        color: rgb(var(--slate, 107 114 128));
        font-weight: 700;
        margin-bottom: 10px;
      }

      .tx-empty__sub {
        font-size: 0.8rem;
        color: rgb(var(--text-muted-2, 107 114 128));
      }

      /* detail modal */
      .tx-modal {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 4000;
        background: rgb(var(--bg-03, 2 6 16) / 0.74);
        backdrop-filter: blur(2px);
        align-items: center;
        justify-content: center;
        padding: 16px;
      }

      .tx-modal.active {
        display: flex;
      }

      .tx-modal__box {
        width: 100%;
        max-width: 660px;
        max-height: 88vh;
        overflow-y: auto;
        background: linear-gradient(160deg, rgb(var(--bg-05, 5 10 25)) 0%, rgb(var(--bg-02, 3 6 16)) 100%);
        border: 1px solid rgb(var(--panel-12, 22 31 56));
        border-radius: 16px;
        padding: 16px;
        box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
      }

      .tx-modal__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 16px 12px;
        margin: -16px -16px 12px;
        border-bottom: 1px solid rgb(var(--panel-06, 26 37 64));
        /* sticky ที่หัว .tx-modal__box (overflow-y:auto) — ชื่อโพย/ปุ่มปิดต้องเห็นตลอดตอนเลื่อนดูรายการเดิมพันยาวๆ
           ค่า top/margin ลบ = ยืดออกไปชนขอบบนของกล่อง (ชดเชย padding:16px ของ .tx-modal__box) แล้วให้พื้นหลังทึบ
           ของตัวเองมาปิดทับแทน กัน content ที่เลื่อนผ่านทะลุออกมาให้เห็น */
        position: sticky;
        top: -16px;
        background: rgb(var(--bg-05, 5 10 25));
        z-index: 2;
      }

      .tx-modal__title {
        font-weight: 700;
        color: rgb(var(--blue-2, 96 165 250));
        font-size: 0.98rem;
      }

      .tx-modal__title i {
        margin-right: 6px;
      }

      .tx-modal__close {
        width: 32px;
        height: 32px;
        border-radius: 8px;
        cursor: pointer;
        line-height: 1;
        background: rgb(var(--bg-02, 3 6 16));
        border: 1px solid rgb(var(--panel-12, 22 31 56));
        color: rgb(var(--text-dim, 148 163 184));
        font-size: 1.2rem;
      }

      .tx-modal__close:hover {
        color: rgb(var(--blue, 59 130 246));
        border-color: rgb(var(--blue, 59 130 246));
      }

      .tx-modal__meta {
        background: rgb(var(--bg-03, 2 6 16));
        border: 1px solid rgb(var(--panel-12, 22 31 56));
        border-radius: 12px;
        padding: 6px 12px;
        margin-bottom: 14px;
      }

      .tx-meta-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 8px 0;
        border-bottom: 1px solid rgb(var(--panel-04, 22 33 60));
        font-size: 0.84rem;
      }

      .tx-meta-row:last-child {
        border-bottom: none;
      }

      .tx-meta-key {
        color: rgb(var(--text-muted-2, 107 114 128));
      }

      .tx-meta-val {
        color: rgb(var(--text-on-panel, 15 23 42));
        font-weight: 600;
        text-align: right;
      }

      .tx-meta-val--blue {
        color: rgb(var(--blue-2, 96 165 250));
      }

      .tx-meta-val--win {
        color: rgb(var(--success-mint, 52 211 153));
      }

      .tx-modal__detail {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
      }

      .tx-bet {
        display: flex;
        flex-direction: column;
        gap: 6px;
        background: rgb(var(--bg-03, 2 6 16));
        border: 1px solid rgb(var(--panel-12, 22 31 56));
        border-radius: 12px;
        padding: 12px;
        text-align: center;
      }

      .tx-bet__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      .tx-bet__idx {
        font-size: 0.72rem;
        font-weight: 700;
        color: rgb(var(--text-dim, 148 163 184));
        background: rgb(var(--bg-02, 3 6 16));
        border: 1px solid rgb(var(--panel-12, 22 31 56));
        border-radius: 50px;
        padding: 2px 10px;
      }

      .tx-bet__num {
        font-size: 1.6rem;
        font-weight: 800;
        color: rgb(var(--gold-2, 245 200 66));
        letter-spacing: 2px;
      }

      .tx-bet__type {
        font-size: 0.78rem;
        color: rgb(var(--text-dim, 148 163 184));
      }

      .tx-bet__rows {
        margin-top: 6px;
        border-top: 1px solid rgb(var(--panel-04, 22 33 60));
        padding-top: 8px;
        font-size: 0.8rem;
      }

      .tx-bet__row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 2px 0;
        color: rgb(var(--text-dim, 148 163 184));
      }

      .tx-bet__strong {
        color: rgb(var(--text-on-panel, 15 23 42));
        font-weight: 700;
      }

      .tx-bet__win {
        color: rgb(var(--success-mint, 52 211 153));
        font-weight: 700;
      }

      .tx-bet__lose {
        color: rgb(var(--danger-light, 248 113 113));
        font-weight: 700;
      }

      /* ปุ่มคืนโพย — เต็มความกว้างทุกคอลัมน์ของ grid, sticky ติดขอบล่างของ .tx-modal__box
         (เหตุผลเดียวกับ .tx-modal__head ด้านบน: รายการเดิมพันอาจยาวเกิน 88vh ปุ่มนี้ต้องกดได้เสมอ
         โดยไม่ต้องเลื่อนลงไปสุดก่อน) ค่า bottom/margin ลบ = ยืดไปชนขอบล่างกล่อง ชดเชย padding เดิม */
      .tx-return-wrap {
        grid-column: 1 / -1;
        position: sticky;
        bottom: -16px;
        margin: 4px -16px -16px;
        padding: 8px 16px 16px;
        background: rgb(var(--bg-02, 3 6 16));
        box-shadow: 0 -8px 16px -8px rgba(0, 0, 0, 0.45);
        z-index: 2;
      }

      .tx-return-btn {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 12px;
        border-radius: 12px;
        cursor: pointer;
        font-size: 0.9rem;
        font-weight: 700;
        font-family: inherit;
        background: rgb(var(--danger, 239 68 68) / 0.12);
        border: 1px solid rgb(var(--danger, 239 68 68) / 0.45);
        color: rgb(var(--danger-light, 248 113 113));
        transition: background 0.18s ease, color 0.18s ease;
      }

      .tx-return-btn:hover {
        background: rgb(var(--danger, 239 68 68) / 0.25);
        color: rgb(var(--danger-deep, 185 28 28));
      }

      .tx-return-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
      }

      /* themed confirm dialog */
      .tx-confirm__box {
        max-width: 380px;
        text-align: center;
      }

      .tx-confirm__icon {
        font-size: 2.4rem;
        color: rgb(var(--gold-warm, 251 191 36));
        margin-bottom: 8px;
      }

      .tx-confirm__title {
        font-size: 1.05rem;
        font-weight: 700;
        color: rgb(var(--text-on-panel, 15 23 42));
        margin-bottom: 6px;
      }

      .tx-confirm__text {
        font-size: 0.86rem;
        color: rgb(var(--text-dim, 148 163 184));
        margin-bottom: 16px;
      }

      .tx-confirm__actions {
        display: flex;
        gap: 10px;
      }

      .tx-confirm__cancel,
      .tx-confirm__ok {
        flex: 1;
        padding: 10px;
        border-radius: 10px;
        cursor: pointer;
        font-weight: 700;
        font-size: 0.88rem;
        border: 1px solid transparent;
      }

      .tx-confirm__cancel {
        background: rgb(var(--bg-02, 3 6 16));
        border-color: rgb(var(--panel-12, 22 31 56));
        color: rgb(var(--slate, 107 114 128));
      }

      .tx-confirm__cancel:hover {
        border-color: rgb(var(--blue, 59 130 246));
      }

      .tx-confirm__ok {
        background: linear-gradient(135deg, rgb(var(--danger, 239 68 68)), rgb(var(--danger-2, 220 38 38)));
        color: #fff;
      }

      .tx-confirm__ok:hover {
        filter: brightness(1.08);
      }

      /* themed toast */
      .tx-toast {
        position: fixed;
        top: 18px;
        right: 18px;
        z-index: 4200;
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 12px 16px;
        border-radius: 12px;
        font-size: 0.86rem;
        font-weight: 600;
        /* พื้น toast คือ bg-05→bg-02 ซึ่งธีมนี้ล็อกขาวเสมอ (ไม่ถูก admin override)
           แต่ --text แปรตามสี body ที่แอดมินตั้ง — body เข้ม → --text ขาว →
           ขาวบนขาวหาย จึงต้องใช้ --text-on-panel (เข้มตายตัวสำหรับพื้นขาวเสมอ) */
        color: rgb(var(--text-on-panel, 15 23 42));
        background: linear-gradient(160deg, rgb(var(--bg-05, 245 250 255)) 0%, rgb(var(--bg-02, 255 255 255)) 100%);
        border: 1px solid rgb(var(--panel-12, 22 31 56));
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
        transform: translateX(120%);
        transition: transform 0.3s ease;
        max-width: 88vw;
      }

      .tx-toast.show {
        transform: translateX(0);
      }

      .tx-toast i {
        font-size: 1.1rem;
      }

      /* ไอคอนอยู่บนพื้น toast ขาวเสมอ — โทนอ่อน (mint/danger-light) วัดได้
         ~1.9:1 / ~2.5:1 บนขาว ต่ำกว่าเกณฑ์ non-text 3:1 ใช้ขั้นเข้มของ
         family เดิมแทน (success-2 / danger-2 เป็นค่าคงที่ ไม่ถูก admin override) */
      .tx-toast--success i {
        color: rgb(var(--success-2, 22 163 74));
      }

      .tx-toast--error i {
        color: rgb(var(--danger-2, 220 38 38));
      }

      /* responsive: scale up grids on wider viewports */
      @media (min-width: 560px) {
        .tx-summary__grid {
          grid-template-columns: repeat(4, 1fr);
        }

        .tx-cards {
          grid-template-columns: repeat(2, 1fr);
        }

        .tx-search {
          flex-direction: row;
          align-items: flex-end;
          flex-wrap: wrap;
        }

        .tx-modal__detail {
          grid-template-columns: repeat(2, 1fr);
        }
      }

      @media (min-width: 900px) {
        .tx-cards {
          grid-template-columns: repeat(3, 1fr);
        }

        .tx-modal__detail {
          grid-template-columns: repeat(3, 1fr);
        }
      }

      /* very small phones (≤360px): tighten, keep single column */
      @media (max-width: 360px) {
        .tx-maintab {
          font-size: 0.74rem;
          padding: 9px 4px;
        }

        .tx-maintab i {
          font-size: 0.9rem;
        }

        .tx-filter {
          padding: 7px 12px;
          font-size: 0.76rem;
        }

        .tx-summary__grid {
          gap: 6px;
          padding: 10px;
        }

        .tx-stat {
          padding: 10px 6px;
        }

        .tx-stat__value {
          font-size: 0.95rem;
        }

        .tx-bet__num {
          font-size: 1.35rem;
        }
      }

      /* ── Notify Modal — carousel style (pattern: demotheme9) ── */
      .ntf-overlay {
        position: fixed;
        inset: 0;
        z-index: 9700;
        /* above cp-wallet-overlay (9600) */
        background: rgb(var(--bg-03, 2 6 16) / 0.82);
        backdrop-filter: blur(3px);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 16px;
      }

      .ntf-box {
        position: relative;
        width: 100%;
        max-width: 500px;
        border-radius: 14px;
        overflow: hidden;
        border: 1.5px solid var(--lotto-border);
        background: #ffffff;
        box-shadow: 0 24px 64px rgba(15, 23, 42, 0.15), 0 0 0 4px rgba(15, 23, 42, 0.04);
      }

      /* X close button — top-right corner */
      .ntf-close {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 10;
        width: 32px;
        height: 32px;
        border-radius: 8px;
        cursor: pointer;
        background: #cbd5e1;
        border: none;
        color: #334155;
        font-size: 1.1rem;
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        transition: background 0.15s, transform 0.15s;
      }

      .ntf-close:hover {
        background: #94a3b8;
        color: #0f172a;
        transform: scale(1.08);
      }

      /* content body — fills the box */
      .ntf-body {
        width: 100%;
        display: block;
        font-size: 0;
        line-height: 0;
        max-height: 80vh;
        overflow-y: auto;
      }

      .ntf-body img {
        display: block;
        width: 100%;
        height: auto;
        vertical-align: bottom;
      }

      .ntf-body p,
      .ntf-body div {
        font-size: 0.9rem;
        line-height: 1.6;
        color: #0f172a;
        padding: 14px 16px;
        margin: 0;
      }

      /* image-only wrapper → flush edge-to-edge */
      .ntf-body p:has(> img:only-child),
      .ntf-body div:has(> img:only-child) {
        padding: 0;
        font-size: 0;
        line-height: 0;
      }

      /* snooze row — "ปิด 1 วัน" / "ปิด 3 วัน" (โหมด login เท่านั้น, ผูกกับ token) */
      .ntf-snooze {
        display: flex;
        gap: 8px;
        padding: 10px 16px 14px;
        background: #f8fafc;
        border-top: 1px solid #e2e8f0;
      }

      .ntf-snooze-btn {
        flex: 1;
        padding: 8px 12px;
        border-radius: 8px;
        cursor: pointer;
        background: #ffffff;
        border: 1px solid #cbd5e1;
        color: #334155;
        font-size: 0.8rem;
        font-weight: 600;
        transition: background 0.15s, transform 0.15s;
      }

      .ntf-snooze-btn:hover {
        background: #f1f5f9;
        color: #0f172a;
        transform: translateY(-1px);
      }

      @media (max-width: 480px) {
        .ntf-close {
          width: 28px;
          height: 28px;
          font-size: 1rem;
        }
      }

      /* --- Lotto Card extras --- */
      .lotto-card-closed {
        opacity: 0.55;
      }

      .lotto-timer-closed {
        color: rgb(var(--text-faint, 75 85 99)) !important;
        animation: none !important;
        font-size: 0.8rem;
      }

      /* --- Game Grids --- */
      .grid-portrait {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 20px;
      }

      .grid-landscape {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 20px;
      }

      .game-card {
        background-color: var(--bg-panel-light);
        border-radius: var(--radius-md);
        overflow: hidden;
        border: 1px solid var(--border-light);
        transition: all 0.3s ease;
        cursor: pointer;
        position: relative;
        group: card;
      }

      .game-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 12px 25px rgba(0, 0, 0, 0.5);
        border-color: var(--accent);
      }

      .game-card img {
        width: 100%;
        display: block;
        object-fit: cover;
        transition: transform 0.5s ease;
      }

      .game-card:hover img {
        transform: scale(1.08);
      }

      .card-portrait img {
        aspect-ratio: 3/4;
      }

      .card-landscape img {
        aspect-ratio: 16/10;
      }

      .game-card-overlay {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        opacity: 0;
        transition: opacity 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 15px;
      }

      .game-card:hover .game-card-overlay {
        opacity: 1;
      }

      .play-btn {
        display: block;
        padding: 10px 24px;
        background: #ffffff;
        color: #000000;
        text-align: center;
        border-radius: var(--radius-sm);
        font-weight: 600;
        font-size: 0.9rem;
        opacity: 0;
        transform: scale(0.85);
        transition: all 0.3s ease;
        text-decoration: none;
        cursor: pointer;
        white-space: nowrap;
      }

      .game-card:hover .play-btn {
        opacity: 1;
        transform: scale(1);
      }

      /* --- Login Modal --- */
      .login-modal-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.75);
        z-index: 9000;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s;
      }

      .login-modal-backdrop.active {
        opacity: 1;
        pointer-events: all;
      }

      .login-modal {
        background: rgb(var(--blue-7, 29 78 216));
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 16px;
        width: 90%;
        max-width: 440px;
        padding: 36px 32px 28px;
        position: relative;
        transform: translateY(-20px) scale(0.97);
        transition: transform 0.25s;
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
      }

      .login-modal-backdrop.active .login-modal {
        transform: translateY(0) scale(1);
      }

      .login-modal-close {
        position: absolute;
        top: 14px;
        right: 16px;
        background: none;
        border: none;
        color: rgba(255, 255, 255, 0.85);
        font-size: 1.3rem;
        cursor: pointer;
        line-height: 1;
        transition: color 0.2s;
      }

      .login-modal-close:hover {
        color: #fff;
      }

      .login-modal-title {
        text-align: center;
        font-size: 1.35rem;
        font-weight: 700;
        color: #fff;
        margin-bottom: 24px;
      }

      .login-field {
        margin-bottom: 16px;
      }

      .login-field label {
        display: block;
        font-size: 0.85rem;
        color: rgb(var(--gray-2, 204 204 204));
        margin-bottom: 6px;
      }

      .login-input-wrap {
        position: relative;
        display: flex;
        align-items: center;
      }

      .login-input-icon {
        position: absolute;
        left: 14px;
        color: rgb(var(--gray-3, 136 136 136));
        font-size: 0.95rem;
        pointer-events: none;
      }

      .login-input {
        width: 100%;
        background: rgb(var(--bg-19, 10 20 40));
        border: 1px solid rgba(255, 255, 255, 0.25);
        border-radius: 8px;
        padding: 12px 44px;
        color: rgb(var(--text-on-panel, 30 58 95));
        font-size: 0.95rem;
        outline: none;
        box-sizing: border-box;
        transition: border-color 0.2s;
      }

      .login-input:focus {
        border-color: rgb(var(--cyan, 0 210 255));
      }

      .login-input-toggle {
        position: absolute;
        right: 14px;
        background: none;
        border: none;
        color: rgb(var(--gray-3, 136 136 136));
        cursor: pointer;
        font-size: 1rem;
        transition: color 0.2s;
      }

      .login-input-toggle:hover {
        color: #fff;
      }

      /* ลิงก์ใช้เฉพาะใน .login-links-row — layout อยู่ที่ row ที่นี่มีแค่ typography
   สีเดิม cyan-on-blue (.login-modal background: --blue-7) ใกล้เฉดกันเกินไป อ่านยาก
   เปลี่ยนเป็นขาว (มี opacity เล็กน้อยให้ยังดูเป็น secondary link ไม่แข่งกับปุ่มหลัก) */
      .login-forgot {
        font-size: 0.8rem;
        color: rgba(255, 255, 255, 0.88);
        text-decoration: none;
      }

      .login-forgot:hover {
        text-decoration: underline;
      }

      /* แถวลิงก์ใต้ช่องรหัสผ่าน: สมัครผ่านแอดมิน (ซ้าย) | ลืมรหัสผ่าน (ขวา) */
      .login-links-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        margin-top: -8px;
        margin-bottom: 20px;
      }

      .login-submit {
        width: 100%;
        padding: 14px;
        background: linear-gradient(135deg, rgb(var(--blue, 59 130 246)), rgb(var(--blue-7, 29 78 216)));
        color: rgb(var(--text-on-accent, 255 255 255));
        font-size: 1rem;
        font-weight: 700;
        border: 2px solid #fff;
        border-radius: 8px;
        cursor: pointer;
        transition: opacity 0.2s, transform 0.15s;
        margin-bottom: 16px;
      }

      .login-submit:hover {
        opacity: 0.9;
      }

      .login-submit:active {
        transform: scale(0.98);
      }

      .login-submit:disabled {
        opacity: 0.6;
        cursor: not-allowed;
      }

      /* สีเดิม gray-1 (170 170 170) จางเกินไปบน .login-modal background (--blue-7) —
   เปลี่ยนเป็นขาว opacity สูงให้อ่านง่ายขึ้น เหมือน .login-forgot ด้านบน */
      .login-register-line {
        text-align: center;
        font-size: 0.85rem;
        color: rgba(255, 255, 255, 0.88);
      }

      .login-register-line a {
        color: #fff;
        font-weight: 700;
        text-decoration: none;
      }

      .login-register-line a:hover {
        text-decoration: underline;
      }

      .login-error {
        background: rgb(var(--danger, 239 68 68) / 0.15);
        border: 1px solid rgb(var(--danger, 239 68 68) / 0.4);
        border-radius: 6px;
        color: rgb(var(--danger-light, 248 113 113));
        font-size: 0.82rem;
        padding: 8px 12px;
        margin-bottom: 14px;
        display: none;
      }

      .login-error.show {
        display: block;
      }

      /* --- Footer --- */
      .footer {
        background-color: var(--bg-panel);
        border-top: 1px solid var(--border);
        margin-top: auto;
      }

      .seo-section {
        padding: 40px 30px;
        text-align: center;
        max-width: 1200px;
        margin: 0 auto;
      }

      .seo-title {
        font-size: 1.25rem;
        color: var(--text-main);
        margin-bottom: 15px;
      }

      .seo-text {
        font-size: 0.85rem;
        color: rgb(var(--text-2, 100 116 139));
        line-height: 1.8;
      }

      .brands-section {
        padding: 0 30px 40px;
        max-width: 1400px;
        margin: 0 auto;
      }

      .brands-header {
        text-align: center;
        margin-bottom: 25px;
        font-size: 1.2rem;
        font-weight: 500;
        position: relative;
      }

      .brands-header::after {
        content: '';
        display: block;
        width: 60px;
        height: 3px;
        background: var(--primary);
        margin: 10px auto 0;
        border-radius: 3px;
      }

      .brands-grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px 16px;
      }

      .brand-badge {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        background: none;
        border: none;
        cursor: default;
        text-decoration: none;
        color: rgb(var(--text-2, 107 114 128));
        font-size: 0.7rem;
        width: 76px;
        flex-shrink: 0;
        pointer-events: none;
      }

      .brand-badge-circle {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        background-color: var(--bg-panel-light);
        border: 3px solid var(--border-light);
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
        flex-shrink: 0;
      }

      .brand-badge-circle img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
        filter: grayscale(40%) brightness(0.85);
        transition: filter 0.35s ease, transform 0.35s ease;
      }

      .brand-badge:hover .brand-badge-circle img {
        filter: grayscale(0%) brightness(1.05) drop-shadow(0 2px 8px rgb(var(--cyan, 0 210 255) / 0.35));
        transform: scale(1.08);
      }

      .brand-badge-label {
        max-width: 76px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: center;
      }

      .copyright {
        text-align: center;
        padding: 20px;
        border-top: 1px solid var(--border);
        font-size: 0.85rem;
        color: rgb(var(--text-2, 107 114 128));
        /* โปร่งใสให้นั่งบนพื้น .footer — ตาม override สี footer จากหลังบ้านด้วย */
        background-color: transparent;
      }

      /* ==========================================
           Desktop Responsive Layout Overrides
           ========================================== */
      @media (min-width: 993px) {
        .app-layout {
          height: auto;
          overflow: visible;
        }

        /* Desktop: hero aspect-ratio set dynamically by JS to match each image — full image, no crop */
        .hero-banner {
          aspect-ratio: 21/7;
          max-height: 70vh;
        }

        .hero-slide {
          height: 100%;
        }

        .hero-slide img {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }

        .top-header {
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          width: 100%;
          height: 70px;
          z-index: 100;
          padding: 0 30px 0 15px;
        }

        .mobile-sticky-wrapper {
          position: static;
          display: contents;
        }

        /* Desktop: ซ่อน marquee เฉพาะหน้าที่ตั้ง flag (lottery/casino) */
        .marquee-container.hide-on-desktop {
          display: none !important;
        }

        .sidebar {
          position: fixed;
          top: 70px;
          left: 0;
          bottom: 0;
          width: var(--sidebar-width);
          height: calc(100vh - 70px);
          z-index: 90;
        }

        .main-content {
          margin-top: 70px;
          margin-left: var(--sidebar-width);
          height: auto;
          flex: 1;
          overflow: visible;
        }

        .desktop-logo {
          display: flex;
          align-items: center;
          justify-content: center;
          /* centers the logo inside its container */
          width: calc(var(--sidebar-width) - 30px);
          /* 230px, matching sidebar buttons width */
          margin-right: 10px;
        }

        .desktop-logo img {
          max-height: 52px;
          max-width: 100%;
          object-fit: contain;
        }

        .desktop-logo .logo-text {
          font-size: 2.2rem;
          font-weight: 900;
          background: linear-gradient(90deg, rgb(var(--primary, 56 189 248)), rgb(var(--primary-deep, 14 165 233)));
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          letter-spacing: 1.5px;
          font-style: italic;
          text-shadow: 0 2px 10px rgb(var(--primary, 56 189 248) / 0.2);
        }
      }

      /* ==========================================
           Responsive Design (Mobile-First approach overrides)
           ========================================== */
      @media (max-width: 1200px) {
        .brand-badge {
          width: 68px;
        }

        .brand-badge-circle {
          width: 56px;
          height: 56px;
        }
      }

      /* ══════════════════════════════════════════════════
         Mobile Responsive Layout Overrides (≤992px)
         Sidebar drawer, hamburger, msidebar nav/auth, header,
         bottom nav, and related mobile-only tweaks
══════════════════════════════════════════════════ */
      @media (max-width: 992px) {
        .hot-provider-row {
          justify-content: flex-start;
          flex-wrap: nowrap;
          overflow-x: auto;
          -webkit-overflow-scrolling: touch;
        }

        .app-layout {
          flex-direction: column;
          height: auto;
          overflow-y: visible;
        }

        /* --- Mobile Sidebar Drawer 100% --- */
        .sidebar {
          position: fixed;
          top: 0;
          left: -100%;
          width: 100%;
          height: 100vh;
          height: 100dvh;
          /* exclude mobile browser UI bars so logout stays in view */
          background: rgb(var(--panel-17, 15 42 95));
          /* above the lottery bet-slip drawer (.betsheet z-index:1050 /
             .betsheet-backdrop 1049, defined per lottery page e.g.
             pages/member/lottery/stock.ejs) so opening the nav while the
             bet slip is showing doesn't get buried behind it */
          z-index: 1060;
          transition: left 0.32s cubic-bezier(0.4, 0, 0.2, 1);
          box-shadow: none;
          display: flex;
          flex-direction: column;
          overflow-y: auto;
          -webkit-overflow-scrolling: touch;
        }

        .sidebar.open {
          left: 0;
        }

        /* ── Hamburger (3 bars → X rotate) ── */
        .hamburger-btn {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          width: 36px;
          height: 36px;
          background: none;
          border: none;
          cursor: pointer;
          padding: 0;
          flex-shrink: 0;
          position: relative;
        }

        .hamburger-btn span {
          display: block;
          position: absolute;
          width: 22px;
          height: 2px;
          background: #ffffff;
          border-radius: 2px;
          left: 50%;
          transform: translateX(-50%);
        }

        .hamburger-btn span:nth-child(1) {
          top: 10px;
        }

        .hamburger-btn span:nth-child(2) {
          top: 17px;
        }

        .hamburger-btn span:nth-child(3) {
          top: 24px;
        }

        /* Sidebar header */
        .msidebar-header {
          display: flex;
          align-items: center;
          padding: 14px 16px;
          border-bottom: 1px solid rgba(255, 255, 255, 0.1);
          gap: 12px;
        }

        .msidebar-logo {
          flex: 1;
          display: flex;
          justify-content: center;
          padding-right: 36px;
        }

        .msidebar-close {
          background: none;
          border: none;
          cursor: pointer;
          position: relative;
          width: 36px;
          height: 36px;
          flex-shrink: 0;
        }

        .msidebar-close span {
          display: block;
          position: absolute;
          width: 22px;
          height: 2px;
          background: rgb(var(--primary, 56 189 248));
          border-radius: 2px;
          left: 50%;
          transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1),
            opacity 0.25s ease,
            top 0.35s cubic-bezier(0.23, 1, 0.32, 1);
          transform-origin: center;
          transform: translateX(-50%);
        }

        .msidebar-close span:nth-child(1) {
          top: 10px;
        }

        .msidebar-close span:nth-child(2) {
          top: 17px;
        }

        .msidebar-close span:nth-child(3) {
          top: 24px;
        }

        .msidebar-close.active span:nth-child(1) {
          top: 17px;
          transform: translateX(-50%) rotate(45deg);
        }

        .msidebar-close.active span:nth-child(2) {
          opacity: 0;
          transform: translateX(-50%) scaleX(0);
        }

        .msidebar-close.active span:nth-child(3) {
          top: 17px;
          transform: translateX(-50%) rotate(-45deg);
        }

        /* Auth buttons */
        .msidebar-auth {
          display: flex;
          flex-direction: column;
          gap: 10px;
          padding: 16px;
        }

        .msidebar-btn-primary {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 8px;
          background: rgb(var(--cyan-soft, 110 193 228));
          /* --cyan-soft is a "light-tint" key (always stays pale, same as
             the panel tiers) — was --text-bright (body-adaptive, can go
             white), now --text-on-panel (fixed dark). */
          color: rgb(var(--text-on-panel, 15 42 68));
          font-weight: 700;
          font-size: 0.95rem;
          padding: 12px;
          border-radius: 10px;
          text-decoration: none;
          transition: opacity 0.2s;
        }

        .msidebar-btn-outline {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 8px;
          background: transparent;
          color: rgb(var(--primary, 56 189 248));
          font-weight: 700;
          font-size: 0.9rem;
          padding: 11px;
          border-radius: 10px;
          border: 2px solid rgb(var(--primary, 56 189 248));
          text-decoration: none;
          transition: background 0.2s, opacity 0.2s;
        }

        .msidebar-btn-primary:hover {
          opacity: 0.85;
        }

        .msidebar-btn-outline:hover {
          background: rgb(var(--primary, 56 189 248) / 0.08);
          opacity: 0.95;
        }

        /* Nav menu items */
        .msidebar-nav {
          display: grid !important;
          grid-template-columns: repeat(2, 1fr) !important;
          gap: 8px !important;
          padding: 8px 16px 24px !important;
        }

        .msidebar-item {
          display: flex;
          align-items: center;
          gap: 8px;
          background: linear-gradient(90deg, rgb(var(--blue-4, 47 128 237)), rgb(var(--blue-6, 28 78 216)));
          color: rgb(var(--text-on-accent, 255 255 255));
          font-weight: 600;
          width: 100%;
          padding: 10px 12px;
          border-radius: 10px;
          text-decoration: none;
          transition: opacity 0.2s, transform 0.2s;
        }

        /* .msidebar-item บาง item เป็น <button> (เช่นปุ่มติดต่อเรา ที่เปิด ty-modal แทนลิงก์ตรง)
           รีเซ็ต browser default ของ <button> เท่านั้น ไม่แตะ background/padding/font ที่ .msidebar-item ให้ไว้แล้ว */
        button.msidebar-item {
          border: none;
          width: 100%;
          text-align: left;
          cursor: pointer;
          font-family: inherit;
        }

        .msidebar-item:hover {
          opacity: 0.9;
        }

        .msidebar-item.active {
          background: linear-gradient(90deg, rgb(var(--blue-6, 28 78 216)), rgb(var(--blue-deep, 30 64 175)));
          transform: scale(0.97);
        }

        .msidebar-icon {
          font-size: 1.05rem;
        }

        img.msidebar-icon {
          width: 1.3rem;
          height: 1.3rem;
          object-fit: contain;
          flex-shrink: 0;
          filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
          transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        img.msidebar-icon-logo {
          border-radius: 6px;
        }

        .msidebar-item:hover img.msidebar-icon {
          transform: scale(1.22) rotate(-8deg);
        }

        /* Sidebar logout button */
        .msidebar-logout-wrap {
          padding: 8px 16px 16px;
          padding-bottom: calc(16px + env(safe-area-inset-bottom));
          margin-top: auto;
          flex-shrink: 0;
        }

        .msidebar-logout-btn {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 10px;
          width: 100%;
          background: linear-gradient(90deg, rgb(var(--blue-4, 47 128 237)), rgb(var(--blue-6, 28 78 216)));
          color: rgb(var(--text-on-accent, 255 255 255));
          font-weight: 700;
          font-size: 1rem;
          padding: 14px 18px;
          border-radius: 16px;
          border: none;
          cursor: pointer;
          transition: opacity 0.2s, transform 0.2s;
        }

        .msidebar-logout-btn:hover {
          opacity: 0.85;
        }

        /* Hamburger 3-bar button in header */
        /* Hide desktop sidebar logo/nav on mobile */
        .sidebar-logo,
        .sidebar-nav {
          display: none !important;
        }

        .msidebar-header,
        .msidebar-auth,
        .msidebar-nav {
          display: flex;
        }

        .msidebar-logout-wrap {
          display: block;
        }

        .mobile-menu-list {
          display: none !important;
        }

        .desktop-menu-list {
          display: none !important;
        }

        .nav-item i,
        .nav-item .icon-emoji {
          margin: 0;
          font-size: 1.3rem;
        }

        .nav-item.active {
          background: rgb(var(--blue-7, 29 78 216) / 0.2);
          color: rgb(var(--primary, 56 189 248));
          border-left: 3px solid rgb(var(--primary, 56 189 248));
          border-top: none;
          box-shadow: none;
          transform: none;
        }

        .nav-item:hover {
          transform: none;
        }

        /* --- Main Content Area Padding --- */
        .main-content {
          padding-top: 0;
          padding-bottom: 68px;
          overflow-y: visible;
        }

        /* --- Mobile Sticky Wrapper --- */
        .mobile-sticky-wrapper {
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          z-index: 100;
          display: flex;
          flex-direction: column;
          width: 100%;
          background-color: rgb(var(--bg-13, 30 136 229));
        }

        /* --- Top Header Mobile Layout --- */
        .top-header {
          height: 60px;
          padding: 0 15px;
          justify-content: flex-start;
          gap: 12px;
          border-bottom: 1px solid rgb(var(--panel-07, 26 37 66));
          position: static;
          top: unset;
          left: unset;
          right: unset;
          z-index: unset;
        }

        .marquee-container {
          position: static;
          top: unset;
          z-index: unset;
          background: rgb(var(--bg-13, 8 13 30));
          margin: 0;
          padding: 6px 12px;
        }

        .marquee-wrapper {
          margin-bottom: 0;
          border-radius: 12px;
          padding: 6px 15px;
        }

        /* --- Horizontal Scrolling Sub Nav --- */
        .mobile-sub-nav {
          display: flex;
          background: rgb(var(--bg-13, 8 13 30));
          border-bottom: 2px solid rgb(var(--bg-23, 15 23 42));
          padding: 8px 0;
          width: 100%;
          white-space: nowrap;
          /* scrolling now lives on .sub-nav-scroll-wrapper (below) so this
             outer bar can stay put as the reference frame for the
             .cat-nav-scroll-btn arrow buttons. z-index:0 (not unset) so it
             establishes its own stacking context — otherwise a transformed
             active/hover child (e.g. .sub-nav-icon) could paint over the
             arrows despite their higher z-index. */
          position: relative;
          top: unset;
          z-index: 0;
          box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
        }

        .hamburger-btn {
          background: none;
          border: none;
          cursor: pointer;
          display: flex;
          flex-direction: column;
          justify-content: center;
          gap: 5px;
          padding: 6px;
          width: 36px;
          height: 36px;
          flex-shrink: 0;
          outline: none;
        }

        .hamburger-btn .hbar {
          display: block;
          width: 22px;
          height: 2px;
          background: rgb(var(--text-bright, 15 42 68));
          border-radius: 2px;
          transition: transform 0.32s ease, opacity 0.32s ease, width 0.32s ease;
          transform-origin: center;
        }

        /* middle bar slightly shorter for style */
        .hamburger-btn .hbar:nth-child(2) {
          width: 16px;
        }

        /* active = X */
        .hamburger-btn.active .hbar:nth-child(1) {
          transform: translateY(7px) rotate(45deg);
          width: 22px;
        }

        .hamburger-btn.active .hbar:nth-child(2) {
          opacity: 0;
          transform: scaleX(0);
        }

        .hamburger-btn.active .hbar:nth-child(3) {
          transform: translateY(-7px) rotate(-45deg);
          width: 22px;
        }

        .mobile-logo {
          display: flex;
          align-items: center;
          gap: 4px;
        }

        .mobile-logo .logo-text {
          font-size: 1.3rem;
          font-weight: 900;
          color: #ffffff;
          letter-spacing: 0.5px;
          font-style: italic;
        }

        .mobile-logo .logo-highlight {
          color: rgb(var(--primary, 56 189 248));
        }

        .mobile-logo .logo-shark {
          font-size: 1.35rem;
          filter: drop-shadow(0 0 5px rgb(var(--primary, 56 189 248) / 0.5));
        }

        .desktop-only,
        .header-actions,
        .header-favorites {
          display: none !important;
        }

        .header-auth {
          display: flex;
          gap: 6px;
          flex-shrink: 0;
          position: relative;
          z-index: 200;
          margin-left: auto;
          /* ดัน hdr-btn-deposit/auth-loggedin-wrap ชิดขวาเสมอตอน .header-actions ถูกซ่อนใน mobile
                                 (ty-demotheme4-test แก้ปัญหานี้ด้วย .header-right wrapper แต่ธีมนี้ไม่มี wrapper นั้น
                                 เลยผูก margin-left:auto ตรงที่ .header-auth แทน ได้ผลเหมือนกัน) */
        }

        .header-auth .btn {
          padding: 8px 12px;
          font-size: 0.82rem;
          border-radius: 6px;
          white-space: nowrap;
        }

        .auth-user-pill {
          padding: 5px 10px;
          font-size: 0.78rem;
          gap: 4px;
          border-radius: 16px;
        }

        #showUsername {
          max-width: 60px;
          font-size: 0.78rem;
        }

        .btn-logout {
          padding: 7px 10px;
          font-size: 0.8rem;
        }

        .btn-member-menu {
          padding: 7px 10px;
          font-size: 0.8rem;
        }

        /* ── Mobile: header logged-in new layout ── */
        .hdr-balance {
          font-size: 0.8rem;
          gap: 4px;
        }

        #showRealBalance {
          font-size: 0.82rem;
          min-width: 32px;
        }

        .hdr-balance-cur {
          font-size: 0.7rem;
        }

        .hdr-btn-deposit {
          padding: 6px 17px;
          font-size: 0.8rem;
          min-width: 65px;
        }

        .hdr-user-btn {
          width: 32px;
          height: 32px;
          font-size: 0.88rem;
        }

        .hdr-dropdown {
          min-width: 155px;
        }

        .hdr-dropdown-item {
          padding: 10px 12px;
          font-size: 0.83rem;
        }

        .header-left {
          min-width: 0;
          flex-shrink: 1;
          overflow: hidden;
          gap: 8px;
        }

        .mobile-logo {
          min-width: 0;
          overflow: hidden;
        }

        .mobile-logo img {
          max-width: 120px;
          max-height: 36px;
          width: auto;
          height: auto;
          object-fit: contain;
          display: block;
        }

        /* --- 320px / จอเล็กมาก --- */
        @media (max-width: 380px) {
          .top-header {
            padding: 0 8px;
            gap: 6px;
            height: 52px;
          }

          .hamburger-btn {
            width: 32px;
            height: 32px;
            padding: 4px;
            flex-shrink: 0;
          }

          .mobile-logo {
            min-width: 0;
            flex-shrink: 1;
            overflow: hidden;
          }

          .mobile-logo img {
            max-width: 80px;
            max-height: 28px;
          }

          .mobile-logo .logo-text {
            font-size: 0.9rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 80px;
          }

          .header-auth {
            gap: 3px;
            flex-shrink: 0;
          }

          .header-auth .btn {
            padding: 5px 6px;
            font-size: 0.62rem;
            border-radius: 5px;
            white-space: nowrap;
          }

          .auth-user-pill {
            padding: 4px 8px;
            font-size: 0.7rem;
            gap: 3px;
          }

          #showRealBalance {
            font-size: 0.72rem;
            min-width: 30px;
          }

          #showUsername {
            max-width: 48px;
            font-size: 0.7rem;
          }

          .btn-logout,
          .btn-member-menu {
            padding: 5px 8px;
            font-size: 0.7rem;
          }

          .header-left {
            gap: 6px;
            min-width: 0;
            flex-shrink: 1;
            overflow: hidden;
          }
        }

        /* --- Marquee Mobile Layout overrides --- */
        .marquee-wrapper {
          margin-bottom: 0;
          border-radius: 12px;
          padding: 8px 15px;
        }

        .sub-nav-scroll-wrapper {
          display: flex;
          gap: 8px;
          padding: 0 15px;
          overflow-x: auto;
          scrollbar-width: none;
          -webkit-overflow-scrolling: touch;
        }

        .sub-nav-scroll-wrapper::-webkit-scrollbar {
          display: none;
        }

        .sub-nav-item {
          display: inline-flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 4px;
          background-color: rgb(var(--bg-20, 11 20 44));
          border: 2px solid rgb(var(--panel-12, 144 202 249));
          border-radius: 8px;
          padding: 8px 10px;
          min-width: 68px;
          height: 58px;
          /* was --text-bright: now body-adaptive, but this label sits on
             --bg-20 (a panel tier, always pale) not body — use the fixed
             --text-on-panel instead. */
          color: rgb(var(--text-on-panel, 15 42 68));
          text-decoration: none;
          font-size: 0.72rem;
          font-weight: 500;
          transition: all 0.2s ease;
        }

        .sub-nav-item:hover {
          background-color: rgb(var(--blue, 59 130 246) / 0.18);
          border-color: #ffffff;
          color: #ffffff;
          box-shadow: 0 4px 12px rgb(var(--blue, 59 130 246) / 0.25);
        }

        .sub-nav-item.active {
          background: linear-gradient(180deg, rgb(var(--blue, 59 130 246)) 0%, rgb(var(--blue-deep, 30 64 175)) 100%);
          border-color: #ffffff;
          color: rgb(var(--text-on-accent, 255 255 255));
          box-shadow: 0 4px 14px rgb(var(--blue, 59 130 246) / 0.45);
        }

        .sub-nav-icon {
          font-size: 1.25rem;
        }

        img.sub-nav-icon {
          width: 2rem;
          height: 2rem;
          object-fit: contain;
          flex-shrink: 0;
          border-radius: 6px;
          filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.45));
          transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
            filter 0.3s ease;
        }

        .sub-nav-item:hover img.sub-nav-icon,
        .sub-nav-item.active img.sub-nav-icon {
          transform: scale(1.22) translateY(-2px);
          filter: drop-shadow(0 4px 12px rgb(var(--primary, 56 189 248) / 0.75));
        }

        /* ── Bottom Navigation ─────────────────────────── */
        .bottom-nav {
          display: flex;
          position: fixed;
          bottom: 0;
          left: 0;
          right: 0;
          height: 60px;
          align-items: center;
          justify-content: space-around;
          z-index: 100;
          padding-bottom: env(safe-area-inset-bottom);
          overflow: visible;
          background: transparent;
        }

        /* Background bar with punched hole — only this element is masked */
        .bottom-nav::before {
          content: '';
          position: absolute;
          inset: 0;
          background: #ffffff;
          border-top: 1px solid rgb(var(--panel-12, 22 31 56));
          box-shadow: 0 -3px 12px rgba(0, 0, 0, 0.35);
          /* Layer 1: full black (show everywhere) MINUS circle at top-center */
          -webkit-mask-image:
            radial-gradient(circle 44px at 50% 0px, black 99%, transparent 100%),
            linear-gradient(black, black);
          -webkit-mask-composite: destination-out;
          mask-image:
            radial-gradient(circle 44px at 50% 0px, black 99%, transparent 100%),
            linear-gradient(black, black);
          mask-composite: exclude;
          pointer-events: none;
          z-index: 0;
        }

        /* Menu items */
        .bnav-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 3px;
          color: rgba(0, 0, 0, 0.55);
          text-decoration: none;
          font-size: 12px;
          font-weight: 600;
          width: 20%;
          height: 100%;
          position: relative;
          z-index: 2;
          transition: opacity 0.2s, color 0.2s;
        }

        .bnav-item i {
          font-size: 1.2rem;
        }

        .bnav-icon {
          width: 1.9rem;
          height: 1.9rem;
          object-fit: contain;
          flex-shrink: 0;
          filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.25));
          transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
            filter 0.3s ease;
        }

        .bnav-item:hover .bnav-icon {
          transform: scale(1.28) translateY(-3px);
          filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.4));
        }

        .bnav-item.active .bnav-icon {
          transform: scale(1.12);
          filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.65));
        }

        .bnav-item:hover {
          opacity: 0.75;
        }

        .bnav-item.active {
          color: #000;
          font-weight: 700;
        }

        /* Center slot */
        .bnav-center-slot {
          width: 20%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
          z-index: 4;
          flex-shrink: 0;
        }

        /* Floating logo button */
        .bnav-logo-btn {
          width: 64px;
          height: 64px;
          border-radius: 50%;
          background: rgb(var(--blue-deep-2, 30 58 138));
          box-shadow: 0 4px 18px rgb(var(--cyan, 0 210 255) / 0.65), 0 2px 6px rgba(0, 0, 0, 0.2);
          display: flex;
          align-items: center;
          justify-content: center;
          position: absolute;
          top: -30px;
          left: 50%;
          transform: translateX(-50%);
          text-decoration: none;
          transition: transform 0.25s, box-shadow 0.25s;
          overflow: hidden;
          z-index: 5;
        }

        .bnav-logo-btn:hover {
          transform: translateX(-50%) translateY(-3px);
          box-shadow: 0 8px 24px rgb(var(--cyan, 0 210 255) / 0.75);
        }

        /* Sidebar backdrop overlay active state */
        .sidebar-overlay {
          display: block;
          position: fixed;
          inset: 0;
          background-color: rgba(0, 0, 0, 0.65);
          backdrop-filter: blur(4px);
          /* stays just below .sidebar (1060) — see comment there */
          z-index: 1055;
          opacity: 0;
          pointer-events: none;
          transition: opacity 0.3s ease;
        }

        .sidebar-overlay.active {
          opacity: 1;
          pointer-events: auto;
        }

        .content-container {
          padding: var(--mobile-header-offset, 130px) 12px 12px;
        }

        .hero-banner {
          aspect-ratio: 21/7;
          max-height: 70vh;
          border-radius: 12px;
          overflow: hidden;
          margin: 12px auto 16px;
          width: 100%;
          position: relative;
        }

        .hero-placeholder-content h1 {
          font-size: 1.8rem;
        }

        /* --- Mobile/Tablet Responsive Overrides --- */
        .hot-games-grid {
          display: flex;
          flex-wrap: nowrap;
          overflow-x: auto;
          scrollbar-width: none;
          gap: 12px;
          padding-bottom: 8px;
        }

        .hot-games-grid::-webkit-scrollbar {
          display: none;
        }

        .hot-games-grid .hot-game-card,
        .hot-games-grid .hot-skeleton {
          flex: 0 0 115px;
          width: 115px;
        }

        .grid-portrait,
        .grid-landscape {
          grid-template-columns: repeat(3, 1fr);
          gap: 10px;
        }

        .brands-grid {
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          gap: 15px 10px;
        }

        .brand-badge {
          width: 100%;
          max-width: 64px;
        }

        .brand-badge-label {
          display: none;
        }
      }

      @media (max-width: 576px) {

        .grid-portrait,
        .grid-landscape {
          grid-template-columns: repeat(3, 1fr) !important;
          gap: 10px !important;
        }

        .brands-grid {
          display: flex !important;
          flex-wrap: wrap !important;
          justify-content: center !important;
          gap: 10px 5px !important;
        }

        .brand-badge {
          width: 100% !important;
          max-width: 56px !important;
          font-size: 0.6rem;
        }

        .brand-badge-circle {
          width: 48px;
          height: 48px;
        }

        .section-title {
          font-size: 1.2rem;
        }

        .hero-banner {
          aspect-ratio: 21/7;
          max-height: 70vh;
          border-radius: 12px;
          overflow: hidden;
          margin: 12px auto;
          width: 100%;
        }
      }

      /* ── Tab section visibility ───────────────────────────────── */
      /* ── Section header icon images ─────────────────────────────────────────── */
      .section-icon {
        width: 2.2rem;
        height: 2.2rem;
        object-fit: contain;
        vertical-align: middle;
        filter: drop-shadow(0 2px 8px rgb(var(--cyan, 0 210 255) / 0.45));
        transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
          filter 0.3s ease;
      }

      .section-header:hover .section-icon {
        transform: scale(1.2) rotate(-8deg);
        filter: drop-shadow(0 4px 14px rgb(var(--cyan, 0 210 255) / 0.75));
      }

      .game-section {
        display: block;
      }

      .game-section.active {
        display: block;
      }

      /* ── Tab Sections ────────────────────────────────────────── */
      /* default: แสดงทั้งหมด — JS จะซ่อน/แสดงเมื่อกด tab */

      /* desktop sidebar active state */
      .nav-item.tab-nav-btn.active {
        background: rgb(var(--blue-7, 29 78 216));
        border-color: rgb(var(--blue-2, 96 165 250));
        transform: translateX(5px);
      }

      /* mobile sub-nav active state */
      .sub-nav-item.tab-nav-btn.active {
        background: linear-gradient(180deg, rgb(var(--blue, 59 130 246)) 0%, rgb(var(--blue-deep, 30 64 175)) 100%);
        border-color: #ffffff;
        color: #ffffff;
        box-shadow: 0 4px 14px rgb(var(--blue, 59 130 246) / 0.45);
      }

      .hero-slider {
        position: absolute;
        inset: 0;
        display: flex;
        width: 100%;
        height: 100%;
        transition: transform .5s ease;
        cursor: grab;
        user-select: none
      }

      .hero-slider.dragging {
        transition: none;
        cursor: grabbing
      }

      .hero-slide {
        min-width: 100%;
        width: 100%;
        height: 100%;
        flex-shrink: 0;
        overflow: hidden
      }

      .hero-slide img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        pointer-events: none;
        display: block
      }

      .hero-dots {
        position: absolute;
        bottom: 12px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 6px;
        z-index: 2
      }

      .hero-dot {
        width: 8px;
        height: 8px;
        background: rgba(255, 255, 255, .5);
        border-radius: 50%;
        cursor: pointer;
        transition: background .2s
      }

      .hero-dot.active {
        background: #fff
      }


      /* ── Float Menu ───────────────────────────────────────── */
      .float-menu-wrap {
        position: fixed;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        z-index: 9999;
        display: flex;
        align-items: center;
      }

      @media (max-width: 992px) {
        .float-menu-wrap {
          display: none;
        }
      }

      /* Toggle always sticks to right edge */
      .float-menu-toggle {
        width: 24px;
        height: 56px;
        background: var(--accent);
        border-radius: 8px 0 0 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        flex-shrink: 0;
        box-shadow: -3px 0 12px rgba(0, 0, 0, 0.4);
        transition: background 0.2s;
        position: relative;
        z-index: 1;
      }

      .float-menu-toggle:hover {
        background: var(--accent);
        filter: brightness(1.1);
      }

      .float-menu-toggle svg {
        width: 14px;
        height: 14px;
        stroke: #000;
        stroke-width: 2.5;
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: transform 0.4s cubic-bezier(0.34, 1.2, 0.64, 1);
      }

      .float-menu-wrap.open .float-menu-toggle svg {
        transform: rotate(180deg);
      }

      /* Panel: uses translateX + margin-right for fluid slide-in/out */
      .float-menu-panel {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 10px 6px;
        width: 76px;
        background: rgb(var(--bg-14, 8 15 40) / 0.95);
        border-radius: 12px 0 0 12px;
        backdrop-filter: blur(8px);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-right: none;
        flex-shrink: 0;
        overflow: visible;
        /* closed: slide right off-screen + collapse layout space */
        transform: translateX(110%);
        margin-right: -76px;
        opacity: 0;
        pointer-events: none;
        transition: transform 0.42s cubic-bezier(0.34, 1.1, 0.64, 1),
          margin-right 0.38s cubic-bezier(0.4, 0, 0.2, 1),
          opacity 0.28s ease;
      }

      .float-menu-wrap.open .float-menu-panel {
        transform: translateX(0);
        margin-right: 0;
        opacity: 1;
        pointer-events: all;
        transition: transform 0.42s cubic-bezier(0.34, 1.1, 0.64, 1),
          margin-right 0.38s cubic-bezier(0.4, 0, 0.2, 1),
          opacity 0.22s ease;
      }

      .float-menu-item {
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        text-decoration: none;
        border-radius: 12px;
        transition: background 0.25s, transform 0.25s;
        width: 56px;
        height: 56px;
        position: relative;
      }

      .float-menu-item:hover {
        background: rgba(255, 255, 255, 0.07);
        transform: scale(1.08);
      }

      .float-menu-icon {
        width: 52px;
        height: 52px;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgb(var(--primary) / 0.15);
        border: 1px solid rgb(var(--primary) / 0.25);
        transition: box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease;
        overflow: visible;
      }

      .float-menu-item:hover .float-menu-icon {
        background: rgb(var(--primary) / 0.3);
        box-shadow: 0 0 16px rgb(var(--cyan, 0 210 255) / 0.5);
        border-color: rgb(var(--cyan, 0 210 255) / 0.6);
      }

      /* ── Float GIF images ────────────────────────────────────────── */
      .float-gif {
        width: 44px;
        height: 44px;
        object-fit: contain;
        display: block;
        transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
      }

      .float-menu-item:hover .float-gif {
        transform: scale(1.2);
      }

      .float-menu-label {
        display: none;
      }

      /* ── bnav logo button image ──────────────────────────────────── */
      .bnav-logo-btn img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        border-radius: 50%;
        transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
      }

      .bnav-logo-btn:hover img {
        transform: scale(1.1) rotate(5deg);
      }

      /* ── Mobile logo image ───────────────────────────────────────── */
      .mobile-logo img {
        transition: transform 0.3s ease, filter 0.3s ease;
      }

      .mobile-logo img:hover {
        transform: scale(1.05);
        filter: drop-shadow(0 0 8px rgb(var(--primary, 56 189 248) / 0.5));
      }

      /* ── Desktop logo image ──────────────────────────────────────── */
      .desktop-logo img {
        transition: transform 0.3s ease, filter 0.3s ease;
      }

      .desktop-logo img:hover {
        transform: scale(1.05);
        filter: drop-shadow(0 0 10px rgb(var(--primary, 56 189 248) / 0.45));
      }

      /* ── msidebar logo image ─────────────────────────────────────── */
      .msidebar-logo img {
        transition: transform 0.3s ease, filter 0.3s ease;
      }

      .msidebar-logo img:hover {
        transform: scale(1.05);
        filter: drop-shadow(0 0 10px rgb(var(--primary, 56 189 248) / 0.5));
      }

      /* ══════════════════════════════════════════════════
   Member Modal
   HTML structure:
   .mem-overlay
     .mem-modal (flex row)
       .mem-close (absolute)
       aside.mem-sidebar (flex col, 180px)
         nav.mem-nav
       .mem-content (flex 1)
══════════════════════════════════════════════════ */

      /* Tab system */
      .tab-content {
        display: none;
      }

      .tab-content.active {
        display: block;
      }

      /* ── Overlay ── */
      .mem-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.72);
        z-index: 9000;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.22s ease;
      }

      .mem-overlay.active {
        opacity: 1;
        pointer-events: all;
      }

      /* SweetAlert2 (โหลดจาก layout-bottom.ejs สำหรับ lucky-draw-widget.ejs) ใช้ z-index เริ่มต้น 1060
   ต่ำกว่า mem-overlay (9000) มาก — ถ้ายิง Swal.fire() ตอน mem-modal เปิดอยู่ (เช่นปุ่ม
   "มียอดฝากรอเข้ากระเป๋า" ในแท็บกิจกรรมพิเศษ) popup จะเรนเดอร์ทับอยู่หลัง overlay มองไม่เห็นเลย
   ยกขึ้นให้อยู่เหนือทุก overlay ในหน้า (สูงสุดที่มีอยู่คือ .float-menu-wrap ที่ 9999) */
      .swal2-container {
        z-index: 10500 !important;
      }

      /* ── Swal "เลือกยอดฝากเข้ากระเป๋า" (showPendingDepositPicker ใน lucky-draw-widget.ejs) ──
   ตอนนี้ Bootstrap CSS โหลดทั่วเว็บแล้ว (ดู layouts/main.ejs) .alert/.border/.btn ฯลฯ
   ทำงานเป็น Bootstrap ปกติเอง เหลือแค่ปรับ .swal2-title/.swal2-html-container ให้เหมือน web3
   (ไม่ใช่สิ่งที่ Bootstrap คุม) ผ่าน :has() โดยไม่ต้องแก้ไฟล์ widget ── */
      .swal2-popup:has(.promo-v2-release-deposit) {
        border-radius: 18px !important;
        padding: 0 !important;
      }

      .swal2-popup:has(.promo-v2-release-deposit) .swal2-title {
        padding: 20px 18px 6px !important;
        font-size: 20px !important;
        font-weight: 900 !important;
      }

      .swal2-popup:has(.promo-v2-release-deposit) .swal2-html-container {
        margin: 0 !important;
        padding: 0 16px 14px !important;
        font-size: 14px;
      }

      /* ── Modal shell: flex ROW ── */
      .mem-modal {
        position: relative;
        display: flex;
        flex-direction: row;
        width: 100%;
        max-width: 1000px;
        height: 80vh;
        background: rgb(var(--blue-7, 29 78 216));
        border-radius: 16px;
        box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6), 0 4px 16px rgba(0, 0, 0, 0.4);
        overflow: hidden;
        transform: translateY(12px) scale(0.98);
        transition: transform 0.22s ease;
      }

      .mem-overlay.active .mem-modal {
        transform: translateY(0) scale(1);
      }

      /* ── Close button (absolute top-right) ── */
      .mem-close {
        position: absolute;
        top: 12px;
        right: 14px;
        z-index: 10;
        width: 32px;
        height: 32px;
        border-radius: 8px;
        background: rgba(0, 0, 0, 0.06);
        border: 1px solid rgba(0, 0, 0, 0.12);
        color: rgb(var(--text-on-panel, 30 58 95));
        font-size: 1rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.15s, color 0.15s;
      }

      .mem-close:hover {
        background: rgb(var(--danger, 239 68 68));
        border-color: rgb(var(--danger, 239 68 68));
        color: #fff;
      }

      /* ── Sidebar (left column, 180px) ── */
      .mem-sidebar {
        width: 180px;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        background: rgba(0, 0, 0, 0.25);
        border-right: 1px solid rgba(255, 255, 255, 0.07);
        overflow-y: auto;
        overflow-x: hidden;
      }

      /* ── Nav (inside sidebar) ── */
      .mem-nav {
        display: flex;
        flex-direction: column;
        padding: 8px 0;
        flex: 1;
      }

      .mem-nav-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 11px 16px;
        background: none;
        border: none;
        border-left: 3px solid transparent;
        color: rgba(255, 255, 255, 0.6);
        font-size: 0.85rem;
        font-weight: 500;
        cursor: pointer;
        text-align: left;
        width: 100%;
        transition: background 0.15s ease, color 0.15s ease;
      }

      .mem-nav-item:hover {
        background: rgba(255, 255, 255, 0.06);
        color: rgb(var(--text, 226 232 240));
      }

      .mem-nav-item.active {
        background: rgb(var(--primary, 56 189 248) / 0.15);
        color: #fff;
        border-left-color: rgb(var(--primary, 56 189 248));
        font-weight: 600;
      }

      .mem-nav-item.active .mem-nav-icon {
        color: rgb(var(--cyan-light, 56 224 255));
      }

      .mem-nav-icon {
        width: 16px;
        flex-shrink: 0;
        text-align: center;
        font-size: 0.82rem;
      }

      /* ── Content (right column, flex 1) ── */
      .mem-content {
        flex: 1;
        overflow-y: auto;
        padding: 28px 28px 24px;
        background: #ffffff;
        color: #111111;
        /* Local overrides to force dark/black text inside white content area */
        --text: 15 23 42;
        --text-bright: 15 23 42;
        /* Slate-900 (almost black) */
        --text-2: 51 65 85;
        /* Slate-700 (dark gray) */
        --text-dim: 71 85 105;
        /* Slate-600 (slate gray) */
        --text-dim-2: 71 85 105;
        --text-dim-3: 71 85 105;
        --text-dim-4: 15 23 42;
        /* Slate-900 (almost black) */
        --text-muted: rgb(71 85 105);
        --light-green: 21 128 61;
        /* Dark green for readability on white */
        --light-red: 185 28 28;
        /* Dark red for readability on white */
        --light-gold: 180 83 9;
        /* Dark golden amber for readability on white */
        --danger-light: 185 28 28;
        /* Dark red for readability on white */
      }

      /* Overrides for inputs & search bars inside member modal light content */
      .mem-content .acc-input {
        background: #f8fafc !important;
        border: 1px solid #cbd5e1 !important;
        color: #0f172a !important;
      }

      .mem-content .acc-input::placeholder {
        color: #94a3b8 !important;
      }

      .mem-content .acc-input:focus {
        border-color: rgb(var(--primary)) !important;
        background: #ffffff !important;
      }

      .mem-content .cp-search-wrap {
        background: #f8fafc !important;
        border: 1px solid #cbd5e1 !important;
      }

      .mem-content .cp-search-wrap input {
        color: #0f172a !important;
      }

      .mem-content .cp-search-wrap input::placeholder {
        color: #94a3b8 !important;
      }

      .mem-tab-title {
        font-size: 1.1rem;
        font-weight: 700;
        /* was rgb(var(--primary)) — --primary is SECONDARY-hue-driven and
           this sits directly on .mem-content (= color_website, the PRIMARY
           body color) — two independent admin colors that can clash.
           --accent-on-body is computed for exactly this (accent hue, nudged
           to clear 4.5:1 against the actual body color). */
        color: var(--accent-on-body, rgb(30, 136, 229));
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        gap: 10px;
        padding-bottom: 14px;
        border-bottom: 1px solid rgb(var(--panel-12, 144 202 249) / 0.35);
      }

      /* พื้นหลังเข้มขึ้นเฉพาะแท็บแคชเชียร์ ให้ contrast กับตัวหนังสือ/การ์ดชัดขึ้น
   (เดิมพื้น .mem-content เป็นสีเข้ม ตอนนี้ .mem-content เป็นพื้นขาวแล้ว แท็บแคชเชียร์ยังต้อง
   คงพื้นเข้มของตัวเอง เพราะ card/label ข้างในถูกออกแบบเป็นตัวหนังสือสว่างบนพื้นเข้ม (--text-dim-4)
   จึงคง opacity สูงพอที่จะเข้มจริงไม่ว่าพื้นหลังข้างนอกจะเป็นสีอะไร) */
      #mem-tab-cashier {
        --text: 15 23 42;
        /* Slate-900 */
        --text-muted: rgba(15, 23, 42, 0.75);
        --text-2: 71 85 105;
        /* Slate-600 */
        --text-dim: 100 116 139;
        /* Slate-500 */
        --text-dim-2: 100 116 139;
        --text-dim-3: 100 116 139;
        --text-dim-4: 15 23 42;
        --light-green: 220 252 231;
        --light-red: 254 226 226;
        --danger-light: 220 38 38;
        background: #ffffff;
        border-radius: 14px;
        padding: 18px;
        margin: -6px -6px 0;
      }

      .mem-tab-title i {
        color: rgb(var(--primary, 30 136 229));
        font-size: 1rem;
      }

      .mem-tab-placeholder {
        color: rgb(var(--text-2, 107 114 128));
        font-size: 0.9rem;
      }

      /* ── Mobile: bottom-sheet + sidebar left ── */
      @media (max-width: 768px) {

        /* Overlay aligned to bottom */
        .mem-overlay {
          padding: 0;
          align-items: flex-start;
          justify-content: flex-start;
          background: rgba(0, 0, 0, 0.82);
        }

        /* Full screen modal, flex ROW = sidebar left + content right */
        .mem-modal {
          width: 100%;
          max-width: 100%;
          height: 100dvh;
          max-height: 100dvh;
          border-radius: 0;
          flex-direction: row;
          transform: translateY(100%);
          transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
          box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.55);
        }

        .mem-overlay.active .mem-modal {
          transform: translateY(0);
        }

        /* Close button stays absolute top-right */
        .mem-close {
          top: 22px;
          right: 10px;
          width: 28px;
          height: 28px;
          font-size: 0.82rem;
        }

        /* Sidebar: narrow left column, scrollable */
        .mem-sidebar {
          width: 72px;
          flex-shrink: 0;
          overflow-y: auto;
          overflow-x: hidden;
          scrollbar-width: none;
          -ms-overflow-style: none;
          padding-top: 56px;
          padding-bottom: 32px;
        }

        .mem-sidebar::-webkit-scrollbar {
          display: none;
        }

        /* Nav: vertical, icon top + text bottom */
        .mem-nav {
          padding: 0;
          gap: 0;
        }

        .mem-nav-item {
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 4px;
          padding: 10px 2px;
          font-size: 0.58rem;
          line-height: 1.2;
          letter-spacing: 0;
          text-align: center;
          white-space: normal;
          border-radius: 0;
          border-top: none;
          border-right: none;
          border-bottom: none;
          border-left: 3px solid transparent;
          color: rgba(255, 255, 255, 0.48);
        }

        .mem-nav-item:hover {
          background: rgba(255, 255, 255, 0.06);
          color: rgb(var(--text, 226 232 240));
        }

        .mem-nav-item.active {
          background: rgb(var(--primary, 56 189 248) / 0.12);
          color: #fff;
          border-left-color: rgb(var(--primary, 56 189 248));
          font-weight: 600;
        }

        .mem-nav-icon {
          font-size: 1.05rem;
          width: auto;
          display: block;
        }

        /* Content area */
        .mem-content {
          flex: 1;
          overflow-y: auto;
          padding: 56px 18px 48px;
          overscroll-behavior: contain;
        }

        .mem-tab-title {
          font-size: 1rem;
          margin-bottom: 14px;
          padding-bottom: 10px;
        }
      }

      /* ── mem-modal: very small phones (≤360px / 320px) ── */
      @media (max-width: 360px) {
        .mem-sidebar {
          width: 56px;
          padding-top: 36px;
        }

        .mem-nav-item {
          padding: 8px 1px;
          font-size: 0.52rem;
        }

        .mem-nav-icon {
          font-size: 0.92rem;
        }

        .mem-content {
          padding: 40px 10px 24px;
        }

        .mem-close {
          right: 6px;
          top: 18px;
          width: 24px;
          height: 24px;
          font-size: 0.75rem;
        }

        .mem-tab-title {
          font-size: 0.9rem;
        }
      }

      /* ══════════════════════════════════════════════════
   Account Tab — Info Cards
══════════════════════════════════════════════════ */
      .acc-card {
        --text: 227 242 253;
        /* Light blue/white text for readability on dark background */
        --text-2: 227 242 253;
        --text-dim: 148 163 184;
        --text-dim-2: 154 165 177;
        --text-dim-3: 165 175 186;
        --text-dim-4: 255 255 255;
        --text-muted: rgba(227, 242, 253, 0.7);
        background: rgb(var(--blue-deep-2, 13 71 161) / 0.94);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 12px;
        overflow: hidden;
      }

      .acc-card-header {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 16px;
        background: rgb(var(--primary, 56 189 248) / 0.08);
        border-bottom: 1px solid rgba(255, 255, 255, 0.07);
        font-size: 0.8rem;
        font-weight: 700;
        color: rgb(var(--text-dim-4, 241 245 249));
        letter-spacing: 0.4px;
        text-transform: uppercase;
      }

      .acc-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 11px 16px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        gap: 12px;
        min-height: 44px;
      }

      .acc-row:last-child {
        border-bottom: none;
      }

      /* balance row highlight */
      .acc-row--balance {
        background: rgb(var(--gold, 250 204 21) / 0.04);
      }

      /* --text-muted บน .acc-card คือ rgba(227,242,253,0.7) — จางเกินไปบนพื้นหลังการ์ด
   สีน้ำเงินเข้ม (--blue-deep-2) เปลี่ยนเป็นขาว opacity สูงขึ้นให้อ่านง่ายขึ้น */
      .acc-label {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 0.82rem;
        color: rgba(255, 255, 255, 0.9);
        flex-shrink: 0;
        min-width: 130px;
      }

      /* --primary/--cyan ในธีมนี้เป็นโทนน้ำเงินใกล้เคียงพื้นหลังการ์ด (--blue-deep-2)
   เกินไป ไอคอนเลยจมกับพื้น ใช้ gold แทนให้ตัดกันชัดเจน */
      .acc-label i {
        width: 14px;
        text-align: center;
        color: rgb(var(--gold, 250 204 21));
        font-size: 0.78rem;
      }

      .acc-value {
        font-size: 0.88rem;
        color: rgb(var(--text-dim-4, 226 232 240));
        font-weight: 500;
        text-align: right;
        word-break: break-all;
      }

      /* Rank badge */
      .acc-rank-badge {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        background: linear-gradient(90deg, rgb(var(--amber-darkest, 180 83 9)), rgb(var(--gold, 250 204 21)));
        /* was rgb(var(--bg-04)) — meant "dark text" in the dark-theme port,
           but bg-04 is near-WHITE in this theme (measured 2.93:1 on the
           gold gradient). The gradient is fixed theme gold (never admin-
           driven), so a fixed dark slate is always correct here. */
        color: #0f172a;
        font-size: 0.75rem;
        font-weight: 800;
        padding: 3px 10px;
        border-radius: 30px;
        letter-spacing: 0.5px;
      }

      /* Balance value — สีเดียวกับ #showRealBalance บน header (--gold-warm) แทน
   --light-gold เดิมที่เป็นครีมอ่อนคนละโทน */
      .acc-balance {
        font-size: 1.05rem;
        font-weight: 800;
        color: rgb(var(--gold-warm, 251 191 36));
        letter-spacing: 0.3px;
      }

      .acc-balance-cur {
        font-size: 0.72rem;
        font-weight: 500;
        color: rgb(var(--gold-warm, 251 191 36));
        margin-left: 3px;
      }

      /* Bank row */
      .acc-bank-wrap {
        display: flex;
        align-items: center;
        gap: 8px;
        justify-content: flex-end;
      }

      .acc-bank-icon {
        width: 26px;
        height: 26px;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.7rem;
        font-weight: 800;
        color: #fff;
        flex-shrink: 0;
        letter-spacing: 0;
      }

      /* Account number — monospace look */
      .acc-account-no {
        font-family: 'Courier New', monospace;
        letter-spacing: 1px;
        font-size: 0.88rem;
        color: rgb(var(--text-2, 203 213 225));
      }

      /* ── Mobile tweaks ── */
      @media (max-width: 768px) {
        .acc-label {
          min-width: 85px;
          font-size: 0.75rem;
        }

        .acc-value {
          font-size: 0.82rem;
        }

        .acc-balance {
          font-size: 0.95rem;
        }
      }

      /* ══════════════════════════════════════════════════
   Account Tab — Bank List & Add Bank Form
══════════════════════════════════════════════════ */

      /* "เพิ่มบัญชี" button in card header — เดิม background/border เป็น --success
   ที่ opacity 12%/22% แทบจมกับพื้น .acc-card-header (สีน้ำเงินโปร่งใสอยู่แล้ว)
   เปลี่ยนเป็นพื้นเขียวทึบ + ตัวหนังสือขาว ให้เด่นชัดเจนแบบปุ่มจริง */
      .acc-add-bank-btn {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        /* was --success (34 197 94) — white text on it measured 2.28:1.
           --success-deep is dark enough for white text to clear 4.5:1. */
        background: rgb(var(--success-deep, 21 128 61));
        color: #fff;
        border: 1px solid rgb(var(--success-deep, 21 128 61));
        border-radius: 20px;
        font-size: 0.7rem;
        font-weight: 700;
        padding: 4px 10px;
        cursor: pointer;
        transition: background 0.18s, box-shadow 0.18s;
        text-transform: none;
        letter-spacing: 0;
        white-space: nowrap;
        box-shadow: 0 2px 8px rgb(var(--success, 34 197 94) / 0.35);
      }

      .acc-add-bank-btn:hover {
        background: rgb(var(--success-2, 22 163 74));
      }

      /* ตัวนับจำนวนบัญชีธนาคาร (next to header title) */
      .acc-card-header>span:first-child {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-right: auto;
      }

      .acc-bank-count {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        border-radius: 9px;
        background: rgb(var(--primary, 56 189 248) / 0.2);
        color: rgb(var(--primary, 56 189 248));
        font-size: 0.66rem;
        font-weight: 800;
        line-height: 1;
      }

      /* Bank list item */
      .acc-bank-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 16px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
      }

      .acc-bank-item:last-child {
        border-bottom: none;
      }

      .acc-bank-item-logo {
        width: 36px;
        height: 36px;
        border-radius: 8px;
        object-fit: contain;
        flex-shrink: 0;
        background: rgba(255, 255, 255, 0.08);
      }

      .acc-bank-item-logo-fb {
        width: 36px;
        height: 36px;
        border-radius: 8px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.62rem;
        font-weight: 800;
        color: #fff;
      }

      .acc-bank-item-info {
        flex: 1;
        min-width: 0;
      }

      .acc-bank-item-bankname {
        font-size: 0.8rem;
        color: rgb(var(--text-dim, 148 163 184));
        margin-bottom: 1px;
      }

      .acc-bank-item-number {
        font-size: 0.82rem;
        color: rgb(var(--text-dim-4, 226 232 240));
        font-weight: 600;
        font-family: 'Courier New', monospace;
        letter-spacing: 1px;
      }

      .acc-bank-item-accname {
        font-size: 0.75rem;
        color: rgba(255, 255, 255, 0.4);
        margin-top: 2px;
      }

      /* Status pill */
      .acc-bank-status {
        font-size: 0.66rem;
        font-weight: 700;
        padding: 3px 8px;
        border-radius: 20px;
        flex-shrink: 0;
        white-space: nowrap;
      }

      .acc-bank-status--enable {
        background: rgb(var(--success, 34 197 94) / 0.14);
        color: rgb(var(--text-dim-4, 227 242 253));
        border: 1px solid rgb(var(--success, 34 197 94) / 0.2);
      }

      .acc-bank-status--process {
        background: rgb(var(--gold, 250 204 21) / 0.12);
        color: rgb(var(--text-dim-4, 227 242 253));
        border: 1px solid rgb(var(--gold, 250 204 21) / 0.2);
      }

      .acc-bank-status--disable {
        background: rgb(var(--text-dim, 148 163 184) / 0.1);
        color: var(--text-muted);
        border: 1px solid rgb(var(--text-dim, 148 163 184) / 0.15);
      }

      /* Empty state */
      .acc-bank-empty {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 28px 16px;
        color: var(--text-muted);
        font-size: 0.8rem;
        text-align: center;
      }

      .acc-bank-empty i {
        font-size: 2rem;
        opacity: 0.2;
      }

      /* Add bank panel */
      .acc-add-bank-form {
        padding: 14px 16px 16px;
        border-top: 1px solid rgba(255, 255, 255, 0.07);
      }

      .acc-add-bank-form-title {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 0.8rem;
        font-weight: 700;
        color: rgb(var(--text-dim-4, 241 245 249));
        margin-bottom: 14px;
      }

      .acc-add-bank-close {
        margin-left: auto;
        background: none;
        border: none;
        color: var(--text-muted);
        cursor: pointer;
        font-size: 1rem;
        width: 26px;
        height: 26px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 5px;
        transition: color 0.15s;
        padding: 0;
      }

      .acc-add-bank-close:hover {
        color: rgb(var(--danger, 239 68 68));
      }

      .acc-field-label {
        font-size: 0.73rem;
        font-weight: 700;
        color: var(--text-muted);
        margin-bottom: 6px;
        letter-spacing: 0.2px;
      }

      .acc-req {
        color: rgb(var(--light-red, 254 242 242));
      }

      .cashier-min-hint {
        display: block;
        font-size: 0.72rem;
        color: var(--text-muted);
        margin-top: 4px;
      }

      .acc-input {
        width: 100%;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        color: rgb(var(--text-dim-4, 226 232 240));
        font-size: 0.84rem;
        padding: 9px 12px;
        outline: none;
        transition: border-color 0.18s;
        box-sizing: border-box;
      }

      .acc-input:focus {
        border-color: rgb(var(--primary, 56 189 248));
      }

      .acc-input::placeholder {
        color: rgba(255, 255, 255, 0.38);
      }

      .acc-input[readonly] {
        background: rgba(255, 255, 255, 0.03);
        cursor: default;
        color: rgb(var(--text-dim, 148 163 184));
      }

      /* Bank selector grid */
      .acc-bank-selector-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
        gap: 6px;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.07);
        border-radius: 8px;
        padding: 10px;
        margin-bottom: 8px;
      }

      .acc-bank-sel-item {
        aspect-ratio: 1;
        border-radius: 7px;
        overflow: hidden;
        border: 2px solid transparent;
        cursor: pointer;
        transition: border-color 0.15s, transform 0.15s;
      }

      .acc-bank-sel-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        pointer-events: none;
      }

      .acc-bank-sel-item:hover {
        border-color: rgb(var(--primary, 56 189 248) / 0.4);
        transform: scale(1.07);
      }

      .acc-bank-sel-item.selected {
        border-color: rgb(var(--primary, 56 189 248));
        box-shadow: 0 0 8px rgb(var(--primary, 56 189 248) / 0.35);
        transform: scale(1.07);
      }

      /* Error banner */
      .acc-add-bank-error {
        background: rgb(var(--danger, 239 68 68) / 0.1);
        border: 1px solid rgb(var(--danger, 239 68 68) / 0.25);
        border-radius: 6px;
        color: rgb(var(--light-red, 254 242 242));
        font-size: 0.77rem;
        padding: 8px 12px;
        margin-top: 10px;
      }

      /* Submit button */
      .acc-add-bank-submit {
        width: 100%;
        margin-top: 14px;
        padding: 12px;
        background: linear-gradient(135deg, rgb(var(--blue-5, 37 99 235)), rgb(var(--blue-6, 28 78 216)));
        color: rgb(var(--text-on-accent, 255 255 255));
        font-size: 0.95rem;
        font-weight: 800;
        border: none;
        border-radius: 8px;
        box-shadow: 0 2px 12px rgb(var(--cyan-2, 255 130 200) / 0.3);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        transition: filter 0.18s, transform 0.15s;
      }

      .acc-add-bank-submit:hover:not(:disabled) {
        filter: brightness(1.08);
      }

      .acc-add-bank-submit:active:not(:disabled) {
        transform: scale(0.98);
      }

      .acc-add-bank-submit:disabled {
        opacity: 0.5;
        cursor: not-allowed;
        box-shadow: none;
      }

      /* ══════════════════════════════════════════════════
   Password Tab
══════════════════════════════════════════════════ */
      .pw-notice {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        background: rgb(var(--gold, 250 204 21) / 0.07);
        border: 1px solid rgb(var(--gold, 250 204 21) / 0.18);
        border-radius: 8px;
        padding: 10px 14px;
        font-size: 0.8rem;
        color: #111111;
        line-height: 1.5;
      }

      .pw-notice i {
        flex-shrink: 0;
        margin-top: 2px;
      }

      .pw-field {
        padding: 14px 16px 0;
      }

      .pw-field--last {
        padding-bottom: 16px;
      }

      .pw-input-wrap {
        position: relative;
        display: flex;
        align-items: center;
      }

      .pw-input-wrap .acc-input {
        padding-right: 40px;
      }

      /* Eye toggle button */
      .pw-eye-btn {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 38px;
        background: none;
        border: none;
        color: var(--text-muted);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.85rem;
        transition: color 0.15s;
        padding: 0;
      }

      .pw-eye-btn:hover {
        color: rgb(var(--primary, 56 189 248));
      }

      /* Password strength meter */
      .pw-strength {
        display: flex;
        gap: 4px;
        margin-top: 7px;
      }

      .pw-strength-seg {
        flex: 1;
        height: 3px;
        border-radius: 2px;
        background: rgba(255, 255, 255, 0.1);
        transition: background 0.2s;
      }

      .pw-strength.is-weak .pw-strength-seg:nth-child(1) {
        background: rgb(var(--danger, 239 68 68));
      }

      .pw-strength.is-mid .pw-strength-seg:nth-child(-n+2) {
        background: rgb(var(--primary-deep, 14 165 233));
      }

      .pw-strength.is-strong .pw-strength-seg {
        background: rgb(var(--success, 34 197 94));
      }

      /* Hint text */
      .pw-hint {
        font-size: 0.72rem;
        color: var(--text-muted);
        margin-top: 5px;
        line-height: 1.4;
      }

      /* Caps Lock warning */
      .pw-caps-warn {
        font-size: 0.72rem;
        color: rgb(var(--light-gold, 254 243 205));
        margin-top: 4px;
        display: flex;
        align-items: center;
        gap: 5px;
      }

      /* Confirm match icon */
      .pw-match-icon {
        position: absolute;
        right: 38px;
        font-size: 0.9rem;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.15s;
      }

      .pw-match-icon.is-ok {
        opacity: 1;
        color: rgb(var(--success, 34 197 94));
      }

      .pw-match-icon.is-bad {
        opacity: 1;
        color: rgb(var(--danger, 239 68 68));
      }

      /* ══════════════════════════════════════════════════
   Cashier Tab
══════════════════════════════════════════════════ */

      /* Mock data notice */
      .cashier-mock-notice {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        background: repeating-linear-gradient(-45deg,
            rgb(var(--gold, 250 204 21) / 0.04),
            rgb(var(--gold, 250 204 21) / 0.04) 6px,
            transparent 6px,
            transparent 12px);
        border: 1px solid rgb(var(--gold, 250 204 21) / 0.28);
        border-left: 3px solid rgb(var(--gold, 250 204 21));
        border-radius: 8px;
        padding: 10px 14px;
        margin-bottom: 16px;
        font-size: 0.78rem;
        color: rgb(var(--gold, 250 204 21) / 0.85);
        line-height: 1.5;
      }

      .cashier-mock-notice i {
        flex-shrink: 0;
        margin-top: 2px;
        font-size: 0.9rem;
        color: rgb(var(--gold, 250 204 21));
      }

      .cashier-mock-notice strong {
        color: rgb(var(--gold, 250 204 21));
        font-weight: 700;
      }

      /* Sub-tab bar */
      .cashier-tabs {
        display: flex;
        gap: 0;
        border-bottom: 2px solid rgba(255, 255, 255, 0.07);
        margin-bottom: 20px;
      }

      .cashier-tab-btn {
        flex: 1;
        background: none;
        border: none;
        border-bottom: 3px solid transparent;
        margin-bottom: -2px;
        color: rgba(255, 255, 255, 0.65);
        font-size: 0.88rem;
        font-weight: 600;
        padding: 10px 6px 13px;
        cursor: pointer;
        transition: color 0.18s, border-color 0.18s;
        text-align: center;
      }

      .cashier-tab-btn:hover {
        color: rgb(var(--text-on-panel, 15 23 42));
      }

      .cashier-tab-btn.active {
        color: rgb(var(--cyan, 0 210 255));
        border-bottom-color: rgb(var(--cyan, 0 210 255));
      }

      /* Content panels */
      .cashier-content {
        display: none;
      }

      .cashier-content.active {
        display: block;
      }

      /* Loading spinner */
      .cashier-loading {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 32px 16px;
        color: var(--text-muted);
        font-size: 0.82rem;
      }

      .cashier-loading i {
        font-size: 1.6rem;
        animation: spin 0.8s linear infinite;
      }

      @keyframes spin {
        to {
          transform: rotate(360deg);
        }
      }

      /* Generic section block */
      .cashier-section {
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 12px;
        padding: 16px;
        margin-bottom: 14px;
      }

      /* Notice / info banner */
      .cashier-notice {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        background: rgb(var(--gold, 250 204 21) / 0.07);
        border: 1px solid rgb(var(--gold, 250 204 21) / 0.18);
        border-radius: 8px;
        padding: 10px 14px;
        font-size: 0.78rem;
        color: rgb(var(--text-on-panel, 15 23 42));
        line-height: 1.5;
        margin-bottom: 14px;
      }

      .cashier-notice i {
        flex-shrink: 0;
        margin-top: 2px;
      }

      /* Section title with gold accent bar — matches web3 maha's .dep-section-title */
      .cashier-section-title {
        font-size: 0.86rem;
        font-weight: 700;
        color: rgb(var(--gold, 250 204 21));
        display: flex;
        align-items: center;
        gap: 8px;
        padding-bottom: 8px;
        border-bottom: 2px solid rgb(var(--gold, 250 204 21) / 0.30);
        margin-bottom: 10px;
      }

      .cashier-section-title::before {
        content: '';
        width: 4px;
        height: 15px;
        background: linear-gradient(180deg, rgb(var(--light-gold, 254 243 205)), rgb(var(--gold, 250 204 21)));
        border-radius: 2px;
        flex-shrink: 0;
      }

      /* ── Deposit channels (รีดีไซน์เป็น grid การ์ดแบบ bx-theme-v2-no2 — auto-fill แทน breakpoint
     ตายตัว เพราะ container นี้อยู่ใน modal ที่กว้างไม่เท่า viewport เสมอไป) ── */
      .cashier-channel-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 10px;
        margin-bottom: 14px;
      }

      .cashier-channel-card {
        position: relative;
        display: flex;
        align-items: center;
        gap: 10px;
        background: rgba(255, 255, 255, 0.04);
        border: 1.5px solid rgba(255, 255, 255, 0.08);
        border-radius: 12px;
        padding: 12px 10px;
        cursor: pointer;
        transition: border-color 0.18s, background 0.18s, transform 0.15s, box-shadow 0.18s;
        text-align: left;
        color: rgb(var(--text-dim-4, 226 232 240));
      }

      .cashier-channel-card:hover {
        border-color: rgb(var(--gold, 250 204 21) / 0.55);
        background: rgb(var(--gold, 250 204 21) / 0.10);
        box-shadow: 0 4px 16px rgb(var(--gold, 250 204 21) / 0.18);
        transform: translateY(-2px);
      }

      /* gold border + glow on selection — matches web3 maha's dep-method-card--selected */
      .cashier-channel-card.active {
        position: relative;
        border-color: rgb(var(--gold, 250 204 21));
        background: linear-gradient(135deg, rgb(var(--gold, 250 204 21) / 0.20), rgb(var(--panel-03, 22 32 64) / 0.35));
        box-shadow: 0 0 0 1.5px rgb(var(--gold, 250 204 21)), 0 4px 14px rgb(var(--gold, 250 204 21) / 0.30);
      }

      .cashier-channel-card.active::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 12px;
        background: radial-gradient(circle at top right, rgb(var(--gold, 250 204 21) / 0.22), transparent 60%);
        pointer-events: none;
      }

      .cashier-channel-card img {
        width: 28px;
        height: 28px;
        object-fit: contain;
        border-radius: 8px;
        flex-shrink: 0;
      }

      /* boxed icon container — matches web3 maha's .dep-method-icon-wrap */
      .cashier-channel-icon-wrap {
        flex-shrink: 0;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgb(var(--gold, 250 204 21) / 0.12);
        border: 1px solid rgb(var(--gold, 250 204 21) / 0.30);
        border-radius: 9px;
        overflow: hidden;
      }

      .cashier-channel-icon {
        font-size: 1.1rem;
        color: rgb(var(--gold, 250 204 21));
        text-align: center;
      }

      .cashier-channel-info {
        min-width: 0;
        flex: 1;
      }

      .cashier-channel-name {
        font-size: 0.82rem;
        font-weight: 700;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .cashier-channel-min {
        font-size: 0.68rem;
        color: rgb(var(--text-muted, 148 138 185));
        margin-top: 2px;
      }

      .cashier-channel-min i {
        margin-right: 3px;
      }

      .cashier-channel-check {
        font-size: 1.1rem;
        color: rgba(255, 255, 255, 0.15);
        flex-shrink: 0;
      }

      .cashier-channel-card.active .cashier-channel-check {
        color: rgb(var(--gold, 250 204 21));
      }

      /* ── Bank deposit 2-step wizard (พอร์ต UX จาก bx-theme-v2-no2) ── */
      .cashier-wizard-progress {
        height: 4px;
        background: rgba(255, 255, 255, 0.08);
        border-radius: 4px;
        margin-bottom: 16px;
        overflow: hidden;
      }

      .cashier-wizard-progress-bar {
        height: 100%;
        width: 0%;
        background: rgb(var(--gold, 250 204 21));
        transition: width 0.28s ease;
      }

      .cashier-wizard-step {
        display: none;
      }

      .cashier-wizard-step.active {
        display: block;
        animation: cashierStepIn 0.25s ease;
      }

      @keyframes cashierStepIn {
        from {
          opacity: 0;
          transform: translateX(12px);
        }

        to {
          opacity: 1;
          transform: translateX(0);
        }
      }

      .cashier-wizard-back {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: none;
        border: none;
        color: rgb(var(--text-on-panel, 15 23 42));
        font-size: 0.8rem;
        font-weight: 600;
        padding: 4px 0;
        margin-bottom: 10px;
        cursor: pointer;
      }

      .cashier-wizard-back:hover {
        color: rgb(var(--gold, 250 204 21));
      }

      .cashier-wizard-status {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-top: 10px;
        padding: 10px 14px;
        border-radius: 8px;
        font-size: 0.8rem;
        background: rgb(var(--gold, 250 204 21) / 0.08);
        border: 1px solid rgb(var(--gold, 250 204 21) / 0.22);
        color: rgb(var(--light-gold, 254 243 205));
      }

      .cashier-wizard-status.success {
        background: rgb(var(--success, 34 197 94) / 0.1);
        border-color: rgb(var(--success, 34 197 94) / 0.22);
        color: rgb(var(--light-green, 204 246 199));
      }

      /* Bank info card (deposit) */
      .cashier-bank-info-card {
        background: rgb(var(--gold, 250 204 21) / 0.06);
        border: 1px solid rgb(var(--gold, 250 204 21) / 0.18);
        border-radius: 12px;
        padding: 14px 16px;
        margin-bottom: 14px;
      }

      .cashier-bank-info-row {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 6px;
      }

      .cashier-bank-info-row:last-child {
        margin-bottom: 0;
      }

      .cashier-bank-info-logo {
        width: 40px;
        height: 40px;
        border-radius: 8px;
        object-fit: contain;
        flex-shrink: 0;
        background: rgba(255, 255, 255, 0.08);
      }

      .cashier-bank-info-detail {
        flex: 1;
        min-width: 0;
      }

      .cashier-bank-info-name {
        font-size: 0.85rem;
        font-weight: 700;
        color: rgb(var(--text-on-panel, 15 23 42));
      }

      .cashier-bank-info-sub {
        font-size: 0.78rem;
        color: rgb(var(--text-dim, 148 163 184));
        margin-top: 2px;
      }

      /* Transfer amount highlight — boxed, centered, big gold number, matches web3 maha's .dep-amount-box */
      .cashier-transfer-amount {
        background: rgb(var(--panel-03, 22 32 64) / 0.35);
        border: 2px solid rgb(var(--gold, 250 204 21) / 0.45);
        border-radius: 12px;
        padding: 14px 12px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        text-align: center;
        font-size: 0.78rem;
        color: rgb(var(--text-dim, 148 163 184));
        margin-bottom: 14px;
        box-shadow: inset 0 0 20px rgb(var(--gold, 250 204 21) / 0.06);
      }

      .cashier-transfer-amount-val {
        font-size: 1.9rem;
        font-weight: 800;
        color: rgb(var(--gold, 250 204 21));
        line-height: 1.2;
      }

      .cashier-transfer-note {
        font-size: 0.72rem;
      }

      /* Copy button */
      .cashier-copy-btn {
        background: rgb(var(--gold, 250 204 21) / 0.14);
        border: 1px solid rgb(var(--gold, 250 204 21) / 0.45);
        border-radius: 6px;
        color: rgb(var(--light-gold, 254 243 205));
        font-size: 0.72rem;
        font-weight: 700;
        padding: 4px 10px;
        cursor: pointer;
        transition: background 0.18s;
        white-space: nowrap;
        flex-shrink: 0;
      }

      .cashier-copy-btn:hover {
        background: rgb(var(--gold, 250 204 21) / 0.25);
      }

      /* Amount input row */
      .cashier-amount-row {
        display: flex;
        gap: 8px;
        align-items: center;
        margin-bottom: 14px;
      }

      .cashier-amount-input {
        flex: 1;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        color: rgb(var(--text-on-panel, 15 23 42));
        font-size: 0.9rem;
        font-family: inherit;
        padding: 10px 14px;
        outline: none;
        transition: border-color 0.18s;
        box-sizing: border-box;
      }

      .cashier-amount-input:focus {
        border-color: rgb(var(--gold, 250 204 21));
      }

      .cashier-amount-input::placeholder {
        color: rgba(255, 255, 255, 0.2);
      }

      .cashier-all-btn {
        background: rgb(var(--gold, 250 204 21) / 0.14);
        border: 1px solid rgb(var(--gold, 250 204 21) / 0.45);
        border-radius: 8px;
        color: rgb(var(--light-gold, 254 243 205));
        font-size: 0.8rem;
        font-weight: 700;
        padding: 10px 14px;
        cursor: pointer;
        white-space: nowrap;
        transition: background 0.18s;
        flex-shrink: 0;
      }

      .cashier-all-btn:hover {
        background: rgb(var(--gold, 250 204 21) / 0.25);
      }

      /* Submit button */
      .cashier-submit-btn {
        width: 100%;
        padding: 12px;
        background: linear-gradient(135deg, rgb(var(--blue-5, 37 99 235)), rgb(var(--blue-6, 28 78 216)));
        color: rgb(var(--text-on-accent, 255 255 255));
        font-size: 0.92rem;
        font-weight: 800;
        border: none;
        border-radius: 10px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        transition: opacity 0.18s;
      }

      .cashier-submit-btn:hover:not(:disabled) {
        opacity: 0.85;
      }

      .cashier-submit-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
      }

      .cashier-submit-btn.loading {
        pointer-events: none;
        opacity: 0.7;
      }

      /* Error/info message */
      .cashier-msg {
        border-radius: 8px;
        padding: 10px 14px;
        font-size: 0.8rem;
        margin-top: 10px;
        display: none;
      }

      .cashier-msg.error {
        background: rgb(var(--danger, 239 68 68) / 0.1);
        border: 1px solid rgb(var(--danger, 239 68 68) / 0.25);
        color: rgb(var(--light-red, 254 242 242));
      }

      .cashier-msg.success {
        background: rgb(var(--success, 34 197 94) / 0.1);
        border: 1px solid rgb(var(--success, 34 197 94) / 0.22);
        color: rgb(var(--light-green, 204 246 199));
      }

      /* ── QR PromptPay deposit — gold-bordered result card, matches web3 maha's dep-receive-card/dep-amount-box language ── */
      .cashier-qr-card {
        position: relative;
        margin-top: 14px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        padding: 18px 16px;
        background: rgb(var(--panel-03, 22 32 64) / 0.35);
        border: 2px solid rgb(var(--gold, 250 204 21) / 0.45);
        border-radius: 14px;
        box-shadow: inset 0 0 24px rgb(var(--gold, 250 204 21) / 0.06), 0 4px 16px rgba(0, 0, 0, 0.25);
      }

      .cashier-qr-card::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 14px;
        background: radial-gradient(circle at top right, rgb(var(--gold, 250 204 21) / 0.14), transparent 60%);
        pointer-events: none;
      }

      .cashier-qr-canvas {
        position: relative;
        width: 220px;
        max-width: 70%;
        height: auto;
        background: #fff;
        border-radius: 10px;
        padding: 8px;
        border: 1px solid rgb(var(--gold, 250 204 21) / 0.35);
        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
      }

      /* บางค่าย (MYPAY/WAVE) คืนหน้าชำระเงินสำเร็จรูปมาแทน QR — embed เต็มความกว้าง ไม่ใช่กรอบเล็กแบบ QR */
      .cashier-qr-iframe {
        width: 100%;
        height: 520px;
        border: 0;
        border-radius: 10px;
        background: #fff;
        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
      }

      /* ── Withdraw balance card ── */
      .cashier-balance-card {
        background: rgb(var(--gold, 250 204 21) / 0.06);
        border: 1px solid rgb(var(--gold, 250 204 21) / 0.18);
        border-radius: 12px;
        padding: 14px 18px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 18px;
      }

      .cashier-balance-label {
        font-size: 0.8rem;
        color: rgb(var(--light-gold, 254 243 205));
        margin-bottom: 3px;
      }

      .cashier-balance-val {
        font-size: 1.4rem;
        font-weight: 800;
        color: rgb(var(--light-gold, 254 243 205));
        letter-spacing: 0.5px;
      }

      .cashier-balance-cur {
        font-size: 0.72rem;
        font-weight: 500;
        color: rgb(var(--gold, 250 204 21) / 0.55);
        margin-left: 3px;
      }

      .cashier-promo-summary {
        background: rgb(var(--primary, 56 189 248) / 0.06);
        border: 1px solid rgb(var(--primary, 56 189 248) / 0.18);
        border-radius: 12px;
        padding: 12px 14px;
        margin-top: 12px;
      }

      .cashier-promo-summary-title {
        font-size: 0.78rem;
        font-weight: 700;
        color: rgb(var(--text-on-panel, 15 23 42));
        margin-bottom: 8px;
      }

      .cashier-promo-summary-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
      }

      .cashier-promo-stat-label {
        display: block;
        font-size: 0.68rem;
        color: var(--text-muted);
        margin-bottom: 2px;
      }

      .cashier-promo-stat-val {
        display: block;
        font-size: 0.82rem;
        font-weight: 700;
        color: rgb(var(--text-on-panel, 15 23 42));
      }

      .cashier-promo-stat-val--ok {
        color: rgb(var(--success-pale, 134 239 172));
      }

      .cashier-promo-summary-reason {
        font-size: 0.72rem;
        color: var(--text-muted);
        margin-top: 8px;
      }

      .cashier-refresh-btn {
        background: rgb(var(--gold, 250 204 21) / 0.1);
        border: 1px solid rgb(var(--gold, 250 204 21) / 0.22);
        border-radius: 8px;
        color: rgb(var(--gold, 250 204 21) / 0.8);
        font-size: 1rem;
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        flex-shrink: 0;
        transition: background 0.18s, transform 0.2s;
      }

      .cashier-refresh-btn:hover {
        background: rgb(var(--gold, 250 204 21) / 0.2);
        transform: rotate(45deg);
      }

      /* Withdraw bank selection */
      .cashier-bank-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-bottom: 16px;
      }

      /* ── gradient card + radial-gradient corner decoration + pill check circle,
     matches web3 maha's .mp-bnk-card ── */
      .cashier-bank-option {
        position: relative;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 11px 14px;
        background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%) !important;
        border: 1px solid #bae6fd !important;
        border-radius: 10px;
        box-shadow: 0 3px 12px rgba(14, 165, 233, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.80) !important;
        overflow: hidden;
        cursor: pointer;
        transition: border-color 0.18s, background 0.18s, transform 0.18s, box-shadow 0.18s;
      }

      .cashier-bank-option::before {
        content: '';
        position: absolute;
        top: -28px;
        right: -28px;
        width: 72px;
        height: 72px;
        border-radius: 50%;
        background: radial-gradient(circle, rgb(var(--gold, 250 204 21) / 0.16) 0%, transparent 70%);
        pointer-events: none;
      }

      .cashier-bank-option:hover {
        border-color: rgb(var(--gold, 250 204 21) / 0.4);
        transform: translateY(-2px);
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
      }

      /* gold border + glow on selection — matches web3 maha's mp-bnk-card selected state */
      .cashier-bank-option.selected {
        border-color: rgb(var(--gold, 250 204 21));
        box-shadow: 0 0 0 1.5px rgb(var(--gold, 250 204 21)), 0 8px 28px rgb(var(--gold, 250 204 21) / 0.28);
      }

      .cashier-bank-option-logo {
        position: relative;
        width: 34px;
        height: 34px;
        border-radius: 7px;
        object-fit: contain;
        flex-shrink: 0;
        background: rgba(255, 255, 255, 0.07);
      }

      .cashier-bank-option-logo-fb {
        position: relative;
        width: 34px;
        height: 34px;
        border-radius: 7px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.6rem;
        font-weight: 800;
        color: #fff;
        flex-shrink: 0;
      }

      .cashier-bank-option-info {
        position: relative;
        flex: 1;
        min-width: 0;
      }

      .cashier-bank-option-label {
        display: block;
        font-size: 0.58rem;
        font-weight: 600;
        color: #475569;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        margin-bottom: 1px;
      }

      .cashier-bank-option-bname {
        font-size: 0.78rem;
        font-weight: 600;
        color: #0f172a;
      }

      .cashier-bank-option-number {
        font-size: 0.85rem;
        font-weight: 700;
        color: #0f172a;
        font-family: 'Courier New', monospace;
        letter-spacing: 1px;
      }

      .cashier-bank-radio {
        position: relative;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.22);
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: 0.18s;
      }

      .cashier-bank-option.selected .cashier-bank-radio {
        background: rgb(var(--gold, 250 204 21));
        border-color: rgb(var(--gold, 250 204 21));
      }

      .cashier-bank-option.selected .cashier-bank-radio::after {
        content: '';
        width: 4px;
        height: 8px;
        border-right: 2px solid #1a1000;
        border-bottom: 2px solid #1a1000;
        border-radius: 0;
        transform: rotate(45deg) translate(-1px, -2px);
      }

      /* ── History ── */
      .cashier-history-tabs {
        display: flex;
        gap: 8px;
        margin-bottom: 16px;
      }

      .cashier-history-btn {
        flex: 1;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 8px;
        color: rgba(255, 255, 255, 0.7);
        font-size: 0.8rem;
        font-weight: 600;
        padding: 8px 10px;
        cursor: pointer;
        transition: background 0.18s, color 0.18s, border-color 0.18s;
      }

      .cashier-history-btn:hover {
        color: rgb(var(--text-on-panel, 15 23 42));
        background: rgba(255, 255, 255, 0.08);
      }

      .cashier-history-btn.active {
        background: rgb(var(--cyan, 0 210 255) / 0.12);
        border-color: rgb(var(--cyan, 0 210 255) / 0.45);
        color: rgb(var(--cyan, 0 210 255));
      }

      .cashier-history-wrap {
        overflow-x: auto;
        border-radius: 10px;
        border: 1px solid rgba(255, 255, 255, 0.07);
      }

      .cashier-history-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.8rem;
      }

      .cashier-history-table thead th {
        background: rgba(255, 255, 255, 0.04);
        color: rgb(var(--text-on-panel, 15 23 42));
        font-weight: 600;
        text-align: left;
        padding: 9px 12px;
        white-space: nowrap;
        border-bottom: 1px solid rgba(255, 255, 255, 0.07);
      }

      .cashier-history-table tbody tr {
        border-bottom: 1px solid rgba(255, 255, 255, 0.04);
        transition: background 0.12s;
      }

      .cashier-history-table tbody tr:last-child {
        border-bottom: none;
      }

      .cashier-history-table tbody tr:hover {
        background: rgba(255, 255, 255, 0.03);
      }

      .cashier-history-table td {
        padding: 9px 12px;
        color: rgb(var(--text-on-panel, 15 23 42));
        white-space: nowrap;
      }

      .cashier-status-badge {
        font-size: 0.7rem;
        font-weight: 700;
        padding: 3px 8px;
        border-radius: 20px;
        white-space: nowrap;
      }

      .cashier-status-badge.ok {
        background: rgb(var(--success, 34 197 94) / 0.14);
        color: rgb(var(--text-on-panel, 15 23 42));
        border: 1px solid rgb(var(--success, 34 197 94) / 0.2);
      }

      .cashier-status-badge.fail {
        background: rgb(var(--danger, 239 68 68) / 0.12);
        color: rgb(var(--text-on-panel, 15 23 42));
        border: 1px solid rgb(var(--danger, 239 68 68) / 0.2);
      }

      .cashier-status-badge.pending {
        background: rgb(var(--gold, 250 204 21) / 0.12);
        color: rgb(var(--text-on-panel, 15 23 42));
        border: 1px solid rgb(var(--gold, 250 204 21) / 0.2);
      }

      .cashier-empty-row td {
        text-align: center;
        padding: 28px 12px;
        color: rgba(255, 255, 255, 0.3);
        font-size: 0.82rem;
      }

      /* Truemoney form */
      .cashier-tw-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 9px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
      }

      .cashier-tw-row:last-child {
        border-bottom: none;
      }

      .cashier-tw-label {
        font-size: 0.78rem;
        color: rgb(var(--text-dim, 148 163 184));
      }

      .cashier-tw-value {
        font-size: 0.88rem;
        font-weight: 700;
        color: rgb(var(--text-on-panel, 15 23 42));
      }

      /* Mobile tweaks */
      @media (max-width: 768px) {
        .cashier-channel-grid {
          grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        }

        .cashier-channel-card {
          padding: 10px 8px;
          gap: 8px;
        }

        .cashier-channel-name {
          font-size: 0.76rem;
        }

        .cashier-channel-min {
          font-size: 0.64rem;
        }

        .cashier-channel-icon {
          font-size: 1.3rem;
          width: 26px;
        }

        .cashier-balance-val {
          font-size: 1.2rem;
        }

        .cashier-history-table {
          font-size: 0.74rem;
        }

        .cashier-history-table thead th,
        .cashier-history-table td {
          padding: 7px 8px;
        }
        
        /* Bank info card stacking & text-wrap */
        .cashier-bank-info-row {
          flex-direction: column !important;
          align-items: center !important;
          text-align: center !important;
          gap: 8px !important;
        }
        .cashier-bank-info-detail,
        .cashier-bank-info-row > div {
          width: 100% !important;
          text-align: center !important;
        }
        .cashier-bank-info-name {
          word-break: break-word !important;
          white-space: normal !important;
        }
        
        /* Reduced padding for member account details & bank list item on mobile */
        .acc-row {
          padding-left: 8px !important;
          padding-right: 8px !important;
        }
        .acc-bank-item {
          padding-left: 8px !important;
          padding-right: 8px !important;
        }
      }

      @media (max-width: 425px) {
        .cashier-channel-grid {
          grid-template-columns: 1fr !important;
        }
      }

      /* ══════════════════════════════════════════════════
   Minigame Tab — Grid Cards
══════════════════════════════════════════════════ */
      .minigame-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
      }

      .minigame-card {
        background: rgb(var(--bg-04, 50 3 38));
        border: 1px solid rgb(var(--primary, 56 189 248) / 0.12);
        border-radius: 14px;
        overflow: hidden;
        transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
      }

      .minigame-card:hover {
        transform: scale(1.03);
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
        border-color: rgb(var(--primary, 56 189 248) / 0.45);
      }

      .minigame-card-link {
        display: flex;
        flex-direction: column;
        text-decoration: none;
        color: inherit;
        height: 100%;
      }

      .minigame-card-img-wrap {
        position: relative;
        overflow: hidden;
        aspect-ratio: 1 / 1;
        background: rgb(var(--bg-06, 6 11 25));
      }

      .minigame-card-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.35s ease;
      }

      .minigame-card:hover .minigame-card-img {
        transform: scale(1.07);
      }

      .minigame-card-overlay {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.25s ease;
      }

      .minigame-card:hover .minigame-card-overlay {
        opacity: 1;
      }

      .minigame-overlay-icon {
        color: #ffffff;
        font-size: 1.8rem;
        filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.6));
        transform: scale(0.8);
        transition: transform 0.25s ease;
      }

      .minigame-card:hover .minigame-overlay-icon {
        transform: scale(1);
      }

      .minigame-card-body {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 10px 12px;
        background: rgb(var(--bg-04, 50 3 38));
      }

      .minigame-card-name {
        font-size: 0.82rem;
        font-weight: 600;
        color: rgb(var(--text-on-panel, 15 23 42));
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 1;
      }

      .minigame-play-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #ffffff;
        color: #000000;
        border: 1px solid #cbd5e1;
        font-size: 0.72rem;
        font-weight: 800;
        padding: 4px 12px;
        border-radius: 20px;
        white-space: nowrap;
        flex-shrink: 0;
        transition: opacity 0.18s ease, transform 0.18s ease;
      }

      .minigame-card:hover .minigame-play-btn {
        opacity: 0.9;
        transform: scale(1.05);
      }

      /* desktop: 3 columns */
      @media (min-width: 769px) {
        .minigame-grid {
          grid-template-columns: repeat(3, 1fr);
        }
      }

      /* mobile bottom-sheet: 2 columns */
      @media (max-width: 768px) {
        .minigame-grid {
          grid-template-columns: repeat(2, 1fr);
          gap: 10px;
        }

        .minigame-card-body {
          padding: 7px 8px;
        }

        .minigame-card-name {
          font-size: 0.72rem;
        }

        .minigame-play-btn {
          font-size: 0.65rem;
          padding: 3px 9px;
        }
      }

      /* ══════════════════════════════════════════════════
   Cashback Tab
══════════════════════════════════════════════════ */

      /* Loading / Error */
      .cb-loading {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 40px 16px;
        color: var(--text-muted);
        font-size: 0.85rem;
      }

      .cb-loading i {
        font-size: 1.8rem;
        animation: spin 0.8s linear infinite;
      }

      .cb-error {
        display: flex;
        align-items: center;
        gap: 10px;
        background: rgb(var(--danger, 239 68 68) / 0.1);
        border: 1px solid rgb(var(--danger, 239 68 68) / 0.25);
        border-radius: 10px;
        padding: 12px 16px;
        color: rgb(var(--light-red, 254 242 242));
        font-size: 0.83rem;
      }

      .cb-error i {
        font-size: 1.1rem;
        flex-shrink: 0;
      }

      /* Deadline notice */
      .cb-notice {
        display: flex;
        align-items: center;
        gap: 8px;
        background: rgb(var(--gold, 250 204 21) / 0.07);
        border: 1px solid rgb(var(--gold, 250 204 21) / 0.18);
        border-radius: 8px;
        padding: 10px 14px;
        font-size: 0.8rem;
        color: rgb(var(--gold, 250 204 21) / 0.85);
        margin-bottom: 16px;
      }

      .cb-notice i {
        flex-shrink: 0;
      }

      /* Stats grid */
      .cb-stats-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-bottom: 14px;
      }

      .cb-stat-card {
        --text-muted: rgba(227, 242, 253, 0.7);
        --text-dim-4: 255 255 255;
        --light-green: 204 246 199;
        --light-red: 254 242 242;
        --light-gold: 254 243 205;
        background: rgb(var(--blue-deep-2, 13 71 161) / 0.94);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 12px;
        padding: 12px 14px;
        display: flex;
        flex-direction: column;
        gap: 2px;
      }

      .cb-stat-label {
        font-size: 0.72rem;
        color: var(--text-muted);
        font-weight: 500;
      }

      .cb-stat-value {
        font-size: 1.05rem;
        font-weight: 700;
        letter-spacing: 0.3px;
      }

      .cb-stat-value--white {
        color: rgb(var(--text-dim-4, 226 232 240));
      }

      .cb-stat-value--green {
        color: rgb(var(--light-green, 204 246 199));
      }

      .cb-stat-value--red {
        color: rgb(var(--light-red, 254 242 242));
      }

      .cb-stat-value--gold {
        color: rgb(var(--light-gold, 254 243 205));
      }

      .cb-stat-cur {
        font-size: 0.68rem;
        color: rgba(255, 255, 255, 0.3);
        font-weight: 400;
      }

      /* Cashback amount highlight */
      .cb-amount-card {
        background: rgb(var(--blue-deep-2, 13 71 161) / 0.94);
        border: 1px solid rgb(var(--primary, 56 189 248) / 0.28);
        border-radius: 14px;
        padding: 18px 20px;
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 14px;
      }

      /* --text-dim-4 ตกกลับไปใช้ค่า :root (227 242 253 — ฟ้าอ่อนอมขาว) เพราะ
   .cb-amount-card ไม่ได้ redefine ตัวแปรนี้เหมือน .cb-stat-card ข้างบน (ที่ตั้งเป็น
   255 255 255) ทำให้เนื้อหาดูจางกว่าการ์ดข้างเคียงบนพื้นหลังเข้มเดียวกัน — ตั้งสีตรงๆ
   ให้ตรงกับ .cb-stat-card แทน */
      .cb-amount-label {
        font-size: 0.8rem;
        color: rgba(255, 255, 255, 0.85);
        flex-shrink: 0;
      }

      .cb-amount-value {
        font-size: 1.6rem;
        font-weight: 800;
        color: #fff;
        letter-spacing: 0.5px;
        flex: 1;
        text-align: right;
      }

      .cb-amount-cur {
        font-size: 0.75rem;
        color: rgba(255, 255, 255, 0.85);
        font-weight: 500;
        align-self: flex-end;
        padding-bottom: 4px;
        flex-shrink: 0;
      }

      /* Empty state */
      .cb-empty {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 32px 16px;
        color: var(--text-muted);
        font-size: 0.83rem;
        text-align: center;
      }

      .cb-empty i {
        font-size: 2.2rem;
        opacity: 0.25;
      }

      /* Tier breakdown table */
      .cb-table-wrap {
        background: rgb(var(--blue-deep-2, 13 71 161) / 0.94);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 12px;
        overflow: hidden;
        margin-bottom: 14px;
      }

      .cb-table-scroll {
        overflow-x: auto;
      }

      .cb-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.78rem;
      }

      .cb-table thead th {
        background: rgba(255, 255, 255, 0.03);
        color: rgba(255, 255, 255, 0.85);
        font-weight: 600;
        padding: 8px 12px;
        text-align: left;
        white-space: nowrap;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
      }

      .cb-table tbody tr {
        border-bottom: 1px solid rgba(255, 255, 255, 0.04);
        transition: background 0.12s;
      }

      .cb-table tbody tr:last-child {
        border-bottom: none;
      }

      .cb-table tbody tr:hover {
        background: rgba(255, 255, 255, 0.03);
      }

      .cb-table td {
        padding: 8px 12px;
        color: #fff;
        white-space: nowrap;
      }

      .cb-table td:last-child {
        color: rgb(var(--light-green, 204 246 199));
        font-weight: 700;
        text-align: right;
      }

      /* Claim button */
      .cb-claim-btn {
        width: 100%;
        padding: 13px;
        background: linear-gradient(135deg, rgb(var(--blue-5, 37 99 235)), rgb(var(--blue-6, 28 78 216)));
        color: rgb(var(--text-on-accent, 255 255 255));
        font-size: 0.95rem;
        font-weight: 800;
        border: none;
        border-radius: 10px;
        box-shadow: 0 2px 12px rgb(var(--cyan-2, 255 130 200) / 0.3);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        transition: filter 0.18s, transform 0.15s;
        font-family: inherit;
      }

      .cb-claim-btn:hover:not(:disabled) {
        filter: brightness(1.08);
        transform: translateY(-1px);
      }

      .cb-claim-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
      }

      /* Claim result message */
      .cb-result {
        border-radius: 8px;
        padding: 10px 14px;
        font-size: 0.82rem;
        margin-top: 10px;
        text-align: center;
      }

      .cb-result.success {
        background: rgb(var(--success, 34 197 94) / 0.1);
        border: 1px solid rgb(var(--success, 34 197 94) / 0.22);
        color: rgb(var(--light-green, 204 246 199));
      }

      .cb-result.error {
        background: rgb(var(--danger, 239 68 68) / 0.1);
        border: 1px solid rgb(var(--danger, 239 68 68) / 0.25);
        color: rgb(var(--light-red, 254 242 242));
      }

      @media (max-width: 768px) {
        .cb-stats-grid {
          gap: 8px;
        }

        .cb-stat-card {
          padding: 10px 12px;
        }

        .cb-stat-value {
          font-size: 0.92rem;
        }

        .cb-amount-card {
          padding: 14px 16px;
        }

        .cb-amount-value {
          font-size: 1.3rem;
        }
      }

      /* ══════════════════════════════════════════════════
   Coupon Tab (.cp-*)
══════════════════════════════════════════════════ */

      /* Loading */
      .cp-loading {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 40px 16px;
        color: var(--text-muted);
        font-size: 0.9rem;
      }

      .cp-spinner {
        width: 32px;
        height: 32px;
        border: 3px solid rgba(255, 255, 255, 0.1);
        border-top-color: var(--accent);
        border-radius: 50%;
        animation: spin 0.7s linear infinite;
      }

      @keyframes spin {
        to {
          transform: rotate(360deg);
        }
      }

      /* Error */
      .cp-error {
        text-align: center;
        padding: 30px 16px;
        color: rgb(var(--light-red, 254 242 242));
        font-size: 0.88rem;
      }

      /* Search bar */
      .cp-search-wrap {
        display: flex;
        align-items: center;
        gap: 8px;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 10px;
        padding: 8px 12px;
        margin-bottom: 14px;
        color: var(--text-muted);
      }

      .cp-search-wrap input {
        flex: 1;
        background: transparent;
        border: none;
        outline: none;
        color: #fff;
        font-size: 0.88rem;
      }

      .cp-search-wrap input::placeholder {
        color: var(--text-muted);
      }

      /* Grid — 2 col ทุกขนาด */
      .cp-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-bottom: 14px;
      }

      /* ── Ticket Card (Shopee-style) ── */
      .cp-card {
        display: flex;
        flex-direction: row;
        border-radius: 10px;
        overflow: visible;
        box-shadow: 0 3px 14px rgba(0, 0, 0, 0.45);
        position: relative;
        transition: transform 0.18s ease, box-shadow 0.18s ease;
        min-height: 110px;
      }

      .cp-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
      }

      /*
  Serrated / scalloped left edge
  — repeating half-circles drawn with the modal background colour
    so they appear "punched out" of the card
*/
      .cp-card::before {
        content: '';
        position: absolute;
        left: -1px;
        top: 0;
        width: 11px;
        height: 100%;
        background:
          radial-gradient(circle at 0% 50%,
            var(--bg-base, rgb(var(--bg-15, 10 14 26))) 5px,
            transparent 5.5px);
        background-size: 11px 13px;
        background-repeat: repeat-y;
        z-index: 10;
        pointer-events: none;
        border-radius: 10px 0 0 10px;
      }

      /* Left panel — image */
      .cp-card-left {
        width: 34%;
        flex-shrink: 0;
        position: relative;
        background: rgb(var(--bg-11, 7 16 41));
        border-radius: 0;
        overflow: hidden;
        clip-path: polygon(0% 10px, 3px 3px, 10px 0%,
            calc(100% - 9px) 0%,
            calc(100% - 7.8px) 4.5px, calc(100% - 4.5px) 7.8px, 100% 9px,
            100% calc(100% - 9px),
            calc(100% - 4.5px) calc(100% - 7.8px), calc(100% - 7.8px) calc(100% - 4.5px), calc(100% - 9px) 100%,
            10px 100%, 3px calc(100% - 3px), 0% calc(100% - 10px));
      }

      .cp-card-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }

      /* Perforated divider — dashed line + two notch circles */
      .cp-card-divider {
        width: 1px;
        flex-shrink: 0;
        position: relative;
        background: transparent;
        /* dashed line drawn via repeating-linear-gradient */
        background-image: repeating-linear-gradient(to bottom,
            rgba(255, 255, 255, 0.18) 0px,
            rgba(255, 255, 255, 0.18) 6px,
            transparent 6px,
            transparent 11px);
        z-index: 1;
      }

      /* Notch circles removed — shape cut via clip-path on panels instead */
      .cp-card-divider::before,
      .cp-card-divider::after {
        content: none;
      }

      /* Right panel — details */
      .cp-card-body {
        flex: 1;
        padding: 12px 14px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 4px;
        background: rgb(var(--bg-26, 17 30 58));
        border-radius: 0;
        clip-path: polygon(9px 0%,
            7.8px 4.5px, 4.5px 7.8px, 0% 9px,
            0% calc(100% - 9px),
            4.5px calc(100% - 7.8px), 7.8px calc(100% - 4.5px), 9px 100%,
            calc(100% - 10px) 100%, calc(100% - 3px) calc(100% - 3px), 100% calc(100% - 10px),
            100% 10px, calc(100% - 3px) 3px, calc(100% - 10px) 0%);
      }

      .cp-card-title {
        font-size: 0.9rem;
        font-weight: 800;
        color: rgb(var(--text-on-panel, 15 23 42));
        line-height: 1.3;
      }

      .cp-card-detail {
        font-size: 0.74rem;
        color: var(--text-muted);
        line-height: 1.4;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }

      .cp-card-expire {
        font-size: 0.68rem;
        color: rgb(var(--text-dim, 148 163 184));
      }

      .cp-card-expire i {
        color: var(--accent);
        margin-right: 3px;
      }

      /* Card footer row */
      .cp-card-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-top: 7px;
        border-top: 1px solid rgba(255, 255, 255, 0.07);
        gap: 6px;
      }

      /* Condition link */
      .cp-cond-btn {
        font-size: 0.7rem;
        color: var(--text-muted);
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 4px;
        transition: color 0.15s;
      }

      .cp-cond-btn:hover {
        color: var(--accent);
      }

      /* Collect button */
      .cp-collect-btn {
        background: linear-gradient(135deg, rgb(var(--blue, 59 130 246)), rgb(var(--blue-deep, 30 64 175)));
        color: rgb(var(--text-on-accent, 255 255 255));
        border: none;
        border-radius: 8px;
        padding: 5px 14px;
        font-size: 0.78rem;
        font-weight: 700;
        cursor: pointer;
        transition: filter 0.15s, transform 0.15s;
      }

      .cp-collect-btn:hover:not(:disabled) {
        filter: brightness(1.15);
        transform: scale(1.04);
      }

      .cp-collect-btn:disabled {
        background: rgba(255, 255, 255, 0.12);
        color: var(--text-muted);
        cursor: default;
        transform: none;
      }

      .cp-collect-btn.collected {
        background: rgb(var(--success, 34 197 94) / 0.2);
        color: rgb(var(--success-pale, 134 239 172));
      }

      .cp-collect-btn.sold-out {
        background: rgba(255, 255, 255, 0.08);
        color: var(--text-muted);
      }

      /* Empty state */
      .cp-empty {
        grid-column: 1 / -1;
        text-align: center;
        padding: 36px 16px;
        color: var(--text-muted);
        font-size: 0.88rem;
      }

      /* Collect-all button */
      .cp-collect-all-btn {
        width: 100%;
        padding: 12px;
        background: linear-gradient(135deg, rgb(var(--blue-5, 37 99 235)), rgb(var(--blue-6, 28 78 216)));
        color: rgb(var(--text-on-accent, 255 255 255));
        border: none;
        border-radius: 10px;
        font-size: 0.88rem;
        font-weight: 800;
        box-shadow: 0 2px 12px rgb(var(--cyan-2, 255 130 200) / 0.3);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        transition: filter 0.15s;
        margin-bottom: 14px;
      }

      .cp-collect-all-btn:hover {
        filter: brightness(1.08);
      }

      .cp-collect-all-btn:disabled {
        opacity: 0.55;
        cursor: default;
      }

      /* Inline condition panel */
      .cp-condition-panel {
        position: relative;
        background: rgb(var(--bg-04, 50 3 38));
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 14px;
        padding: 16px 18px;
        margin-bottom: 14px;
        color: rgb(var(--text-on-panel, 15 23 42));
        font-size: 0.82rem;
        line-height: 1.6;
      }

      .cp-condition-close {
        position: absolute;
        top: 10px;
        right: 12px;
        background: none;
        border: none;
        color: var(--text-muted);
        font-size: 1rem;
        cursor: pointer;
      }

      .cp-condition-close:hover {
        color: rgb(var(--danger-light, 248 113 113));
      }

      .cp-condition-panel h6 {
        font-size: 0.82rem;
        font-weight: 700;
        color: var(--accent);
        margin-bottom: 8px;
      }

      .cp-condition-panel li {
        list-style: none;
        padding: 2px 0;
      }

      /* ── คูปองของฉัน: wallet button + badge ── */
      .cp-tab-title-row {
        justify-content: space-between;
      }

      .cp-tab-title-row>span {
        display: flex;
        align-items: center;
        gap: 10px;
      }

      .cp-wallet-btn {
        position: relative;
        flex-shrink: 0;
        /* เว้นขวาให้พ้นปุ่มปิด modal (.mem-close อยู่มุมขวาบน z-index 10) */
        margin-right: 38px;
        width: 40px;
        height: 40px;
        border: none;
        border-radius: 11px;
        background: linear-gradient(135deg, rgb(var(--blue-5, 37 99 235)), rgb(var(--blue-6, 28 78 216)));
        color: rgb(var(--text-on-accent, 255 255 255));
        font-size: 1.02rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 10px rgb(var(--cyan-2, 255 130 200) / 0.32);
        transition: filter 0.15s, transform 0.15s;
      }

      .cp-wallet-btn:hover {
        filter: brightness(1.08);
        transform: translateY(-1px);
      }

      .cp-wallet-btn i {
        color: #fff;
        font-size: 1.02rem;
      }

      .cp-wallet-badge {
        position: absolute;
        top: -6px;
        right: -6px;
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        border-radius: 9px;
        background: rgb(var(--danger-2, 220 38 38));
        color: #fff;
        font-size: 0.62rem;
        font-weight: 800;
        line-height: 18px;
        text-align: center;
        box-shadow: 0 0 0 2px rgb(var(--panel-01, 13 27 62));
      }

      /* ── คูปองของฉัน: wallet overlay (above member modal z-index 9000) ── */
      .cp-wallet-overlay {
        position: fixed;
        inset: 0;
        z-index: 9600;
        display: none;
        align-items: center;
        justify-content: center;
        background: rgba(0, 0, 0, 0.72);
        backdrop-filter: blur(3px);
        padding: 16px;
      }

      .cp-wallet-overlay.active {
        display: flex;
      }

      .cp-wallet-box {
        width: 100%;
        max-width: 440px;
        max-height: 82vh;
        display: flex;
        flex-direction: column;
        background: rgb(var(--bg-04, 50 3 38));
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 16px;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
        overflow: hidden;
        animation: numberPopIn 0.2s ease-out;
      }

      .cp-wallet-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-shrink: 0;
        padding: 14px 16px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      }

      .cp-wallet-head h3 {
        margin: 0;
        font-size: 0.96rem;
        font-weight: 700;
        color: rgb(var(--text-on-panel, 15 23 42));
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .cp-wallet-head h3 i {
        color: rgb(var(--primary, 56 189 248));
      }

      .cp-wallet-close {
        width: 30px;
        height: 30px;
        border: none;
        background: transparent;
        color: var(--text-muted);
        font-size: 1.4rem;
        line-height: 1;
        cursor: pointer;
        border-radius: 8px;
        transition: all 0.15s;
      }

      .cp-wallet-close:hover {
        color: rgb(var(--danger, 239 68 68));
        background: rgba(255, 255, 255, 0.08);
      }

      .cp-wallet-body {
        overflow-y: auto;
        padding: 14px 16px;
        flex: 1;
      }

      .cp-wallet-foot {
        flex-shrink: 0;
        padding: 12px 16px;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
      }

      .cp-wallet-close-btn {
        width: 100%;
        padding: 10px;
        border: none;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.08);
        color: rgb(var(--text-on-panel, 15 23 42));
        font-size: 0.86rem;
        font-weight: 700;
        cursor: pointer;
        font-family: inherit;
        transition: background 0.15s;
      }

      .cp-wallet-close-btn:hover {
        background: rgba(255, 255, 255, 0.14);
      }

      /* Wallet item */
      .cp-wallet-item {
        display: flex;
        gap: 12px;
        padding: 10px;
        margin-bottom: 10px;
        background: rgb(var(--bg-04, 50 3 38));
        border: 1px solid rgba(255, 255, 255, 0.07);
        border-radius: 12px;
      }

      .cp-wallet-item:last-child {
        margin-bottom: 0;
      }

      .cp-wallet-item-img {
        width: 64px;
        height: 64px;
        flex-shrink: 0;
        border-radius: 9px;
        background-size: cover;
        background-position: center;
        background-color: rgb(var(--bg-06, 6 11 25));
      }

      .cp-wallet-item-info {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 3px;
      }

      .cp-wallet-item-title {
        font-size: 0.82rem;
        font-weight: 700;
        color: rgb(var(--text-on-panel, 15 23 42));
      }

      .cp-wallet-item-code {
        font-size: 0.7rem;
        color: var(--text-muted);
      }

      .cp-wallet-item-code strong {
        color: rgb(var(--primary, 56 189 248));
        font-weight: 700;
      }

      .cp-wallet-item-expire {
        font-size: 0.68rem;
        color: rgb(var(--danger-light, 248 113 113));
      }

      .cp-wallet-empty {
        text-align: center;
        padding: 40px 16px;
        color: var(--text-muted);
        font-size: 0.86rem;
      }

      .rft-tabs {
        display: flex;
        background: rgb(var(--blue-deep-2, 13 71 161) / 0.94);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 10px;
        padding: 4px;
        margin-bottom: 14px;
        overflow-x: auto;
        scrollbar-width: none;
      }

      @media (max-width: 539px) {
        .cp-grid {
          grid-template-columns: 1fr;
          gap: 8px;
        }

        .cp-card {
          min-height: 80px;
        }

        .cp-card-left {
          width: 28%;
        }

        .cp-card-body {
          padding: 7px 8px;
          gap: 2px;
        }

        .cp-card-title {
          font-size: 0.68rem;
          line-height: 1.25;
        }

        .cp-card-detail {
          font-size: 0.6rem;
          -webkit-line-clamp: 2;
        }

        .cp-card-expire {
          font-size: 0.55rem;
        }

        .cp-card-footer {
          padding-top: 4px;
          gap: 4px;
        }

        .cp-collect-btn {
          padding: 3px 7px;
          font-size: 0.6rem;
          border-radius: 5px;
        }

        .cp-cond-btn {
          font-size: 0.55rem;
        }
      }

      /* ══════════════════════════════════════════════════
   Lottery Free Tab (.lf-*)
══════════════════════════════════════════════════ */

      /* Loading */
      .lf-loading {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 40px 16px;
        color: var(--text-muted);
        font-size: 0.9rem;
      }

      .lf-spinner {
        width: 32px;
        height: 32px;
        border: 3px solid rgba(255, 255, 255, 0.1);
        border-top-color: var(--accent);
        border-radius: 50%;
        animation: spin 0.7s linear infinite;
      }

      /* Error */
      .lf-error {
        text-align: center;
        padding: 30px 16px;
        color: rgb(var(--light-red, 254 242 242));
        font-size: 0.88rem;
      }

      /* Stat wrap */
      .lf-stat-wrap {
        margin-bottom: 18px;
        display: flex;
        flex-direction: column;
        gap: 10px;
      }

      .lf-stat-card {
        background: rgb(var(--bg-04, 50 3 38));
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 12px;
        padding: 14px 18px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3);
      }

      .lf-stat-label {
        font-size: 0.82rem;
        color: var(--text-muted);
        font-weight: 600;
      }

      .lf-stat-value {
        font-size: 1.15rem;
        font-weight: 800;
        color: rgb(var(--text-on-panel, 15 23 42));
      }

      /* Notice */
      .lf-notice {
        font-size: 0.75rem;
        color: rgb(var(--light-red, 254 242 242));
        background: rgb(var(--danger-light, 248 113 113) / 0.08);
        border: 1px solid rgb(var(--danger-light, 248 113 113) / 0.18);
        border-radius: 8px;
        padding: 8px 12px;
        margin: 0;
        display: flex;
        gap: 6px;
        align-items: flex-start;
        line-height: 1.5;
      }

      .lf-notice i {
        margin-top: 2px;
        flex-shrink: 0;
      }

      /* Grid */
      .lf-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
      }

      @media (min-width: 540px) {
        .lf-grid {
          grid-template-columns: repeat(2, 1fr);
        }
      }

      /* Lottery card */
      .lf-card {
        background: rgb(var(--bg-04, 50 3 38));
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
        display: flex;
        flex-direction: column;
        transition: transform 0.18s ease, box-shadow 0.18s ease;
      }

      .lf-card:hover {
        transform: scale(1.02);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
      }

      .lf-card-img {
        width: 100%;
        height: auto;
        aspect-ratio: auto;
        display: block;
      }

      .lf-card-body {
        padding: 10px 10px 12px;
      }

      /* Check-reward button */
      .lf-check-btn {
        width: 100%;
        background: rgb(var(--blue-5, 37 99 235));
        color: rgb(var(--text-on-accent, 255 255 255));
        border: none;
        border-radius: 8px;
        padding: 7px 10px;
        font-size: 0.78rem;
        font-weight: 700;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        transition: filter 0.15s, transform 0.15s;
      }

      .lf-check-btn:hover {
        filter: brightness(1.15);
        transform: scale(1.04);
      }

      .lf-check-btn:disabled {
        opacity: 0.5;
        cursor: default;
        transform: none;
      }

      /* Empty */
      .lf-empty {
        grid-column: 1 / -1;
        text-align: center;
        padding: 36px 16px;
        color: var(--text-muted);
        font-size: 0.88rem;
      }

      /* Inline result banner */
      .lf-result {
        margin-top: 14px;
        border-radius: 10px;
        padding: 14px 16px;
        font-size: 0.85rem;
        font-weight: 600;
        text-align: center;
        line-height: 1.5;
      }

      .lf-result.win {
        background: rgb(var(--success, 34 197 94) / 0.1);
        border: 1px solid rgb(var(--success, 34 197 94) / 0.22);
        color: rgb(var(--light-green, 204 246 199));
      }

      .lf-result.lose {
        background: rgb(var(--danger, 239 68 68) / 0.1);
        border: 1px solid rgb(var(--danger, 239 68 68) / 0.25);
        color: rgb(var(--light-red, 254 242 242));
      }

      /* Mobile tweaks */
      @media (max-width: 539px) {
        .lf-grid {
          grid-template-columns: 1fr;
          gap: 8px;
        }

        .lf-card-body {
          padding: 7px 8px 9px;
        }

        .lf-check-btn {
          font-size: 0.68rem;
          padding: 5px 7px;
        }

        .lf-stat-value {
          font-size: 0.95rem;
        }
      }

      /* ══════════════════════════════════════════════════
   Tutorial Tab (.tut-*)
══════════════════════════════════════════════════ */

      .tut-loading {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 40px 16px;
        color: var(--text-muted);
        font-size: 0.9rem;
      }

      .tut-spinner {
        width: 28px;
        height: 28px;
        border: 3px solid rgba(255, 255, 255, 0.1);
        border-top-color: var(--accent);
        border-radius: 50%;
        animation: spin 0.7s linear infinite;
      }

      .tut-error {
        text-align: center;
        padding: 30px 16px;
        color: rgb(var(--light-red, 254 242 242));
        font-size: 0.88rem;
      }

      /* Grid: 1 col mobile → 2 col ≥480px → 3 col ≥769px */
      .tut-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 14px;
      }

      @media (min-width: 480px) {
        .tut-grid {
          grid-template-columns: repeat(2, 1fr);
        }
      }

      @media (min-width: 769px) {
        .tut-grid {
          grid-template-columns: repeat(3, 1fr);
        }
      }

      /* Card */
      .tut-card {
        background: rgb(var(--bg-04, 50 3 38));
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
        transition: transform 0.18s ease, box-shadow 0.18s ease;
      }

      .tut-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
      }

      .tut-card-img {
        width: 100%;
        display: block;
        object-fit: cover;
        background: rgb(var(--bg-11, 7 16 41));
        border-radius: 12px;
      }

      /* Empty */
      .tut-empty {
        grid-column: 1 / -1;
        text-align: center;
        padding: 40px 16px;
        color: var(--text-muted);
        font-size: 0.88rem;
      }

      /* ══════════════════════════════════════════════════
   Refer (Affiliate) Tab (.rft-*)
══════════════════════════════════════════════════ */

      /* Loading / Error */
      .rft-loading {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 40px 16px;
        color: var(--text-muted);
        font-size: 0.9rem;
      }

      .rft-spinner {
        width: 28px;
        height: 28px;
        border: 3px solid rgba(255, 255, 255, 0.1);
        border-top-color: var(--accent);
        border-radius: 50%;
        animation: spin 0.7s linear infinite;
      }

      .rft-error {
        text-align: center;
        padding: 30px 16px;
        color: rgb(var(--light-red, 254 242 242));
        font-size: 0.88rem;
      }

      /* Sub-tab nav */
      .rft-tabs {
        display: flex;
        gap: 4px;
        background: rgb(var(--blue-deep-2, 13 71 161) / 0.94);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 10px;
        padding: 4px;
        margin-bottom: 14px;
        overflow-x: auto;
        scrollbar-width: none;
      }

      .rft-tabs::-webkit-scrollbar {
        display: none;
      }

      .rft-tab-btn {
        flex: 1 1 auto;
        white-space: nowrap;
        background: transparent;
        border: none;
        color: rgba(255, 255, 255, 0.75);
        font-size: 0.78rem;
        font-weight: 700;
        padding: 8px 10px;
        border-radius: 7px;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        transition: background 0.15s, color 0.15s;
      }

      .rft-tab-btn:hover {
        background: rgba(255, 255, 255, 0.07);
        color: #ffffff;
      }

      .rft-tab-btn.active {
        background: rgb(var(--bg-05, 63 6 25));
        color: rgb(var(--text-on-panel, 15 23 42));
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
      }

      /* refer-content toggle */
      .refer-content {
        display: none;
      }

      .refer-content.active {
        display: block;
      }

      /* Card */
      .rft-card {
        --text: 227 242 253;
        /* Light blue/white text for readability on dark background */
        --text-muted: rgba(227, 242, 253, 0.7);
        --text-bright: 255 255 255;
        --light-gold: 254 243 205;
        --light-green: 204 246 199;
        --light-red: 254 242 242;
        background: linear-gradient(135deg, rgb(var(--blue-deep-2, 13 71 161)) 0%, rgb(var(--blue-6, 21 101 192)) 100%);
        border: 1px solid rgb(var(--primary) / 0.3);
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
        margin-bottom: 12px;
      }

      .rft-card-head {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 12px 16px;
        font-size: 0.88rem;
        font-weight: 700;
        color: rgb(var(--text, 226 232 240));
        background: rgba(255, 255, 255, 0.04);
        border-bottom: 1px solid rgba(255, 255, 255, 0.07);
      }

      .rft-card-head i {
        color: var(--accent);
      }

      .rft-card-body {
        padding: 14px 16px;
        display: flex;
        flex-direction: column;
        gap: 10px;
      }

      /* KPI grid */
      .rft-kpi {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
      }

      @media (min-width: 480px) {
        .rft-kpi {
          grid-template-columns: repeat(3, 1fr);
        }
      }

      .rft-kpi-tile {
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.07);
        border-left: 3px solid var(--accent);
        border-radius: 8px;
        padding: 10px 12px;
        display: flex;
        flex-direction: column;
        gap: 3px;
        transition: transform 0.15s;
      }

      .rft-kpi-tile:hover {
        transform: translateY(-1px);
      }

      .rft-kpi-tile--gold {
        border-left-color: rgb(var(--gold-2, 245 200 66));
      }

      .rft-kpi-tile--green {
        border-left-color: rgb(var(--success, 34 197 94));
      }

      .rft-kpi-tile--blue {
        border-left-color: rgb(var(--blue, 59 130 246));
      }

      .rft-kpi-tile--red {
        border-left-color: rgb(var(--danger, 239 68 68));
      }

      .rft-kpi-tile--muted {
        border-left-color: rgba(255, 255, 255, 0.25);
      }

      .rft-kpi-label {
        font-size: 0.68rem;
        color: var(--text-muted);
        font-weight: 600;
      }

      .rft-kpi-value {
        font-size: 1.15rem;
        font-weight: 800;
        color: rgb(var(--text, 226 232 240));
        line-height: 1.2;
      }

      .rft-kpi-tile--gold .rft-kpi-value {
        color: rgb(var(--light-gold, 254 243 205));
      }

      .rft-kpi-tile--green .rft-kpi-value {
        color: rgb(var(--light-green, 204 246 199));
      }

      .rft-kpi-tile--blue .rft-kpi-value {
        color: rgb(var(--text-bright, 241 245 249));
      }

      .rft-kpi-tile--red .rft-kpi-value {
        color: rgb(var(--light-red, 254 242 242));
      }

      .rft-kpi-suffix {
        font-size: 0.78rem;
        color: var(--text-muted);
        font-weight: 600;
        margin-left: 3px;
      }

      /* Labels & Inputs */
      .rft-label {
        font-size: 0.78rem;
        font-weight: 700;
        color: var(--text-muted);
        margin-bottom: 4px;
        display: block;
      }

      .rft-textarea,
      .rft-input {
        width: 100%;
        background: rgba(255, 255, 255, 0.06);
        color: rgb(var(--text, 226 232 240));
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        padding: 9px 12px;
        font-size: 0.85rem;
        resize: none;
        font-family: inherit;
        box-sizing: border-box;
        transition: border-color 0.15s;
      }

      .rft-textarea:focus,
      .rft-input:focus {
        outline: none;
        border-color: rgb(var(--blue-4, 47 128 237));
      }

      .rft-field {
        display: flex;
        flex-direction: column;
        gap: 4px;
      }

      /* Input group */
      .rft-input-group {
        display: flex;
        align-items: stretch;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        overflow: hidden;
        background: rgba(255, 255, 255, 0.06);
      }

      .rft-input-prefix {
        display: inline-flex;
        align-items: center;
        padding: 0 10px;
        background: rgba(255, 255, 255, 0.08);
        color: rgb(var(--text-bright, 241 245 249));
        font-size: 0.78rem;
        font-weight: 700;
        white-space: nowrap;
        border-right: 1px solid rgba(255, 255, 255, 0.1);
      }

      .rft-input-group input {
        flex: 1;
        padding: 10px 12px;
        background: transparent;
        color: rgb(var(--text, 226 232 240));
        border: none;
        outline: none;
        font-size: 0.88rem;
      }

      .rft-input-suffix-btn {
        background: rgb(var(--blue-5, 37 99 235));
        color: rgb(var(--text-on-accent, 255 255 255));
        border: none;
        padding: 0 14px;
        font-size: 0.78rem;
        font-weight: 700;
        cursor: pointer;
        transition: filter 0.15s;
      }

      .rft-input-suffix-btn:hover {
        filter: brightness(1.12);
      }

      .rft-hint {
        font-size: 0.72rem;
        color: var(--text-muted);
      }

      /* Buttons */
      .rft-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 9px 16px;
        border-radius: 8px;
        font-size: 0.82rem;
        font-weight: 700;
        border: none;
        cursor: pointer;
        transition: filter 0.15s, transform 0.15s;
      }

      .rft-btn:hover:not(:disabled) {
        filter: brightness(1.12);
        transform: scale(1.02);
      }

      .rft-btn:disabled {
        opacity: 0.55;
        cursor: default;
        transform: none;
      }

      .rft-btn--blue {
        background: rgb(var(--cyan, 0 210 255));
        color: rgb(var(--bg-04, 4 8 20));
        box-shadow: 0 2px 10px rgb(var(--cyan, 0 210 255) / 0.28);
      }

      .rft-btn--green {
        background: rgb(var(--success, 34 197 94));
        color: rgb(var(--bg-04, 4 8 20));
        box-shadow: 0 2px 10px rgb(var(--success, 34 197 94) / 0.28);
      }

      .rft-btn--full {
        width: 100%;
      }

      /* Alert banners */
      .rft-alert {
        display: flex;
        gap: 10px;
        align-items: flex-start;
        padding: 10px 14px;
        border-radius: 8px;
        font-size: 0.78rem;
        line-height: 1.55;
        border: 1px solid transparent;
      }

      .rft-alert i {
        flex-shrink: 0;
        margin-top: 2px;
      }

      .rft-alert--danger {
        background: rgb(var(--danger, 239 68 68) / 0.08);
        border-color: rgb(var(--danger, 239 68 68) / 0.25);
        color: rgb(var(--text-bright, 241 245 249));
      }

      .rft-alert--danger i {
        color: rgb(var(--danger, 239 68 68));
      }

      .rft-alert--info {
        background: rgb(var(--blue, 59 130 246) / 0.08);
        border-color: rgb(var(--blue, 59 130 246) / 0.2);
        color: rgb(var(--text-bright, 241 245 249));
      }

      .rft-alert--info i {
        color: rgb(var(--blue-2, 96 165 250));
      }

      /* Balance display */
      .rft-balance {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        padding: 14px;
        background: rgba(255, 255, 255, 0.04);
        border-radius: 10px;
        border: 1px solid rgba(255, 255, 255, 0.08);
      }

      .rft-balance-label {
        font-size: 0.78rem;
        color: var(--text-muted);
        font-weight: 600;
      }

      .rft-balance-amount {
        font-size: 1.5rem;
        font-weight: 800;
        color: rgb(var(--light-green, 204 246 199));
      }

      /* Table */
      .rft-table-wrap {
        overflow-x: auto;
      }

      .rft-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.8rem;
      }

      .rft-table thead th {
        background: rgba(255, 255, 255, 0.06);
        color: var(--text-muted);
        font-size: 0.7rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        padding: 10px 14px;
        text-align: left;
        border-bottom: 2px solid rgba(255, 255, 255, 0.08);
        white-space: nowrap;
      }

      .rft-table tbody td {
        padding: 10px 14px;
        color: rgb(var(--text, 226 232 240));
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        vertical-align: middle;
      }

      .rft-table tbody tr:last-child td {
        border-bottom: none;
      }

      .rft-table tbody tr:hover td {
        background: rgb(var(--blue-4, 47 128 237) / 0.07);
      }

      .rft-gold {
        color: rgb(var(--light-gold, 254 243 205));
        font-weight: 700;
      }

      .rft-empty {
        text-align: center;
        padding: 28px 14px;
        color: var(--text-muted);
        font-size: 0.82rem;
      }

      /* Revenue total bar */
      .rft-total-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 16px;
        background: rgb(var(--success, 34 197 94) / 0.07);
        border-top: 1px solid rgb(var(--success, 34 197 94) / 0.2);
        font-size: 0.82rem;
        font-weight: 700;
        color: var(--text-muted);
      }

      .rft-total-val {
        color: rgb(var(--light-green, 204 246 199));
        font-size: 0.95rem;
      }

      /* Info list */
      .rft-list {
        margin: 0;
        padding-left: 1.2rem;
        line-height: 1.8;
        color: rgb(var(--text, 226 232 240));
        font-size: 0.82rem;
      }

      /* Filter row */
      .rft-filter-row {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: flex-end;
      }

      .rft-filter-row .rft-field {
        flex: 1 1 120px;
      }

      /* Withdraw result banner */
      .rft-result {
        border-radius: 8px;
        padding: 10px 14px;
        font-size: 0.82rem;
        font-weight: 600;
        text-align: center;
      }

      .rft-result.success {
        background: rgb(var(--success, 34 197 94) / 0.1);
        border: 1px solid rgb(var(--success, 34 197 94) / 0.22);
        color: rgb(var(--light-green, 204 246 199));
      }

      .rft-result.error {
        background: rgb(var(--danger, 239 68 68) / 0.1);
        border: 1px solid rgb(var(--danger, 239 68 68) / 0.25);
        color: rgb(var(--light-red, 254 242 242));
      }

      /* Pill badge for amounts */
      .rft-pill {
        display: inline-flex;
        align-items: center;
        padding: 2px 8px;
        border-radius: 50px;
        font-size: 0.75rem;
        font-weight: 700;
        background: rgb(var(--success, 34 197 94) / 0.15);
        color: rgb(var(--text-bright, 241 245 249));
      }

      .rft-pill--zero {
        background: rgba(255, 255, 255, 0.07);
        color: var(--text-muted);
      }

      .rft-pill--gold {
        background: rgb(var(--gold-2, 245 200 66) / 0.15);
        color: rgb(var(--text-bright, 241 245 249));
      }

      @media (max-width: 480px) {
        .rft-tab-btn {
          font-size: 0.68rem;
          padding: 6px 7px;
          gap: 3px;
        }

        .rft-tab-btn i {
          display: none;
        }

        .rft-kpi {
          grid-template-columns: repeat(2, 1fr);
        }

        .rft-kpi-value {
          font-size: 0.95rem;
        }

        .rft-balance-amount {
          font-size: 1.2rem;
        }
      }

      /* ══════════════════════════════════════════════════
   Statement Tab (.stmt-*) — dark-theme overrides
══════════════════════════════════════════════════ */

      /* Summary bar */
      .stmt-summary {
        display: flex;
        gap: 10px;
        margin-bottom: 14px;
      }

      .stmt-summary__card {
        flex: 1;
        background: rgb(var(--bg-04, 50 3 38));
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 12px;
        padding: 12px 14px;
        text-align: center;
        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3);
        position: relative;
        overflow: hidden;
      }

      .stmt-summary__card::before {
        content: '';
        position: absolute;
        inset: 0 0 auto 0;
        height: 3px;
        border-radius: 12px 12px 0 0;
      }

      .stmt-summary__card--deposit::before {
        background: rgb(var(--success, 34 197 94));
      }

      .stmt-summary__card--withdraw::before {
        background: rgb(var(--danger-light, 248 113 113));
      }

      .stmt-summary__label {
        font-size: 0.7rem;
        color: var(--text-muted);
        font-weight: 500;
        margin-bottom: 4px;
      }

      .stmt-summary__value {
        font-size: 1.05rem;
        font-weight: 800;
        letter-spacing: 0.02em;
      }

      .stmt-summary__card--deposit .stmt-summary__value {
        color: rgb(var(--light-green, 204 246 199));
      }

      .stmt-summary__card--withdraw .stmt-summary__value {
        color: rgb(var(--light-red, 254 242 242));
      }

      .stmt-summary__count {
        font-size: 0.68rem;
        color: var(--text-muted);
        margin-top: 2px;
      }

      /* Tab strip */
      .stmt-tabs {
        display: flex;
        gap: 4px;
        background: rgb(var(--blue-deep-2, 13 71 161) / 0.94);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 10px;
        padding: 4px;
        margin-bottom: 14px;
      }

      .stmt-tab {
        flex: 1;
        padding: 9px 12px;
        border: none;
        border-radius: 7px;
        font-size: 0.82rem;
        font-weight: 700;
        cursor: pointer;
        background: transparent;
        color: rgb(var(--text-dim-4, 203 213 225));
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        transition: background 0.15s, color 0.15s;
      }

      .stmt-tab:hover:not(.active) {
        background: rgba(255, 255, 255, 0.07);
        color: rgb(var(--text-dim-4, 226 232 240));
      }

      .stmt-tab.active {
        background: rgb(var(--bg-05, 63 6 25));
        color: rgb(var(--text-on-panel, 15 23 42));
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
      }

      .stmt-tab__badge {
        background: rgba(0, 0, 0, 0.25);
        border-radius: 50px;
        font-size: 0.68rem;
        padding: 1px 7px;
        font-weight: 700;
        display: none;
      }

      .stmt-tab.active .stmt-tab__badge {
        display: inline-block;
      }

      /* Transaction card */
      .stmt-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
      }

      .stmt-card {
        background: rgb(var(--bg-04, 50 3 38));
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 12px;
        padding: 12px 14px;
        display: flex;
        align-items: center;
        gap: 12px;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
        animation: stmtFadeIn 0.22s ease-out;
        transition: box-shadow 0.18s, border-color 0.18s;
      }

      @keyframes stmtFadeIn {
        from {
          opacity: 0;
          transform: translateY(5px);
        }

        to {
          opacity: 1;
          transform: none;
        }
      }

      .stmt-card:hover {
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
        border-color: rgb(var(--blue-4, 47 128 237) / 0.25);
      }

      /* Icon bubble */
      .stmt-card__icon {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.95rem;
        flex-shrink: 0;
      }

      .stmt-card__icon--deposit-success {
        background: rgb(var(--success, 34 197 94) / 0.15);
        color: rgb(var(--success, 34 197 94));
      }

      .stmt-card__icon--deposit-wait {
        background: rgb(var(--gold-deep, 234 179 8) / 0.15);
        color: rgb(var(--gold-deep, 234 179 8));
      }

      .stmt-card__icon--deposit-expired {
        background: rgb(var(--danger-light, 248 113 113) / 0.15);
        color: rgb(var(--danger-light, 248 113 113));
      }

      .stmt-card__icon--withdraw-success {
        background: rgb(var(--success, 34 197 94) / 0.15);
        color: rgb(var(--success, 34 197 94));
      }

      .stmt-card__icon--withdraw-wait {
        background: rgb(var(--gold-deep, 234 179 8) / 0.15);
        color: rgb(var(--gold-deep, 234 179 8));
      }

      .stmt-card__icon--withdraw-fail {
        background: rgb(var(--danger-light, 248 113 113) / 0.15);
        color: rgb(var(--danger-light, 248 113 113));
      }

      /* Body */
      .stmt-card__body {
        flex: 1;
        min-width: 0;
      }

      .stmt-card__title {
        font-size: 0.88rem;
        font-weight: 700;
        color: rgb(var(--text-on-panel, 15 23 42));
        display: flex;
        align-items: center;
        gap: 7px;
        flex-wrap: wrap;
      }

      .stmt-card__time {
        font-size: 0.72rem;
        color: var(--text-muted);
        margin-top: 3px;
      }

      /* Status badge */
      .stmt-badge {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: 0.68rem;
        font-weight: 600;
        padding: 2px 8px;
        border-radius: 50px;
      }

      .stmt-badge--success {
        background: rgb(var(--success, 34 197 94) / 0.15);
        color: rgb(var(--text-on-panel, 15 23 42));
      }

      .stmt-badge--wait {
        background: rgb(var(--gold-deep, 234 179 8) / 0.15);
        color: rgb(var(--text-on-panel, 15 23 42));
      }

      .stmt-badge--expired,
      .stmt-badge--fail {
        background: rgb(var(--danger-light, 248 113 113) / 0.15);
        color: rgb(var(--text-on-panel, 15 23 42));
      }

      /* Amount pill */
      .stmt-card__amount {
        text-align: right;
        flex-shrink: 0;
      }

      .stmt-amount-pill {
        display: inline-flex;
        align-items: baseline;
        gap: 3px;
        font-size: 0.8rem;
        font-weight: 700;
        padding: 4px 12px;
        border-radius: 50px;
        border: 1px solid transparent;
      }

      .stmt-amount-pill--success {
        background: rgb(var(--success, 34 197 94) / 0.1);
        color: rgb(var(--text-on-panel, 15 23 42));
        border-color: rgb(var(--success, 34 197 94) / 0.2);
      }

      .stmt-amount-pill--wait {
        background: rgb(var(--gold-deep, 234 179 8) / 0.1);
        color: rgb(var(--text-on-panel, 15 23 42));
        border-color: rgb(var(--gold-deep, 234 179 8) / 0.25);
      }

      .stmt-amount-pill--expired,
      .stmt-amount-pill--fail {
        background: rgb(var(--danger-light, 248 113 113) / 0.1);
        color: rgb(var(--text-on-panel, 15 23 42));
        border-color: rgb(var(--danger-light, 248 113 113) / 0.2);
      }

      .stmt-amount-pill__unit {
        font-size: 0.65rem;
        font-weight: 500;
      }

      /* Skeleton */
      .stmt-skeleton__card {
        background: rgb(var(--bg-04, 50 3 38));
        border: 1px solid rgba(255, 255, 255, 0.07);
        border-radius: 12px;
        padding: 12px 14px;
        display: flex;
        align-items: center;
        gap: 12px;
      }

      .stmt-skeleton__circle {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        flex-shrink: 0;
      }

      .stmt-skeleton__lines {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 8px;
      }

      .stmt-skeleton__line {
        border-radius: 6px;
        height: 12px;
      }

      .stmt-skeleton__line--short {
        width: 55%;
      }

      .stmt-skeleton__line--xshort {
        width: 35%;
      }

      .stmt-skeleton__pill {
        width: 68px;
        height: 30px;
        border-radius: 50px;
      }

      @keyframes shimmer {
        0% {
          background-position: -400px 0;
        }

        100% {
          background-position: 400px 0;
        }
      }

      .stmt-skeleton__circle,
      .stmt-skeleton__line,
      .stmt-skeleton__pill {
        background: linear-gradient(90deg,
            rgba(255, 255, 255, 0.05) 25%,
            rgba(255, 255, 255, 0.12) 50%,
            rgba(255, 255, 255, 0.05) 75%);
        background-size: 800px 100%;
        animation: shimmer 1.4s infinite;
      }

      /* Empty state */
      .stmt-empty {
        text-align: center;
        padding: 40px 16px;
        color: var(--text-muted);
      }

      .stmt-empty__icon {
        font-size: 2.5rem;
        opacity: 0.3;
        margin-bottom: 10px;
      }

      .stmt-empty__text {
        font-size: 0.88rem;
        font-weight: 500;
        margin: 0;
      }

      /* Error state */
      .stmt-error {
        background: rgb(var(--danger, 239 68 68) / 0.07);
        border: 1px solid rgb(var(--danger, 239 68 68) / 0.2);
        border-radius: 12px;
        padding: 28px 16px;
        text-align: center;
      }

      .stmt-error__icon {
        font-size: 1.8rem;
        color: rgb(var(--danger-light, 248 113 113));
        margin-bottom: 8px;
      }

      .stmt-error__text {
        font-size: 0.85rem;
        color: rgb(var(--danger-light, 248 113 113));
        font-weight: 600;
        margin-bottom: 12px;
      }

      .stmt-error__retry {
        background: rgb(var(--danger-light, 248 113 113));
        color: #fff;
        border: none;
        border-radius: 8px;
        padding: 8px 20px;
        font-size: 0.82rem;
        font-weight: 700;
        cursor: pointer;
        transition: filter 0.15s;
      }

      .stmt-error__retry:hover {
        filter: brightness(1.1);
      }

      @media (max-width: 480px) {
        .stmt-card {
          padding: 10px 12px;
          gap: 10px;
        }

        .stmt-card__title {
          font-size: 0.8rem;
        }

        .stmt-amount-pill {
          font-size: 0.72rem;
          padding: 3px 9px;
        }

        .stmt-summary__value {
          font-size: 0.92rem;
        }

        .stmt-tab {
          font-size: 0.75rem;
          padding: 7px 8px;
        }
      }

      /* ══════════════════════════════════════════════════
   Install App + Notify Tabs (.pwa-*)
══════════════════════════════════════════════════ */

      .pwa-card {
        background: rgb(var(--bg-04, 50 3 38));
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 14px;
        padding: 28px 22px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 12px;
        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
      }

      .pwa-icon {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.6rem;
      }

      .pwa-icon--blue {
        background: rgb(var(--blue-4, 47 128 237) / 0.15);
        color: rgb(var(--blue-2, 96 165 250));
      }

      .pwa-icon--green {
        background: rgb(var(--success, 34 197 94) / 0.15);
        color: rgb(var(--success, 34 197 94));
      }

      .pwa-icon--red {
        background: rgb(var(--danger-light, 248 113 113) / 0.15);
        color: rgb(var(--danger-light, 248 113 113));
      }

      .pwa-icon--silver {
        background: rgba(255, 255, 255, 0.08);
        color: rgb(var(--slate, 107 114 128));
      }

      .pwa-icon--muted {
        background: rgba(255, 255, 255, 0.06);
        color: var(--text-muted);
      }

      .pwa-card-title {
        font-size: 1rem;
        font-weight: 800;
        color: rgb(var(--text-on-panel, 15 23 42));
      }

      .pwa-card-desc {
        font-size: 0.83rem;
        color: var(--text-muted);
        line-height: 1.6;
        margin: 0;
      }

      .pwa-card-desc strong {
        color: rgb(var(--text-on-panel, 15 23 42));
      }

      /* iOS steps list */
      .pwa-steps {
        list-style: none;
        padding: 0;
        margin: 0;
        width: 100%;
        text-align: left;
        display: flex;
        flex-direction: column;
        gap: 10px;
      }

      .pwa-steps li {
        display: flex;
        align-items: center;
        gap: 10px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.07);
        border-radius: 10px;
        padding: 10px 14px;
        font-size: 0.82rem;
        color: rgb(var(--text-on-panel, 15 23 42));
        counter-increment: step;
      }

      .pwa-steps li i {
        font-size: 1rem;
        color: rgb(var(--blue-2, 96 165 250));
        flex-shrink: 0;
        width: 18px;
        text-align: center;
      }

      /* CTA button */
      .pwa-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 12px 28px;
        border: none;
        border-radius: 10px;
        font-size: 0.9rem;
        font-weight: 700;
        cursor: pointer;
        transition: filter 0.15s, transform 0.15s;
        min-width: 180px;
      }

      .pwa-btn:hover:not(:disabled) {
        filter: brightness(1.12);
        transform: scale(1.03);
      }

      .pwa-btn:disabled {
        opacity: 0.55;
        cursor: default;
        transform: none;
      }

      .pwa-btn--blue {
        background: rgb(var(--cyan, 0 210 255));
        color: rgb(var(--bg-04, 4 8 20));
        box-shadow: 0 2px 10px rgb(var(--cyan, 0 210 255) / 0.28);
      }

      /* Result banner inside notify card */
      .pwa-result {
        width: 100%;
        border-radius: 8px;
        padding: 10px 14px;
        font-size: 0.82rem;
        font-weight: 600;
        text-align: center;
      }

      .pwa-result.success {
        background: rgb(var(--success, 34 197 94) / 0.1);
        border: 1px solid rgb(var(--success, 34 197 94) / 0.22);
        color: rgb(var(--light-green, 204 246 199));
      }

      .pwa-result.error {
        background: rgb(var(--danger, 239 68 68) / 0.1);
        border: 1px solid rgb(var(--danger, 239 68 68) / 0.25);
        color: rgb(var(--light-red, 254 242 242));
      }

      /* ══════════════════════════════════════════════════════════════
   MINIGAME PLAY PAGE  (.mg-*)
   หน้าเล่นเกม /member/games/huakoy, /hilo, /paoyingchub
   ══════════════════════════════════════════════════════════════ */

      /* Page wrapper */
      .mg-page {
        max-width: 540px;
        margin: 0 auto;
        padding: 12px 16px 32px;
      }

      /* Back bar */
      .mg-back-bar {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 0 14px;
      }

      .mg-back-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: rgb(var(--bg-04, 4 8 20));
        color: rgb(var(--slate, 107 114 128));
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        padding: 6px 14px;
        font-size: 0.88rem;
        font-weight: 600;
        cursor: pointer;
        text-decoration: none;
        transition: background 0.18s;
      }

      .mg-back-btn:hover {
        background: rgb(var(--bg-05, 4 18 29));
        color: rgb(var(--text-on-panel, 15 23 42));
      }

      .mg-page-title {
        font-size: 1.05rem;
        font-weight: 700;
        color: rgb(var(--text, 226 232 240));
      }

      /* Card wrapper */
      .mg-card {
        background: rgb(var(--bg-04, 4 8 20));
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 16px;
        overflow: hidden;
      }

      /* Tab navigation */
      .mg-tabs {
        display: flex;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      }

      .mg-tab-btn {
        flex: 1;
        padding: 12px 8px;
        background: transparent;
        border: none;
        color: rgb(var(--text-dim, 148 163 184));
        font-size: 0.88rem;
        font-weight: 600;
        cursor: pointer;
        transition: color 0.18s, border-bottom 0.18s;
        border-bottom: 2px solid transparent;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
      }

      .mg-tab-btn.active {
        color: rgb(var(--blue, 59 130 246));
        border-bottom-color: rgb(var(--blue, 59 130 246));
        background: rgb(var(--blue, 59 130 246) / 0.12);
      }

      .mg-tab-btn:hover:not(.active) {
        color: rgb(var(--slate, 107 114 128));
      }

      /* Tab panes */
      .mg-pane {
        display: none;
        padding: 20px 16px;
      }

      .mg-pane.active {
        display: block;
      }

      /* Section label */
      .mg-section-label {
        font-size: 0.82rem;
        font-weight: 600;
        color: rgb(var(--slate, 107 114 128));
        text-transform: uppercase;
        letter-spacing: 0.04em;
        margin-bottom: 10px;
      }

      /* Bet rate selectors */
      .mg-rates {
        display: flex;
        gap: 8px;
        margin-bottom: 22px;
      }

      .mg-rate-group {
        flex: 1;
      }

      .mg-rate-label {
        display: block;
        font-size: 0.7rem;
        font-weight: 600;
        color: rgb(var(--text-dim, 148 163 184));
        margin-bottom: 4px;
        text-align: center;
      }

      .mg-rate-select {
        width: 100%;
        padding: 7px 6px;
        background: rgb(var(--bg-03, 2 6 16));
        color: rgb(var(--text-on-panel, 15 23 42));
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 8px;
        font-size: 0.82rem;
        appearance: none;
        text-align: center;
        cursor: pointer;
      }

      .mg-rate-select:focus {
        outline: none;
        border-color: rgb(var(--blue, 59 130 246) / 0.5);
      }

      .mg-rate-select option {
        background: rgb(var(--bg-03, 2 6 16));
      }

      /* Game choice grid */
      .mg-choices {
        display: grid;
        gap: 12px;
        margin-bottom: 20px;
      }

      .mg-choices-2 {
        grid-template-columns: repeat(2, 1fr);
      }

      .mg-choices-3 {
        grid-template-columns: repeat(3, 1fr);
      }

      .mg-choice {
        cursor: pointer;
        border-radius: 14px;
        border: 2px solid rgba(255, 255, 255, 0.1);
        background: rgb(var(--bg-05, 4 18 29));
        transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
        overflow: hidden;
        user-select: none;
      }

      .mg-choice:hover {
        border-color: rgba(255, 255, 255, 0.25);
        transform: scale(1.03);
      }

      .mg-choice.selected {
        border-color: rgb(var(--blue, 59 130 246));
        box-shadow: 0 0 0 3px rgb(var(--blue, 59 130 246) / 0.25);
        transform: scale(1.04);
      }

      .mg-choice-img-wrap {
        padding: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgb(var(--bg-04, 4 8 20));
      }

      .mg-choice img {
        width: 100%;
        max-width: 90px;
        aspect-ratio: 1/1;
        object-fit: contain;
        display: block;
        transition: transform 0.25s;
      }

      .mg-choice.selected img {
        transform: scale(1.08);
      }

      .mg-choice-label {
        text-align: center;
        font-size: 0.8rem;
        font-weight: 600;
        color: rgb(var(--slate, 107 114 128));
        padding: 7px 4px 9px;
        transition: background 0.2s, color 0.2s;
      }

      .mg-choice.selected .mg-choice-label {
        background: rgb(var(--blue, 59 130 246));
        color: rgb(var(--text-on-accent, 255 255 255));
      }

      /* Bet button */
      .mg-bet-btn {
        width: 100%;
        padding: 13px;
        background: linear-gradient(135deg, rgb(var(--blue, 59 130 246)), rgb(var(--blue-deep, 30 64 175)));
        color: rgb(var(--text-on-accent, 255 255 255));
        border: none;
        border-radius: 10px;
        font-size: 1rem;
        font-weight: 700;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        transition: filter 0.18s, transform 0.15s;
        margin-top: 4px;
      }

      .mg-bet-btn:hover {
        filter: brightness(1.1);
      }

      .mg-bet-btn:active {
        transform: scale(0.98);
      }

      .mg-bet-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
        filter: none;
      }

      /* Spinner */
      .mg-spinner {
        display: none;
        text-align: center;
        padding: 16px 0 4px;
      }

      .mg-spinner img {
        width: 72px;
      }

      .mg-spinner.visible {
        display: block;
      }

      /* History section */
      .mg-history-header {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 0.9rem;
        font-weight: 700;
        color: rgb(var(--text-on-panel, 15 23 42));
        padding-bottom: 12px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.07);
        margin-bottom: 14px;
      }

      .mg-history-header i {
        color: rgb(var(--blue-2, 96 165 250));
      }

      /* History table */
      .mg-table-wrap {
        overflow-x: auto;
      }

      .mg-history-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.8rem;
        white-space: nowrap;
      }

      .mg-history-table th {
        padding: 8px 10px;
        color: rgb(var(--slate, 107 114 128));
        font-weight: 600;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        text-align: left;
      }

      .mg-history-table td {
        padding: 9px 10px;
        color: rgb(var(--slate, 107 114 128));
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
      }

      .mg-history-table tr:last-child td {
        border-bottom: none;
      }

      .mg-history-table tr:hover td {
        background: rgba(255, 255, 255, 0.03);
      }

      /* Result badges */
      .mg-badge {
        display: inline-block;
        border-radius: 20px;
        padding: 3px 10px;
        font-size: 0.72rem;
        font-weight: 700;
      }

      .mg-badge-win {
        background: rgb(var(--success, 34 197 94) / 0.15);
        color: rgb(var(--text-on-panel, 15 23 42));
      }

      .mg-badge-lose {
        background: rgb(var(--danger, 239 68 68) / 0.15);
        color: rgb(var(--text-on-panel, 15 23 42));
      }

      .mg-badge-draw {
        background: rgba(255, 255, 255, 0.08);
        color: rgb(var(--text-on-panel, 15 23 42));
      }

      /* Empty / loading state */
      .mg-empty {
        text-align: center;
        padding: 28px 0;
        color: rgb(var(--text-dim, 148 163 184));
        font-size: 0.85rem;
      }

      /* Status banner — แสดงเมื่อแอดมินปิดเกม (getgamestatus !== '1') */
      .mg-status-banner {
        display: flex;
        align-items: center;
        gap: 8px;
        background: rgb(var(--gold, 250 204 21) / 0.12);
        color: rgb(var(--gold, 250 204 21));
        border: 1px solid rgb(var(--gold, 250 204 21) / 0.3);
        border-radius: 10px;
        padding: 10px 14px;
        font-size: 0.85rem;
        font-weight: 600;
        margin-bottom: 18px;
      }

      .mg-status-banner[hidden] {
        display: none;
      }

      /* Mobile fine-tune */
      @media (max-width: 480px) {
        .mg-page {
          padding: 8px 12px 24px;
        }

        .mg-choice-img-wrap {
          padding: 10px;
        }

        .mg-choice img {
          max-width: 70px;
        }

        .mg-choice-label {
          font-size: 0.72rem;
          padding: 5px 2px 7px;
        }

        .mg-history-table {
          font-size: 0.75rem;
        }
      }

      /* Desktop scale-up — หน้าจอใหญ่ให้กว้างและองค์ประกอบใหญ่ขึ้น */
      @media (min-width: 768px) {
        .mg-page {
          max-width: 820px;
          padding: 20px 24px 48px;
        }

        .mg-page-title {
          font-size: 1.3rem;
        }

        .mg-back-btn {
          font-size: 0.95rem;
          padding: 8px 18px;
        }

        .mg-tab-btn {
          padding: 16px 10px;
          font-size: 1rem;
        }

        .mg-pane {
          padding: 32px 36px;
        }

        .mg-section-label {
          font-size: 0.92rem;
          margin-bottom: 14px;
        }

        .mg-rates {
          gap: 14px;
          margin-bottom: 30px;
        }

        .mg-rate-label {
          font-size: 0.8rem;
        }

        .mg-rate-select {
          padding: 10px 8px;
          font-size: 0.95rem;
        }

        .mg-choices {
          gap: 20px;
          margin-bottom: 28px;
          max-width: 600px;
          margin-left: auto;
          margin-right: auto;
        }

        .mg-choice-img-wrap {
          padding: 26px;
        }

        .mg-choice img {
          max-width: 150px;
        }

        .mg-choice-label {
          font-size: 0.98rem;
          padding: 10px 4px 14px;
        }

        .mg-bet-btn {
          padding: 16px;
          font-size: 1.12rem;
          max-width: 420px;
          margin-left: auto;
          margin-right: auto;
        }

        .mg-spinner img {
          width: 90px;
        }

        .mg-history-header {
          font-size: 1.02rem;
        }

        .mg-history-table {
          font-size: 0.9rem;
        }

        .mg-history-table th {
          padding: 11px 14px;
        }

        .mg-history-table td {
          padding: 12px 14px;
        }
      }

      /* ══════════════════════════════════════════════════════════════
   เลขชุด (.nset-*) — โครงหน้าใช้ร่วมกันระหว่าง
   pages/member/numbersets.ejs และ numbersets-add.ejs
   (สไตล์เฉพาะหน้า เช่น ตาราง/ฟอร์ม อยู่ใน <style> ของหน้านั้นๆ)
   ══════════════════════════════════════════════════════════════ */
      /* สูงพอดีจอ: 100vh − header 70px − padding content-container (~50px) — การ์ดยืดเต็มส่วนที่เหลือ */
      .nset-page {
        max-width: 760px;
        margin: 0 auto;
        padding: 14px 12px 40px;
        display: flex;
        flex-direction: column;
        min-height: calc(100vh - 120px);
      }

      .nset-page--narrow {
        max-width: 640px;
      }

      .nset-page>.nset-card {
        flex: 1;
      }

      @media (max-width: 992px) {

        /* mobile: หัก header sticky (--mobile-header-offset) + bottom-nav 75px */
        .nset-page {
          min-height: calc(100vh - var(--mobile-header-offset, 130px) - 100px);
        }
      }

      .nset-back-bar {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 12px;
      }

      .nset-back-btn {
        background: rgb(var(--bg-04, 4 8 20));
        border: 1px solid rgba(255, 255, 255, 0.1);
        color: rgb(var(--text-on-panel, 15 23 42));
        border-radius: 8px;
        padding: 8px 14px;
        font-size: 0.85rem;
        font-weight: 600;
        cursor: pointer;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        transition: border-color 0.18s, color 0.18s;
      }

      .nset-back-btn:hover {
        border-color: rgb(var(--cyan, 0 210 255) / 0.5);
        color: var(--accent-on-card, rgb(var(--cyan, 0 210 255)));
      }

      .nset-page-title {
        font-weight: 700;
        font-size: 1.02rem;
        color: rgb(var(--text, 226 232 240));
      }

      .nset-card {
        background: rgb(var(--bg-04, 4 8 20));
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 14px;
        padding: 14px;
        box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
      }

      /* ══════════════════════════════════════════════════════════════
   Palette Switcher — ty4-palette (ty-demotheme4-test only)
   z-index 1100: above hdr-dropdown (1000), below modals (9000)
   ══════════════════════════════════════════════════════════════ */
      /* ━━ Lucky Draw Widget — Pink Theme Overrides ━━━━━━━━━━━━━━━━━━━━━━━ */

      #luckyDrawFloatingGroup {
        display: none !important;
      }

      /* ── Recolor the lucky-draw modal navy → pink theme ──────────────────
   The widget hardcodes navy surfaces (its --ldx-navy/panel vars are unused),
   and its <style> loads AFTER index.css, so overrides must beat it by
   specificity. `#luckyDrawModal …` (id) outranks the widget's class rules,
   so these win regardless of source order. Gold accent is kept. Surfaces
   map to the theme's own bg/gold tokens, so the modal tracks the theme. */

      /* Backdrop dimmer (was rgba(2,6,23,.82)). Use the background-color longhand
   with a literal value — a `background` shorthand + var() + !important gets
   dropped by the parser as a pending-substitution shorthand. */
      #luckyDrawModal {
        background-color: rgba(6, 11, 25, 0.86) !important;
      }

      /* Main dialog panel (was linear-gradient(#111b31,#060d1c) + blue glow) */
      #luckyDrawModal .ldx-shell {
        background:
          radial-gradient(circle at 50% -10%, rgba(0, 210, 255, 0.45), transparent 40%),
          linear-gradient(145deg, rgb(10, 102, 194), rgb(6, 11, 25) 74%) !important;
        border-color: rgba(var(--gold, 250 204 21) / 0.28) !important;
      }

      /* Reward popup: its own dim layer (was rgba(2,6,23,.78)) + the prize card */
      #luckyDrawModal .ldx-result {
        background-color: rgba(6, 11, 25, 0.8) !important;
      }

      #luckyDrawModal .ldx-result-card {
        background: linear-gradient(145deg, rgb(10, 102, 194), rgb(6, 11, 25) 80%) !important;
      }

      /* Check-in card defaults (backend theme_config may still override per campaign) */
      #luckyDrawModal .ldx-checkin-card {
        --ci-bg-start: rgb(10, 102, 194);
        --ci-bg-end: rgb(6, 11, 25);
        --ci-accent: rgb(var(--gold, 250 204 21));
      }

      /* Intro line for the กิจกรรมพิเศษ tab inside the member modal */
      .mem-ld-intro {
        font-size: 12px;
        line-height: 1.5;
        color: var(--text-muted);
        margin: -4px 0 16px;
      }

      /* โคลนอ่านอย่างเดียวของ #luckyDrawModalTitle (โมดัลใหญ่) — sync ผ่าน MutationObserver
   ใน member.ejs ไม่ใช่ element เดียวกับของจริง จึงไม่กระทบ header ของโมดัลใหญ่ */
      .mem-ld-title-mirror {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 13px;
        font-weight: 700;
        /* text-bright แทน --gold ตรงๆ: gold-on-gold-tint วัดจริงได้แค่ 4.06:1 (ไม่ผ่าน AA) —
     พื้น tint ทองยังคงอยู่ (สื่อความหมาย "รางวัล/พิเศษ" ผ่าน background) แค่ตัวหนังสือ
     ใช้สีสว่างแทนให้อ่านชัด (ผ่านทุก background context: 5.4-6.6:1) */
        color: rgb(var(--text-bright, 241 245 249));
        background: rgb(var(--gold, 250 204 21) / 0.08);
        border: 1px solid rgb(var(--gold, 250 204 21) / 0.25);
        border-radius: 8px;
        padding: 8px 12px;
        margin: -6px 0 14px;
      }

      /* ── โปรโมชั่น / เครดิตที่ถอนได้ (CreditPromo) — พอร์ตจาก web3's
   bx-theme-v2-no2/pages/member/promotion.ejs ปรับ token ให้ตรงกับธีมนี้ ── */
      .mem-ld-section-label {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 0.72rem;
        font-weight: 800;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        /* --gold ตรงๆ บนพื้น body วัดจริงได้ 4.31:1 (ไม่ผ่าน AA เพราะ label เล็ก ไม่เข้าเกณฑ์ large-text) */
        color: rgb(var(--text-dim-4, 255 214 234));
        margin: 18px 0 10px;
        padding-bottom: 8px;
        border-bottom: 1px solid rgb(var(--gold, 250 204 21) / 0.25);
      }

      .credit-promo-loading,
      .credit-promo-empty {
        text-align: center;
        padding: 22px 12px;
        font-size: 0.85rem;
        color: rgb(var(--text-dim-4, 255 214 234));
      }

      .credit-promo-card {
        background: rgb(var(--bg-04, 50 3 38));
        border: 1px solid rgb(var(--panel-12, 124 7 94) / 0.4);
        border-radius: 10px;
        padding: 12px 14px;
      }

      .credit-promo-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 8px 0;
        font-size: 0.85rem;
        color: rgb(var(--slate, 107 114 128));
        border-bottom: 1px solid rgb(var(--panel-12, 124 7 94) / 0.3);
      }

      .credit-promo-row:last-of-type {
        border-bottom: 0;
      }

      .credit-promo-row b {
        color: rgb(var(--text-on-panel, 15 23 42));
        font-weight: 800;
        font-size: 0.92rem;
      }

      /* --success ตรงๆ วัดจริงบนพื้น .credit-promo-card (bg-04) ได้แค่ ~3.9:1 (ไม่ผ่าน AA) —
   ใช้ --light-green (โทนเดียวกับที่แก้ badge อื่นในไฟล์นี้ทั้งหมดรอบตรวจ contrast) แทน */
      .credit-promo-row b.cp-ok {
        color: rgb(var(--light-green, 204 246 199));
      }

      .credit-promo-note {
        font-size: 0.76rem;
        color: rgb(var(--text-dim-4, 255 214 234));
        margin-top: 6px;
      }

      .cp-alert {
        border-radius: 8px;
        padding: 9px 11px;
        font-size: 0.78rem;
        margin-top: 10px;
        line-height: 1.55;
        display: flex;
        align-items: flex-start;
        gap: 6px;
      }

      .cp-alert b {
        display: block;
        margin-bottom: 2px;
      }

      /* ปุ่มจริง (มียอดฝากรอเข้ากระเป๋า) — เดิม .cp-alert ทั้งหมดเป็น <div>, ตัวนี้เป็น <button>
   จึงต้อง reset ค่า default ของปุ่ม + เพิ่ม hover/cursor ให้รู้ว่ากดได้ */
      .cp-alert-clickable {
        width: 100%;
        border: 0;
        text-align: left;
        align-items: center;
        cursor: pointer;
        font-family: inherit;
        transition: filter 0.15s;
      }

      .cp-alert-clickable:hover {
        filter: brightness(1.12);
      }

      .cp-alert-clickable .cp-alert-ico {
        font-size: 0.95rem;
        line-height: 1;
        flex-shrink: 0;
      }

      .cp-alert-clickable .cp-alert-txt {
        flex: 1 1 auto;
      }

      .cp-alert-clickable .cp-alert-arrow {
        font-size: 1.05rem;
        font-weight: 700;
        line-height: 1;
        opacity: 0.8;
        flex-shrink: 0;
      }

      .cp-alert-warning {
        background: rgb(var(--gold, 250 204 21) / 0.1);
        border: 1px solid rgb(var(--gold, 250 204 21) / 0.3);
        color: rgb(var(--light-gold, 254 243 205));
      }

      .cp-alert-success {
        background: rgb(var(--success, 34 197 94) / 0.1);
        border: 1px solid rgb(var(--success, 34 197 94) / 0.3);
        color: rgb(var(--light-green, 204 246 199));
      }

      .cp-alert-danger {
        background: rgb(var(--danger, 239 68 68) / 0.1);
        border: 1px solid rgb(var(--danger, 239 68 68) / 0.3);
        color: rgb(var(--light-red, 254 242 242));
      }

      .lucky-draw-cards {
        /* Single column: these live in the (width-constrained) member-modal tab,
     a vertical menu — one full-width card per row reads better than a
     viewport-keyed 2-up grid that cramps on mid-size phones. */
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
      }

      .lucky-draw-card {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 16px;
        border-radius: var(--radius-md, 12px);
        border: 1px solid rgba(255 255 255 / 0.12);
        background: rgb(var(--blue-deep-2, 13 71 161) / 0.94);
        color: #fff;
        cursor: pointer;
        text-align: left;
        transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
        box-shadow: 0 4px 16px rgba(0 0 0 / 0.25);
        width: 100%;
      }

      .lucky-draw-card:hover {
        border-color: rgba(255 255 255 / 0.32);
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(0 0 0 / 0.35);
      }

      .lucky-draw-card:active {
        transform: scale(0.98);
      }

      .lucky-draw-card:focus-visible {
        outline: 2px solid rgb(var(--gold, 250 204 21));
        outline-offset: 2px;
      }

      .ld-card-icon {
        width: 44px;
        height: 44px;
        flex-shrink: 0;
        border-radius: 12px;
        display: grid;
        place-items: center;
        font-size: 20px;
        background: rgba(255 255 255 / 0.10);
        border: 1px solid rgba(255 255 255 / 0.18);
      }

      .ld-wheel .ld-card-icon {
        background: rgba(var(--gold, 250 204 21) / 0.18);
        border-color: rgba(var(--gold, 250 204 21) / 0.35);
        color: rgb(var(--gold, 250 204 21));
      }

      .ld-box .ld-card-icon {
        background: rgba(var(--danger, 239 68 68) / 0.22);
        border-color: rgba(var(--danger-light, 248 113 113) / 0.5);
        color: rgb(var(--danger-light, 248 113 113));
      }

      .ld-shop .ld-card-icon {
        background: rgba(34 197 94 / 0.18);
        border-color: rgba(34 197 94 / 0.35);
        color: rgb(74 222 128);
      }

      .ld-checkin .ld-card-icon {
        background: rgba(56 189 248 / 0.22);
        border-color: rgba(125 211 252 / 0.5);
        color: rgb(125 211 252);
      }

      .ld-card-body {
        flex: 1;
        min-width: 0;
      }

      .ld-card-body strong {
        display: block;
        font-size: 13px;
        font-weight: 700;
        line-height: 1.3;
      }

      .ld-card-body small {
        display: block;
        font-size: 11px;
        color: rgba(255 255 255 / 0.6);
        margin-top: 2px;
      }

      .ld-arrow {
        font-size: 11px;
        color: rgba(255 255 255 / 0.4);
        flex-shrink: 0;
      }

      /* ── Rank-up rewards (dashboard) — gold/trophy accent, token-based ── */

      /* Floating widget: collapses to a FAB, expands to a panel (like bx theme).
   z-index sits BELOW the member-modal overlay (9000) so the FAB never floats
   over an open modal. */
      .rr-widget {
        position: fixed;
        right: 14px;
        bottom: 84px;
        z-index: 8990;
      }

      @media (min-width: 992px) {
        .rr-widget {
          bottom: 22px;
        }
      }

      /* `.rr-fab`/`.rr-panel` set display:grid/flex, which would override the UA
   `[hidden]{display:none}`. This attribute rule (higher specificity) restores
   it so toggling the `hidden` property in openPanel()/collapse() actually
   shows/hides the FAB and panel. */
      .rr-fab[hidden],
      .rr-panel[hidden] {
        display: none;
      }

      .rr-fab {
        position: relative;
        width: 56px;
        height: 56px;
        border: none;
        border-radius: 50%;
        background: rgb(var(--gold, 250 204 21));
        color: #1a1004;
        font-size: 22px;
        cursor: pointer;
        display: grid;
        place-items: center;
        box-shadow: 0 6px 20px rgba(0 0 0 / 0.35);
        animation: rrPulse 2.2s ease-in-out infinite;
      }

      .rr-fab:hover {
        filter: brightness(1.06);
      }

      .rr-fab:active {
        transform: scale(0.95);
      }

      .rr-fab:focus-visible {
        outline: 2px solid #fff;
        outline-offset: 3px;
      }

      @keyframes rrPulse {

        0%,
        100% {
          box-shadow: 0 6px 20px rgba(0 0 0 / 0.35), 0 0 0 0 rgba(var(--gold, 250 204 21) / 0.45);
        }

        50% {
          box-shadow: 0 6px 20px rgba(0 0 0 / 0.35), 0 0 0 9px rgba(var(--gold, 250 204 21) / 0);
        }
      }

      .rr-fab-badge {
        position: absolute;
        top: -3px;
        right: -3px;
        min-width: 20px;
        height: 20px;
        padding: 0 5px;
        border-radius: 999px;
        background: rgb(var(--danger, 239 68 68));
        color: #fff;
        font-size: 11px;
        font-weight: 700;
        line-height: 20px;
        text-align: center;
        border: 2px solid rgb(var(--bg-06, 161 10 122));
      }

      .rr-panel {
        position: absolute;
        right: 0;
        bottom: 0;
        width: min(340px, calc(100vw - 28px));
        max-height: min(70vh, 460px);
        display: flex;
        flex-direction: column;
        border-radius: 16px;
        border: 1px solid rgba(var(--gold, 250 204 21) / 0.28);
        background: linear-gradient(160deg, rgb(var(--bg-16, 141 8 107)), rgb(var(--bg-03, 40 2 30)) 85%);
        box-shadow: 0 16px 48px rgba(0 0 0 / 0.5);
        overflow: hidden;
        animation: rrSlideUp 0.22s ease;
      }

      @keyframes rrSlideUp {
        from {
          opacity: 0;
          transform: translateY(10px);
        }

        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      .rr-panel-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 14px;
        border-bottom: 1px solid rgba(255 255 255 / 0.1);
      }

      .rr-panel-title {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 14px;
        font-weight: 700;
        color: rgb(var(--text-bright, 241 245 249));
      }

      .rr-panel-title i {
        color: rgb(var(--gold, 250 204 21));
      }

      .rr-count {
        min-width: 20px;
        height: 20px;
        padding: 0 6px;
        border-radius: 999px;
        background: rgba(var(--gold, 250 204 21) / 0.2);
        color: rgb(var(--gold, 250 204 21));
        font-size: 11px;
        font-weight: 700;
        line-height: 20px;
        text-align: center;
      }

      .rr-close {
        width: 30px;
        height: 30px;
        flex-shrink: 0;
        border: none;
        border-radius: 9px;
        background: rgba(255 255 255 / 0.08);
        color: rgb(var(--text-2, 203 213 225));
        font-size: 15px;
        cursor: pointer;
      }

      .rr-close:hover {
        background: rgba(255 255 255 / 0.16);
        color: rgb(var(--text-bright, 241 245 249));
      }

      .rr-close:focus-visible {
        outline: 2px solid rgb(var(--gold, 250 204 21));
        outline-offset: 2px;
      }

      .rr-panel .rank-rewards-list {
        padding: 12px;
        overflow-y: auto;
      }

      .rank-rewards-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
      }

      .rank-reward-card {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px;
        padding: 14px 16px;
        border-radius: var(--radius-md, 12px);
        border: 1px solid rgba(var(--gold, 250 204 21) / 0.35);
        background: linear-gradient(135deg,
            rgb(var(--bg-22, 171 11 130) / 0.9),
            rgb(var(--bg-16, 141 8 107) / 0.95));
        box-shadow: 0 4px 16px rgba(0 0 0 / 0.25);
        color: rgb(var(--text-bright, 241 245 249));
      }

      .rank-reward-card.claimed {
        border-color: rgba(var(--success, 34 197 94) / 0.5);
      }

      .rrc-icon {
        width: 46px;
        height: 46px;
        flex-shrink: 0;
        border-radius: 12px;
        display: grid;
        place-items: center;
        font-size: 22px;
        background: rgba(var(--gold, 250 204 21) / 0.18);
        border: 1px solid rgba(var(--gold, 250 204 21) / 0.4);
        color: rgb(var(--gold, 250 204 21));
      }

      .rank-reward-card.claimed .rrc-icon {
        background: rgba(var(--success, 34 197 94) / 0.18);
        border-color: rgba(var(--success, 34 197 94) / 0.4);
        color: rgb(var(--success, 34 197 94));
      }

      .rrc-body {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 2px;
      }

      .rrc-body strong {
        font-size: 13px;
        font-weight: 700;
        line-height: 1.3;
      }

      .rrc-amount {
        font-size: 15px;
        font-weight: 800;
        color: rgb(var(--gold, 250 204 21));
      }

      .rank-reward-card.claimed .rrc-amount {
        color: rgb(var(--success, 34 197 94));
      }

      .rrc-claim {
        flex-shrink: 0;
        padding: 9px 16px;
        border: none;
        border-radius: 999px;
        background: rgb(var(--gold, 250 204 21));
        color: #1a1004;
        font-family: inherit;
        font-size: 12px;
        font-weight: 700;
        cursor: pointer;
        transition: filter 0.2s, transform 0.15s;
      }

      .rrc-claim:hover {
        filter: brightness(1.08);
      }

      .rrc-claim:active {
        transform: scale(0.96);
      }

      .rrc-claim:disabled {
        opacity: 0.6;
        cursor: default;
      }

      .rrc-claim:focus-visible {
        outline: 2px solid #fff;
        outline-offset: 2px;
      }

      .rrc-msg {
        flex-basis: 100%;
        font-size: 11px;
        color: rgb(var(--danger, 239 68 68));
        margin-top: 2px;
      }

      /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
      /* Lucky-draw modal (assets/html/lucky-draw-widget.ejs) trim — scoped to
   ty-demotheme4-pink / ty-demotheme4-light-blue only via body.theme-ty-demotheme4-pink
   / body.theme-ty-demotheme4-light-blue (set in layouts/main.ejs). That widget file is
   shared across every theme via layout-bottom.ejs's include, so it can't be edited
   directly without affecting other themes — this overrides it with CSS only, here.
   - #luckyDrawTypeSwitch: redundant with lucky-draw-section.ejs's own
     wheel/box/shop/checkin cards, which already call .open(type) directly.
   - .ldx-pending ("เครดิตฟรีรอนำเข้า"): hidden per request.
   - .ldx-header: trimmed to just the points summary (#luckyDrawSummaryText,
     already reads "คะแนนคงเหลือ X แต้ม…" via commonHeader() in the widget's
     own JS) + the close button — hides the eyebrow label and h2 title. */
      body[class*="theme-ty-demotheme4-"] #luckyDrawTypeSwitch,
      body[class*="theme-ty-demotheme4-"] .ldx-pending {
        display: none !important;
      }

      body[class*="theme-ty-demotheme4-"] .ldx-header .ldx-eyebrow,
      body[class*="theme-ty-demotheme4-"] .ldx-header #luckyDrawModalTitle {
        display: none !important;
      }

      /* #luckyDrawSummaryText is now the only thing left in the header besides the
   close button, so bump it from a small muted caption up to the header's
   main focal point — gold pill badge with a coin icon, matching the
   modal's own --ldx-gold accent instead of the default muted gray text. */
      body[class*="theme-ty-demotheme4-"] .ldx-header #luckyDrawSummaryText {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-top: 2px;
        padding: 8px 16px;
        font-size: 14px;
        font-weight: 800;
        letter-spacing: 0.01em;
        color: #241a00;
        background: linear-gradient(135deg, #fff0a8, #e9c349);
        border-radius: 999px;
        box-shadow: 0 6px 18px rgba(233, 195, 73, 0.28);
      }

      body[class*="theme-ty-demotheme4-"] .ldx-header #luckyDrawSummaryText::before {
        content: "🪙";
        font-size: 16px;
        line-height: 1;
      }

      @media (max-width: 720px) {

        body[class*="theme-ty-demotheme4-"] .ldx-header #luckyDrawSummaryText {
          font-size: 12px;
          padding: 7px 12px;
        }
      }

      /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

      /* Custom override to force number input labels/divs to solid black */
      label.number-input,
      .number-input {
        color: #000000 !important;
      }

      /* Custom legibility overrides for betsheets and poy rows */
      #total_bet,
      #total_bet * {
        color: #000000 !important;
      }

      .bxpoy-row label,
      .bxpoy-row strong,
      .bxpoy-row--net label {
        color: #0f172a !important;
      }

      .bxpoy-row--net strong {
        color: #0d47a1 !important;
      }

      .lotto-betlist__price-input,
      .stake-value-input {
        color: #000000 !important;
      }

      .lotto-betlist__number {
        color: #000000 !important;
      }

      /* Custom legibility overrides for Coupon Modal */
      #modalSelectCoupon {
        color: #0f172a !important;
      }

      #modalSelectCoupon .cpn-header__title,
      #modalSelectCoupon .cpn-search__input,
      #modalSelectCoupon .cpn-card__title {
        color: #0f172a !important;
      }

      #modalSelectCoupon .cpn-search__icon,
      #modalSelectCoupon .cpn-search__clear,
      #modalSelectCoupon .cpn-footer__sub,
      #modalSelectCoupon .cpn-footer__savings-label,
      #modalSelectCoupon .cpn-btn-clear,
      #modalSelectCoupon .cpn-card__code,
      #modalSelectCoupon .cpn-section-label {
        color: #334155 !important;
      }

      #modalSelectCoupon .cpn-search__wrap,
      #modalSelectCoupon .cpn-btn-clear,
      #modalSelectCoupon .cpn-card {
        border-color: #cbd5e1 !important;
      }

      /* Custom legibility overrides for Coupon Empty States */
      .cpn-state__title {
        color: #0f172a !important;
      }

      .cpn-state__sub {
        color: #334155 !important;
      }

      /* Custom legibility overrides for all SweetAlert2 popups */
      .swal2-popup {
        background: #ffffff !important;
        color: #0f172a !important;
      }

      .swal2-popup .swal2-title {
        color: #0f172a !important;
      }

      .swal2-popup .swal2-html-container,
      .swal2-popup .swal2-content {
        color: #334155 !important;
      }

      /* Custom overrides for header back button background and text */
      .lotto-header__back {
        background: transparent !important;
        color: #ffffff !important;
        border: 1px solid rgba(255, 255, 255, 0.4) !important;
      }

      .lotto-header__back:hover {
        background: rgba(255, 255, 255, 0.15) !important;
        color: #ffffff !important;
      }

      /* Custom legibility overrides for Closed State */
      .lotto-closed {
        background: #ffffff !important;
        border-color: #cbd5e1 !important;
      }

      .lotto-closed__title {
        color: #0f172a !important;
      }

      .lotto-closed__sub {
        color: #334155 !important;
      }

      .lotto-closed__result-card {
        background: #f8fafc !important;
        border-color: #cbd5e1 !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
      }

      .lotto-closed__result-card .result-label {
        color: #475569 !important;
      }

      .lotto-closed__result-card .result-number {
        color: #0f172a !important;
      }

      .result--first .result-number {
        color: #b58900 !important;
      }

      .result--three .result-number {
        color: #dc2626 !important;
      }

      .result--two .result-number {
        color: #0d47a1 !important;
      }

      /* Cashier Light Theme Content Overrides */
      #mem-tab-cashier {
        border: 1px solid var(--lotto-border) !important;
      }

      #mem-tab-cashier .cashier-tabs {
        border-bottom-color: #cbd5e1 !important;
      }

      #mem-tab-cashier .cashier-tab-btn {
        color: #64748b !important;
      }

      #mem-tab-cashier .cashier-tab-btn:hover {
        color: #0f172a !important;
      }

      #mem-tab-cashier .cashier-tab-btn.active {
        color: #0d47a1 !important;
        border-bottom-color: #0d47a1 !important;
      }

      #mem-tab-cashier .cashier-section {
        background: #f8fafc !important;
        border-color: #cbd5e1 !important;
        color: #0f172a !important;
      }

      #mem-tab-cashier .cashier-channel-card {
        background: #ffffff !important;
        border-color: #cbd5e1 !important;
        color: #0f172a !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
      }

      #mem-tab-cashier .cashier-channel-card:hover {
        border-color: rgb(var(--gold, 250 204 21) / 0.65) !important;
        background: rgb(var(--gold, 250 204 21) / 0.08) !important;
      }

      #mem-tab-cashier .cashier-channel-card.active {
        border-color: rgb(var(--gold, 250 204 21)) !important;
        background: linear-gradient(135deg, rgb(var(--gold, 250 204 21) / 0.15), #ffffff) !important;
        box-shadow: 0 0 0 1.5px rgb(var(--gold, 250 204 21)), 0 4px 14px rgb(var(--gold, 250 204 21) / 0.20) !important;
      }

      #mem-tab-cashier .cashier-section-title {
        color: #0f172a !important;
        border-bottom-color: #cbd5e1 !important;
      }

      #mem-tab-cashier .cashier-wizard-progress-bar {
        background: #cbd5e1 !important;
      }

      /* Custom overrides for pg-header to make it blue and legible */
      .pg-header {
        background: linear-gradient(135deg, #0f2042 0%, #0d47a1 100%) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
      }

      .pg-header .pg-back-btn {
        color: #ffffff !important;
      }

      .pg-header .pg-back-btn:hover {
        color: rgba(255, 255, 255, 0.8) !important;
      }

      .pg-header .pg-header-title {
        color: #ffffff !important;
      }

      /* Custom legibility overrides for lotto-extra-opts */
      .lotto-extra-opts .btn-option {
        background: #ffffff !important;
        color: #0f172a !important;
        border-color: #cbd5e1 !important;
      }

      .lotto-extra-opts .btn-option:hover {
        border-color: #94a3b8 !important;
        color: #0f172a !important;
      }

      .lotto-extra-opts .btn-option.activation {
        background: var(--grn, #10b981) !important;
        color: #ffffff !important;
        border-color: var(--grn, #10b981) !important;
      }

      /* Color themes for sidebar mobile nav font icons */
      .msidebar-icon-home { color: #60a5fa !important; }    /* Sky Blue */
      .msidebar-icon-promo { color: #fbbf24 !important; }   /* Coin Gold */
      .msidebar-icon-contact { color: #34d399 !important; } /* Support Green */
      .msidebar-icon-deposit { color: #22c55e !important; } /* Cash Green */
      .msidebar-icon-group { color: #fbbf24 !important; }  /* Amber/Gold */
      .msidebar-icon-pw { color: #f43f5e !important; }     /* Security Rose */
      .msidebar-icon-refund { color: #10b981 !important; } /* Cash/Emerald Green */
      .msidebar-icon-coupon { color: #f59e0b !important; } /* Reward Amber/Gold */
      .msidebar-icon-lotto { color: #a78bfa !important; }  /* Purple luck */
      .msidebar-icon-wheel { color: #ec4899 !important; }  /* Wheel Pink */
      .msidebar-icon-refer { color: #38bdf8 !important; }  /* Social Sky Blue */
      .msidebar-icon-install { color: #14b8a6 !important; }/* Install Teal */