@charset "UTF-8";
@import "https://fonts.googleapis.com/css2?family=Montserrat:wght@100;300;400;500;600;700;800;900&display=swap";

/* ==========================================================================
 * Likester 2026 — Level 2 v4 Foundation Tokens
 * ==========================================================================
 * Design tokens introduced for the modernized theme. Existing rules below
 * are preserved unchanged. New components built on these tokens use these
 * scoped namespaces (do NOT bleed onto legacy markup):
 *   .l2v2          — app shell, sidebar v3, topbar, auth split
 *   .lk-land       — yellow landing hero (signin public page)
 *   .l2pg          — page-level layouts (orders, services, drip, etc.)
 *   .l2af          — modernized add funds (renamed to avoid legacy .af-*)
 *
 * Mode tokens default to DARK (matches existing rule pattern); html.light
 * overrides them. The Anti-FOUC script in layout.twig sets html.dark or
 * html.light before first paint, so initial paint already matches.
 * ========================================================================== */

:root {
    /* --- Brand yellow ramp (anchored to original #ffbf00 / #ffc107) --- */
    --y-50:  #fff8df;
    --y-100: #fff0b8;
    --y-200: #ffe27a;
    --y-300: #ffd23d;
    --y-400: #ffc107;   /* design ใหม่ใช้ */
    --y-500: #ffbf00;   /* original brand */
    --y-600: #e8a800;
    --y-700: #b07d00;
    --y-800: #6b4c00;

    /* --- Cool neutral ramp (slate, low chroma) --- */
    --n-0:   #ffffff;
    --n-25:  #fafafa;
    --n-50:  #f5f6f7;
    --n-100: #eceef0;
    --n-200: #d9dde1;
    --n-300: #b8bfc6;
    --n-400: #8a929b;
    --n-500: #5d6671;
    --n-600: #3f4751;
    --n-700: #2a3038;
    --n-800: #181c22;
    --n-900: #0c1015;
    --n-950: #06080b;

    /* --- Ring accents (stat cards) --- */
    --ring-blue:   #2A62FF;
    --ring-red:    #FF2828;
    --ring-green:  #28F1AA;
    --ring-purple: #A12AFF;

    /* --- Functional --- */
    --success: #19a974;
    --danger:  #e54848;
    --info:    #2c7be5;
    --warn:    #ca8a04;

    /* --- Type --- */
    --font-th:   "Noto Sans Thai", system-ui, sans-serif;
    --font-en:   "Inter", "Geist", system-ui, sans-serif;
    --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;

    /* --- Radii --- */
    --r-sm:   6px;
    --r-md:  10px;
    --r-lg:  14px;
    --r-xl:  20px;
    --r-2xl: 28px;
    --r-full: 999px;

    /* --- Shadows --- */
    --shadow-sm:     0 1px 2px rgba(12,16,21,.06), 0 1px 1px rgba(12,16,21,.04);
    --shadow-md:     0 4px 12px rgba(12,16,21,.08), 0 1px 2px rgba(12,16,21,.04);
    --shadow-lg:     0 12px 32px rgba(12,16,21,.12), 0 2px 8px rgba(12,16,21,.06);
    --shadow-yellow: 0 8px 24px -6px rgba(255,191,0,.45);

    /* --- Mode tokens: DARK default (matches existing CSS pattern) --- */
    --bg:        #0C141B;
    --side:      #121D27;
    --side2:     #0C141B;
    --line:      #183441;
    --line2:     #1f3a4a;
    --ink:       #ffffff;
    --ink2:      #c5cdd6;
    --inkDim:    #8b98b8;
    --brand:     #ffc107;
    --brandText: #0c151b;
}

/* --- Mode tokens: LIGHT overrides (when html.light is set) --- */
html.light {
    --bg:        #f5f6f8;
    --side:      #ffffff;
    --side2:     #f5f6f8;
    --line:      #e9ecef;
    --line2:     #dde2e8;
    --ink:       #0c151b;
    --ink2:      #3d4249;
    --inkDim:    #6b7280;
    --brand:     #ffc107;
    --brandText: #0c151b;
}

/* End of Likester 2026 Level 2 v4 Foundation Tokens */
/* ========================================================================== */


/* ==========================================================================
 * Likester 2026 — Level 2 v4 Components
 * ==========================================================================
 * All component CSS lives under the .l2v2 / .lk-land scope to avoid leaking
 * onto legacy markup. New rules use higher specificity than legacy ones via
 * the `.l2v2 ...` parent selector.
 * ========================================================================== */

.l2v2,
.l2v2 *,
.l2v2 *::before,
.l2v2 *::after { box-sizing: border-box; }

.l2v2 { font-family: var(--font-th), var(--font-en); color: var(--ink); }

/* ----- Sidebar v3 (restyles legacy .appSidebar inner; preserves position:fixed + 280px width) ----- */
body#appDashboard.l2v2 .appSidebar.l2v2-side {
    background: var(--side);
    border-right: 1px solid var(--line);
    padding: 16px 0 16px;
    color: var(--ink);
    transition: width .25s ease;
}
body#appDashboard.l2v2 .appSidebar.l2v2-side.collapsed { width: 78px !important; }
/* Sidebar collapsed → topbar + content shift to 78px (was 280px). Uses body class
 * .l2v2-sb-collapsed which JS sets alongside .collapsed for reliable selector match.
 * (The previous "~ *" wildcard pattern was too broad — replaced with body-class state.) */
body#appDashboard.l2v2.l2v2-sb-collapsed .appHeader { left: 78px; }
body#appDashboard.l2v2.l2v2-sb-collapsed .appContent { padding-left: 78px; }
@media (max-width: 991.98px) {
    body#appDashboard.l2v2.l2v2-sb-collapsed .appHeader { left: 0; }
    body#appDashboard.l2v2.l2v2-sb-collapsed .appContent { padding-left: 0; }
}

.l2v2 .l2v2-side .sb-top { display: flex; align-items: center; padding: 0 24px 14px; border-bottom: 1px solid var(--line); margin-bottom: 14px; gap: 10px; }
.l2v2 .l2v2-side .sb-top .lg { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; overflow: hidden; text-decoration: none; color: inherit; }
.l2v2 .l2v2-side .sb-top .lion { width: 42px; height: 42px; border-radius: 12px; background: linear-gradient(135deg, #ff6b35, #ff9800); display: grid; place-items: center; color: #0c151b; font-weight: 900; font-family: var(--font-en); font-size: 22px; flex-shrink: 0; box-shadow: 0 6px 14px rgba(255, 107, 53, .3); }
.l2v2 .l2v2-side .sb-top .word { font-family: var(--font-en); font-weight: 900; font-size: 19px; letter-spacing: .02em; color: var(--ink); line-height: 1; white-space: nowrap; }
.l2v2 .l2v2-side .sb-top .word small { display: block; font-size: 9px; font-weight: 600; letter-spacing: .18em; color: var(--inkDim); margin-top: 3px; text-transform: uppercase; }
.l2v2 .l2v2-side .sb-top .sb-top-logo { max-height: 42px; max-width: 100%; object-fit: contain; }
.l2v2 .l2v2-side .sb-top .col-btn { width: 30px; height: 30px; border-radius: 9px; background: var(--side2); border: 1px solid var(--line); color: var(--ink2); display: grid; place-items: center; cursor: pointer; flex-shrink: 0; transition: .14s; font-size: 14px; padding: 0; }
.l2v2 .l2v2-side .sb-top .col-btn:hover { background: var(--brand); color: var(--brandText); border-color: var(--brand); }

/* User pill */
.l2v2 .l2v2-side .sb-user { margin: 0 16px 10px; padding: 12px; background: var(--side2); border: 1px solid var(--line); border-radius: 16px; display: flex; align-items: center; gap: 12px; cursor: pointer; transition: .14s; text-decoration: none; color: inherit; }
.l2v2 .l2v2-side .sb-user:hover { border-color: var(--brand); }
.l2v2 .l2v2-side .sb-user .av { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, #ffc107, #ff9800); color: #0c151b; display: grid; place-items: center; font-weight: 800; font-family: var(--font-en); font-size: 17px; flex-shrink: 0; box-shadow: 0 4px 10px rgba(255, 193, 7, .3); position: relative; }
.l2v2 .l2v2-side .sb-user .av::after { content: ''; position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 50%; background: var(--success); border: 2px solid var(--side); }
.l2v2 .l2v2-side .sb-user .meta { flex: 1; min-width: 0; overflow: hidden; }
.l2v2 .l2v2-side .sb-user .nm { display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.l2v2 .l2v2-side .sb-user .nm i { color: var(--brand); font-size: 13px; flex-shrink: 0; }
.l2v2 .l2v2-side .sb-user .tier { font-size: 10.5px; font-weight: 600; color: var(--inkDim); margin-top: 1px; letter-spacing: .05em; text-transform: uppercase; }
.l2v2 .l2v2-side .sb-user .arrow { color: var(--ink2); font-size: 14px; flex-shrink: 0; }

/* Balance card */
.l2v2 .l2v2-side .sb-bal { margin: 0 16px 12px; padding: 14px 16px; background: linear-gradient(135deg, #ffc107 0%, #ffce3a 100%); border-radius: 16px; color: #0c151b; position: relative; overflow: hidden; cursor: pointer; transition: .14s; text-decoration: none; display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; }
.l2v2 .l2v2-side .sb-bal:hover { transform: translateY(-1px); box-shadow: 0 12px 24px rgba(255, 193, 7, .3); }
.l2v2 .l2v2-side .sb-bal::before { content: ''; position: absolute; right: -20px; top: -30px; width: 90px; height: 90px; border-radius: 50%; background: rgba(255, 255, 255, .2); pointer-events: none; }
.l2v2 .l2v2-side .sb-bal .lbl { width: 100%; font-size: 11px; font-weight: 700; opacity: .7; letter-spacing: .06em; text-transform: uppercase; position: relative; z-index: 1; color: #0c151b; }
.l2v2 .l2v2-side .sb-bal .v { flex: 1; min-width: 0; font-family: var(--font-en); font-weight: 800; font-size: 22px; letter-spacing: -0.02em; line-height: 1; margin-top: 5px; position: relative; z-index: 1; color: #0c151b; }
.l2v2 .l2v2-side .sb-bal .topup { display: inline-flex; margin-top: 5px; margin-left: auto; background: #0c151b; color: #ffc107; padding: 7px 12px; border-radius: 9px; font-size: 11px; font-weight: 700; align-items: center; gap: 5px; position: relative; z-index: 1; flex-shrink: 0; }

/* Search */
.l2v2 .l2v2-side .sb-srch { margin: 0 16px 14px; position: relative; }
.l2v2 .l2v2-side .sb-srch i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--inkDim); font-size: 14px; pointer-events: none; }
.l2v2 .l2v2-side .sb-srch input { width: 100%; padding: 9px 36px 9px 34px; background: var(--side2); border: 1px solid var(--line); border-radius: 10px; color: var(--ink); font-family: inherit; font-size: 12.5px; outline: none; transition: .14s; }
.l2v2 .l2v2-side .sb-srch input::placeholder { color: var(--inkDim); }
.l2v2 .l2v2-side .sb-srch input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(255, 193, 7, .15); }
.l2v2 .l2v2-side .sb-srch .kbd { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: var(--side); border: 1px solid var(--line); color: var(--inkDim); font-size: 10px; padding: 2px 6px; border-radius: 4px; font-family: var(--font-en); font-weight: 600; pointer-events: none; }

/* Menu items */
.l2v2 .l2v2-side .sb-menu { flex: 1; overflow-y: auto; padding: 0 12px; }
.l2v2 .l2v2-side .sb-menu::-webkit-scrollbar { width: 0; }
.l2v2 .l2v2-side .sb-menu ul.sbMenu,
.l2v2 .l2v2-side .sb-menu ul.sb-menu-ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.l2v2 .l2v2-side .sb-menu .sb-grp-item { padding: 0; }
/* Group section header (matches sidebar-v3 design) */
.l2v2 .l2v2-side .sb-menu .sb-grp { padding: 0; margin: 10px 0 2px; list-style: none; }
.l2v2 .l2v2-side .sb-menu .sb-grp:first-child { margin-top: 4px; }
.l2v2 .l2v2-side .sb-menu .sb-grp .sb-grp-h {
    font-size: 10px; font-weight: 800; color: var(--inkDim);
    letter-spacing: .14em; text-transform: uppercase;
    padding: 8px 12px 6px;
}
.l2v2 .l2v2-side.collapsed .sb-grp-h { display: none; }
.l2v2 .l2v2-side .sb-menu .sb-i { display: flex; align-items: center; padding: 9px 12px; border-radius: 11px; color: var(--ink2); cursor: pointer; gap: 11px; transition: .14s; text-decoration: none; position: relative; }
.l2v2 .l2v2-side .sb-menu .sb-i .ico { width: 22px; font-size: 17px; display: flex; align-items: center; flex-shrink: 0; color: inherit; }
.l2v2 .l2v2-side .sb-menu .sb-i .tx { font-size: 13px; font-weight: 600; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.l2v2 .l2v2-side .sb-menu .sb-i .bd { background: var(--ring-red); color: #fff; font-size: 10px; font-weight: 800; padding: 1px 7px; border-radius: 999px; font-family: var(--font-en); min-width: 18px; text-align: center; }
.l2v2 .l2v2-side .sb-menu .sb-i .bd.green { background: var(--success); }
.l2v2 .l2v2-side .sb-menu .sb-i .bd.gold { background: var(--brand); color: var(--brandText); }
.l2v2 .l2v2-side .sb-menu .sb-i:hover { background: var(--side2); color: var(--ink); }
.l2v2 .l2v2-side .sb-menu .sb-i.active { background: linear-gradient(95deg, #ffc107, #ffd54a); color: var(--brandText); box-shadow: 0 8px 18px rgba(255, 193, 77, .3), inset 0 1px 0 rgba(255, 255, 255, .4); font-weight: 700; }
.l2v2 .l2v2-side .sb-menu .sb-i.active:hover { color: var(--brandText); }
.l2v2 .l2v2-side .sb-menu .sb-i.active .ico,
.l2v2 .l2v2-side .sb-menu .sb-i.active .tx { color: var(--brandText); }

/* Footer (LINE) */
.l2v2 .l2v2-side .sb-foot { padding: 10px 16px 0; border-top: 1px solid var(--line); margin-top: 10px; }
.l2v2 .l2v2-side .sb-line { background: linear-gradient(135deg, #06C755, #04a346); color: #fff; padding: 11px 14px; border-radius: 12px; display: flex; align-items: center; gap: 10px; cursor: pointer; transition: .14s; box-shadow: 0 6px 14px rgba(6, 199, 85, .25); text-decoration: none; }
.l2v2 .l2v2-side .sb-line:hover { transform: translateY(-1px); box-shadow: 0 10px 18px rgba(6, 199, 85, .35); color: #fff; }
.l2v2 .l2v2-side .sb-line i { font-size: 18px; }
.l2v2 .l2v2-side .sb-line .t { font-size: 12px; font-weight: 700; flex: 1; line-height: 1.3; }
.l2v2 .l2v2-side .sb-line .t small { display: block; font-size: 10px; opacity: .85; font-weight: 500; margin-top: 1px; }

/* Collapsed state */
.l2v2 .l2v2-side.collapsed .sb-top .lg .word,
.l2v2 .l2v2-side.collapsed .sb-user .meta,
.l2v2 .l2v2-side.collapsed .sb-user .arrow,
.l2v2 .l2v2-side.collapsed .sb-bal .lbl,
.l2v2 .l2v2-side.collapsed .sb-bal .topup,
.l2v2 .l2v2-side.collapsed .sb-srch input,
.l2v2 .l2v2-side.collapsed .sb-srch .kbd,
.l2v2 .l2v2-side.collapsed .sb-menu .sb-i .tx,
.l2v2 .l2v2-side.collapsed .sb-menu .sb-i .bd,
.l2v2 .l2v2-side.collapsed .sb-line .t { display: none; }
.l2v2 .l2v2-side.collapsed .sb-bal { padding: 10px; text-align: center; }
.l2v2 .l2v2-side.collapsed .sb-bal .v { font-size: 14px; }
.l2v2 .l2v2-side.collapsed .sb-srch i { left: 50%; transform: translate(-50%, -50%); }
.l2v2 .l2v2-side.collapsed .sb-srch input { padding: 9px 0; height: 36px; }
.l2v2 .l2v2-side.collapsed .sb-menu .sb-i { justify-content: center; padding: 10px 0; }
.l2v2 .l2v2-side.collapsed .sb-line { justify-content: center; padding: 11px; }

/* ----- Topbar (restyles legacy .appHeader inner; preserves position:fixed + left:280px from existing) ----- */
.l2v2 .appHeader.l2v2-topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 28px;
    border-bottom: 1px solid var(--line);
    background: var(--side);
    /* position/top/left/height inherited from legacy .appHeader rules (fixed; left:280px on desktop) */
}
/* On mobile, legacy .menu-btn is position:fixed top-left so add padding to pgti
 * to prevent the page title getting clipped by the floating menu button. */
@media (max-width: 991.98px) {
    .l2v2 .appHeader.l2v2-topbar { padding-left: 72px; }
}
.l2v2 .appHeader.l2v2-topbar .menu-btn .ri-close-line { display: none; }
.appAuth.sidebar-active .menu-btn .ri-menu-line { display: none; }
.appAuth.sidebar-active .menu-btn .ri-close-line { display: inline-block; }
.l2v2 .l2v2-topbar .pgti { min-width: 0; flex-shrink: 1; }
.l2v2 .l2v2-topbar .pgti h2.apPgTi { margin: 0; font-size: 20px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; line-height: 1.2; }
.l2v2 .l2v2-topbar .pgti p.apPgTx { margin: 1px 0 0; font-size: 12px; color: var(--inkDim); }
.l2v2 .l2v2-topbar .right { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; }

.l2v2 .l2v2-tb-icon { width: 38px; height: 38px; border-radius: 50%; background: var(--side2); border: 1px solid var(--line); color: var(--ink2); display: grid; place-items: center; cursor: pointer; transition: .14s; font-size: 16px; padding: 0; text-decoration: none; }
.l2v2 .l2v2-tb-icon:hover { background: var(--line); color: var(--brand); }
.l2v2 .l2v2-tb-icon.dot { position: relative; }
.l2v2 .l2v2-tb-icon.dot::after { content: ''; position: absolute; top: 9px; right: 10px; width: 7px; height: 7px; background: var(--ring-red); border-radius: 50%; border: 1.5px solid var(--side); }
.l2v2 .l2v2-tb-icon.dropdown-toggle::after { display: none; }

.l2v2 .l2v2-mode { display: flex; align-items: center; height: 38px; gap: 4px; padding: 3px; background: var(--side2); border: 1px solid var(--line); border-radius: 999px; flex-shrink: 0; box-sizing: border-box; }
/* Override legacy .btnlight/.btndark padding/border-radius/colors so they don't overflow inside the new pill container */
.l2v2 .l2v2-mode button.btnlight,
.l2v2 .l2v2-mode button.btndark {
    width: 30px !important; height: 30px !important;
    border-radius: 50% !important; border: 0 !important;
    background: transparent !important; color: var(--inkDim) !important;
    cursor: pointer; display: grid; place-items: center;
    font-size: 14px; padding: 0 !important; line-height: 1; margin: 0;
}
.l2v2 .l2v2-mode button:hover { color: var(--ink) !important; }
html.light .l2v2 .l2v2-mode button.btnlight { background: rgba(255, 193, 7, .15) !important; color: var(--brand) !important; }
html.dark  .l2v2 .l2v2-mode button.btndark  { background: rgba(255, 193, 7, .15) !important; color: var(--brand) !important; }

.l2v2 .l2v2-prof { display: flex; align-items: center; gap: 10px; padding: 5px 14px 5px 5px; background: var(--side2); border: 1px solid var(--line); border-radius: 999px; cursor: pointer; }
.l2v2 .l2v2-prof::after { display: none; }
.l2v2 .l2v2-prof .av { width: 30px; height: 30px; border-radius: 50%; background: var(--brand); color: var(--brandText); display: grid; place-items: center; font-weight: 700; font-size: 13px; font-family: var(--font-en); }
.l2v2 .l2v2-prof .nm { font-size: 12px; font-weight: 600; color: var(--ink); line-height: 1.2; text-align: left; }
.l2v2 .l2v2-prof .nm small { display: block; font-size: 10px; font-weight: 500; color: var(--inkDim); }
.l2v2 .l2v2-prof .arrows { color: var(--ink2); font-size: 16px; }

/* Topbar dropdown menus reuse Bootstrap structure but get token colors */
.l2v2 .l2v2-topbar .dropdown-menu { background: var(--side); border: 1px solid var(--line); box-shadow: var(--shadow-lg); border-radius: 12px; padding: 6px; }
.l2v2 .l2v2-topbar .dropdown-menu .dropdown-item { color: var(--ink); border-radius: 8px; padding: 8px 12px; font-size: 13px; display: flex; align-items: center; gap: 8px; }
.l2v2 .l2v2-topbar .dropdown-menu .dropdown-item:hover,
.l2v2 .l2v2-topbar .dropdown-menu .dropdown-item:focus { background: var(--side2); color: var(--brand); }
.l2v2 .l2v2-topbar .dropdown-menu .dropdown-item.danger-color { color: var(--danger); }
.l2v2 .l2v2-topbar .dropdown-menu .dropdown-divider { border-color: var(--line); margin: 4px 0; }

/* ========================================================================== */
/* ----- Landing yellow hero (.lk-land) — wraps signin.twig public page ----- */
/* ========================================================================== */
.lk-land { font-family: var(--font-th), var(--font-en); color: #0c151b; background: #ffc107; width: 100%; max-width: 100%; overflow-x: hidden; min-height: 100vh; }
.lk-land *, .lk-land *::before, .lk-land *::after { box-sizing: border-box; }
.lk-land img { max-width: 100%; }
.lk-land a { color: inherit; text-decoration: none; }

/* Hero */
.lk-land .lk-hero { padding: 140px 24px 100px; position: relative; overflow: hidden; box-sizing: border-box; width: 100%; }
.lk-land .lk-hero .lk-pattern { position: absolute; inset: 0; background-image: radial-gradient(rgba(12, 21, 27, .08) 1.5px, transparent 1.5px); background-size: 22px 22px; pointer-events: none; opacity: .5; }
.lk-land .lk-hero-inner { position: relative; z-index: 2; max-width: 1280px; width: 100%; margin: 0 auto; display: grid; grid-template-columns: 1.1fr 480px; gap: 60px; align-items: center; }
@media (max-width: 992px) { .lk-land .lk-hero-inner { grid-template-columns: 1fr; gap: 40px; } }

.lk-land .lk-hero-left { display: flex; flex-direction: column; gap: 28px; }
.lk-land .lk-badge { display: inline-flex; align-items: center; gap: 10px; background: #0c151b; color: #fff; padding: 10px 22px; border-radius: 999px; font-size: 13px; font-weight: 600; width: fit-content; box-shadow: 0 8px 20px rgba(12, 21, 27, .3); }
.lk-land .lk-badge .bolt { width: 22px; height: 22px; border-radius: 50%; background: #ffc107; color: #0c151b; display: grid; place-items: center; font-size: 12px; }
.lk-land .lk-hero-h1 { margin: 0; font-family: var(--font-th), var(--font-en); font-weight: 900; font-size: 52px; line-height: 1.05; letter-spacing: -0.02em; color: #0c151b; max-width: 640px; }
.lk-land .lk-hero-h1 em { font-style: normal; background: #0c151b; color: #ffc107; padding: 4px 18px; border-radius: 14px; display: inline-block; }
@media (max-width: 768px) { .lk-land .lk-hero-h1 { font-size: 36px; } }
.lk-land .lk-hero-lead { font-size: 16px; line-height: 1.65; color: #0c151b; opacity: .82; max-width: 540px; margin: 0; }
.lk-land .lk-hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.lk-land .lk-btn-dark { background: #0c151b; color: #fff; padding: 16px 32px; border-radius: 16px; font-weight: 700; font-size: 15px; display: inline-flex; align-items: center; gap: 10px; box-shadow: 0 12px 28px rgba(12, 21, 27, .3); transition: .18s; cursor: pointer; }
.lk-land .lk-btn-dark:hover { transform: translateY(-2px); box-shadow: 0 18px 36px rgba(12, 21, 27, .4); color: #fff; }
.lk-land .lk-btn-out { background: transparent; color: #0c151b; padding: 14px 30px; border-radius: 16px; font-weight: 700; font-size: 15px; border: 2px solid #0c151b; display: inline-flex; align-items: center; gap: 10px; transition: .18s; cursor: pointer; }
.lk-land .lk-btn-out:hover { background: #0c151b; color: #ffc107; }

/* Floating hex icons */
.lk-land .lk-hex { position: absolute; width: 88px; height: 96px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); display: grid; place-items: center; color: #fff; font-size: 36px; box-shadow: 0 16px 30px rgba(0, 0, 0, .18); animation: lkHexFloat 5.2s ease-in-out infinite; z-index: 1; }
.lk-land .lk-hex.heart { background: linear-gradient(135deg, #ff5e6e, #ff2828); top: 14%; left: 4%; animation-delay: 0s; }
.lk-land .lk-hex.mega  { background: linear-gradient(135deg, #ff9966, #ff6e3e); top: 56%; left: 1%; animation-delay: -1.4s; width: 104px; height: 114px; }
.lk-land .lk-hex.like  { background: linear-gradient(135deg, #37e09f, #10b981); top: 12%; right: 4%; animation-delay: -2.6s; }
.lk-land .lk-hex.smile { background: linear-gradient(135deg, #3e9bff, #0258FF); top: 64%; right: 1%; animation-delay: -3.6s; width: 78px; height: 86px; }
@media (max-width: 992px) { .lk-land .lk-hex { display: none; } }
@keyframes lkHexFloat { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-16px) rotate(3deg); } }

/* Login card */
.lk-land .lk-login { background: #fff; border-radius: 28px; padding: 36px 32px; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: 14px; position: relative; }
.lk-land .lk-login h2 { margin: 0; text-align: center; font-size: 24px; font-weight: 800; color: #0c151b; letter-spacing: -0.02em; }
.lk-land .lk-login .sub { text-align: center; color: var(--wn-500); font-size: 13px; margin: -4px 0 4px; }
.lk-land .lk-login form { display: flex; flex-direction: column; gap: 14px; }
.lk-land .lk-login .lk-field { display: flex; flex-direction: column; gap: 6px; }
.lk-land .lk-login .lk-field label { font-size: 12.5px; font-weight: 600; color: #0c151b; }
.lk-land .lk-login .lk-field input { padding: 14px 16px; border-radius: 14px; border: 1.5px solid var(--wn-200); background: var(--wn-50); font-family: inherit; font-size: 13.5px; outline: none; transition: .14s; color: #0c151b; }
.lk-land .lk-login .lk-field input:focus { border-color: var(--y-400); background: #fff; box-shadow: 0 0 0 3px rgba(255, 193, 7, .16); }
/* remember + forgot row: real toggle switch (subordinate) + quiet text link */
.lk-land .lk-login .lk-row2 { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.lk-land .lk-login .lk-stay { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; margin: 0; padding: 4px 0; font-size: 12.5px; font-weight: 600; color: var(--wn-600); user-select: none; }
.lk-land .lk-login .lk-stay input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.lk-land .lk-login .lk-switch { position: relative; flex-shrink: 0; width: 40px; height: 22px; border-radius: 999px; background: var(--wn-300); transition: background .18s ease; }
.lk-land .lk-login .lk-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(12, 21, 27, .28); transition: transform .18s ease; }
.lk-land .lk-login .lk-stay input:checked ~ .lk-switch { background: var(--y-400); }
.lk-land .lk-login .lk-stay input:checked ~ .lk-switch::after { transform: translateX(18px); }
.lk-land .lk-login .lk-stay input:focus-visible ~ .lk-switch { outline: 2px solid var(--y-400); outline-offset: 2px; }
.lk-land .lk-login .lk-stay-txt { line-height: 1; }
.lk-land .lk-login .lk-forgot { background: none; padding: 4px 0; color: var(--wn-500); font-weight: 600; font-size: 12.5px; display: inline-flex; align-items: center; }
.lk-land .lk-login .lk-forgot:hover { background: none; color: #0c151b; text-decoration: underline; }
.lk-land .lk-login .lk-submit { background: var(--y-400); color: #0c151b; padding: 16px; border-radius: 14px; font-weight: 800; font-size: 15px; border: 0; cursor: pointer; box-shadow: var(--shadow-md); transition: .18s; font-family: inherit; }
.lk-land .lk-login .lk-submit:hover { background: var(--y-300); transform: translateY(-2px); }
.lk-land .lk-login .lk-google { background: #fff; color: #0c151b; padding: 13px; border-radius: 14px; font-weight: 600; font-size: 13.5px; border: 1.5px solid var(--wn-200); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; transition: .18s; font-family: inherit; }
.lk-land .lk-login .lk-google:hover { border-color: var(--y-400); }
.lk-land .lk-login .signin-google-hidden { display: none; }
.lk-land .lk-login .alert { font-size: 12.5px; padding: 10px 14px; border-radius: 12px; margin: 0; }

/* Dark stats bar (overlapping hero bottom) */
.lk-land .lk-stats { max-width: 1180px; margin: -50px auto 0; background: #0c151b; border-radius: 24px; padding: 28px 36px; display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 24px; align-items: center; box-shadow: 0 30px 60px rgba(12, 21, 27, .3); position: relative; z-index: 3; }
@media (max-width: 768px) { .lk-land .lk-stats { grid-template-columns: 1fr 1fr; gap: 18px; padding: 24px; margin: -40px 16px 0; } .lk-land .lk-stats .lk-stats-cta { grid-column: 1 / -1; text-align: center; } }
.lk-land .lk-stats .lk-stats-item .v { font-family: var(--font-en); font-weight: 800; font-size: 32px; color: #fff; letter-spacing: -0.02em; line-height: 1; }
.lk-land .lk-stats .lk-stats-item .v em { font-style: normal; color: #ffc107; }
.lk-land .lk-stats .lk-stats-item .l { font-size: 12.5px; color: rgba(255, 255, 255, .6); margin-top: 5px; font-weight: 500; }
.lk-land .lk-stats .lk-stats-cta { background: var(--y-400); color: #0c151b; padding: 14px 26px; border-radius: 14px; font-weight: 800; font-size: 13.5px; box-shadow: 0 4px 14px rgba(0, 0, 0, .22); cursor: pointer; transition: .18s; display: inline-flex; align-items: center; justify-content: center; }
.lk-land .lk-stats .lk-stats-cta:hover { transform: translateY(-2px); color: #0c151b; }

/* Sections that fall after the hero — flow on yellow page bg directly (no white card frame).
 * Internal cards (.wcu-box, dark stat bars, IG card) provide their own visual weight. */
.lk-land .home-section { background: transparent; max-width: 1280px; margin: 0 auto; padding: 56px 32px; color: #0c151b; }
.lk-land .home-section + .home-section { margin-top: 0; padding-top: 24px; }
@media (max-width: 768px) { .lk-land .home-section { padding: 36px 18px; } }

/* Text contrast — yellow page bg + dark text reads well */
.lk-land .home-section { color: #0c151b; }
.lk-land .home-section .home-title h2,
.lk-land .home-section .hsl-title h2,
.lk-land .home-section .hsl-text,
.lk-land .home-section .hsl-item .hsli-title,
.lk-land .home-section .hsl-item .hsli-text,
.lk-land .home-section h1,
.lk-land .home-section h2:not(.lk-stats-h2),
.lk-land .home-section h3,
.lk-land .home-section h4,
.lk-land .home-section p:not(.lk-hero-lead) { color: #0c151b; }
/* Platform tabs (.hsobs .hsob) — legacy color #C9D2DC won't read on white. */
.lk-land .home-section .hsobs .hsob { color: #3d4249 !important; }
.lk-land .home-section .hsobs .hsob.active { color: #0c151b !important; }
/* Stat items inside .home-section (.hfs-count, .hfs-title) — were intended for yellow body. */
.lk-land .home-section .hfs-count { color: #0c151b; }
.lk-land .home-section .hfs-title { color: #6b7280; }
/* Inside .wcu-box keep original dark bg + white text — they have their own card. */
.lk-land .home-section .wcu-box,
.lk-land .home-section .wcu-box .wcu-title,
.lk-land .home-section .wcu-box .wcu-text { color: inherit; }
.lk-land .home-section .wcu-content .wcu-conteiner .wcu-box .wcu-title { color: #fff; }
.lk-land .home-section .wcu-content .wcu-conteiner .wcu-box .wcu-text { color: #9799A3; }

/* ========================================================================== */
/* ----- Page content area (.l2v2-content) — modernize cards, tabs, forms --- */
/* ========================================================================== */

/* Background of authenticated pages — token-aware */
body#appDashboard.l2v2 .appContent { background: transparent; }
body#appDashboard.l2v2 { background: var(--bg); }

/* Generic card refresh */
.l2v2 .l2v2-content .card,
.l2v2 .l2v2-content .card-border,
.l2v2 .l2v2-content .card-no-box {
    background: var(--side);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-sm);
    color: var(--ink);
}
/* Card header — match design's yellow gradient bar with circle decoration. Pattern
 * applies to neworder.twig order form, addfunds.twig, sidecard "สิ่งน่ารู้". */
.l2v2 .l2v2-content .card-header,
.l2v2 .l2v2-content .card .card-header {
    background: var(--side);
    color: var(--ink);
    border-bottom: 1px solid var(--line);
    padding: 16px 20px;
    position: relative;
    overflow: hidden;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
}
.l2v2 .l2v2-content .card-header::before {
    display: none;
}
.l2v2 .l2v2-content .card-header > * { position: relative; z-index: 1; }
.l2v2 .l2v2-content .card-header h2,
.l2v2 .l2v2-content .card-header h3,
.l2v2 .l2v2-content .card-header .card-title {
    color: var(--brandText) !important;
    font-weight: 800 !important;
}
/* Stat cards (.cnb-1..4) shouldn't get the yellow header — they have card-no-box */
.l2v2 .l2v2-content .card.card-no-box,
.l2v2 .l2v2-content .card.card-no-box .card-header { background: var(--side); }
.l2v2 .l2v2-content .card.card-no-box .card-header { color: var(--ink); border-bottom: 1px solid var(--line); border-radius: 0; }
.l2v2 .l2v2-content .card.card-no-box .card-header::before { display: none; }
.l2v2 .l2v2-content .card-title { color: var(--ink); font-weight: 700; }
.l2v2 .l2v2-content .card-body { padding: 22px; }

/* Stat cards (cnb-1..4) — wrap content in ring + sparkline DNA */
.l2v2 .l2v2-content .cb-content { padding: 22px 24px 24px; position: relative; overflow: hidden; }
.l2v2 .l2v2-content .cnb-content > .row { gap: 0; align-items: center; position: relative; z-index: 2; }
.l2v2 .l2v2-content .cnb-circle {
    width: 64px; height: 64px; border-radius: 50%;
    border: 2.5px solid var(--ring-blue);
    color: var(--ring-blue);
    display: grid; place-items: center; font-size: 26px;
    background: var(--side);
    flex-shrink: 0;
}
/* Stat card layout grid (4 cards in row on desktop) */
.l2v2 .l2v2-content .row.row-cols-lg-4 > .col,
.l2v2 .l2v2-content .row > .col-lg-3 { display: flex; }
.l2v2 .l2v2-content .row.row-cols-lg-4 > .col > .card,
.l2v2 .l2v2-content .row > .col-lg-3 > .card { flex: 1; }
/* Stat card body padding + sparkline backdrop (compact, matches design) */
.l2v2 .l2v2-content .card.card-border.card-no-box .cb-content {
    padding: 18px 20px 20px;
    position: relative;
    overflow: hidden;
    border-radius: var(--r-xl);
}
.l2v2 .l2v2-content .card.card-border.card-no-box .cb-content::after {
    /* Sparkline wave bg using SVG data URI — subtle, occupies bottom 50% only */
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 50%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: bottom center;
    pointer-events: none;
    z-index: 1;
    opacity: .35;
}
/* Compact stat card heights — total ~110-120px not 190px */
.l2v2 .l2v2-content .card.card-border.card-no-box .cnb-circle {
    width: 56px; height: 56px; font-size: 22px; border-width: 2.25px;
}
.l2v2 .l2v2-content .card.card-border.card-no-box h2 { font-size: 12.5px; }
.l2v2 .l2v2-content .card.card-border.card-no-box h3 { font-size: 22px; line-height: 1.05; }
.l2v2 .l2v2-content .nbox-value { font-size: 22px; }
.l2v2 .l2v2-content .cnb-1 .cb-content::after { background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 450 80' preserveAspectRatio='none'%3E%3Cpath d='M0,55 C50,30 100,75 150,40 C200,10 250,60 300,35 C350,15 400,50 450,40 L450,80 L0,80 Z' fill='%232A62FF' opacity='0.17'/%3E%3Cpath d='M0,55 C50,30 100,75 150,40 C200,10 250,60 300,35 C350,15 400,50 450,40' stroke='%232A62FF' stroke-width='1.5' fill='none' opacity='0.42'/%3E%3C/svg%3E"); }
.l2v2 .l2v2-content .cnb-2 .cb-content::after { background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 450 80' preserveAspectRatio='none'%3E%3Cpath d='M0,55 C50,30 100,75 150,40 C200,10 250,60 300,35 C350,15 400,50 450,40 L450,80 L0,80 Z' fill='%23FF2828' opacity='0.17'/%3E%3Cpath d='M0,55 C50,30 100,75 150,40 C200,10 250,60 300,35 C350,15 400,50 450,40' stroke='%23FF2828' stroke-width='1.5' fill='none' opacity='0.42'/%3E%3C/svg%3E"); }
.l2v2 .l2v2-content .cnb-3 .cb-content::after { background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 450 80' preserveAspectRatio='none'%3E%3Cpath d='M0,55 C50,30 100,75 150,40 C200,10 250,60 300,35 C350,15 400,50 450,40 L450,80 L0,80 Z' fill='%2328F1AA' opacity='0.17'/%3E%3Cpath d='M0,55 C50,30 100,75 150,40 C200,10 250,60 300,35 C350,15 400,50 450,40' stroke='%2328F1AA' stroke-width='1.5' fill='none' opacity='0.42'/%3E%3C/svg%3E"); }
.l2v2 .l2v2-content .cnb-4 .cb-content::after { background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 450 80' preserveAspectRatio='none'%3E%3Cpath d='M0,55 C50,30 100,75 150,40 C200,10 250,60 300,35 C350,15 400,50 450,40 L450,80 L0,80 Z' fill='%23A12AFF' opacity='0.17'/%3E%3Cpath d='M0,55 C50,30 100,75 150,40 C200,10 250,60 300,35 C350,15 400,50 450,40' stroke='%23A12AFF' stroke-width='1.5' fill='none' opacity='0.42'/%3E%3C/svg%3E"); }
/* Stat card #1 (Balance) needs blue ring like design */
.l2v2 .l2v2-content .cnb-1 .cnb-circle { color: var(--ring-blue); border-color: var(--ring-blue); }
.l2v2 .l2v2-content .cnb-2 .cnb-circle,
.l2v2 .l2v2-content .cnb-2 .cnb-content::before { color: var(--ring-red); border-color: var(--ring-red); }
.l2v2 .l2v2-content .cnb-3 .cnb-circle,
.l2v2 .l2v2-content .cnb-3 .cnb-content::before { color: var(--ring-green); border-color: var(--ring-green); }
.l2v2 .l2v2-content .cnb-4 .cnb-circle,
.l2v2 .l2v2-content .cnb-4 .cnb-content::before { color: var(--ring-purple); border-color: var(--ring-purple); }

.l2v2 .l2v2-content .card.card-border.card-no-box {
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.l2v2 .l2v2-content .card.card-border.card-no-box:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    border-color: var(--line2);
}
.l2v2 .l2v2-content .cb-content h2 { margin: 0; font-size: 13px; color: var(--ink2); font-weight: 500; }
.l2v2 .l2v2-content .cb-content h3 { margin: 4px 0 0; font-size: 26px; font-weight: 700; color: var(--ink); font-family: var(--font-en); letter-spacing: -0.02em; line-height: 1.05; }
.l2v2 .l2v2-content .nbox-value { font-family: var(--font-en); font-weight: 700; }

/* Stat card badges (Dashboard / Use Points) — must be CLICKABLE.
 * Issue: sparkline ::after at z-index:1 + .cnb-content row at z-index:2 + my
 * earlier badge z-index:3 was too low if any parent created stacking context.
 * Fix: bump to z-index:20 + explicit pointer-events:auto + position:relative
 * on parent .card to ensure containing block. */
.l2v2 .l2v2-content .card.nwo-pos-rel,
.l2v2 .l2v2-content .card.card-no-box.nwo-pos-rel { position: relative !important; overflow: visible !important; }
.l2v2 .l2v2-content .nwo-card-badge-wrap {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    z-index: 20 !important;
    pointer-events: auto !important;
}
.l2v2 .l2v2-content .nwo-card-badge-btn {
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 11px; font-weight: 700;
    border: 0;
    display: inline-flex; align-items: center; gap: 5px;
    cursor: pointer;
    pointer-events: auto !important;
    position: relative; z-index: 21;
}
/* Also ensure sparkline doesn't intercept clicks anywhere */
.l2v2 .l2v2-content .card.card-border.card-no-box .cb-content::after,
.l2v2 .l2v2-content .cb-content::after { pointer-events: none !important; }
.l2v2 .l2v2-content .nwo-card-badge-btn--green { background: rgba(40, 241, 170, .15); color: var(--success); }
.l2v2 .l2v2-content .nwo-card-badge-btn--gold { background: rgba(255, 193, 7, .18); color: var(--warn); }

/* Order form tabs */
.l2v2 .l2v2-content .nwoNav {
    background: var(--side2); border: 1px solid var(--line); border-radius: 12px;
    padding: 4px; display: inline-flex; gap: 2px; margin: 0;
}
.l2v2 .l2v2-content .nwoNavLink {
    background: transparent; border: 0; padding: 8px 16px; border-radius: 9px;
    font-size: 12.5px; font-weight: 700; color: var(--inkDim); cursor: pointer;
    font-family: inherit; transition: .14s;
}
.l2v2 .l2v2-content .nwoNavLink:hover { color: var(--ink); }
.l2v2 .l2v2-content .nwoNavLink.active { background: var(--brand); color: var(--brandText); box-shadow: var(--shadow-sm); }

/* Service detail items (Start time / quality / speed / etc.) */
.l2v2 .l2v2-content .nwoDeIt {
    background: var(--side2); border: 1px solid var(--line); border-radius: 14px;
    padding: 12px 14px; display: flex; align-items: center; gap: 12px; min-height: 52px;
}
.l2v2 .l2v2-content .nwoDeIt .icon { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 14px; flex-shrink: 0; }
.l2v2 .l2v2-content .nwoDeIt .icon.primary-bg { background: var(--info); }
.l2v2 .l2v2-content .nwoDeIt .icon.pink-bg { background: #ec4899; }
.l2v2 .l2v2-content .nwoDeIt .icon.danger-bg { background: var(--ring-red); }
.l2v2 .l2v2-content .nwoDeIt .icon.success-bg { background: var(--success); }
.l2v2 .l2v2-content .nwoDeIt .icon.orange-bg { background: #ff9800; }
.l2v2 .l2v2-content .nwoDeIt .icon.purple-bg { background: var(--ring-purple); }
.l2v2 .l2v2-content .nwoDeIt .text { font-size: 13px; color: var(--ink); font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.l2v2 .l2v2-content .nwoDeIt.description { padding: 16px 18px; align-items: flex-start; }
.l2v2 .l2v2-content .nwoDeIt .job-detail-text { font-size: 13px; line-height: 1.6; color: var(--ink2); }

/* Form controls inside content */
.l2v2 .l2v2-content .form-control {
    background: var(--side2); border: 1px solid var(--line); border-radius: 12px;
    padding: 12px 14px; font-size: 13px; color: var(--ink);
    transition: .14s;
}
.l2v2 .l2v2-content .form-control:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(255, 193, 7, .15); background: var(--side); color: var(--ink); }
.l2v2 .l2v2-content .form-label { font-size: 13px; font-weight: 600; color: var(--ink); display: inline-flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.l2v2 .l2v2-content .badge-step { width: 22px; height: 22px; border-radius: 50%; background: var(--brand); color: var(--brandText); font-size: 11px; font-weight: 800; display: inline-grid; place-items: center; font-family: var(--font-en); }

/* Primary CTA */
.l2v2 .l2v2-content .btn-primary {
    background: var(--brand);
    color: var(--brandText);
    border: 0;
    border-radius: var(--r-lg);
    font-weight: 700;
    transition: .18s;
}
.l2v2 .l2v2-content .btn-primary:hover { background: #e8a800; transform: translateY(-1px); box-shadow: var(--shadow-yellow); color: var(--brandText); }
.l2v2 .l2v2-content .btn-100 { width: 100%; padding: 14px; font-size: 14px; }

/* Dashboard head wrapper (used on addfunds, faq, affiliates) */
.l2v2 .l2v2-content .dashboard-head-wrapper { padding: 0; margin-bottom: 18px; }
.l2v2 .l2v2-content .dashboard-head {
    background: var(--side); border: 1px solid var(--line); border-radius: var(--r-xl);
    padding: 22px 26px; display: flex; align-items: center; gap: 18px; position: relative; overflow: hidden;
}
.l2v2 .l2v2-content .dashboard-head::before {
    content: ''; position: absolute; right: -40px; top: -60px;
    width: 220px; height: 220px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 193, 7, .15), transparent 70%);
    pointer-events: none;
}
.l2v2 .l2v2-content .dashboard-head .dhead-icon {
    width: 60px; height: 60px; border-radius: 50%;
    border: 2.5px solid var(--ring-blue); color: var(--ring-blue);
    display: grid; place-items: center; font-size: 26px; flex-shrink: 0;
    background: var(--side);
}
/* Per-page icon colors (matches design ring colors) */
.l2v2 .l2v2-page-orders     .dashboard-head .dhead-icon { border-color: var(--success);     color: var(--success); }
.l2v2 .l2v2-page-services   .dashboard-head .dhead-icon { border-color: var(--ring-purple); color: var(--ring-purple); }
.l2v2 .l2v2-page-drip       .dashboard-head .dhead-icon { border-color: var(--ring-blue);   color: var(--ring-blue); }
.l2v2 .l2v2-page-subs       .dashboard-head .dhead-icon { border-color: var(--ring-purple); color: var(--ring-purple); }
.l2v2 .l2v2-page-tickets    .dashboard-head .dhead-icon { border-color: var(--ring-red);    color: var(--ring-red); }
.l2v2 .l2v2-page-faq        .dashboard-head .dhead-icon { border-color: var(--ring-purple); color: var(--ring-purple); }
.l2v2 .l2v2-page-addfunds   .dashboard-head .dhead-icon { border-color: var(--ring-blue);   color: var(--ring-blue); }
.l2v2 .l2v2-page-affiliates .dashboard-head .dhead-icon { border-color: var(--brand);       color: var(--brand); }
.l2v2 .l2v2-content .dashboard-head .dhead-body { flex: 1; min-width: 0; }
.l2v2 .l2v2-content .dashboard-head .dhead-body h1,
.l2v2 .l2v2-content .dashboard-head .dhead-body h2 { margin: 0; font-size: 22px; font-weight: 800; color: var(--ink); letter-spacing: -0.01em; }
.l2v2 .l2v2-content .dashboard-head .dhead-body p { margin: 4px 0 0; font-size: 13px; color: var(--inkDim); }

/* FAQ accordion (sidebar info) */
.l2v2 .l2v2-content .faq-ss-tabs { padding: 0; }
.l2v2 .l2v2-content .home-ss-tab {
    border: 1px solid var(--line); border-radius: 12px;
    background: var(--side2); margin-bottom: 8px; overflow: hidden;
    transition: border-color .14s;
}
.l2v2 .l2v2-content .home-ss-tab:hover { border-color: var(--brand); }
.l2v2 .l2v2-content .home-ss-tab.active { border-color: var(--brand); }
.l2v2 .l2v2-content .home-ss-tab .ss-tab-head { padding: 14px 18px; cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.l2v2 .l2v2-content .home-ss-tab .ss-tab-head .right-p { color: var(--ink2); }
.l2v2 .l2v2-content .home-ss-tab .ss-tab-head .fa-minus { display: none; }
.l2v2 .l2v2-content .home-ss-tab.active .ss-tab-head .fa-plus { display: none; }
.l2v2 .l2v2-content .home-ss-tab.active .ss-tab-head .fa-minus { display: inline-block; color: var(--brand); }
.l2v2 .l2v2-content .home-ss-tab .ss-tab-content { padding: 0 18px 14px; font-size: 12.5px; color: var(--inkDim); line-height: 1.6; }

/* Banners (.alert / .nwo-alert-*) — match design rounded 16px + close X + CTA.
 * NOTE: neworder.twig markup has BOTH .alert-warning AND .nwo-alert-success/danger
 * on the same element. The .nwo-alert-* (semantic) must always win over the
 * Bootstrap .alert-warning (which is yellow/orange). Use compound selectors
 * with extra specificity. */
.l2v2 .l2v2-content .alert {
    border: 0;
    border-radius: var(--r-xl);
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
    color: #fff;
    font-size: 13.5px;
}
/* Generic Bootstrap variants first (default fallback) */
.l2v2 .l2v2-content .alert-warning { background: linear-gradient(90deg, #f59e0b, #d97706); color: #fff; }
.l2v2 .l2v2-content .alert-info    { background: linear-gradient(90deg, #2A62FF, #1f5dcf); color: #fff; }
/* Semantic .nwo-alert-* wins (compound selector + later in file) */
.l2v2 .l2v2-content .alert.nwo-alert-success,
.l2v2 .l2v2-content .alert-warning.nwo-alert-success,
.l2v2 .l2v2-content .nwo-alert-success { background: linear-gradient(90deg, #10b981, #059669) !important; color: #fff !important; }
.l2v2 .l2v2-content .alert.nwo-alert-danger,
.l2v2 .l2v2-content .alert-warning.nwo-alert-danger,
.l2v2 .l2v2-content .alert-success.nwo-alert-danger,
.l2v2 .l2v2-content .nwo-alert-danger { background: linear-gradient(90deg, #ef4444, #dc2626) !important; color: #fff !important; }
.l2v2 .l2v2-content .alert.nwo-alert-warning,
.l2v2 .l2v2-content .alert-warning.nwo-alert-warning,
.l2v2 .l2v2-content .nwo-alert-warning { background: linear-gradient(90deg, #f59e0b, #d97706) !important; color: #fff !important; }
.l2v2 .l2v2-content .alert-success { background: linear-gradient(90deg, #10b981, #059669); color: #fff; }
.l2v2 .l2v2-content .alert-danger  { background: linear-gradient(90deg, #ef4444, #dc2626); color: #fff; }
.l2v2 .l2v2-content .nwo-alert-info { background: linear-gradient(90deg, #2A62FF, #1f5dcf); color: #fff; }
.l2v2 .l2v2-content .alert .close,
.l2v2 .l2v2-content .alert .btn-close {
    background: transparent; border: 0; color: rgba(255, 255, 255, .7);
    font-size: 18px; padding: 4px; cursor: pointer; margin-left: auto;
}
.l2v2 .l2v2-content .alert .close:hover { color: #fff; }
.l2v2 .l2v2-content .alert .btn-line,
.l2v2 .l2v2-content .alert a.line {
    background: #fff; color: #06C755; padding: 7px 14px;
    border-radius: 999px; font-size: 12px; font-weight: 700;
    display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
    border: 1px solid rgba(255, 255, 255, .25);
}

/* ----- Add Funds (legacy .af-pay-grid namespace) ----- */
.l2v2 .l2v2-page-addfunds .af-pay-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px;
}
.l2v2 .l2v2-page-addfunds .af-pay-card {
    background: var(--side2); border: 2px solid var(--line);
    border-radius: var(--r-lg); padding: 18px 14px;
    cursor: pointer; transition: .18s;
    text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px;
    position: relative;
}
.l2v2 .l2v2-page-addfunds .af-pay-card:hover { border-color: var(--brand); transform: translateY(-2px); }
.l2v2 .l2v2-page-addfunds .af-pay-card.af-pay-active {
    border-color: var(--brand); background: rgba(255, 193, 7, .08);
    box-shadow: 0 10px 24px rgba(255, 193, 7, .18);
}
.l2v2 .l2v2-page-addfunds .af-pay-card.af-pay-active::after {
    content: '✓'; position: absolute; top: 8px; right: 10px;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--brand); color: var(--brandText);
    display: grid; place-items: center; font-size: 12px; font-weight: 800;
}
.l2v2 .l2v2-page-addfunds .af-pay-icon { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; font-size: 22px; color: #fff; background: linear-gradient(135deg, var(--info), #0042c4); }
.l2v2 .l2v2-page-addfunds .af-pay-name { font-size: 13px; font-weight: 700; color: var(--ink); }
.l2v2 .l2v2-page-addfunds .af-pay-bonus { font-size: 10px; color: var(--success); font-weight: 600; background: rgba(16, 185, 129, .1); padding: 2px 8px; border-radius: 999px; }

.l2v2 .l2v2-page-addfunds .payment-amount-input,
.l2v2 .l2v2-page-addfunds .af-amount-force-visible input {
    background: var(--side2); border: 1.5px solid var(--line); border-radius: var(--r-lg);
    padding: 16px 20px; font-family: var(--font-en); font-weight: 700; font-size: 22px;
    color: var(--ink); width: 100%; outline: 0; transition: .14s;
}
.l2v2 .l2v2-page-addfunds .payment-amount-input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(255, 193, 7, .15); }

.l2v2 .l2v2-page-addfunds .bonus-result-minimal,
.l2v2 .l2v2-page-addfunds .bonus-summary {
    background: linear-gradient(135deg, rgba(255, 193, 7, .1), rgba(255, 193, 7, .04));
    border: 1.5px dashed rgba(255, 193, 7, .4); border-radius: var(--r-lg);
    padding: 18px 20px; color: var(--ink);
}
.l2v2 .l2v2-page-addfunds .bonus-total-value { font-family: var(--font-en); font-weight: 800; font-size: 24px; color: var(--ink); letter-spacing: -0.02em; }
.l2v2 .l2v2-page-addfunds .bonus-breakdown-text,
.l2v2 .l2v2-page-addfunds .bonus-note { font-size: 11.5px; color: var(--inkDim); margin-top: 6px; }

.l2v2 .l2v2-page-addfunds .af-terms-agree {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 14px; background: var(--side2); border: 1px solid var(--line);
    border-radius: var(--r-lg);
}
.l2v2 .l2v2-page-addfunds .af-terms-label { font-size: 12.5px; line-height: 1.55; color: var(--ink2); }
.l2v2 .l2v2-page-addfunds .af-terms-warn { background: rgba(229, 72, 72, .1); border: 1px solid rgba(229, 72, 72, .3); color: var(--danger); padding: 10px 14px; border-radius: 10px; font-size: 12.5px; }

/* ========================================================================== */
/* ----- Orders / Drip / Subs (shared op-* + orders-nav structure) --------- */
/* ========================================================================== */
.l2v2 .l2v2-content .orders-nav-wrapper { padding: 0; margin-bottom: 16px; }
.l2v2 .l2v2-content .orders-nav {
    background: var(--side); border: 1px solid var(--line);
    border-radius: var(--r-xl); padding: 14px 18px;
    display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
}
.l2v2 .l2v2-content .orders-nav-link {
    padding: 8px 16px; border-radius: var(--r-md);
    color: var(--ink2); font-size: 13px; font-weight: 600; cursor: pointer;
    transition: .14s; text-decoration: none; border: 1px solid transparent;
}
.l2v2 .l2v2-content .orders-nav-link:hover { background: var(--side2); color: var(--ink); border-color: var(--line); }
.l2v2 .l2v2-content .orders-nav-link.active { background: var(--brand); color: var(--brandText); box-shadow: var(--shadow-sm); }
.l2v2 .l2v2-content .op-search-box { flex: 1; min-width: 220px; }
.l2v2 .l2v2-content .op-search-box input { width: 100%; }

.l2v2 .l2v2-content .op-orders-wrapper { display: flex; flex-direction: column; gap: 14px; }
.l2v2 .l2v2-content .op-card {
    background: var(--side); border: 1px solid var(--line);
    border-radius: var(--r-xl); overflow: hidden;
    transition: border-color .14s, transform .14s, box-shadow .14s;
}
.l2v2 .l2v2-content .op-card:hover { border-color: var(--line2); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.l2v2 .l2v2-content .op-card--top { padding: 16px 20px; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.l2v2 .l2v2-content .op-service-title { font-size: 14px; font-weight: 700; color: var(--ink); }
.l2v2 .l2v2-content .op-date { font-size: 12px; color: var(--inkDim); }
.l2v2 .l2v2-content .op-order-link { color: var(--brand); font-family: var(--font-mono); font-size: 12px; }
.l2v2 .l2v2-content .op-card--bottom { padding: 14px 20px; display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }

.l2v2 .l2v2-content .op-stats,
.l2v2 .l2v2-content .op-stats-sm {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 12px; border-radius: 999px;
    font-size: 12px; font-weight: 700;
}
.l2v2 .l2v2-content .op-stats.primary,    .l2v2 .l2v2-content .op-stats-sm.primary    { background: rgba(40, 241, 170, .12); color: var(--success); }
.l2v2 .l2v2-content .op-stats.secondary,  .l2v2 .l2v2-content .op-stats-sm.secondary  { background: rgba(42, 98, 255, .12); color: var(--info); }
.l2v2 .l2v2-content .op-stats.info,       .l2v2 .l2v2-content .op-stats-sm.info       { background: rgba(255, 193, 7, .15); color: var(--warn); }
.l2v2 .l2v2-content .op-stats.warning,    .l2v2 .l2v2-content .op-stats-sm.warning    { background: rgba(255, 193, 7, .15); color: var(--warn); }
.l2v2 .l2v2-content .op-stats.danger,     .l2v2 .l2v2-content .op-stats-sm.danger     { background: rgba(229, 72, 72, .12); color: var(--danger); }
.l2v2 .l2v2-content .op-stats-btn { background: var(--side2); border: 1px solid var(--line); color: var(--ink); padding: 8px 14px; border-radius: var(--r-md); font-size: 12px; font-weight: 700; cursor: pointer; transition: .14s; }
.l2v2 .l2v2-content .op-stats-btn:hover { background: var(--brand); color: var(--brandText); border-color: var(--brand); }
.l2v2 .l2v2-content .op-stats-btn.danger-btn:hover { background: var(--danger); color: #fff; border-color: var(--danger); }
.l2v2 .l2v2-content .cs-btn { background: var(--info); color: #fff; border-color: var(--info); }
.l2v2 .l2v2-content .cs-btn:hover { background: #1f5dcf; }

.l2v2 .l2v2-content .op-item { display: flex; flex-direction: column; gap: 2px; min-width: 120px; }
.l2v2 .l2v2-content .op-item .label,
.l2v2 .l2v2-content .op-item .ttl { font-size: 11px; color: var(--inkDim); font-weight: 600; }
.l2v2 .l2v2-content .op-item .value,
.l2v2 .l2v2-content .op-item .val { font-family: var(--font-en); font-weight: 700; font-size: 14px; color: var(--ink); }

.l2v2 .l2v2-content .subcard-stats-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 14px; padding: 16px 20px; background: var(--side2); border-top: 1px solid var(--line);
}
.l2v2 .l2v2-content .subcard-stat-label { font-size: 11px; color: var(--inkDim); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.l2v2 .l2v2-content .subcard-stat-value { font-family: var(--font-en); font-weight: 700; font-size: 16px; color: var(--ink); margin-top: 2px; }
.l2v2 .l2v2-content .subcard-actions { display: flex; gap: 8px; padding: 14px 20px; flex-wrap: wrap; }

/* ========================================================================== */
/* ----- Services page ------------------------------------------------------ */
/* ========================================================================== */
.l2v2 .l2v2-page-services .services-head-row {
    background: var(--side); border: 1px solid var(--line); border-radius: var(--r-lg);
    padding: 12px 18px; display: flex; gap: 16px; align-items: center;
    font-size: 12px; font-weight: 700; color: var(--inkDim); text-transform: uppercase;
}
.l2v2 .l2v2-page-services .services-wrapper { display: flex; flex-direction: column; gap: 14px; }
.l2v2 .l2v2-page-services .si-wrapper {
    background: var(--side); border: 1px solid var(--line); border-radius: var(--r-xl);
    overflow: hidden;
}
.l2v2 .l2v2-page-services .si-header {
    background: linear-gradient(95deg, #ffc107 0%, #ffce3a 60%, #ffc107 100%);
    color: #0c151b; padding: 14px 22px;
    display: flex; align-items: center; gap: 12px; font-weight: 800; font-size: 16px;
    position: relative; overflow: hidden;
}
.l2v2 .l2v2-page-services .si-header::before {
    content: ''; position: absolute; right: -30px; top: -40px;
    width: 160px; height: 160px; border-radius: 50%;
    background: rgba(255, 255, 255, .18); pointer-events: none;
}
.l2v2 .l2v2-page-services .category-icon-img,
.l2v2 .l2v2-page-services .si-header .category-card { z-index: 1; }
.l2v2 .l2v2-page-services .service-item {
    padding: 12px 22px; border-top: 1px solid var(--line); transition: background .14s;
}
.l2v2 .l2v2-page-services .service-item:hover { background: var(--side2); }
.l2v2 .l2v2-page-services .s-row { display: grid; grid-template-columns: 40px 60px 1fr 80px 80px 80px 90px 60px; gap: 12px; align-items: center; font-size: 13px; color: var(--ink); }
@media (max-width: 992px) { .l2v2 .l2v2-page-services .s-row { grid-template-columns: 1fr 1fr; gap: 8px; } }
.l2v2 .l2v2-page-services .s-col-id { font-family: var(--font-mono); color: var(--inkDim); font-weight: 700; }
.l2v2 .l2v2-page-services .s-title { font-weight: 600; }
.l2v2 .l2v2-page-services .s-col-c { font-family: var(--font-en); font-weight: 700; }
.l2v2 .l2v2-page-services .s-col-btn .btn { padding: 7px 14px; border-radius: var(--r-md); font-size: 12px; font-weight: 700; }
.l2v2 .l2v2-page-services .favorite-active { color: var(--brand); }
.l2v2 .l2v2-page-services .nothing-found { padding: 48px; text-align: center; color: var(--inkDim); }

/* ========================================================================== */
/* ----- Affiliates page ---------------------------------------------------- */
/* ========================================================================== */
.l2v2 .l2v2-page-affiliates .aff-fee-section,
.l2v2 .l2v2-page-affiliates .modern-card {
    background: var(--side); border: 1px solid var(--line);
    border-radius: var(--r-xl); padding: 24px; margin-bottom: 18px;
}
.l2v2 .l2v2-page-affiliates .aff-tier-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.l2v2 .l2v2-page-affiliates .aff-tier-card {
    background: var(--side2); border: 1.5px solid var(--line);
    border-radius: var(--r-lg); padding: 18px; text-align: center;
    transition: .18s; position: relative;
}
.l2v2 .l2v2-page-affiliates .aff-tier-card:hover { transform: translateY(-2px); border-color: var(--brand); }
.l2v2 .l2v2-page-affiliates .aff-tier-active-new,
.l2v2 .l2v2-page-affiliates .aff-tier-active-gold,
.l2v2 .l2v2-page-affiliates .aff-tier-active-platinum,
.l2v2 .l2v2-page-affiliates .aff-tier-active-vip { border-color: var(--brand); background: rgba(255, 193, 7, .08); }
.l2v2 .l2v2-page-affiliates .aff-tier-name { font-weight: 800; font-size: 14px; color: var(--ink); }
.l2v2 .l2v2-page-affiliates .aff-tier-rate { font-family: var(--font-en); font-weight: 800; font-size: 22px; color: var(--brand); margin-top: 6px; }
.l2v2 .l2v2-page-affiliates .aff-tier-rate-free { color: var(--success); }
.l2v2 .l2v2-page-affiliates .aff-tier-sublabel { font-size: 11px; color: var(--inkDim); margin-top: 4px; }
.l2v2 .l2v2-page-affiliates .referral-section { background: linear-gradient(135deg, var(--n-900) 0%, var(--n-700) 50%, var(--n-900) 100%); color: #fff; border-color: var(--n-700); position: relative; overflow: hidden; }
.l2v2 .l2v2-page-affiliates .referral-section::before { content: ''; position: absolute; right: -50px; top: -50px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 193, 7, .25), transparent 60%); pointer-events: none; }
.l2v2 .l2v2-page-affiliates .referral-section .section-title { color: #fff; font-weight: 800; }
.l2v2 .l2v2-page-affiliates .link-input { background: rgba(255, 255, 255, .06); border: 1.5px dashed rgba(255, 255, 255, .18); color: #fff; padding: 12px 16px; border-radius: var(--r-md); font-family: var(--font-mono); }
.l2v2 .l2v2-page-affiliates .copy-btn { background: var(--brand); color: var(--brandText); padding: 10px 16px; border-radius: var(--r-md); font-weight: 700; font-size: 12px; border: 0; }
.l2v2 .l2v2-page-affiliates .aft-box {
    background: var(--side); border: 1px solid var(--line);
    border-radius: var(--r-lg); padding: 18px;
}
.l2v2 .l2v2-page-affiliates .custom-affiliate-table { width: 100%; border-collapse: collapse; }
.l2v2 .l2v2-page-affiliates .custom-affiliate-table th,
.l2v2 .l2v2-page-affiliates .custom-affiliate-table td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--line); }
.l2v2 .l2v2-page-affiliates .custom-affiliate-table th { font-size: 11px; font-weight: 800; color: var(--inkDim); text-transform: uppercase; letter-spacing: .08em; }
.l2v2 .l2v2-page-affiliates .custom-affiliate-table td { font-size: 13px; color: var(--ink); }
.l2v2 .l2v2-page-affiliates .badge-approved { background: rgba(40, 241, 170, .12); color: var(--success); padding: 4px 12px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.l2v2 .l2v2-page-affiliates .badge-pending  { background: rgba(255, 193, 7, .15); color: var(--warn); padding: 4px 12px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.l2v2 .l2v2-page-affiliates .badge-rejected { background: rgba(229, 72, 72, .12); color: var(--danger); padding: 4px 12px; border-radius: 999px; font-size: 11px; font-weight: 700; }

/* Withdrawal modals */
.l2v2 .l2v2-page-affiliates .aff-modal-content { background: var(--side); border: 1px solid var(--line); border-radius: var(--r-xl); color: var(--ink); }
.l2v2 .l2v2-page-affiliates .aff-modal-header { padding: 18px 22px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }
.l2v2 .l2v2-page-affiliates .aff-modal-title { color: var(--brand); font-weight: 800; font-size: 16px; }
.l2v2 .l2v2-page-affiliates .aff-modal-body { padding: 22px; }

/* ========================================================================== */
/* ----- Tickets page ------------------------------------------------------- */
/* ========================================================================== */
.l2v2 .l2v2-page-tickets .sc-sup-history {
    display: flex; flex-direction: column; gap: 10px;
    padding: 16px 0;
}
.l2v2 .l2v2-page-tickets .sc-sup-item {
    background: var(--side2); border: 1px solid var(--line);
    border-radius: var(--r-lg); padding: 14px 18px;
    display: flex; align-items: center; gap: 14px; cursor: pointer; transition: .14s;
}
.l2v2 .l2v2-page-tickets .sc-sup-item:hover { border-color: var(--brand); }
.l2v2 .l2v2-page-tickets .ticket-textarea { background: var(--side2); border: 1px solid var(--line); color: var(--ink); border-radius: var(--r-md); padding: 12px; font-family: inherit; min-height: 120px; }
.l2v2 .l2v2-page-tickets .upload-button { background: var(--side2); border: 1.5px dashed var(--line2); padding: 14px 18px; border-radius: var(--r-md); color: var(--ink2); cursor: pointer; }
.l2v2 .l2v2-page-tickets .upload-button:hover { border-color: var(--brand); }

/* ========================================================================== */
/* ----- Sign Up page ------------------------------------------------------- */
/* ========================================================================== */
.l2v2-page-signup.lk-land { background: #ffc107; min-height: 100vh; padding: 40px 0; }
.l2v2-page-signup .register-page-padded { padding: 40px 0; }
.l2v2-page-signup .login-text { color: #0c151b; font-size: 14px; margin-bottom: 24px; }
.l2v2-page-signup .col-xl-5.register-left {
    background: linear-gradient(135deg, #0c151b, #1a2532);
    border-radius: var(--r-2xl); padding: 60px;
    color: #fff; min-height: 480px;
    display: flex !important; flex-direction: column; justify-content: center;
    box-shadow: 0 28px 60px rgba(0, 0, 0, .25);
    position: relative; overflow: hidden;
}
.l2v2-page-signup .col-xl-5.register-left::before {
    content: 'LIKESTER'; position: absolute;
    bottom: 30px; left: 60px;
    font-family: var(--font-en); font-weight: 900;
    font-size: 64px; color: rgba(255, 193, 7, .12);
    letter-spacing: -0.02em;
}
.l2v2-page-signup .col-xl-5.py-5 {
    background: #fff; border-radius: var(--r-2xl); padding: 40px !important;
    box-shadow: 0 28px 60px rgba(0, 0, 0, .15);
}
.l2v2-page-signup .login-label { font-size: 12.5px; font-weight: 600; color: #0c151b; display: block; margin-bottom: 6px; }
.l2v2-page-signup .login-control { position: relative; }
.l2v2-page-signup .login-control .icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #6b7280; font-size: 16px; pointer-events: none; }
.l2v2-page-signup .login-control input { width: 100%; padding: 14px 16px 14px 42px; border-radius: var(--r-lg); border: 1.5px solid #e5e7eb; background: #f9fafb; font-size: 13.5px; color: #0c151b; outline: 0; transition: .14s; }
.l2v2-page-signup .login-control input:focus { border-color: #ffc107; background: #fff; box-shadow: 0 0 0 3px rgba(255, 193, 7, .2); }
.l2v2-page-signup .checkbox label { font-size: 12.5px; color: #0c151b; }
.l2v2-page-signup .checkbox a { color: #d97706; font-weight: 600; }
.l2v2-page-signup .btn-primary.btn-hero-dark { background: #ffc107; color: #0c151b; padding: 16px; border-radius: var(--r-lg); font-weight: 800; font-size: 15px; border: 0; box-shadow: 0 8px 20px rgba(255, 193, 7, .4); width: 100%; }
.l2v2-page-signup .btn-primary.btn-hero-dark:hover { background: #ffce3a; transform: translateY(-2px); color: #0c151b; }

/* ========================================================================== */
/* ----- Blog page ---------------------------------------------------------- */
/* ========================================================================== */
.l2v2-page-blog.lk-land { background: var(--bg, #ffc107); min-height: 100vh; }
.l2v2-page-blog .blog-header { padding: 60px 0; }
.l2v2-page-blog .blog-main-content { background: var(--side, #fff); border-radius: var(--r-2xl); padding: 40px; box-shadow: var(--shadow-md); color: var(--ink); }
.l2v2-page-blog .blog-posts-section { padding: 40px 0 80px; }
.l2v2-page-blog .blog-post-card {
    background: var(--side, #fff); border: 1px solid var(--line, #e9ecef);
    border-radius: var(--r-xl); overflow: hidden; transition: .18s;
    margin-bottom: 24px;
}
.l2v2-page-blog .blog-post-card:hover { transform: translateY(-3px); border-color: var(--brand, #ffc107); box-shadow: var(--shadow-lg); }
.l2v2-page-blog .blog-post-card .post-thumbnail img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.l2v2-page-blog .blog-post-card .post-content { padding: 20px 22px 24px; }
.l2v2-page-blog .blog-post-card h3 { margin: 0 0 8px; font-size: 16px; font-weight: 800; color: var(--ink, #0c151b); }
.l2v2-page-blog .blog-post-card .post-excerpt { font-size: 13px; color: var(--inkDim, #6b7280); line-height: 1.55; margin-bottom: 12px; }
.l2v2-page-blog .blog-read-more { background: var(--brand, #ffc107); color: var(--brandText, #0c151b); padding: 10px 18px; border-radius: var(--r-md); font-weight: 700; font-size: 12px; border: 0; }
.l2v2-page-blog .blog-pagination { margin-top: 32px; }
.l2v2-page-blog .blog-pagination .pagination li a { display: inline-grid; place-items: center; min-width: 36px; height: 36px; padding: 0 10px; border-radius: var(--r-md); background: var(--side2, #f5f6f8); border: 1px solid var(--line, #e9ecef); color: var(--ink, #0c151b); font-weight: 600; }
.l2v2-page-blog .blog-pagination .pagination li.active a { background: var(--brand, #ffc107); color: var(--brandText, #0c151b); border-color: var(--brand, #ffc107); }

/* ========================================================================== */
/* ----- Accessibility & Polish (focus-visible, motion, reduced-motion) ----- */
/* ========================================================================== */

/* Keyboard focus rings for new components — visible only on keyboard nav. */
.l2v2 .l2v2-tb-icon:focus-visible,
.l2v2 .l2v2-prof:focus-visible,
.l2v2 .l2v2-mode button:focus-visible,
.l2v2 .l2v2-side .col-btn:focus-visible,
.l2v2 .l2v2-side .sb-i:focus-visible,
.l2v2 .l2v2-side .sb-user:focus-visible,
.l2v2 .l2v2-side .sb-bal:focus-visible,
.l2v2 .l2v2-side .sb-srch input:focus-visible,
.l2v2 .l2v2-content .form-control:focus-visible,
.l2v2 .l2v2-content .btn-primary:focus-visible,
.lk-land .lk-btn-dark:focus-visible,
.lk-land .lk-btn-out:focus-visible,
.lk-land .lk-login button:focus-visible,
.lk-land .lk-login .lk-field input:focus-visible,
.lk-land .lk-stats .lk-stats-cta:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* Honor user-prefers-reduced-motion (suppress hex float + transforms) */
@media (prefers-reduced-motion: reduce) {
    .lk-land .lk-hex { animation: none; }
    .l2v2 .l2v2-content .card.card-border.card-no-box:hover { transform: none; }
    .l2v2 .l2v2-side .sb-bal:hover { transform: none; }
    .lk-land .lk-btn-dark:hover,
    .lk-land .lk-login .lk-submit:hover,
    .lk-land .lk-stats .lk-stats-cta:hover { transform: none; }
    .lk-land .lk-news-card:hover,
    .lk-land .lk-feat:hover { transform: none; }
}

/* ========================================================================== */
/* ----- Mobile responsive polish (≤ 991.98px tablet, ≤ 767px phone) -------- */
/* ========================================================================== */

/* Hide sidebar collapse button on mobile — sidebar uses slide-in pattern there */
@media (max-width: 991.98px) {
    .l2v2 .l2v2-side .sb-top .col-btn { display: none; }
}

/* Topbar fits in narrow viewports: reduce gaps + hide non-essential text */
@media (max-width: 767px) {
    .l2v2 .appHeader.l2v2-topbar {
        gap: 6px;
        padding: 10px 12px 10px 60px; /* leave space for fixed .menu-btn at left:14px */
    }
    .l2v2 .l2v2-topbar .pgti h2.apPgTi { font-size: 16px; line-height: 1.15; }
    .l2v2 .l2v2-topbar .pgti p.apPgTx { display: none; }
    .l2v2 .l2v2-topbar .right { gap: 4px; }
    .l2v2 .l2v2-tb-icon { width: 34px; height: 34px; font-size: 14px; }
    .l2v2 .l2v2-mode { padding: 2px; }
    .l2v2 .l2v2-mode button { width: 26px; height: 26px; font-size: 13px; }
    .l2v2 .l2v2-prof { padding: 3px 10px 3px 3px; }
    .l2v2 .l2v2-prof .av { width: 26px; height: 26px; font-size: 12px; }
    .l2v2 .l2v2-prof .nm { display: none; }
    /* Hide currency / lang dropdowns on phone — accessible from /account or footer */
    .l2v2 .l2v2-topbar .right > .btn-group:has(#currencies-list),
    .l2v2 .l2v2-topbar .right > .btn-group:has(#languages-list) { display: none; }
}

/* Add Funds payment grid: 4 cols → 2 cols on phone */
@media (max-width: 767px) {
    .l2v2 .l2v2-page-addfunds .af-pay-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .l2v2 .l2v2-page-addfunds .af-pay-card { padding: 14px 10px; }
    .l2v2 .l2v2-page-addfunds .af-pay-icon { width: 40px; height: 40px; font-size: 18px; }
    .l2v2 .l2v2-page-addfunds .af-pay-name { font-size: 12px; }
}

/* Affiliate tier grid: 4 cols → 2 cols on phone */
@media (max-width: 767px) {
    .l2v2 .l2v2-page-affiliates .aff-tier-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .l2v2 .l2v2-page-affiliates .aff-tier-card { padding: 14px 10px; }
    .l2v2 .l2v2-page-affiliates .aff-tier-rate { font-size: 18px; }
    .l2v2 .l2v2-page-affiliates .referral-section { padding: 18px; }
    .l2v2 .l2v2-page-affiliates .pg-aff-hero h2,
    .l2v2 .l2v2-page-affiliates .referral-section h2 { font-size: 22px; }
    /* Withdrawal table → horizontal scroll */
    .l2v2 .l2v2-page-affiliates .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .l2v2 .l2v2-page-affiliates .custom-affiliate-table { min-width: 600px; }
}

/* Orders / drip / subs tables (.op-card) — keep card-style on mobile, no overflow */
@media (max-width: 767px) {
    .l2v2 .l2v2-content .orders-nav { padding: 10px; gap: 6px; }
    .l2v2 .l2v2-content .orders-nav-link { padding: 6px 10px; font-size: 12px; }
    .l2v2 .l2v2-content .op-search-box { width: 100%; min-width: 0; flex: 1 1 100%; order: 99; }
    .l2v2 .l2v2-content .op-card--top,
    .l2v2 .l2v2-content .op-card--bottom { padding: 12px 14px; gap: 8px; }
    .l2v2 .l2v2-content .op-item { min-width: 110px; }
    .l2v2 .l2v2-content .subcard-stats-grid { padding: 12px 14px; gap: 10px; }
}

/* Services page: collapse "with-side" 2-col → 1-col on tablet+phone */
@media (max-width: 991.98px) {
    .l2v2 .l2v2-page-services .pg-with-side { grid-template-columns: 1fr; }
}

/* Sidebar drawer mode on mobile — add backdrop + ensure scroll */
@media (max-width: 991.98px) {
    body#appDashboard.l2v2 .appSidebar.l2v2-side {
        z-index: 1050; /* above mobile bottom navbar (10000) — actually behind it; adjust */
        max-height: 100vh; overflow-y: auto;
    }
    /* When sidebar is open, dim the content behind */
    .appAuth.sidebar-active::before {
        content: ''; position: fixed; inset: 0;
        background: rgba(0, 0, 0, 0.4); z-index: 1030;
        cursor: pointer;
    }
}

/* Sign in landing — login card full-width + symmetric-centered on tablet/mobile (was squished to ~279px + off-center 56/66) */
@media (max-width: 992px) {
    .lk-land .lk-hero { padding: 110px 20px 80px; }
    .lk-land .lk-hero-inner { grid-template-columns: 1fr; gap: 28px; }
    .lk-land .lk-login { width: 100%; max-width: 460px; margin-left: auto; margin-right: auto; padding: 28px 22px; }
}

/* Sign up split layout — single column on mobile, hide dark left column */
@media (max-width: 1199.98px) {
    .l2v2-page-signup .col-xl-5.register-left { display: none !important; }
    .l2v2-page-signup .col-xl-5.py-5 { padding: 32px !important; max-width: 540px; margin: 0 auto; }
}

/* Smallest phones (≤ 360px): tighten everything */
@media (max-width: 360px) {
    .lk-land .lk-hero-h1 { font-size: 28px; }
    .lk-land .lk-stats { padding: 18px 14px; margin: -32px 8px 0; }
    .lk-land .lk-stats .lk-stats-item .v { font-size: 26px; }
    .l2v2 .appHeader.l2v2-topbar { padding-left: 56px; padding-right: 8px; }
    .l2v2 .l2v2-tb-icon { width: 32px; height: 32px; }
}

/* Touch target minimum — ensure all interactive elements ≥ 44×44px on phone */
@media (hover: none) and (pointer: coarse) {
    .l2v2 .l2v2-side .sb-i { min-height: 44px; }
    .l2v2 .l2v2-tb-icon { min-width: 38px; min-height: 38px; } /* relaxed but still tappable */
    .l2v2 .l2v2-content .orders-nav-link { min-height: 36px; display: inline-flex; align-items: center; }
}

/* Disable hover effects on touch devices (prevents sticky :hover state on tap) */
@media (hover: none) {
    .l2v2 .l2v2-content .card.card-border.card-no-box:hover { transform: none; box-shadow: var(--shadow-sm); }
    .l2v2 .l2v2-content .op-card:hover { transform: none; box-shadow: none; }
    .l2v2 .l2v2-page-affiliates .aff-tier-card:hover { transform: none; }
    .lk-land .lk-feat:hover, .lk-land .lk-pcard:hover, .lk-land .lk-news-card:hover { transform: none; }
}

/* ========================================================================== */
/* ----- Layout offset fix (2026-05-07) -----
 * In layout.twig, `{{ content }}` is rendered OUTSIDE `.appAuth`, so:
 *   1. The legacy `.appAuth { padding-left: 280px; padding-top: 90px }` doesn't
 *      push the content away from the fixed sidebar/topbar (we re-add via .appContent)
 *   2. CRITICAL: legacy `.appAuth { min-height: 100vh }` pushes content BELOW
 *      the fold because .appAuth takes full viewport before content renders.
 *      We collapse .appAuth to height:0 since its only children (sidebar, header)
 *      are position:fixed and don't need a sized container.
 * ========================================================================== */

/* Collapse .appAuth completely so the OUTSIDE-the-shell `{{ content }}` renders
 * at the top. Using display:contents — the .appAuth element disappears from
 * layout flow entirely. Its fixed-positioned children (sidebar, header) keep
 * their fixed positioning. (display:contents supported in all modern browsers.)
 * Belt-and-suspenders: also nuke min-height/padding/background in case
 * display:contents isn't honored. */
body#appDashboard .appAuth,
body#appDashboard.l2v2 .appAuth.l2v2-shell {
    display: contents !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    background: transparent !important;
}
/* Legacy `.appAuth .container { max-width: 1400px }` caps content on wide screens
 * → empty space on sides. v4 design wants content to use full available width
 * (minus sidebar offset). Override container max-width inside .l2v2-content. */
body#appDashboard.l2v2 .appContent .container,
body#appDashboard.l2v2 .l2v2-content .container,
body#appDashboard.l2v2 .l2v2-content > .container,
body#appDashboard.l2v2 .l2v2-content section > .container {
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* Tighten content padding on very wide screens so we use space well */
@media (min-width: 1600px) {
    body#appDashboard.l2v2 .appContent {
        padding-left: 310px;
        padding-right: 32px;
    }
}
@media (min-width: 1920px) {
    body#appDashboard.l2v2 .appContent {
        padding-right: 40px;
    }
}
/* Body gets the background instead (since .appAuth is now display:contents) */
body#appDashboard {
    background: var(--bg);
    min-height: 100vh;
}
html.dark  body#appDashboard { background: #0C141B; }
html.light body#appDashboard { background: #f7f8f9; }

@media (min-width: 992px) {
    body#appDashboard.l2v2 .appContent {
        padding-left: 310px;        /* 280px sidebar + 30px gutter */
        padding-right: 30px;
        padding-top: 110px;          /* 90px topbar + 20px gutter */
        padding-bottom: 40px;
        box-sizing: border-box;
    }
    body#appDashboard.l2v2.l2v2-sb-collapsed .appContent {
        padding-left: 108px;        /* 78px collapsed sidebar + 30px gutter */
    }
    /* Topbar offset shifted on collapse (was already added; keep as override) */
    body#appDashboard.l2v2 .appHeader.l2v2-topbar {
        position: fixed;
        left: 280px;
        right: 0;
        top: 0;
        width: auto;
        z-index: 1001;          /* below sidebar (1040) so collapse btn click pierces */
    }
    body#appDashboard.l2v2.l2v2-sb-collapsed .appHeader.l2v2-topbar {
        left: 78px;
    }
}

@media (max-width: 991.98px) {
    body#appDashboard.l2v2 .appContent {
        padding-left: 16px;
        padding-right: 16px;
        padding-top: 84px;          /* 74px mobile topbar + 10px */
        padding-bottom: 110px;       /* mobile bottom navbar height */
        box-sizing: border-box;
    }
    /* Sidebar slides in from left when .sidebar-active (legacy rule keeps transform) */
}

/* Ensure sidebar always wins position on desktop (belt-and-suspenders) */
@media (min-width: 992px) {
    body#appDashboard.l2v2 .appSidebar.l2v2-side {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        width: 280px;
        z-index: 1040;
    }
}

/* Ensure topbar visible (legacy .appHeader had position:fixed; restore on all viewports) */
body#appDashboard.l2v2 .appHeader.l2v2-topbar {
    position: fixed !important;
    top: 0;
    right: 0;
    z-index: 1001;
    display: flex !important;        /* must override any legacy display rule */
}
@media (max-width: 991.98px) {
    body#appDashboard.l2v2 .appHeader.l2v2-topbar {
        left: 0 !important;
        height: 64px;
    }
}
@media (min-width: 992px) {
    body#appDashboard.l2v2 .appHeader.l2v2-topbar {
        left: 280px;
        height: 90px;
    }
}
body#appDashboard.l2v2 .l2v2-main { display: contents; } /* don't let wrapper affect layout */

/* ========================================================================== */
/* ----- Audit fixes (2026-05-07) — see Dead-CSS-Candidates.txt for context  - */
/* ========================================================================== */

/* (a) Icon CSS fallback — prevents layout shift if Remix/FA/BS Icons CDN fails. */
i[class^="ri-"], i[class*=" ri-"],
i[class^="fa-"], i[class*=" fa-"],
i[class^="bi-"], i[class*=" bi-"] {
    display: inline-block;
    line-height: 1;
    vertical-align: -0.125em;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

/* (b) Light-mode parity for legacy footer (was missing — agent #1 finding) */
html.light .footer { background: #f8f9fa; color: #0c151b; }
html.light .footer .site-name { color: #0c151b; }
html.light .footer .footer-title { color: #0c151b; }
html.light .footer .footer-menu a { color: #4a5160; }
html.light .footer .footer-menu a:hover { color: var(--brand); }
html.light .footer .contact-info p { color: #4a5160; }
html.light .footer .footer-description p { color: #4a5160; }
html.light .footer-bottom { border-top-color: #e5e7eb; }
html.light .footer-bt-info { color: #4a5160; }

/* (c) Light-mode parity for .home-section + .wcu/.hsl/.hsobs (legacy SEO body
 * — they were dark-only, breaks readability when user toggles light + we
 * already gave .lk-land .home-section a white card backdrop). */
/* wcu-box is an OPAQUE dark navy card in BOTH modes (L23037 !important — glass
   would bleed the yellow body bg). So title/text must stay light in light mode
   too; the old #0c151b title rendered black-on-navy = unreadable (user report). */
html.light .home-section .wcu-content .wcu-conteiner .wcu-box {
    border-color: rgba(255, 193, 7, 0.15);
}
html.light .home-section .wcu-content .wcu-conteiner .wcu-box .wcu-title { color: #fff; }
html.light .home-section .wcu-content .wcu-conteiner .wcu-box .wcu-text { color: #9799A3; }
html.light .home-section .hsobs .hsob { color: #4a5160; }
html.light .home-section .hsobs .hsob.active { color: #0c151b; }
html.light .home-section .hsl-title h2,
html.light .home-section .hsl-text,
html.light .home-section .hsli-title,
html.light .home-section .hsli-text { color: #0c151b; }

/* (d) Replace hard-coded #ffc107 with tokens in commonly-overridden v4 areas */
.l2v2 .l2v2-content .si-header,
.l2v2 .l2v2-content .badge-step { background-color: var(--brand); }
.l2v2 .l2v2-content .si-header { color: var(--brandText); }

/* (e) Contrast fix for .hsl-title-icon (was bg yellow + color white → contrast 1.4:1) */
.lk-land .hsl-title-icon,
.home-section .hsl-title-icon { background: var(--brand); color: var(--brandText); }

/* End of Audit fixes */

/* ========================================================================== */
/* ----- Dashboard polish (match prototype image 5 point-by-point) ---------- */
/* ========================================================================== */

/* Daily check-in pill bar */
.l2v2 .l2v2-page-dashboard .nwo-ci-banner-card,
.l2v2 .l2v2-content .ci-banner-card {
    background: var(--side); border: 1px solid var(--line); border-radius: 999px;
    padding: 10px 14px 10px 18px;
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 16px;
}
.l2v2 .l2v2-content .nwo-ci-banner-pad,
.l2v2 .l2v2-content .nwo-ci-banner-row { display: flex; align-items: center; gap: 14px; flex: 1; }
.l2v2 .l2v2-content .nwo-ci-icon,
.l2v2 .l2v2-content .ci-banner-icon {
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--side2); display: grid; place-items: center;
    color: var(--brand); font-size: 16px; flex-shrink: 0;
}
.l2v2 .l2v2-content .nwo-ci-banner-title,
.l2v2 .l2v2-content .ci-banner-title { font-size: 13px; font-weight: 600; color: var(--ink); }
/* 7-day dot progress */
.l2v2 .l2v2-content .nwo-ci-dots { flex: 1; display: flex; gap: 8px; justify-content: center; }
.l2v2 .l2v2-content .ci-day,
.l2v2 .l2v2-content .nwo-ci-dot {
    width: 10px; height: 10px; border-radius: 50%; background: var(--line2);
}
.l2v2 .l2v2-content .ci-day.checked,
.l2v2 .l2v2-content .nwo-ci-dot.done { background: var(--brand); }
.l2v2 .l2v2-content .ci-day.today,
.l2v2 .l2v2-content .nwo-ci-dot.today {
    background: var(--brand);
    box-shadow: 0 0 0 4px rgba(255, 193, 7, .25);
}
.l2v2 .l2v2-content .nwo-ci-banner-btn,
.l2v2 .l2v2-content .ci-banner-btn {
    background: var(--brand); color: var(--brandText);
    padding: 8px 18px; border-radius: 999px;
    font-size: 12px; font-weight: 700;
    border: 0; cursor: pointer;
    display: inline-flex; align-items: center; gap: 5px;
}

/* Platform tab pills */
.l2v2 .l2v2-content .platform-tabs,
.l2v2 .l2v2-content .nwo-platform-tabs {
    display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px;
}
.l2v2 .l2v2-content .platform-tab,
.l2v2 .l2v2-content .nwo-platform-tab {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 18px; border-radius: 14px;
    background: var(--side); border: 1px solid var(--line);
    font-size: 13px; font-weight: 600; color: var(--ink2);
    cursor: pointer; transition: .14s;
    text-decoration: none;
}
.l2v2 .l2v2-content .platform-tab i,
.l2v2 .l2v2-content .nwo-platform-tab i { font-size: 16px; color: var(--inkDim); }
.l2v2 .l2v2-content .platform-tab:hover,
.l2v2 .l2v2-content .nwo-platform-tab:hover { border-color: var(--brand); color: var(--ink); }
.l2v2 .l2v2-content .platform-tab.active,
.l2v2 .l2v2-content .nwo-platform-tab.active {
    background: var(--brand); color: var(--brandText); border-color: var(--brand);
    box-shadow: 0 6px 16px rgba(255, 193, 7, .25);
}
.l2v2 .l2v2-content .platform-tab.active i,
.l2v2 .l2v2-content .nwo-platform-tab.active i { color: var(--brandText); }

/* Order form numbered fields (badge-step circle) — already styled but force size */
.l2v2 .l2v2-content .form-label .badge-step,
.l2v2 .l2v2-content label .badge-step {
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--brand) !important; color: var(--brandText) !important;
    font-size: 11px; font-weight: 800; font-family: var(--font-en);
    display: inline-grid; place-items: center;
    margin-right: 6px;
}

/* Service detail items (.nwoDeIt) — 4-col grid + colored icons */
.l2v2 .l2v2-content .nwoDeIt {
    background: var(--side2); border: 1px solid var(--line);
    border-radius: var(--r-lg); padding: 12px 14px;
    display: flex; align-items: center; gap: 12px;
}
.l2v2 .l2v2-content .nwoDeIt .icon {
    width: 32px; height: 32px; border-radius: 50%;
    display: grid; place-items: center; color: #fff; font-size: 14px;
    flex-shrink: 0;
}
.l2v2 .l2v2-content .nwoDeIt .icon.primary-bg { background: var(--info); }
.l2v2 .l2v2-content .nwoDeIt .icon.pink-bg    { background: #ec4899; }
.l2v2 .l2v2-content .nwoDeIt .icon.danger-bg  { background: var(--ring-red); }
.l2v2 .l2v2-content .nwoDeIt .icon.success-bg { background: var(--success); }
.l2v2 .l2v2-content .nwoDeIt .icon.orange-bg  { background: #ff9800; }
.l2v2 .l2v2-content .nwoDeIt .icon.purple-bg  { background: var(--ring-purple); }
.l2v2 .l2v2-content .nwoDeIt .text { font-size: 13px; color: var(--ink); font-weight: 600; }

/* Order form tabs nwoNav — match design dark pill on yellow header */
.l2v2 .l2v2-content .card-header .nwoNav,
.l2v2 .l2v2-content .nwoNav {
    background: transparent; border: 0;
    padding: 3px; border-radius: 12px;
    display: inline-flex; gap: 2px; margin: 0;
    list-style: none;
}
.l2v2 .l2v2-content .card-header .nwoNav .nwoNavLink,
.l2v2 .l2v2-content .nwoNav .nwoNavLink {
    background: transparent; border: 0;
    padding: 7px 14px; border-radius: 9px;
    font-size: 12px; font-weight: 700;
    color: var(--inkDim);
    cursor: pointer; font-family: inherit;
    transition: .14s;
}
.l2v2 .l2v2-content .card-header .nwoNav .nwoNavLink:hover,
.l2v2 .l2v2-content .nwoNav .nwoNavLink:hover {
    color: var(--ink);
}
.l2v2 .l2v2-content .card-header .nwoNav .nwoNavLink.active,
.l2v2 .l2v2-content .nwoNav .nwoNavLink.active {
    background: transparent; color: var(--ink);
    box-shadow: inset 0 -2px 0 var(--brand);
}

/* Stat card top-right badges (.nwo-card-badge-btn--green / --gold) */
.l2v2 .l2v2-content .nwo-card-badge-wrap {
    position: absolute; top: 14px; right: 14px; z-index: 3;
}
.l2v2 .l2v2-content .nwo-card-badge-btn {
    padding: 3px 10px; border-radius: 999px;
    font-size: 10.5px; font-weight: 700;
    display: inline-flex; align-items: center; gap: 4px;
    border: 0; cursor: pointer;
}
.l2v2 .l2v2-content .nwo-card-badge-btn--green {
    background: rgba(40, 241, 170, .15); color: var(--success);
}
.l2v2 .l2v2-content .nwo-card-badge-btn--gold {
    background: rgba(255, 193, 7, .18); color: var(--warn);
}

/* "สิ่งน่ารู้" sidebar card accordion (.faq-ss-tabs .home-ss-tab) */
.l2v2 .l2v2-content .faq-ss-tabs .home-ss-tab .ss-tab-head .right-p i.fa-plus,
.l2v2 .l2v2-content .faq-ss-tabs .home-ss-tab .ss-tab-head .right-p i.fa-minus {
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--side); display: inline-grid; place-items: center;
    font-size: 11px; color: var(--ink);
}
.l2v2 .l2v2-content .home-ss-tab.active .ss-tab-head .right-p i.fa-plus { display: none; }
.l2v2 .l2v2-content .home-ss-tab.active .ss-tab-head .right-p i.fa-minus { background: var(--brand); color: var(--brandText); }

/* End of Dashboard polish */
/* ========================================================================== */

/* ========================================================================== */
/* ----- Page-level layout (.pg / .pg-head / .pg-card / .pg-tbl) ----------- */
/* Used by rewritten orders.twig (and future drip/subs/affiliates rewrites). */
/* ========================================================================== */

.l2v2 .l2v2-content .pg { display: flex; flex-direction: column; gap: 18px; }

/* Page header (icon + title + actions) */
.l2v2 .l2v2-content .pg-head {
    display: flex; align-items: center; gap: 18px;
    padding: 22px 26px;
    background: var(--side); border: 1px solid var(--line);
    border-radius: 22px;
    position: relative; overflow: hidden;
}
.l2v2 .l2v2-content .pg-head::before {
    content: ''; position: absolute; right: -40px; top: -60px;
    width: 220px; height: 220px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 193, 7, .12), transparent 70%);
    pointer-events: none;
}
.l2v2 .l2v2-content .pg-head > * { position: relative; z-index: 1; }
.l2v2 .l2v2-content .pg-head .ic-big {
    width: 60px; height: 60px; border-radius: 50%;
    border: 2.5px solid #2A62FF;
    display: grid; place-items: center; font-size: 26px;
    flex-shrink: 0; background: var(--side);
}
.l2v2 .l2v2-content .pg-head .pg-head-body { flex: 1; min-width: 0; }
.l2v2 .l2v2-content .pg-head .pg-head-body h1 { margin: 0; font-size: 22px; font-weight: 800; color: var(--ink); letter-spacing: -0.01em; }
.l2v2 .l2v2-content .pg-head .pg-head-body p { margin: 4px 0 0; font-size: 13px; color: var(--inkDim); }
.l2v2 .l2v2-content .pg-head .right { margin-left: auto; display: flex; gap: 8px; }
.l2v2 .l2v2-content .pg-head .pg-btn,
.l2v2 .l2v2-content .pg-btn {
    background: var(--brand); color: var(--brandText);
    padding: 10px 18px; border-radius: 12px;
    font-weight: 700; font-size: 13px;
    border: 0; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    text-decoration: none;
    box-shadow: 0 8px 16px rgba(255, 193, 7, .25);
    transition: .14s;
}
.l2v2 .l2v2-content .pg-btn:hover { background: #e8a800; transform: translateY(-1px); color: var(--brandText); }
.l2v2 .l2v2-content .pg-btn.outline {
    background: var(--side2); color: var(--ink); border: 1px solid var(--line); box-shadow: none;
}
.l2v2 .l2v2-content .pg-btn.outline:hover { background: var(--side); color: var(--brand); border-color: var(--brand); }

/* Page card (yellow header + body) */
.l2v2 .l2v2-content .pg-card {
    background: var(--side); border: 1px solid var(--line);
    border-radius: 22px; overflow: hidden;
}
.l2v2 .l2v2-content .pg-card .h {
    background: linear-gradient(95deg, #ffc107 0%, #ffce3a 60%, #ffc107 100%);
    padding: 16px 22px;
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    position: relative; overflow: hidden;
    color: #0c151b;
}
.l2v2 .l2v2-content .pg-card .h::before {
    content: ''; position: absolute; right: -30px; top: -40px;
    width: 160px; height: 160px; border-radius: 50%;
    background: rgba(255, 255, 255, .18); pointer-events: none;
}
.l2v2 .l2v2-content .pg-card .h > * { position: relative; z-index: 1; }
.l2v2 .l2v2-content .pg-card .h h3 { margin: 0; font-size: 16px; font-weight: 800; color: #0c151b; }
.l2v2 .l2v2-content .pg-card .h p { margin: 1px 0 0; font-size: 11.5px; color: rgba(0, 0, 0, .6); font-weight: 500; }
.l2v2 .l2v2-content .pg-card .h .h-right { display: flex; align-items: center; gap: 8px; }

/* Filter bar */
.l2v2 .l2v2-content .pg-filter {
    padding: 14px 22px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
    border-bottom: 1px solid var(--line);
}
.l2v2 .l2v2-content .pg-filter .srch { position: relative; flex: 1; min-width: 200px; display: flex; }
.l2v2 .l2v2-content .pg-filter .srch i.ri-search-line { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--inkDim); }
.l2v2 .l2v2-content .pg-filter .srch input {
    width: 100%; padding: 10px 14px 10px 36px;
    background: var(--side2); border: 1px solid var(--line); border-radius: 11px;
    color: var(--ink); font-family: inherit; font-size: 13px; outline: none;
}
.l2v2 .l2v2-content .pg-filter .srch input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(255, 193, 7, .15); }
.l2v2 .l2v2-content .pg-filter select {
    padding: 10px 30px 10px 14px;
    background: var(--side2); border: 1px solid var(--line); border-radius: 11px;
    color: var(--ink); font-family: inherit; font-size: 13px; outline: none;
    appearance: none; cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='3'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center;
}
.l2v2 .l2v2-content .pg-filter .pill-tabs {
    display: flex; gap: 4px;
    background: var(--side2); border: 1px solid var(--line);
    border-radius: 11px; padding: 3px;
    flex-wrap: wrap;
}
.l2v2 .l2v2-content .pg-filter .pill-tabs a,
.l2v2 .l2v2-content .pg-filter .pill-tabs button {
    background: transparent; border: 0;
    padding: 7px 14px; border-radius: 8px;
    font-size: 12px; font-weight: 700; color: var(--inkDim);
    cursor: pointer; font-family: inherit;
    text-decoration: none;
    transition: .14s;
}
.l2v2 .l2v2-content .pg-filter .pill-tabs a:hover,
.l2v2 .l2v2-content .pg-filter .pill-tabs button:hover { color: var(--ink); }
.l2v2 .l2v2-content .pg-filter .pill-tabs a.active,
.l2v2 .l2v2-content .pg-filter .pill-tabs button.active { background: var(--brand); color: var(--brandText); }

/* Table */
.l2v2 .l2v2-content .pg-tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.l2v2 .l2v2-content .pg-tbl { width: 100%; border-collapse: collapse; min-width: 920px; }
.l2v2 .l2v2-content .pg-tbl thead th {
    font-size: 11px; font-weight: 700; color: var(--inkDim);
    text-transform: uppercase; letter-spacing: .08em;
    padding: 14px 22px; text-align: left;
    border-bottom: 1px solid var(--line);
    background: var(--side2);
}
.l2v2 .l2v2-content .pg-tbl tbody td {
    padding: 16px 22px; font-size: 13px; color: var(--ink);
    border-bottom: 1px solid var(--line); vertical-align: middle;
}
.l2v2 .l2v2-content .pg-tbl tbody tr:hover { background: var(--side2); }
.l2v2 .l2v2-content .pg-tbl tbody tr:last-child td { border-bottom: 0; }
.l2v2 .l2v2-content .pg-tbl .id { font-family: var(--font-en); font-weight: 700; color: var(--ink2); }
.l2v2 .l2v2-content .pg-tbl .pl { display: flex; align-items: center; gap: 8px; }
.l2v2 .l2v2-content .pg-tbl .pl .pic {
    width: 28px; height: 28px; border-radius: 8px;
    display: grid; place-items: center;
    color: #fff; font-size: 13px; flex-shrink: 0;
    background: linear-gradient(135deg, #ffc107, #ff9800);
}
.l2v2 .l2v2-content .pg-tbl .pl .srv-name {
    /* Allow wrap to 2 lines instead of single-line truncate (user feedback:
     * "เห็นข้อความไม่ครบ"). Service names like "(Exclusive) เพิ่มวิว..." need room. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
    font-size: 13px;
    color: var(--ink);
    flex: 1;
    min-width: 0;
}
.l2v2 .l2v2-content .pg-tbl tbody td:nth-child(2) { max-width: 360px; min-width: 220px; }
.l2v2 .l2v2-content .pg-tbl tbody td:nth-child(2) .pl { gap: 10px; align-items: flex-start; }
.l2v2 .l2v2-content .pg-tbl tbody td:nth-child(2) .pl .pic { margin-top: 2px; }
.l2v2 .l2v2-content .pg-tbl td.lk a {
    color: var(--inkDim); font-size: 12px; text-decoration: none;
    display: inline-flex; align-items: center; gap: 4px;
}
.l2v2 .l2v2-content .pg-tbl td.lk a:hover { color: var(--brand); }
.l2v2 .l2v2-content .pg-tbl .qty { font-family: var(--font-en); font-weight: 700; }
.l2v2 .l2v2-content .pg-tbl .pr { font-family: var(--font-en); font-weight: 700; color: var(--brand); }
.l2v2 .l2v2-content .pg-tbl .progress-cell { display: flex; align-items: center; gap: 8px; min-width: 110px; }
.l2v2 .l2v2-content .pg-tbl .progress-cell .pct {
    font-family: var(--font-en); font-weight: 700; font-size: 11px;
    color: var(--ink2); min-width: 30px;
}
.l2v2 .l2v2-content .pg-tbl .pg-progress {
    width: 80px; height: 6px; flex-shrink: 0;
    background: var(--line); border-radius: 99px; overflow: hidden;
}
.l2v2 .l2v2-content .pg-tbl .pg-progress .b {
    height: 100%; background: linear-gradient(90deg, #2A62FF, #28F1AA);
    border-radius: 99px; transition: width .3s ease;
}
.l2v2 .l2v2-content .pg-tbl .st {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px; border-radius: 999px;
    font-size: 11px; font-weight: 700; white-space: nowrap;
}
.l2v2 .l2v2-content .pg-tbl .st.done { background: rgba(16, 185, 129, .12); color: #10b981; }
.l2v2 .l2v2-content .pg-tbl .st.run  { background: rgba(42, 98, 255, .12); color: #2A62FF; }
.l2v2 .l2v2-content .pg-tbl .st.pend { background: rgba(255, 193, 7, .18); color: #ca8a04; }
.l2v2 .l2v2-content .pg-tbl .st.fail { background: rgba(239, 68, 68, .12); color: #ef4444; }
.l2v2 .l2v2-content .pg-tbl .st.partial { background: rgba(167, 139, 250, .15); color: var(--ring-purple); }
.l2v2 .l2v2-content .pg-tbl .actions { display: flex; gap: 6px; align-items: center; flex-wrap: nowrap; }
.l2v2 .l2v2-content .pg-tbl .actions a,
.l2v2 .l2v2-content .pg-tbl .actions button {
    width: 32px; height: 32px; border-radius: 9px;
    background: var(--side2); border: 1px solid var(--line);
    color: var(--ink2);
    display: grid; place-items: center;
    cursor: pointer; font-size: 14px; transition: .14s;
    text-decoration: none; padding: 0;
}
.l2v2 .l2v2-content .pg-tbl .actions a:hover,
.l2v2 .l2v2-content .pg-tbl .actions button:hover { background: var(--brand); color: var(--brandText); border-color: var(--brand); }
.l2v2 .l2v2-content .pg-tbl .actions .disabled { opacity: 0.5; cursor: not-allowed; }

/* Pager */
.l2v2 .l2v2-content .pg-pager {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 22px; border-top: 1px solid var(--line);
    flex-wrap: wrap; gap: 10px;
}
.l2v2 .l2v2-content .pg-pager .info { font-size: 12px; color: var(--inkDim); }
.l2v2 .l2v2-content .pg-pager .pages { display: flex; gap: 4px; flex-wrap: wrap; }
.l2v2 .l2v2-content .pg-pager .pages a.page-link,
.l2v2 .l2v2-content .pg-pager .pages button {
    width: 32px; height: 32px; border-radius: 9px;
    background: var(--side2); border: 1px solid var(--line);
    color: var(--ink2);
    display: inline-grid; place-items: center;
    cursor: pointer; font-size: 13px; font-weight: 600; font-family: var(--font-en);
    text-decoration: none;
}
.l2v2 .l2v2-content .pg-pager .pages a.page-link:hover,
.l2v2 .l2v2-content .pg-pager .pages button:hover { background: var(--brand); color: var(--brandText); border-color: var(--brand); }
.l2v2 .l2v2-content .pg-pager .pages a.page-link.active,
.l2v2 .l2v2-content .pg-pager .pages button.active { background: var(--brand); color: var(--brandText); border-color: var(--brand); }

/* Mobile responsive — TABLE → proper CARDS on small screens.
 * Better than just right-aligning rows: ID prominent at top, service name
 * gets full width to wrap, link below, stats in 2-col grid, actions at bottom. */
@media (max-width: 768px) {
    .l2v2 .l2v2-content .pg-tbl-wrap { overflow-x: visible; }
    .l2v2 .l2v2-content .pg-tbl-wrap .pg-tbl { min-width: 0; }
    .l2v2 .l2v2-content .pg-tbl,
    .l2v2 .l2v2-content .pg-tbl tbody { display: block; width: 100%; }
    .l2v2 .l2v2-content .pg-tbl thead { display: none; }
    .l2v2 .l2v2-content .pg-tbl tbody tr {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 14px;
        background: var(--side2);
        border: 1px solid var(--line);
        border-radius: var(--r-lg);
        padding: 14px 16px;
        margin: 0 0 12px;
    }
    .l2v2 .l2v2-content .pg-tbl tbody tr:hover { background: var(--side2); }
    .l2v2 .l2v2-content .pg-tbl tbody td {
        max-width: none !important;
        min-width: 0 !important;
        padding: 6px 0;
        border-bottom: 0;
        display: flex;
        flex-direction: column;
        gap: 3px;
        text-align: left;
    }
    /* Compact label above value (per stat cell) */
    .l2v2 .l2v2-content .pg-tbl tbody td::before {
        content: attr(data-label);
        font-size: 10px;
        font-weight: 700;
        color: var(--inkDim);
        text-transform: uppercase;
        letter-spacing: .04em;
    }
    /* Hide empty labels (e.g. actions cell has data-label="") */
    .l2v2 .l2v2-content .pg-tbl tbody td[data-label=""]::before { display: none; }

    /* === Layout overrides per cell === */
    /* (1) ID — full width, header style (top of card) */
    .l2v2 .l2v2-content .pg-tbl tbody td:nth-child(1) {
        grid-column: 1 / -1;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 4px 0 12px;
        border-bottom: 1px solid var(--line);
        margin-bottom: 6px;
        font-size: 14px; font-weight: 800;
        color: var(--ink);
    }
    .l2v2 .l2v2-content .pg-tbl tbody td:nth-child(1)::before {
        font-size: 10px;
    }
    /* (2) Service name — full width, big bold, multi-line — ORDERS-specific (col2=service).
       Other pg-tbl pages (refunds col2=amount, etc.) keep the generic 2-col grid cell. */
    .l2v2 .l2v2-page-orders .pg-tbl tbody td:nth-child(2) {
        grid-column: 1 / -1;
    }
    .l2v2 .l2v2-page-orders .pg-tbl tbody td:nth-child(2) .pl { gap: 10px; align-items: center; }
    .l2v2 .l2v2-page-orders .pg-tbl tbody td:nth-child(2) .pl .srv-name {
        -webkit-line-clamp: 3; line-clamp: 3;
        font-size: 13.5px; font-weight: 600;
        color: var(--ink);
        text-align: left;
    }
    /* (3) Link — full width */
    .l2v2 .l2v2-content .pg-tbl tbody td.lk {
        grid-column: 1 / -1;
    }
    .l2v2 .l2v2-content .pg-tbl tbody td.lk a {
        max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        display: inline-flex; align-items: center; gap: 4px;
    }
    /* (4-7) Stats: 2-col grid, label above value */
    .l2v2 .l2v2-content .pg-tbl tbody td:nth-child(4),
    .l2v2 .l2v2-content .pg-tbl tbody td:nth-child(5),
    .l2v2 .l2v2-content .pg-tbl tbody td:nth-child(6),
    .l2v2 .l2v2-content .pg-tbl tbody td:nth-child(7) {
        font-size: 13px; font-weight: 600; color: var(--ink);
    }
    /* Progress on mobile — full width bar */
    .l2v2 .l2v2-content .pg-tbl tbody .progress-cell { justify-content: flex-start; min-width: 0; }
    .l2v2 .l2v2-content .pg-tbl tbody .pg-progress { width: 100%; max-width: 140px; }
    /* (last) Actions — full width row, centered — ORDERS-specific (last col = .actions).
       Other pg-tbl pages' last col is a normal value (refunds=date) → keep it a grid cell. */
    .l2v2 .l2v2-page-orders .pg-tbl tbody td:last-child {
        grid-column: 1 / -1;
        flex-direction: row;
        padding-top: 10px;
        margin-top: 4px;
        border-top: 1px solid var(--line);
        align-items: center;
    }
    .l2v2 .l2v2-page-orders .pg-tbl tbody td:last-child .actions { justify-content: flex-end; flex: 1; }
    /* For tickets-page tk-grid mobile (already in tickets section) and any 9-col table (drip) — adjust column 8 */
    .l2v2 .l2v2-content .pg-tbl tbody td:nth-child(8) { font-size: 13px; font-weight: 600; color: var(--ink); }
}
@media (max-width: 991.98px) and (min-width: 769px) {
    /* Tablet: keep table but compact */
    .l2v2 .l2v2-content .pg-tbl-wrap .pg-tbl { min-width: 720px; font-size: 12.5px; }
    .l2v2 .l2v2-content .pg-tbl thead th,
    .l2v2 .l2v2-content .pg-tbl tbody td { padding: 12px 14px; }
    .l2v2 .l2v2-content .pg-tbl .pl .srv-name { max-width: 180px; }
    .l2v2 .l2v2-content .pg-head { flex-wrap: wrap; padding: 18px 18px; }
    .l2v2 .l2v2-content .pg-head .right { width: 100%; }
}

/* End of pg-* layout */
/* ========================================================================== */

/* ========================================================================== */
/* ----- Tickets page (.tk-*) — split form + channels right column ---------- */
/* ========================================================================== */
.l2v2 .l2v2-page-tickets .tk-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 18px;
    align-items: start;
}
@media (max-width: 991.98px) {
    .l2v2 .l2v2-page-tickets .tk-grid { grid-template-columns: 1fr; }
}
.l2v2 .l2v2-page-tickets .tk-side { display: flex; flex-direction: column; gap: 18px; }
.l2v2 .l2v2-page-tickets .tk-form { padding: 22px; }

/* Form controls inside tickets card */
.l2v2 .l2v2-page-tickets .tk-form .form-control {
    background: var(--side2); border: 1px solid var(--line); border-radius: 11px;
    padding: 12px 14px; color: var(--ink); font-size: 13px; outline: none;
    width: 100%;
}
.l2v2 .l2v2-page-tickets .tk-form .form-control:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(255, 193, 7, .15); }
.l2v2 .l2v2-page-tickets .tk-form .control-label,
.l2v2 .l2v2-page-tickets .tk-form label { color: var(--ink); font-weight: 600; font-size: 13px; display: inline-block; margin-bottom: 6px; }
.l2v2 .l2v2-page-tickets .tk-form .ticket-label-mt { margin-top: 14px; }
.l2v2 .l2v2-page-tickets .tk-form .form-group { margin-bottom: 16px; }
.l2v2 .l2v2-page-tickets .tk-form .ticket-textarea { min-height: 140px; resize: vertical; }
.l2v2 .l2v2-page-tickets .tk-form .btn-primary {
    background: var(--brand); color: var(--brandText);
    padding: 14px; border-radius: 14px; font-weight: 800; font-size: 14px;
    border: 0; box-shadow: 0 8px 20px rgba(255, 193, 7, .25);
    width: 100%;
    transition: .14s;
}
.l2v2 .l2v2-page-tickets .tk-form .btn-primary:hover { background: #e8a800; transform: translateY(-1px); color: var(--brandText); }
.l2v2 .l2v2-page-tickets .tickets-uploader {
    background: var(--side2); border: 1.5px dashed var(--line2);
    padding: 16px; border-radius: 12px; text-align: center;
    margin-bottom: 14px;
}
.l2v2 .l2v2-page-tickets .upload-button {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--side); border: 1px solid var(--line);
    color: var(--ink); padding: 8px 14px; border-radius: 9px;
    cursor: pointer; font-size: 13px;
}
.l2v2 .l2v2-page-tickets .alert-info {
    background: rgba(42, 98, 255, .12) !important;
    color: var(--info) !important;
    border: 1px solid rgba(42, 98, 255, .3);
    border-radius: 12px; padding: 10px 14px;
}

/* Contact channels list */
.l2v2 .l2v2-page-tickets .tk-channels { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 10px; }
.l2v2 .l2v2-page-tickets .tk-ch {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 16px; border-radius: 14px;
    color: #fff; text-decoration: none;
    transition: .14s;
}
.l2v2 .l2v2-page-tickets .tk-ch:hover { transform: translateY(-1px); color: #fff; }
.l2v2 .l2v2-page-tickets .tk-ch-line { background: linear-gradient(135deg, #06C755, #04a346); }
.l2v2 .l2v2-page-tickets .tk-ch-fb   { background: linear-gradient(135deg, #1877f2, #0d5dbf); }
.l2v2 .l2v2-page-tickets .tk-ch-mail {
    background: var(--side2); border: 1px solid var(--line); color: var(--ink);
}
.l2v2 .l2v2-page-tickets .tk-ch-mail:hover { color: var(--ink); border-color: var(--brand); }
.l2v2 .l2v2-page-tickets .tk-ch-icon {
    width: 44px; height: 44px; border-radius: 12px;
    background: rgba(255, 255, 255, .2);
    display: grid; place-items: center; font-size: 22px; flex-shrink: 0;
}
.l2v2 .l2v2-page-tickets .tk-ch-mail .tk-ch-icon { background: var(--brand); color: var(--brandText); }
.l2v2 .l2v2-page-tickets .tk-ch-body { flex: 1; min-width: 0; }
.l2v2 .l2v2-page-tickets .tk-ch-title { font-weight: 700; font-size: 14px; color: inherit; }
.l2v2 .l2v2-page-tickets .tk-ch-sub { font-size: 11px; opacity: .85; margin-top: 2px; }
.l2v2 .l2v2-page-tickets .tk-ch-mail .tk-ch-sub { color: var(--inkDim); opacity: 1; }
.l2v2 .l2v2-page-tickets .tk-ch-arr { font-size: 18px; color: inherit; opacity: .8; }
.l2v2 .l2v2-page-tickets .tk-hours {
    margin-top: 6px; padding: 14px;
    background: var(--side2); border: 1px solid var(--line);
    border-radius: 12px;
    font-size: 12px; color: var(--inkDim); line-height: 1.6;
}
.l2v2 .l2v2-page-tickets .tk-hours b { color: var(--ink); display: block; margin-bottom: 4px; }

/* Ticket history list */
.l2v2 .l2v2-page-tickets .tk-list { padding: 8px 14px 14px; display: flex; flex-direction: column; gap: 8px; }
.l2v2 .l2v2-page-tickets .tk-item {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 14px; border-radius: 12px;
    background: var(--side2); border: 1px solid var(--line);
    color: var(--ink); text-decoration: none; transition: .14s;
}
.l2v2 .l2v2-page-tickets .tk-item:hover { border-color: var(--brand); color: var(--ink); }
.l2v2 .l2v2-page-tickets .tk-item-icon {
    width: 36px; height: 36px; border-radius: 50%;
    display: grid; place-items: center; font-size: 16px;
    flex-shrink: 0;
}
.l2v2 .l2v2-page-tickets .tk-item-icon.st.done { background: rgba(16, 185, 129, .15); color: var(--success); }
.l2v2 .l2v2-page-tickets .tk-item-icon.st.pend { background: rgba(255, 193, 7, .18); color: var(--warn); }
.l2v2 .l2v2-page-tickets .tk-item-icon.st.fail { background: rgba(107, 114, 128, .15); color: var(--inkDim); }
.l2v2 .l2v2-page-tickets .tk-item-body { flex: 1; min-width: 0; }
.l2v2 .l2v2-page-tickets .tk-item-title { font-size: 13.5px; color: var(--ink); }
.l2v2 .l2v2-page-tickets .tk-item-meta { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 11px; color: var(--inkDim); }
.l2v2 .l2v2-page-tickets .tk-item-arr { font-size: 18px; color: var(--ink2); }

/* End of tickets page */
/* ========================================================================== */

/* ========================================================================== */
/* ----- Add Funds page improvements (existing markup, v4 styling) ---------- */
/* ========================================================================== */
.l2v2 .l2v2-page-addfunds .dashboard-head-wrapper { padding: 0; margin-bottom: 18px; }
.l2v2 .l2v2-page-addfunds .dashboard-head {
    background: var(--side); border: 1px solid var(--line); border-radius: var(--r-xl);
    padding: 22px 26px; display: flex; align-items: center; gap: 18px;
    position: relative; overflow: hidden;
}
.l2v2 .l2v2-page-addfunds .dashboard-head::before {
    content: ''; position: absolute; right: -40px; top: -60px;
    width: 220px; height: 220px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 193, 7, .15), transparent 70%);
    pointer-events: none;
}
.l2v2 .l2v2-page-addfunds .dashboard-head .dhead-icon {
    width: 60px; height: 60px; border-radius: 50%;
    border: 2.5px solid var(--ring-blue); color: var(--ring-blue);
    display: grid; place-items: center; font-size: 26px;
    flex-shrink: 0; background: var(--side); position: relative; z-index: 1;
}
.l2v2 .l2v2-page-addfunds .dashboard-head .dhead-right { flex: 1; min-width: 0; position: relative; z-index: 1; }
.l2v2 .l2v2-page-addfunds .dashboard-head h1,
.l2v2 .l2v2-page-addfunds .dashboard-head h2 { margin: 0; font-size: 22px; font-weight: 800; color: var(--ink); }
.l2v2 .l2v2-page-addfunds .dashboard-head p { margin: 4px 0 0; font-size: 13px; color: var(--inkDim); }

/* Payment grid 4-col → 2-col tablet → 1-col mobile (≤480px) */
.l2v2 .l2v2-page-addfunds .af-pay-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
    margin-bottom: 18px;
}
@media (max-width: 991.98px) { .l2v2 .l2v2-page-addfunds .af-pay-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)    { .l2v2 .l2v2-page-addfunds .af-pay-grid { grid-template-columns: 1fr; } }

.l2v2 .l2v2-page-addfunds .af-pay-card {
    background: var(--side2) !important; border: 2px solid var(--line) !important;
    border-radius: var(--r-lg) !important; padding: 18px 14px !important;
    cursor: pointer; transition: .18s;
    text-align: center; display: flex !important; flex-direction: column;
    align-items: center; gap: 10px; position: relative;
    color: var(--ink) !important;
}
.l2v2 .l2v2-page-addfunds .af-pay-card:hover { border-color: var(--brand) !important; transform: translateY(-2px); }
.l2v2 .l2v2-page-addfunds .af-pay-card.af-pay-active {
    border-color: var(--brand) !important;
    background: rgba(255, 193, 7, .08) !important;
    box-shadow: 0 10px 24px rgba(255, 193, 7, .18);
}
.l2v2 .l2v2-page-addfunds .af-pay-card.af-pay-active::after {
    content: '✓'; position: absolute; top: 8px; right: 10px;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--brand); color: var(--brandText);
    display: grid; place-items: center; font-size: 12px; font-weight: 800;
}
.l2v2 .l2v2-page-addfunds .af-pay-icon {
    width: 48px; height: 48px; border-radius: 12px;
    display: grid; place-items: center; font-size: 22px; color: #fff;
    background: linear-gradient(135deg, var(--info), #0042c4);
}
.l2v2 .l2v2-page-addfunds .af-pay-name { font-size: 13px; font-weight: 700; color: var(--ink); }
.l2v2 .l2v2-page-addfunds .af-pay-bonus {
    font-size: 10px; color: var(--success); font-weight: 600;
    background: rgba(16, 185, 129, .1); padding: 2px 8px; border-radius: 999px;
}

/* Amount input + quick chips */
.l2v2 .l2v2-page-addfunds .payment-amount-field,
.l2v2 .l2v2-page-addfunds .af-amount-force-visible {
    background: var(--side2); border: 1.5px solid var(--line);
    border-radius: var(--r-lg); padding: 12px 16px;
    transition: .14s;
}
.l2v2 .l2v2-page-addfunds .payment-amount-field:focus-within,
.l2v2 .l2v2-page-addfunds .af-amount-force-visible:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(255, 193, 7, .15); }
.l2v2 .l2v2-page-addfunds .payment-amount-input,
.l2v2 .l2v2-page-addfunds .af-amount-force-visible input {
    background: transparent !important; border: 0 !important; outline: 0 !important;
    font-family: var(--font-en); font-weight: 700; font-size: 22px;
    color: var(--ink) !important; width: 100%;
    padding: 4px 0 !important;
}

/* Bonus calculator */
.l2v2 .l2v2-page-addfunds .bonus-result-minimal,
.l2v2 .l2v2-page-addfunds .bonus-summary {
    background: linear-gradient(135deg, rgba(255, 193, 7, .1), rgba(255, 193, 7, .04)) !important;
    border: 1.5px dashed rgba(255, 193, 7, .4) !important;
    border-radius: var(--r-lg) !important;
    padding: 18px 20px !important;
    color: var(--ink);
}
.l2v2 .l2v2-page-addfunds .bonus-total-value { font-family: var(--font-en); font-weight: 800; font-size: 24px; color: var(--ink); letter-spacing: -0.02em; }

/* Slip upload area */
.l2v2 .l2v2-page-addfunds .af-slip-preview {
    background: var(--side2); border: 1.5px dashed var(--line2);
    border-radius: var(--r-lg); padding: 24px;
    text-align: center;
}

/* Terms checkbox area */
.l2v2 .l2v2-page-addfunds .af-terms-agree {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 14px; background: var(--side2);
    border: 1px solid var(--line); border-radius: var(--r-lg);
    margin: 14px 0;
}
.l2v2 .l2v2-page-addfunds .af-terms-label { font-size: 12.5px; line-height: 1.55; color: var(--ink2); }
.l2v2 .l2v2-page-addfunds .af-terms-warn {
    background: rgba(229, 72, 72, .1) !important;
    border: 1px solid rgba(229, 72, 72, .3);
    color: var(--danger) !important;
    padding: 10px 14px; border-radius: 10px; font-size: 12.5px;
}

/* End of Add Funds page */
/* ========================================================================== */

/* ========================================================================== */
/* ----- Affiliates page improvements (existing markup, v4 styling) -------- */
/* ========================================================================== */
.l2v2 .l2v2-page-affiliates .dashboard-head-wrapper { padding: 0; margin-bottom: 18px; }
.l2v2 .l2v2-page-affiliates .dashboard-head {
    background: linear-gradient(135deg, #0c151b 0%, #1a2532 50%, #0c151b 100%);
    border: 1px solid #1f3a4a;
    border-radius: var(--r-2xl);
    padding: 32px 40px;
    color: #fff;
    position: relative; overflow: hidden;
}
.l2v2 .l2v2-page-affiliates .dashboard-head::before {
    content: ''; position: absolute; right: -50px; top: -50px;
    width: 320px; height: 320px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 193, 7, .25), transparent 60%);
    pointer-events: none;
}
.l2v2 .l2v2-page-affiliates .dashboard-head > * { position: relative; z-index: 1; }
.l2v2 .l2v2-page-affiliates .dashboard-head .dhead-icon {
    background: var(--brand); color: var(--brandText);
    border: 0; box-shadow: 0 8px 22px rgba(255, 193, 7, .35);
}
.l2v2 .l2v2-page-affiliates .dashboard-head h1,
.l2v2 .l2v2-page-affiliates .dashboard-head h2,
.l2v2 .l2v2-page-affiliates .dashboard-head .title { color: #fff !important; font-weight: 900 !important; font-size: 28px !important; }
.l2v2 .l2v2-page-affiliates .dashboard-head .text,
.l2v2 .l2v2-page-affiliates .dashboard-head p { color: #c5cdd6 !important; }

/* BUG #6: light-mode contrast fix for affiliate hero.
   In light mode the hero bg becomes light (#edeff2 via html.light .dashboard-head),
   but headline/desc stayed #fff / #c5cdd6 (!important) -> unreadable.
   Override only in light mode; dark mode keeps the white text above. */
html.light .l2v2-page-affiliates .dashboard-head h1,
html.light .l2v2-page-affiliates .dashboard-head h2,
html.light .l2v2-page-affiliates .dashboard-head .title { color: var(--ink) !important; }
html.light .l2v2-page-affiliates .dashboard-head .text,
html.light .l2v2-page-affiliates .dashboard-head p { color: var(--inkDim) !important; }

/* Tier grid */
.l2v2 .l2v2-page-affiliates .aff-tier-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px; margin-bottom: 18px;
}
@media (max-width: 767px) {
    .l2v2 .l2v2-page-affiliates .aff-tier-grid { grid-template-columns: repeat(2, 1fr); }
}
.l2v2 .l2v2-page-affiliates .aff-tier-card {
    background: var(--side); border: 1.5px solid var(--line);
    border-radius: var(--r-lg); padding: 20px 16px;
    text-align: center; transition: .18s; position: relative;
}
.l2v2 .l2v2-page-affiliates .aff-tier-card:hover { transform: translateY(-2px); border-color: var(--brand); box-shadow: var(--shadow-md); }
.l2v2 .l2v2-page-affiliates .aff-tier-active-new,
.l2v2 .l2v2-page-affiliates .aff-tier-active-gold,
.l2v2 .l2v2-page-affiliates .aff-tier-active-platinum,
.l2v2 .l2v2-page-affiliates .aff-tier-active-vip {
    border-color: var(--brand) !important;
    background: rgba(255, 193, 7, .08);
    box-shadow: 0 10px 24px rgba(255, 193, 7, .15);
}

/* Referral link card */
.l2v2 .l2v2-page-affiliates .modern-card,
.l2v2 .l2v2-page-affiliates .referral-section {
    background: linear-gradient(135deg, var(--n-900) 0%, var(--n-700) 50%, var(--n-900) 100%);
    color: #fff; border: 1px solid var(--n-700);
    border-radius: var(--r-2xl); padding: 28px 32px;
    margin-bottom: 18px;
    position: relative; overflow: hidden;
}
.l2v2 .l2v2-page-affiliates .modern-card::before {
    content: ''; position: absolute; right: -50px; top: -50px;
    width: 320px; height: 320px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 193, 7, .25), transparent 60%);
    pointer-events: none;
}
.l2v2 .l2v2-page-affiliates .modern-card > * { position: relative; z-index: 1; }
.l2v2 .l2v2-page-affiliates .section-title { color: #fff !important; font-weight: 800; }

/* Custom affiliate table */
.l2v2 .l2v2-page-affiliates .table-responsive {
    background: var(--side); border: 1px solid var(--line);
    border-radius: var(--r-xl); overflow: hidden;
}
.l2v2 .l2v2-page-affiliates .custom-affiliate-table { width: 100%; border-collapse: collapse; }
.l2v2 .l2v2-page-affiliates .custom-affiliate-table th,
.l2v2 .l2v2-page-affiliates .custom-affiliate-table td {
    padding: 14px 18px; text-align: left;
    border-bottom: 1px solid var(--line);
}
.l2v2 .l2v2-page-affiliates .custom-affiliate-table th {
    background: var(--side2);
    font-size: 11px; font-weight: 800; color: var(--inkDim);
    text-transform: uppercase; letter-spacing: .08em;
}
.l2v2 .l2v2-page-affiliates .custom-affiliate-table td { font-size: 13px; color: var(--ink); }

/* Withdrawal modals */
.l2v2 .l2v2-page-affiliates .aff-modal-content {
    background: var(--side); border: 1px solid var(--line);
    border-radius: var(--r-xl); color: var(--ink);
}
.l2v2 .l2v2-page-affiliates .aff-modal-header {
    padding: 18px 22px; border-bottom: 1px solid var(--line);
    display: flex; align-items: center; justify-content: space-between;
}
.l2v2 .l2v2-page-affiliates .aff-modal-title { color: var(--brand); font-weight: 800; font-size: 16px; }

/* End of Affiliates page */
/* ========================================================================== */

/* ========================================================================== */
/* ----- Services page (.l2v2-page-services) — categories grid -------------- */
/* ========================================================================== */
.l2v2 .l2v2-page-services .services-head-row {
    background: var(--side); border: 1px solid var(--line);
    border-radius: var(--r-lg); padding: 12px 18px;
    margin-bottom: 12px;
    font-size: 12px; font-weight: 700; color: var(--inkDim);
    text-transform: uppercase;
}
.l2v2 .l2v2-page-services .services-head-row .s-title { color: var(--inkDim); font-weight: 700; }
.l2v2 .l2v2-page-services .si-wrapper {
    background: var(--side); border: 1px solid var(--line);
    border-radius: var(--r-xl); overflow: hidden;
    margin-bottom: 18px;
}
.l2v2 .l2v2-page-services .si-header {
    background: linear-gradient(95deg, #ffc107 0%, #ffce3a 60%, #ffc107 100%);
    color: #0c151b !important;
    padding: 14px 22px; font-weight: 800;
    position: relative; overflow: hidden;
}
.l2v2 .l2v2-page-services .si-header::before {
    content: ''; position: absolute; right: -30px; top: -40px;
    width: 160px; height: 160px; border-radius: 50%;
    background: rgba(255, 255, 255, .18); pointer-events: none;
}
.l2v2 .l2v2-page-services .si-title { color: #0c151b !important; font-weight: 800; position: relative; z-index: 1; }
.l2v2 .l2v2-page-services .service-item {
    padding: 12px 22px; border-top: 1px solid var(--line); transition: background .14s;
}
.l2v2 .l2v2-page-services .service-item:hover { background: var(--side2); }
.l2v2 .l2v2-page-services .s-row {
    display: flex; align-items: center; gap: 12px;
    font-size: 13px; color: var(--ink);
}
.l2v2 .l2v2-page-services .s-col-id { font-family: var(--font-mono); color: var(--inkDim); font-weight: 700; min-width: 60px; }
.l2v2 .l2v2-page-services .s-title { font-weight: 600; flex: 1; min-width: 0; }
.l2v2 .l2v2-page-services .s-col-c { font-family: var(--font-en); font-weight: 700; min-width: 80px; text-align: center; }
.l2v2 .l2v2-page-services .s-col-btn { min-width: 80px; }
.l2v2 .l2v2-page-services .favorite-active { color: var(--brand); }
.l2v2 .l2v2-page-services .nothing-found { padding: 48px; text-align: center; color: var(--inkDim); }
.l2v2 .l2v2-page-services .search-services {
    position: relative; flex: 1;
}
.l2v2 .l2v2-page-services .search-services .icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--inkDim); pointer-events: none; }
.l2v2 .l2v2-page-services .search-services .textbox {
    width: 100%; padding: 10px 14px 10px 40px;
    background: var(--side2); border: 1px solid var(--line); border-radius: 11px;
    color: var(--ink); font-size: 13px; outline: none;
}

/* End of Services page */
/* ========================================================================== */

/* ========================================================================== */
/* ----- Mobile bottom navbar — iOS26 Liquid Glass, FLAT (single layer) ----- */
/* === This is the single source of truth for the bottom nav (U54/U55 removed below). */
/* ========================================================================== */
@media (max-width: 767px) {
    /* glass tokens — flip by theme */
    html.light .my-mobile-navbar { --nAcc:#D99700; --nIdle:#8a909b; --nGlass:rgba(255,255,255,.58); --nGlassBd:rgba(255,255,255,.75); --nTint:rgba(217,151,0,.13); --nFab:#FBBA00; --nFabBd:#ffffff; --nNav:0 14px 40px rgba(0,0,0,.16); }
    html.dark  .my-mobile-navbar { --nAcc:#FFCF45; --nIdle:#828c99; --nGlass:rgba(22,28,37,.52); --nGlassBd:rgba(255,255,255,.13); --nTint:rgba(255,207,69,.15); --nFab:#FFC72E; --nFabBd:#10141a; --nNav:0 16px 44px rgba(0,0,0,.42); }

    /* OUTER wrapper: fully transparent — NO bg/border/shadow/blur (this kills the 2nd "card" layer) */
    .l2v2 .my-mobile-navbar {
        position: fixed !important;
        left: 14px !important; right: 14px !important;
        bottom: calc(14px + env(safe-area-inset-bottom)) !important;
        height: auto !important;
        z-index: 10000 !important;
        background: transparent !important;
        border: 0 !important; border-radius: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
        backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
        overflow: visible !important;
    }
    /* the ONE frosted glass pill — real liquid glass: translucent + heavy blur + saturate (blur now samples the page, not an opaque layer) */
    .l2v2 .my-mobile-navbar .mobile-navbar-content {
        display: flex !important;
        align-items: flex-end; justify-content: space-around;
        gap: 2px; width: 100%; height: 64px;
        padding: 0 8px;
        background: var(--nGlass) !important;
        border: 1px solid var(--nGlassBd) !important;
        border-radius: 27px;
        box-shadow: var(--nNav);
        backdrop-filter: blur(30px) saturate(180%);
        -webkit-backdrop-filter: blur(30px) saturate(180%);
        overflow: visible;
    }
    .l2v2 .my-mobile-navbar .mnc-item {
        flex: 1; min-width: 0;
        display: flex !important; flex-direction: column;
        align-items: center; justify-content: flex-end;
        gap: 3px; padding: 8px 2px 8px;
        border-radius: 15px;
        text-decoration: none !important;
        color: var(--nIdle) !important;
        background: none !important; box-shadow: none !important;
        transition: color .18s; position: relative;
    }
    .l2v2 .my-mobile-navbar .mnc-item-icon {
        width: 26px; height: 26px;
        display: grid; place-items: center;
        font-size: 22px; line-height: 1;
        background: none !important; box-shadow: none !important;
        transform: none;
    }
    .l2v2 .my-mobile-navbar .mnc-item-icon i { font-size: 22px; line-height: 1; }
    .l2v2 .my-mobile-navbar .mnc-item-text {
        font-size: 10.5px; font-weight: 600;
        white-space: nowrap; line-height: 1.1; margin: 0;
    }
    /* ACTIVE (non-center): gold color + a subtle FLAT lens — no gold block, no glow */
    .l2v2 .my-mobile-navbar .mnc-item.active:not(.mnc-item-center),
    .l2v2 .my-mobile-navbar .mnc-item.active:not(.mnc-item-center) .mnc-item-icon,
    .l2v2 .my-mobile-navbar .mnc-item.active:not(.mnc-item-center) .mnc-item-icon i,
    .l2v2 .my-mobile-navbar .mnc-item.active:not(.mnc-item-center) .mnc-item-text {
        color: var(--nAcc) !important;
    }
    .l2v2 .my-mobile-navbar .mnc-item.active:not(.mnc-item-center) {
        background: none !important; box-shadow: none !important;
    }
    .l2v2 .my-mobile-navbar .mnc-item.active:not(.mnc-item-center)::before {
        content: ''; position: absolute; inset: 5px 7px 5px;
        border-radius: 13px; background: var(--nTint);
        z-index: -1; box-shadow: none !important;
    }
    .l2v2 .my-mobile-navbar .mnc-item.active .mnc-item-text { font-weight: 700; }
    .l2v2 .my-mobile-navbar .mnc-item.active .mnc-item-icon { transform: none; }
    .l2v2 .my-mobile-navbar .mnc-item:not(.active):active { transform: scale(.95); }
    /* CENTER FAB — raised FLAT gold square, neutral soft shadow, page-colored ring (cut-out look) */
    .l2v2 .my-mobile-navbar .mnc-item.mnc-item-center {
        flex: none !important; max-width: none !important;
        background: none !important; box-shadow: none !important;
        border: 0 !important; transform: none !important;
        padding: 0 4px; overflow: visible;
    }
    .l2v2 .my-mobile-navbar .mnc-item-center::before { display: none !important; }
    .l2v2 .my-mobile-navbar .mnc-item-center .mnc-item-icon {
        width: 54px; height: 54px; border-radius: 17px;
        display: grid; place-items: center;
        margin: -30px auto 2px;
        background: var(--nFab) !important;
        box-shadow: 0 6px 16px rgba(0,0,0,.30) !important;
        position: relative; top: auto !important; left: auto !important;
        translate: none !important; transform: none !important;
        filter: none !important; text-shadow: none !important;
        font-size: 24px;
    }
    .l2v2 .my-mobile-navbar .mnc-item-center .mnc-item-icon::before {
        content: ''; position: absolute; inset: -4px;
        border-radius: 21px; border: 4px solid var(--nFabBd);
    }
    .l2v2 .my-mobile-navbar .mnc-item-center .mnc-item-icon i {
        font-size: 24px !important; color: #3a2c00 !important;
        position: static !important; transform: none !important;
        translate: none !important; text-shadow: none !important; filter: none !important;
    }
    .l2v2 .my-mobile-navbar .mnc-item-center .mnc-item-text {
        display: block !important; font-weight: 700;
        color: var(--nAcc) !important; font-size: 10.5px;
    }
    /* Page padding-bottom so content isn't hidden by navbar */
    body#appDashboard.l2v2 .appContent { padding-bottom: 120px; }
}
/* Hide on desktop */
@media (min-width: 768px) {
    .l2v2 .my-mobile-navbar { display: none !important; }
}

/* End of mobile navbar */
/* ========================================================================== */

/* ========================================================================== */
/* ----- Add Funds dashboard-head fix (markup has nested .dhead-body) ------- */
/* ========================================================================== */
.l2v2 .l2v2-page-addfunds .dashboard-head {
    /* Override the flex from earlier — the actual structure is nested:
     * .dashboard-head > .dhead-body > .dhead-left > .dhead-icon
     *                              > .dhead-right > h2 + p
     * So flex should be on .dhead-body, not .dashboard-head. */
    display: block !important;
}
.l2v2 .l2v2-page-addfunds .dashboard-head .dhead-body {
    display: flex !important;
    align-items: center;
    gap: 18px;
    position: relative; z-index: 1;
}
.l2v2 .l2v2-page-addfunds .dashboard-head .dhead-left { flex-shrink: 0; }
.l2v2 .l2v2-page-addfunds .dashboard-head .dhead-right {
    flex: 1; min-width: 0;
}
.l2v2 .l2v2-page-addfunds .dashboard-head .dhead-right .title,
.l2v2 .l2v2-page-addfunds .dashboard-head .dhead-right h2 {
    margin: 0; font-size: 22px; font-weight: 800; color: var(--ink);
    letter-spacing: -0.01em;
}
.l2v2 .l2v2-page-addfunds .dashboard-head .dhead-right .text,
.l2v2 .l2v2-page-addfunds .dashboard-head .dhead-right p {
    margin: 4px 0 0; font-size: 13px; color: var(--inkDim);
}

/* Tickets page — same nested fix */
.l2v2 .l2v2-page-tickets .dashboard-head { display: block !important; }
.l2v2 .l2v2-page-tickets .dashboard-head .dhead-body {
    display: flex !important; align-items: center; gap: 18px;
    position: relative; z-index: 1;
}
.l2v2 .l2v2-page-tickets .dashboard-head .dhead-right { flex: 1; min-width: 0; }
.l2v2 .l2v2-page-tickets .dashboard-head .dhead-right .title,
.l2v2 .l2v2-page-tickets .dashboard-head .dhead-right h2 {
    margin: 0; font-size: 22px; font-weight: 800; color: var(--ink);
}
.l2v2 .l2v2-page-tickets .dashboard-head .dhead-right .text,
.l2v2 .l2v2-page-tickets .dashboard-head .dhead-right p {
    margin: 4px 0 0; font-size: 13px; color: var(--inkDim);
}

/* End of dashboard-head fixes */
/* ========================================================================== */

/* ========================================================================== */
/* ----- Public pages polish (signin/signup/about/terms/etc) ---------------- */
/* ========================================================================== */
/* Signup / reset / setnew / confirm — wrap in lk-land yellow theme + simple cards */
.lk-land .register-page,
.lk-land .lk-public-form-wrap {
    min-height: calc(100vh - 80px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}
.lk-land .register-page .col-xl-5.py-5,
.lk-land .lk-public-form-card {
    background: #fff;
    border-radius: 28px;
    padding: 40px !important;
    max-width: 540px; width: 100%;
    margin: 0 auto;
    box-shadow: 0 28px 60px rgba(0, 0, 0, .15);
}
.lk-land .register-page .col-xl-5.register-left { display: none !important; }

/* Hide register-page legacy yellow bg + before pseudo (we use lk-land yellow) */
.lk-land .register-page::before { display: none !important; }
.lk-land .register-page { background: transparent !important; }

/* Public terms / about / how-it-works pages — wrap content with white card */
.lk-land .home-section h1,
.lk-land .home-section h2:not(.lk-stats-h2) { color: #0c151b; }
.lk-land .home-section p,
.lk-land .home-section li { color: #4a5160; }

/* End of public pages */
/* ========================================================================== */

/* ========================================================================== */
/* ----- Daily check-in modal polish (.ci-modal) ---------------------------- */
/* ========================================================================== */
.l2v2 .ci-modal,
.modal .ci-modal { background: var(--side); border-radius: 24px; overflow: hidden; }
.ci-modal-header {
    background: linear-gradient(135deg, #ffc107 0%, #ff9800 50%, #ff6e3e 100%);
    padding: 24px 24px 20px;
    position: relative;
    color: #fff;
    overflow: hidden;
}
.ci-modal-header .ci-header-deco {
    position: absolute; right: -40px; top: -40px;
    width: 180px; height: 180px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .15);
    pointer-events: none;
}
.ci-modal-header .ci-header-deco::after {
    content: ''; position: absolute; left: -90px; bottom: -120px;
    width: 220px; height: 220px; border-radius: 50%;
    background: rgba(255, 255, 255, .08);
}
.ci-modal-header .ci-close-btn {
    position: absolute; top: 16px; right: 16px;
    background: rgba(255,255,255,.25) !important;
    opacity: 1; padding: 6px;
    border-radius: 8px;
}
.ci-modal-header .ci-streak-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255, 255, 255, .25);
    padding: 8px 16px; border-radius: 999px;
    margin-bottom: 16px; backdrop-filter: blur(8px);
    position: relative; z-index: 1;
}
.ci-streak-icon { font-size: 18px; color: #ff4500; }
.ci-streak-num { font-family: var(--font-en); font-weight: 800; font-size: 18px; }
.ci-streak-label { font-size: 12px; opacity: .9; }
.ci-modal-header .ci-header-content { position: relative; z-index: 1; }
.ci-modal-header .ci-header-title { font-size: 22px; font-weight: 800; color: #fff; }
.ci-modal-header .ci-header-sub { font-size: 13px; opacity: .9; margin-top: 4px; }

.ci-modal-body { padding: 20px; background: var(--side); }
.ci-grid {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px;
    margin: 0 0 16px;
}
.ci-day {
    background: var(--side2); border: 1px solid var(--line);
    border-radius: 12px; padding: 10px 2px 12px; text-align: center;
    transition: .2s;
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    gap: 6px;
    min-height: 96px;
}
.ci-day-label { font-size: 10px; font-weight: 700; color: var(--inkDim); text-transform: uppercase; letter-spacing: .04em; line-height: 1; }
.ci-coin, .ci-day .ci-gift, .ci-day .ci-check {
    width: 32px; height: 32px; margin: 0 auto;
    border-radius: 50%;
    color: #fff; display: grid; place-items: center; font-size: 16px;
    flex-shrink: 0;
}
.ci-coin { background: linear-gradient(135deg, #d4d4d8, #a1a1aa); box-shadow: 0 2px 6px rgba(0, 0, 0, .12); }
.ci-day-pts { font-size: 12px; font-weight: 800; color: var(--ink2); line-height: 1; }
.ci-day.today { border-color: var(--brand); background: linear-gradient(135deg, rgba(255, 193, 7, .15), rgba(255, 152, 0, .05)); }
.ci-day.today .ci-coin { background: linear-gradient(135deg, #ffc107, #ff9800); box-shadow: 0 4px 12px rgba(255, 193, 7, .35); }
.ci-day.today .ci-day-pts { color: var(--brand); }
.ci-day.checked .ci-coin { background: linear-gradient(135deg, #ffc107, #e8a800); }
.ci-day.bonus { border-color: var(--brand); background: linear-gradient(135deg, rgba(255, 152, 0, .12), rgba(255, 110, 62, .08)); }
.ci-day.bonus .ci-gift {
    background: linear-gradient(135deg, #ff9800, #ff6e3e);
    box-shadow: 0 4px 12px rgba(255, 152, 0, .35);
    position: relative;
}
.ci-day.bonus .ci-gift::after {
    content: ''; position: absolute; right: -2px; top: -2px;
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--ring-red); border: 2px solid var(--side);
}
.ci-day.bonus .ci-day-pts { color: #ff6e3e; }
.ci-bonus-tag {
    background: linear-gradient(135deg, #ff9800, #ff6e3e); color: #fff;
    font-size: 9px; font-weight: 800; letter-spacing: .04em;
    padding: 2px 6px; border-radius: 999px;
    line-height: 1.2;
    margin-top: -2px;
}

.ci-reward-box {
    background: var(--side2); border: 1px solid var(--line);
    border-radius: var(--r-lg); padding: 14px; text-align: center;
    margin-bottom: 16px;
}

.ci-cta-btn {
    width: 100%;
    background: linear-gradient(135deg, #ffc107, #ff9800);
    color: var(--brandText);
    border: 0; border-radius: var(--r-lg);
    padding: 12px; font-size: 14px; font-weight: 800;
    cursor: pointer; transition: .18s;
    box-shadow: 0 8px 20px rgba(255, 193, 7, .35);
}
.ci-cta-btn:hover { transform: translateY(-1px); box-shadow: 0 12px 24px rgba(255, 193, 7, .45); }
.ci-cta-btn:disabled { background: var(--line); color: var(--inkDim); cursor: not-allowed; box-shadow: none; }

/* End of check-in modal */
/* ========================================================================== */

/* ========================================================================== */
/* ----- Add Funds VIP promo banner — themed (purple/yellow) ---------------- */
/* ========================================================================== */
.l2v2 .l2v2-page-addfunds .alert.af-alert-banner,
.l2v2 .l2v2-page-addfunds .alert-warning.af-alert-banner {
    background: linear-gradient(95deg, #ef4444 0%, #f97316 60%, #ffc107 100%) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: var(--r-xl) !important;
    padding: 14px 48px 14px 22px !important;
    box-shadow: 0 8px 22px rgba(239, 68, 68, .22);
    font-weight: 600;
    position: relative;
    margin-bottom: 16px !important;
    overflow: hidden;
    line-height: 1.55;
}
.l2v2 .l2v2-page-addfunds .alert.af-alert-banner::before {
    content: ''; position: absolute; right: -30px; top: -50px;
    width: 200px; height: 200px; border-radius: 50%;
    background: rgba(255,255,255,.10); pointer-events: none;
}
.l2v2 .l2v2-page-addfunds .alert.af-alert-banner strong,
.l2v2 .l2v2-page-addfunds .alert-warning.af-alert-banner strong {
    font-weight: 800; color: #fff;
}
.l2v2 .l2v2-page-addfunds .alert.af-alert-banner .close,
.l2v2 .l2v2-page-addfunds .alert.af-alert-banner .btn-close {
    position: absolute; top: 50%; right: 14px; transform: translateY(-50%);
    background: transparent; border: 0;
    color: #fff !important; opacity: .85;
    width: 28px; height: 28px; padding: 0; line-height: 1;
    font-size: 22px; cursor: pointer;
    display: grid; place-items: center;
    z-index: 2;
}
.l2v2 .l2v2-page-addfunds .alert.af-alert-banner .close:hover { opacity: 1; }

/* Unify .dashboard-head with .pg-head spacing/sizing across pages */
.l2v2 .l2v2-content .dashboard-head-wrapper { margin-bottom: 18px; padding: 0; }
.l2v2 .l2v2-content .dashboard-head-wrapper .container { padding: 0 !important; max-width: none !important; }

/* End of addfunds polish */
/* ========================================================================== */

/* End of Likester 2026 Level 2 v4 Components */
/* ========================================================================== */


.alert-unread-message {
  animation: pulse-yellow 2s infinite;
}

html,
body {
	font-family: "Noto Sans Thai", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	background: #ffbf00;
	min-height: 100vh;
	position: relative;
}

/* แก้ปัญหา body เหลืองปรากฏใต้ navbar ใน mobile */
@media (max-width: 767px) {
  /* Dark Mode */
  html.dark #appDashboard,
  html.dark .appAuth,
  #appDashboard:not(.light),
  .appAuth:not(.light) {
    min-height: 100vh;
    background: #0C141B !important; /* สีเทาเข้มสำหรับ Dark Mode */
  }

  /* Light Mode */
  html.light #appDashboard,
  html.light .appAuth {
    min-height: 100vh;
    background: #f7f8f9 !important; /* สีเทาอ่อนสำหรับ Light Mode */
  }
}

.clearfix {
	clear: both
}

a,
a:hover,
a:focus {
	text-decoration: none
}

.hidden {
	display: none !important
}

::-webkit-scrollbar {
	width: 7px;
	height: 7px
}

::-webkit-scrollbar-thumb {
	background: #ccc;
	border-radius: 5px
}

::-webkit-scrollbar-track {
	background: transparent
}

/* FAQ Section Styles */
.faq-item {
	background: #121D27; /* Dark First */
	margin-bottom: 1rem;
	border-radius: 10px;
	box-shadow: 0 2px 10px rgba(0,0,0,0.1);
	overflow: hidden;
	transition: all 0.3s ease;
}

.faq-question {
	padding: 20px;
	border-bottom: 1px solid #eee;
	cursor: pointer;
	position: relative;
	transition: background 0.3s ease;
}

.faq-question:hover {
	background: #f8f9fa;
}

.faq-question h5 {
	margin: 0;
	color: #333;
	padding-right: 30px;
}

.faq-question i {
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	transition: transform 0.3s ease;
	color: #666;
}

.faq-answer {
	padding: 0;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease, padding 0.3s ease;
}

.faq-answer p {
	margin: 0;
	color: #666;
	line-height: 1.6;
}

.faq-item.active .faq-answer {
	padding: 20px;
	max-height: 500px;
}

.faq-item.active .faq-question i {
	transform: translateY(-50%) rotate(45deg);
}

.header {
	height: 100px;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	z-index: 1000;
	margin-top: 30px
}

.header .site-icon-container {
	display: inline-block
}

.header .site-icon-container img {
	max-height: 54px;
	width: auto
}

.header .site-name {
	font-size: 30px;
	color: #fff;
	font-weight: 300;
	line-height: 54px;
	letter-spacing: .8px;
	margin-left: -10px
}

.header .site-name img {
	height: 85px
}

.header .header-menu ul {
	margin: 0;
	padding: 0;
	list-style: none
}

.header .header-menu ul li {
	display: inline-block;
	padding: 0 25px
}

.header .header-menu ul li.active a {
	color: #fff !important
}

.header .header-menu ul li a {
	color: rgba(255, 255, 255, 0.8);
	text-decoration: none;
	font-size: 17px;
	display: block;
	font-weight: 600;
	height: 100px;
	line-height: 100px;
	position: relative;
	-webkit-transition: .2s ease;
	transition: .2s ease
}

.header .header-menu ul li a:hover {
	color: rgba(255, 255, 255, 0.9)
}
.home-menu-btn {
	display: none
}

.home-head {
	width: 100%;
	overflow: hidden;
	position: relative;
	padding: 130px 0 40px
}

.home-head .bub-items {
	position: absolute;
	z-index: 32;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0
}

.home-head .bub-items>* {
	position: absolute
}

.home-head .bub-items .bubi-0 {
	left: -180px;
	top: 50px;
	-webkit-animation: heart 3s infinite;
	animation: heart 3s infinite
}

.home-head .bub-items .bubi-1 {
	left: -207px;
	bottom: 220px;
	-webkit-animation: animateTwo 7s infinite;
	animation: animateTwo 7s infinite
}

.home-head .bub-items .bubi-2 {
	right: -290px;
	top: 60px;
	-webkit-animation: animateTwo 7s infinite;
	animation: animateTwo 7s infinite
}

.home-head .bub-items .bubi-3 {
	right: -150px;
	top: 360px;
	-webkit-animation: animateFour 5s infinite;
	animation: animateFour 5s infinite
}

@-webkit-keyframes heart {
	0% {
		-webkit-transform: scale(1);
		transform: scale(1)
	}

	50% {
		-webkit-transform: scale(1.3);
		transform: scale(1.3)
	}

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

@keyframes heart {
	0% {
		-webkit-transform: scale(1);
		transform: scale(1)
	}

	50% {
		-webkit-transform: scale(1.3);
		transform: scale(1.3)
	}

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

@-webkit-keyframes animateTwo {
	0% {
		-webkit-transform: translateX(0) translateY(0);
		transform: translateX(0) translateY(0)
	}

	20% {
		-webkit-transform: translateX(20px) translateY(15px) scale(1.1);
		transform: translateX(20px) translateY(15px) scale(1.1)
	}

	56% {
		-webkit-transform: translateX(-5px) translateY(24px) scale(1);
		transform: translateX(-5px) translateY(24px) scale(1)
	}

	75% {
		-webkit-transform: translateX(30px) translateY(-5px) scale(1);
		transform: translateX(30px) translateY(-5px) scale(1)
	}

	100% {
		-webkit-transform: translateX(0) translateY(0) scale(1);
		transform: translateX(0) translateY(0) scale(1)
	}
}

@keyframes animateTwo {
	0% {
		-webkit-transform: translateX(0) translateY(0);
		transform: translateX(0) translateY(0)
	}

	20% {
		-webkit-transform: translateX(20px) translateY(15px) scale(1.1);
		transform: translateX(20px) translateY(15px) scale(1.1)
	}

	56% {
		-webkit-transform: translateX(-5px) translateY(24px) scale(1);
		transform: translateX(-5px) translateY(24px) scale(1)
	}

	75% {
		-webkit-transform: translateX(30px) translateY(-5px) scale(1);
		transform: translateX(30px) translateY(-5px) scale(1)
	}

	100% {
		-webkit-transform: translateX(0) translateY(0) scale(1);
		transform: translateX(0) translateY(0) scale(1)
	}
}

@-webkit-keyframes animateFour {
	0% {
		-webkit-transform: translateX(0) translateY(0);
		transform: translateX(0) translateY(0)
	}

	20% {
		-webkit-transform: translateX(-4px) translateY(28px) scale(1.1);
		transform: translateX(-4px) translateY(28px) scale(1.1)
	}

	56% {
		-webkit-transform: translateX(-16px) translateY(-14px) scale(1);
		transform: translateX(-16px) translateY(-14px) scale(1)
	}

	75% {
		-webkit-transform: translateX(24px) translateY(23px) scale(1.4);
		transform: translateX(24px) translateY(23px) scale(1.4)
	}

	100% {
		-webkit-transform: translateX(0) translateY(0) scale(1);
		transform: translateX(0) translateY(0) scale(1)
	}
}

@keyframes animateFour {
	0% {
		-webkit-transform: translateX(0) translateY(0);
		transform: translateX(0) translateY(0)
	}

	20% {
		-webkit-transform: translateX(-4px) translateY(28px) scale(1.1);
		transform: translateX(-4px) translateY(28px) scale(1.1)
	}

	56% {
		-webkit-transform: translateX(-16px) translateY(-14px) scale(1);
		transform: translateX(-16px) translateY(-14px) scale(1)
	}

	75% {
		-webkit-transform: translateX(24px) translateY(23px) scale(1.4);
		transform: translateX(24px) translateY(23px) scale(1.4)
	}

	100% {
		-webkit-transform: translateX(0) translateY(0) scale(1);
		transform: translateX(0) translateY(0) scale(1)
	}
}

.home-head .home-head-real-content {
	z-index: 38;
	position: relative
}

.home-head .home-head-bg {
	background-image: url(https://storage.perfectcdn.com/e70129/3m8keh61652913xh.png);
	background-size: cover;
	background-position: top center;
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 0
}

.home-head .home-head-content {
	z-index: 100;
	position: relative;
	padding: 100px 0;
	z-index: 33
}

.home-head .hh-left-badge {
	background: #121d27d4;
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	height: 50px;
	border-radius: 25px;
	padding-right: 10px
}

.home-head .hh-left-badge .hhlb-icon {
	background: #ffc107;
	color: #fff;
	margin: 5px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	height: 40px;
	width: 40px;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	border-radius: 50%
}

.home-head .hh-left-badge .hhlb-text {
	padding: 15px 14px;
	color: #ffc107;
	font-weight: 600;
	line-height: 20px;
	font-size: 13px
}

.home-head .hl-title {
	font-size: 42px;
	line-height: 56px;
	font-weight: 600;
	margin-top: 42px;
	margin-bottom: 40px;
	color: #fff
}

.home-head .hl-text {
	color: #fff;
	font-size: 18px;
	line-height: 30px;
	font-weight: 400
}

.hl-btns {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	margin-top: 50px;
	margin-left: -8px;
	margin-right: -8px
}

.hl-btns>a {
	margin: 8px
}

.logbox {
	position: relative;
}

/* NOTE: legacy .logbox::before removed 2026-04-11 — it was an absolutely
   positioned gradient layer with zero dimensions (no top/left/width/height),
   pure dead code. Paired light-mode override at bottom of file also removed. */

.logbox .logbox-content {
	background: #121D27; /* Dark First */
	border-radius: 20px;
	position: relative;
	z-index: 15;
	padding: 56px 30px 25px
}

.logbox .logbox-title {
	font-size: 21px;
	font-weight: 600;
	color: #fff;
	text-align: center;
	padding-bottom: 40px
}

/* CLEANUP 2026-05-07: removed .hl-input + .floating-label rules (dead — replaced
 * by .lk-field in the v4 yellow landing hero. Verified zero hits across all
 * .twig/.js/.html files in the project tree.) */

.hl-special:first-child {
	border: none !important
}

.hl-special {
	border: 2px solid #213446;
	background: #15222E;
	display: block;
	line-height: 20px;
	font-size: 12px;
	color: #fff;
	text-align: center;
	padding: 12px 20px;
	border-radius: 10px;
	overflow: hidden;
	cursor: pointer;
	height: 48px !important;
	-webkit-transition: .14s ease;
	transition: .14s ease;
	text-decoration: none;
	font-weight: 600
}

.hl-special:hover {
	text-decoration: none !important;
	border-color: #ffc107;
	color: #fff;
	-webkit-transform: scale(0.94);
	transform: scale(0.94);
	opacity: .9
}

.custom-check {
	display: block;
	position: relative;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none
}

.custom-check input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
	display: none
}

.custom-check label {
	position: relative;
	z-index: 25
}

.custom-check .checkmark {
	position: absolute;
	top: 2px;
	left: 2px;
	right: 2px;
	bottom: 2px;
	background-color: transparent;
	-webkit-transition: .14s ease;
	transition: .14s ease;
	border-radius: 10px
}

.custom-check:hover input~.checkmark {
	background-color: transparent
}

.custom-check input:checked~.checkmark {
	background-color: #ffc107
}

.custom-check .checkmark:after {
	content: "";
	position: absolute;
	display: none
}

.custom-check input:checked~.checkmark:after {
	display: block
}

.custom-check .checkmark:after {
	left: 20px;
	top: 12px;
	width: 5px;
	height: 10px;
	border: solid #fff;
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg)
}

.dh-acc {
	display: block;
	margin-top: 44px;
	margin-bottom: 20px;
	position: relative;
	width: 100%;
	text-align: center
}

.dh-acc .dh-acc-content {
	background: #121D27;
	padding: 0 18px;
	position: relative;
	z-index: 4;
	display: inline-block;
	font-size: 14px;
	font-size: 600;
	color: #fff
}

.dh-acc::before {
	content: '';
	z-index: 3;
	position: absolute;
	left: 0;
	top: 50%;
	height: 1px;
	width: 100%;
	background: #224E64
}

.btn {
	border-radius: 20px;
	/* 2026-04-11: was `transition: cubic-bezier(...) .2s` with no property name
	   which parsed as `all` and caused every style change (hover, focus, theme
	   toggle) to animate together — a known flicker cause. Now explicit. */
	-webkit-transition: background-color .2s cubic-bezier(0.55, 0.085, 0.68, 0.53),
	                    color .2s cubic-bezier(0.55, 0.085, 0.68, 0.53),
	                    border-color .2s cubic-bezier(0.55, 0.085, 0.68, 0.53),
	                    transform .2s cubic-bezier(0.55, 0.085, 0.68, 0.53),
	                    box-shadow .2s cubic-bezier(0.55, 0.085, 0.68, 0.53);
	transition: background-color .2s cubic-bezier(0.55, 0.085, 0.68, 0.53),
	            color .2s cubic-bezier(0.55, 0.085, 0.68, 0.53),
	            border-color .2s cubic-bezier(0.55, 0.085, 0.68, 0.53),
	            transform .2s cubic-bezier(0.55, 0.085, 0.68, 0.53),
	            box-shadow .2s cubic-bezier(0.55, 0.085, 0.68, 0.53);
	font-weight: 700;
	padding: 20px 40px;
}

.btn.btn-primary {
	background: #ffc107;
	color: #0c151b; /* dark text on yellow — was #fff (invisible) */
	border: none;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.btn.btn-primary:hover {
	background-color: #e2aa03;
	color: #0c151b;
}

.btn.btn-primary:focus,
.btn.btn-primary:active {
	background-color: #e2aa03 !important;
	color: #0c151b !important;
}

.btn.btn-lg {
	padding: 20px
}

.btn:hover {
	/* 2026-04-11: was scale(0.96) — a shrinking button on hover feels "broken"
	   and combined with no transition created a snap-change that looked like
	   a flicker. Modernized to a subtle lift. */
	-webkit-transform: translateY(-2px);
	transform: translateY(-2px);
}

.btn-100 {
	display: block;
	width: 100%;
	text-align: center
}

.btn-100.btn-icon {
	display: flex;
	justify-content: center
}

.btn-rounded {
	border-radius: 25px
}

.btn-lg {
	padding: 12px 20px
}

.btn-outline {
	border: #ffffff;
	color: #fff;
	background-color: transparent
}

.btn-outline:hover,
.btn-outline:focus {
	border: 1px solid rgba(255, 255, 255, 1);
	color: #fff
}

.btn-outline.btn-light {
	color: #fff;
	border-color: #2a4771
}

.btn-outline.btn-light:hover {
	background-color: #2a4771
}

.btn-outline.btn-secondary {
	border-color: #2a4771;
	background: #0c2447;
	color: #fff
}

html.light .btn-outline.btn-secondary {
	border-color: #dee2e6;
	background: #ffffff;
	color: #6c757d;
}


.dd-btn::after {
	display: none
}

.btn-transparent {
	border: 1px solid;
	border-color: transparent;
	outline: none;
	background-color: transparent;
	color: #fff
}

.btn-transparent:hover {
	background-color: rgba(255, 255, 255, 0.05);
	border-color: rgba(255, 255, 255, 0.05);
	color: #fff
}

.home-section {
	padding: 120px 0
}

.hfs-content .hfs-item {
	margin: 15px 0
}

.hfs-content .hfs-item .hfs-count {
	font-size: 36px;
	letter-spacing: .4px;
	color: #fff;
	font-weight: 700
}

.hfs-content .hfs-item .hfs-title {
	font-size: 24px;
	font-weight: 500;
	color: #121D27
}

@media (max-width: 768px) {
    .hfs-item {
        text-align: center;  /* จัดข้อความและเนื้อหาให้อยู่ตรงกลาง */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
}


.home-title {
	position: relative
}

.home-title h2 {
	color: #fff;
	font-weight: 700;
	font-size: 39px
}

.home-title .hh-icon {
	position: relative;
	display: inline-block;
	margin-bottom: 46px
}

.home-title .hh-icon::before {
	content: '';
	position: absolute;
	z-index: 20;
	border-radius: 23px;
	left: -13px;
	right: -13px;
	top: -13px;
	bottom: -13px;
	background: rgba(0, 175, 76, 0.2)
}

.home-title .hh-icon .hh-content {
	position: relative;
	z-index: 25;
	background: #00AF4C;
	border-radius: 15px;
	height: 50px;
	width: 50px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	font-size: 26px;
	color: #fff
}

.home-tabs .tab {
	display: none;
	color: #fff
}

.home-tabs .tab.active {
	display: block
}

.hsobs {
	margin-bottom: 50px
}

.hsobs .hsob {
	margin: 15px 0;
	background: #12232D;
	padding: 18px 40px 14px;
	color: #fff;
	border-radius: 30px;
	border-bottom-left-radius: 8px;
	border-top-right-radius: 8px;
	-webkit-transition: .14s ease;
	transition: .14s ease;
	cursor: pointer
}

.hsobs .hsob.active {
	background: #ffc107 !important
}

.hsobs .hsob.active .hsob-icon {
	color: #fff
}

.hsobs .hsob:hover {
	background: #1c3341;
	-webkit-transform: scale(0.94);
	transform: scale(0.94)
}

.hsobs .hsob:hover .hsob-icon {
	color: #fff;
	-webkit-transform: scale(1.2);
	transform: scale(1.2)
}

.hsobs .hsob .hsob-icon {
	color: #ffc107;
	font-size: 30px;
	-webkit-transition: .14s ease;
	transition: .14s ease
}

.hsobs .hsob .hsob-title {
	font-size: 21px;
	font-weight: 700
}

.wcu-content .wcu-conteiner {
	position: relative;
	margin: 15px 0
}

.wcu-content .wcu-conteiner::before {
	content: '';
	position: absolute;
	z-index: 20;
	left: -2px;
	right: -2px;
	top: -2px;
	bottom: -2px;
	background: -webkit-gradient(linear, left bottom, left top, from(#183441), to(#111E26));
	background: linear-gradient(to top, #183441, #111E26);
	-webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
	clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
	-webkit-transition: .2s ease;
	transition: .2s ease
}

.wcu-content .wcu-conteiner:hover::before {
	-webkit-transform: scale(0.9);
	transform: scale(0.9)
}

.wcu-content .wcu-conteiner:hover .wcu-box {
	-webkit-transform: scale(1.03);
	transform: scale(1.03);
	background: -webkit-gradient(linear, left top, right top, from(#04843B), to(#ffc107)) #04843B;
	background: linear-gradient(to right, #04843B, #ffc107) #04843B
}

.wcu-content .wcu-conteiner:hover .wcu-box .wcu-text {
	color: #fff
}

.wcu-content .wcu-conteiner:hover .wcu-box .wcu-icon img,
.wcu-content .wcu-conteiner:hover .wcu-box .wcu-go img {
	-webkit-filter: brightness(0) invert(1);
	filter: brightness(0) invert(1)
}

.wcu-content .wcu-conteiner:hover .wcu-box .wcu-icon img {
	-webkit-transform: scale(1.1);
	transform: scale(1.1)
}

.wcu-content .wcu-conteiner .wcu-box {
	background: #12232D;
	-webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
	clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
	z-index: 23;
	position: relative;
	-webkit-transition: .2s ease;
	transition: .2s ease
}

.wcu-content .wcu-conteiner .wcu-box .wcu-body {
	padding: 50px 30px 60px
}

.wcu-content .wcu-conteiner .wcu-box .wcu-icon i {
	font-size: 42px;
	color: #ffc107;
	-webkit-transition: .2s ease;
	transition: .2s ease
}

.wcu-content .wcu-conteiner .wcu-box:hover .wcu-icon i {
	font-size: 42px;
	color: #fff;
	-webkit-transition: .2s ease;
	transition: .2s ease
}

.wcu-content .wcu-conteiner .wcu-box .wcu-title {
	font-size: 20px;
	line-height: 32px;
	color: #fff;
	margin-top: 28px;
	margin-bottom: 20px;
	font-weight: 600
}

.wcu-content .wcu-conteiner .wcu-box .wcu-text {
	font-size: 14px;
	color: #9799A3;
	line-height: 24px;
	-webkit-transition: .2s ease;
	transition: .2s ease
}

.wcu-content .wcu-conteiner .wcu-box .wcu-go {
	display: inline-block;
	margin-top: 30px;
	position: relative;
	-webkit-transition: .2s ease;
	transition: .2s ease
}

.wcu-content .wcu-conteiner .wcu-box .wcu-go i {
	font-size: 42px;
	color: #ffc107
}

.wcu-content .wcu-conteiner .wcu-box:hover .wcu-go i {
	font-size: 42px;
	color: #fff
}

.homeI-1 {
	max-width: 100%
}

.homeI-2 {
	position: absolute;
	max-width: 100%;
	right: 0
}

.hsl-title .hsl-title-icon {
	height: 60px;
	width: 60px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	background: #ffc107;
	border-radius: 15px;
	font-size: 32px;
	color: #fff
}

.hsl-title h2 {
	margin: 0;
	font-size: 32px;
	line-height: 45px;
	color: #fff;
	padding: 0;
	font-weight: 700
}

.hsl-text {
	font-size: 19px;
	line-height: 33px;
	color: #fff;
	font-weight: 500;
	margin: 40px 0 30px
}

.hsl-bottom {
	margin-top: 50px
}

.hsl-item {
	position: relative;
	margin: 30px 0
}

.hsl-item .hsli-title {
	font-size: 20px;
	font-weight: 700;
	color: #fff;
	margin-bottom: 8px
}

.hsl-item .hsli-text {
	font-size: 15px;
	line-height: 27px;
	color: rgba(255, 255, 255, 0.8)
}

.how-pworks {
	display: block;
	position: relative
}

.how-pworks .bg-1 {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	background-image: url(https://storage.perfectcdn.com/e70129/lfrxpmlcyamcwsu6.png);
	background-size: cover;
	background-position: center;
	z-index: 20
}

.how-pworks .hpw-content {
	padding: 180px 0 260px;
	z-index: 25;
	position: relative
}

.how-pworks .hpw-title {
	color: #0c151b;
	font-size: 44px;
	font-weight: 700;
	margin-bottom: 30px
}

.how-pworks .hpw-text {
	max-width: 800px;
	display: inline-block;
	text-align: center;
	color: #0c151b;
	font-weight: 600;
	line-height: 34px;
	font-size: 20px
}

.how-pworks-bottom {
	position: relative;
	z-index: 29;
	padding: 0 0 20px
}

.hpw-box {
	margin-top: -200px;
	position: relative
}

.hpw-box::before {
	content: '';
	position: absolute;
	z-index: 30;
	left: -3px;
	top: -3px;
	right: -3px;
	bottom: -3px;
	background: -webkit-gradient(linear, left bottom, left top, from(#183441), to(#111E26));
	background: linear-gradient(to top, #183441, #111E26);
	border-radius: 12.4px
}

.hpw-box .hpw-box-r {
	border-radius: 10px;
	background: #0C151B;
	z-index: 35;
	position: relative;
	padding: 40px
}

.hpw-box .hpw-box-r::before {
	content: '';
	left: 80px;
	right: 80px;
	position: absolute;
	z-index: 31;
	top: calc(50% - 1.5px);
	height: 2px;
	background: #1B2B3A
}

.hpw-box .hpw-box-r>.row {
	z-index: 32
}

.hpw-item {
	text-align: center;
	z-index: 33;
	margin: 20px 0
}

.hpw-item .hpw-icon {
	height: 87px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center
}

.hpw-item .hpw-icon img {
	max-height: 87px
}

.hpw-item .hpw-num {
	position: relative;
	display: inline-block
}

.hpw-item .hpw-num::after {
	content: '';
	z-index: 34;
	position: absolute;
	left: -50px;
	right: -50px;
	top: 0;
	background-color: #0C151B;
	height: 100%
}

.hpw-item .hpw-num span {
	height: 74px;
	width: 74px;
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	background: #ffc107;
	border-radius: 12px;
	margin-top: 40px;
	position: relative;
	z-index: 36;
	font-size: 30px;
	color: #fff;
	font-weight: 900
}

.hpw-item .hpw-num::before {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -12px;
	width: 0;
	height: 0;
	border-top: solid 12px #ffc107;
	border-left: solid 12px transparent;
	border-right: solid 12px transparent
}

.hpw-item .hpw-title {
	margin-top: 35px;
	font-size: 19px;
	font-weight: 800;
	color: #fff
}

.hpw-item .hpw-text {
	margin-top: 12px;
	font-size: 13px;
	line-height: 23px;
	color: #B5B5B5
}

.special-color {
	color: #ffc107
}

.home-customer-container {
	width: 100%
}

.home-customer {
	padding: 120px 0;
	width: 100%
}

.home-customer .container {
	max-width: 800px;
	text-align: center
}

.home-customer .slider-circle {
	border: 3px solid #182836;
	border-radius: 50%;
	width: 640px;
	height: 640px;
	display: inline-block;
	position: relative
}

.home-customer .slider-circle .out-circle {
	position: absolute;
	border-radius: 50%
}

.home-customer .slider-circle .out-circle.oc-1 {
	left: -90px;
	top: -90px;
	bottom: -90px;
	opacity: .2;
	right: -90px;
	border: 3px solid #182836
}

.home-customer .slider-circle .out-circle.oc-2 {
	left: -200px;
	top: -200px;
	bottom: -200px;
	right: -200px;
	opacity: .3;
	border: 3px solid #182836
}

.home-customer .slider-content .slider-tab {
	display: none
}

.home-customer .slider-content .slider-tab.active {
	display: block
}

.home-customer .member-comment {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	color: #fff
}

.home-customer .member-comment>* {
	margin: 20px 0
}

.home-customer .member-comment .comment-text {
	max-width: 480px;
	color: #fff;
	font-size: 26px;
	line-height: 41px;
	font-weight: 500
}

.home-customer .member-comment .comment-user {
	font-size: 25px;
	font-weight: 700
}

.home-customer .member-comment .comment-stars {
	color: #ffc107;
	font-size: 25px
}

.home-customer .slider-btns .slider-btn {
	z-index: 999;
	position: absolute;
	width: 64px;
	height: 64px;
	background-color: #2E4C67;
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
	border-radius: 5px;
	border: 3px solid transparent;
	-webkit-transition: .14s ease;
	transition: .14s ease;
	cursor: pointer
}

.home-customer .slider-btns .slider-btn:hover {
	opacity: .9
}

.home-customer .slider-btns .slider-btn.active {
	border-color: #ffc107
}

.home-customer .slider-btns .slider-btn img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover
}

.home-customer .slider-btns .slider-btn.sb-1 {
	top: 0;
	left: 50%
}

.home-customer .slider-btns .slider-btn.sb-2 {
	top: 50%;
	left: 100%
}

.home-customer .slider-btns .slider-btn.sb-3 {
	top: 100%;
	left: 50%
}

.home-customer .slider-btns .slider-btn.sb-4 {
	left: 0;
	top: 50%
}

/* CLEANUP 2026-05-07: merged duplicate .footer rules (was defined twice). */
.footer {
	background: #1a1a1a;
	color: #fff;
	padding: 60px 0 20px;
}

.footer .site-name {
	font-size: 36px;
	font-weight: 600;
	padding: 52px 0;
	color: #fff;
	line-height: 48px;
}

.footer .site-name img {
	height: 80px;
}

.footer .container {
	max-width: 1140px;
}

.footer .row {
	display: flex;
	align-items: flex-start;
	margin: 0 -15px;
}

.footer .col-lg-3 {
	padding: 0 15px;
}

.footer-services-row {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	padding-top: 30px;
	margin-top: 20px;
}

@media (min-width: 992px) {
	.footer .row .col-lg-3 {
		flex: 0 0 25%;
		max-width: 25%;
	}

	/* 5 equal columns for platform services */
	.footer .footer-services-row .col-lg-3,
	.footer .footer-services-row .col-lg {
		flex: 1 1 0;
		max-width: 20%;
	}
}

.footer .footer-title {
	color: #ffc107;
	font-size: 18px;
	font-weight: 600;
	margin-bottom: 20px;
	padding-bottom: 10px;
	border-bottom: 2px solid #ffc107;
	display: inline-block;
}

.footer .footer-menu {
	list-style: none;
	padding: 0;
	margin: 0;
}

.footer .footer-menu li {
	margin-bottom: 12px;
}

.footer .footer-menu li a {
	color: rgba(255, 255, 255, 0.8);
	text-decoration: none;
	font-size: 14px;
	line-height: 1.6;
	transition: color 0.3s ease;
}

.footer .footer-menu li a:hover {
	color: #ffc107;
	text-decoration: none;
}

.footer .footer-top {
	position: relative;
	border-top: 1px solid #16222F
}

.footer .footer-top .ft-content {
	position: relative;
	z-index: 3
}

.footer .footer-icons>* {
	margin: 10px;
	max-height: 40px;
	width: auto;
	object-fit: contain;
}

.footer .footer-bottom {
	padding: 30px 0 40px
}

.footer .footer-bt-info {
	font-size: 18px;
	color: #fff;
	font-weight: 700
}

.footer .footer-title {
	color: #fff;
	font-size: 20px;
	font-weight: 600;
	margin-bottom: 20px;
	margin-top: 52px;
}

.footer .footer-description p {
	color: rgba(255, 255, 255, 0.8);
	font-size: 14px;
	line-height: 1.6;
	margin-bottom: 0;
}

.footer .footer-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer .footer-menu li {
	display: block;
	margin-bottom: 8px;
}

.footer .footer-menu li a {
	color: rgba(255, 255, 255, 0.8);
	text-decoration: none;
	font-size: 14px;
	transition: color 0.3s ease;
}

.footer .footer-menu li a:hover {
	color: #fff;
	text-decoration: none;
}

.footer .contact-info {
	margin-top: 20px;
}

.footer .contact-info p {
	color: rgba(255, 255, 255, 0.8);
	font-size: 14px;
	margin-bottom: 10px;
	display: flex;
	align-items: center;
}

.footer .contact-info p i {
	margin-right: 10px;
	color: #fff;
	width: 16px;
}

/* Footer Responsive Design */
@media (max-width: 991.98px) {
	.footer {
		padding: 40px 0 20px;
	}
	
	.footer .footer-title {
		font-size: 16px;
		margin-bottom: 15px;
		margin-top: 30px;
	}
	
	.footer .site-name {
		padding: 20px 0;
		text-align: center;
	}
	
	.footer .col-lg-3 {
		margin-bottom: 25px;
	}
	
	.footer-services-row {
		margin-top: 25px;
		padding: 25px 15px 15px;
	}
}

@media (max-width: 767px) {
	.footer .row .col-lg-3 {
		flex: 0 0 100%;
		max-width: 100%;
		margin-bottom: 30px;
	}
	
	.footer-services-row {
		padding: 20px 10px 10px;
		margin-top: 20px;
	}
	
	.footer .footer-title {
		font-size: 15px;
		text-align: center;
		margin-bottom: 12px;
		margin-top: 20px;
	}
	
	.footer .footer-menu {
		text-align: center;
	}
	
	.footer .contact-info {
		text-align: center;
	}
	
	.footer .footer-description {
		text-align: center;
	}
}

@media (max-width: 767.98px) {
	.footer {
		padding: 30px 0 20px;
	}
	
	.footer .row {
		margin: 0;
		flex-direction: column;
	}
	
	.footer .col-lg-3,
	.footer .col-md-6 {
		padding: 0 20px;
		margin-bottom: 30px;
		flex: none;
		max-width: 100%;
	}
	
	.footer .footer-title {
		font-size: 16px;
		text-align: center;
		margin-top: 0;
		margin-bottom: 15px;
		border-bottom: 2px solid #ffc107;
		padding-bottom: 8px;
		width: 100%;
		display: block;
	}
	
	.footer .site-name {
		padding: 15px 0;
		text-align: center;
		margin-bottom: 15px;
	}
	
	.footer .site-name img {
		height: 60px;
	}
	
	.footer .footer-description {
		text-align: center;
		margin-bottom: 20px;
	}
	
	.footer .footer-menu {
		text-align: center;
	}
	
	.footer .footer-menu li {
		margin-bottom: 10px;
	}
	
	.footer .footer-menu li a {
		font-size: 14px;
	}
	
	.footer .contact-info {
		text-align: center;
		margin-top: 15px;
	}
	
	.footer .contact-info p {
		justify-content: center;
		font-size: 13px;
		margin-bottom: 8px;
	}
}

/* About Us Page Styles */
.about-us-page {
	min-height: 100vh;
}

.about-hero {
	background: linear-gradient(135deg, #ffbf00 0%, #ff9500 100%);
	padding: 80px 0;
	color: #fff;
}

.about-title {
	font-size: 3rem;
	font-weight: 700;
	margin-bottom: 20px;
}

.about-subtitle {
	font-size: 1.2rem;
	opacity: 0.9;
	line-height: 1.6;
}

.about-section {
	padding: 80px 0;
}

.about-section.bg-light {
	background-color: #f8f9fa;
}

.section-title {
	font-size: 2.5rem;
	font-weight: 600;
	margin-bottom: 30px;
	color: #333;
}

.about-section.bg-light .section-title {
	color: #333;
}

.mission-text {
	font-size: 1.1rem;
	line-height: 1.8;
	color: #666;
}

.about-section.bg-light .mission-text {
	color: #555;
}

.about-image {
	text-align: center;
	padding: 20px;
}

.feature-box {
	padding: 30px 20px;
	transition: transform 0.3s ease;
}

.feature-box:hover {
	transform: translateY(-5px);
}

.feature-icon {
	width: 80px;
	height: 80px;
	background: linear-gradient(135deg, #ffbf00 0%, #ff9500 100%);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 20px;
	font-size: 2rem;
	color: #fff;
}

.feature-box h4 {
	font-size: 1.3rem;
	font-weight: 600;
	margin-bottom: 15px;
	color: #333;
}

.feature-box p {
	color: #666;
	line-height: 1.6;
}

/* Map Container */
.map-container {
	box-shadow: 0 10px 30px rgba(0,0,0,0.1);
	border-radius: 10px;
	overflow: hidden;
}

/* Contact Section Styles */
.contact-intro {
	font-size: 1.1rem;
	opacity: 0.9;
	margin-bottom: 30px;
	color: #fff;
}

.contact-card {
	background: rgba(255, 255, 255, 0.1);
	padding: 25px 20px;
	border-radius: 10px;
	text-align: center;
	transition: transform 0.3s ease;
	backdrop-filter: blur(10px);
}

.contact-card:hover {
	transform: translateY(-5px);
	background: rgba(255, 255, 255, 0.15);
}

.contact-icon {
	width: 60px;
	height: 60px;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 15px;
	font-size: 1.5rem;
	color: #fff;
}

.contact-card h5 {
	color: #fff;
	font-weight: 600;
	margin-bottom: 10px;
}

.contact-card p {
	color: #fff;
	opacity: 0.9;
	margin-bottom: 0;
	font-size: 0.95rem;
}

.contact-cta {
	background: rgba(255, 255, 255, 0.1);
	padding: 40px 30px;
	border-radius: 15px;
	backdrop-filter: blur(10px);
}

.contact-cta h4 {
	color: #fff;
	font-weight: 600;
}

.btn-white {
	background-color: #fff;
	color: #ffbf00;
	border: 2px solid #fff;
	font-weight: 600;
	transition: all 0.3s ease;
}

.btn-white:hover {
	background-color: transparent;
	color: #fff;
	border-color: #fff;
}

.btn-outline-white {
	background-color: transparent;
	color: #fff;
	border: 2px solid #fff;
	font-weight: 600;
	transition: all 0.3s ease;
}

.btn-outline-white:hover {
	background-color: #fff;
	color: #ffbf00;
	border-color: #fff;
}

/* Responsive Design */
@media (max-width: 768px) {
	.about-title {
		font-size: 2.2rem;
	}
	
	.about-subtitle {
		font-size: 1rem;
	}
	
	.section-title {
		font-size: 2rem;
	}
	
	.about-section {
		padding: 50px 0;
	}
	
	.about-hero {
		padding: 50px 0;
	}
	
	.contact-cta {
		margin-top: 30px;
		padding: 30px 20px;
	}
	
	.contact-card {
		margin-bottom: 20px;
	}
	
	.map-container iframe {
		height: 300px;
	}
}


@media (max-width: 767.98px) {
	.wcu-content .wcu-conteiner::before {
		-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%)
	}

	.wcu-content .wcu-conteiner .wcu-box {
		-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%)
	}

	.home-customer-container {
		overflow: inherit;
		display: block
	}

	.home-customer {
		padding: 70px 0;
		width: 100%
	}

	.home-customer .container {
		max-width: 800px;
		text-align: center
	}

	.home-customer .slider-circle {
		border: none;
		border-radius: 0;
		width: 100%;
		height: auto;
		display: block
	}

	.home-customer .slider-circle .out-circle {
		display: none
	}

	.home-customer .slider-content .slider-tab {
		display: none
	}

	.home-customer .slider-content .slider-tab.active {
		display: block
	}

	.home-customer .member-comment {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		height: auto;
		position: relative;
		color: #fff
	}

	.home-customer .member-comment .quote-icon img {
		width: 32px
	}

	.home-customer .member-comment>* {
		margin: 10px 0
	}

	.home-customer .member-comment .comment-text {
		font-size: 18px;
		line-height: 28px;
		font-weight: 400;
		color: #fff
	}

	.home-customer .member-comment .comment-user {
		font-size: 20px
	}

	.home-customer .slider-btns {
		width: 100%;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
		margin-top: 20px
	}

	.home-customer .slider-btns .slider-btn {
		width: 64px;
		height: 64px;
		background-color: #2E4C67;
		-webkit-transform: inherit;
		transform: inherit;
		position: relative
	}

	.home-customer .slider-btns .slider-btn:hover {
		opacity: .9
	}

	.home-customer .slider-btns .slider-btn.active {
		border-color: #ffc107
	}

	.home-customer .slider-btns .slider-btn img {
		width: 100%;
		height: 100%;
		-o-object-fit: cover;
		object-fit: cover
	}

	.home-customer .slider-btns .slider-btn.sb-1,
	.home-customer .slider-btns .slider-btn.sb-2,
	.home-customer .slider-btns .slider-btn.sb-3,
	.home-customer .slider-btns .slider-btn.sb-4 {
		top: inherit;
		left: inherit
	}

	.hsl-title-icon {
		margin-bottom: 20px;
		width: 64px !important;
		height: 64px !important;
		font-size: 40px !important
	}

	.home-section {
		padding: 70px 0
	}

	.hl-btns {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column
	}

	.hl-btns>a {
		-webkit-box-flex: 1;
		-ms-flex: 1;
		flex: 1
	}

	.home-head .hh-left-badge {
		height: 38px;
		border-radius: 19px
	}

	.home-head .hh-left-badge .hhlb-icon {
		width: 28px;
		height: 28px
	}

	.home-head .hh-left-badge .hhlb-text {
		padding: 10px 9px;
		font-size: 13px
	}

	.home-head .home-head-content {
		padding: 0
	}

	.home-head .hl-title {
		font-size: 24px;
		line-height: 36px;
		font-weight: 600;
		margin-top: 32px;
		margin-bottom: 26px;
		color: #fff
	}

	.home-head .hl-text {
		display: none
	}

	.btn.btn-lg {
		padding: 18px 40px
	}

	.btn.btn-lg.btn-outline {
		padding: 16px 40px
	}

	.hl-input input:focus~.floating-label,
	.hl-input input:not(:focus):valid~.floating-label {
		top: 8px;
		-webkit-transform: translateY(0);
		transform: translateY(0);
		bottom: 10px
	}

	.hl-input input:focus {
		border-color: #ffc107 !important
	}

	.hl-input .inputText {
		padding: 24px 16px 14px
	}

	.hsobs .hsob {
		padding: 11px 20px;
		margin: 8px 0
	}

	.hsobs .hsob .hsob-title {
		font-size: 16px;
		font-weight: 400
	}

	.hsl-text {
		font-size: 16px;
		line-height: 31px;
		font-weight: 400;
		color: rgba(255, 255, 255, 0.9)
	}

	.how-pworks .hpw-title {
		color: #fff;
		font-size: 24px
	}

	.how-pworks .hpw-text {
		font-weight: 500;
		line-height: 18px
	}

	.home-title h2 {
		color: #fff;
		font-weight: 700;
		font-size: 30px
	}


	.header {
		margin-top: 0
	}

	.custom-check .checkmark:after {
		border-color: transparent !important
	}
}

@media (max-width: 991.98px) {
	.home-boost-box {
		padding: 40px 24px
	}

	.home-menu-btn {
		display: inline-block
	}

	.head-menu {
		display: none;
		position: fixed;
		top: 80px;
		left: 0;
		bottom: 0;
		right: 0;
		background-color: #181c29;
		-webkit-box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.16);
		box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.16);
		padding: 40px 30px;
		z-index: 1003;
		overflow-y: auto;
		border-top-left-radius: 30px;
		border-top-right-radius: 30px
	}

	.head-menu .btn {
		display: block
	}

	.head-menu .mmff {
		width: 100%;
		display: block
	}


	.home-customer .member-comment .comment-user {
		font-size: 20px
	}

	.home-customer .slider-btns {
		width: 100%;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
		margin-top: 20px
	}

	.home-customer .slider-btns .slider-btn {
		width: 64px;
		height: 64px;
		background-color: #2E4C67;
		-webkit-transform: inherit;
		transform: inherit;
		position: relative
	}

	.home-customer .slider-btns .slider-btn:hover {
		opacity: .9
	}

	.home-customer .slider-btns .slider-btn.active {
		border-color: #ffc107
	}

	.home-customer .slider-btns .slider-btn img {
		width: 100%;
		height: 100%;
		-o-object-fit: cover;
		object-fit: cover
	}

	.home-customer .slider-btns .slider-btn.sb-1,
	.home-customer .slider-btns .slider-btn.sb-2,
	.home-customer .slider-btns .slider-btn.sb-3,
	.home-customer .slider-btns .slider-btn.sb-4 {
		top: inherit;
		left: inherit
	}

	.hsl-title-icon {
		margin-bottom: 20px;
		width: 64px !important;
		height: 64px !important;
		font-size: 40px !important
	}

	.home-section {
		padding: 70px 0
	}

	.hl-btns {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column
	}

	.hl-btns>a {
		-webkit-box-flex: 1;
		-ms-flex: 1;
		flex: 1
	}

	.home-head .hh-left-badge {
		height: 38px;
		border-radius: 19px
	}

	.home-head .hh-left-badge .hhlb-icon {
		width: 28px;
		height: 28px
	}

	.home-head .hh-left-badge .hhlb-text {
		padding: 10px 9px;
		font-size: 13px
	}

	.home-head .home-head-content {
		padding: 0
	}

	.home-head .hl-title {
		font-size: 24px;
		line-height: 36px;
		font-weight: 600;
		margin-top: 32px;
		margin-bottom: 26px;
		color: #fff
	}

	.home-head .hl-text {
		display: none
	}

	.btn.btn-lg {
		padding: 18px 40px
	}

	.btn.btn-lg.btn-outline {
		padding: 16px 40px
	}

	.hl-input input:focus~.floating-label,
	.hl-input input:not(:focus):valid~.floating-label {
		top: 8px;
		-webkit-transform: translateY(0);
		transform: translateY(0);
		bottom: 10px
	}

	.hl-input input:focus {
		border-color: #ffc107 !important
	}

	.hl-input .inputText {
		padding: 24px 16px 14px
	}

	.hsobs .hsob {
		padding: 11px 20px;
		margin: 8px 0
	}

	.hsobs .hsob .hsob-title {
		font-size: 16px;
		font-weight: 400
	}

	.hsl-text {
		font-size: 16px;
		line-height: 31px;
		font-weight: 400;
		color: rgba(255, 255, 255, 0.9)
	}

	.how-pworks .hpw-title {
		color: #fff;
		font-size: 24px
	}

	.how-pworks .hpw-text {
		font-weight: 500;
		line-height: 18px
	}

	.home-title h2 {
		color: #fff;
		font-weight: 700;
		font-size: 30px
	}


	.header {
		margin-top: 0
	}

	.custom-check .checkmark:after {
		border-color: transparent !important
	}
}

@media (max-width: 991.98px) {
	.home-boost-box {
		padding: 40px 24px
	}

	.home-menu-btn {
		display: inline-block
	}

	.head-menu {
		display: none;
		position: fixed;
		top: 80px;
		left: 0;
		bottom: 0;
		right: 0;
		background-color: #181c29;
		-webkit-box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.16);
		box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.16);
		padding: 40px 30px;
		z-index: 1003;
		overflow-y: auto;
		border-top-left-radius: 30px;
		border-top-right-radius: 30px
	}

	.head-menu .btn {
		display: block
	}

	.head-menu .mmff {
		width: 100%;
		display: block
	}

	.head-menu .hm-close {
		position: absolute;
		left: 50%;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
		top: 18px;
		cursor: pointer;
		width: 60px;
		height: 60px;
		text-align: center;
		line-height: 60px;
		color: #fff;
		opacity: .6;
		z-index: 1004
	}

	.head-menu .bs-btn {
		display: block;
		width: 100%
	}

	.head-menu .bs-btn+.bs-btn {
		margin-top: 14px
	}

	.head-menu .header-menu>ul {
		width: 100%;
		padding: 0 20px 30px
	}

	.head-menu .header-menu>ul>li {
		display: block;
		position: relative
	}

	.head-menu .header-menu>ul>li+li {
		margin: 0
	}

	.head-menu .header-menu>ul>li>a {
		display: block;
		text-align: left;
		position: relative;
		max-height: 40px;
		padding: 24px 0;
		line-height: 30px;
		font-size: 20px;
		font-weight: 600
	}

	.head-menu .header-menu>ul>li>a::after {
		display: none
	}

	.head-menu.active {
		display: block
	}
}

@media (max-width: 1199.98px) {
	.homeI-2 {
		width: 100%
	}
}

@media (max-width: 1600px) {
	.home-head .bub-items {
		display: none !important
	}
}

/* CLEANUP 2026-05-07: removed .ahbtn + .bs-1..4 variants (dead — never used in markup) */

.pg-titlte {
	font-size: 25px;
	line-height: 31px;
	color: #FFF;
	font-weight: 600;
	margin-bottom: 0
}

.pg-text {
	font-weight: 400;
	font-size: 14px;
	line-height: 17px;
	margin-top: 10px;
	color: #FFF
}

a:hover {
	color: #0967a1
}

.primary-color {
	color: #ffc107 !important
}

.secondary-color {
	color: #192149 !important
}

.sc-sup-item .text.success-color,
.success-color {
	color: #00B67A !important
}

.sc-sup-item .text.danger-color,
.danger-color {
	color: #f65619 !important
}

.sc-sup-item .text.warning-color,
.warning-color {
	color: #fbbc05 !important
}

.primary-bg {
	background-color: #0258FF !important
}

.secondary-bg {
	background-color: #192149 !important
}

.success-bg {
	background-color: #00B67A !important
}

.warning-bg {
	background-color: #fbbc05 !important
}

.danger-bg {
	background-color: #f65619 !important
}

.pink-bg {
	background-color: #ff029a !important
}

.purple-bg {
	background-color: #9158ed !important
}

.orange-bg {
	background-color: #f39c12 !important
}

.container {
	max-width: 1120px
}

.fw-400 {
	font-weight: 400 !important
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
	transition: background-color 5000s ease-in-out 0
}

.sbadge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 13px 24px 13px 20px;
	background: linear-gradient(246.82deg, #1a2444 8.2%, rgba(34, 45, 79, 0) 78.22%), #0c1447;
	border: 1px solid #19225c;
	box-sizing: border-box;
	box-shadow: 0 25px 50px rgba(10, 39, 83, 0.07);
	border-radius: 15px;
	font-size: 13px;
	line-height: 15px;
	letter-spacing: -.03em;
	color: #fff
}

.sbadge .icon {
	font-size: 14px;
	line-height: 15px;
	display: flex;
	align-items: center;
	justify-content: center
}

.sbadge .text {
	font-weight: 600
}

.card {
	background: #121D27;
	border: 1px solid #183441;
	box-sizing: border-box;
	box-shadow: 0 25px 50px rgba(10, 39, 83, 0.07);
	border-radius: 20px;
	position: relative
}

.card-body {
	padding: 31px 28px
}

.card-header {
	border-radius: 15px 15px 0 0 !important;
	background: url(https://storage.perfectcdn.com/e70129/3ko4iakx3589yi1s.png);
	background-size: cover;
	background-position: center;
	padding: 30px 28px;
	border-width: 1px;
	border-bottom-width: 1px;
	border-style: solid;
	border-color: transparent
}

.card-header.body-top-on-this {
	z-index: 2
}

.card-header.body-top-on-this+.card-body {
	z-index: 4;
	position: relative;
	margin-top: -20px;
	padding-top: 0
}

.card-title {
	font-weight: 600;
	font-size: 19px;
	line-height: 30px;
	letter-spacing: -.005em;
	color: #fff;
	margin-bottom: 0
}

.card-h-text {
	margin-bottom: 0;
	font-weight: 600;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: -.005em;
	color: rgba(255, 255, 255, 0.35);
	margin-top: 10px;
	display: none
}

@media (min-width: 992px) {
	.card-h-text {
		display: block
	}
}

.card.card-no-box {
	position: relative;
	margin: 0 0 30px
}

.card.card-no-box.cnb-2 .cb-content::after {
	background-image: url(https://storage.perfectcdn.com/0402e1/ofqzxfp9grw0ehyi.png)
}

.card.card-no-box.cnb-2 .cnb-circle {
	color: #FF2828;
	border-color: #FF2828
}

.card.card-no-box.cnb-3 .cb-content::after {
	background-image: url(https://storage.perfectcdn.com/0402e1/zegx57lhj96h8umk.png)
}

.card.card-no-box.cnb-3 .cnb-circle {
	color: #28F1AA;
	border-color: #28F1AA
}

.card.card-no-box.cnb-4 .cb-content::after {
	background-image: url(https://storage.perfectcdn.com/0402e1/l9tcfibhsjranlqt.png)
}

.card.card-no-box.cnb-4 .cnb-circle {
	color: #A12AFF;
	border-color: #A12AFF
}

.card.card-no-box .cb-content {
	position: relative;
	overflow: hidden
}

.card.card-no-box .cb-content::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	background-image: url(https://storage.perfectcdn.com/0402e1/pld5aq47eq9iqqm6.png);
	opacity: .17;
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: bottom center
}

.card.card-no-box .cnb-content {
	padding: 30px 30px 50px;
	position: relative;
	z-index: 5
}

@media (max-width: 991.98px) {
	.card.card-no-box .cnb-content {
		padding: 15px
	}

	.card.card-no-box .cnb-content .col-auto {
		display: none
	}

	.card.card-no-box h2 {
		font-size: 12px !important
	}

	.card.card-no-box h3,
	.pwd {
		font-size: 18px !important
	}

	.card.card-no-box {
		margin: 0 0 15px
	}
}

.card.card-no-box .cnb-circle {
	border-radius: 50%;
	border: 3px solid #2A62FF;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	color: #2A62FF;
	font-size: 32.6276px;
	line-height: 33px;
	color: #2A62FF
}

.card.card-no-box h2 {
	font-weight: 400;
	font-size: 14px;
	line-height: 17px;
	color: #FFF;
	margin-bottom: 4px
}

.card.card-no-box h3,
.pwd {
	font-weight: 700;
	font-size: 24px;
	line-height: 37px;
	color: #FFF;
	margin-bottom: 0
}

.form-control {
	background: #121D27;
	border: 1px solid #183441;
	border-radius: 15px;
	line-height: 20px;
	padding: 14px 18px;
	outline: none;
	font-weight: 600;
	font-size: 14px;
	line-height: 17px;
	color: rgba(255, 255, 255, 0.842);
    height: 50px
}

.form-control:focus {
	box-shadow: 0 0 0 4px #ffc107d9;
	background-color: #121D27;
	border: 1px solid transparent;
	color: #fff
}

.form-control::placeholder {
	color: #929cb7
}

.form-control:disabled,
.form-control[readonly] {
	background-color: #0c141b !important;
	opacity: 1
}

.form-select,
select.form-control {
	background: #121D27;
	border: 1px solid #183441;
	border-radius: 15px;
	line-height: 20px;
	padding: 14px 18px;
	font-weight: 600;
	font-size: 14px;
	line-height: 17px;
	color: #fff;
    height: 50px;
    width: 100%
}

.form-select:focus,
select.form-control:focus {
	box-shadow: none;
	background: #121D27;
	border: 1px solid #183441
}

.form-select::placeholder,
select.form-control::placeholder {
	color: rgba(255, 255, 255, 0.5)
}

/* Form controls don't inherit font-family by default — force theme font */
input, select, textarea, button, .form-control, .form-select, select.form-control, .form-control::placeholder, .form-select::placeholder { font-family: var(--font-th), var(--font-en), system-ui, sans-serif; }

.form-label,
#appDashboard label,
.appAuth label {
	font-weight: 600;
	font-size: 14px;
	line-height: 16px;
	color: #fff;
	margin-bottom: 12px
}

.form-control-lg {
	padding: 20px 18px
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
	box-shadow: 0 0 0 30px transparent inset !important;
	-webkit-text-fill-color: #fff !important
}

.form-check-label {
	font-weight: 600;
	font-size: 14px;
	line-height: 17px;
	color: #fff
}

.form-check-input {
	width: 20px;
	height: 20px
}

.form-check-input:checked {
	background-color: #0258FF;
	border-color: #0258FF
}

.hbadge {
	position: relative;
	display: inline-block;
	background: rgba(18, 140, 214, 0.15);
	border-radius: 50px;
	font-weight: 600;
	font-size: 14px;
	line-height: 14px;
	letter-spacing: -.03em;
	color: #297eb3;
	padding: 12px 24px;
  	height: 55px
}

.hbadge-danger {
	color: #cf5e33;
	background: rgba(246, 86, 25, 0.15)
}

.dropdown-menu {
	border: none;
	box-shadow: 0 10px 30px rgb(177, 151, 0, 0.22);
	border-radius: 15px;
	background-color: #0C141B
}

.dropdown-item {
	font-weight: 500;
	color: #fff;
	padding: 6px 20px
}

.dropdown-item:hover {
	background-color: rgba(255, 255, 255, 0.06);
	color: #fff
}

@media (min-width: 992px) {
	.dropdown-item {
		font-size: 14px
	}
}

.dropdown-item:focus {
	background-color: #0258FF
}

.dropdown-divider {
	background-color: #d0d0d0
}

.pagination .page-item.active .page-link {
	background-color: #ffc107;
    color: #fff;
}

.pagination .page-item.active .page-link::before {
	content: "";
	bottom: 0;
	height: 3px;
	width: 14px;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	background-color: #121d27
}

.pagination .page-item:first-child {
	border-right: 1px solid #151d46
}

.pagination .page-item:first-child .page-link {
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
	font-weight: 400
}

.pagination .page-item:last-child {
	border-left: 1px solid #151d46
}

.pagination .page-item:last-child .page-link {
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	font-weight: 400
}

.pagination .page-item .page-link {
	background: #121d27;
    border: none;
    margin: 0;
    height: 50px;
    padding: 0;
    min-width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 17.3005px;
    line-height: 18px;
    color: #b7cdd8;
    position: relative;
}

.pagination .page-item .page-link:focus {
	z-index: 2
}

.menu-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 15px;
	background-color: #183441;
	color: #ffc107;
	outline: none;
	border: none;
	font-size: 18px;
	transition: .14s ease;
	z-index: 1020
}

.menu-btn:focus {
	box-shadow: 0 0 0 4px rgba(0, 177, 77, 0.1)
}

#appDashboard .dashboard-head-wrapper {
	padding-top: 40px
}

.dashboard-head-wrapper {
	position: relative;
	margin-bottom: 30px
}

.dashboard-head-wrapper .dashboard-head {
	background: #183441;
	border: 1px solid #ffc107;
	border-radius: 15px;
	position: relative
}

@media (min-width: 992px) {
	.dashboard-head-wrapper .dashboard-head {
		border-radius: 25px
	}
}

.dashboard-head-wrapper .dhead-body {
	position: relative;
	z-index: 6;
	padding: 20px;
	display: flex;
	align-items: center;
	gap: 30px
}

@media (min-width: 768px) {
	.dashboard-head-wrapper .dhead-body {
		padding: 40px 44px;
		max-width: 80%
	}
}

@media (min-width: 992px) {
	.dashboard-head-wrapper .dhead-body {
		padding: 60px;
		max-width: 70%
	}
}

.dashboard-head-wrapper .dhead-body .title {
	font-style: normal;
	font-weight: 600;
	font-size: 22px;
	line-height: 34px;
	margin-bottom: 14px;
	color: #fff
}

@media (min-width: 768px) {
	.dashboard-head-wrapper .dhead-body .title {
		font-size: 25px;
		line-height: 34px
	}
}

.dashboard-head-wrapper .dhead-body .text {
	font-weight: 500;
	font-weight: 400;
	font-size: 16px;
	line-height: 22px;
	color: #c9c9c9;
	margin-bottom: 0
}

.dashboard-head-wrapper .dhead-body .text a {
	color: #029fff
}

.dashboard-head-wrapper .dhead-body .text-2 {
	padding-top: 6px;
	font-size: 14px;
	line-height: 20px;
	color: #72879d;
	margin-bottom: 0
}

.dashboard-head-wrapper .dhead-body .dhead-icon {
	display: none
}

.dashboard-head-wrapper .dhead-body .dhead-icon.pg-af {
	background: rgba(255, 0, 153, 0.25);
	color: #f09
}

.dashboard-head-wrapper .dhead-body .dhead-icon.pg-ap {
	background: #183441;
	border: 5px solid #ffc107
}

.dashboard-head-wrapper .dhead-body .dhead-icon.pg-cp {
	background: rgb(253 195 6 / 25%);
	color: #ffc107
}

@media (min-width: 768px) {
	.dashboard-head-wrapper .dhead-body .dhead-icon {
		width: 82px;
		height: 82px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		align-items: center;
		font-size: 42px
	}
}

.dashboard-head-wrapper .dhead-img-wrapper {
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	width: 100%
}

.dashboard-head-wrapper .dhead-img-wrapper .dhead-img {
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
	max-width: 100%;
	display: none
}

@media (min-width: 992px) {
	.dashboard-head-wrapper .dhead-img-wrapper .dhead-img {
		display: block
	}
}

.appAuth {
	position: relative;
	min-height: 100vh;
	background: #0C141B;
	padding-left: 280px;
	padding-top: 90px;
	color: #fff
}

.appAuth .container {
	max-width: 1400px
}

.appAuth .menu-btn {
	position: fixed;
	top: 14px;
	left: 14px
}

.appAuth .menu-btn .ri-close-line,
.appAuth .menu-btn .ri-menu-line {
	position: absolute;
	left: 50%;
	top: 50%
}

.appAuth .menu-btn .ri-close-line {
	transform: scale(0) translate(-50%, -50%);
	transition: .2s ease
}

.appAuth .menu-btn .ri-menu-line {
	transition: .2s ease;
	transform: translate(-50%, -50%)
}

@media (max-width: 992px) {
	.appAuth {
		padding-left: 0
	}

	.appAuth.sidebar-active .appSidebar {
		transform: translateX(0) translateX(0)
	}

	.appAuth.sidebar-active .menu-btn {
		left: 300px
	}

	.appAuth.sidebar-active .menu-btn .ri-close-line {
		transform: scale(1) translate(-50%, -50%)
	}

	.appAuth.sidebar-active .menu-btn .ri-menu-line {
		transform: scale(0) translate(-50%, -50%)
	}

	.appAuth .appSidebar {
		transform: translateX(-110%);
		transition: .24s ease;
		box-shadow: 4px 0 30px rgba(0, 0, 0, 0.3)
	}
}

.appSidebar {
	background: #121D27;
	border-right: 1px solid #183441;
	border-radius: 0;
	width: 280px;
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	z-index: 1040
}

.sbLogo {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 6px 0 0;
	margin-bottom: -10px
}

.sbLogo img {
	max-width: 250px
}

.sbUsrWr {
	padding: 20px 30px 0
}

.sbUsr {
	background: #0C141B;
	border-radius: 44px;
	position: relative;
	display: flex;
	align-items: center;
	padding: 10px;
	gap: 20px;
	transition: .14s ease
}

.sbUsr:focus {
	box-shadow: 0 0 0 .25rem rgba(2, 88, 255, 0.2)
}

.avtWr {
	background-color: #ffc107;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	overflow: hidden;
	text-align: center;
	padding-top: 4px
}

.avtWr span {
	font-weight: 600;
	font-size: 24px;
	color: #fff
}

.sbName {
	font-weight: 600;
	font-size: 14px;
	line-height: 16px;
	letter-spacing: .01em;
	color: #fff;
	display: flex;
	align-items: center;
	gap: 10px
}

.sbName::after {
	content: "\eb80";
	color: #0258FF;
	font-family: remixicon !important;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	font-size: 18px
}

.sbUsrSt {
	margin-top: 6px;
	font-weight: 600;
	font-size: 12px;
	line-height: 12px;
	letter-spacing: .02em;
	color: #8b98b8
}

/* CLEANUP 2026-05-07: removed .goWr (dead — replaced by .arrow in sidebar v3) */

.sbMenuWr {
	flex: 1;
	overflow-y: auto;
	padding: 20px 0 40px
}

.sbMenuWr::-webkit-scrollbar {
	width: 0
}

.sbMenu {
	list-style: none;
	margin: 0;
	padding: 0 30px;
	gap: 15px;
	display: flex;
	flex-direction: column
}

.sbMenu .mItem {
	display: block
}

.sbMenu .mLink {
	color: #fff;
	display: flex;
	align-items: center;
	padding: 15px 20px;
	transition: .14s ease;
	cursor: pointer
}

.sbMenu .mLink .mText {
	font-weight: 600;
	font-size: 14px;
	line-height: 16px
}

.sbMenu .mLink .mIcon {
	display: flex;
	align-items: center;
	font-size: 20px;
	width: 37px
}

.sbMenu .mLink.active {
	background: #ffc107;
	box-shadow: 0 7.93801px 19.845px rgb(255, 193, 77, 0.15);
	border-radius: 50px;
	color: #fff
}

.sbMenu .mLink.active:hover {
	color: #fff
}

.sbMenu .mLink:hover {
	color: #ffc107
}

.sbMenu .mSMore {
	background: #0c2447;
	border: 1px solid #2a4771;
	color: #fff;
	display: flex;
	justify-content: center;
	gap: 10px;
	align-items: center;
	border-radius: 30px;
	display: flex;
	align-items: center;
	padding: 15px 20px;
	transition: .14s ease;
	cursor: pointer
}

.sbMenu .mSMore .mText {
	font-weight: 600;
	font-size: 14px;
	line-height: 16px
}

.sbMenu .mSMore .mIcon {
	display: flex;
	align-items: center;
	font-size: 20px;
	transition: .14s ease
}

.sbMenu .mSMore:focus {
	box-shadow: 0 0 0 .25rem rgba(25, 33, 73, 0.3)
}

.sbMenu .mSMoreItem.active .mSMore .mIcon {
	transform: rotate(180deg)
}

.sbMenu .mSMoreItem.active .subMenu {
	width: 100%;
	display: flex
}

.sbMenu .subMenu {
	display: none;
	flex-direction: column;
	padding: 14px 0;
	margin: 0;
	transition-timing-function: .2s ease
}

.appHeader {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	height: 74px;
	z-index: 1001;
	background: #121D27;
	border-bottom: 1px solid #183441
}

@media (min-width: 768px) {
	.appHeader {
		padding: 0 30px;
		height: 90px;
		border-bottom: 0
	}
}

/* CLEANUP 2026-05-07: removed .appHeader .apHdRw rules (dead — markup no longer
 * uses .apHdRw row container; topbar v4 uses .l2v2-topbar flex directly) */

@media (min-width: 992px) {
	.appHeader {
		left: 280px
	}
}

.apPgTi {
	font-weight: 600;
	font-size: 19px;
	line-height: 22px;
	color: #fff
}

.apPgTx {
	font-weight: 600;
	font-size: 14px;
	line-height: 16px;
	color: #8b98b8;
	margin: 0 !important
}

.apHdCr {
	display: flex;
	align-items: center;
	gap: 14px
}

@media (max-width: 992px) {
	.apHdCr {
		width: 42px;
		height: 42px;
		padding: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 20px
	}
}

.apHdCr::after {
	display: none
}

.apHdIt {
	position: relative;
	background-color: transparent;
	display: flex;
	gap: 12px;
	align-items: center;
	text-align: left;
	padding: 0
}

.apHdIt::after {
	display: none
}

@media (min-width: 768px) {
	.apHdIt {
		padding: 9px 20px
	}
}

.apHdIt .icon {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: #0C141B;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffc107;
	font-size: 20px;
	overflow: hidden
}

.apHdIt .icon.avatar {
	background-color: transparent
}

/* CLEANUP 2026-05-07: removed .colIc .icon.avatar (dead — .colIc no longer in markup) */

.apHdIt .icon.avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover
}

.apHdIt .title {
	font-weight: 600;
	font-size: 14px;
	line-height: 16px;
	color: #fff
}

.apHdIt .text {
	font-weight: 600;
	font-size: 12px;
	line-height: 12px;
	color: #8b98b8;
	margin-top: 6px
}

.apHdIt .arrows {
	color: #fff;
	display: flex;
	align-items: center
}

.apHdIt.apHdPrb {
	background: #0C141B;
	border-radius: 50px;
	padding: 10px 0 10px 10px
}

.appContent {
	padding-bottom: 40px
}

@media (min-width: 992px) {
	.appContent {
		padding: 0 30px 30px
	}
}

.hiddenTitle {
	display: none;
	visibility: hidden;
	opacity: 0
}

.nwoNav {
	background: #121D27;
	border: 1px solid #183441;
	border-radius: 15px;
	margin: 0;
	list-style: none;
	padding: 7px;
	display: flex
}

.nwoNav .nwoNavLink {
	border: none;
	outline: none;
	border-radius: 11px;
	font-weight: 600;
	font-size: 14px;
	line-height: 16px;
	background-color: transparent;
	color: #fff;
	padding: 13px 25px;
	transition: .14s ease
}

.nwoNav .nwoNavLink.active {
	background: #ffc107;
	color: #fff
}

.nwoTabs .nwoTab {
	display: none
}

.nwoTabs .nwoTab.active {
	display: block
}

.nwoDeIt {
	height: 47px;
	padding: 0 10px;
	display: flex;
	align-items: center;
	gap: 20px;
	background: #121D27;
	border: 1px solid #183441;
	border-radius: 15px
}

.nwoDeIt.description {
	height: auto;
	padding: 20px
}



@media (min-width: 992px) {
	.nwoDeIt.description {
		padding: 30px
	}
}

.nwoDeIt .icon {
	width: 32px;
	height: 32px;
	color: #fff;
	background-color: #192149;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%
}

.nwoDeIt .text {
	font-weight: 600;
	font-size: 14px;
	line-height: 16px;
	color: #fff;
	overflow-wrap: break-word;
	max-width: 100%
}

.s-row {
	display: flex;
	align-items: center;
	gap: 10px
}

.s-row.s-title {
	font-weight: 600;
	display: none
}

@media (min-width: 992px) {
	.s-row.s-title {
		display: flex
	}
}

.s-col {
	flex: 0 0 auto
}

@media (min-width: 992px) {
	.s-col {
		flex: 0 0 50px;
		width: 50px
	}

	.s-col.s-col-sm {
		flex: 0 0 70px;
		width: 70px
	}

	.s-col.s-col-md {
		flex: 0 0 100px;
		width: 100px
	}

	.s-col.s-col-lg {
		flex: 0 0 180px;
		width: 180px
	}

	.s-col.s-title {
		flex: 1 0 0;
		width: auto
	}
}

.services-wrapper {
	display: flex;
	flex-wrap: wrap;
	width: 100%
}

@media (min-width: 992px) {
	.services-wrapper {
		flex-direction: column
	}
}

.si-wrapper {
	flex: 0 0 auto;
	width: 100%;
	position: relative
}

@media (min-width: 768px) {
	.si-wrapper {
		flex: 0 0 auto;
		width: 50%
	}
}

@media (min-width: 992px) {
	.si-wrapper {
		width: 100%
	}
}

.service-item {
	padding: 12px 30px;
	border-radius: 15px;
	margin-bottom: 14px;
	background: #121d27;
	border: 1px solid #183441;
	box-sizing: border-box;
	border-radius: 15px
}

@media (max-width: 992px) {
	.service-item .s-row {
		flex-wrap: wrap;
		align-items: center
	}

	.service-item .s-col-avtime {
		width: 100%;
		text-align: center
	}

	.service-item .s-col-btn {
		flex: 1
	}

	.service-item .s-col {
		padding: 0
	}

	.service-item .s-col::before {
		content: attr(data-title);
		display: block;
		padding-bottom: 6px;
		font-weight: 600;
		color: red;
		font-size: 13px
	}

	.service-item .s-col-fav {
		order: 100
	}

	.service-item .s-col-id {
		width: 100%;
		text-align: center
	}

	.service-item .s-title {
		width: 100%;
		text-align: center
	}

	.service-item .s-col-c {
		width: 30%;
		text-align: center
	}
}

.services-head-row .service-item {
	background-color: transparent;
	border: none
}

.sp-serv-title {
	font-weight: 600;
	font-size: 14px;
	line-height: 17px
}

.sp-serv-sm {
	font-weight: 600;
	font-size: 16px;
	line-height: 17px;
	color: #ffc107
}

@media (min-width: 992px) {
	.sp-serv-sm {
		color: #949494;
		font-size: 14px
	}
}

.orlc {
	border-radius: 10px;
	font-weight: 600;
	font-size: 14px;
	line-height: 17px;
	padding: 5px 10px;
	background: #f7fafc;
	color: #74809d;
	border-radius: 10px
}

.orlc.min {
	background: rgba(45, 250, 213, 0.18);
	color: #0a977e;
	border: 1px solid #0a977e
}

.orlc.max {
	background: rgba(255, 38, 38, 0.25);
	color: #FE7E7E;
	border: 1px solid #FE7E7E
}

.sp-services .card {
	margin-bottom: 30px
}

@media (min-width: 992px) {
	.sp-services .card {
		background-color: #121D27; /* Dark First */
		border: 1px solid #183441;
		overflow: hidden
	}

	/* Light Mode Override */
	html.light .sp-services .card {
		background-color: #fff !important;
		border-color: #eee !important;
	}
}

.si-header {
	padding: 25px 30px;
	background: url(https://storage.perfectcdn.com/0402e1/b5b38u9mlsnaeubz.png) #ffc107;
	border-radius: 15px;
	margin-bottom: 14px
}

.si-header .si-title {
	font-weight: 600;
	font-size: 19px;
	line-height: 23px;
	color: #fff;
	margin-bottom: 0
}

.search-services {
	height: 40px;
	position: relative
}

.search-services:focus-within .icon {
	color: #fff
}

.search-services .icon {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	color: #92969d;
	transition: .14s ease
}

.search-services .textbox {
	width: calc(100% - 40px);
	margin-left: 40px;
	height: 40px;
	background-color: transparent;
	outline: none;
	border: none;
	color: #fff;
	font-weight: 600;
	font-size: 14px;
	line-height: 16px
}

.search-services .textbox::placeholder {
	color: #92969d
}

.orders-nav-wrapper {
	padding-top: 30px;
	margin-bottom: 30px
}

.orders-nav {
	list-style: none;
	margin: 0;
	padding: 0 0 10px;
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap
}

.orders-nav-link {
	background: #121D27;
	border: 1px solid #183441;
	box-sizing: border-box;
	border-radius: 15px;
	color: #637990;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 20px;
	transition: .14s ease
}

.orders-nav-link:focus {
	box-shadow: #ffc107d9 ;
}

/* Inactive tabs — bright text for readability */
.orders-nav-link:not(.active) {
	color: #e2e8f0 !important;
}

.orders-nav-link.active {
	background-color: #ffc107;
	border-color: #183441 !important;
	color: #fff !important
}

.orders-nav-link.active:hover {
	background-color: #ffc107;
	color: #fff;
	border-color: #183441
}

@media (min-width: 992px) {
	.orders-nav-link {
		padding: 10px 13px
	}
}

@media (min-width: 1200px) {
	.orders-nav-link {
		padding: 11px 15px
	}
}

@media (min-width: 1400px) {
	.orders-nav-link {
		padding: 14px 18px
	}
}

.orders-nav-link .icon {
	font-size: 20px;
	display: flex;
	align-items: center
}

.orders-nav-link .text {
	font-weight: 600;
	font-size: 14px;
	line-height: 16px
}

.op-search-box {
	transition: .14s ease
}

.op-search-box:focus-within {
	box-shadow: 0 0 0 .25rem rgba(2, 88, 255, 0.25)
}

.op-search-box .icon {
	color: #637990
}

.op-search-box input {
	transition: .14s ease;
	background-color: transparent;
	border: none;
	outline: none;
	flex: 1;
	color: #fff;
	font-weight: 600;
	font-size: 14px;
	line-height: 16px
}

.op-search-box input::placeholder {
	color: #566676
}

.op-card {
	margin-bottom: 30px
}

.op-card .op-card--top {
	padding-bottom: 30px;
	border-bottom: 1px solid #0c141b
}

.op-card .op-card--bottom {
	padding-top: 30px
}

.op-stats {
	display: block;
	font-weight: 600;
	font-size: 14px;
	line-height: 20px;
	text-align: center;
	border: 1px solid #fff;
	background-color: rgba(255, 255, 255, 0.15);
	border-radius: 15px;
	padding: 20px 34px
}

.op-stats.op-stats-sm {
	padding: 16px 30px;
	border-color: rgba(255, 255, 255, 0.15) !important
}

.op-stats.op-stats-btn {
	padding: 20px;
	display: inline-block;
	background: #0258FF;
	border: none;
	color: #566676;
	transition: .14s ease;
	color: #fff
}

.op-stats.op-stats-btn:focus {
	box-shadow: 0 0 0 .25rem rgba(2, 88, 255, 0.25)
}

.op-stats.op-stats-btn.cs-btn {
	font-size: 24px;
	margin-bottom: 0
}

.op-stats.primary {
	background-color: #00B67A;
	border: none;
	color: #fff
}

.op-stats.secondary {
	background-color: #2d5a8e !important;
	border: none;
	color: #fff
}

.op-stats.info {
	background-color: #029fff;
	border: none;
	color: #fff
}

.op-stats.warning {
	background-color: #fbbc05;
	border: none;
	color: #fff
}

.op-stats.danger {
	background-color: #f65619;
	border: none;
	color: #fff
}

.op-stats.danger-btn {
	border: 1px solid #f65619;
	background: rgba(246, 86, 25, 0.1);
	color: #f65619
}

.op-service-title {
	font-weight: 600;
	font-size: 14px;
	line-height: 25px;
	color: #fdfdfd;
	margin-bottom: 0
}

.op-search-box.op-order-link {
	display: flex;
	width: 100%
}

.op-search-box.op-order-link .link {
	display: block;
	width: 100%;
	flex: 1 0 0;
	font-weight: 500;
	color: #c0cdd8 !important;
	font-size: 12px;
	line-height: 18px;
	color: #637990;
	opacity: .8;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden
}

.op-date {
	font-weight: 600;
	font-size: 16px;
	line-height: 25px;
	color: #c0cdd8
}

.op-date::before {
	content: "";
	width: 9px;
	height: 9px;
	background: #9aacbd;
	display: inline-block;
	border-radius: 50%;
	margin-right: 14px;
	margin-left: 0
}

.op-item {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-direction: column
}

@media (min-width: 992px) {
	.op-item {
		flex-direction: row
	}
}

.op-item .title {
	font-size: 14px;
	line-height: 18px;
	color: #72879d
}

.op-item .icon {
	display: flex;
	align-items: center;
	font-size: 24px;
	color: #fdfdfd
}

.op-item .text {
	font-weight: 700;
	font-size: 23px;
	color: #fdfdfd;
	line-height: 27px
}

/* CLEANUP 2026-05-07: removed legacy add-funds payment-method classes
 * (.af-text, .card-af-top, .af-nav-pay + variants, .af-pm-title, .paytab-head,
 * .af-pm-about, .af-pm-text, .af-pm-img, .af-ph, .af-pm-list) — verified zero
 * markup hits across all .twig/.js/.html. Replaced by .af-pay-* (current) and
 * .l2v2-page-addfunds (modernized). ~120 lines saved. */

.sc-sup-item {
	background: #183441;
	border: 1px solid #0C141B;
	box-sizing: border-box;
	border-radius: 15px;
	padding: 18px 30px;
	display: block;
	width: 100%;
	transition: .14s ease
}

.sc-sup-item:hover {
	background: #0C141B;
	border: 1px solid #183441
}

.sc-sup-item .title {
	font-weight: 600;
	font-size: 14px;
	line-height: 16px;
	color: #8b98b8;
	margin-bottom: 10px
}

.sc-sup-item .text {
	font-weight: 600;
	font-size: 14px;
	line-height: 16px;
	color: #fff;
	margin-bottom: 10px
}

@media (min-width: 992px) {
	.sc-sup-item .text {
		margin-bottom: 0
	}
}

.sc-sup-item+.sc-sup-item {
	margin-top: 13px
}

.sd-head {
	padding: 20px 0 30px
}

.sd-back {
	display: block;
	padding: 10px 0 12px;
	margin: 10px 0;
	color: #fff;
	position: relative;
	display: flex;
	align-items: center;
	text-decoration: none;
	font-weight: 600;
	font-size: 16px;
	line-height: 20px
}

.sd-back:hover {
	color: #fff
}

.sd-back:hover::after {
	left: -18px;
	right: -18px
}

.sd-back i,
.sd-back span {
	position: relative;
	z-index: 3
}

.sd-back::after {
	content: "";
	height: 2px;
	background-color: #0258FF;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	transition: .14s ease
}

.sd-tid {
	display: flex;
	align-items: center;
	gap: 30px
}

.sd-tid .title {
	font-weight: 600;
	font-size: 25px;
	line-height: 31px;
	color: #0c2447;
	margin: 0
}

.sd-tid .tid {
	display: block;
	background-color: #0258FF;
	border-radius: 40px;
	font-weight: 600;
	font-size: 16px;
	line-height: 20px;
	color: #ffff;
	padding: 14px 30px
}

.tc-tdet-title {
	font-weight: 600;
	font-size: 25px;
	line-height: 31px;
	margin-bottom: 0
}

.sd-cb {
	padding: 7px 8px 7px 30px
}

.sd-cb .row {
	align-items: center
}

.tc-ti-title {
	font-weight: 600;
	font-size: 16px;
	line-height: 20px;
	color: #72879d;
	margin-bottom: 0
}

.tc-ti-text {
	font-weight: 600;
	font-size: 14px;
	line-height: 20px;
	color: #fff;
	background-color: #0258FF;
	padding: 14px 0;
	width: 150px;
	text-align: center;
	border-radius: 0 15px 15px 0
}

.ticket-message-block {
	display: flex
}

.ticket-message-block.ticket-message-left+.ticket-message-left {
	margin-top: -50px
}

.ticket-message-block.ticket-message-right+.ticket-message-right {
	margin-top: -50px
}

.ticket-message-block.ticket-message-right {
	justify-content: flex-end
}

.ticket-message-block.ticket-message-right .ticket-msg-container {
	text-align: right
}

.ticket-message-block.ticket-message-right .ticket-msg-container .ticket-msg {
	background: #183441;
	border-radius: 20px 20px 0 20px
}

.ticket-message-block.ticket-message-left .ticket-msg-container .ticket-msg {
	border-radius: 20px 20px 20px 0
}

.ticket-message-block .ticket-msg-container {
	width: 100%;
	max-width: 400px
}

.ticket-message-block .ticket-msg-container .ticket-msg {
	background: #ffc107;
	border-radius: 30px;
	padding: 14px 26px;
	margin-bottom: 12px;
	font-weight: 500;
	font-size: 13px;
	line-height: 22px;
	letter-spacing: .3px;
	color: #fff
}

.ticket-message-block .ticket-msg-container .date-time {
	font-size: 12px;
	line-height: 15px;
	color: #747886;
	margin-bottom: 30px;
	padding: 0 10px;
	display: block
}

.schat-body .schat-chat-body {
	max-height: 553px;
	overflow-y: auto;
	margin: 0 -24px;
	padding: 0 24px
}

.schat-body .schat-chat-body::-webkit-scrollbar {
	width: 6px;
	border-radius: 3px
}

.schat-body .schat-chat-body::-webkit-scrollbar-track {
	background: transparent;
	border-radius: 3px
}

.schat-body .schat-chat-body::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.2);
	border-radius: 3px
}

.schat-body .schat-chat-body::-webkit-scrollbar-thumb:hover {
	background: rgba(255, 255, 255, 0.4)
}

.schat-body .schat-input {
	padding-top: 10px
}

.schat-msg-input {
	position: relative;
	display: flex;
	background: #0c141b;
	border-radius: 0 0 28px 28px;
	height: 100px;
	align-items: center
}

.schat-msg-input input {
	border: none;
	outline: none;
	background: transparent;
	flex: 1;
	padding: 0 30px;
	font-size: 14px;
	line-height: 17px;
	color: #fff
}

.schat-msg-input input::placeholder {
	color: rgba(255, 255, 255, 0.6)
}

.payments-table {
	width: 100%
}

.payments-table tr {
	background: #f9f9f9;
	border-radius: 10px;
	padding: 12px 14px;
	display: block;
	display: flex;
	align-items: center;
	margin: 0 -10px;
	justify-content: space-between;
	margin-bottom: 14px
}

.payments-table tr>td {
	padding: 0 10px
}

.payments-table .pyt-id {
	background: #21c5fb;
	border-radius: 7px;
	color: #fff;
	padding: 12px 24px;
	font-weight: 600;
	font-size: 16px;
	line-height: 20px
}

.payments-table .pyt-title {
	font-weight: 700;
	font-size: 16px;
	line-height: 20px;
	margin-bottom: 2px
}

.payments-table .pyt-text {
	font-weight: 600;
	font-size: 16px;
	line-height: 20px;
	color: #21c5fb;
	margin-bottom: 0
}

.btn.sd-send-btn {
	box-shadow: none;
	display: flex;
	align-items: center
}

.scd-title {
	font-weight: 600;
	font-size: 25px;
	line-height: 31px;
	color: #fff;
	margin-bottom: 0
}

.scd-id {
	background: #ffc107;
	border-radius: 15px;
	padding: 12px 20px;
	font-weight: 600;
	font-size: 16px;
	line-height: 20px;
	color: #fff
}

.scd-item {
	background: #121D27;
	border: 1px solid #183441;
	border-radius: 15px;
	padding: 20px 24px;
	font-weight: 600;
	font-size: 16px;
	line-height: 18px;
	display: flex;
	align-items: center;
	gap: 10px
}

.scd-item+.scd-item {
	margin-top: 14px
}

.scd-item .title {
	flex: 1
}

.scd-item .text {
	color: #ffc107
}

.dh-icon {
	background-color: #ffc107;
	color: #fff;
	border-radius: 50%;
	position: relative;
	height: 64px;
	width: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32px;
	font-weight: 400
}

.afp-ftext {
	font-weight: 600;
	font-size: 16px;
	line-height: 20px;
	color: #fff
}

/* CLEANUP 2026-05-07: removed .afp-top + .aft-item (dead — never in markup) */

.aft-box-row {
	margin: 0 -8px -10px
}

.aft-box-row>.col {
	padding: 0 8px
}

.aft-box-row>.col:nth-child(1n) .aft-box .icon {
	background-color: #0258FF
}

.aft-box-row>.col:nth-child(2n) .aft-box .icon {
	background-color: #F65619
}

.aft-box-row>.col:nth-child(3n) .aft-box .icon {
	background-color: #8000FF
}

.aft-box-row>.col:nth-child(4n) .aft-box .icon {
	background-color: #FBBC05
}

.aft-box-row>.col:nth-child(5n) .aft-box .icon {
	background-color: #F09
}

.aft-box {
	position: relative;
	overflow: hidden;
	margin-bottom: 16px;
	padding: 10px;
	display: flex;
	align-items: center;
	gap: 20px
}

.aft-box .icon {
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-size: 30px;
	font-weight: 400
}

.aft-box .title {
	font-weight: 600;
	font-size: 14px;
	line-height: 17px;
	color: #fff
}

.aft-box .text {
	font-weight: 600;
	font-size: 25px;
	line-height: 25px;
	color: #fff
}

.card-header-ap {
	background-image: url(../img/card-head-ap.png)
}

.acc-avatar {
	width: 66px;
	height: 66px;
	border-radius: 50%;
	object-fit: cover
}

.acc-username {
	font-size: 19px;
	line-height: 19px;
	letter-spacing: .01em;
	color: #fff;
	display: flex;
	align-items: center
}

.acc-username .txt {
	font-weight: 600
}

.acc-username i {
	color: #647494
}

.acc-email {
	font-weight: 400;
	font-size: 14px;
	line-height: 17px;
	margin-top: 8px;
	color: #4e5d7c
}

.acc-switch {
	display: flex;
	background: #192149;
	border-radius: 15px;
	height: 58px;
	padding: 8px;
	outline: none;
	min-width: 122px;
	align-items: center;
	justify-content: center;
	gap: 8px;
	position: relative;
	transition: .14s ease;
	border: 1px solid #192149
}

.acc-switch:focus {
	box-shadow: 0 0 0 .25rem rgba(255, 255, 255, 0.25)
}

.acc-switch.gs-female .acc-switch-bg {
	left: 50%
}

.acc-switch .acc-switch-bg {
	position: absolute;
	z-index: 3;
	border-radius: 12px;
	background-color: #0258FF;
	left: 8px;
	width: calc(50% - 8px);
	top: 8px;
	bottom: 8px;
	transition: .2s ease
}

.acc-switch .btn-gender {
	position: relative;
	z-index: 5;
	outline: none;
	border: none;
	background-color: transparent;
	width: calc(50% - 8px);
	font-size: 18px;
	line-height: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff
}

.acc-icon {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background-color: rgba(2, 88, 255, 0.25);
	color: #0258FF;
	font-size: 24px;
	display: flex;
	align-items: center;
	justify-content: center
}

.acc-icon.i-1 {
	background: rgba(246, 86, 25, 0.15);
	color: #f65619
}

.acc-icon.i-2 {
	background: rgba(0, 182, 122, 0.15);
	color: #00B67A
}

.acc-item {
	padding: 10px 0;
	flex-wrap: nowrap;
	overflow: hidden
}

.acc-item-title {
	font-weight: 600;
	font-size: 13px;
	line-height: 19px;
	letter-spacing: .01em;
	color: rgba(255, 255, 255, 0.622);
	margin-bottom: 6px
}

.acc-item-text {
	font-weight: 600;
	font-size: 16px;
	line-height: 19px;
	color: rgba(255, 255, 255, 0.848);
	display: inline-block;
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden !important;
	text-overflow: ellipsis
}

.serch-in-updates {
	background: #0C141B;
	border: 1px solid #121D27;
	border-radius: 15px;
	height: 58px;
	position: relative;
	padding-left: 58px;
	color: #92969d
}

.serch-in-updates::before {
	content: "\f0cd";
	font-family: remixicon !important;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	width: 58px;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px
}

.serch-in-updates input {
	width: 100%;
	height: 100%;
	border: none;
	outline: none;
	background-color: transparent;
	color: #fff;
	font-weight: 500
}

.serch-in-updates input::placeholder {
	color: rgba(255, 255, 255, 0.5)
}

.btn-filter {
	background-color: #fff;
	display: flex;
	align-items: center;
	border: 1px solid #ebf2fa
}

.btn-filter .icon {
	color: #0258FF
}

/* CLEANUP 2026-05-07: removed .blog-head, .blogs-title/.blogs-text, .blogs,
 * .blog-item + sub, .blog-single-head, .blog-single-content + h1-h6 (~120 lines)
 * (.b-* and .bgo-* already removed earlier)
 * — all dead, blog.twig uses .blog-post-card / .blog-main-content / .blog-pagination */

.register-page {
	position: relative;
	min-height: 100vh;
	background: #fbc107;
	width: 100%;
	display: flex;
	align-items: center;
	overflow: hidden
}

@media (min-width: 1200px) {
	.register-page::before {
		content: "";
		left: 0;
		top: 0;
		bottom: 0;
		width: calc(50% - 50px);
		position: absolute;
		background-color: #fbc107;
		background-image: url(https://storage.perfectcdn.com/0402e1/5bxcjuyyn3jb6p0g.png);
		background-size: cover;
		background-position: center right
	}
}

.register-left {
	min-height: 100vh;
	position: relative
}

.register-img {
	position: absolute;
	right: 0;
	bottom: 0;
	max-width: 130%
}

.register-go-back {
	font-size: 16px;
	line-height: 1.3;
	letter-spacing: -.02em;
	color: #000;
	display: flex;
	align-items: center;
	margin-bottom: 30px
}

.register-go-back span {
	font-weight: 600
}

.login-title {
	font-weight: 600;
	font-size: 25px;
	line-height: 1.2px;
	letter-spacing: -.05em;
	color: #fff;
	margin-bottom: 20px
}

.login-text {
	font-weight: 600;
	font-size: 12px;
	line-height: 25px;
	letter-spacing: -.02em;
	color: #606b80;
	margin-bottom: 22px
}

.login-label {
	font-weight: 600;
	font-size: 14px;
	line-height: 25px;
	color: #fff;
	margin-bottom: 10px
}

.login-control {
	background: #183441;
	border: 1px solid #121D27;
	box-sizing: border-box;
	border-radius: 15px;
	height: 50px;
	width: 100%;
	position: relative;
	transition: .14s ease
}

.login-control:focus-within {
	background-color: #121D27
}

.login-control:focus-within .icon {
	color: #fff
}

.login-control .icon {
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	width: 54px;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	transition: .14s ease;
	color: #ffc107
}

.login-control input {
	margin-left: 44px;
	width: calc(100% - 54px);
	height: 100%;
	border: none;
	outline: none;
	background: transparent;
	padding: 0 14px;
	font-weight: 600;
	font-size: 14px;
	color: #fff
}

.register-left {
	position: relative
}

.register-phone {
	max-width: 140%;
	position: absolute;
	right: 50px
}

.home-menu-btn {
	position: relative;
	width: 44px;
	height: 44px;
	border-radius: 15px;
	background-color: #183441;
	color: #ffc107;
	outline: none;
	border: none;
	font-size: 18px;
	transition: .14s ease;
	z-index: 1020
}

.home-menu-btn i {
	position: absolute;
	top: 10px;
	left: 13px
}

.form-group.fields {
	margin-bottom: 1.5rem !important
}

.select2-results__option a {
	color: #fff !important;
	font-size: 14px !important
}

.select2-results__option a:hover {
	background: #183441;
	color: #fff !important
}

.select2-container--default .select2-results>.select2-results__options,
.select2-container--open .select2-dropdown--below,
.select2-container--default .select2-results__option[aria-selected=true],
.select2-container--default .select2-results__option:hover {
	background-color: #0c141b !important
}

.select2-container--default .select2-selection--single {
	height: 50px;
	line-height: 36px
}

.modal-wrapper {
	margin: auto;
	background-color: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(5px);
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 2000;
	display: none;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 5px #000
}

.modal-wrapper.active {
	display: flex
}

.mbo-wrapper {
	height: 100%;
	width: 100%;
	padding: 40px 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: nowrap;
	white-space: nowrap;
	overflow-y: auto
}

/* ✅ Default (Mobile View) -> อยู่ด้านล่างและเต็มจอ */
.modal-box {
    margin: auto 0;
    max-width: 350px;
    width: 100%;
    border-radius: 25px 25px 0 0;
    background-color: #121d27;
    backdrop-filter: blur(5px);
    text-align: left;
    position: absolute;
    right: 0;
    bottom: 0;
    height: 80%;
    max-height: 500px;
}

/* ✅ ปรับให้ Mobile View (จอเล็กกว่า 992px) สูง 65% */
@media (max-width: 991.98px) {
    .modal-box {
        max-width: 100%;
        height: 65%;
    }
}

/* ✅ ปรับให้ Desktop View (จอใหญ่กว่า 992px) อยู่ตรงกลาง */
@media (min-width: 992px) {
    .modal-box {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        max-width: 350px;
        height: 80%;
        max-height: 500px;
        right: auto; /* ลบค่า right: 0; เพราะไม่ต้องการให้ชิดขวา */
        bottom: auto; /* ไม่ให้ติดขอบล่าง */
    }
}


.m-header {
	padding: 3px 30px;
	background-color: #183441;
	background-size: cover;
	background-position: center;
	border-radius: 25px 25px 0 0;
	white-space: normal;
}

.m-body {
	padding: 10px;
	white-space: normal
}

.m-body #serviceModalText {
	background: #00000050;
	border-radius: 15px;
	padding: 15px;
	font-size: 13px
}

.m-body .btn {
	position: absolute;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	bottom: 0;
	border-radius: 0
}

.m-title {
	font-weight: 600;
	font-size: 16px;
	line-height: 30px;
	letter-spacing: -.005em;
	color: #fff;
	margin-bottom: 0
}

.m-close:focus {
	box-shadow: 0 0 0 .25rem rgba(2, 88, 255, 0.2)
}

.m-sub-title {
	margin-top: 4px;
	font-weight: 600;
	font-size: 14px;
	line-height: 26px;
	letter-spacing: -.005em;
	color: rgba(255, 255, 255, 0.6);
	margin-bottom: 0
}

/* Default modal styles - optimized for light mode first */
.modal-body,
.modal-header {
	background: #ffffff;
	color: #333333;
}

.modal-footer {
	background: #f8f9fa;
	border-top: 1px solid #dee2e6;
}


.badgearea .badge {
	background: #4a5cf6;
	border-radius: 7px;
	padding: 3px 10px;
	margin: 0 5px 0 0;
	color: #fff;
	font-weight: 400
}

.sUpd.priceDown {
	color: rgba(133, 131, 251, 1)
}

.sUpd.newServ {
	color: rgba(59, 255, 211, 1)
}

.sUpd.priceUp {
	color: rgba(255, 38, 38, 1)
}

.sUpd.priceActive {
	color: rgba(255, 193, 7, 1)
}

.sUpd.priceCare {
	color: rgba(214, 97, 238, 1)
}

.catetitle td strong {
	background-color: #4a5cf6;
	display: block;
	padding: 12px 15px;
	margin: 0 -10px;
	text-align: center;
	font-size: 16px;
	color: #fff;
	font-weight: 500;
	border-radius: 15px
}

.thead-tr,
.thead-tr th:first-child {
	border-radius: 15px 0 0 15px
}

.thead-tr,
.thead-tr th:last-child {
	border-radius: 0 15px 15px 0
}

.thead-tr,
.thead-tr th {
	background-color: #45485B;
	border-color: #0a0f1d;
	font-weight: 400;
	font-size: 12px;
	color: #fff;
	padding: 7px
}

.table td {
	border-color: #10182f;
	
	font-size: 13px
}

.table th,
.table thead th,
.catetitle td {
	border: none
}

.table>:not(:last-child)>:last-child>* {
	border-bottom-color: #183441;
	color: #fff
}

@media (max-width:991.98px) {
	.header .site-name img {
		height: 70px
	}

	.apHdIt .arrows {
		display: none
	}

	.apHdIt.apHdPrb {
		background: transparent;
		border-radius: 50px;
		padding: 0
	}
}

.tooltip-inner {
	background-color: #ffc107 !important;
	color: #fff
}

.bs-tooltip-top .arrow::before,
.bs-tooltip-auto[x-placement^="top"] .arrow::before {
	border-top-color: #ffc107 !important
}

.bs-tooltip-right .arrow::before,
.bs-tooltip-auto[x-placement^="right"] .arrow::before {
	border-right-color: #ffc107 !important
}

.bs-tooltip-bottom .arrow::before,
.bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
	border-bottom-color: #ffc107 !important
}

.bs-tooltip-left .arrow::before,
.bs-tooltip-auto[x-placement^="left"] .arrow::before {
	border-left-color: #ffc107 !important
}

.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before,
.bs-tooltip-top .tooltip-arrow::before {
	border-top-color: #ffc107 !important
}

.help-block.min-max {
	display: none
}

.blog-content {
	display: -webkit-box;
	-webkit-line-clamp: 6;
	line-clamp: 6;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis
}

@media screen and (min-width: 991.98px) {
  .swiper-button-prev, .swiper-button-next {
  		display: none!important
  }
}

.nwo-categories .swiper-slide {
  width: auto !important;
}

.nwo-categories .swiper-wrapper {
  position: relative;
}

.nwo-categories .swiper-wrapper::before, .nwo-categories .swiper-wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 10;
}

.nwo-categories .swiper-wrapper::before {
  left: 0;
  width: 50px;
}

.nwo-categories .swiper-wrapper::after {
  left: 0;
  width: 50px;
}

.nwo-categories .swiper-button-next::after,
.nwo-categories .swiper-button-prev::after {
  font-family: remixicon !important;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 20px;
  color: #fff;
}

.nwo-categories .swiper-button-prev::after {
  content: "\ea64";
}

.nwo-categories .swiper-button-next::after {
  content: "\ea6e";
}

.nwo-cat-btn {
  display: flex;
  align-items: center;
  gap: 15px;
  background: #171f2e;
  border: 1px solid #151b26;
  border-radius: 10px;
  padding: 15px 24px 15px 15px;
}

.nwo-cat-btn.active {
  background: #ffc107;
  border: 1px solid #ffc107;
}

.nwo-cat-btn.active .icon, .nwo-cat-btn.active .text {
  color: #fff;
}

.nwo-cat-btn .gnytMicon {
  color: #fff;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nwo-cat-btn .text {
  font-weight: 600;
  font-size: 13px;
  line-height: 15px;
  color: #fff;
}

@media (max-width: 991.98px) {
  .nwoNav li, .nwoNav li button {
  	width: 100%
  }
}

    .colorbox {
        background: #0C141B;
        border-radius: 25px;
        padding: 4px 10px;
        line-height: 32px;
        height: 42px;
    }

    .colorbtn {
        background: #5e0aef;
        border-radius: 25px;
        padding: 5px;
        line-height: 1
    }

    html.light .btndark,
    .btnblack {
        background: #e5e7eb;
        padding: 5px;
        line-height: 1;
        border: 0;
      	color: #5e0aef
    }

    html.dark .btnlight,
    .btnblack {
        background: #141717;
        padding: 5px;
        line-height: 1;
        border: 0;
      	color: #fff
    }

    html.black .btnlight,
    .btndark {
        background: #ffc107;
        padding: 5px;
        line-height: 1;
        border: 0;
      	border-radius: 25px
    }

    html.light .btnlight {
        background: #5e0aef;
        border-radius: 25px;
        padding: 5px;
        line-height: 1;
        border: 0
    }

    .btnlight {
        background: #141717;
        border-radius: 25px;
        padding: 5px;
        line-height: 1;
        border: 0;
      	color: #fff
    }

    html.dark .btndark {
        background: #ffc107;
        border-radius: 25px;
        padding: 5px;
        line-height: 1
    }

    .btnactive {
        background: #5e0aef
    }

html.light #appDashboard, html.light .appAuth {
	background: #f7f8f9
}

html.light .appSidebar {
	background: #edeff2;
    border-color: #e5e7eb;
}

html.light .sbMenu .mLink .mText, html.light .sbMenu .mLink .mIcon {
	color: #3d4249
}

html.light .sbMenu .mLink.active .mText, html.light .sbMenu .mLink.active .mIcon {
	color: #fff
}

html.light .sbUsr {
	background: #e5e7eb
}

html.light .sbName, html.light .apPgTi, html.light .apHdIt .title, html.light .apHdIt .title, html.light .dropdown-item, html.light .card.card-no-box h2, html.light .card.card-no-box h3, html.light .pwd, html.light .nwo-cat-btn .text, html.light .nwo-cat-btn .gnytMicon, html.light .form-label, html.light label, html.light .form-control, html.light .nwoDeIt .text, html.light .nwoDeIt.description .text, html.light .goWr, html.light .apHdIt .arrows, html.light .sp-serv-title, html.light .sp-serv-sm, html.light .appAuth, html.light .af-pm-text, html.light .panel-body, html.light .form-select, html.light .af-pm-title, html.light .sc-sup-item .text, html.light .scd-title, html.light .acc-username, html.light .acc-item-title, html.light .acc-item-text, html.light .op-service-title, html.light .op-item .text, html.light .op-item .icon, html.light .aft-item .text, html.light .aft-box .title, html.light .aft-box .text, html.light .table>:not(:last-child)>:last-child>* {
	color: #1f2937
}

html.light .table>:not(:last-child)>:last-child>* {
    border-bottom-color: #e5e7eb;
}

html.light .appHeader {
    background: #edeff2;
}

html.light .apHdIt.apHdPrb, html.light .apHdIt .icon, html.light .colorbox, html.light .dropdown-menu {
	background: #e5e7eb
}

html.light .card, html.light .service-item {
	background: #ffffff!important;
    border-color: #e5e7eb!important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06)
}

html.light .nwo-cat-btn, html.light .form-control:disabled, html.light .form-control[readonly], html.light .orders-nav-link {
	background: #edeff2!important;
    border-color: #e5e7eb!important
}

html.light .form-control, html.light .nwoDeIt, html.light .af-pm-text, html.light .panel-body, html.light .form-select, html.light .sc-sup-item, html.light .scd-item {
	background: #ffffff!important;
    border-color: #d1d5db!important
}

html.light .nwo-cat-btn.active, html.light .orders-nav-link.active {
    background: #ffc107!important;
    border: 1px solid #ffc107!important;
}

html.light .nwo-cat-btn.active .text, html.light .nwo-cat-btn.active .gnytMicon, html.light .orders-nav-link.active, html.light .dashboard-head-wrapper .dhead-body .text {
	color: #fff
}

html.light .select2-container .badge {
	background: #ffc107
}

html.light .select2-results__option a {
	color: #3d4249 !important;
	font-size: 14px !important
}

html.light .select2-results__option a:hover {
	background: #6100ee;
	color: #fff !important
}

html.light .select2-container--default .select2-results>.select2-results__options,
html.light .select2-container--open .select2-dropdown--below,
html.light .select2-container--default .select2-results__option[aria-selected=true],
html.light .select2-container--default .select2-results__option:hover {
	background-color: #f7f8f9 !important
}

html.light .menu-btn {
    background-color: #e5e7eb;
    color: #ffc107;
}

html.light .modal-box {
    background-color: #f7f8f9;
}

html.light .schat-msg-input  {
  background: #f7f8f9!important
}

html.light .dashboard-head-wrapper .dhead-body .dhead-icon.pg-ap {
    color: #ffffff;
}

/* Light mode - clean white backgrounds */
html.light .modal-body, 
html.light .modal-header {
	background: #ffffff;
	color: #333333;
}

html.light .modal-footer {
	background: #f8f9fa;
	color: #333333;
}

html.light .dashboard-head-wrapper .dashboard-head {
	background: #edeff2;
  	border-color: #e5e7eb
}

html.light .dashboard-head-wrapper .dhead-body .title, html.light .dashboard-head-wrapper .dhead-body .text {
	color: #3d4249
}

/* StatusModal in light mode - consistent with general modals */
html.light #statusModal .modal-content,
html.light #statusModal .modal-body {
	background: #ffffff;
	color: #333333;
}

/* ============================================
   Light Mode: Global Missing Overrides (2026-03-31)
   ============================================ */

/* Sidebar & Navigation */
html.light .avtWr span { color: #3d4249; }
html.light .sbMenu .mLink.active:hover { color: #3d4249; }
html.light .sbMenu .mSMore { color: #6b7280; }

/* New Order Detail — keep icon WHITE inside colored circles */
html.light .nwoDeIt .icon { color: #fff; }

/* Search Services */
html.light .search-services:focus-within .icon { color: #3d4249; }
html.light .search-services .textbox { color: #3d4249; }

/* Orders Navigation */
html.light .orders-nav-link.active:hover { color: #3d4249; }

/* ============================================
   Light Mode: Order History Page (order.twig)
   ============================================ */

/* Service title */
html.light .op-service-title {
    color: #1a1a2e;
}

/* Order item values + icons — dark text for readability */
html.light .op-item .text {
    color: #1a1a2e;
}

html.light .op-item .icon {
    color: #3d4249;
}

/* Status badges — SAME vivid colors as dark mode */
html.light .op-stats.primary {
    background-color: #00B67A !important;
    border: none !important;
    color: #fff !important;
}

html.light .op-stats.secondary {
    background-color: #2d5a8e !important;
    border: none !important;
    color: #fff !important;
}

html.light .op-stats.info {
    background-color: #029fff !important;
    border: none !important;
    color: #fff !important;
}

html.light .op-stats.warning {
    background-color: #fbbc05 !important;
    border: none !important;
    color: #fff !important;
}

html.light .op-stats.danger {
    background-color: #f65619 !important;
    border: none !important;
    color: #fff !important;
}

/* ID badge (small) — same colors as status */
html.light .op-stats.op-stats-sm {
    border-color: transparent !important;
}

/* Action button (blue) */
html.light .op-stats.op-stats-btn {
    background: #0258FF !important;
    color: #fff !important;
    border: none !important;
}

/* Report button (orange outline) */
html.light .op-stats.danger-btn {
    border-color: #f65619;
    background: rgba(246, 86, 25, 0.08);
    color: #f65619;
}

/* Link URL text */
html.light .op-search-box.op-order-link .link {
    color: #4a5568 !important;
}

/* Nav tabs (inactive) — must use !important to beat dark mode rule */
html.light .orders-nav-link:not(.active) {
    color: #4a5568 !important;
}

html.light .orders-nav-link .icon {
    color: #6b7280;
}

/* Nav active tab — dark text on yellow */
html.light .orders-nav-link.active {
    color: #1a1a2e;
}

html.light .orders-nav-link.active .icon {
    color: #1a1a2e;
}

/* Order card border */
html.light .op-card {
    border-color: #e5e7eb;
}

/* Date text */
html.light .op-date {
    color: #4a5568;
}

/* Search box icon */
html.light .op-search-box .icon {
    color: #6b7280;
}

/* Account Funds & Payment */
html.light .af-text { color: #3d4249; }
html.light .af-nav-pay .nav-link { color: #3d4249; }

/* Service Detail */
html.light .sd-back { color: #3d4249; }
html.light .sd-back:hover { color: #0967a1; }
html.light .sd-tid .tid { color: #fff; }

/* Tickets & Support */
html.light .tc-ti-text { color: #3d4249; }
html.light .ticket-message-block .ticket-msg-container .ticket-msg { color: #3d4249; }
html.light .schat-msg-input input { color: #3d4249; }

/* Payments Table */
html.light .payments-table .pyt-id { color: #3d4249; }

/* Service/Category */
html.light .scd-id { color: #3d4249; }

/* Dashboard Header */
html.light .dh-icon { color: #3d4249; }
html.light .afp-ftext { color: #3d4249; }

/* Account Settings */
html.light .acc-switch .btn-gender { color: #3d4249; }

/* Search & Filter */
html.light .serch-in-updates input { color: #3d4249; }
html.light .btn-filter { color: #3d4249; }

/* Social Icons */
html.light .social-icons a { color: #3d4249; }

/* ============================================
   Light Mode: NewOrder Page Fixes (2026-03-31)
   ============================================ */

/* Fix: #appDashboard label (ID specificity 1,0,1) overrides class-based light overrides.
   Must use matching ID specificity to win cascade. */
html.light #appDashboard label,
html.light .appAuth label {
    color: #3d4249;
}

/* Card Header & Title */
html.light .card-title {
    color: #3d4249;
}

html.light .card-h-text {
    color: #6b7280;
}

/* Primary Button - dark text on yellow */
html.light .btn.btn-primary {
    color: #1a1a1a;
}

/* Form Check Label */
html.light .form-check-label {
    color: #3d4249;
}

/* Autofill Input */
html.light input:-webkit-autofill,
html.light input:-webkit-autofill:hover,
html.light input:-webkit-autofill:focus {
    -webkit-text-fill-color: #3d4249 !important;
    box-shadow: 0 0 0 30px #f7f8f9 inset !important;
}

/* Form Placeholder */
html.light .form-control::placeholder {
    color: #9ca3af;
}

html.light .form-select::placeholder {
    color: #9ca3af;
}

/* FAQ Sidebar - fix html.light (original uses body.light which doesn't work) */
html.light .faq-ss-tabs .home-ss-tab {
    background: #f7f8f9 !important;
    color: #0C141B !important;
}

html.light .faq-ss-tabs .home-ss-tab .ss-tab-head .right-p {
    color: #6b7280 !important;
}

html.light .faq-ss-tabs .home-ss-tab .ss-tab-content {
    color: #3d4249 !important;
}

/* Active FAQ tab: dark text on yellow for better contrast */
html.light .faq-ss-tabs .home-ss-tab.active {
    background: #ffc107 !important;
    color: #3d4249 !important;
}

html.light .faq-ss-tabs .home-ss-tab.active .ss-tab-head {
    color: #3d4249 !important;
}

html.light .faq-ss-tabs .home-ss-tab.active .ss-tab-head .right-p {
    color: #3d4249 !important;
}

html.light .faq-ss-tabs .home-ss-tab.active .ss-tab-content {
    color: #4a3800 !important;
}

/* Order Panel (.op-*) */
html.light .op-search-box input {
    color: #3d4249;
}

html.light .op-search-box input::placeholder {
    color: #9ca3af;
}

html.light .op-card .op-card--top {
    border-bottom-color: #e5e7eb;
}

html.light .op-stats {
    border-color: #e5e7eb;
    background-color: rgba(0, 0, 0, 0.04);
}

html.light .op-date {
    color: #6b7280;
}

html.light .op-date::before {
    background: #9ca3af;
}

html.light .op-item .title {
    color: #6b7280;
}

/* Cashback Modal */
html.light #cashbackRequestModal .form-control {
    background: #f7f8f9 !important;
    border-color: #e5e7eb !important;
}

html.light #cashbackRequestModal strong {
    color: #3d4249;
}

html.light #cashbackRequestModal .form-label {
    color: #3d4249 !important;
}

/* Check-in Banner */
.ci-banner-card {
    background: #121D27;
    border: 1px solid #183441;
}

html.light .ci-banner-card {
    background: #f7f8f9;
    border-color: #e5e7eb;
}

.ci-banner-text {
    color: #fff;
}

html.light .ci-banner-text {
    color: #3d4249;
}

.modal-header.astatus {
	margin: 0 15px;
	padding: 30px;
	border-radius: 15px;
}
.modal-header.astatus h4 {
	font-size: 24px!important;
  	color: #fff!important
}

/* NEW (สีแดง) */
.status-box.new {
    background: linear-gradient(180deg, #EF476F 0%, #D43F63 100%) !important;
    border: 2px solid #D43F63 !important;
}

/* GOLD (สีเหลือง) */
.status-box.gold {
    background: linear-gradient(180deg, #FFD166 0%, #E6B856 100%) !important;
    border: 2px solid #E6B856 !important;
}

/* PLATINUM (สีเขียว) */
.status-box.platinum {
    background: linear-gradient(180deg, #06D6A0 0%, #05B384 100%) !important;
    border: 2px solid #05B384 !important;
}

/* VIP (สีน้ำเงิน) */
.status-box.vip {
    background: linear-gradient(180deg, #118AB2 0%, #0D7394 100%) !important;
    border: 2px solid #0D7394 !important;
}

/* คงสไตล์เดิม */
.status-box {
    border-radius: 15px;
    padding: 30px 30px 15px 30px;
    transition: 0.3s ease-in-out;
}

.status-box h3, 
.status-box p {
    text-align: center;
    color: #fff !important;
}

.status-box ul {
    padding-left: 0;
}

.status-box ul li {
    list-style-type: none;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 5px;
    padding: 5px 0;
    text-align: center;
    margin-bottom: 5px;
    color: #fff;
}

.status-box ul li.unlisted {
    color: #000;
    text-decoration: line-through;
}



.modal-footer.sfooter {
	background: #d6f4f6;
	margin: 0 15px;
	padding: 5px 15px;
	border-radius: 15px;
	justify-content: flex-start;
	color: #21c4fb
}
.modal-footer.sfooter .sf-inn {
	display: flex;
	align-items: center;
	justify-content: space-around
}

#statusModal .modal-header {
	background: #ffc107
}

/* StatusModal default - will be overridden by dark mode */
#statusModal .modal-content, 
#statusModal .modal-body {
	background: #ffffff;
	color: #333333;
}

@media (max-width: 991.98px) {
  .modal-header.astatus h4 {
  		font-size: 16px!important
  }
}

.dark .modal-title {
	color: #fff
}

.dark .modal-header, .dark .modal-footer {
	border-color: #183441
}

.modal-footer {
	background: #edeff2
}

.blog-txt {
	display: -webkit-box;
	-webkit-line-clamp: 6;
	line-clamp: 6;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

.blog-txt p {
	font-size: 14px
}

.blog-item .blog-img img {
	border-radius: 20px 20px 0 0
}

.social-icons a {
	color:#fff;
  line-height:30px;
  font-size:30px;
  margin: 0 5px;
  text-decoration:none;
  
}

.social-icons a i {
	line-height:30px;
  font-size:30px;
  -webkit-transition: all 200ms ease-in;
  -webkit-transform: scale(1); 
  -ms-transition: all 200ms ease-in;
  -ms-transform: scale(1); 
  -moz-transition: all 200ms ease-in;
  -moz-transform: scale(1);
  transition: all 200ms ease-in;
  transform: scale(1);
}

.social-icons a:hover i {
  box-shadow: 0px 0px 150px #000000;
  color: #ffc107;
  z-index: 2;
  -webkit-transition: all 200ms ease-in;
  -webkit-transform: scale(1.2);
  -ms-transition: all 200ms ease-in;
  -ms-transform: scale(1.2);   
  -moz-transition: all 200ms ease-in;
  -moz-transform: scale(1.2);
  transition: all 200ms ease-in;
  transform: scale(1.2);
}

:root {
    --border-light: #e5e7eb;
    --border-dark: #183441;
}

/* ค่าพื้นฐาน — default ใช้สี dark mode */
.faq-ss-tabs .home-ss-tab {
    position: relative;
    cursor: pointer;
    border-radius: 25px;
    padding: 15px 20px;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    margin-bottom: 14px;
    border: 1px solid #183441 !important;
}

/* Light Mode — ใช้ html.light ไม่ใช่ body.light */
html.light .faq-ss-tabs .home-ss-tab {
    border-color: #e5e7eb !important;
}


.faq-ss-tabs .home-ss-tab .fa-minus {
  display: none;
}

.faq-ss-tabs .home-ss-tab.active {
  background: #ffc107;
  color: #fff;
}

.faq-ss-tabs .home-ss-tab.active .ss-tab-head {
  color: #fff;
}

.faq-ss-tabs .home-ss-tab.active .ss-tab-head .right-p {
  color: #fff;
}

.faq-ss-tabs .home-ss-tab.active .fa-minus {
  display: block;
}

.faq-ss-tabs .home-ss-tab.active .fa-plus {
  display: none;
}

.faq-ss-tabs .home-ss-tab .ss-tab-head {
  font-size: 16px;
  font-weight: 500;

}

.faq-ss-tabs .home-ss-tab .ss-tab-head .right-p {
  color: #fff;
  font-size: 18px;
  height: 30px;
  line-height: 30px;
}

.faq-ss-tabs .home-ss-tab .ss-tab-content {
  display: none;
  padding-top: 12px;
  color: #fff;
  font-size: 16px;
  line-height: 170%;
  padding-bottom: 8px;
}

.dark .table tbody+tbody {
    border-color: #0c141c;
}

.table tbody+tbody, .light .table tbody+tbody {
    border-color: #dee2e6;
}

.codewin-head {
    height: 1.5rem;
    padding: 0 1rem;
    position: relative;
}

.codewin-buttons {
	display: flex;
	bottom: 0;
	right: 0;
	position: absolute;
	top: 10px;
	cursor: pointer;
}

.btn-mac {
	border-radius: 50%;
	height: 0.75rem;
	margin: 0 0.125rem;
	width: 0.75rem;
}

.mac-close {
	background-color: #ff5f56;
}

.mac-mini {
	background-color: #ffbd2e;
}

.mac-full {
	background-color: #27c93f;
}

.modal-flex {
	padding: 10px 0px;
	display: flex;
	-webkit-box-pack: justify;
	justify-content: space-between;
	-webkit-box-align: center;
	align-items: center;
}

.modal-flex:not(:first-child) {
	border-top: 1px solid #183441;
}

.mf-title {
	font-size: 13px;
	color: #77b1cc;
}

.mf-text {
	margin-top: 2px;
	line-height: 125%;

	font-size: 14px;
	font-weight: 500;
}

.mf-color {
	color: #ffc107;
	font-weight: 600
}

.modal-desc {
	font-size: 13px;
	line-height: 24px;
	max-height: 180px;
	min-height: 180px;
	overflow-x: scroll;
}

.bs-toast {
	background: #183441;
	border: 1px solid #183441 !important;
	color: #fff;
	padding: 10px 24px;
	border-radius: 15px;
	position: fixed;
	bottom: 30px;
	left: 40px;
	width: 100%;
	width: max-content;
	max-width: 350px;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	display: none;
	z-index: 3000;
	text-align: center
}

.bs-toast .bs-toast-content {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex
}

.bs-toast .toast-text {
	-webkit-box-flex: 1;
	-ms-flex: 1;
	flex: 1;
	font-size: 14px;
	font-weight: 500
}

.bs-toast .toast-times {
	cursor: pointer;
	border: none;
	outline: 0;
	color: #fff;
	background: 0 0
}

.cursor-pointer {
	cursor: pointer
}

.dropdown-menu {
	max-height: 400px;
    overflow: scroll;
}

.divider {
	border-bottom: 1px solid #1B2B3A;
	width: 175px;
	margin: auto;
	padding-top: 10px
}

.stepbox .sboxes {
	position: relative;
	margin: 15px 0;
}

.stepbox .sboxes:hover .barea {
	background: #ffc107;
	transform: translateY(-1rem);
	transition: 500ms all;
	cursor: pointer
}

.stepbox .sboxes:hover .barea .sbtext {
	color: #fff;
}

.stepbox .sboxes .barea {
	background: #0C151B;
	border: 1px solid #183441;
	z-index: 23;
	position: relative;
	-webkit-transition: .2s ease;
	transition: .2s ease;
	border-radius: 10px
}

.stepbox .sboxes .barea .sbbody {
	padding: 25px;
  	height: 300px
}

.stepbox .sboxes .barea .sbicon i {
	font-size: 24px;
	color: #ffc107;
	-webkit-transition: .2s ease;
	transition: .2s ease;
}

.stepbox .sboxes .barea:hover .sbicon i {
	-webkit-filter: brightness(0) invert(1);
	filter: brightness(0) invert(1);
}

.stepbox .sboxes .barea .sbtitle {
	font-size: 18px;
	line-height: 24px;
	color: #fff;
	font-weight: 600;
}

.stepbox .sboxes .barea .sbtext {
	font-size: 14px;
	color: #c3c3c3;
	line-height: 24px;
	-webkit-transition: .2s ease;
	transition: .2s ease;
}

@media (max-width: 991.98px) {
  .stepbox .sboxes .barea .sbbody {
  	height: auto!important
  }
}

.tos-page .tos-nav-btn {
	min-width: 60px;
	height: 60px;
	line-height: 60px;
	text-align: center;
	font-size: 14px;
	border-radius: 10px;
	-webkit-transition: .13s ease;
	transition: .13s ease;
	background-color: #183441;
	color: #fff;
	cursor: pointer;
	display: inline-block;
	margin-bottom: 18px;
  	padding: 0 25px
}

.tos-page .tos-nav-btn:hover {
	background-color: #ffc107;
}

.tos-page .tos-nav-btn.active {
	background-color: #ffc107;
	color: #fff;
	padding: 0 14px;
}

.tos-page .tos-nav-btn.active span {
	display: inline-block;
}

.tos-page .tos-tabs {
	line-height: 170%;
}

.tos-page .tos-tabs .tos-tab {
	display: none;
}

.tos-page .tos-tabs .tos-tab.active {
	display: block;
}

.fas.fa-star {
	color: #ffc107
}


/* ✅ Override Bootstrap 100% โดยเพิ่ม `[style]` และ `*` */
body.dark .bonus-table tbody td,
body.dark table.bonus-table tbody td,
body.dark .bonus-table tbody td[style],
body.dark table.bonus-table tbody td[style],
body.dark .bonus-table * {
    color: #ffffff !important;
}

/* ✅ บังคับให้ Header (th) เปลี่ยนสี */
body.dark .bonus-table thead th,
body.dark table.bonus-table thead th,
body.dark .bonus-table thead th[style],
body.dark table.bonus-table thead th[style] {
    color: #ffffff !important;
}

/* ✅ บังคับ Bootstrap `.table` ที่ยังไม่เปลี่ยน */
body.dark table.bonus-table,
body.dark .bonus-table,
body.dark .table td,
body.dark .table th,
body.dark .table tr {
    color: #ffffff !important;
}

/* ✅ ใช้ `*` เพื่อแน่ใจว่าไม่มีจุดไหนถูก Bootstrap Override */
body.dark .bonus-table * {
    color: #ffffff !important;
}


/* CLEANUP 2026-05-07: removed duplicate body.light/body.dark .d-flex.text-center
 * span rules (was defined twice with identical values — kept canonical pair). */
body.light .d-flex.text-center span { color: #3d4249 !important; }
body.dark  .d-flex.text-center span { color: #ffffff !important; }

.si-header {
    border: none !important; /* ลบขอบออก */
    box-shadow: none !important;
    outline: none !important;
  background: #ffc107 !important;
}

.nwoDeIt {
    display: flex;
    align-items: center; /* จัดให้ไอคอนและข้อความอยู่ตรงกลาง */
    gap: 10px; /* เพิ่มช่องว่างระหว่างไอคอนกับข้อความ */
}

.nwoDeIt .icon {
    flex-shrink: 0; /* ป้องกันการบีบขนาดของไอคอน */
    min-width: 40px; /* กำหนดขนาดขั้นต่ำให้ไอคอน */
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nwoDeIt .text {
    flex-grow: 1; /* ให้ข้อความขยายได้โดยไม่บีบไอคอน */
    word-break: break-word; /* ให้ข้อความตัดบรรทัดหากยาวเกินไป */
}

.title {
    white-space: normal; /* ให้ข้อความขึ้นบรรทัดใหม่อัตโนมัติ */
    word-wrap: break-word; /* ตัดข้อความเมื่อยาวเกินไป */
    overflow-wrap: break-word; /* ป้องกันข้อความล้น */
}

@media (min-width: 992px) { /* สำหรับ Desktop */
    .mmff a.btn-primary {
        background-color: #121d27 !important; /* สีพื้นหลัง */
        color: white !important; /* สีตัวอักษร */
        border-color: #121d27 !important; /* สีขอบปุ่ม */
    }
}

@media (max-width: 991px) { /* สำหรับ Mobile */
    .mmff a.btn-primary {
        background-color: #ffc107 !important; /* สีพื้นหลัง */
        color: black !important; /* สีตัวอักษร */
        border-color: #ffc107 !important; /* สีขอบปุ่ม */
    }
}

@media (max-width: 991px) { /* สำหรับ Mobile View */
    .head-menu {
        width: 90%; /* ปรับให้กว้าง 90% ของจอ */
        left: 5%; /* จัดตรงกลาง โดยให้เหลือขอบซ้าย-ขวา */
        right: auto;
    }
}

.lgb-title {
    font-size: 26px;
    font-weight: 700; /* ตัวหนา */
    color: #15222e; /* ใช้กับพื้นหลังขาว เช่น .smm-section-white */
    text-align: center; /* จัดให้อยู่ตรงกลาง */
    margin-bottom: 10px; /* ลดระยะห่างจาก lgb-text */
   margin-top: -25px; /* ลดระยะห่างด้านบน */
}

/* Fix: ข้อความ lgb-title ต้องเป็นสีขาวเมื่ออยู่ในกล่อง logbox พื้นเข้ม (dark mode) */
.logbox-content .lgb-title {
    color: #ffffff;
}

/* Light mode: logbox-content กลายเป็นสีขาว → ข้อความต้องเป็นสีเข้ม */
html.light .logbox-content .lgb-title,
body.light-mode .logbox-content .lgb-title {
    color: #15222e !important;
}

.lgb-text {
    color: #AFB0C0;
    font-size: 15px;
    font-weight: 400;
    line-height: 25px;
    text-align: center; /* จัดให้อยู่ตรงกลาง */
    margin-bottom: 20px; /* ลดระยะห่างด้านล่าง */
}

/* REMOVED: bare .title, .text, .primary-color selectors
   These were overriding ALL .text and .title classes across the entire site.
   If needed, scope them: .logbox .title, .logbox .text, etc. */

.op-stats-btn + .op-stats-btn {
  margin-left: 0.5rem;
}

.orders-nav-link.op-search-box input {
  color: #121D27; /* Light mode */
}

html.dark .orders-nav-link.op-search-box input {
  color: #FFF; /* Dark mode */
}

.badge-step {
  background-color: #ffc107;
  color: #fff;
  font-weight: bold;
  border-radius: 999px;
  padding: 0.2rem 0.5rem;
  font-size: 0.85rem;
  display: inline-block;
  min-width: 1.5rem;
  text-align: center;
}

/* Auto-number dynamic fields rendered by platform JS into #fields */
#fields {
  counter-reset: field-step 3;
}

#fields > .mb-4,
#fields > div > .mb-4,
#fields > .form-group {
  counter-increment: field-step;
}

#fields > .mb-4 > .form-label::before,
#fields > div > .mb-4 > .form-label::before,
#fields > .form-group > .form-label::before,
#fields > .mb-4 > label::before,
#fields > div > .mb-4 > label::before,
#fields > .form-group > label::before {
  content: counter(field-step);
  background-color: #ffc107;
  color: #fff;
  font-weight: bold;
  border-radius: 999px;
  padding: 0.15rem 0.45rem;
  font-size: 0.8rem;
  display: inline-block;
  min-width: 1.4rem;
  text-align: center;
  margin-right: 6px;
  vertical-align: middle;
}

.job-detail-text {
  border-radius: 15px;
  background-color: transparent;

  font-size: 14px;
  
}

.job-detail-text div {

  line-height: 1.6;
  padding-left: 8px;
}

/* รองรับ dark mode ผ่าน class บน <body> */
body.dark-mode .job-detail-text {
  color: #ffffff;
}

body.dark-mode .job-detail-text div {
  color: inherit;
}

  .popup-overlay {
      position: fixed;
      top: 0; left: 0;
      width: 100vw;
      height: 100vh;
      background: rgba(0, 0, 0, 0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 9999;
      opacity: 0;
      transform: scale(0.95);
      pointer-events: none;
      transition: all 0.4s ease;
    }
    .popup-overlay.show {
      opacity: 1;
      transform: scale(1);
      pointer-events: auto;
    }
    .popup-box {
      max-width: 500px;
      width: 90vw;
    }
    .popup-box img {
      width: 100%;
      border-radius: 12px;
      display: block;
    }

.marquee {
  overflow: hidden;
  white-space: nowrap;
  animation: scroll-left 15s linear infinite;
  display: block;
}

@keyframes scroll-left {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

.modal-footer {
  display: flex;
  justify-content: center; /* จัดปุ่มให้อยู่กลางแนวนอน */
}

.modal-footer .btn.btn-default.btn-big-secondary {
  background-color: #ffc107;  /* สีเหลือง */
  color: #212529;
  border: none;
  padding: 10px 24px;
}

.modal-footer .btn.btn-default.btn-big-secondary:hover {
  background-color: #e0a800;
  color: #ffffff;
}

/* ===============================
    Mobile Navigation Bar
    =============================== */

/* ===============================
    Mobile Navigation Bar
    =============================== */

/* Modern Connected Islands Mobile Navbar */
.my-mobile-navbar {
    position: fixed !important;
    z-index: 10000 !important;
    left: 16px !important;
    right: 16px !important;
    bottom: calc(20px + env(safe-area-inset-bottom)) !important;
    height: 80px !important;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(25px) saturate(180%);
    -webkit-backdrop-filter: blur(25px) saturate(180%);
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    border-radius: 24px !important;
    padding: 12px 16px;
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.15),
        0 4px 16px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    width: calc(100% - 32px) !important;
    align-items: center;
    justify-content: space-evenly;
    transition: none;
    display: none;
}

/* เฉพาะสำหรับ Mobile & Tablet View (น้อยกว่าหรือเท่ากับ 767px) */
@media (max-width: 767px) {
  .my-mobile-navbar {
    display: flex !important; /* บังคับให้แสดงผลบนมือถือ */
  }

  /* เพิ่ม padding bottom ให้ body เพื่อไม่ให้เนื้อหาถูกบัง */
  body {
    padding-bottom: calc(110px + env(safe-area-inset-bottom)) !important; /* 80px navbar + 30px margin + safe area */
  }

  #appDashboard {
    padding-bottom: calc(110px + env(safe-area-inset-bottom)) !important;
  }

  .appAuth {
    padding-bottom: calc(110px + env(safe-area-inset-bottom)) !important;
  }

  .appContent {
    padding-bottom: calc(110px + env(safe-area-inset-bottom)) !important;
  }
}

/* เฉพาะสำหรับ Desktop View (มากกว่าหรือเท่ากับ 768px) - เพื่อความชัดเจน */
@media (min-width: 768px) {
  .my-mobile-navbar {
    display: none !important; /* ยืนยันการซ่อนบน Desktop */
  }
  /* อาจจะเพิ่ม padding-bottom: 0px !important; ให้ body, appDashboard, appAuth ที่นี่ก็ได้ ถ้ามีปัญหาการแสดงผล */
}


/* ส่วนนี้คงเดิม */
.mobile-navbar-content {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0 16px;
  gap: 12px;
  position: relative;
}

.mnc-item {
  flex: 1;
  max-width: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 12px 8px;
  color: #ffc107;
  text-decoration: none;
  border-radius: 18px;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
  overflow: hidden;
}

/* Center item special styling (สั่งงาน) - Round Shape */
.mnc-item-center {
  background: linear-gradient(135deg, #ffc107 0%, #ffb300 100%);
  color: #000000 !important;
  transform: translateY(-20px);
  box-shadow:
    0 12px 40px rgba(255, 193, 7, 0.4),
    0 6px 20px rgba(255, 193, 7, 0.3),
    inset 0 2px 0 rgba(255, 255, 255, 0.5);
  border: 3px solid rgba(255, 255, 255, 0.9);
  width: 60px !important;
  height: 60px !important;
  border-radius: 50% !important;
  max-width: none !important;
  flex: none !important;
  backdrop-filter: blur(15px);
  padding: 0 !important;
  position: relative;
  overflow: visible;
}

.mnc-item-center:hover {
  transform: translateY(-24px) scale(1.1);
  box-shadow:
    0 16px 50px rgba(255, 193, 7, 0.6),
    0 8px 25px rgba(255, 193, 7, 0.4),
    inset 0 3px 0 rgba(255, 255, 255, 0.6);
  color: #000000 !important;
}

.mnc-item-center .mnc-item-icon {
  font-size: 26px !important;
  margin-bottom: 0;
  transform: rotate(0deg);
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  color: #000000 !important;
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.mnc-item-center .mnc-item-text {
  display: none;
}

.mnc-item:hover {
  color: #ffc107;
  text-decoration: none;
}

.mnc-item:focus {
  color: #ffc107;
  text-decoration: none;
  outline: none;
}

/* Active state for current page */
.mnc-item.active {
  color: #ffc107 !important;
  position: relative;
}
.mnc-item.active::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  background: #ffc107;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(255, 193, 7, 0.6);
  z-index: 10;
}

.mnc-item-center.active::before {
  display: none;
}

.mnc-item-icon {
  font-size: 22px;
  margin-bottom: 4px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  z-index: 2;
}

.mnc-item:hover .mnc-item-icon {
  transform: scale(1.1);
}

.mnc-item-center .mnc-item-icon {
  font-size: 24px;
  transform: scale(1.1);
}

.mnc-item-text {
  font-size: 10px;
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
  margin-top: 2px;
  letter-spacing: -0.01em;
  position: relative;
  z-index: 2;
}

/* Light Mode */
html.light .my-mobile-navbar {
  background: rgba(255, 255, 255, 0.95);
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.15),
    0 4px 16px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

html.light .mnc-item {
  color: #ffc107;
}

html.light .mnc-item:hover {
  color: #ffc107;
}

html.light .mnc-item:focus {
  color: #ffc107;
}

html.light .mnc-item.active {
  color: #ffc107 !important;
}

/* Dark Mode */
html.dark .my-mobile-navbar {
  background: rgba(44, 52, 64, 0.95);
  border: 1.5px solid rgba(255, 193, 7, 0.2);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.4),
    0 4px 16px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 193, 7, 0.1);
}

html.dark .mnc-item {
  color: #ffc107;
}

html.dark .mnc-item:hover {
  color: #ffc107;
}

html.dark .mnc-item:focus {
  color: #ffc107;
}

html.dark .mnc-item.active {
  color: #ffc107 !important;
}

/* General Blog Styles - No changes to body/container */

/* Blog Header Section */
.blog-header {
    background-color: #ffffff;
    padding: 40px 0;
    margin-bottom: 30px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.blog-main-content {
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

.blog-main-content h1,
.blog-main-content h2,
.blog-main-content h3 {
    color: #2c3e50;
    margin-bottom: 20px;
}

.blog-main-content p {
    font-size: 1.1em;
    line-height: 1.8;
    color: #555;
}

/* Blog Posts Section */
.blog-posts-section {
    padding-top: 30px;
    padding-bottom: 50px;
}

.blog-posts-section .col-md-6 {
    margin-bottom: 30px;
}

.blog-post-card {
    background-color: #ffffff;
    border-radius: 8px;
    margin-bottom: 0;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%; /* Ensure cards in a row have similar height */
    display: flex;
    flex-direction: column;
}

.blog-post-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}

.post-thumbnail {
    width: 100%;
    height: 220px; /* Fixed height for thumbnails */
    overflow: hidden;
    border-bottom: 1px solid #eee;
}

.post-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Crop images to fit the container */
    display: block;
}

.post-content {
    padding: 25px;
    flex-grow: 1; /* Allows content area to expand */
    display: flex;
    flex-direction: column;
}

.post-content h3 {
    font-size: 1.6em;
    color: #34495e;
    margin-top: 0;
    margin-bottom: 15px;
    line-height: 1.4;
}

.post-excerpt {
    font-size: 0.95em;
    color: #666;
    margin-bottom: 20px;
    flex-grow: 1; /* Allows excerpt to take available space */
}

.blog


/* Single Post General Styles */
.blog-single-post {
    padding-top: 40px;
    padding-bottom: 60px;
}

.post-detail-card {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    overflow: hidden; /* Ensures rounded corners apply to image */
    margin-bottom: 30px;
}

.post-detail-thumbnail {
    width: 100%;
    max-height: 450px; /* Max height for the hero image */
    overflow: hidden;
    margin-bottom: 30px; /* Space between image and content */
}

.post-detail-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures image covers the area without distortion */
    display: block;
}

.post-detail-header {
    padding: 0 40px; /* Padding for title and meta */
    margin-bottom: 30px;
    text-align: center; /* Center align header content */
}

.post-detail-title {
    font-size: 2.8em;
    color: #2c3e50;
    margin-top: 0;
    margin-bottom: 15px;
    line-height: 1.3;
}

/* Optional: Styles for post meta if you add them */
.post-meta {
    font-size: 0.9em;
    color: #888;
}

.post-meta span {
    margin-right: 15px;
}

.post-meta a {
    color: #888;
    text-decoration: none;
}

.post-meta a:hover {
    color: #007bff;
}


.post-detail-content {
    padding: 0 40px 40px; /* Padding for the main content */
    font-size: 1.1em;
    line-height: 1.8;
    color: #333;
}

/* Ensure images, tables, etc., within content are responsive */
.post-detail-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 20px auto; /* Center images within content */
    border-radius: 5px;
}

.post-detail-content table {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.post-detail-content table th,
.post-detail-content table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

.post-detail-content blockquote {
    border-left: 5px solid #007bff;
    padding: 10px 20px;
    margin: 20px 0;
    background-color: #f8f9fa;
    color: #555;
    font-style: italic;
}

.post-detail-content pre {
    background-color: #eee;
    padding: 15px;
    border-radius: 5px;
    overflow-x: auto;
}

/* Post Navigation */
.post-navigation {
    text-align: center;
    margin-top: 30px;
}

.blog-back-button {
    background-color: #6c757d; /* A more neutral color for back button */
    border-color: #6c757d;
    padding: 10px 25px;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.blog-back-button:hover {
    background-color: #5a6268;
    border-color: #545b62;
    color: #fff; /* Ensure text color remains white on hover */
    text-decoration: none;
}


/* Responsive Adjustments */
@media (max-width: 991px) { /* Adjust for md and sm screens */
    .post-detail-header,
    .post-detail-content {
        padding: 0 20px 20px;
    }
    .post-detail-title {
        font-size: 2.2em;
    }
    .post-detail-thumbnail {
        max-height: 350px;
    }
}

@media (max-width: 767px) { /* Adjust for xs screens */
    .post-detail-header,
    .post-detail-content {
        padding: 0 15px 15px;
    }
    .post-detail-title {
        font-size: 1.8em;
    }
    .post-detail-thumbnail {
        max-height: 250px;
        margin-bottom: 20px;
    }
}

/* Additional CSS for tickets-uploader */
.tickets-uploader {
    margin-top: 15px;
    margin-bottom: 15px;
    padding: 0;
    border: none;
    background-color: transparent;
    text-align: left;
    color: #333;
}

/* ลบส่วนนี้ออก เพราะเราต้องการให้ปุ่มเป็นข้อความหลัก */
/*
.tickets-uploader::before {
    content: attr(data-lang-button-attach);
    display: block;
    margin-bottom: 10px;
    font-weight: 600;
    color: #555;
}
*/

.tickets-uploader input[type="file"] {
    display: none; /* ซ่อน input type="file" เริ่มต้น */
}

.tickets-uploader label.upload-button {
    display: inline-block;
    padding: 8px 15px; /* ปรับ padding ให้ดูเป็นปุ่มมาตรฐาน */
    background-color: #ffc107; /* สีปุ่มหลัก (สไตล์เดิม) */
    color: #fff;
    border: none;
    border-radius: 5px; /* มุมโค้งมน */
    cursor: pointer;
    font-weight: 700; /* ตัวหนาขึ้นเพื่อให้ดูเป็นปุ่ม */
    transition: background-color 0.3s ease;
    font-size: 0.9em; /* ขนาดฟอนต์ปกติสำหรับปุ่ม */
    line-height: 1.2; /* ปรับ line-height เพื่อจัดข้อความในปุ่ม */
    text-decoration: none; /* เพื่อแน่ใจว่าไม่มีขีดเส้นใต้ */
}

.tickets-uploader label.upload-button:hover {
    background-color: #e2aa03; /* สีเมื่อ hover (สไตล์เดิม) */
}

/* Styles for error messages if they appear */
.tickets-uploader .error-message {
    color: #dc3545; /* Bootstrap danger color */
    margin-top: 10px;
    font-size: 0.85em;
    text-align: left;
}

.copy-button {
  background-color: #dc3545; /* สีแดงที่คุณต้องการ */
  color: white; /* สีข้อความขาว */
  border: none; /* ไม่มีเส้นขอบ */
  padding: 6px 12px; /* ลดขนาด padding เพื่อให้ปุ่มเล็กลง */
  border-radius: 5px; /* มุมโค้งมน */
  cursor: pointer; /* แสดงเป็น clickable */
  font-size: 13px; /* ลดขนาด font ให้เล็กลง */
  margin-top: 8px; /* ปรับ margin ให้เหมาะสม */
  white-space: nowrap; /* ป้องกันข้อความหักบรรทัด */
  transition: background-color 0.2s ease; /* เพิ่ม transition ให้ดู smooth ขึ้น */
}

.copy-button:hover {
  background-color: #c82333; /* สีแดงเข้มขึ้นเมื่อเมาส์โอเวอร์ (สีมาตรฐานของ Bootstrap danger hover) */
}

/* Modern Compact Toast */
.copy-message {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: linear-gradient(135deg, #212529 0%, #343a40 100%);
  color: white;
  padding: 10px 16px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.2s ease;
  z-index: 10001;
  box-shadow: 0 3px 12px rgba(0,0,0,0.25);
  display: flex;
  align-items: center;
  gap: 8px;
}

.copy-message.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.copy-message::before {
  content: "✓";
  width: 18px;
  height: 18px;
  background: rgba(40, 167, 69, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #28a745;
}


.info-panel-yellow {
  background-color: #ffc107; /* ใช้สีเหลืองทองจาก .btn.btn-primary */
  color: #121d27; /* สีตัวอักษรเป็นสีดำ/เทาเข้ม เพื่อให้อ่านง่ายบนพื้นหลังสีเหลือง */
  padding: 20px;
  border-radius: 10px; /* ทำให้มุมโค้งมนเข้ากับดีไซน์อื่นๆ */
  margin-bottom: 20px; /* เพิ่มระยะห่างด้านล่างกล่อง */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* เพิ่มเงาเล็กน้อยเพื่อให้ดูมีมิติ */
  font-size: 15px; /* ปรับขนาดฟอนต์ให้เหมาะสม */
}

.info-panel-yellow p {
  margin-bottom: 5px;
  font-weight: 600; /* ทำให้ข้อความหลักหนาขึ้น */
}

.info-panel-yellow ul {
  list-style-type: disc; /* ใช้ bullet point มาตรฐาน */
  padding-left: 25px; /* เพิ่มการเยื้องสำหรับรายการ */
  margin-top: 10px; /* เพิ่มระยะห่างด้านบนของรายการ */
}

/* CLEANUP 2026-05-07: removed .qr-code-item / .qr-code-link / .qr-code-icon
 * (dead — sidebar v3 uses .sb-line LINE button instead of QR image) */

/* CSS สำหรับตารางสิทธิประโยชน์ */
.privilege-table-container {
    display: flex;
    justify-content: center; /* จัดให้อยู่กึ่งกลางแนวนอน */
    align-items: center; /* จัดให้อยู่กึ่งกลางแนวตั้ง */
    padding: 20px;
    box-sizing: border-box;
}


/* How It Works Page Styles */
.how-it-works-steps {
    background: #f8f9fa;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 1rem;
}

.section-subtitle {
    font-size: 1.2rem;
    color: #6c757d;
    margin-bottom: 2rem;
}

.step-card {
    background: #fff;
    padding: 2rem 1.5rem;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
}

.step-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.step-icon {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    background: linear-gradient(135deg, #ffc107 0%, #ff9500 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.step-icon i {
    font-size: 2rem;
    color: #fff;
}

.step-number {
    position: absolute;
    top: -15px;
    right: -15px;
    background: #2c3e50;
    color: #fff;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1rem;
    border: 3px solid #fff;
    box-shadow: 0 3px 10px rgba(0,0,0,0.2);
}

.step-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 1rem;
}

.step-description {
    color: #6c757d;
    line-height: 1.6;
}

.features-section {
    background: #f8f9fa;
}

.feature-card {
    background: #fff;
    padding: 2rem 1.5rem;
    border-radius: 15px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
    height: 100%;
}

.feature-card:hover {
    transform: translateY(-3px);
}

.feature-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 1.5rem;
    background: linear-gradient(135deg, #ffc107 0%, #ff9500 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.feature-icon i {
    font-size: 1.5rem;
    color: #fff;
}

.feature-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 1rem;
}

.feature-description {
    color: #6c757d;
    line-height: 1.6;
}

.cta-section {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
    color: #fff;
}

.cta-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.cta-subtitle {
    font-size: 1.2rem;
    opacity: 0.9;
    margin-bottom: 2rem;
}

.cta-buttons .btn {
    padding: 0.8rem 2rem;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 25px;
}

/* Responsive Design for How It Works */
@media (max-width: 768px) {
    .section-title {
        font-size: 2rem;
    }
    
    .cta-title {
        font-size: 2rem;
    }
    
    .step-card, .feature-card {
        margin-bottom: 2rem;
    }
    
    .cta-buttons .btn {
        display: block;
        width: 100%;
        margin-bottom: 1rem;
    }
    
    .cta-buttons .btn.me-3 {
        margin-right: 0 !important;
    }
}

/* About Us Page Styles */
.about-stats-box {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.stats-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.stats-row:last-child {
    margin-bottom: 0;
}

.stat-item {
    text-align: center;
    flex: 1;
}

.stat-number {
    font-size: 2rem;
    font-weight: 700;
    color: #ffc107;
    margin-bottom: 0.5rem;
}

.stat-label {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
}

.milestone-cards {
    margin-top: 2rem;
}

.milestone-card {
    background: #fff;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
    height: 100%;
}

.milestone-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: #ffc107;
}

.milestone-card.featured::before {
    background: linear-gradient(135deg, #ffc107 0%, #ff9500 100%);
    width: 6px;
}

.milestone-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
}

.milestone-card.featured {
    background: linear-gradient(135deg, #fff9e6 0%, #fff4d6 100%);
    border: 2px solid #ffc107;
}

.milestone-year {
    font-size: 1.2rem;
    font-weight: 700;
    color: #ffc107;
    margin-bottom: 0.5rem;
}

.milestone-content h5 {
    font-size: 1rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 0.3rem;
}

.milestone-content p {
    font-size: 0.9rem;
    color: #6c757d;
    margin-bottom: 0;
    line-height: 1.4;
}

.quality-badges {
    margin-top: 2rem;
}

.quality-badge {
    display: flex;
    align-items: center;
    background: #fff;
    padding: 1rem;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
    position: relative;
    overflow: hidden;
}

.quality-badge:hover {
    transform: translateX(5px);
}

.quality-badge.primary {
    border-left: 4px solid #ffc107;
}

.quality-badge.secondary {
    border-left: 4px solid #28a745;
}

.quality-badge.tertiary {
    border-left: 4px solid #17a2b8;
}

.badge-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    flex-shrink: 0;
}

.quality-badge.primary .badge-icon {
    background: rgba(255, 193, 7, 0.1);
    color: #ffc107;
}

.quality-badge.secondary .badge-icon {
    background: rgba(40, 167, 69, 0.1);
    color: #28a745;
}

.quality-badge.tertiary .badge-icon {
    background: rgba(23, 162, 184, 0.1);
    color: #17a2b8;
}

.badge-icon i {
    font-size: 1.2rem;
}

.badge-content h6 {
    font-size: 0.95rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 0.2rem;
}

.badge-content p {
    font-size: 0.8rem;
    color: #6c757d;
    margin-bottom: 0;
    line-height: 1.3;
}

.service-highlight-card {
    background: #fff;
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 3px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
    height: 100%;
}

.service-highlight-card:hover {
    transform: translateY(-5px);
}

.service-icon {
    width: 60px;
    height: 60px;
    background: #ffc107;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}

.service-icon i {
    font-size: 1.5rem;
    color: #fff;
}

.service-highlight-card h4 {
    font-size: 1.3rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 1rem;
    text-align: center;
}

.service-highlight-card p {
    color: #6c757d;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.service-features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.service-features li {
    padding: 5px 0;
    padding-left: 20px;
    position: relative;
    color: #6c757d;
    font-size: 0.9rem;
}

.service-features li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #ffc107;
    font-weight: bold;
}

/* Responsive Design for About Us */
@media (max-width: 768px) {
    .stats-row {
        flex-direction: column;
        gap: 1rem;
    }
    
    .stat-number {
        font-size: 1.5rem;
    }
    
    .milestone-cards {
        margin-top: 1.5rem;
    }
    
    .milestone-card {
        padding: 1rem;
        margin-bottom: 1rem;
    }
    
    .milestone-year {
        font-size: 1.1rem;
    }
    
    .milestone-content h5 {
        font-size: 0.9rem;
    }
    
    .milestone-content p {
        font-size: 0.8rem;
    }
    
    .quality-badges {
        margin-top: 1.5rem;
    }
    
    .quality-badge {
        padding: 0.8rem;
        margin-bottom: 0.8rem;
    }
    
    .badge-icon {
        width: 35px;
        height: 35px;
        margin-right: 0.8rem;
    }
    
    .badge-content h6 {
        font-size: 0.85rem;
    }
    
    .badge-content p {
        font-size: 0.75rem;
    }
    
    .service-highlight-card {
        margin-bottom: 2rem;
    }
}

/* Service Landing Page Styles */
.service-landing-hero {
    background: linear-gradient(135deg, #ffbf00 0%, #ff9500 100%);
    padding: 100px 0 80px;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.service-landing-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100"><path fill="rgba(255,255,255,0.1)" d="M0,50 C200,80 400,20 600,50 C800,80 1000,20 1000,50 L1000,100 L0,100 Z"/></svg>') bottom center/cover no-repeat;
}

.hero-content {
    position: relative;
    z-index: 2;
}

.service-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.2);
    padding: 8px 20px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px;
    backdrop-filter: blur(10px);
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 25px;
}

.hero-description {
    font-size: 1.3rem;
    line-height: 1.6;
    margin-bottom: 40px;
    opacity: 0.95;
}

.hero-stats {
    display: flex;
    gap: 40px;
    margin-bottom: 40px;
}

.stat-item {
    text-align: center;
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 700;
    display: block;
    color: #fff;
}

.stat-label {
    font-size: 0.9rem;
    opacity: 0.9;
    margin-top: 5px;
}

.hero-buttons {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.hero-buttons .btn {
    padding: 15px 30px;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 25px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
}

.btn-outline-primary {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: #fff;
}

.btn-outline-primary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff;
}

.hero-image {
    position: relative;
    z-index: 2;
}

.platform-showcase {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 40px;
    text-align: center;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.platform-icon {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 30px;
    font-size: 3rem;
    color: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.growth-animation {
    margin-top: 30px;
}

.growth-bar {
    height: 8px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    margin-bottom: 15px;
}

.growth-bar::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 80%;
    background: linear-gradient(90deg, #ffc107, #fff);
    border-radius: 10px;
    animation: growthProgress 2s ease-in-out infinite alternate;
}

@keyframes growthProgress {
    0% { width: 60%; }
    100% { width: 90%; }
}

.growth-numbers {
    font-size: 1.2rem;
    font-weight: 600;
}

.number.growing {
    animation: numberGrow 2s ease-in-out infinite;
}

@keyframes numberGrow {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); color: #ffc107; }
    100% { transform: scale(1); }
}

/* Section Styles */
.service-features,
.how-it-works,
.services-preview,
.service-faq,
.service-cta {
    padding: 80px 0;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 600;
    margin-bottom: 20px;
    color: #333;
    text-align: center;
}

.section-subtitle {
    font-size: 1.2rem;
    color: #666;
    text-align: center;
    margin-bottom: 50px;
    line-height: 1.6;
}

/* Feature Cards */
.feature-card {
    background: #fff;
    padding: 40px 30px;
    border-radius: 15px;
    text-align: center;
    height: 100%;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #f0f0f0;
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.feature-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #ffbf00 0%, #ff9500 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    font-size: 2rem;
    color: #fff;
    box-shadow: 0 10px 25px rgba(255, 191, 0, 0.3);
}

.feature-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 15px;
    color: #333;
}

.feature-description {
    color: #666;
    line-height: 1.6;
    font-size: 1rem;
}

/* Step Cards */
.step-card {
    text-align: center;
    position: relative;
    padding: 30px 20px;
}

.step-number {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #ffbf00 0%, #ff9500 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    font-size: 1.8rem;
    font-weight: 700;
    color: #fff;
    box-shadow: 0 8px 20px rgba(255, 191, 0, 0.3);
}

.step-title {
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 15px;
    color: #333;
}

.step-description {
    color: #666;
    line-height: 1.6;
    font-size: 1rem;
}

/* Services Preview */
.services-table-wrapper {
    background: #f8f9fa;
    border-radius: 15px;
    padding: 50px 40px;
    text-align: center;
}

.services-redirect-notice {
    max-width: 600px;
    margin: 0 auto;
}

.redirect-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.redirect-content i {
    font-size: 4rem;
    margin-bottom: 10px;
}

.redirect-text h4 {
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 10px;
    color: #333;
}

.redirect-text p {
    color: #666;
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 0;
}

/* FAQ Styles */
.faq-accordion {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    background: #fff;
    border-radius: 10px;
    margin-bottom: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.faq-question {
    padding: 25px 30px;
    cursor: pointer;
    display: flex;
    justify-content: between;
    align-items: center;
    background: linear-gradient(135deg, #f8f9fa 0%, #fff 100%);
    transition: background 0.3s ease;
}

.faq-question:hover {
    background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
}

.faq-question h4 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
    color: #333;
    flex: 1;
    text-align: left;
}

.faq-question i {
    font-size: 1.5rem;
    color: #ffc107;
    transition: transform 0.3s ease;
}

.faq-item.active .faq-question i {
    transform: rotate(180deg);
}

.faq-answer {
    padding: 0 30px;
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-item.active .faq-answer {
    padding: 20px 30px 30px;
    max-height: 200px;
}

.faq-answer p {
    margin: 0;
    color: #666;
    line-height: 1.6;
    font-size: 1rem;
}

/* CTA Section */
.service-cta {
    background: linear-gradient(135deg, #121d27 0%, #15222e 100%);
    color: #fff;
}

.cta-content {
    padding: 60px 40px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.cta-title {
    font-size: 2.8rem;
    font-weight: 700;
    margin-bottom: 20px;
    color: #fff;
}

.cta-description {
    font-size: 1.3rem;
    line-height: 1.6;
    margin-bottom: 40px;
    opacity: 0.9;
}

.cta-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.cta-guarantees {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}

.guarantee-item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #ffc107;
    font-size: 1rem;
    font-weight: 600;
}

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

/* Mobile Responsive */
@media (max-width: 991.98px) {
    .hero-title {
        font-size: 2.8rem;
    }
    
    .hero-description {
        font-size: 1.1rem;
    }
    
    .hero-stats {
        gap: 30px;
    }
    
    .stat-number {
        font-size: 2rem;
    }
    
    .section-title {
        font-size: 2rem;
    }
    
    .cta-title {
        font-size: 2.2rem;
    }
}

@media (max-width: 767.98px) {
    .service-landing-hero {
        padding: 80px 0 60px;
    }
    
    .hero-title {
        font-size: 2.2rem;
    }
    
    .hero-description {
        font-size: 1rem;
    }
    
    .hero-stats {
        flex-direction: column;
        gap: 20px;
        align-items: center;
    }
    
    .hero-stats .stat-item {
        display: flex;
        align-items: center;
        gap: 15px;
    }
    
    .stat-number {
        font-size: 1.8rem;
        margin-bottom: 0;
    }
    
    .hero-buttons {
        justify-content: center;
        flex-direction: column;
        align-items: center;
    }
    
    .hero-buttons .btn {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }
    
    .section-title {
        font-size: 1.8rem;
    }
    
    .section-subtitle {
        font-size: 1rem;
    }
    
    .feature-card,
    .step-card {
        margin-bottom: 30px;
    }
    
    .platform-showcase {
        padding: 30px 20px;
    }
    
    .platform-icon {
        width: 80px;
        height: 80px;
        font-size: 2.5rem;
    }
    
    .services-table-wrapper {
        padding: 40px 20px;
    }
    
    .redirect-content {
        gap: 15px;
    }
    
    .redirect-content i {
        font-size: 3rem;
    }
    
    .redirect-text h4 {
        font-size: 1.5rem;
    }
    
    .redirect-text p {
        font-size: 1rem;
    }
    
    .faq-question {
        padding: 20px;
    }
    
    .faq-question h4 {
        font-size: 1.1rem;
    }
    
    .faq-answer {
        padding: 0 20px;
    }
    
    .faq-item.active .faq-answer {
        padding: 15px 20px 25px;
    }
    
    .cta-content {
        padding: 40px 20px;
    }
    
    .cta-title {
        font-size: 1.8rem;
    }
    
    .cta-description {
        font-size: 1.1rem;
    }
    
    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .cta-buttons .btn {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }
    
    .cta-guarantees {
        flex-direction: column;
        gap: 20px;
    }
    
    .guarantee-item {
        justify-content: center;
    }
}

.privilege-table {
    width: 100%;
    max-width: 1000px; /* จำกัดความกว้างสูงสุดของตาราง */
    border-collapse: collapse;
    margin: 20px auto; /* จัดกึ่งกลางตาราง */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* เพิ่มเงาให้ดูมีมิติ */
    border-radius: 8px; /* ขอบโค้งมน */
    overflow: hidden; /* ทำให้เงาและขอบโค้งมนทำงานได้ดีกับ border-collapse */
}

.privilege-table th,
.privilege-table td {
    padding: 15px;
    text-align: center;
    border-bottom: 1px solid #e0e0e0;
    transition: background-color 0.3s ease;
}

.privilege-table th {
    background-color: #00B14D; /* สีเขียวสำหรับ Header */
    color: white;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.privilege-table tbody tr:nth-child(even) {
    background-color: #f8f8f8; /* แถวสลับสี */
}

.privilege-table tbody tr:hover {
    background-color: #e6ffe6; /* สีอ่อนลงเมื่อ hover */
}

.privilege-table td strong {
    color: #00B14D; /* สีเขียวสำหรับตัวเลขสำคัญ */
}

.rank-new, .rank-gold {
    background-color: #e0f2f7; /* สีพื้นหลังสำหรับ NEW/GOLD */
}

.rank-platinum, .rank-vip {
    background-color: #fff9e6; /* สีพื้นหลังสำหรับ PLATINUM/VIP */
}

/* เพิ่มการตอบสนองสำหรับหน้าจอขนาดเล็ก */
@media (max-width: 768px) {
    .privilege-table {
        display: block;
        overflow-x: auto; /* ทำให้ตารางเลื่อนได้แนวนอนหากเนื้อหาเกิน */
        white-space: nowrap; /* ป้องกันการขึ้นบรรทัดใหม่ */
    }
    .privilege-table thead, .privilege-table tbody, .privilege-table th, .privilege-table td, .privilege-table tr {
        display: block; /* ทำให้แต่ละส่วนเป็นบล็อก */
    }
    .privilege-table th {
        text-align: left; /* จัดชิดซ้ายสำหรับหัวข้อในมือถือ */
        border-bottom: 0;
        padding-bottom: 5px;
    }
    .privilege-table td {
        border-bottom: 1px solid #e0e0e0;
        text-align: right; /* จัดชิดขวาสำหรับข้อมูลในมือถือ */
        position: relative;
        padding-left: 50%; /* พื้นที่สำหรับ pseudo-element */
    }
    .privilege-table td:before {
        content: attr(data-label); /* ดึงค่าจาก data-label มาแสดง */
        position: absolute;
        left: 15px;
        width: calc(50% - 30px);
        text-align: left;
        font-weight: bold;
        color: #555;
    }
    .privilege-table tr {
        margin-bottom: 15px;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        overflow: hidden;
    }
}


/* Custom styles for points table - Re-designed */
.custom-points-table {
    border-collapse: separate; /* สำคัญเพื่อให้ border-radius ทำงาน */
    border-spacing: 0; /* ลบช่องว่างระหว่างเซลล์ */
    border-radius: 12px; /* เพิ่มความโค้งมนของขอบตาราง */
    overflow: hidden; /* สำคัญเพื่อให้ border-radius แสดงผลถูกต้องบนเนื้อหา */
    box-shadow: 0 4px 8px rgba(0,0,0,0.08); /* เงาที่อ่อนลงสำหรับ light mode */
    background-color: #ffffff; /* กำหนดพื้นหลังตารางให้เป็นสีขาว (ชัดเจนในโหมดสว่าง) */
    width: 100%; /* ให้ตารางกว้างเต็มพื้นที่ */
    margin-bottom: 1rem; /* เพิ่มระยะห่างด้านล่าง */
}

/* ส่วนหัวตาราง (<thead>) */
.custom-points-table thead {
    background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%); /* Gradient สีเหลืองเข้ากับธีม */
    color: #212529; /* สีข้อความเข้ม */
    font-weight: 600; /* ตัวหนาขึ้นเล็กน้อย */
}

.custom-points-table thead th {
    padding: 18px 15px; /* เพิ่ม padding ให้เซลล์ส่วนหัว */
    border-bottom: none; /* ลบเส้นขอบด้านล่างของเซลล์ส่วนหัว */
}

/* กำหนดขอบโค้งมนให้กับเซลล์มุมบนของส่วนหัวตาราง */
.custom-points-table thead tr:first-child th:first-child {
    border-top-left-radius: 12px;
}
.custom-points-table thead tr:first-child th:last-child {
    border-top-right-radius: 12px;
}


/* ส่วนเนื้อหาตาราง (<tbody>) */
.custom-points-table tbody td {
    padding: 14px 15px; /* กำหนด padding ให้เซลล์เนื้อหา */
    color: #495057; /* สีข้อความเทาเข้มเพื่อให้อ่านง่ายขึ้นในโหมดสว่าง */
    border-color: #e9ecef; /* สีเส้นขอบที่อ่อนลงเพื่อความนุ่มนวล */
    font-weight: 500;
}

/* แถบสีสลับของตาราง (.table-striped) */
.custom-points-table.table-striped tbody tr:nth-of-type(odd) {
    background-color: #f8f9fa; /* สีเทาอ่อนมากสำหรับแถวคี่ */
}
.custom-points-table.table-striped tbody tr:nth-of-type(even) {
    background-color: #ffffff; /* สีขาวสำหรับแถวคู่ */
}

/* เน้นคอลัมน์แรก */
.custom-points-table tbody td:first-child {
    font-weight: 600;
    color: #212529;
    background-color: rgba(255, 193, 7, 0.08);
}

/* ลบเอฟเฟกต์ Hover (.table-hover) */
/* เนื่องจากคุณได้ลบคลาส table-hover ออกจาก HTML แล้ว ส่วนนี้จึงอาจไม่จำเป็น แต่ใส่ไว้เพื่อความมั่นใจ */
.custom-points-table tbody tr:hover {
    background-color: inherit !important; /* ยกเลิกการเปลี่ยนสีเมื่อเมาส์ชี้ */
    cursor: default; /* เปลี่ยนเคอร์เซอร์กลับเป็นปกติ */
}

/* กำหนดขอบโค้งมนให้กับเซลล์มุมล่างของตาราง */
.custom-points-table tbody tr:last-child td:first-child {
    border-bottom-left-radius: 12px;
}
.custom-points-table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 12px;
}
/* ลบเส้นขอบด้านล่างสุดของตาราง เพื่อให้ขอบโค้งมนสมบูรณ์ */
.custom-points-table tbody tr:last-child td {
    border-bottom: none;
}

/* ปรับเส้นขอบสำหรับ .table-bordered ให้เข้ากับดีไซน์ใหม่ */
.custom-points-table.table-bordered th,
.custom-points-table.table-bordered td {
    border: 1px solid #dee2e6; /* ใช้สีเส้นขอบที่อ่อนลง */
}

/* Dark mode support for points table */
.dark .custom-points-table {
    background-color: #1a2332;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

html.dark .custom-points-table thead,
body.dark .custom-points-table thead,
.dark .custom-points-table thead {
    background: linear-gradient(135deg, #b8860b 0%, #8b6914 100%);
    color: #ffffff;
}

html.dark .custom-points-table tbody td,
body.dark .custom-points-table tbody td,
.dark .custom-points-table tbody td {
    color: #e9ecef;
    border-color: #2c3e50;
}

html.dark .custom-points-table tbody td:first-child,
body.dark .custom-points-table tbody td:first-child,
.dark .custom-points-table tbody td:first-child {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.05);
}

html.dark .custom-points-table.table-striped tbody tr:nth-of-type(odd),
body.dark .custom-points-table.table-striped tbody tr:nth-of-type(odd),
.dark .custom-points-table.table-striped tbody tr:nth-of-type(odd) {
    background-color: #212a3a;
}

html.dark .custom-points-table.table-striped tbody tr:nth-of-type(even),
body.dark .custom-points-table.table-striped tbody tr:nth-of-type(even),
.dark .custom-points-table.table-striped tbody tr:nth-of-type(even) {
    background-color: #1a2332;
}

html.dark .custom-points-table.table-bordered th,
html.dark .custom-points-table.table-bordered td,
body.dark .custom-points-table.table-bordered th,
body.dark .custom-points-table.table-bordered td,
.dark .custom-points-table.table-bordered th,
.dark .custom-points-table.table-bordered td {
    border-color: #2c3e50;
}

/* Status description styles */
.status-description {
    background-color: #fffef5;
    border-left: 4px solid #ffc107;
    padding: 1.25rem;
    border-radius: 8px;
    margin-top: 1.5rem;
}

.status-description p {
    margin-bottom: 0.75rem;
    color: #495057;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* ============================================ */
/* Modern Affiliate Withdrawal Table Styles */
/* ============================================ */

/* Card Container - using existing .card class */

/* Table Header Section - Dark First */
.table-header {
    background: #15222E;
    padding: 32px;
    border-bottom: 1px solid #183441;
    border-radius: 20px 20px 0 0; /* มน Top เท่านั้น */
}

.table-header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.table-title {
    display: flex;
    align-items: center;
    gap: 16px;
}

.table-title i {
    font-size: 24px;
    color: #ffc107;
    background: rgba(255, 193, 7, 0.1);
    padding: 12px;
    border-radius: 12px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.table-title h5 {
    color: #212529;
    margin: 0;
    font-size: 20px;
    font-weight: 600;
}

.stats-badge {
    background: rgba(255, 193, 7, 0.2);
    color: #ffc107;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
}

/* Table Responsive Wrapper */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Custom Affiliate Table - Dark First */
.custom-affiliate-table {
    width: 100%;
    border-collapse: collapse;
    background: #15222E;
    border-radius: 0 0 20px 20px; /* มน Bottom เท่านั้น */
    overflow: hidden; /* ป้องกัน content ล้น */
}

/* Table Header - Dark First */
.custom-affiliate-table thead {
    background: #121D27;
    border-bottom: 1px solid #183441;
}

.custom-affiliate-table thead th {
    padding: 20px 32px;
    text-align: left;
    font-weight: 600;
    color: #fff;
    font-size: 14px;
    white-space: nowrap;
    vertical-align: middle;
}

.custom-affiliate-table thead th i {
    margin-right: 8px;
    font-size: 16px;
    color: #ffc107;
    vertical-align: middle;
}

/* Table Body - Dark First */
.custom-affiliate-table tbody tr {
    border-bottom: 1px solid #183441;
    transition: background-color 0.2s ease;
}

.custom-affiliate-table tbody tr:hover {
    background-color: #0C141B;
}

.custom-affiliate-table tbody tr:last-child {
    border-bottom: none;
}

.custom-affiliate-table tbody td {
    padding: 20px 32px;
    font-size: 14px;
    color: #fff;
    vertical-align: middle;
}

/* TD Content Wrapper */
.td-content {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Date Column */
.date-text {
    color: #495057;
    font-weight: 500;
    font-size: 14px;
}

/* Amount Column */
.amount-text {
    color: #121d27;
    font-weight: 600;
    font-size: 16px;
}

/* Status Badge */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.status-badge i {
    font-size: 14px;
}

/* Rejected Status */
.badge-rejected {
    background: rgba(220, 53, 69, 0.1);
    color: #dc3545;
    border: 1px solid rgba(220, 53, 69, 0.2);
}

.status-rejected {
    background: rgba(220, 53, 69, 0.02);
}

/* Approved Status */
.badge-approved {
    background: rgba(40, 167, 69, 0.1);
    color: #28a745;
    border: 1px solid rgba(40, 167, 69, 0.2);
}

.status-approved {
    background: rgba(40, 167, 69, 0.02);
}

/* Pending Status */
.badge-pending {
    background: rgba(255, 193, 7, 0.1);
    color: #ffc107;
    border: 1px solid rgba(255, 193, 7, 0.2);
}

.status-pending {
    background: rgba(255, 193, 7, 0.02);
}

/* Dark Mode Support - using existing .card class (ไม่ต้องใช้แล้วเพราะ default คือ dark) */

.dark .table-title h5 {
    color: #ffffff;
}

.dark .custom-affiliate-table {
    background: #15222E;
}

.dark .custom-affiliate-table thead {
    background: #121D27;
    border-bottom-color: #183441;
}

.dark .custom-affiliate-table thead th {
    color: #fff;
}

.dark .custom-affiliate-table thead th i {
    color: #ffc107;
}

.dark .custom-affiliate-table tbody tr {
    border-bottom-color: #183441;
}

.dark .custom-affiliate-table tbody tr:hover {
    background-color: #0C141B;
}

.dark .custom-affiliate-table tbody td {
    color: #fff;
}

.dark .date-text {
    color: #fff;
}

.dark .amount-text {
    color: #ffc107;
}

/* Dark Mode Status Badges */
.dark .badge-rejected {
    background: rgba(220, 53, 69, 0.15);
    color: #dc3545;
    border-color: rgba(220, 53, 69, 0.3);
}

/* เฉพาะ status badge เท่านั้น ไม่ใช่ table row */
.dark .badge-rejected.status-rejected,
.dark .status-badge.badge-rejected {
    background: rgba(220, 53, 69, 0.05);
}

/* ลบสีพื้นหลังออกจาก table row ทั้งหมด */
.dark .custom-affiliate-table tr.status-rejected,
.dark .custom-affiliate-table tr.status-approved,
.dark .custom-affiliate-table tr.status-pending {
    background: transparent !important;
}

.custom-affiliate-table tr.status-rejected,
.custom-affiliate-table tr.status-approved,
.custom-affiliate-table tr.status-pending {
    background: transparent !important;
}

/* Override สีขอบของ .table td ให้เป็นสีอ่อนใน light mode */
.custom-affiliate-table.table td {
    border-color: #f1f3f4 !important;
}

/* และสีเข้มใน dark mode */
.dark .custom-affiliate-table.table td {
    border-color: #183441 !important;
}

.dark .badge-approved {
    background: rgba(40, 167, 69, 0.15);
    color: #5dd879;
    border-color: rgba(40, 167, 69, 0.3);
}

.dark .status-approved {
    background: rgba(40, 167, 69, 0.05);
}

.dark .badge-pending {
    background: rgba(255, 193, 7, 0.15);
    color: #ffc107;
    border-color: rgba(255, 193, 7, 0.3);
}

.dark .status-pending {
    background: rgba(255, 193, 7, 0.05);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .table-header {
        padding: 16px 20px;
    }

    .table-header-content {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }

    .table-title i {
        font-size: 20px;
    }

    .table-title h5 {
        font-size: 16px;
    }

    /* Transform table to card layout on mobile */
    .custom-affiliate-table thead {
        display: none;
    }

    .custom-affiliate-table tbody tr {
        display: block;
        margin-bottom: 16px;
        background: #f8f9fa;
        border-radius: 12px;
        padding: 16px;
        border: 1px solid #f1f3f4;
    }

    .custom-affiliate-table tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        border: none;
    }

    .custom-affiliate-table tbody td:before {
        content: attr(data-label);
        font-weight: 600;
        color: #6c757d;
        font-size: 13px;
    }

    .custom-affiliate-table tbody td:not(:last-child) {
        border-bottom: 1px solid #f1f3f4;
        padding-bottom: 12px;
        margin-bottom: 12px;
    }

    /* Dark mode mobile adjustments */
    .dark .custom-affiliate-table tbody tr {
        background: #15222E;
        border-color: #183441;
    }

    .dark .custom-affiliate-table tbody td {
        border-bottom-color: #183441;
    }

    .dark .custom-affiliate-table tbody td:before {
        color: #fff;
    }
}

.status-description p:last-child {
    margin-bottom: 0;
}

.status-description strong {
    color: #212529;
    font-weight: 600;
}

/* Dark mode for status description */
.dark .status-description {
    background-color: #15222E;
    border-left-color: #ffc107;
}

html.dark .status-description p,
body.dark .status-description p,
.dark .status-description p {
    color: #e9ecef;
}

html.dark .status-description strong,
body.dark .status-description strong,
.dark .status-description strong {
    color: #ffffff;
}

/* CLEANUP 2026-05-07: removed entire .affiliate-* block (~315 lines, 40+ rules)
 * — dead, current affliliates.twig uses .aff-* (without "iate" suffix) classes.
 * Verified: zero markup hits and zero JS dynamic-string interpolation. */

/* กำหนดขนาดพื้นฐานสำหรับ h3 (อาจจะเป็นขนาดสำหรับมือถือหรือขนาดทั่วไป) */
/* ------------------------------------------------------------------
   *** สไตล์เริ่มต้น - ใช้สำหรับหน้าจอขนาดเล็ก (Mobile) เป็นหลัก ***
   ------------------------------------------------------------------ */
h3 .nbox-value {
    font-size: 1em; /* ตัวอย่าง: ขนาดปกติสำหรับมือถือ หรือขนาดที่คุณต้องการให้ใหญ่กว่าบนมือถือ */
    /* ... สไตล์อื่นๆ ที่ใช้กับทุกขนาดหน้าจอ ... */
}

/* ------------------------------------------------------------------
   *** สไตล์สำหรับหน้าจอขนาดใหญ่ (PC/Desktop) ***
   *** สไตล์นี้จะถูกนำมาใช้เมื่อหน้าจอมีขนาดใหญ่กว่า 991px ***
   ------------------------------------------------------------------ */
@media (min-width: 992px) { /* หรือค่า breakpoint ที่เหมาะสมกับ PC ของคุณ เช่น 1200px */
    h3 .nbox-value {
        font-size: 0.65em; /* ตัวอย่าง: ขนาดที่เล็กลงสำหรับ PC */
    }
}


/* Pulse Yellow Animation for Unread Messages */
@keyframes pulse-yellow {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.7);
  }
  70% {
    transform: scale(1.02);
    box-shadow: 0 0 0 10px rgba(255, 193, 7, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 193, 7, 0);
  }
}

/* CLEANUP 2026-05-07: removed all .comparison-card-* / .comparison-title /
 * .comparison-divider / .comparison-item rules (~75 lines) — dead, replaced by
 * .signin-comparison-section structure used in current signin.twig SEO body. */

/* FAQ Cards */
.faq-card {
	background: #fff;
	border-radius: 15px;
	padding: 25px;
	box-shadow: 0 5px 15px rgba(0,0,0,0.1);
	height: 100%;
	transition: transform 0.3s ease;
}

.faq-card:hover {
	transform: translateY(-2px);
}

.faq-question {
	color: #333;
	font-size: 18px;
	margin-bottom: 15px;
}

.faq-question i {
	color: #007bff;
	margin-right: 10px;
}

.faq-answer {
	color: #6c757d;
	line-height: 1.6;
}

/* CLEANUP 2026-05-07: removed .blog-card + variants + .keywords-section/.keywords-tags
 * + .keyword-tag (~110 lines) — dead, blog.twig uses .blog-post-card instead. */

/* CLEANUP 2026-05-07: removed .keyword-tag modifiers + .icon-primary/success/warning
 * (dead — never used; new design uses var(--ring-*)) */

/* SEO Sections Styles */
.seo-section {
	padding: 60px 0;
}

.seo-section.competitor-comparison {
	background: #f8f9fa;
}

.seo-section.faq {
	background: #f8f9fa;
}

.seo-section.blog-news {
	background: linear-gradient(135deg, #343a40 0%, #495057 100%);
}

/* Membership Tiers Modal Styling */
.membership-tiers {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.membership-tier {
	border-radius: 12px;
	padding: 20px;
	border: 1px solid #e9ecef;
	background: var(--tier-bg, #ffffff);
	position: relative;
	overflow: visible;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.membership-tier::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: var(--tier-color, #6c757d);
}

.membership-tier.new {
	--tier-color: #6c757d;
	--tier-bg: #f8f9fa;
}

.membership-tier.gold {
	--tier-color: #ffc107;
	--tier-bg: #fffef5;
}

.membership-tier.platinum {
	--tier-color: #17a2b8;
	--tier-bg: #f0fbff;
}

.membership-tier.vip {
	--tier-color: #dc3545;
	--tier-bg: #fff5f5;
}

.tier-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 15px;
}

.tier-badge {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--tier-color);
}

.tier-badge i {
	font-size: 24px;
}

.tier-name {
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 1px;
}

.tier-requirement {
	font-size: 14px;
	color: #6c757d;
	font-weight: 600;
	background: rgba(0, 0, 0, 0.05);
	padding: 4px 12px;
	border-radius: 20px;
}

.tier-benefits {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.benefit-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 0;
	font-size: 14px;
}

.benefit-item.available {
	color: #212529;
}

.benefit-item.available i {
	color: #28a745;
	background: rgba(40, 167, 69, 0.2);
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-size: 12px;
}

.benefit-item.unavailable {
	color: #adb5bd;
}

.benefit-item.unavailable i {
	color: #dc3545;
	background: rgba(220, 53, 69, 0.2);
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-size: 12px;
}

.membership-info {
	background: #fffef5;
	border: 1px solid #ffc107;
	border-radius: 8px;
	padding: 20px;
}

.info-card h6 {
	color: #856404;
	margin-bottom: 15px;
	font-weight: 600;
}

.info-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.info-list li {
	margin-bottom: 8px;
	color: #333333;
	font-size: 14px;
	line-height: 1.5;
}

.info-list li strong {
	color: #856404;
}

/* Light theme support */
html.light .membership-tier {
	background: var(--tier-bg-light, #f8f9fa);
	border: 1px solid #e9ecef;
}

html.light .membership-tier.new {
	--tier-bg-light: #f8f9fa;
}

html.light .membership-tier.gold {
	--tier-bg-light: #fff9e6;
}

html.light .membership-tier.platinum {
	--tier-bg-light: #e6f7ff;
}

html.light .membership-tier.vip {
	--tier-bg-light: #fff0f0;
}

html.light .tier-requirement {
	background: rgba(0, 0, 0, 0.1);
	color: #6c757d;
}

html.light .benefit-item.available {
	color: #333;
}

html.light .benefit-item.unavailable {
	color: #999;
}

html.light .membership-info {
	background: rgba(255, 193, 7, 0.1);
	border: 1px solid rgba(255, 193, 7, 0.3);
}

html.light .info-card h6 {
	color: #856404;
}

html.light .info-list li {
	color: #333;
}

html.light .info-list li strong {
	color: #856404;
}

/* Responsive design */
@media (min-width: 768px) {
	.membership-tiers {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}
}

@media (min-width: 1200px) {
	.membership-tiers {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 20px;
	}
	
	.membership-tier {
		flex-direction: column;
	}
}

/* Dark mode support */
.dark .membership-tier {
	background: var(--tier-bg-dark, #1a2332);
	border: 2px solid transparent;
	box-shadow: none;
}

html.dark .membership-tier.new,
body.dark .membership-tier.new,
.dark .membership-tier.new {
	--tier-bg-dark: #1a2332;
}

html.dark .membership-tier.gold,
body.dark .membership-tier.gold,
.dark .membership-tier.gold {
	--tier-bg-dark: #2a2317;
}

html.dark .membership-tier.platinum,
body.dark .membership-tier.platinum,
.dark .membership-tier.platinum {
	--tier-bg-dark: #172a2e;
}

html.dark .membership-tier.vip,
body.dark .membership-tier.vip,
.dark .membership-tier.vip {
	--tier-bg-dark: #2e1719;
}

html.dark .tier-requirement,
body.dark .tier-requirement,
.dark .tier-requirement {
	background: rgba(255, 255, 255, 0.1);
	color: #8b98b8;
}

html.dark .benefit-item.available,
body.dark .benefit-item.available,
.dark .benefit-item.available {
	color: #fff;
}

html.dark .benefit-item.unavailable,
body.dark .benefit-item.unavailable,
.dark .benefit-item.unavailable {
	color: #6c757d;
}

.dark .membership-info {
	background: rgba(255, 193, 7, 0.1);
	border: 1px solid rgba(255, 193, 7, 0.3);
}

html.dark .info-card h6,
body.dark .info-card h6,
.dark .info-card h6 {
	color: #ffc107;
}

/* ============================================ */
/* QR PAYMENT MODAL - LIKESTER GRADIENT FRAME */
/* ============================================ */

/* Override default modal for QR Payment */
.modal#qrModal .modal-content,
.modal .modal-content:has(#qr-code-image) {
    background: #ffffff;
    border: none;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    max-width: 460px;
    margin: 0 auto;
    position: relative;
}

/* Dark mode modal */
html.dark .modal#qrModal .modal-content,
html.dark .modal .modal-content:has(#qr-code-image) {
    background: #121D27;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}

/* Modal header - clean Likester style */
.modal#qrModal .modal-header,
.modal .modal-content:has(#qr-code-image) .modal-header {
    background: #ffffff;
    padding: 20px 24px;
    border: none;
    border-bottom: 1px solid #e5e7eb;
    position: relative;
    color: #3d4249;
}

html.dark .modal#qrModal .modal-header,
html.dark .modal .modal-content:has(#qr-code-image) .modal-header {
    background: #121D27;
    border-bottom: 1px solid #183441;
    color: #e9ecef;
}

/* Close button styling */
.modal#qrModal .close,
.modal .modal-content:has(#qr-code-image) .close {
    color: #999;
    opacity: 1;
    font-size: 24px;
    font-weight: 300;
    transition: all 0.2s ease;
    position: absolute;
    right: 20px;
    top: 20px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: transparent;
}

.modal#qrModal .close:hover,
.modal .modal-content:has(#qr-code-image) .close:hover {
    background: #f7f8f9;
    color: #3d4249;
}

html.dark .modal#qrModal .close:hover,
html.dark .modal .modal-content:has(#qr-code-image) .close:hover {
    background: #183441;
    color: #e9ecef;
}

/* QR Modal Body */
.modal#qrModal .modal-body,
.modal .modal-content:has(#qr-code-image) .modal-body {
    padding: 20px;
    text-align: center;
    background: #ffffff;
}

html.dark .modal#qrModal .modal-body,
html.dark .modal .modal-content:has(#qr-code-image) .modal-body {
    background: #121D27;
}

/* QR Code Container with Likester Gradient Frame */
.qr-code-container {
    position: relative;
    display: inline-block;
    padding: 16px;
    background: linear-gradient(135deg, #ffc107 0%, #ffbf00 100%);
    border-radius: 16px;
    margin: 0 auto 15px;
    box-shadow: 0 4px 15px rgba(255, 193, 7, 0.3);
}

html.dark .qr-code-container {
    background: linear-gradient(135deg, #ffc107 0%, #ffbf00 100%);
    box-shadow: 0 4px 15px rgba(255, 193, 7, 0.2);
}

/* Inner QR frame */
.qr-code-container::before {
    content: '';
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    bottom: 12px;
    background: #ffffff;
    border-radius: 12px;
    z-index: 1;
}

html.dark .qr-code-container::before {
    background: #ffffff;
}

/* QR Code Image Styling */
#qr-code-image,
#qrCodeImage,
.modal img[src*="data:image"][alt=""] {
    width: 240px !important;
    height: 240px !important;
    display: block;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    border-radius: 8px;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

/* Payment Info Section - Likester style */
.qr-payment-info {
    padding: 0;
    margin: 20px 0;
    text-align: center;
}

/* Amount Display with Likester colors */
.qr-amount-display {
    font-size: 36px;
    font-weight: 700;
    color: #ffc107;
    margin: 8px 0;
    font-family: 'Sarabun', -apple-system, BlinkMacSystemFont, sans-serif;
    letter-spacing: -0.5px;
    text-shadow: 0 2px 4px rgba(255, 193, 7, 0.2);
}

html.dark .qr-amount-display {
    color: #ffc107;
    text-shadow: 0 2px 4px rgba(255, 193, 7, 0.3);
}

.qr-amount-label {
    font-size: 14px;
    color: #3d4249;
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

html.dark .qr-amount-label {
    color: #e9ecef;
}

/* Payment status */
.qr-status {
    background: rgba(255, 193, 7, 0.1);
    border: 1px solid rgba(255, 193, 7, 0.3);
    border-radius: 8px;
    padding: 12px 16px;
    margin: 20px 0;
    color: #3d4249;
    font-size: 14px;
    font-weight: 500;
}

html.dark .qr-status {
    background: rgba(255, 193, 7, 0.15);
    border: 1px solid rgba(255, 193, 7, 0.25);
    color: #e9ecef;
}

/* Instructions - clean Likester style */
.qr-instructions {
    margin: 12px 0;
    padding: 12px;
    background: #f7f8f9;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

html.dark .qr-instructions {
    background: #0C141B;
    border: 1px solid #183441;
}

.qr-instructions-title {
    color: #ffc107;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 8px;
    display: block;
}

.qr-instructions-steps {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 8px 0;
}

.qr-instructions-steps span {
    font-size: 13px;
    color: #3d4249;
    line-height: 1.4;
    display: block;
}

html.dark .qr-instructions-steps span {
    color: #e9ecef;
}


.qr-instructions-note {
    font-size: 13px;
    color: #999;
    line-height: 1.6;
    margin: 15px 0 0;
    font-style: italic;
}

html.dark .qr-instructions-note {
    color: #999;
}

/* Modal Footer */
.modal#qrModal .modal-footer,
.modal .modal-content:has(#qr-code-image) .modal-footer {
    background: #ffffff;
    border-top: 1px solid #e5e7eb;
    padding: 20px 30px;
}

html.dark .modal#qrModal .modal-footer,
html.dark .modal .modal-content:has(#qr-code-image) .modal-footer {
    background: #121D27;
    border-top: 1px solid #183441;
}

/* Primary Action Button - Likester Yellow */
.modal#qrModal .btn-big-secondary,
.modal .modal-content:has(#qr-code-image) .btn-big-secondary {
    background: #ffc107;
    color: #212529;
    border: none;
    padding: 14px 40px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.3s ease;
    min-width: 200px;
    text-transform: none;
    box-shadow: 0 2px 10px rgba(255, 193, 7, 0.3);
}

.modal#qrModal .btn-big-secondary:hover,
.modal .modal-content:has(#qr-code-image) .btn-big-secondary:hover {
    background: #ffbf00;
    color: #212529;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 193, 7, 0.4);
}

/* Alert messages in modal */
.modal#qrModal .alert,
.modal .modal-content:has(#qr-code-image) .alert {
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 14px;
    border: 1px solid rgba(255, 193, 7, 0.3);
    background: rgba(255, 193, 7, 0.1);
    color: #3d4249;
}

html.dark .modal#qrModal .alert,
html.dark .modal .modal-content:has(#qr-code-image) .alert {
    background: rgba(255, 193, 7, 0.15);
    color: #e9ecef;
}

/* Glassmorphism — hide default backdrop, use .modal as blur layer instead */
.modal-backdrop.show {
    opacity: 0 !important;
}

.modal.show {
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(16px) saturate(1.3);
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
}

/* Modal content — frosted glass card (dark mode) */
.modal-content {
    background: rgba(12, 20, 27, 0.7) !important;
    backdrop-filter: blur(40px) saturate(1.4);
    -webkit-backdrop-filter: blur(40px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
}

/* Light mode — white frosted glass */
html.light .modal.show {
    background: rgba(255, 255, 255, 0.2);
}

html.light .modal-content {
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(40px) saturate(1.4);
    -webkit-backdrop-filter: blur(40px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.1);
}

/* Mobile Responsive */
/* Fix modal centering issues */
.modal.show {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
}

.modal#qrModal,
.modal:has(#qr-code-image) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
}

/* Fix modal opening issues - prevent page shrinking and navbar floating */
body.modal-open {
    overflow: hidden !important;
    padding-right: 0 !important; /* Prevent scrollbar space */
}

/* Keep mobile navbar fixed when modal opens */
@media (max-width: 767px) {
    body.modal-open {
        padding-bottom: calc(110px + env(safe-area-inset-bottom)) !important; /* Keep navbar space */
    }

    body.modal-open .my-mobile-navbar {
        position: fixed !important;
        z-index: 9999 !important;
        bottom: 12px !important;
        left: 8px !important;
        right: 8px !important;
    }
}

/* Prevent background content shifting */
.modal-backdrop {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 1040 !important;
}

/* Prevent page/body shrinking when modal opens - lighter approach */
body.modal-open {
    overflow: hidden !important;
    padding-right: 0 !important;
    position: relative !important;
}

/* Ensure modal doesn't affect main content positioning */
body.modal-open .appAuth,
body.modal-open #appDashboard {
    transform: none !important;
    width: 100% !important;
    margin: 0 !important;
}

/* Desktop modal dialog centering */
@media (min-width: 481px) {
    .modal#qrModal .modal-dialog,
    .modal .modal-dialog:has(#qr-code-image) {
        margin: 1.75rem auto;
        max-width: 460px;
        display: block;
        position: relative;
        transform: none;
    }
}

/* Mobile optimization for QR Modal */
@media (max-width: 480px) {
    /* Force modal container to use full viewport and center content */
    .modal#qrModal,
    .modal:has(#qr-code-image) {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 10px !important;
        z-index: 1050 !important;
    }

    .modal#qrModal .modal-dialog,
    .modal .modal-dialog:has(#qr-code-image) {
        margin: 0 !important;
        max-width: none !important;
        width: 100% !important;
        max-width: 400px !important;
        position: relative !important;
        display: block !important;
        transform: none !important;
    }

    .modal#qrModal .modal-content,
    .modal .modal-content:has(#qr-code-image) {
        margin: 0;
        max-height: calc(100vh - 60px);
        overflow-y: auto;
    }

    .modal#qrModal .modal-body,
    .modal .modal-content:has(#qr-code-image) .modal-body {
        padding: 15px;
    }

    .qr-code-container {
        padding: 12px;
        margin: 0 auto 10px;
    }

    #qr-code-image,
    #qrCodeImage {
        width: 200px !important;
        height: 200px !important;
    }

    .qr-amount-display {
        font-size: 32px;
        margin: 5px 0;
    }

    .qr-instructions {
        margin: 8px 0;
        padding: 10px;
    }

    .qr-instructions-steps {
        gap: 2px;
    }

    .qr-instructions-steps span {
        font-size: 12px;
        line-height: 1.3;
    }

    .qr-instructions-note {
        font-size: 11px;
        margin: 8px 0 0;
    }

    .modal#qrModal .modal-footer,
    .modal .modal-content:has(#qr-code-image) .modal-footer {
        padding: 15px;
    }

    .modal#qrModal .btn-big-secondary,
    .modal .modal-content:has(#qr-code-image) .btn-big-secondary {
        width: 100%;
        padding: 12px 20px;
        font-size: 14px;
    }
}

html.dark .info-list li,
body.dark .info-list li,
.dark .info-list li {
	color: #fff;
}

html.dark .info-list li strong,
body.dark .info-list li strong,
.dark .info-list li strong {
	color: #ffc107;
}

/* CLEANUP 2026-05-07: removed .apHdRw .col-auto rules
 * (dead — topbar v4 uses .l2v2-topbar flex with its own gap) */

/* Custom Google Sign-In Button */
.btn.btn-google {
    background: #ffffff !important;
    color: #757575 !important;
    border: 2px solid #dadce0 !important;
    border-radius: 15px !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    padding: 15px 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}
.btn.btn-google:hover {
    background: #f8f9fa !important;
    border-color: #dadce0 !important;
    color: #3c4043 !important;
    transform: scale(0.96) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
}
.btn.btn-google:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.3) !important;
}
.btn.btn-google svg {
    flex-shrink: 0;
}

/* Mobile specific spacing adjustments */
@media (max-width: 767.98px) {
	.apHdRw .col-auto {
		padding-left: 2px;
		padding-right: 2px;
	}
	
	.apHdRw .col-auto:first-child {
		padding-left: 8px;
	}
	
	.apHdRw .col-auto:last-child {
		padding-right: 8px;
	}
}

/* Fix Points Exchange Modal Styles */
/* Modal header - visible in both light and dark modes */
.modal-header.astatus {
	background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%) !important;
	margin: 0;
	padding: 20px 30px;
	border-radius: 12px 12px 0 0;
	border-bottom: 3px solid #ff9800;
}

.modal-header.astatus h4 {
	color: #212529 !important;
	font-weight: 600;
	text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3);
}

/* Light mode specific */
html.light .modal-header.astatus {
	background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%) !important;
}

html.light .modal-header.astatus h4 {
	color: #212529 !important;
}

/* Dark mode specific - fix border for points exchange modal */
/* Target modal-content with p-lg-4 class that contains astatus header */
.dark .modal-content.p-lg-4 {
	border: none !important;
	box-shadow: 0 5px 15px rgba(0,0,0,0.5);
	overflow: hidden;
}

/* More specific targeting using parent-child relationship */
.dark .modal-dialog .modal-content.p-lg-4 {
	border: none !important;
	background: #121D27;
}

/* Target using :has selector for better specificity */
.dark .modal-content:has(.modal-header.astatus) {
	border: none !important;
	box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}

/* Additional override with higher specificity */
.dark .modal .modal-dialog .modal-content.p-lg-4,
.dark div.modal-content.p-lg-4 {
	border: 0 !important;
	border-color: transparent !important;
	outline: none !important;
}

.dark .modal-header.astatus {
	background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%) !important;
	border-bottom: 3px solid #ff9800;
}

.dark .modal-header.astatus h4 {
	color: #212529 !important;
}

/* Dark mode - consistent dark backgrounds */
.dark .modal-body,
.dark .modal-header {
	background: #121D27;
	color: #e9ecef;
}

.dark .modal-footer {
	background: #0C141B;
	color: #e9ecef;
	border-top: 1px solid #2c3e50;
}

/* StatusModal in dark mode */
.dark #statusModal .modal-content,
.dark #statusModal .modal-body {
	background: #121D27;
	color: #e9ecef;
}

/* =====================================================
   Points Request Modal, Status Modal, Points Modal Styles
   ===================================================== */

/* Modal Dialog - transparent background */
#pointsRequestModal .modal-dialog,
#statusModal .modal-dialog,
#pointsModal .modal-dialog {
	background: transparent;
}

/* Modal Content - Dark Mode (default) */
#pointsRequestModal .modal-content,
#statusModal .modal-content,
#pointsModal .modal-content {
	border-radius: 20px;
	overflow: hidden;
	border: none;
	background: #121D27;
	box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}

/* Prevent pseudo-elements white border */
#pointsRequestModal .modal-content::before,
#pointsRequestModal .modal-content::after,
#statusModal .modal-content::before,
#statusModal .modal-content::after,
#pointsModal .modal-content::before,
#pointsModal .modal-content::after,
#pointsRequestModal .modal-header::before,
#pointsRequestModal .modal-header::after,
#pointsRequestModal .modal-body::before,
#pointsRequestModal .modal-body::after {
	display: none;
}

/* Modal Header - Dark Mode */
#pointsRequestModal .modal-header,
#statusModal .modal-header,
#pointsModal .modal-header {
	border-radius: 20px 20px 0 0;
	background: #121D27;
	color: #e9ecef;
	border-bottom: 1px solid #183441;
	border-top: none;
	border-left: none;
	border-right: none;
}

/* Modal Title - Dark Mode */
#pointsRequestModal .modal-title,
#statusModal .modal-title,
#pointsModal .modal-title {
	color: #e9ecef;
}

/* Modal Body - Dark Mode */
#pointsRequestModal .modal-body,
#statusModal .modal-body,
#pointsModal .modal-body {
	background: #121D27;
	color: #e9ecef;
	border: none;
}

#pointsRequestModal .modal-body:last-child,
#statusModal .modal-body:last-child,
#pointsModal .modal-body:last-child {
	border-radius: 0 0 20px 20px;
}

/* Labels - Dark Mode */
#pointsRequestModal label,
#pointsRequestModal .control-label,
#pointsRequestModal .form-label,
#statusModal label,
#statusModal .control-label,
#pointsModal label,
#pointsModal .control-label {
	color: #e9ecef;
	background: transparent;
}

/* Form groups - transparent */
#pointsRequestModal .form-group,
#statusModal .form-group,
#pointsModal .form-group,
#pointsRequestModal .payout {
	background: transparent;
}

/* Close button - Dark Mode */
#pointsRequestModal .btn-close,
#statusModal .btn-close,
#pointsModal .btn-close {
	filter: invert(1) grayscale(100%) brightness(200%);
	opacity: 0.8;
}

#pointsRequestModal .btn-close:hover,
#statusModal .btn-close:hover,
#pointsModal .btn-close:hover {
	opacity: 1;
}

/* Form elements - Dark Mode */
#pointsRequestModal .form-control,
#pointsRequestModal .form-select {
	background: #183441;
	border: 1px solid #2c3e50;
	color: #e9ecef;
	font-size: 16px;
	padding: 10px 15px;
	min-height: 45px;
}

#pointsRequestModal .form-control:focus,
#pointsRequestModal .form-select:focus {
	background: #15222E;
	border-color: #ffc107;
	color: #e9ecef;
}

#pointsRequestModal .alert-info {
	background: rgba(255, 193, 7, 0.1);
	border: 1px solid rgba(255, 193, 7, 0.3);
	color: #e9ecef;
}

/* Select options - Dark Mode */
#pointsRequestModal .form-control option,
#pointsRequestModal .form-select option {
	font-size: 16px;
	padding: 10px 12px;
	min-height: 40px;
	color: #fff;
	background-color: #121D27;
}

/* =====================================================
   Light Mode Overrides for Modals
   ===================================================== */

/* Modal Content - Light Mode */
html.light #pointsRequestModal .modal-content,
html.light #statusModal .modal-content,
html.light #pointsModal .modal-content {
	background: #ffffff;
	box-shadow: 0 5px 15px rgba(0,0,0,0.15);
}

/* Modal Header - Light Mode */
html.light #pointsRequestModal .modal-header,
html.light #statusModal .modal-header,
html.light #pointsModal .modal-header {
	background: #ffffff;
	color: #333333;
	border-bottom: 1px solid #dee2e6;
}

/* Modal Title - Light Mode */
html.light #pointsRequestModal .modal-title,
html.light #statusModal .modal-title,
html.light #pointsModal .modal-title {
	color: #333333;
}

/* Modal Body - Light Mode */
html.light #pointsRequestModal .modal-body,
html.light #statusModal .modal-body,
html.light #pointsModal .modal-body {
	background: #ffffff;
	color: #333333;
}

/* Labels - Light Mode */
html.light #pointsRequestModal label,
html.light #pointsRequestModal .control-label,
html.light #pointsRequestModal .form-label,
html.light #statusModal label,
html.light #statusModal .control-label,
html.light #pointsModal label,
html.light #pointsModal .control-label {
	color: #666666;
}

/* Close button - Light Mode */
html.light #pointsRequestModal .btn-close,
html.light #statusModal .btn-close,
html.light #pointsModal .btn-close {
	filter: none;
	opacity: 0.5;
}

html.light #pointsRequestModal .btn-close:hover,
html.light #statusModal .btn-close:hover,
html.light #pointsModal .btn-close:hover {
	opacity: 1;
}

/* Form elements - Light Mode */
html.light #pointsRequestModal .form-control,
html.light #pointsRequestModal .form-select {
	background: #ffffff;
	border: 1px solid #dee2e6;
	color: #333333;
}

html.light #pointsRequestModal .form-control:focus,
html.light #pointsRequestModal .form-select:focus {
	background: #ffffff;
	border-color: #ffc107;
	color: #333333;
}

html.light #pointsRequestModal .alert-info {
	background: #d1ecf1;
	border: 1px solid #bee5eb;
	color: #0c5460;
}

/* Select options - Light Mode */
html.light #pointsRequestModal .form-control option,
html.light #pointsRequestModal .form-select option {
	color: #3d4249;
	background-color: #f7f8f9;
}

/* Mobile responsive for select options */
@media (max-width: 768px) {
	#pointsRequestModal .form-control option,
	#pointsRequestModal .form-select option {
		font-size: 18px;
		padding: 12px 15px;
		min-height: 45px;
	}
}

/* =====================================================
   Points Summary Card Styles
   ===================================================== */

/* Points Summary Card - Dark Mode (default) */
.points-summary-card {
	background: linear-gradient(135deg, #15222E 0%, #0C141B 100%);
	border-radius: 16px;
	padding: 20px;
	border: 1px solid #183441;
}

.points-summary-header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 16px;
	color: #ffc107;
	font-weight: 600;
	font-size: 14px;
}

.points-summary-header i {
	font-size: 18px;
}

.points-summary-body {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	margin-bottom: 16px;
}

.points-stat {
	text-align: center;
	flex: 1;
}

.points-stat-value {
	font-size: 28px;
	font-weight: 700;
	color: #ffffff;
	line-height: 1.2;
}

.points-stat-value.points-cash-value {
	color: #28a745;
}

.points-stat-label {
	font-size: 12px;
	color: #8899a6;
	margin-top: 4px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.points-stat-divider {
	color: #ffc107;
	font-size: 20px;
	opacity: 0.7;
}

.points-summary-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 16px;
	border-top: 1px solid #183441;
	font-size: 13px;
}

.points-level-badge,
.points-rate-info {
	display: flex;
	align-items: center;
	gap: 6px;
	color: #8899a6;
}

.points-level-badge i {
	color: #ffc107;
}

.points-rate-info i {
	color: #28a745;
}

.points-level-badge strong,
.points-rate-info strong {
	color: #ffffff;
}

/* Light Mode - Points Summary Card */
html.light .points-summary-card {
	background: linear-gradient(135deg, #fff8e1 0%, #fffde7 100%);
	border: 1px solid #ffc107;
}

html.light .points-summary-header {
	color: #ff9800;
}

html.light .points-stat-value {
	color: #333333;
}

html.light .points-stat-value.points-cash-value {
	color: #28a745;
}

html.light .points-stat-label {
	color: #666666;
}

html.light .points-stat-divider {
	color: #ff9800;
}

html.light .points-summary-footer {
	border-top: 1px solid #ffe082;
}

html.light .points-level-badge,
html.light .points-rate-info {
	color: #666666;
}

html.light .points-level-badge strong,
html.light .points-rate-info strong {
	color: #333333;
}

/* =====================================================
   Exchange Points UI Styles
   ===================================================== */

/* Exchange Input Wrapper */
.exchange-input-wrapper {
	display: flex;
	gap: 10px;
	align-items: stretch;
}

.exchange-input-group {
	flex: 1;
	position: relative;
	display: flex;
	align-items: center;
}

.exchange-input-group .form-control {
	padding-right: 60px;
}

.exchange-input-suffix {
	position: absolute;
	right: 12px;
	color: #8899a6;
	font-size: 14px;
	pointer-events: none;
}

/* Exchange All Button */
.btn-exchange-all {
	background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
	border: none;
	color: #212529;
	font-weight: 600;
	padding: 10px 16px;
	border-radius: 8px;
	white-space: nowrap;
	display: flex;
	align-items: center;
	gap: 6px;
	transition: all 0.2s ease;
}

.btn-exchange-all:hover {
	background: linear-gradient(135deg, #ffca28 0%, #ffa726 100%);
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3);
}

.btn-exchange-all:active {
	transform: translateY(0);
}

.btn-exchange-all i {
	font-size: 14px;
}

/* Exchange Result Card */
.exchange-result-card {
	background: linear-gradient(135deg, #15222E 0%, #0C141B 100%);
	border-radius: 12px;
	padding: 16px;
	display: flex;
	align-items: center;
	gap: 16px;
	border: 1px solid #183441;
}

.exchange-result-icon {
	width: 48px;
	height: 48px;
	background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	font-size: 20px;
}

.exchange-result-content {
	flex: 1;
}

.exchange-result-label {
	font-size: 12px;
	color: #8899a6;
	margin-bottom: 4px;
}

.exchange-result-value {
	font-size: 24px;
	font-weight: 700;
	color: #28a745;
}

.exchange-result-fee {
	font-size: 11px;
	color: #ffc107;
	margin-top: 2px;
}

/* Exchange Note */
.exchange-note {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	color: #8899a6;
	padding: 8px 12px;
	background: rgba(40, 167, 69, 0.1);
	border-radius: 8px;
	border-left: 3px solid #28a745;
}

.exchange-note i {
	color: #28a745;
}

.exchange-note-warning {
	background: rgba(255, 193, 7, 0.1);
	border-left: 3px solid #ffc107;
}

.exchange-note-warning i {
	color: #ffc107;
}

/* Light Mode - Exchange UI */
html.light .exchange-input-suffix {
	color: #666666;
}

html.light .exchange-result-card {
	background: #f8f9fa;
	border: 1px solid #e9ecef;
}

html.light .exchange-result-label {
	color: #666666;
}

html.light .exchange-note {
	color: #666666;
}

/* Mobile Responsive */
@media (max-width: 576px) {
	.points-summary-body {
		gap: 10px;
	}

	.points-stat-value {
		font-size: 22px;
	}

	.points-summary-footer {
		flex-direction: column;
		gap: 8px;
		align-items: flex-start;
	}

	.exchange-input-wrapper {
		flex-direction: column;
	}

	.btn-exchange-all {
		width: 100%;
		justify-content: center;
	}

	.exchange-result-card {
		padding: 12px;
	}

	.exchange-result-value {
		font-size: 20px;
	}
}

/* Confirm Signup Page Styles */
.confirm-signup-page {
	background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
	min-height: 100vh;
	position: relative;
	overflow: hidden;
}

.confirm-signup-page::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><radialGradient id="grad1" cx="50%" cy="50%" r="50%"><stop offset="0%" style="stop-color:rgba(255,255,255,0.1);stop-opacity:1" /><stop offset="100%" style="stop-color:rgba(255,255,255,0);stop-opacity:1" /></radialGradient></defs><circle cx="100" cy="100" r="80" fill="url(%23grad1)" /><circle cx="900" cy="200" r="120" fill="url(%23grad1)" /><circle cx="200" cy="800" r="100" fill="url(%23grad1)" /><circle cx="800" cy="700" r="90" fill="url(%23grad1)" /></svg>');
	opacity: 0.5;
	animation: float 20s ease-in-out infinite;
}

@keyframes float {
	0%, 100% { transform: translateY(0px) rotate(0deg); }
	50% { transform: translateY(-20px) rotate(180deg); }
}

.confirm-signup-wrapper {
	position: relative;
	z-index: 10;
}

.confirm-signup-icon {
	width: 80px;
	height: 80px;
	margin: 0 auto;
	background: linear-gradient(135deg, #121d27 0%, #183441 100%);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 10px 30px rgba(18, 29, 39, 0.3);
}

.confirm-signup-icon i {
	font-size: 36px;
	color: #ffc107;
}

.confirm-signup-title {
	font-size: 32px;
	font-weight: 700;
	color: #121d27;
	margin-bottom: 15px;
	text-shadow: 0 2px 4px rgba(255, 255, 255, 0.1);
}

.confirm-signup-subtitle {
	font-size: 16px;
	font-weight: 500;
	color: #606b80;
	line-height: 1.6;
	max-width: 400px;
	margin: 0 auto;
}

.confirm-signup-card {
	background: linear-gradient(145deg, rgba(24, 52, 65, 0.95), rgba(18, 29, 39, 0.95));
	border-radius: 25px;
	border: none;
	box-shadow: 0 20px 40px rgba(18, 29, 39, 0.2);
	backdrop-filter: blur(10px);
	overflow: hidden;
	position: relative;
}

.confirm-signup-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, #ffc107, #ff9800, #ffc107);
	animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.7; }
}

.confirm-signup-card-body {
	padding: 50px 40px;
	position: relative;
}

.btn-confirm-signup {
	background: linear-gradient(135deg, #121d27 0%, #183441 100%);
	color: #fff;
	border: none;
	padding: 18px 50px;
	border-radius: 18px;
	font-size: 16px;
	font-weight: 600;
	width: 100%;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.btn-confirm-signup::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 193, 7, 0.2), transparent);
	transition: left 0.6s;
}

.btn-confirm-signup:hover::before {
	left: 100%;
}

.btn-confirm-signup:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 25px rgba(18, 29, 39, 0.3);
	background: linear-gradient(135deg, #183441 0%, #121d27 100%);
}

.btn-confirm-signup:active {
	transform: translateY(0);
}

.confirm-signup-divider {
	position: relative;
	text-align: center;
	margin: 35px 0;
}

.confirm-signup-divider::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(255, 193, 7, 0.3), transparent);
}

.confirm-signup-divider span {
	background: linear-gradient(145deg, rgba(24, 52, 65, 0.95), rgba(18, 29, 39, 0.95));
	color: #ffc107;
	padding: 0 20px;
	font-size: 14px;
	font-weight: 600;
	position: relative;
}

.confirm-signup-links {
	color: #e9ecef;
	font-size: 14px;
	font-weight: 500;
}

.confirm-signup-link {
	color: #ffc107;
	text-decoration: none;
	font-weight: 600;
	transition: all 0.3s ease;
	position: relative;
}

.confirm-signup-link::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 0;
	height: 2px;
	background: #ffc107;
	transition: width 0.3s ease;
}

.confirm-signup-link:hover::after {
	width: 100%;
}

.confirm-signup-link:hover {
	color: #fff;
	text-decoration: none;
}

.confirm-signup-terms {
	color: #b8c2cc;
	font-size: 12px;
}

.confirm-signup-terms .confirm-signup-link {
	font-size: 12px;
}

/* Responsive Design */
@media (max-width: 767.98px) {
	.confirm-signup-card-body {
		padding: 35px 25px;
	}
	
	.confirm-signup-title {
		font-size: 26px;
	}
	
	.confirm-signup-subtitle {
		font-size: 14px;
	}
	
	.confirm-signup-icon {
		width: 70px;
		height: 70px;
	}
	
	.confirm-signup-icon i {
		font-size: 30px;
	}
	
	.btn-confirm-signup {
		padding: 16px 40px;
		font-size: 15px;
	}
}

@media (max-width: 575.98px) {
	.confirm-signup-card-body {
		padding: 30px 20px;
	}
	
	.confirm-signup-title {
		font-size: 24px;
	}
}

/* Generic Stat Box Styles for Service Pages */
.stat-box {
    padding: 30px 20px;
    background: white;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.stat-box:hover {
    transform: translateY(-5px);
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 800;
    color: #333;
    margin: 15px 0 10px 0;
}

.stat-label {
    color: #666;
    margin: 0;
    font-weight: 500;
}

/* Generic Pricing Card Styles for Service Pages */
.pricing-card {
    background: white;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    overflow: visible;
    position: relative;
    transition: transform 0.3s ease;
    height: 100%;
}

.pricing-card:hover {
    transform: translateY(-5px);
}

.pricing-card.featured {
    border: 3px solid #007bff;
    transform: scale(1.05);
}

.featured-badge {
    background: linear-gradient(135deg, #007bff, #0056b3);
    color: white;
    padding: 8px 16px;
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    z-index: 10;
    box-shadow: 0 4px 12px rgba(0,123,255,0.25);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 2px solid rgba(255,255,255,0.2);
    backdrop-filter: blur(10px);
}

.pricing-header {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 40px 30px;
    text-align: center;
    border-bottom: 1px solid #dee2e6;
}

.pricing-header h4 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 15px;
}

.price {
    font-size: 2.5rem;
    font-weight: 800;
    color: #007bff;
    margin-bottom: 10px;
}

.pricing-body {
    padding: 30px;
}

.pricing-body ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pricing-body li {
    padding: 8px 0;
    color: #666;
}

.pricing-body li i {
    color: #28a745;
    margin-right: 10px;
    font-size: 1.1rem;
}

.pricing-footer {
    padding: 0 30px 30px 30px;
}

.btn-block {
    width: 100%;
}

/* ===============================
   YOUTUBE PAGES - DETAILED CONTENT SECTIONS
   YouTube Likes, Views, Subscribers, Comments
   =============================== */

/* Detailed Content Section - เนื้อหาเชิงลึกสำหรับ YouTube Pages */
.facebook-landing-page .detailed-content-section {
    padding: 80px 0;
    background: #f8f9fa;
}

.facebook-landing-page .detailed-content-section .section-title {
    color: #FF0000;
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 30px;
    text-align: center;
}

.facebook-landing-page .detailed-content-section p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #495057;
    margin-bottom: 40px;
    text-align: center;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* Info Cards Grid - แทนที่ Text เยอะๆ */
.facebook-landing-page .detailed-content-section .info-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin: 60px 0;
    position: relative;
    z-index: 2;
}

.facebook-landing-page .detailed-content-section .info-card {
    background: white;
    border-radius: 20px;
    padding: 35px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
    border: 1px solid rgba(255,0,0,0.08);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.facebook-landing-page .detailed-content-section .info-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #FF0000, #FF6B6B);
}

.facebook-landing-page .detailed-content-section .info-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(255,0,0,0.12);
}

.facebook-landing-page .detailed-content-section .info-card h4 {
    color: #2d3748;
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}

.facebook-landing-page .detailed-content-section .info-card .card-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #FF0000, #FF4444);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    flex-shrink: 0;
}

.facebook-landing-page .detailed-content-section .info-card .card-icon i {
    color: white;
    font-size: 1.1rem;
}

.facebook-landing-page .detailed-content-section .info-card ul {
    padding: 0;
    list-style: none;
    margin: 0;
}

.facebook-landing-page .detailed-content-section .info-card li {
    padding: 8px 0;
    color: #4a5568;
    font-size: 1rem;
    line-height: 1.6;
    position: relative;
    padding-left: 25px;
}

.facebook-landing-page .detailed-content-section .info-card li::before {
    content: '▶';
    color: #FF0000;
    position: absolute;
    left: 0;
    top: 8px;
    font-size: 0.8rem;
}

.facebook-landing-page .detailed-content-section .info-card li strong {
    color: #FF0000;
    font-weight: 600;
}

/* Override feature-card for YouTube pages */
.facebook-landing-page .detailed-content-section .feature-card {
    background: white;
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(255,0,0,0.08);
    border: 1px solid rgba(255,0,0,0.1);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.facebook-landing-page .detailed-content-section .feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #FF0000, #FF4444, #CC0000);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.facebook-landing-page .detailed-content-section .feature-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(255,0,0,0.15);
    border-color: rgba(255,0,0,0.3);
}

.facebook-landing-page .detailed-content-section .feature-card:hover::before {
    opacity: 1;
}

/* YouTube feature icons */
.facebook-landing-page .detailed-content-section .feature-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #FF0000, #FF4444);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    box-shadow: 0 8px 25px rgba(255,0,0,0.3);
    transition: all 0.3s ease;
}

.facebook-landing-page .detailed-content-section .feature-icon i {
    color: white;
    font-size: 1.5rem;
}

.facebook-landing-page .detailed-content-section .feature-card:hover .feature-icon {
    transform: scale(1.1);
    box-shadow: 0 12px 35px rgba(255,0,0,0.4);
}

/* Benefit icons for Benefits section */
.facebook-landing-page .benefit-icon {
    color: #FF0000 !important;
    font-size: 2rem;
    margin-right: 15px;
    flex-shrink: 0;
    margin-top: 5px;
}

/* Quick Order CTA Card - Sticky ด้านขวา */
.facebook-landing-page .quick-order-card {
    background: linear-gradient(135deg, #FF0000 0%, #FF4444 100%);
    color: white;
    border-radius: 25px;
    padding: 35px;
    box-shadow: 0 15px 40px rgba(255,0,0,0.3);
    position: sticky;
    top: 30px;
    transition: all 0.3s ease;
}

.facebook-landing-page .quick-order-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 50px rgba(255,0,0,0.4);
}

.facebook-landing-page .quick-order-card .feature-title {
    color: white;
    font-size: 1.5rem;
    margin-bottom: 25px;
}

.facebook-landing-page .quick-order-card .feature-icon {
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.3);
}

.facebook-landing-page .quick-order-card .btn-primary {
    background: white !important;
    color: #FF0000 !important;
    border: none;
    font-weight: 600;
    padding: 15px 30px;
    border-radius: 15px;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.facebook-landing-page .quick-order-card .btn-primary:hover {
    background: #f8f9fa !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}

/* Success Formula Card - Special highlight */
.facebook-landing-page .detailed-content-section .success-formula-card {
    background: linear-gradient(135deg, #FF0000 0%, #FF4444 100%);
    color: white;
    border-radius: 30px;
    padding: 50px 40px;
    box-shadow: 0 20px 60px rgba(255, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
}

.facebook-landing-page .detailed-content-section .success-formula-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, transparent 40%, rgba(255,255,255,0.1) 50%, transparent 60%);
    transform: rotate(45deg);
}

.facebook-landing-page .detailed-content-section .formula-icon {
    width: 80px;
    height: 80px;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 30px auto;
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255,255,255,0.3);
}

.facebook-landing-page .detailed-content-section .formula-icon i {
    color: white;
    font-size: 2.5rem;
}

.facebook-landing-page .detailed-content-section .formula-title {
    color: white;
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 40px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.facebook-landing-page .detailed-content-section .formula-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-bottom: 40px;
}

.facebook-landing-page .detailed-content-section .formula-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(255,255,255,0.15);
    padding: 20px 15px;
    border-radius: 15px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.2);
    min-width: 120px;
    transition: all 0.3s ease;
}

.facebook-landing-page .detailed-content-section .formula-item:hover {
    transform: translateY(-5px);
    background: rgba(255,255,255,0.2);
}

.facebook-landing-page .detailed-content-section .formula-item i {
    font-size: 1.8rem;
    margin-bottom: 8px;
    color: white;
}

.facebook-landing-page .detailed-content-section .formula-item span {
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.3;
}

.facebook-landing-page .detailed-content-section .formula-plus,
.facebook-landing-page .detailed-content-section .formula-equals {
    font-size: 1.8rem;
    font-weight: 800;
    color: white;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.facebook-landing-page .detailed-content-section .formula-result {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(255,215,0,0.2);
    padding: 25px 20px;
    border-radius: 20px;
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255,215,0,0.4);
    min-width: 140px;
    animation: pulse-glow 2s ease-in-out infinite alternate;
}

.facebook-landing-page .detailed-content-section .formula-result i {
    font-size: 2.2rem;
    margin-bottom: 8px;
    color: #FFD700;
    text-shadow: 0 0 20px rgba(255,215,0,0.5);
}

.facebook-landing-page .detailed-content-section .formula-result span {
    font-size: 1rem;
    font-weight: 800;
    text-align: center;
    color: #FFD700;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

@keyframes pulse-glow {
    0% { 
        box-shadow: 0 0 20px rgba(255,215,0,0.3);
        transform: scale(1);
    }
    100% { 
        box-shadow: 0 0 30px rgba(255,215,0,0.6);
        transform: scale(1.02);
    }
}

.facebook-landing-page .detailed-content-section .success-formula-card .btn-primary {
    background: white !important;
    color: #FF0000 !important;
    border: none;
    font-weight: 700;
    font-size: 1.1rem;
    padding: 15px 40px;
    border-radius: 50px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
}

.facebook-landing-page .detailed-content-section .success-formula-card .btn-primary:hover {
    background: #f8f9fa !important;
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(0,0,0,0.3);
}

/* Mobile responsiveness for YouTube sections */
@media (max-width: 768px) {
    .facebook-landing-page .detailed-content-section {
        padding: 60px 0;
    }
    
    .facebook-landing-page .detailed-content-section .section-title {
        font-size: 1.8rem;
        text-align: center;
    }
    
    .facebook-landing-page .detailed-content-section .success-formula-card {
        padding: 40px 25px;
    }
    
    .facebook-landing-page .detailed-content-section .formula-content {
        flex-direction: column;
        gap: 20px;
    }
    
    .facebook-landing-page .detailed-content-section .formula-plus,
    .facebook-landing-page .detailed-content-section .formula-equals {
        transform: rotate(90deg);
        font-size: 1.5rem;
    }
    
    .facebook-landing-page .detailed-content-section .formula-title {
        font-size: 1.6rem;
    }
}





/* ============================================
   Premium Banking Membership Cards - Centered Focus
   Redesigned for better visibility and hierarchy
   ============================================ */

/* Container Styles */
.membership-banking-container {
    padding: 15px 15px 35px;
    position: relative;
}

/* Current Member Level Display */
.current-member-level {
    text-align: center;
    margin-bottom: 30px;
}

.current-member-level .level-text {
    display: block;
    font-size: 12px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 12px;
    font-weight: 500;
}

.level-badge-display {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 30px;
    border-radius: 30px;
    font-weight: 800;
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    position: relative;
    overflow: hidden;
}

.level-badge-display i {
    font-size: 20px;
}

/* Level Badge Styles with Brand Colors */
.new-level {
    background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
    color: white;
    box-shadow: 0 6px 20px rgba(74, 85, 104, 0.3);
}

.gold-level {
    background: linear-gradient(135deg, #ffc107 0%, #ff8f00 100%);
    color: #1a1a1a;
    box-shadow: 0 6px 20px rgba(255, 193, 7, 0.5);
    animation: goldShine 3s infinite;
}

.platinum-level {
    background: linear-gradient(135deg, #e7e7e7 0%, #b8b8b8 50%, #e7e7e7 100%);
    color: #1a1a1a;
    box-shadow: 0 6px 20px rgba(184, 184, 184, 0.4);
}

.vip-level {
    background: linear-gradient(135deg, #1a1a1a 0%, #434343 50%, #1a1a1a 100%);
    color: #ffc107;
    box-shadow: 0 6px 25px rgba(26, 26, 26, 0.6);
    border: 2px solid #ffc107;
}

@keyframes goldShine {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.1); }
}

/* Banking Cards Grid - Centered Focus Layout */
.banking-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto 20px;
    align-items: center;
    justify-items: center;
}

/* Banking Card Base Style */
.banking-card {
    position: relative;
    width: 100%;
    max-width: 260px;
    height: 160px;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transform-style: preserve-3d;
    perspective: 1000px;
}

.banking-card:hover {
    transform: translateY(-5px) rotateX(5deg);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

/* Card Pattern Background */
.card-pattern {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.15;
    background-image: 
        repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255, 255, 255, 0.05) 10px, rgba(255, 255, 255, 0.05) 20px),
        repeating-linear-gradient(-45deg, transparent, transparent 10px, rgba(0, 0, 0, 0.03) 10px, rgba(0, 0, 0, 0.03) 20px);
    pointer-events: none;
}

/* Card Content */
.card-content {
    position: relative;
    height: 100%;
    padding: 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 2;
}

/* Card Header */
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.card-tier {
    display: flex;
    align-items: center;
    gap: 8px;
}

.card-tier i {
    font-size: 20px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.tier-name {
    font-size: 18px;
    font-weight: 900;
    letter-spacing: 1.5px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Card Chip */
.card-chip {
    width: 36px;
    height: 26px;
    border-radius: 6px;
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 50%, #ffd700 100%);
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.card-chip::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 22px;
    height: 16px;
    border: 1.5px solid rgba(0, 0, 0, 0.15);
    border-radius: 3px;
}

/* Card Details */
.card-details {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.detail-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.detail-item i {
    font-size: 14px;
    opacity: 0.8;
}

.detail-info {
    display: flex;
    flex-direction: column;
}

.detail-label {
    font-size: 9px;
    text-transform: uppercase;
    opacity: 0.7;
    letter-spacing: 0.5px;
    font-weight: 500;
}

.detail-value {
    font-size: 11px;
    font-weight: 700;
    margin-top: 2px;
}

/* Individual Card Styles with Distinct Color Differentiation */
.new-member-card {
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.new-member-card .card-chip {
    background: linear-gradient(135deg, #adb5bd 0%, #6c757d 100%);
}

.new-member-card .tier-name {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.gold-member-card {
    background: linear-gradient(135deg, #ffc107 0%, #ff8f00 100%);
    color: #1a1a1a;
    position: relative;
    overflow: hidden;
}

.gold-member-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent 40%, rgba(255, 255, 255, 0.1) 50%, transparent 60%);
    animation: goldShimmer 3s infinite;
    pointer-events: none;
}

@keyframes goldShimmer {
    0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
    100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}

.gold-member-card .detail-label {
    color: rgba(26, 26, 26, 0.7);
}

.gold-member-card .tier-name {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.platinum-member-card {
    background: linear-gradient(135deg, #e8eaed 0%, #c1c8cd 50%, #e8eaed 100%);
    color: #1a1a1a;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.platinum-member-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.4) 50%, transparent 70%);
    animation: platinumShine 4s infinite;
    pointer-events: none;
}

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

.platinum-member-card .detail-label {
    color: rgba(26, 26, 26, 0.7);
}

.platinum-member-card .tier-name {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.vip-member-card {
    background: linear-gradient(135deg, #1a1a1a 0%, #000000 50%, #1a1a1a 100%);
    color: #ffffff;
    border: 2px solid #ffc107;
    position: relative;
    overflow: hidden;
}

.vip-member-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 193, 7, 0.15) 0%, transparent 60%);
    animation: vipGlow 3s ease-in-out infinite;
    pointer-events: none;
}

@keyframes vipGlow {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

.vip-member-card .card-chip {
    background: linear-gradient(135deg, #ffc107 0%, #ff6f00 100%);
    box-shadow: 0 0 10px rgba(255, 193, 7, 0.3);
}

.vip-member-card .detail-label {
    color: rgba(255, 255, 255, 0.8);
}

.vip-member-card .detail-value {
    color: #ffc107;
    font-weight: 800;
}

.vip-member-card .tier-name {
    color: #ffffff;
    text-shadow: 0 0 15px rgba(255, 193, 7, 0.8);
    font-weight: 900;
}

.vip-member-card .card-tier i {
    color: #ffc107;
    filter: drop-shadow(0 0 8px rgba(255, 193, 7, 0.6));
}

/* Removed Current Badge - Clean design with level indicator at top only */

/* Active Banking Card - Enhanced Visibility */
.active-banking-card {
    transform: scale(1.18) translateY(-12px);
    box-shadow: 
        0 25px 50px rgba(0, 0, 0, 0.5),
        0 0 0 4px #ffffff,
        0 0 0 8px #ffc107,
        0 0 40px rgba(255, 193, 7, 0.6);
    z-index: 10;
    position: relative;
}

.active-banking-card:hover {
    transform: scale(1.18) translateY(-10px) rotateX(5deg);
}

/* Glow effect for active card */
.active-banking-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 193, 7, 0.2) 0%, transparent 60%);
    animation: activeGlow 2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes activeGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}

/* Dark Theme Adjustments */
html.dark .membership-banking-container {
    background: transparent;
}

html.dark .current-member-level .level-text {
    color: #999;
}

html.dark .banking-card {
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Light Theme Adjustments */
html.light .membership-banking-container {
    background: rgba(248, 249, 250, 0.5);
    border-radius: 20px;
}

html.light .current-member-level .level-text {
    color: #666;
}

html.light .new-member-card {
    color: #f0f0f0;
}

html.light .gold-level {
    box-shadow: 0 6px 25px rgba(255, 193, 7, 0.6);
}

/* Responsive Design - Tablet */
@media (max-width: 992px) {
    .banking-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
    
    .banking-card {
        max-width: 280px;
        height: 170px;
    }
    
    .active-banking-card {
        transform: scale(1.1) translateY(-5px);
    }
}

/* Responsive Design - Mobile */
@media (max-width: 576px) {
    .banking-cards-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .banking-card {
        max-width: 320px;
        height: 180px;
    }
    
    .card-content {
        padding: 20px;
    }
    
    .active-banking-card {
        transform: scale(1.05) translateY(-5px);
    }
    
    .active-banking-card:hover {
        transform: scale(1.05) translateY(-5px);
    }
    
    .tier-name {
        font-size: 20px;
    }
    
    .detail-value {
        font-size: 12px;
    }
}

/* Animation on Load */
@keyframes slideInFade {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.banking-card {
    animation: slideInFade 0.6s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}

.banking-card:nth-child(1) { animation-delay: 0.1s; }
.banking-card:nth-child(2) { animation-delay: 0.2s; }
.banking-card:nth-child(3) { animation-delay: 0.3s; }
.banking-card:nth-child(4) { animation-delay: 0.4s; }

/* Hover Shine Effect */
@keyframes cardShine {
    0% {
        transform: translateX(-100%) translateY(-100%) rotate(45deg);
    }
    100% {
        transform: translateX(100%) translateY(100%) rotate(45deg);
    }
}

.banking-card:hover .card-pattern::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    animation: cardShine 0.8s ease-out;
}

/* Focus State for Accessibility */
.banking-card:focus-visible {
    outline: 3px solid #ffc107;
    outline-offset: 2px;
}

/* Print Styles */
@media print {
    .membership-banking-container {
        break-inside: avoid;
    }
    
    .banking-card {
        box-shadow: none;
        border: 1px solid #ccc;
    }
}


/* Active/Current Membership Tier Enhancement */
.membership-tier.current-tier {
    transform: scale(1.05);
    border: 3px solid #ffc107;
    box-shadow: 
        0 8px 25px rgba(0, 0, 0, 0.15),
        0 0 0 1px rgba(255, 193, 7, 0.2),
        0 0 20px rgba(255, 193, 7, 0.3);
    position: relative;
    z-index: 2;
}

.membership-tier.current-tier::after {
    content: 'ระดับปัจจุบัน';
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
    background: #00AF4C;
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 6px 20px rgba(0, 175, 76, 0.6);
    z-index: 999;
    border: 2px solid #ffffff;
    animation: currentTierPulse 3s infinite;
}

@keyframes currentTierPulse {
    0%, 100% { 
        box-shadow: 0 6px 20px rgba(0, 175, 76, 0.6);
        transform: translateX(-50%) scale(1);
    }
    50% { 
        box-shadow: 0 8px 30px rgba(0, 175, 76, 0.9);
        transform: translateX(-50%) scale(1.05);
    }
}

/* Enhanced glow for current tier */
.membership-tier.current-tier::before {
    height: 6px;
    background: linear-gradient(90deg, #ffc107, #ff8f00, #ffc107);
    animation: goldFlow 2s ease-in-out infinite;
}

@keyframes goldFlow {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

/* Current tier hover effect */
.membership-tier.current-tier:hover {
    transform: scale(1.08);
    box-shadow: 
        0 12px 35px rgba(0, 0, 0, 0.2),
        0 0 0 2px rgba(255, 193, 7, 0.3),
        0 0 30px rgba(255, 193, 7, 0.4);
}

/* English version of badge */
html[lang='en'] .membership-tier.current-tier::after,
body[lang='en'] .membership-tier.current-tier::after {
    content: 'Your Level';
}

/* Dark theme adjustments for current tier */
html.dark .membership-tier.current-tier,
body.dark .membership-tier.current-tier,
.dark .membership-tier.current-tier {
    border: 3px solid #ffc107;
    box-shadow: 
        0 8px 25px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 193, 7, 0.3),
        0 0 25px rgba(255, 193, 7, 0.4);
}

/* Responsive adjustments for current tier */
@media (max-width: 768px) {
    .membership-tier.current-tier {
        transform: scale(1.02);
    }
    
    .membership-tier.current-tier:hover {
        transform: scale(1.02);
    }
    
    .membership-tier.current-tier::after {
        font-size: 10px;
        padding: 6px 12px;
        top: -12px;
        left: 50%;
        transform: translateX(-50%);
        border: 1px solid #ffffff;
    }
}



/* Desktop-specific spacing fix for badge overlap */
@media (min-width: 992px) {
    .current-member-level {
        margin-bottom: 40px;
    }
    
    .membership-banking-container {
        padding: 25px 15px 40px;
    }
}



/* ============================================
   Badge + Progress Bar Bonus System
   Yellow/White/Black theme matching website
   ============================================ */

.bonus-progress-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 8px 0;
}

.bonus-progress-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    transition: all 0.2s ease;
}

.bonus-progress-item:hover {
    transform: translateX(4px);
}

/* Progress Badge */
.progress-badge {
    flex-shrink: 0;
    width: 80px;
    padding: 8px 12px;
    background: #ffc107;
    color: #000;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 4px rgba(255, 193, 7, 0.2);
}

/* Dark mode badge */
html.dark .progress-badge,
body.dark-mode .progress-badge {
    background: #ffc107;
    color: #000;
    border-color: rgba(255, 193, 7, 0.3);
}

/* Hot tier badge */
.progress-badge.hot {
    background: linear-gradient(135deg, #ffc107, #ff8f00);
    color: #000;
    font-weight: 700;
    animation: badge-glow 2s ease-in-out infinite;
}

/* Super tier badge */
.progress-badge.super {
    background: linear-gradient(135deg, #ffc107, #ff6f00, #ffc107);
    color: #000;
    font-weight: 800;
    box-shadow: 0 4px 8px rgba(255, 193, 7, 0.4);
    animation: badge-super-glow 2s ease-in-out infinite;
}

/* Progress Bar Wrapper */
.progress-bar-wrapper {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}

.progress-bar-bg {
    width: 100%;
    height: 8px;
    background: #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

html.dark .progress-bar-bg,
body.dark-mode .progress-bar-bg {
    background: #2d3239;
}

/* Progress Bar Fill */
.progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #ffe082, #ffc107);
    border-radius: 4px;
    transition: width 0.3s ease;
    position: relative;
}

.progress-bar-fill::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: shine 2s ease-in-out infinite;
}

/* Hot progress bar */
.progress-bar-fill.hot {
    background: linear-gradient(90deg, #ffb74d, #ff8f00);
    box-shadow: 0 0 8px rgba(255, 143, 0, 0.3);
}

/* Super progress bar */
.progress-bar-fill.super {
    background: linear-gradient(90deg, #ffc107, #ff6f00, #ffc107);
    box-shadow: 0 0 12px rgba(255, 193, 7, 0.5);
    animation: progress-super-glow 2s ease-in-out infinite;
}

/* Progress Percent */
.progress-percent {
    flex-shrink: 0;
    width: 60px;
    text-align: right;
    font-size: 16px;
    font-weight: 700;
    color: #333;
}

html.dark .progress-percent,
body.dark-mode .progress-percent {
    color: #fff;
}

.progress-percent.no-bonus {
    font-size: 12px;
    color: #999;
    font-weight: 400;
}

.progress-percent.hot {
    color: #ff8f00;
    font-size: 18px;
    font-weight: 800;
}

.progress-percent.super {
    color: #ffc107;
    font-size: 20px;
    font-weight: 800;
    text-shadow: 0 0 4px rgba(255, 193, 7, 0.3);
}

/* Progress Label for Super */
.progress-label {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 9px;
    color: #ff6f00;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: #fff;
    padding: 2px 6px;
    border-radius: 3px;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

html.dark .progress-label,
body.dark-mode .progress-label {
    background: #1e2329;
    color: #ffc107;
}

/* Special styling for hot and super tiers */
.hot-tier {
    background: linear-gradient(90deg, transparent, rgba(255, 143, 0, 0.05), transparent);
    border-radius: 8px;
    margin: 0 -8px;
    padding: 12px 8px;
}

.super-tier {
    background: linear-gradient(90deg, transparent, rgba(255, 193, 7, 0.08), transparent);
    border-radius: 8px;
    margin: 0 -8px;
    padding: 12px 8px;
    border: 1px solid rgba(255, 193, 7, 0.2);
}

html.dark .hot-tier,
body.dark-mode .hot-tier {
    background: linear-gradient(90deg, transparent, rgba(255, 143, 0, 0.1), transparent);
}

html.dark .super-tier,
body.dark-mode .super-tier {
    background: linear-gradient(90deg, transparent, rgba(255, 193, 7, 0.1), transparent);
    border-color: rgba(255, 193, 7, 0.3);
}

/* Animations */
@keyframes badge-glow {
    0%, 100% { 
        box-shadow: 0 2px 4px rgba(255, 193, 7, 0.2); 
    }
    50% { 
        box-shadow: 0 4px 8px rgba(255, 143, 0, 0.4); 
    }
}

@keyframes badge-super-glow {
    0%, 100% { 
        box-shadow: 0 4px 8px rgba(255, 193, 7, 0.4); 
    }
    50% { 
        box-shadow: 0 6px 12px rgba(255, 193, 7, 0.6); 
    }
}

@keyframes progress-super-glow {
    0%, 100% { 
        box-shadow: 0 0 12px rgba(255, 193, 7, 0.5); 
    }
    50% { 
        box-shadow: 0 0 16px rgba(255, 193, 7, 0.7); 
    }
}

@keyframes shine {
    0% { transform: translateX(-100%); }
    50% { transform: translateX(100%); }
    100% { transform: translateX(100%); }
}

/* Responsive Design */
@media (max-width: 768px) {
    .bonus-progress-container {
        gap: 12px;
    }
    
    .bonus-progress-item {
        gap: 10px;
        padding: 10px 0;
    }
    
    .progress-badge {
        width: 70px;
        padding: 6px 8px;
        font-size: 12px;
    }
    
    .progress-bar-bg {
        height: 6px;
    }
    
    .progress-percent {
        width: 50px;
        font-size: 14px;
    }
    
    .progress-percent.hot {
        font-size: 16px;
    }
    
    .progress-percent.super {
        font-size: 18px;
    }
}

@media (max-width: 480px) {
    .bonus-progress-container {
        gap: 10px;
    }
    
    .bonus-progress-item {
        gap: 8px;
        padding: 8px 0;
    }
    
    .progress-badge {
        width: 60px;
        padding: 5px 6px;
        font-size: 11px;
    }
    
    .progress-bar-bg {
        height: 5px;
    }
    
    .progress-percent {
        width: 45px;
        font-size: 13px;
    }
    
    .progress-percent.hot {
        font-size: 14px;
    }
    
    .progress-percent.super {
        font-size: 16px;
    }
    
    .progress-label {
        font-size: 8px;
        top: -18px;
    }
}

/* Hide old table and other bonus styles */
.bonus-table,
.bonus-list-container,
.bonus-tiers-container {
    display: none !important;
}


/* ============================================
   Enhanced Badge + Progress Bar with Coin Animation
   Full text badges with spinning coins
   ============================================ */

/* Update Badge to fit full text */
.progress-badge {
    flex-shrink: 0;
    width: auto;
    min-width: 120px;
    max-width: 140px;
    padding: 8px 12px;
    background: #ffc107;
    color: #000;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 4px rgba(255, 193, 7, 0.2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Spinning Coin at Progress Bar End */
.progress-coin {
    position: absolute;
    right: -12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    animation: coin-spin 2s linear infinite;
    z-index: 2;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.progress-coin.hot {
    font-size: 18px;
    animation: coin-spin-hot 1.5s linear infinite;
    filter: drop-shadow(0 3px 6px rgba(255, 143, 0, 0.4));
}

.progress-coin.super {
    font-size: 20px;
    animation: coin-spin-super 1s linear infinite;
    filter: drop-shadow(0 4px 8px rgba(255, 193, 7, 0.6));
}

/* Enhanced Hot Label */
.progress-label.hot {
    background: linear-gradient(45deg, #ff8f00, #ffb74d);
    color: #fff;
    font-weight: 700;
    animation: label-pulse 2s ease-in-out infinite;
}

/* Coin Spin Animations */
@keyframes coin-spin {
    0% { transform: translateY(-50%) rotateY(0deg); }
    100% { transform: translateY(-50%) rotateY(360deg); }
}

@keyframes coin-spin-hot {
    0% { 
        transform: translateY(-50%) rotateY(0deg) scale(1); 
        filter: drop-shadow(0 3px 6px rgba(255, 143, 0, 0.4));
    }
    50% { 
        transform: translateY(-50%) rotateY(180deg) scale(1.1); 
        filter: drop-shadow(0 4px 8px rgba(255, 143, 0, 0.6));
    }
    100% { 
        transform: translateY(-50%) rotateY(360deg) scale(1); 
        filter: drop-shadow(0 3px 6px rgba(255, 143, 0, 0.4));
    }
}

@keyframes coin-spin-super {
    0% { 
        transform: translateY(-50%) rotateY(0deg) scale(1); 
        filter: drop-shadow(0 4px 8px rgba(255, 193, 7, 0.6)) hue-rotate(0deg);
    }
    25% { 
        transform: translateY(-50%) rotateY(90deg) scale(1.15); 
        filter: drop-shadow(0 5px 10px rgba(255, 193, 7, 0.8)) hue-rotate(90deg);
    }
    50% { 
        transform: translateY(-50%) rotateY(180deg) scale(1.2); 
        filter: drop-shadow(0 6px 12px rgba(255, 193, 7, 1)) hue-rotate(180deg);
    }
    75% { 
        transform: translateY(-50%) rotateY(270deg) scale(1.15); 
        filter: drop-shadow(0 5px 10px rgba(255, 193, 7, 0.8)) hue-rotate(270deg);
    }
    100% { 
        transform: translateY(-50%) rotateY(360deg) scale(1); 
        filter: drop-shadow(0 4px 8px rgba(255, 193, 7, 0.6)) hue-rotate(360deg);
    }
}

@keyframes label-pulse {
    0%, 100% { 
        transform: translateX(-50%) scale(1);
        opacity: 1;
    }
    50% { 
        transform: translateX(-50%) scale(1.05);
        opacity: 0.9;
    }
}

/* Enhanced Progress Bar Fill Positioning */
.progress-bar-fill {
    position: relative;
    overflow: visible;
}

/* Responsive Updates */
@media (max-width: 768px) {
    .progress-badge {
        min-width: 100px;
        max-width: 120px;
        font-size: 11px;
        padding: 6px 10px;
    }
    
    .progress-coin {
        font-size: 14px;
        right: -10px;
    }
    
    .progress-coin.hot {
        font-size: 16px;
    }
    
    .progress-coin.super {
        font-size: 18px;
    }
}

@media (max-width: 480px) {
    .progress-badge {
        min-width: 90px;
        max-width: 110px;
        font-size: 10px;
        padding: 5px 8px;
    }
    
    .progress-coin {
        font-size: 12px;
        right: -8px;
    }
    
    .progress-coin.hot {
        font-size: 14px;
    }
    
    .progress-coin.super {
        font-size: 16px;
    }
}

/* Enhanced hover effects */
.bonus-progress-item:hover .progress-coin {
    animation-duration: 0.5s;
}

.bonus-progress-item:hover .progress-coin.hot {
    animation-duration: 0.3s;
}

.bonus-progress-item:hover .progress-coin.super {
    animation-duration: 0.2s;
}


/* Hide coin animations - cleaner design */
.progress-coin {
    display: none !important;
}

/* Remove coin-related CSS overrides */
.progress-bar-fill {
    overflow: hidden;
}


/* Old Bonus Calculator styles removed — now using .bonus-result-minimal below */

/* New minimal design */
.bonus-result-minimal {
    background: rgba(255, 193, 7, 0.08);
    border: 1px solid rgba(255, 193, 7, 0.2);
    border-radius: 8px;
    padding: 16px;
    margin-top: 10px;
}

html.dark .bonus-result-minimal,
body.dark-mode .bonus-result-minimal {
    background: rgba(255, 193, 7, 0.1);
    border-color: rgba(255, 193, 7, 0.3);
}

.bonus-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.bonus-label {
    color: #333;
    font-size: 14px;
    font-weight: 500;
}

html.dark .bonus-label,
body.dark-mode .bonus-label {
    color: #f8f9fa;
}

.bonus-total-value {
    color: #ffc107;
    font-size: 18px;
    font-weight: 700;
}

.bonus-details {
    text-align: center;
    margin-bottom: 8px;
}

.bonus-breakdown-text {
    color: #6c757d;
    font-size: 13px;
    font-weight: 400;
}

html.dark .bonus-breakdown-text,
body.dark-mode .bonus-breakdown-text {
    color: #adb5bd;
}

.bonus-note {
    color: #6c757d;
    font-size: 11px;
    font-style: italic;
    text-align: center;
    margin-top: 8px;
    line-height: 1.3;
}

html.dark .bonus-note,
body.dark-mode .bonus-note {
    color: #868e96;
}

/* Responsive */
@media (max-width: 768px) {
    .bonus-result-minimal {
        padding: 12px;
    }
    
    .bonus-summary {
        flex-direction: column;
        gap: 4px;
        text-align: center;
    }
    
    .bonus-label {
        font-size: 13px;
    }
    
    .bonus-total-value {
        font-size: 16px;
    }
    
    .bonus-breakdown-text {
        font-size: 12px;
    }
    
    .bonus-note {
        font-size: 10px;
    }
}

/* === MODERN AFFILIATE DASHBOARD === */

/* === AFFILIATE DASHBOARD === */

/* Modern Card */
.modern-card {
  border: 1px solid #e9ecef;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

/* Referral Section - Mobile First + Dark Mode First */
.referral-section {
  padding: 32px;
  /* Default: Dark Mode เป็นหลัก */
  background: #15222E;
  border-right: 1px solid #183441;
}

.section-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 32px;
}

.section-title {
  flex: 1;
}

.section-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, #ffc107, #ffbf00);
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.section-title h5 {
  font-size: 18px;
  font-weight: 600;
  color: #212529;
  margin: 0 0 4px 0;
}

.section-title p {
  font-size: 14px;
  color: #6c757d;
  margin: 0;
}

.link-input-group {
  display: flex;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e9ecef;
  background: #fff;
}

.link-input {
  border: none;
  padding: 16px 20px;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 14px;
  background: transparent;
  flex: 1;
}

.link-input:focus {
  outline: none;
  box-shadow: none;
}

.copy-btn {
  border: none;
  border-left: 1px solid #e9ecef;
  padding: 16px 20px;
  background: #f8f9fa;
  color: #6c757d;
  transition: all 0.2s ease;
}

.copy-btn:hover {
  background: #ffc107;
  color: #000;
}

.social-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.social-actions .btn {
  border-radius: 10px;
  font-weight: 600;
  padding: 12px 24px;
  font-size: 14px;
  border: none;
  transition: all 0.2s ease;
}

.social-actions .btn:hover {
  transform: translateY(-1px);
}

/* Referral Tips - Mobile First + Dark Mode First */
.referral-tips {
  padding: 32px;
  /* Default: Dark Mode เป็นหลัก */
  background: #15222E;
  border-left: 1px solid #183441;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.tips-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  text-align: center;
  justify-content: center;
}

.tips-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffc107, #ffbf00);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #000;
}

.tips-header h6 {
  font-size: 16px;
  font-weight: 600;
  color: #212529;
  margin: 0;
}

.tips-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.tip-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.tip-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #f8f9fa;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #6c757d;
  flex-shrink: 0;
  margin-top: 2px;
}

.tip-text h6 {
  font-size: 14px;
  font-weight: 600;
  color: #212529;
  margin: 0 0 4px 0;
}

.tip-text p {
  font-size: 12px;
  color: #6c757d;
  margin: 0;
  line-height: 1.4;
}

.earning-highlight {
  margin-top: 24px !important;
  padding: 24px !important;
  background: linear-gradient(135deg, rgba(255, 193, 7, 0.1) 0%, #15222E 100%) !important;
  border: 2px solid #ffc107 !important;
  border-radius: 16px !important;
  text-align: center !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 4px 20px rgba(255, 193, 7, 0.2) !important;
  transition: all 0.3s ease !important;
}

.earning-highlight::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 193, 7, 0.1), transparent);
  animation: shimmer 3s infinite;
}

@keyframes shimmer {
  0% { left: -100%; }
  50% { left: 100%; }
  100% { left: 100%; }
}

.earning-highlight:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 30px rgba(255, 193, 7, 0.25) !important;
  border-color: #ffbf00 !important;
}

.earning-amount {
  font-size: 36px !important;
  font-weight: 800 !important;
  color: #ffc107 !important;
  line-height: 1 !important;
  margin-bottom: 8px !important;
  text-shadow: 0 2px 4px rgba(255, 193, 7, 0.2) !important;
}

.earning-label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #6c757d !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
}

/* Dark Mode Support */
html.dark .modern-card,
body.dark-mode .modern-card {
  background: #15222E !important;
  border-color: #183441 !important;
  color: #fff !important;
}

html.dark .stat-card.highlight,
body.dark-mode .stat-card.highlight {
  background: linear-gradient(135deg, rgba(255, 193, 7, 0.1) 0%, #15222E 100%) !important;
  border-color: #ffc107 !important;
}

html.dark .stat-card.success,
body.dark-mode .stat-card.success {
  background: linear-gradient(135deg, rgba(40, 167, 69, 0.1) 0%, #15222E 100%) !important;
  border-color: #28a745 !important;
}

/* Light Mode Override - เขียนทับ Dark Mode Default */
html.light .referral-section,
body.light-mode .referral-section {
  background: #ffffff !important;
  border-right-color: #e9ecef !important;
}

html.light .referral-tips,
body.light-mode .referral-tips {
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%) !important;
  border-left-color: #e9ecef !important;
}

html.light .table-header,
body.light-mode .table-header {
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%) !important;
  border-bottom-color: #f1f3f4 !important;
}

html.light .earning-highlight,
body.light-mode .earning-highlight {
  background: linear-gradient(135deg, #fff9e6 0%, #ffffff 100%) !important;
  box-shadow: 0 4px 20px rgba(255, 193, 7, 0.15) !important;
}

html.light .faq-item,
body.light-mode .faq-item {
  background: white !important;
}

html.light .logbox .logbox-content,
body.light-mode .logbox .logbox-content {
  background: #ffffff !important;
}

/* ============================================
   Light Mode: Signin Page (Login Form) Fixes (2026-03-31)
   ============================================ */

/* Login form inputs: light bg + dark text on white logbox */
html.light .logbox .hl-input .inputText {
  background: #f7f8f9;
  border-color: #e5e7eb;
  color: #3d4249;
}

html.light .logbox .hl-input .inputText:focus {
  border-color: #ffc107 !important;
}

/* Floating label inside login form */
html.light .logbox .hl-input .floating-label {
  color: #6b7280;
}

/* Remember me / Reset password pills */
html.light .logbox .hl-special {
  background: #f7f8f9;
  border-color: #e5e7eb;
  color: #3d4249;
}

html.light .logbox .hl-special:hover {
  border-color: #ffc107;
  color: #3d4249;
}

/* .logbox::before gradient border removed 2026-04-11 (dead rule) */

html.light .custom-affiliate-table,
body.light-mode .custom-affiliate-table {
  background: #ffffff !important;
}

html.light .custom-affiliate-table thead,
body.light-mode .custom-affiliate-table thead {
  background: #f8f9fa !important;
  border-bottom-color: #f1f3f4 !important;
}

html.light .custom-affiliate-table thead th,
body.light-mode .custom-affiliate-table thead th {
  color: #495057 !important;
}

html.light .custom-affiliate-table thead th i,
body.light-mode .custom-affiliate-table thead th i {
  color: #6c757d !important;
}

html.light .custom-affiliate-table tbody tr,
body.light-mode .custom-affiliate-table tbody tr {
  border-bottom-color: #f1f3f4 !important;
}

html.light .custom-affiliate-table tbody tr:hover,
body.light-mode .custom-affiliate-table tbody tr:hover {
  background-color: #f8f9fa !important;
}

html.light .custom-affiliate-table tbody td,
body.light-mode .custom-affiliate-table tbody td {
  color: #495057 !important;
}

html.dark .link-input-group,
body.dark-mode .link-input-group {
  background: linear-gradient(135deg, rgba(255, 193, 7, 0.1) 0%, #15222E 100%) !important;
  border-color: #ffc107 !important;
  box-shadow: 0 4px 20px rgba(255, 193, 7, 0.2) !important;
}

html.dark .tips-header h6,
body.dark-mode .tips-header h6,
html.dark .tip-text h6,
body.dark-mode .tip-text h6,
html.dark .earning-amount,
body.dark-mode .earning-amount {
  color: #fff !important;
}

html.dark .section-title h5,
body.dark-mode .section-title h5,
html.dark .stat-value,
body.dark-mode .stat-value,
html.dark .main-stat-number,
body.dark-mode .main-stat-number,
html.dark .sub-stat-value,
body.dark-mode .sub-stat-value {
  color: #f7fafc;
}

html.dark .section-title p,
body.dark-mode .section-title p,
html.dark .stat-label,
body.dark-mode .stat-label,
html.dark .main-stat-label,
body.dark-mode .main-stat-label,
html.dark .sub-stat-label,
body.dark-mode .sub-stat-label {
  color: #a0aec0;
}

/* Responsive Design */
@media (max-width: 992px) {
  .stats-sidebar {
    border-left: none;
    border-top: 1px solid #e9ecef;
  }

  .main-stat-number {
    font-size: 32px;
  }

  .sub-stats {
    flex-direction: row;
    gap: 8px;
  }

  .sub-stat {
    flex: 1;
    flex-direction: column;
    text-align: center;
    gap: 4px;
  }
}

@media (max-width: 768px) {
  .stat-card {
    margin-bottom: 16px;
  }

  .referral-section,
  .stats-sidebar {
    padding: 24px 20px;
  }

  .section-header {
    margin-bottom: 24px;
  }

  .social-actions {
    gap: 8px;
  }

  .social-actions .btn {
    flex: 1;
    font-size: 12px;
    padding: 10px 16px;
  }

  .main-stat-number {
    font-size: 28px;
  }

  .sub-stats {
    flex-direction: column;
  }
}

/* ========================================
   Service Search Dropdown Styles
   ======================================== */

.search-dropdown-wrapper {
  position: relative;
  width: 100%;
}

.search-input-container {
  position: relative;
  width: 100%;
}

/* Search Icon - รองรับทั้ง SVG และ Icon Font */
svg.search-input-icon,
i.search-input-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 1;
}

/* Light Mode - สีเทา */
svg.search-input-icon .search-icon-path {
  fill: #999;
}

i.search-input-icon {
  font-size: 18px;
  color: #999;
}

/* Dark Mode - สีเหลือง */
html.dark svg.search-input-icon .search-icon-path,
.dark svg.search-input-icon .search-icon-path,
body.dark-mode svg.search-input-icon .search-icon-path {
  fill: #ffbf00 !important;
}

html.dark i.search-input-icon,
.dark i.search-input-icon,
body.dark-mode i.search-input-icon {
  color: #ffbf00 !important;
}

/* Fix Select2 dropdown icons in dark mode */
html.dark .select2-container .fas.fa-search,
html.dark .input-wrapper__prepend .fas.fa-search,
html.dark .select2-container .fa-search,
.dark .select2-container .fas.fa-search,
body.dark-mode .select2-container .fas.fa-search {
  color: #ffbf00 !important;
}

#service-search-input {
  width: 100%;
  padding-left: 45px;
  padding-right: 40px;
}

.search-clear-btn {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #999;
  cursor: pointer;
  padding: 4px;
  font-size: 18px;
  line-height: 1;
  transition: color 0.2s;
}

.search-clear-btn:hover {
  color: #333;
}

html.dark .search-clear-btn:hover {
  color: #fff;
}

.search-results-dropdown {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  max-height: 400px;
  overflow-y: auto;
  z-index: 1000;
  animation: slideDown 0.2s ease-out;
}

html.dark .search-results-dropdown {
  background: #1a1f25;
  border-color: #2d3742;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.search-result-item {
  padding: 14px 16px;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
  transition: background-color 0.2s;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

html.dark .search-result-item {
  border-bottom-color: #2d3742;
}

.search-result-item:last-child {
  border-bottom: none;
}

.search-result-item:hover {
  background-color: #f8f9fa;
}

html.dark .search-result-item:hover {
  background-color: #252b32;
}

.search-result-id {
  flex-shrink: 0;
  background: #00B14D;
  color: #fff;
  padding: 4px 10px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 13px;
  min-width: 60px;
  text-align: center;
}

.search-result-content {
  flex: 1;
  min-width: 0;
}

.search-result-name {
  color: #333;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.4;
  margin-bottom: 4px;
  word-wrap: break-word;
}

html.dark .search-result-name {
  color: #e8e8e8;
}

.search-result-category {
  color: #888;
  font-size: 12px;
  display: inline-block;
  background: #f0f0f0;
  padding: 2px 8px;
  border-radius: 4px;
}

html.dark .search-result-category {
  color: #999;
  background: #2d3742;
}

.search-no-results {
  padding: 24px 16px;
  text-align: center;
  color: #999;
  font-size: 14px;
}

html.dark .search-no-results {
  color: #666;
}

.search-no-results i {
  font-size: 32px;
  margin-bottom: 8px;
  display: block;
  opacity: 0.5;
}

/* Scrollbar สำหรับ search results */
.search-results-dropdown::-webkit-scrollbar {
  width: 8px;
}

.search-results-dropdown::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

html.dark .search-results-dropdown::-webkit-scrollbar-track {
  background: #1a1f25;
}

.search-results-dropdown::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 10px;
}

html.dark .search-results-dropdown::-webkit-scrollbar-thumb {
  background: #444;
}

.search-results-dropdown::-webkit-scrollbar-thumb:hover {
  background: #999;
}

html.dark .search-results-dropdown::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Highlight search text */
.search-highlight {
  background-color: #ffeb3b;
  color: #000;
  font-weight: 600;
  padding: 1px 2px;
  border-radius: 2px;
}

html.dark .search-highlight {
  background-color: #ffc107;
  color: #000;
}

/* ============================================
   Reset Password Page
   ============================================ */

.reset-pw-page {
  background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}

.reset-pw-page::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at 30% 40%, rgba(255,255,255,0.1) 0%, transparent 50%),
              radial-gradient(circle at 70% 60%, rgba(255,152,0,0.2) 0%, transparent 50%);
  animation: resetPwFloat 20s ease-in-out infinite;
  pointer-events: none;
}

@keyframes resetPwFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(2deg); }
}

.reset-pw-wrapper {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 460px;
}

.reset-pw-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #4a3800;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 28px;
  transition: all 0.3s ease;
}

.reset-pw-back:hover {
  opacity: 1;
  color: #121d27;
  transform: translateX(-4px);
}

.reset-pw-back i {
  font-size: 18px;
}

.reset-pw-header {
  text-align: center;
  margin-bottom: 32px;
}

.reset-pw-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
  background: linear-gradient(135deg, #121d27 0%, #183441 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px rgba(18, 29, 39, 0.3);
}

.reset-pw-icon i {
  font-size: 36px;
  color: #ffc107;
}

.reset-pw-title {
  font-size: 28px;
  font-weight: 700;
  color: #121d27;
  margin-bottom: 8px;
}

.reset-pw-subtitle {
  font-size: 14px;
  font-weight: 600;
  color: #4a3800;
  max-width: 320px;
  margin: 0 auto;
  line-height: 1.6;
}

.reset-pw-card {
  background: linear-gradient(145deg, rgba(24, 52, 65, 0.95), rgba(18, 29, 39, 0.95));
  border-radius: 25px;
  border: none;
  box-shadow: 0 25px 60px rgba(18, 29, 39, 0.35);
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
}

.reset-pw-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #ffc107, transparent);
  animation: resetPwGlow 3s ease-in-out infinite;
}

@keyframes resetPwGlow {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

.reset-pw-card-body {
  padding: 44px 40px;
  position: relative;
}

.reset-pw-label {
  font-weight: 600;
  font-size: 14px;
  color: #ffffff !important;
  margin-bottom: 10px;
  display: block;
}

.reset-pw-input-wrap {
  background: rgba(24, 52, 65, 0.6);
  border: 1px solid rgba(255, 193, 7, 0.15);
  border-radius: 15px;
  height: 54px;
  width: 100%;
  position: relative;
  transition: all 0.3s ease;
}

.reset-pw-input-wrap:focus-within {
  background: rgba(18, 29, 39, 0.8);
  border-color: rgba(255, 193, 7, 0.4);
  box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.1);
}

.reset-pw-input-wrap .icon {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 54px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transition: 0.3s ease;
  color: #ffc107;
}

.reset-pw-input-wrap:focus-within .icon {
  color: #fff;
}

.reset-pw-input-wrap input {
  margin-left: 44px;
  width: calc(100% - 58px);
  height: 100%;
  border: none;
  outline: none;
  background: transparent;
  padding: 0 14px;
  font-weight: 500;
  font-size: 14px;
  color: #fff !important;
}

.reset-pw-input-wrap input::placeholder {
  color: rgba(255,255,255,0.4);
}

.btn-reset-pw {
  background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
  color: #121d27;
  border: none;
  border-radius: 15px;
  padding: 16px;
  font-size: 16px;
  font-weight: 700;
  width: 100%;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
  position: relative;
  overflow: hidden;
}

.btn-reset-pw::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.6s;
}

.btn-reset-pw:hover::before {
  left: 100%;
}

.btn-reset-pw:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(255, 152, 0, 0.35);
}

.btn-reset-pw:active {
  transform: translateY(0);
}

.reset-pw-footer {
  text-align: center;
  margin-top: 24px;
  font-size: 14px;
  color: #4a3800;
  font-weight: 600;
}

.reset-pw-footer a {
  color: #121d27;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: all 0.3s;
}

.reset-pw-footer a:hover {
  color: #000;
}

.reset-pw-info {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  padding: 14px 16px;
  background: rgba(255, 193, 7, 0.08);
  border-radius: 12px;
  border: 1px solid rgba(255, 193, 7, 0.12);
}

.reset-pw-info i {
  color: #ffc107;
  font-size: 18px;
  flex-shrink: 0;
}

.reset-pw-info span {
  color: #dee2e6 !important;
  font-size: 12px;
  line-height: 1.5;
}

@media (max-width: 575.98px) {
  .reset-pw-page {
    padding: 24px 16px;
  }

  .reset-pw-card-body {
    padding: 32px 24px;
  }

  .reset-pw-title {
    font-size: 24px;
  }

  .reset-pw-icon {
    width: 70px;
    height: 70px;
  }

  .reset-pw-icon i {
    font-size: 30px;
  }

  .btn-reset-pw {
    padding: 14px;
    font-size: 15px;
  }
}

/* ============================================
   Set New Password Page
   ============================================ */

.setnew-pw-page {
  background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}

.setnew-pw-page::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at 30% 40%, rgba(255,255,255,0.1) 0%, transparent 50%),
              radial-gradient(circle at 70% 60%, rgba(255,152,0,0.2) 0%, transparent 50%);
  animation: setnewPwFloat 20s ease-in-out infinite;
  pointer-events: none;
}

@keyframes setnewPwFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(2deg); }
}

.setnew-pw-wrapper {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 460px;
}

.setnew-pw-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #4a3800;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 28px;
  transition: all 0.3s ease;
}

.setnew-pw-back:hover {
  opacity: 1;
  color: #121d27;
  transform: translateX(-4px);
}

.setnew-pw-back i {
  font-size: 18px;
}

.setnew-pw-header {
  text-align: center;
  margin-bottom: 32px;
}

.setnew-pw-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
  background: linear-gradient(135deg, #121d27 0%, #183441 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px rgba(18, 29, 39, 0.3);
}

.setnew-pw-icon i {
  font-size: 36px;
  color: #ffc107;
}

.setnew-pw-title {
  font-size: 28px;
  font-weight: 700;
  color: #121d27;
  margin-bottom: 8px;
}

.setnew-pw-subtitle {
  font-size: 14px;
  font-weight: 600;
  color: #4a3800;
  max-width: 340px;
  margin: 0 auto;
  line-height: 1.6;
}

.setnew-pw-card {
  background: linear-gradient(145deg, rgba(24, 52, 65, 0.95), rgba(18, 29, 39, 0.95));
  border-radius: 25px;
  border: none;
  box-shadow: 0 25px 60px rgba(18, 29, 39, 0.35);
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
}

.setnew-pw-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #ffc107, transparent);
  animation: setnewPwGlow 3s ease-in-out infinite;
}

@keyframes setnewPwGlow {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

.setnew-pw-card-body {
  padding: 44px 40px;
  position: relative;
}

.setnew-pw-label {
  font-weight: 600;
  font-size: 14px;
  color: #ffffff !important;
  margin-bottom: 10px;
  display: block;
}

.setnew-pw-input-wrap {
  background: rgba(24, 52, 65, 0.6);
  border: 1px solid rgba(255, 193, 7, 0.15);
  border-radius: 15px;
  height: 54px;
  width: 100%;
  position: relative;
  transition: all 0.3s ease;
}

.setnew-pw-input-wrap:focus-within {
  background: rgba(18, 29, 39, 0.8);
  border-color: rgba(255, 193, 7, 0.4);
  box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.1);
}

.setnew-pw-input-wrap.readonly {
  opacity: 0.6;
  cursor: not-allowed;
}

.setnew-pw-input-wrap.readonly:focus-within {
  border-color: rgba(255, 193, 7, 0.15);
  box-shadow: none;
}

.setnew-pw-input-wrap .icon {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 54px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transition: 0.3s ease;
  color: #ffc107;
}

.setnew-pw-input-wrap:focus-within .icon {
  color: #fff;
}

.setnew-pw-input-wrap.readonly .icon {
  color: #6c757d;
}

.setnew-pw-input-wrap input {
  margin-left: 44px;
  width: calc(100% - 58px);
  height: 100%;
  border: none;
  outline: none;
  background: transparent;
  padding: 0 14px;
  font-weight: 500;
  font-size: 14px;
  color: #fff !important;
}

.setnew-pw-input-wrap.readonly input {
  color: #6c757d;
  cursor: not-allowed;
}

.setnew-pw-input-wrap input::placeholder {
  color: rgba(255,255,255,0.4);
}

.setnew-pw-input-wrap .pw-toggle {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #6c757d;
  font-size: 18px;
  cursor: pointer;
  transition: color 0.3s;
  padding: 0;
  display: flex;
  align-items: center;
}

.setnew-pw-input-wrap .pw-toggle:hover {
  color: #ffc107;
}

.setnew-pw-input-wrap .pw-toggle .ri-eye-off-line {
  display: none;
}

.setnew-pw-input-wrap .pw-toggle.active .ri-eye-line {
  display: none;
}

.setnew-pw-input-wrap .pw-toggle.active .ri-eye-off-line {
  display: inline;
}

.btn-setnew-pw {
  background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
  color: #121d27;
  border: none;
  border-radius: 15px;
  padding: 16px;
  font-size: 16px;
  font-weight: 700;
  width: 100%;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
  position: relative;
  overflow: hidden;
}

.btn-setnew-pw::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.6s;
}

.btn-setnew-pw:hover::before {
  left: 100%;
}

.btn-setnew-pw:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(255, 152, 0, 0.35);
}

.btn-setnew-pw:active {
  transform: translateY(0);
}

.setnew-pw-info {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 20px;
  padding: 14px 16px;
  background: rgba(255, 193, 7, 0.08);
  border-radius: 12px;
  border: 1px solid rgba(255, 193, 7, 0.12);
}

.setnew-pw-info i {
  color: #ffc107;
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}

.setnew-pw-info span {
  color: #dee2e6 !important;
  font-size: 12px;
  line-height: 1.5;
}

.setnew-pw-footer {
  text-align: center;
  margin-top: 24px;
  font-size: 14px;
  color: #4a3800;
  font-weight: 600;
}

.setnew-pw-footer a {
  color: #121d27;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: all 0.3s;
}

.setnew-pw-footer a:hover {
  color: #000;
}

@media (max-width: 575.98px) {
  .setnew-pw-page {
    padding: 24px 16px;
  }

  .setnew-pw-card-body {
    padding: 32px 24px;
  }

  .setnew-pw-title {
    font-size: 24px;
  }

  .setnew-pw-icon {
    width: 70px;
    height: 70px;
  }

  .setnew-pw-icon i {
    font-size: 30px;
  }

  .btn-setnew-pw {
    padding: 14px;
    font-size: 15px;
  }
}

/* ============================================
   INLINE STYLE MIGRATION - Utility Classes
   Added: 2026-03-31
   ============================================ */

/* --- U1. Color Utilities --- */
.text-gold { color: #ffc107; }
.text-dark-brand { color: #121d27; }
.text-muted-light { color: #666; }
.text-muted-secondary { color: #6c757d; }

/* --- U2. Typography Utilities --- */
.fw-600 { font-weight: 600; }
/* CLEANUP 2026-05-07: removed unused .fw-700, .fw-800 (Bootstrap CDN provides .fw-bold) */
.fs-13 { font-size: 13px; }
.fs-14 { font-size: 14px; }
.fs-16 { font-size: 16px; }
.fs-18 { font-size: 18px; }

/* --- U3. Layout Utilities --- */
/* CLEANUP 2026-05-07: removed unused .d-flex-center, .d-flex-between (Bootstrap d-flex/.justify-content-* provide same) */
.pos-relative { position: relative; }
/* CLEANUP 2026-05-07: removed unused .mr-icon-sm, .mr-icon-lg (kept .mr-icon — used) */
.mr-icon { margin-right: 8px; }

/* --- U4. Star Rating (smm-panel, Social Pages) --- */
.star-rating { color: #FFD700; margin-bottom: 10px; }

/* --- U5. Social Page: Hero Subtitle --- */
.sp-hero-subtitle {
    font-size: 22px;
    font-weight: 600;
    color: #ffc107;
    margin-top: 10px;
}

/* --- U6. Social Page: Buttons --- */
.btn-hero-primary {
    font-size: 16px;
    background-color: #121d27 !important;
    border-color: #121d27 !important;
    color: #fff !important;
}

.btn-hero-outline {
    font-size: 16px;
    border: 2px solid white;
    color: white;
    background: transparent;
}

.btn-hero-outline:hover {
    background: rgba(255,255,255,0.1);
    color: white;
}

.btn-hero-dark {
    font-size: 16px;
    background-color: #121d27;
    color: #fff;
}

/* Platform submit buttons */
.btn-platform-instagram { background-color: #E4405F !important; border-color: #E4405F !important; }
.btn-platform-facebook { background-color: #4267B2 !important; border-color: #4267B2 !important; }
.btn-platform-youtube { background-color: #FF0000 !important; border-color: #FF0000 !important; }
.btn-platform-tiktok { background-color: #000000 !important; border-color: #000000 !important; }
.btn-platform-twitter { background-color: #1DA1F2 !important; border-color: #1DA1F2 !important; }

/* --- U7. Social Page: Stat Icons --- */
.sp-icon-stat {
    font-size: 3rem;
}
.sp-icon-stat.green { color: #00AF4C; }
.sp-icon-stat.success { color: #28a745; }
.sp-icon-stat.warning { color: #ffc107; }
.sp-icon-stat.danger { color: #dc3545; }
.sp-icon-stat.tiktok { color: #ff0050; }
.sp-icon-stat.youtube { color: #FF0000; }

/* --- U8. Social Page: FAQ Section --- */
.sp-faq-section {
    background: #ffc107;
    padding: 60px 0;
}

.sp-faq-heading {
    color: #121d27;
}

.sp-faq-subtitle {
    color: #666;
    margin-top: 20px;
}

/* FAQ card component */
.sp-faq-card {
    background: #fff;
    border-radius: 15px;
    padding: 25px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    height: 100%;
}

.sp-faq-card h3 {
    color: #121d27;
    font-size: 18px;
    margin-bottom: 15px;
}

.sp-faq-card h3 i {
    color: #ffc107;
    margin-right: 10px;
}

.sp-faq-card p {
    color: #6c757d;
    line-height: 1.6;
}

/* --- U9. Twitter Landing Pages --- */
/* (.twitter-landing-page is just a scoping wrapper — no own styles needed) */

/* Hero section */
.twitter-landing-page .service-hero {
    background: linear-gradient(135deg, #1DA1F2 0%, #14171A 100%);
    padding: 80px 0;
    color: white;
}

.twitter-landing-page .platform-badge {
    background: rgba(255,255,255,0.2);
    padding: 10px 20px;
    border-radius: 50px;
    display: inline-block;
    margin-bottom: 20px;
}

.twitter-landing-page .platform-badge i {
    color: #000;
    background: white;
    padding: 8px;
    border-radius: 50%;
    margin-right: 10px;
}

.twitter-landing-page .hero-content h1 {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 20px;
}

.twitter-landing-page .hero-content .sp-hero-subtitle {
    font-size: 1.3rem;
    margin-bottom: 30px;
    opacity: 0.9;
    color: inherit;
    font-weight: normal;
    margin-top: 0;
}

.twitter-landing-page .btn-hero-primary {
    background: #1DA1F2 !important;
    border-color: #1DA1F2 !important;
    color: white !important;
    padding: 15px 30px;
    border-radius: 10px;
    margin-right: 20px;
    text-decoration: none;
    font-weight: bold;
}

.twitter-landing-page .btn-hero-outline {
    border: 2px solid white;
    color: white;
    padding: 13px 30px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: bold;
    background: transparent;
}

.twitter-landing-page .btn-hero-outline:hover {
    background: rgba(255,255,255,0.1);
    color: white;
}

/* Hero visual / icon circle */
.twitter-landing-page .tw-hero-visual {
    text-align: center;
}

.twitter-landing-page .tw-hero-icon-circle {
    background: #1DA1F2;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

.twitter-landing-page .tw-hero-icon-circle i {
    font-size: 4rem;
    color: white;
}

.twitter-landing-page .tw-hero-label {
    margin-top: 30px;
    font-size: 1.5rem;
}

.twitter-landing-page .tw-hero-label span {
    background: rgba(255,255,255,0.2);
    padding: 10px 20px;
    border-radius: 20px;
}

/* Content section */
.twitter-landing-page .tw-content-section {
    padding: 80px 0;
}

/* Insight/tip box */
.twitter-landing-page .tw-insight-box {
    padding: 20px;
    border-radius: 10px;
    margin: 30px 0;
}

.twitter-landing-page .tw-insight-box.bg-blue { background: #e3f2fd; }
.twitter-landing-page .tw-insight-box.bg-light-blue { background: #e1f5fe; }
.twitter-landing-page .tw-insight-box.bg-yellow { background: #fff3cd; }
.twitter-landing-page .tw-insight-box.bg-green { background: #d4edda; }

.twitter-landing-page .tw-insight-box h5 i {
    color: #1DA1F2;
}

.twitter-landing-page .tw-insight-box p {
    margin: 0;
}

/* Quick order sidebar card */
.twitter-landing-page .tw-quick-order {
    background: white;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.twitter-landing-page .tw-quick-order-item {
    display: flex;
    align-items: center;
    margin: 20px 0;
}

.twitter-landing-page .tw-quick-order-icon {
    width: 60px;
    height: 60px;
    background: #1DA1F2;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    flex-shrink: 0;
}

.twitter-landing-page .tw-quick-order-icon i {
    color: white;
    font-size: 1.5rem;
}

.twitter-landing-page .tw-quick-order-item p {
    color: #666;
    margin: 0;
}

.twitter-landing-page .tw-order-btn {
    background: #1DA1F2;
    color: white;
    padding: 12px;
    width: 100%;
    text-align: center;
    border-radius: 8px;
    text-decoration: none;
    display: block;
    font-weight: bold;
}

.twitter-landing-page .tw-order-btn:hover {
    background: #0d8ddb;
    color: white;
}

/* Benefits section */
.twitter-landing-page .tw-benefits-section {
    padding: 80px 0;
    background: #f8f9fa;
}

.twitter-landing-page .tw-benefit-item {
    display: flex;
    align-items: flex-start;
}

.twitter-landing-page .tw-benefit-item > i {
    color: #28a745;
    font-size: 1.5rem;
    margin-right: 15px;
    margin-top: 5px;
    flex-shrink: 0;
}

/* FAQ section */
.twitter-landing-page .tw-faq-section {
    padding: 80px 0;
}

.twitter-landing-page .tw-faq-card {
    margin-bottom: 15px;
}

.twitter-landing-page .tw-faq-card-inner {
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.twitter-landing-page .tw-faq-card-inner h5 {
    color: #1DA1F2;
    margin-bottom: 10px;
}

.twitter-landing-page .tw-faq-card-inner p {
    margin: 0;
}

/* CTA section */
.twitter-landing-page .tw-cta-section {
    padding: 80px 0;
    background: linear-gradient(135deg, #1DA1F2 0%, #14171A 100%);
    color: white;
}

.twitter-landing-page .tw-cta-heading {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.twitter-landing-page .tw-cta-text {
    font-size: 1.3rem;
    margin-bottom: 40px;
    opacity: 0.9;
}

.twitter-landing-page .tw-cta-buttons {
    margin-bottom: 40px;
}

.twitter-landing-page .tw-cta-btn-primary {
    background: #1DA1F2;
    color: white;
    padding: 18px 40px;
    border-radius: 10px;
    margin-right: 20px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1rem;
}

.twitter-landing-page .tw-cta-btn-primary:hover {
    background: #0d8ddb;
    color: white;
}

.twitter-landing-page .tw-cta-btn-outline {
    border: 2px solid white;
    color: white;
    padding: 16px 40px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1rem;
}

.twitter-landing-page .tw-cta-btn-outline:hover {
    background: rgba(255,255,255,0.1);
    color: white;
}

/* ============================================
   U10. SMM Panel Thailand Page
   ============================================ */

/* Review section — overrides .wcu-title/.wcu-text defaults */
.review-pages-container .wcu-title {
    font-size: 16px;
    color: #2C3E50;
}

.review-pages-container .wcu-text {
    font-size: 14px;
}

/* Comparison table */
.smm-comparison-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.smm-comparison-table th.col-feature {
    background: #121d27;
    color: #fff;
    padding: 25px 20px;
    text-align: center;
    font-weight: 700;
    font-size: 16px;
    border: none;
}

.smm-comparison-table th.col-likester {
    background: linear-gradient(135deg, #121d27 0%, #15222e 100%);
    color: #ffc107;
    padding: 25px 20px;
    text-align: center;
    font-weight: 700;
    font-size: 16px;
    border: none;
}

.smm-comparison-table th.col-competitor {
    background: #f8f9fa;
    color: #666;
    padding: 25px 20px;
    text-align: center;
    font-weight: 600;
    font-size: 16px;
    border: none;
}

.smm-comparison-table td {
    padding: 20px;
    border-bottom: 1px solid #f0f0f0;
}

.smm-comparison-table td.feature-cell {
    padding: 20px;
    font-weight: 600;
    color: #15222e;
}

.smm-comparison-table td.likester-cell {
    text-align: center;
    background: linear-gradient(135deg, #fff8e1 0%, #fff3c4 100%);
    color: #121d27;
    font-weight: 700;
    font-size: 18px;
}

.smm-comparison-table td.competitor-cell {
    padding: 15px;
    text-align: center;
    color: #666;
}

.smm-comparison-table td.competitor-cell.text-danger {
    color: #dc3545;
}

.smm-comparison-table td.competitor-cell.text-warning {
    color: #ffbf00;
    background: #fffbf0;
    font-weight: bold;
}

/* Social platform service rows */
.smm-service-card {
    background: white;
    border: 1px solid #e3e6f0;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.smm-service-header {
    background: #f8f9fc;
    border-bottom: 1px solid #e3e6f0;
    padding: 15px;
    border-radius: 8px 8px 0 0;
}

.smm-service-header h3 {
    color: #15222e;
    font-weight: 600;
    margin: 0;
    font-size: 16px;
}

.smm-service-body {
    background: white;
    padding: 15px;
    border-radius: 0 0 8px 8px;
}

.smm-service-item {
    border-bottom: 1px solid #eee;
}

.smm-service-item:last-child {
    border-bottom: none;
}

.smm-service-name {
    color: #15222e;
    font-weight: 600;
    margin-bottom: 5px;
    font-size: 14px;
}

.smm-service-desc {
    color: #666;
    font-size: 13px;
    margin-bottom: 0;
}

.smm-divider {
    margin: 10px 0;
    border-color: #e3e6f0;
}

/* SMM stat boxes */
.smm-stat-box {
    background: rgba(255,255,255,0.2);
    padding: 10px;
    border-radius: 8px;
}

.smm-stat-value {
    color: #FFD700;
    font-size: 20px;
    font-weight: bold;
}

.smm-stat-label {
    color: rgb(0,0,0);
    font-size: 12px;
}

/* Social platform service rows */
.smm-platform-row {
    padding: 8px 12px;
    border-radius: 8px;
    border-left: 3px solid transparent;
}

.smm-platform-row.facebook {
    background: rgba(66, 103, 178, 0.2);
    border-left-color: #4267B2;
}

.smm-platform-row.instagram {
    background: rgba(228, 64, 95, 0.2);
    border-left-color: #E4405F;
}

.smm-platform-row.youtube {
    background: rgba(255, 0, 0, 0.2);
    border-left-color: #FF0000;
}

.smm-platform-row.tiktok {
    background: rgba(0, 0, 0, 0.3);
    border-left-color: #000;
}

.smm-platform-row.twitter {
    background: rgba(29, 161, 242, 0.2);
    border-left-color: #1DA1F2;
}

.smm-platform-row.line {
    background: rgba(76, 175, 80, 0.2);
    border-left-color: #4CAF50;
}

/* Platform icon colors */
.smm-icon-facebook { color: #4267B2; }
.smm-icon-instagram { color: #E4405F; }
.smm-icon-youtube { color: #FF0000; }
.smm-icon-tiktok { color: #fff; }
.smm-icon-twitter { color: #1DA1F2; }
.smm-icon-line { color: #4CAF50; }

/* SMM features box */
.smm-features-box {
    background: rgba(255,255,255,0.15);
    padding: 20px;
    border-radius: 15px;
    border: 1px solid rgba(255,255,255,0.2);
}

.smm-features-title {
    color: #15222e;
    margin-bottom: 15px;
    text-align: center;
    font-weight: 600;
}

.smm-highlight-bar {
    background: rgba(255, 215, 0, 0.2);
    padding: 10px;
    border-radius: 8px;
}

.smm-highlight-text {
    color: #FFD700;
    font-weight: bold;
}

.smm-checklist-text {
    color: #15222e;
    opacity: 0.9;
    font-weight: 500;
}

/* SMM rating badge */
.smm-rating-badge {
    color: #FFD700;
    font-weight: bold;
    background: rgba(255,255,255,0.1);
    padding: 8px 12px;
    border-radius: 20px;
}

/* SMM review rating */
.smm-review-rating {
    color: #FFD700;
    font-size: 18px;
    font-weight: bold;
}

/* SMM CTA signup button */
.btn-smm-signup {
    font-size: 18px;
    padding: 15px;
    background: linear-gradient(45deg, #FF6B35, #FF8E53);
    box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);
}

.btn-smm-signup:hover {
    background: linear-gradient(45deg, #e55a2b, #ff7a40);
    box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4);
}

/* SMM hero outline dark button */
.btn-hero-outline-dark {
    font-size: 16px;
    border: 2px solid #15222e;
    color: #15222e;
    background: rgba(255,255,255,0.8);
    font-weight: 600;
}

.btn-hero-outline-dark:hover {
    background: rgba(255,255,255,1);
    color: #15222e;
}

/* SMM CTA dark button */
.btn-cta-dark {
    background: #15222e;
    color: #ffc107;
    padding: 15px 30px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 600;
    display: inline-block;
    transition: all 0.3s ease;
}

.btn-cta-dark:hover {
    background: #0d1117;
    color: #ffc107;
    transform: translateY(-2px);
}

/* Section backgrounds */
.smm-section-white {
    background: white;
    padding: 60px 0;
}

.smm-section-white-sm {
    background: white;
    padding: 40px 0;
}

/* CTA gold box */
.smm-cta-gold-box {
    background: linear-gradient(135deg, #ffc107, #ffca2c);
    padding: 40px;
    border-radius: 15px;
    color: #15222e;
}

/* Section headings */
.smm-section-title {
    color: #15222e;
    font-size: 24px;
    margin-bottom: 15px;
}

.smm-section-title-lg {
    color: #15222e;
    font-size: 32px;
    margin-bottom: 15px;
}

.smm-section-subtitle {
    color: #666;
    font-size: 14px;
}

.smm-section-subtitle-lg {
    color: #AFB0C0;
    font-size: 16px;
}

.smm-cta-subtitle {
    color: #856404;
    margin-bottom: 25px;
}

/* Comparison table header row */
.smm-comparison-header-row {
    background: linear-gradient(135deg, #ffc107, #ffca2c);
    color: #15222e;
}

.smm-comparison-th {
    padding: 20px;
    text-align: center;
    font-weight: 600;
    border: none;
}

.smm-comparison-th-highlight {
    padding: 20px;
    text-align: center;
    font-weight: 600;
    border: none;
    background: linear-gradient(135deg, #ffbf00, #ffd700);
}

/* Comparison table wrapper */
.smm-comparison-table-wrap {
    border-collapse: collapse;
    background: white;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    border-radius: 12px;
    overflow: hidden;
}

/* Comparison table one-off cell */
.smm-comparison-cell-gold {
    padding: 15px;
    text-align: center;
    color: #ffbf00;
}

/* --- U12. YouTube Landing Page --- */

/* Testimonials section background */
.youtube-landing-page .testimonials-section {
    background: linear-gradient(135deg, #ff0000 0%, #cc0000 100%);
    padding: 80px 0;
    margin-top: 0;
}

/* Testimonials section heading */
.youtube-landing-page .testimonials-section .section-header h2 {
    color: white;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

/* Testimonials section subtitle */
.youtube-landing-page .testimonials-section .section-header p {
    color: rgba(255,255,255,0.9);
    font-size: 1.2rem;
    max-width: 600px;
    margin: 0 auto;
}

/* Testimonial card override */
.youtube-landing-page .testimonial-card {
    background: white;
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    height: 100%;
}

/* Testimonial stars */
.youtube-landing-page .testimonial-rating .fas {
    color: #ffc107;
}

/* Testimonial body text */
.youtube-landing-page .testimonial-card > p {
    color: #555;
    line-height: 1.7;
    margin-bottom: 20px;
    font-size: 15px;
}

/* Author name */
.youtube-landing-page .yt-author-name {
    font-weight: 600;
    color: #333;
    margin-bottom: 2px;
}

/* Author location */
.youtube-landing-page .yt-author-location {
    color: #666;
    font-size: 13px;
}

/* Author avatar variant colors */
.youtube-landing-page .author-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    margin-right: 15px;
}
.youtube-landing-page .author-avatar--red { background: linear-gradient(135deg, #ff0000, #cc0000); }
.youtube-landing-page .author-avatar--green { background: linear-gradient(135deg, #4caf50, #8bc34a); }
.youtube-landing-page .author-avatar--blue { background: linear-gradient(135deg, #2196f3, #64b5f6); }
.youtube-landing-page .author-avatar--orange { background: linear-gradient(135deg, #ff9800, #ffc107); }
.youtube-landing-page .author-avatar--purple { background: linear-gradient(135deg, #9c27b0, #e1bee7); }
.youtube-landing-page .author-avatar--pink { background: linear-gradient(135deg, #e91e63, #f06292); }

/* ========================================
   U13. Signin Page
   ======================================== */

/* --- Signin: Hero buttons --- */
.signin-hero-dark-btn {
    font-size: 16px;
    background-color: #121d27;
}

/* --- Signin: Competitor Comparison Section --- */
.signin-comparison-section {
    background: #ffc107;
    padding: 60px 0;
}

.signin-comparison-section .home-title h2 {
    color: #121d27;
}

.signin-comparison-section .home-title p {
    color: #666;
    font-size: 16px;
}

.signin-comparison-section .hh-content i {
    color: #fff;
}

/* --- Signin: Comparison Table --- */
.signin-comparison-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.signin-comparison-table th.col-feature {
    background: #121d27;
    color: #fff;
    padding: 25px 20px;
    text-align: center;
    font-weight: 700;
    font-size: 16px;
    border: none;
}

.signin-comparison-table th.col-likester {
    background: linear-gradient(135deg, #121d27 0%, #15222e 100%);
    color: #ffc107;
    padding: 25px 20px;
    text-align: center;
    font-weight: 700;
    font-size: 16px;
    border: none;
    position: relative;
}

.signin-comparison-table th.col-competitor {
    background: #f8f9fa;
    color: #666;
    padding: 25px 20px;
    text-align: center;
    font-weight: 600;
    font-size: 16px;
    border: none;
}

.signin-comparison-table .best-badge {
    position: absolute;
    top: 5px;
    right: 10px;
    background: #ffc107;
    color: #121d27;
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
}

.signin-comparison-table tr {
    border-bottom: 1px solid #f0f0f0;
}

.signin-comparison-table td.feature-cell {
    padding: 20px;
    font-weight: 600;
    color: #121d27;
    background: #fff;
}

.signin-comparison-table td.feature-cell i {
    color: #ffc107;
    margin-right: 8px;
}

.signin-comparison-table td.likester-cell {
    padding: 20px;
    text-align: center;
    background: linear-gradient(135deg, #fff8e1 0%, #fff3c4 100%);
    color: #121d27;
    font-weight: 700;
    font-size: 18px;
}

.signin-comparison-table td.competitor-cell {
    padding: 20px;
    text-align: center;
    background: #fff;
    color: #666;
    font-weight: 600;
}

.signin-comparison-table td.competitor-cell.text-danger {
    color: #dc3545;
}

/* --- Signin: CTA Dark Box --- */
.signin-cta-section {
    background: linear-gradient(135deg, #121d27 0%, #15222e 100%);
    padding: 40px;
    border-radius: 20px;
    color: white;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.signin-cta-section h3 {
    margin-bottom: 20px;
    font-size: 28px;
    font-weight: 700;
    color: #ffc107;
}

.signin-cta-section > p {
    font-size: 18px;
    margin-bottom: 30px;
    opacity: 0.9;
}

/* --- Signin: CTA Pill Buttons --- */
.signin-cta-pill-gold {
    background: #ffc107;
    color: #121d27;
    padding: 12px 25px;
    border-radius: 25px;
    font-weight: 700;
    margin: 5px;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
}

.signin-cta-pill-white {
    background: white;
    color: #121d27;
    padding: 12px 25px;
    border-radius: 25px;
    font-weight: 700;
    margin: 5px;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
}

.signin-cta-pill-outline {
    background: transparent;
    color: white;
    padding: 12px 25px;
    border-radius: 25px;
    font-weight: 700;
    margin: 5px;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
    border: 2px solid white;
}

.signin-cta-pill-icon {
    margin-right: 8px;
}

/* --- Signin: FAQ Section --- */
.signin-faq-section {
    background: #ffc107;
    padding: 60px 0;
}

.signin-faq-section .home-title h2 {
    color: #121d27;
}

.signin-faq-section .home-title p {
    color: #666;
    margin-top: 20px;
}

.signin-faq-section .hh-content i {
    color: #fff;
}

/* --- Signin: Blog Section --- */
.signin-blog-section {
    background: #ffc107;
    padding: 60px 0;
}

.signin-blog-section .home-title h2 {
    color: #121d27;
}

.signin-blog-section .home-title p {
    color: #666;
    margin-top: 20px;
}

.signin-blog-section .hh-content i {
    color: #fff;
}

/* --- Signin: Blog Card --- */
.signin-blog-card {
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    height: 100%;
    transition: transform 0.3s ease;
}

.signin-blog-card-body {
    padding: 25px;
}

.signin-blog-card-body h3 {
    color: #121d27;
    font-size: 18px;
    margin-bottom: 15px;
    line-height: 1.4;
}

.signin-blog-card-body p {
    color: #6c757d;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 20px;
}

.signin-blog-card-body .btn {
    color: #121d27;
    border-color: #121d27;
    padding: 8px 20px;
    font-size: 14px;
    font-weight: 600;
}

/* Blog card thumbnail with dynamic background-image */
.signin-blog-thumb {
    height: 200px;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}

.signin-blog-thumb-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(18, 29, 39, 0.7));
    height: 80px;
}

.signin-blog-thumb-icon {
    position: absolute;
    bottom: 20px;
    right: 20px;
    font-size: 30px;
    color: rgba(255,255,255,0.3);
}

.signin-blog-thumb-icon-lg {
    position: absolute;
    bottom: 20px;
    right: 20px;
    font-size: 40px;
    color: rgba(255,255,255,0.3);
}

/* Blog card fallback gradient backgrounds */
.signin-blog-grad-gold {
    background: linear-gradient(135deg, #ffc107 0%, #ffbf00 100%);
    height: 200px;
    position: relative;
    overflow: hidden;
}

.signin-blog-grad-dark {
    background: linear-gradient(135deg, #121d27 0%, #224E64 100%);
    height: 200px;
    position: relative;
    overflow: hidden;
}

.signin-blog-grad-mixed {
    background: linear-gradient(135deg, #ffc107 0%, #ff6b6b 50%, #121d27 100%);
    height: 200px;
    position: relative;
    overflow: hidden;
}

.signin-blog-grad-dark .signin-blog-thumb-overlay {
    background: linear-gradient(transparent, rgba(0,0,0,0.5));
}

.signin-blog-grad-mixed .signin-blog-thumb-overlay {
    background: linear-gradient(transparent, rgba(0,0,0,0.5));
}

/* --- Signin: Featured Keywords CTA --- */
.signin-featured-keywords {
    background: linear-gradient(135deg, #121d27 0%, #15222e 100%);
    padding: 40px;
    border-radius: 20px;
    color: white;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.signin-featured-keywords h3 {
    color: #ffc107;
    margin-bottom: 30px;
    font-size: 26px;
    font-weight: 700;
}

/* --- Signin: Bottom CTA Pills --- */
.signin-pill-outline-sm {
    background: transparent;
    color: white;
    border: 2px solid white;
    padding: 10px 20px;
    border-radius: 20px;
    font-weight: 600;
    margin: 5px;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
    font-size: 14px;
}

.signin-pill-outline-sm i {
    margin-right: 5px;
}

/* --- Signin: Bottom Final CTA --- */
.signin-bottom-cta h3 {
    color: #121d27;
    margin-bottom: 20px;
}

.signin-bottom-cta .btn {
    font-size: 18px;
    padding: 15px 40px;
}

.signin-view-all-btn {
    background: transparent;
    color: white;
    border: 2px solid white;
    padding: 15px 40px;
    font-size: 18px;
    font-weight: 700;
    border-radius: 15px;
}

/* --- Signin: Tag/Badge Pills --- */
.signin-tag-gold {
    background: #ffc107;
    color: #121d27;
    padding: 10px 20px;
    border-radius: 25px;
    font-weight: 600;
    margin: 0 10px;
}

.signin-tag-dark {
    background: #121d27;
    color: #fff;
    padding: 10px 20px;
    border-radius: 25px;
    font-weight: 600;
    margin: 0 10px;
}

/* --- Signin: Google Sign-In hidden --- */
.signin-google-hidden {
    display: none;
}

.signin-google-svg {
    margin-right: 10px;
}

/* ========================================
   U14. Facebook Landing Page: Testimonials & Review (Blue Section)
   ======================================== */

/* --- FB Testimonials: Blue gradient section --- */
.fb-testimonials-blue {
    background: linear-gradient(135deg, #1877f2 0%, #42a5f5 100%);
    padding: 80px 0;
    margin-top: 0;
}

.fb-testimonials-blue .section-header h2 {
    color: white;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.fb-testimonials-blue .section-header p {
    color: rgba(255,255,255,0.9);
    font-size: 1.2rem;
    max-width: 600px;
    margin: 0 auto;
}

/* --- FB Testimonials: Card --- */
.fb-testimonial-card {
    background: white;
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    height: 100%;
}

.fb-testimonial-card .testimonial-rating .fas {
    color: #ffc107;
}

.fb-testimonial-card > p {
    color: #555;
    line-height: 1.7;
    margin-bottom: 20px;
    font-size: 15px;
}

.fb-testimonial-author {
    display: flex;
    align-items: center;
}

.fb-testimonial-author-name {
    font-weight: 600;
    color: #333;
    margin-bottom: 2px;
}

.fb-testimonial-author-location {
    color: #666;
    font-size: 13px;
}

/* --- FB Testimonials: Author Avatars --- */
.fb-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    margin-right: 15px;
}

.fb-avatar-1 { background: linear-gradient(135deg, #1877f2, #42a5f5); }
.fb-avatar-2 { background: linear-gradient(135deg, #e91e63, #f06292); }
.fb-avatar-3 { background: linear-gradient(135deg, #4caf50, #8bc34a); }
.fb-avatar-4 { background: linear-gradient(135deg, #ff9800, #ffc107); }
.fb-avatar-5 { background: linear-gradient(135deg, #9c27b0, #e1bee7); }
.fb-avatar-6 { background: linear-gradient(135deg, #3f51b5, #7986cb); }

/* --- FB Testimonials: Review Submission --- */
.fb-review-submission {
    background: rgba(255,255,255,0.1);
    border-radius: 20px;
    padding: 40px;
    text-align: center;
}

.fb-review-submission h3 {
    color: white;
    margin-bottom: 20px;
    font-size: 1.8rem;
}

.fb-review-submission > p {
    color: rgba(255,255,255,0.9);
    margin-bottom: 30px;
}

/* --- FB Testimonials: Review Form --- */
.fb-review-form {
    max-width: 600px;
    margin: 0 auto;
}

.fb-review-form .form-control {
    border-radius: 10px;
    padding: 15px;
    border: 2px solid rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.1);
    color: white;
}

.fb-review-form textarea.form-control {
    resize: vertical;
}

.fb-review-form .rating-label {
    color: white;
    display: block;
    margin-bottom: 10px;
    font-weight: 600;
}

.fb-review-form .star-rating {
    font-size: 2rem;
}

.fb-review-form .rating-star {
    color: #ffc107;
    cursor: pointer;
    margin-right: 5px;
}

.fb-review-form .btn-warning {
    padding: 15px 40px;
    border-radius: 10px;
    font-weight: 600;
    border: none;
    min-width: 200px;
}

/* ===================================================================
   U16. NewOrder Page - Inline Migration
   =================================================================== */

/* --- U16a. Alert Banners --- */
.nwo-alert-success {
  color: #ffffff;
  background-color: #28a745;
  border-color: #28a745;
}

.nwo-alert-danger {
  color: #ffffff;
  background-color: #dc3545;
  border-color: #dc3545;
}

.nwo-alert-warning {
  color: #212529;
  background-color: #fff3cd;
  border-color: #ffeaa7;
}

/* Alert CTA Buttons */
.nwo-alert-btn {
  display: inline-block;
  border: 1px solid #ffffff;
  border-radius: 12px;
  padding: 4px 12px;
  font-weight: 600;
  text-decoration: none;
  font-size: 12px;
  margin-left: 8px;
  transition: all 0.2s ease;
  vertical-align: middle;
}

.nwo-alert-btn--success {
  background: #ffffff;
  color: #28a745;
}
.nwo-alert-btn--success:hover {
  background: rgba(255,255,255,0.1);
  color: #ffffff;
}

.nwo-alert-btn--danger {
  background: #ffffff;
  color: #dc3545;
}
.nwo-alert-btn--danger:hover {
  background: rgba(255,255,255,0.1);
  color: #ffffff;
}

.nwo-alert-btn--warning {
  background: #ffc107;
  color: #212529;
  border-color: #ffc107;
}
.nwo-alert-btn--warning:hover {
  background: #e0a800;
  border-color: #e0a800;
}

/* Alert small icon (11px, margin-right 4px) */
.nwo-icon-sm {
  font-size: 11px;
  margin-right: 4px;
}

/* Alert envelope icon (margin-right 8px) */
.nwo-icon-mr8 {
  margin-right: 8px;
}

/* --- U16b. Card Badge Positioning --- */
.nwo-pos-rel {
  position: relative;
}

.nwo-card-badge-wrap {
  position: absolute;
  top: -10px;
  right: -12px;
  z-index: 10;
}

/* Card badge buttons (Dashboard / Use Points) */
.nwo-card-badge-btn {
  border: none;
  font-weight: bold;
  padding: 6px 10px;
  border-radius: 18px;
  font-size: 11px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  transition: all 0.3s ease;
  white-space: nowrap;
  color: #fff;
}
.nwo-card-badge-btn:hover {
  transform: scale(1.05);
}

.nwo-card-badge-btn--green {
  background: linear-gradient(45deg, #00B14D, #00875A);
  box-shadow: 0 2px 8px rgba(0,177,77,0.4);
}

.nwo-card-badge-btn--gold {
  background: linear-gradient(45deg, #ffc107, #ff9800);
  box-shadow: 0 2px 8px rgba(255,193,7,0.4);
  color: #000;
}

/* Points dollar icon */
.nwo-points-icon {
  color: #fbc10c;
  cursor: pointer;
}

/* --- U16c. Check-in Banner Section --- */
.nwo-ci-banner-card {
  border-radius: 20px;
  cursor: pointer;
}

.nwo-ci-banner-pad {
  padding: 0.75rem 1rem;
}

.nwo-ci-banner-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.nwo-ci-banner-left {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.nwo-ci-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffc107, #ffab00);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0C141B;
  font-size: 14px;
  flex-shrink: 0;
}

.nwo-ci-text {
  font-weight: 600;
  font-size: 13px;
}

.nwo-ci-streak-badge {
  margin-left: 8px;
  font-size: 12px;
  color: #ffc107;
  font-weight: 600;
}

.nwo-ci-dots {
  display: flex;
  gap: 4px;
  align-items: center;
}

.nwo-ci-btn {
  background: linear-gradient(45deg, #ffc107, #ffab00);
  color: #0C141B;
  border: none;
  border-radius: 20px;
  padding: 4px 16px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

/* --- U16d. Cashback Section --- */
.nwo-cb-card {
  border-radius: 12px;
}

.nwo-cb-content {
  padding: 0.875rem;
}

.nwo-cb-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.nwo-cb-header-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.nwo-cb-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffc107, #e2aa03);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 12px;
}

.nwo-cb-title-wrap {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.nwo-cb-title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
}

.nwo-cb-tooltip-wrapper {
  position: relative;
  display: inline-flex;
}

.nwo-cb-tooltip-icon {
  color: #9ca3af;
  font-size: 12px;
  cursor: help;
}

.nwo-cb-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #1f2937;
  color: white;
  padding: 0.75rem;
  border-radius: 8px;
  font-size: 11px;
  width: 220px;
  z-index: 99999;
  display: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  line-height: 1.4;
}

.nwo-cb-tooltip-heading {
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.nwo-cb-tooltip-body {
  color: #d1d5db;
}

.nwo-cb-tooltip-footer {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(255,255,255,0.1);
  color: #ffc107;
  font-size: 10px;
}

.nwo-cb-tooltip-arrow {
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #1f2937;
}

.nwo-cb-header-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.nwo-cb-period {
  color: #6b7280;
  font-size: 10px;
}

.nwo-cb-status-badge {
  padding: 3px 8px;
  border-radius: 10px;
  font-size: 9px;
  font-weight: 600;
}

/* Cashback Progress Bar */
.nwo-cb-progress-track {
  background: #e5e7eb;
  border-radius: 6px;
  height: 8px;
  overflow: hidden;
  margin-bottom: 0.375rem;
}

.nwo-cb-progress-bar {
  height: 100%;
  border-radius: 6px;
  background: linear-gradient(90deg, #ffc107, #e2aa03);
  width: 0%;
  transition: width 0.5s ease;
}

/* Cashback Stats Row */
.nwo-cb-stats-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
}

.nwo-text-muted {
  color: #6b7280;
}

.nwo-text-gold {
  color: #e2aa03;
}

.nwo-text-darkgold {
  color: #b8860b;
}

.nwo-cb-reward-preview {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 2px 8px;
  background: rgba(255, 193, 7, 0.1);
  border-radius: 6px;
  font-size: 10px;
}

.nwo-text-right {
  text-align: right;
}

/* Cashback Tier Info */
.nwo-cb-tier-info {
  margin-top: 0.5rem;
  padding: 0.625rem;
  background: linear-gradient(135deg, #fff9e6, #fff3cd);
  border-radius: 8px;
  display: none;
}

.nwo-cb-tier-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.nwo-cb-tier-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.nwo-cb-trophy {
  color: #b8860b;
  font-size: 14px;
}

.nwo-cb-tier-label {
  font-size: 10px;
  color: #92400e;
}

.nwo-cb-tier-name {
  font-size: 13px;
  color: #b8860b;
}

.nwo-cb-tier-reward {
  font-size: 15px;
  color: #b8860b;
}

/* Cashback Ticket Button */
.nwo-cb-ticket-btn {
  display: block;
  width: 100%;
  padding: 8px;
  border: none;
  border-radius: 6px;
  background: linear-gradient(135deg, #ffc107, #e2aa03);
  color: white;
  font-weight: 600;
  font-size: 12px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
}
.nwo-cb-ticket-btn:hover {
  transform: translateY(-1px);
}

/* Cashback icon-mr5 */
.nwo-icon-mr5 {
  margin-right: 5px;
}

.nwo-icon-mr4 {
  margin-right: 4px;
}

.nwo-icon-mr6 {
  margin-right: 6px;
}

/* Cashback Rejection */
.nwo-cb-rejection {
  margin-top: 0.5rem;
  padding: 0.5rem 0.625rem;
  background: #fee2e2;
  border-radius: 6px;
  font-size: 11px;
  color: #991b1b;
  display: none;
}

/* Cashback Current Accumulating */
.nwo-cb-accumulating {
  margin-top: 0.5rem;
  padding: 0.375rem 0.625rem;
  background: #f3f4f6;
  border-radius: 6px;
  font-size: 10px;
  color: #6b7280;
  display: none;
}

/* Cashback Info Collapsible */
.nwo-cb-info-divider {
  margin-top: 0.75rem;
  border-top: 1px dashed #e5e7eb;
  padding-top: 0.625rem;
}

.nwo-cb-info-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: 0.25rem 0;
}

.nwo-cb-info-label {
  font-size: 11px;
  color: #6b7280;
  font-weight: 500;
}

.nwo-cb-info-chevron {
  font-size: 10px;
  color: #9ca3af;
  transition: transform 0.2s;
}

.nwo-cb-info-content {
  display: none;
  margin-top: 0.5rem;
}

.nwo-cb-info-desc {
  font-size: 11px;
  color: #6b7280;
  line-height: 1.5;
  margin-bottom: 0.625rem;
}

/* Cashback Tier Table */
.nwo-cb-tier-table {
  background: linear-gradient(135deg, #fffbeb, #fef3c7);
  border: 1px solid #fcd34d;
  border-radius: 8px;
  padding: 0.625rem;
  margin-bottom: 0.5rem;
}

.nwo-cb-tier-table-head {
  font-size: 10px;
  font-weight: 600;
  color: #92400e;
  margin-bottom: 0.5rem;
}

.nwo-cb-tier-list {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.nwo-cb-tier-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.375rem 0.5rem;
  background: rgba(255,255,255,0.6);
  border-radius: 6px;
}

.nwo-cb-tier-spend {
  font-size: 11px;
  color: #78350f;
}

.nwo-cb-tier-get {
  font-size: 11px;
  font-weight: 700;
  color: #b45309;
}

/* Cashback Deadline */
.nwo-cb-deadline {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 10px;
  color: #ef4444;
  background: #fef2f2;
  padding: 0.375rem 0.5rem;
  border-radius: 6px;
}

/* --- U16e. Cashback Request Modal --- */
.nwo-cbm-content {
  background: linear-gradient(135deg, #0C141B 0%, #121D27 100%);
  border: 1px solid rgba(255,193,7,0.3);
  border-radius: 16px;
}

.nwo-cbm-header {
  border-bottom: 1px solid rgba(255,193,7,0.2);
  padding: 1.25rem;
}

.nwo-cbm-title {
  color: #ffc107;
  font-weight: 600;
}

.nwo-cbm-body {
  padding: 1.25rem;
}

.nwo-cbm-summary {
  background: rgba(255,193,7,0.1);
  border: 1px solid rgba(255,193,7,0.3);
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: 1.25rem;
}

.nwo-cbm-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.nwo-cbm-row:last-child {
  margin-bottom: 0;
}

.nwo-cbm-row--border {
  padding-top: 0.75rem;
  border-top: 1px dashed rgba(255,193,7,0.3);
  margin-bottom: 0;
}

.nwo-cbm-label-muted {
  color: #9ca3af;
  font-size: 13px;
}

.nwo-cbm-value {
  font-size: 14px;
}

.nwo-cbm-label-highlight {
  color: #ffc107;
  font-size: 14px;
  font-weight: 600;
}

.nwo-cbm-amount {
  color: #ffc107;
  font-size: 18px;
}

/* Cashback form labels & icons */
.nwo-cbm-form-label {
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 8px;
}

.nwo-cbm-icon-gold {
  color: #ffc107;
}

.nwo-text-required {
  color: #ef4444;
}

/* Cashback form inputs */
.nwo-cbm-input {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,193,7,0.3);
  color: #fff;
  border-radius: 10px;
  padding: 12px;
  font-size: 14px;
}

/* Cashback form error */
.nwo-cbm-form-error {
  display: none;
  background: rgba(239,68,68,0.1);
  border: 1px solid rgba(239,68,68,0.3);
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 1rem;
  color: #fca5a5;
  font-size: 13px;
}

/* Cashback submit button */
.nwo-cbm-submit {
  background: linear-gradient(135deg, #ffc107, #e2aa03);
  border: none;
  color: #1a1a2e;
  padding: 14px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 15px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(255,193,7,0.3);
}

/* Cashback footer note */
.nwo-cbm-footer-note {
  margin-top: 0.75rem;
  text-align: center;
  font-size: 11px;
  color: #6b7280;
}

/* --- U16f. Points Request Modal --- */
.nwo-points-dialog {
  max-width: 95vw;
  width: 600px;
  margin: 1rem auto;
}

.nwo-points-content {
  border-radius: 20px;
  overflow: hidden;
  border: none;
}

.nwo-points-header {
  border-bottom: 1px solid #e5e7eb;
  border-top: none;
  border-left: none;
  border-right: none;
  border-radius: 20px 20px 0 0;
}

/* --- U16g. Dashboard Footer Info --- */
.nwo-footer-info-sub {
  margin-top: 0.375rem;
  flex-wrap: wrap;
}

.nwo-icon-gold {
  color: #f59e0b;
}

.nwo-icon-green {
  color: #00B14D;
}

/* --- U16h. Search Input Icon (SVG) --- */
.nwo-search-svg {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 1;
}

/* --- U16i. Custom Points Modals (Insufficient / Cooldown) --- */
.nwo-custom-modal-box {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  height: auto;
  right: auto;
  bottom: auto;
  border-radius: 15px;
  background-color: var(--modal-bg, #121d27);
  color: var(--modal-text, #ffffff);
}

.nwo-custom-modal-box--danger {
  max-width: 400px;
  max-height: 300px;
  border: 1px solid #dc3545;
  box-shadow: 0 10px 30px rgba(220, 53, 69, 0.3);
}

.nwo-custom-modal-box--warning {
  max-width: 420px;
  max-height: 320px;
  border: 1px solid #ff9800;
  box-shadow: 0 10px 30px rgba(255, 152, 0, 0.3);
}

.nwo-custom-modal-header {
  padding: 20px;
  border-bottom: 1px solid var(--modal-border, #2a3441);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nwo-flex-center {
  display: flex;
  align-items: center;
}

.nwo-custom-modal-icon--danger {
  color: #dc3545;
  font-size: 24px;
  margin-right: 12px;
}

.nwo-custom-modal-icon--warning {
  color: #ff9800;
  font-size: 24px;
  margin-right: 12px;
}

.nwo-custom-modal-title {
  margin: 0;
  color: var(--modal-text, #ffffff);
  font-weight: 600;
}

.nwo-custom-modal-close {
  background: none;
  border: none;
  color: var(--modal-text, #ffffff);
  font-size: 20px;
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nwo-custom-modal-body {
  padding: 20px;
  color: var(--modal-text, #ffffff);
  line-height: 1.6;
}

.nwo-custom-modal-msg {
  margin: 0;
  font-size: 14px;
  color: var(--modal-text, #ffffff);
}

.nwo-custom-modal-footer {
  padding: 15px 20px;
  border-top: 1px solid var(--modal-border, #2a3441);
  text-align: right;
}

.nwo-custom-modal-btn {
  color: white;
  border: none;
  padding: 8px 20px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.2s ease;
}

.nwo-custom-modal-btn--danger {
  background: #dc3545;
}
.nwo-custom-modal-btn--danger:hover {
  background: #c82333;
}

.nwo-custom-modal-btn--warning {
  background: #ff9800;
}
.nwo-custom-modal-btn--warning:hover {
  background: #f57c00;
}

/* Cooldown info box */
.nwo-cooldown-info {
  margin-top: 15px;
  padding: 12px;
  background: rgba(255, 152, 0, 0.1);
  border-radius: 8px;
  border-left: 3px solid #ff9800;
}

.nwo-cooldown-info-text {
  margin: 0;
  font-size: 13px;
  color: var(--modal-text, #cccccc);
}

.nwo-cooldown-info-icon {
  margin-right: 6px;
  color: #ff9800;
}

/* Cooldown modal wrapper initial state */
.nwo-modal-hidden {
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* --- U16j. Popup Close Button (commented-out section) --- */
.nwo-popup-footer {
  background: rgba(0,0,0,0.8);
  padding: 12px;
  border-radius: 0 0 8px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: -4px;
}

.nwo-popup-label {
  color: #ffffff;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  margin: 0;
}

.nwo-popup-checkbox {
  margin-right: 8px;
  transform: scale(1.1);
  cursor: pointer;
}

.nwo-popup-close-btn {
  background: #dc3545;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.2s ease;
}
.nwo-popup-close-btn:hover {
  background: #c82333;
}

/* ============================================
   U15. Affiliates Page - Inline Style Migration
   ============================================ */

/* --- Fee Section --- */
.aff-fee-section {
  margin-bottom: 20px;
}

.aff-fee-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.aff-fee-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.aff-fee-header-icon {
  font-size: 20px;
  color: #ffc107;
}

.aff-fee-badge {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 20px;
  color: #929cb7;
  background: #1B2B3A;
}

/* --- Tier Grid --- */
.aff-tier-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

@media (max-width: 576px) {
  .aff-tier-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
}

/* --- Tier Card (base) --- */
.aff-tier-card {
  background: #121D27;
  border: 1px solid #1B2B3A;
  border-radius: 12px;
  padding: 16px 14px;
  text-align: center;
  position: relative;
  transition: all .2s ease;
}

.aff-tier-card.aff-tier-active-new {
  background: #15222E;
  border: 2px solid #6c757d;
}

.aff-tier-card.aff-tier-active-gold {
  background: #1a1f14;
  border: 2px solid #ffc107;
}

.aff-tier-card.aff-tier-active-platinum {
  background: #121e24;
  border: 2px solid #17a2b8;
}

.aff-tier-card.aff-tier-active-vip {
  background: #1e1215;
  border: 2px solid #dc3545;
}

/* --- Payout card (balance + withdraw) — base card from .card.card-border --- */
.aff-payout-card { margin-top: 16px; }
.aff-payout-body { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 18px 20px; }
.aff-payout-info { display: flex; align-items: center; gap: 14px; }
.aff-payout-icon { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; font-size: 24px; color: #ffc107; background: rgba(255,193,7,.12); }
.aff-payout-label { font-size: 12px; font-weight: 600; color: #929cb7; margin-bottom: 2px; }
.aff-payout-amount { font-family: var(--font-en); font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; color: #fff; }
.aff-payout-card .btn-rounded { white-space: nowrap; }
@media (max-width: 576px) { .aff-payout-body { flex-direction: column; align-items: stretch; } .aff-payout-card .btn-rounded { width: 100%; } }
html.light .aff-payout-icon { background: #fff7e0; color: #ca8a04; }
html.light .aff-payout-label { color: #6b7280; }
html.light .aff-payout-amount { color: #1a1a2e; }

/* --- "YOUR LEVEL" badge --- */
.aff-tier-badge {
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 20px;
  white-space: nowrap;
}

.aff-tier-badge-new { background: #6c757d; }
.aff-tier-badge-gold { background: #ffc107; color: #212529; }
.aff-tier-badge-platinum { background: #17a2b8; }
.aff-tier-badge-vip { background: #dc3545; }

/* --- Tier Icon Circle --- */
.aff-tier-icon-wrap {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px;
}

.aff-tier-icon-wrap.aff-tier-icon-new { background: rgba(108,117,125,0.15); }
.aff-tier-icon-wrap.aff-tier-icon-gold { background: rgba(255,193,7,0.15); }
.aff-tier-icon-wrap.aff-tier-icon-platinum { background: rgba(23,162,184,0.15); }
.aff-tier-icon-wrap.aff-tier-icon-vip { background: rgba(220,53,69,0.15); }

.aff-tier-icon {
  font-size: 18px;
}

.aff-tier-icon-new { color: #6c757d; }
.aff-tier-icon-gold { color: #ffc107; }
.aff-tier-icon-platinum { color: #17a2b8; }
.aff-tier-icon-vip { color: #dc3545; }

/* --- Tier Name & Rate --- */
.aff-tier-name {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 8px;
}

.aff-tier-name-new { color: #6c757d; }
.aff-tier-name-gold { color: #ffc107; }
.aff-tier-name-platinum { color: #17a2b8; }
.aff-tier-name-vip { color: #dc3545; }

.aff-tier-rate {
  font-size: 20px;
  font-weight: 700;
}

.aff-tier-rate-fee { color: #ff9800; }
.aff-tier-rate-free { color: #00AF4C; }

.aff-tier-sublabel {
  font-size: 11px;
  color: #929cb7;
  margin-top: 4px;
}

/* --- Upgrade Hint --- */
.aff-upgrade-hint {
  margin-top: 10px;
  padding: 10px 14px;
  background: rgba(255,193,7,0.06);
  border: 1px solid rgba(255,193,7,0.15);
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.aff-upgrade-hint-icon {
  color: #ffc107;
  font-size: 16px;
  flex-shrink: 0;
}

.aff-upgrade-hint-text {
  font-size: 12px;
  color: #929cb7;
}

.aff-upgrade-hint-text strong {
  color: #ffc107;
}

/* --- Section Title (dark/light handled below) --- */
.aff-section-title {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}

/* --- Withdrawal Notification --- */
.aff-withdraw-notification {
  margin-top: 20px;
  padding: 15px 20px;
  background: linear-gradient(135deg, rgba(255,193,7,0.1) 0%, rgba(255,193,7,0.05) 100%);
  border: 1px solid #ffc107;
  border-radius: 12px;
  display: none;
  animation: slideDown 0.3s ease;
}

.aff-notif-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.aff-notif-icon {
  color: #ffc107;
  font-size: 20px;
  margin-top: 2px;
}

.aff-notif-icon-warning {
  color: #ff9800;
  font-size: 20px;
  margin-top: 2px;
}

.aff-notif-title {
  color: #ffc107;
  font-weight: 600;
  margin-bottom: 4px;
  font-size: 16px;
}

.aff-notif-title-warning {
  color: #ff9800;
  font-weight: 600;
  margin-bottom: 4px;
  font-size: 16px;
}

.aff-notification-msg {
  color: #e9ecef;
  font-size: 14px;
  line-height: 1.4;
}

/* --- Toast Container --- */
.aff-toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 400px;
}

/* --- Toast Keyframes --- */
@keyframes slideInRight {
  from { transform: translateX(400px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

@keyframes slideOutRight {
  from { transform: translateX(0); opacity: 1; }
  to   { transform: translateX(400px); opacity: 0; }
}

@keyframes slideDown {
  from { transform: translateY(-20px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

@media (max-width: 480px) {
  .aff-toast-container {
    left: 20px;
    right: 20px;
    top: 20px;
    max-width: none;
  }

  @keyframes slideInRight {
    from { transform: translateY(-20px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
  }

  @keyframes slideOutRight {
    from { transform: translateY(0); opacity: 1; }
    to   { transform: translateY(-20px); opacity: 0; }
  }
}

/* --- Modal Shared --- */
.aff-modal-content {
  border-radius: 20px;
  overflow: hidden;
  border: none;
}

.aff-modal-header {
  background: linear-gradient(135deg, #ffc107 0%, #ffbf00 100%);
  padding: 20px 30px;
  border: none;
}

.aff-modal-title {
  color: #212529;
  font-weight: 700;
  font-size: 20px;
}

.aff-modal-close-gold {
  background: rgba(255,255,255,0.3);
  border-radius: 50%;
}

.aff-modal-close-dark {
  color: #212529;
}

.aff-modal-body {
  background: #121D27;
  padding: 30px;
}

.aff-modal-body-scroll {
  background: #121D27;
  padding: 25px 30px;
  max-height: 80vh;
  overflow-y: auto;
}

.aff-modal-dialog-wide {
  max-width: 95vw;
  width: 1000px;
  margin: 1rem auto;
}

.aff-row-gap {
  gap: 15px;
}

.aff-col-full {
  width: 100%;
}

/* --- Withdraw Option Cards --- */
.aff-option-card {
  background: linear-gradient(135deg, #183441 0%, #111E26 100%);
  border-radius: 12px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.aff-option-card-balance {
  border: 1px solid #ffc107;
}

.aff-option-card-balance:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(255,193,7,0.3);
  border-color: #ffbf00;
}

.aff-option-card-cash {
  border: 1px solid #ff9800;
}

.aff-option-card-cash:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(255,152,0,0.3);
  border-color: #ff5722;
}

/* --- Card Accent Circle (decorative) --- */
.aff-card-accent {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  opacity: 0.1;
}

.aff-card-accent-gold {
  background: linear-gradient(135deg, #ffc107, #ffbf00);
}

.aff-card-accent-orange {
  background: linear-gradient(135deg, #ff9800, #ff5722);
}

/* --- Option Icon Box --- */
.aff-option-icon-box {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
  flex-shrink: 0;
}

.aff-option-icon-box-gold {
  background: linear-gradient(135deg, #ffc107, #ffbf00);
}

.aff-option-icon-box-orange {
  background: linear-gradient(135deg, #ff9800, #ff5722);
}

.aff-option-icon-lg {
  font-size: 24px;
  color: #212529;
}

/* --- Option Text --- */
.aff-option-text {
  flex: 1;
  position: relative;
}

.aff-option-title-gold {
  color: #ffc107;
  font-weight: 700;
  margin: 0 0 5px 0;
  font-size: 18px;
}

.aff-option-title-orange {
  color: #ff9800;
  font-weight: 700;
  margin: 0 0 5px 0;
  font-size: 18px;
}

.aff-option-desc {
  color: #929cb7;
  font-size: 14px;
  margin: 0;
}

.aff-option-arrow-gold {
  color: #ffc107;
  font-size: 20px;
}

.aff-option-arrow-orange {
  color: #ff9800;
  font-size: 20px;
}

/* --- Cash Withdraw Info Card --- */
.aff-info-card {
  border: 1px solid #ffc107;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.aff-info-label {
  color: #929cb7;
  font-size: 12px;
  text-transform: uppercase;
}

.aff-info-balance {
  color: #ffc107;
  margin-top: 5px;
  font-weight: 700;
}

.aff-info-level-h3 {
  margin-top: 5px;
}

/* Level badges */
.aff-badge-vip {
  background: linear-gradient(135deg, #dc3545, #c82333);
  padding: 8px 16px;
  font-size: 16px;
}

.aff-badge-platinum {
  background: linear-gradient(135deg, #6c757d, #5a6268);
  padding: 8px 16px;
  font-size: 16px;
}

.aff-badge-gold {
  background: linear-gradient(135deg, #ffc107, #ffbf00);
  color: #212529;
  padding: 8px 16px;
  font-size: 16px;
}

.aff-badge-default {
  background: linear-gradient(135deg, #17a2b8, #138496);
  padding: 8px 16px;
  font-size: 16px;
}

/* --- Fee Warning Box --- */
.aff-fee-warning-box {
  margin-top: 15px;
  padding: 12px 15px;
  background: rgba(255,152,0,0.1);
  border: 1px solid rgba(255,152,0,0.3);
  border-radius: 8px;
}

.aff-fee-warning-title {
  color: #ff9800;
  font-weight: 600;
  margin-bottom: 6px;
  font-size: 14px;
}

.aff-fee-warning-text {
  color: #929cb7;
  font-size: 14px;
}

.aff-fee-highlight {
  color: #ffc107;
  font-size: 18px;
}

/* --- No-Fee Box (Gold+) --- */
.aff-nofee-box {
  margin-top: 20px;
  padding: 15px;
  background: rgba(255,193,7,0.1);
  border: 1px solid #ffc107;
  border-radius: 8px;
}

.aff-nofee-title {
  color: #ffc107;
  font-weight: 600;
}

.aff-nofee-text {
  color: #929cb7;
  font-size: 14px;
  margin-top: 5px;
}

/* --- Form Labels & Inputs --- */
.aff-form-label {
  font-weight: 600;
  margin-bottom: 10px;
}

.aff-form-input {
  background: #183441;
  color: #fff;
  border: 1px solid #ffc107;
  border-radius: 8px;
}

/* --- Submit Button --- */
.aff-submit-btn {
  background: linear-gradient(135deg, #ffc107, #ffbf00);
  border: none;
  color: #212529;
  padding: 15px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 16px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(255,193,7,0.3);
}

.aff-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(255,193,7,0.4);
}

/* ===== Affiliates: Light mode overrides ===== */
html.light .aff-section-title {
  color: #1a1a2e;
}

html.light .aff-fee-badge {
  color: #6b7280;
  background: #e5e7eb;
}

html.light .aff-modal-body,
html.light .aff-modal-body-scroll {
  background: #ffffff;
}

html.light .aff-form-input {
  background: #f8f9fa;
  color: #1a1a2e;
}

html.light .aff-tier-card {
  background: #ffffff;
  border-color: #e5e7eb;
}

html.light .aff-tier-card.aff-tier-active-new {
  background: #ffffff;
  border-color: #6c757d;
}

html.light .aff-tier-card.aff-tier-active-gold {
  background: #ffffff;
  border-color: #ffc107;
}

html.light .aff-tier-card.aff-tier-active-platinum {
  background: #ffffff;
  border-color: #17a2b8;
}

html.light .aff-tier-card.aff-tier-active-vip {
  background: #ffffff;
  border-color: #dc3545;
}

html.light .aff-info-card {
  background: #f8f9fa;
}

html.light .aff-withdraw-card {
  background: #f8f9fa;
}

html.light .aff-notification-msg {
  color: #374151;
}

html.light .aff-option-card {
  background: #f8f9fa !important;
}

html.light .aff-option-desc {
  color: #6b7280 !important;
}

html.light .aff-info-label {
  color: #6b7280 !important;
}

html.light .aff-tier-sublabel {
  color: #6b7280 !important;
}

html.light .aff-upgrade-hint-text {
  color: #6b7280 !important;
}

html.light .aff-fee-warning-text {
  color: #6b7280 !important;
}

html.light .aff-nofee-text {
  color: #6b7280 !important;
}

/* --- Toast Item --- */
.aff-toast {
  background: linear-gradient(135deg, #183441 0%, #111E26 100%);
  border-radius: 12px;
  padding: 15px 20px;
  color: #fff;
  box-shadow: 0 8px 25px rgba(0,0,0,0.3);
  animation: slideInRight 0.3s ease;
  margin-bottom: 10px;
  position: relative;
  overflow: hidden;
  min-width: 300px;
}

.aff-toast-success { border: 1px solid #ffc107; }
.aff-toast-error { border: 1px solid #ff9800; }

.aff-toast-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.aff-toast-icon {
  font-size: 20px;
  margin-top: 2px;
}

.aff-toast-icon-success { color: #ffc107; }
.aff-toast-icon-error { color: #ff9800; }

.aff-toast-body { flex: 1; }

.aff-toast-title {
  font-weight: 600;
  margin-bottom: 4px;
  font-size: 16px;
}

.aff-toast-title-success { color: #ffc107; }
.aff-toast-title-error { color: #ff9800; }

.aff-toast-msg {
  color: #e9ecef;
  font-size: 14px;
  line-height: 1.4;
}

.aff-toast-close {
  background: none;
  border: none;
  color: #929cb7;
  font-size: 18px;
  cursor: pointer;
  padding: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============================================================
   U17. Small Files Migration
   Embedded <style> block + inline styles extracted from
   addfund.twig, ticket.twig, signup.twig
   ============================================================ */

/* --- addfund.twig embedded <style> block (moved here) --- */

/* === Addfund Payment Selector (af- prefix = scoped to this page only) === */
.af-pay-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}
.af-pay-card {
    background: #121D27;
    border: 2px solid #183441;
    border-radius: 14px;
    padding: 16px 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: relative;
}
.af-pay-card:hover {
    border-color: rgba(255, 193, 7, 0.5);
    background: #162230;
}
.af-pay-card.af-pay-active {
    border-color: #ffc107;
    background: rgba(255, 193, 7, 0.06);
    box-shadow: 0 0 0 1px rgba(255, 193, 7, 0.3), 0 4px 15px rgba(255, 193, 7, 0.1);
}
.af-pay-card.af-pay-active::after {
    content: '\2713';
    position: absolute;
    top: 6px;
    right: 8px;
    width: 20px;
    height: 20px;
    background: #ffc107;
    color: #0C141B;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.af-pay-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    overflow: hidden;
}
.af-pay-icon svg,
.af-pay-icon img {
    width: 26px;
    height: 26px;
    object-fit: contain;
}
.af-pay-active .af-pay-icon {
    background: rgba(255,255,255,0.12);
    box-shadow: 0 0 0 2px rgba(255,193,7,0.3);
}
.af-pay-name {
    font-size: 12px;
    font-weight: 600;
    color: #cbd5e1;
    line-height: 1.3;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.af-pay-active .af-pay-name {
    color: #fff;
}
.af-pay-bonus {
    font-size: 11px;
    font-weight: 700;
    color: #ffc107;
    min-height: 16px;
}
.af-pay-bonus.af-no-bonus {
    color: #556677;
    font-weight: 500;
}

/* Bonus table variants */
.af-bonus-flat {
    text-align: center;
    padding: 50px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.af-bonus-flat-icon {
    line-height: 1;
}
.af-bonus-flat-icon svg {
    width: 48px;
    height: 48px;
}
.af-bonus-flat-percent {
    font-size: 52px;
    font-weight: 800;
    color: #ffc107;
    line-height: 1;
}
.af-bonus-flat-text {
    color: #8899aa;
    font-size: 14px;
    margin-top: 4px;
}
.af-bonus-none {
    text-align: center;
    padding: 60px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.af-bonus-none-icon {
    line-height: 1;
}
.af-bonus-none-icon svg {
    width: 56px;
    height: 56px;
}
.af-bonus-none-text {
    color: #556677;
    font-size: 14px;
}

/* Terms agreement checkbox */
.af-terms-agree {
    margin-top: 6px;
    margin-bottom: 18px;
    padding: 10px 14px;
    background: rgba(220, 53, 69, 0.06);
    border: 1px solid rgba(220, 53, 69, 0.18);
    border-radius: 12px;
}
.af-terms-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 12.5px;
    color: #94a3b8;
    line-height: 1.45;
    margin: 0;
}
.af-terms-label input[type="checkbox"] {
    width: 20px;
    height: 20px;
    min-width: 20px;
    accent-color: #ffc107;
    cursor: pointer;
}
.af-terms-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.af-terms-line1 {
    font-weight: 600;
    color: #cbd5e1;
}
.af-terms-line2 {
    font-size: 11.5px;
    color: #8899aa;
}
.af-terms-label a {
    color: #ffc107;
    text-decoration: underline;
    font-weight: 700;
    white-space: nowrap;
}
.af-terms-label a:hover {
    color: #ffdb4d;
}
.af-terms-warn {
    color: #f87171;
    font-size: 12px;
    margin-top: 6px;
    padding-left: 30px;
    display: none;
}
.af-terms-warn.af-show {
    display: block;
}

/* Disabled submit buttons when terms not agreed */
#normalSubmitButton .btn[disabled],
#manualSubmitButton .btn[disabled] {
    background: #334455 !important;
    border-color: #334455 !important;
    color: #667788 !important;
    cursor: not-allowed;
    opacity: 0.7;
    pointer-events: none;
}

/* === Addfund Light Mode Overrides === */
html.light .af-pay-card {
    background: #f8f9fa;
    border-color: #dee2e6;
}
html.light .af-pay-card:hover {
    border-color: rgba(255, 193, 7, 0.5);
    background: #fff8e1;
}
html.light .af-pay-card.af-pay-active {
    background: rgba(255, 193, 7, 0.06);
}
html.light .af-pay-icon {
    background: rgba(0,0,0,0.05);
}
html.light .af-pay-active .af-pay-icon {
    background: rgba(0,0,0,0.08);
}
html.light .af-pay-name {
    color: #4a5568;
}
html.light .af-pay-active .af-pay-name {
    color: #3d4249;
}
html.light .af-pay-bonus.af-no-bonus {
    color: #9ca3af;
}
html.light .af-bonus-flat-text {
    color: #6b7280;
}
html.light .af-bonus-none-text {
    color: #9ca3af;
}
html.light .af-terms-label {
    color: #4a5568;
}
html.light .af-terms-line1 {
    color: #3d4249;
}
html.light .af-terms-line2 {
    color: #6b7280;
}
html.light #normalSubmitButton .btn[disabled],
html.light #manualSubmitButton .btn[disabled] {
    background: #d1d5db !important;
    border-color: #d1d5db !important;
    color: #9ca3af !important;
}

/* Addfund Responsive */
@media (max-width: 576px) {
    .af-pay-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    .af-pay-card { padding: 12px 8px; }
    .af-pay-icon { width: 38px; height: 38px; }
    .af-pay-icon svg, .af-pay-icon img { width: 22px; height: 22px; }
    .af-pay-name { font-size: 11px; }
    .af-terms-label { font-size: 11.5px; gap: 8px; }
    .af-terms-label input[type="checkbox"] { width: 18px; height: 18px; min-width: 18px; }
}

/* --- addfund.twig --- */
.af-alert-banner {
  color: #ffffff;
  background-color: #dc3545;
  border-color: #dc3545;
}

.af-amount-force-visible {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.af-slip-preview {
  margin-top: 15px;
  display: none;
}

.af-slip-preview-img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

/* --- ticket.twig --- */
.ticket-label-mt {
  margin-top: 15px;
}

.ticket-textarea {
  height: 150px !important;
}

/* --- signup.twig --- */
.register-page-padded {
  padding-top: 120px;
}

/* --- Shared hero container (about-us, how-it-works, + 20 other pages) --- */
.home-head-content > .container { position: relative; }

/* ========================================
   U14. layout.twig — inline style migration
   ======================================== */

/* CLEANUP 2026-05-07: removed .layout-mobile-spacer + .apHdCr-compact
 * (dead — topbar v4 doesn't render the legacy spacer/compact dropdown styles) */

/* Public header row height */
.layout-header-row {
  height: 99px;
}

/* Public header — language globe button */
.layout-lang-globe {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.3);
  color: white;
  font-size: 16px;
  padding: 0;
}

/* Public header — language dropdown menu */
.layout-lang-dropdown {
  min-width: 120px;
}

/* Public header — language dropdown items */
.layout-lang-item {
  font-size: 14px;
  padding: 8px 12px;
}

/* ========================================
   U15. service-landing-comprehensive.twig
   ======================================== */

/* Trust section large icons (3rem) */
.service-landing-trust-icon {
  font-size: 3rem;
}

/* Benefits check icon (1.5rem) */
.service-landing-benefit-icon {
  font-size: 1.5rem;
}

/* Guarantee icon (2rem) */
.service-landing-guarantee-icon {
  font-size: 2rem;
}

/* ========================================
   U16. instagram-landing.twig
   ======================================== */

/* Instagram-branded submit button */
.ig-landing-submit-btn {
  background-color: #E4405F;
  border-color: #E4405F;
}

.ig-landing-submit-btn:hover {
  background-color: #d63050;
  border-color: #d63050;
}

/* ========================================
   U17. signin_lao.twig
   ======================================== */

/* Lao hero buttons — same as .signin-hero-dark-btn */
.signin-lao-hero-btn {
  font-size: 16px;
  background-color: #121d27;
}

/* Lao hero outline button (white border) */
.signin-lao-hero-outline {
  font-size: 16px;
  border: 2px solid white;
  color: white;
}

/* Lao logbox signup button (large) */
.signin-lao-signup-btn {
  font-size: 18px;
  padding: 15px;
}

/* Lao "or" divider text */
.signin-lao-or-text {
  color: #666;
}

/* Lao logbox outline sign-in button */
.signin-lao-signin-btn {
  font-size: 16px;
  border: 2px solid #fff;
  color: #fff;
}

/* Lao benefits box */
.signin-lao-benefits-box {
  background: rgba(255,255,255,0.1);
  padding: 20px;
  border-radius: 10px;
}

/* Lao benefits heading */
.signin-lao-benefits-title {
  color: #fff;
  margin-bottom: 15px;
}

/* Lao benefits list */
.signin-lao-benefits-list {
  color: #fff;
  list-style: none;
  padding: 0;
}

/* Lao benefits check icon */
.signin-lao-check-icon {
  color: #4CAF50;
}

/* Lao English version button */
.signin-lao-lang-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  font-size: 14px;
}

/* Lao stat section signup button */
.signin-lao-stat-btn {
  font-size: 16px;
  background-color: #121d27;
}

/* ========================================
   U18. setnewpassword.twig + resetpassword.twig
   ======================================== */

/* Rounded borderless alert (auth pages) */
.auth-alert-styled {
  border-radius: 12px;
  border: none;
}

/* Hero subtitle accent (about-us, how-it-works) */
.hl-subtitle--accent {
  font-size: 22px;
  font-weight: 600;
  color: #ffc107;
  margin-top: 10px;
}

/* Hero CTA buttons (about-us, how-it-works) */
.btn--hero-primary {
  font-size: 16px;
  background-color: #121d27;
}

.btn--hero-outline {
  font-size: 16px;
  border: 2px solid #fff;
  color: #fff;
}

/* about-us: map iframe border reset */
.map-container iframe { border: 0; }

/* about-us: contact section */
.about-contact-section {
  background: linear-gradient(135deg, #ffbf00 0%, #ff9500 100%);
  color: #fff;
}

.about-contact-section h2 { color: #fff; }

/* faq: inline bold + unstyled link in content */
.faq-bold { font-weight: 700; }
.faq-link-plain { outline: none; }

/* blog: guest top padding */
.blog-header--guest { padding-top: 150px; }
.blog-posts-section--guest { padding-top: 150px; }

/* blog: centered article */
.blog-main-content--centered { text-align: center; }

/* services: dropdown reset */
.services-filter-dropdown { margin: 0; }

/* services: nothing-found (JS toggle) */
.nothing-found { display: none; }

/* services: large icon in nothing-found */
.nothing-found-icon { font-size: 64px; }

/* services: category icon image sizing */
.category-icon-img {
  max-width: calc(1em + 6px);
  max-height: calc(1em + 6px);
}

/* ============================================
   Subscription Card — Compact Stats Grid
   ============================================ */

.subcard-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.subcard-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.subcard-stat-label {
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: #72879d;
  display: flex;
  align-items: center;
  gap: 5px;
  letter-spacing: 0.02em;
}

.subcard-stat-label i {
  font-size: 14px;
  color: #ffc107;
}

.subcard-stat-value {
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
  color: #fdfdfd;
}

.subcard-stat-value a {
  color: #5b9aff;
  text-decoration: none;
}

.subcard-stat-value a:hover {
  color: #ffc107;
  text-decoration: underline;
}

/* Empty value — show dash */
.subcard-stat-value:empty::after {
  content: '—';
  color: #4a5568;
}

.subcard-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

@media (max-width: 767.98px) {
  .subcard-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .subcard-stat-value {
    font-size: 14px;
  }

  .subcard-actions {
    justify-content: center;
  }
}

/* Light mode */
html.light .subcard-stat-label {
  color: #6b7280;
}

html.light .subcard-stat-value {
  color: #1a1a2e;
}

html.light .subcard-stat-value a {
  color: #0258FF;
}

html.light .subcard-actions {
  border-top-color: #e5e7eb;
}

/* ============================================
   U21. Check-in Modal (Daily Rewards)
   (moved from neworder.twig embedded style)
   ============================================ */

/* ═══ DIALOG SIZE ═══ */
.ci-dialog { max-width: 680px; }

/* ═══ MODAL SHELL ═══ */
.ci-modal {
  border-radius: 24px; overflow: hidden; border: none;
  background: #0f1923;
  box-shadow: 0 25px 60px rgba(0,0,0,0.5);
}

/* ═══ HEADER ═══ */
.ci-modal-header {
  position: relative; padding: 2.25rem 2.5rem 1.75rem;
  background: linear-gradient(135deg, #1a2a3a 0%, #0f1923 100%);
  text-align: center; overflow: hidden;
}
.ci-close-btn {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  opacity: 0.5; filter: none;
}
.ci-close-btn:hover { opacity: 1; }
.ci-header-deco {
  position: absolute; top: -30px; right: -30px;
  width: 140px; height: 140px; border-radius: 50%;
  background: rgba(255,193,7,0.05);
}
.ci-header-deco::before {
  content: ''; position: absolute; bottom: -50px; left: -100px;
  width: 100px; height: 100px; border-radius: 50%;
  background: rgba(16,185,129,0.04);
}
.ci-streak-badge {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 50px; padding: 7px 18px 7px 7px; margin-bottom: 14px;
}
.ci-streak-icon {
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, #ff6b35, #ff4500);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 18px;
  box-shadow: 0 3px 12px rgba(255,69,0,0.3);
}
.ci-streak-info { display: flex; align-items: baseline; gap: 6px; }
.ci-streak-num { font-size: 26px; font-weight: 800; color: #ffc107; line-height: 1; }
.ci-streak-label { font-size: 13px; color: rgba(255,255,255,0.4); font-weight: 500; }
.ci-header-title { font-size: 22px; font-weight: 800; color: #fff; margin-bottom: 4px; }
.ci-header-sub { font-size: 14px; color: rgba(255,255,255,0.35); }

/* ═══ BODY ═══ */
.ci-modal-body { padding: 1.75rem 2.5rem 2rem; }

/* ═══ DAY CARD GRID ═══
   7 cards in one row on desktop (flex),
   4+3 wrap on mobile */
.ci-grid {
  display: flex; justify-content: center;
  gap: 12px; margin-bottom: 1.75rem; flex-wrap: wrap;
}
.ci-day {
  flex: 1 1 0; min-width: 72px; max-width: 90px;
  height: 110px; border-radius: 16px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; border: 2px solid #1e2d3a;
  background: #131f2b; color: rgba(255,255,255,0.35);
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
  position: relative; cursor: default;
}

/* ── States ── */
.ci-day.checked {
  background: #132b21; border-color: #10b981; color: #10b981;
}
.ci-day.today {
  border-color: #ffc107; background: #1f2510;
  flex: 1.15 1 0;
  box-shadow: 0 0 0 3px rgba(255,193,7,0.1), 0 8px 24px rgba(255,193,7,0.08);
  animation: ci-glow 2.5s ease-in-out infinite;
  color: #ffc107;
}
.ci-day.today.checked {
  background: #2a2510; border-color: #ffc107; color: #ffc107;
  box-shadow: 0 0 0 3px rgba(255,193,7,0.08);
  animation: none;
}
.ci-day.bonus {
  flex: 1.6 1 0; max-width: 140px;
  border-color: #ffc107;
  background: linear-gradient(135deg, #1f1f0f, #131f2b);
}
.ci-day.bonus.checked {
  background: linear-gradient(135deg, #2a2510, #1f2010);
  border-color: #ffc107; color: #ffc107;
}

/* ── Labels ── */
.ci-day-label {
  font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.3);
  text-transform: uppercase; letter-spacing: 0.5px; line-height: 1;
}
.ci-day.checked .ci-day-label { color: #10b981; }
.ci-day.today .ci-day-label { color: #ffc107; font-weight: 800; }
.ci-day.bonus .ci-day-label { color: #ffc107; }

/* ═══ COIN ═══ */
.ci-coin {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(145deg, #ffe066, #ffab00, #e6960a);
  box-shadow: 0 2px 4px rgba(0,0,0,0.25),
    inset 0 2px 3px rgba(255,255,255,0.35),
    inset 0 -2px 3px rgba(0,0,0,0.15);
  display: flex; align-items: center; justify-content: center;
  color: #8a6000; font-size: 17px; line-height: 1;
  position: relative;
}
.ci-coin::after {
  content: ''; position: absolute; top: 5px; left: 8px;
  width: 12px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,0.35);
}
.ci-day.today .ci-coin {
  width: 40px; height: 40px; font-size: 19px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.25), 0 0 20px rgba(255,193,7,0.2),
    inset 0 2px 3px rgba(255,255,255,0.35), inset 0 -2px 3px rgba(0,0,0,0.15);
}
.ci-day.today .ci-coin::after { top: 6px; left: 9px; width: 13px; }
.ci-day.checked .ci-coin { display: none; }

/* ═══ CHECK ═══ */
.ci-check {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, #10b981, #059669);
  box-shadow: 0 2px 8px rgba(16,185,129,0.3);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 18px;
}
.ci-day.today.checked .ci-check {
  background: linear-gradient(135deg, #ffc107, #f59e0b);
  color: #0C141B; box-shadow: 0 2px 8px rgba(255,193,7,0.3);
}

/* ═══ GIFT ═══ */
.ci-gift {
  width: 40px; height: 40px; border-radius: 12px;
  background: linear-gradient(145deg, #ffe066, #ffab00);
  box-shadow: 0 3px 10px rgba(255,193,7,0.3);
  display: flex; align-items: center; justify-content: center;
  color: #7c4d00; font-size: 20px; position: relative;
}
.ci-gift::before {
  content: ''; position: absolute; top: -4px; right: -4px;
  width: 14px; height: 14px; border-radius: 50%;
  background: #ff4757; border: 2px solid #131f2b;
}
.ci-day.bonus.checked .ci-gift { display: none; }
.ci-day.bonus.checked .ci-check {
  background: linear-gradient(135deg, #ffc107, #f59e0b); color: #0C141B;
}

/* ═══ POINTS ═══ */
.ci-day-pts { font-size: 14px; font-weight: 700; line-height: 1; }
.ci-day.bonus .ci-day-pts { color: #ffc107; font-size: 16px; font-weight: 800; }
.ci-day.checked .ci-day-pts { color: #10b981; opacity: 0.7; font-size: 12px; }
.ci-day.today .ci-day-pts { color: #ffc107; font-weight: 800; }
.ci-bonus-tag {
  font-size: 8px; font-weight: 800; color: #ffc107;
  text-transform: uppercase; letter-spacing: 1px; line-height: 1;
  background: rgba(255,193,7,0.1); border-radius: 4px; padding: 2px 6px;
}
.ci-day.bonus.checked .ci-bonus-tag { background: rgba(255,193,7,0.15); }

/* ═══ REWARD BOX ═══ */
.ci-reward-box {
  text-align: center; padding: 14px 20px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06); border-radius: 16px;
  margin-bottom: 1.25rem; color: #fff;
}

/* ═══ CTA BUTTON ═══ */
.ci-cta-btn {
  display: block; width: 100%;
  background: linear-gradient(135deg, #ffc107, #ffab00);
  color: #0C141B; border: none; border-radius: 16px;
  padding: 16px 24px; font-size: 17px; font-weight: 800;
  box-shadow: 0 4px 16px rgba(255,193,7,0.25), inset 0 1px 0 rgba(255,255,255,0.2);
  transition: all 0.25s cubic-bezier(0.4,0,0.2,1); cursor: pointer;
}
.ci-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(255,193,7,0.35), inset 0 1px 0 rgba(255,255,255,0.2);
  background: linear-gradient(135deg, #ffd54f, #ffc107);
}
.ci-cta-btn:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(255,193,7,0.2); }
.ci-cta-btn:disabled {
  background: #1a2a3a; color: rgba(255,255,255,0.3);
  box-shadow: none; transform: none; cursor: default;
}

/* ═══ BANNER DOTS ═══ */
.ci-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #1e2d3a; transition: all 0.3s ease; flex-shrink: 0;
}
.ci-dot.checked { background: #10b981; }
.ci-dot.today { background: #ffc107; animation: ci-glow 2s ease-in-out infinite; }
.ci-dot.bonus { background: #ffc107; }

/* ═══ ANIMATION ═══ */
@keyframes ci-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,193,7,0.35), 0 0 0 3px rgba(255,193,7,0.1); }
  50% { box-shadow: 0 0 0 8px rgba(255,193,7,0), 0 0 0 3px rgba(255,193,7,0.05); }
}

/* ═══ RESPONSIVE ═══ */
@media (max-width: 576px) {
  .ci-dialog { max-width: 94vw; margin: 0.5rem auto; }
  .ci-modal-header { padding: 1.75rem 1.5rem 1.25rem; }
  .ci-modal-body { padding: 1.25rem 1.5rem 1.5rem; }
  .ci-grid { gap: 10px; }
  .ci-day { min-width: 60px; max-width: none; height: 94px; }
  .ci-day.bonus { max-width: none; }
  .ci-coin { width: 30px; height: 30px; font-size: 14px; }
  .ci-day.today .ci-coin { width: 34px; height: 34px; font-size: 16px; }
  .ci-check { width: 30px; height: 30px; font-size: 16px; }
  .ci-gift { width: 34px; height: 34px; font-size: 17px; }
  .ci-day-label { font-size: 9px; }
  .ci-day-pts { font-size: 12px; }
  .ci-header-title { font-size: 19px; }
  .ci-cta-btn { padding: 15px 20px; font-size: 15px; }
}

/* Light Mode: Check-in Modal */
html.light .ci-modal {
    background: #ffffff;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15);
}

html.light .ci-modal-header {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
}

html.light .ci-header-title {
    color: #3d4249;
}

html.light .ci-header-sub {
    color: #6b7280;
}

html.light .ci-streak-badge {
    background: rgba(0, 0, 0, 0.04);
    border-color: #e5e7eb;
}

html.light .ci-streak-label {
    color: #6b7280;
}

html.light .ci-day {
    border-color: #e5e7eb;
    background: #f7f8f9;
    color: #6b7280;
}

html.light .ci-day.checked {
    background: #ecfdf5;
    border-color: #10b981;
    color: #10b981;
}

html.light .ci-day.today {
    border-color: #ffc107;
    background: #fffef5;
}

html.light .ci-close-btn {
    filter: invert(1);
}

/* ── Light mode: Day card text ── */
html.light .ci-day-label {
    color: #9ca3af;
}
html.light .ci-day.checked .ci-day-label {
    color: #10b981;
}
html.light .ci-day.today .ci-day-label {
    color: #b8860b;
    font-weight: 800;
}
html.light .ci-day.bonus .ci-day-label {
    color: #b8860b;
}

/* ── Light mode: Day card points text ── */
html.light .ci-day-pts {
    color: #6b7280;
}
html.light .ci-day.checked .ci-day-pts {
    color: #10b981;
}
html.light .ci-day.today .ci-day-pts {
    color: #b8860b;
}
html.light .ci-day.bonus .ci-day-pts {
    color: #b8860b;
}

/* ── Light mode: Bonus day card ── */
html.light .ci-day.bonus {
    background: linear-gradient(135deg, #fffef5, #fff8e1);
    border-color: #ffc107;
}
html.light .ci-day.bonus.checked {
    background: linear-gradient(135deg, #fffef5, #fff3cd);
    border-color: #ffc107;
    color: #b8860b;
}
html.light .ci-bonus-tag {
    color: #b8860b;
    background: rgba(255, 193, 7, 0.15);
}

/* ── Light mode: Gift dot border fix ── */
html.light .ci-gift::before {
    border-color: #f7f8f9;
}

/* ── Light mode: Reward info box ── */
html.light .ci-reward-box {
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.08);
    color: #3d4249;
}
/* Override inline styles (must use !important to beat inline) */
html.light .ci-reward-box > div:first-child {
    color: #6b7280 !important;
}
html.light .ci-reward-box > div:nth-child(2) {
    color: #3d4249 !important;
}
html.light .ci-reward-box > div:nth-child(2) span {
    color: #b8860b !important;
}
html.light .ci-reward-box > div:last-child {
    color: #9ca3af !important;
}
html.light .ci-reward-box > div:last-child i {
    color: #b8860b !important;
}

/* ── Light mode: CTA disabled state ── */
html.light .ci-cta-btn:disabled {
    background: #e5e7eb;
    color: #9ca3af;
    box-shadow: none;
}

/* ── Light mode: Glow animation ── */
html.light .ci-day.today {
    animation: ci-glow-light 2.5s ease-in-out infinite;
}
@keyframes ci-glow-light {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.25), 0 0 0 3px rgba(255, 193, 7, 0.08); }
    50% { box-shadow: 0 0 0 8px rgba(255, 193, 7, 0), 0 0 0 3px rgba(255, 193, 7, 0.04); }
}

/* ── Light mode: Header deco ── */
html.light .ci-header-deco {
    background: rgba(255, 193, 7, 0.06);
}
html.light .ci-header-deco::before {
    background: rgba(16, 185, 129, 0.05);
}

/* ============================================
   U20. Member Dashboard Modal V2
   (moved from neworder.twig embedded style)
   ============================================ */

/* ============================================
   MEMBER DASHBOARD MODAL V2 - YELLOW THEME
   ============================================ */

.member-dashboard-modal-v2 {
    border-radius: 20px;
    overflow: hidden;
    border: none;
    background: var(--mdm-bg, #ffffff);
}

/* Header - Yellow Gradient */
.member-dashboard-modal-v2 .mdm-header {
    background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
    color: #1a1a2e;
    border-bottom: none;
    padding: 1.25rem 1.5rem;
}

.member-dashboard-modal-v2 .mdm-header .modal-title {
    font-weight: 700;
    font-size: 1.2rem;
    color: #1a1a2e;
}

.member-dashboard-modal-v2 .mdm-header .btn-close {
    filter: brightness(0);
    opacity: 0.6;
}

.member-dashboard-modal-v2 .mdm-header .btn-close:hover {
    opacity: 1;
}

/* Stats Section */
.dashboard-stats-section {
    padding: 1.25rem;
    background: var(--dashboard-stats-bg, #f8f9fa);
}

.dashboard-stat-card {
    background: var(--dashboard-card-bg, #ffffff);
    border-radius: 12px;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    border: 1px solid var(--dashboard-card-border, #e9ecef);
    height: 100%;
    transition: all 0.3s ease;
}

.dashboard-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.dashboard-stat-card .stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.dashboard-stat-card.spent-card .stat-icon {
    background: rgba(0, 177, 77, 0.1);
    color: #00B14D;
}

.dashboard-stat-card.level-card .stat-icon {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.2), rgba(255, 152, 0, 0.1));
    color: #ff9800;
}

.dashboard-stat-card.next-card .stat-icon {
    background: rgba(59, 130, 246, 0.1);
    color: #3B82F6;
}

.dashboard-stat-card .stat-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.dashboard-stat-card .stat-label {
    font-size: 0.75rem;
    color: var(--dashboard-label-color, #6c757d);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

.dashboard-stat-card .stat-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--dashboard-value-color, #212529);
    line-height: 1.2;
}

.dashboard-stat-card .stat-subtitle {
    font-size: 0.75rem;
    color: var(--dashboard-subtitle-color, #6c757d);
}

.dashboard-stat-card .stat-subtitle.max-reached {
    color: #00B14D;
    font-weight: 500;
}

/* Progress Section */
.dashboard-progress-section {
    padding: 1.25rem;
    background: var(--dashboard-progress-bg, #ffffff);
    border-top: 1px solid var(--dashboard-border-color, #e9ecef);
}

.progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.progress-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--dashboard-title-color, #212529);
}

.progress-title i {
    color: #ffc107;
}

.progress-percentage {
    font-size: 0.875rem;
    font-weight: 700;
    color: #e6ac00;
    background: rgba(255, 193, 7, 0.15);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
}

.level-progress-container {
    position: relative;
}

.level-progress-track {
    height: 12px;
    background: var(--dashboard-track-bg, #e9ecef);
    border-radius: 6px;
    overflow: visible;
    position: relative;
}

.level-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #ffc107, #ff9800);
    border-radius: 6px;
    transition: width 0.5s ease;
    position: relative;
}

.level-progress-fill::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    background: #ff9800;
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(255, 193, 7, 0.5);
}

.level-progress-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: var(--dashboard-label-color, #6c757d);
}

/* Tiers Section - Grid Layout V2 */
.mdm-tiers-section {
    padding: 1.5rem;
    background: var(--dashboard-tiers-bg, #f8f9fa);
    border-top: 1px solid var(--dashboard-border-color, #e9ecef);
}

.mdm-tiers-header {
    font-size: 1rem;
    font-weight: 700;
    color: var(--dashboard-title-color, #212529);
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
}

.mdm-tiers-header i {
    color: #ffc107;
    font-size: 1.25rem;
}

/* Grid Layout for Tier Cards */
.mdm-tiers-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

@media (max-width: 992px) {
    .mdm-tiers-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .mdm-tiers-grid {
        grid-template-columns: 1fr;
    }
}

/* Individual Tier Card */
.mdm-tier-card {
    position: relative;
    background: var(--dashboard-card-bg, #ffffff);
    border-radius: 16px;
    padding: 1.25rem 1rem;
    border: 2px solid var(--dashboard-card-border, #e9ecef);
    transition: all 0.3s ease;
    text-align: center;
    display: flex;
    flex-direction: column;
    min-height: 260px;
}

.mdm-tier-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

/* Current Tier Highlight */
.mdm-tier-card.mdm-current {
    border-color: #ffc107;
    box-shadow: 0 4px 20px rgba(255, 193, 7, 0.3);
    background: linear-gradient(180deg, rgba(255, 193, 7, 0.05) 0%, transparent 100%);
}

/* Current Badge */
.mdm-current-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
    color: #1a1a2e;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    white-space: nowrap;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(255, 193, 7, 0.4);
}

/* Tier Icon */
.mdm-tier-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.875rem;
    font-size: 1.5rem;
}

.mdm-tier-new .mdm-tier-icon {
    background: rgba(108, 117, 125, 0.1);
    color: #6c757d;
}

.mdm-tier-gold .mdm-tier-icon {
    background: rgba(255, 193, 7, 0.15);
    color: #ffc107;
}

.mdm-tier-platinum .mdm-tier-icon {
    background: rgba(23, 162, 184, 0.15);
    color: #17a2b8;
}

.mdm-tier-vip .mdm-tier-icon {
    background: rgba(220, 53, 69, 0.15);
    color: #dc3545;
}

/* Tier Name */
.mdm-tier-name {
    font-weight: 800;
    font-size: 1.1rem;
    margin-bottom: 0.375rem;
    letter-spacing: 0.5px;
}

.mdm-tier-new .mdm-tier-name { color: #6c757d; }
.mdm-tier-gold .mdm-tier-name { color: #e6ac00; }
.mdm-tier-platinum .mdm-tier-name { color: #17a2b8; }
.mdm-tier-vip .mdm-tier-name { color: #dc3545; }

/* Tier Range */
.mdm-tier-range {
    font-size: 0.75rem;
    color: var(--dashboard-label-color, #6c757d);
    background: var(--dashboard-range-bg, #f1f3f4);
    padding: 4px 10px;
    border-radius: 20px;
    margin-bottom: 1rem;
    display: inline-block;
}

/* Tier Benefits */
.mdm-tier-benefits {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
    flex-grow: 1;
}

.mdm-tier-benefits li {
    font-size: 0.8rem;
    color: var(--dashboard-text-color, #495057);
    padding: 0.35rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-bottom: 1px dashed var(--dashboard-border-color, #e9ecef);
}

.mdm-tier-benefits li:last-child {
    border-bottom: none;
}

.mdm-tier-benefits li i {
    color: #00B14D;
    font-size: 0.85rem;
    flex-shrink: 0;
}

/* CLEANUP 2026-05-07: removed all .mdm-cashback-* rules + dark variants
 * (~165 lines, dead — neworder.twig modal uses .member-dashboard-modal-v2 instead) */

/* Footer */
.dashboard-footer {
    padding: 0.875rem 1.25rem;
    background: var(--dashboard-footer-bg, #f1f3f4);
    border-top: 1px solid var(--dashboard-border-color, #e9ecef);
}

.footer-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--dashboard-label-color, #6c757d);
}

.footer-info i {
    color: #ffc107;
}

/* Dark Mode Support */
html.dark .member-dashboard-modal-v2,
body.dark .member-dashboard-modal-v2,
.dark .member-dashboard-modal-v2,
html.dark .member-dashboard-modal,
body.dark .member-dashboard-modal,
.dark .member-dashboard-modal {
    --mdm-bg: rgba(12, 20, 27, 0.7);
    --dashboard-stats-bg: #0C141B;
    --dashboard-card-bg: #121D27;
    --dashboard-card-border: #183441;
    --dashboard-progress-bg: #0C141B;
    --dashboard-tiers-bg: #0a1017;
    --dashboard-border-color: #183441;
    --dashboard-track-bg: #183441;
    --dashboard-label-color: #72879d;
    --dashboard-value-color: #ffffff;
    --dashboard-subtitle-color: #72879d;
    --dashboard-title-color: #ffffff;
    --dashboard-text-color: #c0cdd8;
    --dashboard-footer-bg: #0a1017;
    --dashboard-range-bg: #183441;
}

html.dark .member-dashboard-modal-v2,
body.dark .member-dashboard-modal-v2,
.dark .member-dashboard-modal-v2,
html.dark .member-dashboard-modal .modal-content,
body.dark .member-dashboard-modal .modal-content,
.dark .member-dashboard-modal .modal-content {
    background: #1a1a2e;
    border: 1px solid #2d3a4f;
}

/* Dark mode tier card adjustments */
html.dark .mdm-tier-card,
body.dark .mdm-tier-card,
.dark .mdm-tier-card {
    background: #16213e;
    border-color: #2d3a4f;
}

html.dark .mdm-tier-card.mdm-current,
body.dark .mdm-tier-card.mdm-current,
.dark .mdm-tier-card.mdm-current {
    border-color: #ffc107;
    background: linear-gradient(180deg, rgba(255, 193, 7, 0.1) 0%, #16213e 100%);
}

html.dark .mdm-tier-card:hover,
body.dark .mdm-tier-card:hover,
.dark .mdm-tier-card:hover {
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}

/* Responsive */
@media (max-width: 768px) {
    .dashboard-stat-card {
        padding: 0.75rem;
    }

    .dashboard-stat-card .stat-icon {
        width: 40px;
        height: 40px;
        font-size: 1.25rem;
    }

    .dashboard-stat-card .stat-value {
        font-size: 1rem;
    }

    .mdm-tiers-section {
        padding: 1rem;
    }

    .mdm-tier-card {
        min-height: 220px;
        padding: 1rem 0.875rem;
    }

    .mdm-tier-icon {
        width: 48px;
        height: 48px;
        font-size: 1.25rem;
    }

    .mdm-tier-name {
        font-size: 1rem;
    }

    .mdm-tier-benefits li {
        font-size: 0.75rem;
    }
}

/* ============================================
   U20b. CSS Variables for Light/Dark Theme
   (moved from neworder.twig embedded style)
   ============================================ */

:root {
  --modal-bg: #121d27;
  --modal-text: #ffffff;
  --modal-border: #2a3441;
}

html.light {
  --modal-bg: #ffffff;
  --modal-text: #333333;
  --modal-border: #e0e0e0;
}

/* ============================================================
   MODERNIZATION PACK v2026-04
   - Glassmorphism WCU cards
   - Pill-style social platform tabs with brand colors
   - Enhanced tab content layout (stats/services/CTA)
   Scope: affects signin.twig, signin_lao.twig, smm-panel-thailand.twig,
          smm-panel-laos.twig (all pages using .wcu-* / .hsob / .hsl-*)
   ============================================================ */

/* ---------- Design Tokens (v2026-04) ----------
   Consume via var(--lk-*). Hard-coded values in earlier selectors remain for
   backwards-compatibility — new rules should use tokens. */
:root {
    /* Radius scale */
    --lk-radius-xs:   8px;
    --lk-radius-sm:  12px;
    --lk-radius-md:  16px;
    --lk-radius-lg:  22px;
    --lk-radius-xl:  28px;
    --lk-radius-2xl: 32px;
    --lk-radius-full: 9999px;

    /* Typography scale */
    --lk-text-xs:    12px;
    --lk-text-sm:    14px;
    --lk-text-base:  16px;
    --lk-text-lg:    18px;
    --lk-text-xl:    20px;
    --lk-text-2xl:   24px;
    --lk-text-3xl:   32px;
    --lk-text-4xl:   40px;
    --lk-text-5xl:   48px;

    /* Spacing scale (4px base grid) */
    --lk-space-1:   4px;
    --lk-space-2:   8px;
    --lk-space-3:  12px;
    --lk-space-4:  16px;
    --lk-space-5:  20px;
    --lk-space-6:  24px;
    --lk-space-8:  32px;
    --lk-space-10: 40px;
    --lk-space-12: 48px;
    --lk-space-16: 64px;
    --lk-space-20: 80px;
    --lk-space-24: 96px;

    /* Shadow scale */
    --lk-shadow-sm:  0 4px 14px rgba(0,0,0,0.20);
    --lk-shadow-md:  0 10px 32px rgba(0,0,0,0.28);
    --lk-shadow-lg:  0 18px 48px rgba(0,0,0,0.35);
    --lk-shadow-xl:  0 28px 68px rgba(0,0,0,0.42);
    --lk-glow-green:  0 0 42px rgba(0,175,76,0.25);
    --lk-glow-yellow: 0 0 42px rgba(255,193,7,0.35);

    /* Brand color tokens */
    --lk-bg-body:       #ffbf00;
    --lk-bg-dark:       #0f1d25;
    --lk-bg-dark-hi:    #1a3140;
    --lk-bg-dark-lo:    #0a1218;
    --lk-border-card:   rgba(255, 193, 7, 0.15);
    --lk-border-card-hover: rgba(255, 193, 7, 0.4);
    --lk-text-primary:  #ffffff;
    --lk-text-secondary:#C9D2DC;
    --lk-text-muted:    #8FA2B0;
    --lk-accent-yellow: #ffc107;
    --lk-accent-green:  #00AF4C;
    --lk-accent-orange: #ff9500;
    --lk-gradient-primary: linear-gradient(135deg, #00AF4C 0%, #ffc107 100%);
    --lk-gradient-card:    linear-gradient(165deg, #1a3140 0%, #0f1d25 100%);
    --lk-gradient-card-hi: linear-gradient(165deg, #223f51 0%, #121f29 100%);

    /* Platform brand colors */
    --lk-platform-facebook:  #1877F2;
    --lk-platform-youtube:   #FF0000;
    --lk-platform-instagram: #E4405F;
    --lk-platform-twitter:   #1DA1F2;
    --lk-platform-tiktok:    #00F2EA;
    --lk-platform-telegram:  #0088CC;
    --lk-platform-snapchat:  #FFFC00;
    --lk-platform-spotify:   #1DB954;

    /* Transitions */
    --lk-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --lk-dur-fast: 0.25s;
    --lk-dur-base: 0.4s;
    --lk-dur-slow: 0.6s;
}

/* ---------- WCU Cards: Glass + Glow ---------- */
/* Equal-height cards: stretch the column children so all 4 cards share the same height */
.wcu-content > .row {
    align-items: stretch;
}

.wcu-content > .row > [class*="col-"] {
    display: flex;
}

.wcu-content .wcu-conteiner {
    position: relative;
    margin: 18px 0;
    width: 100%;
    display: flex;
}

/* Kill the old gradient-border and clip-path chevron */
.wcu-content .wcu-conteiner::before {
    display: none !important;
}

.wcu-content .wcu-conteiner .wcu-box {
    /* OPAQUE dark card — body bg is #ffbf00 yellow, glass would bleed yellow through */
    background: linear-gradient(165deg, #1a3140 0%, #0f1d25 100%) !important;
    border: 1px solid rgba(255, 193, 7, 0.15);
    border-radius: 22px !important;
    box-shadow: 0 14px 42px rgba(0, 0, 0, 0.25),
                inset 0 1px 0 rgba(255, 255, 255, 0.06);
    -webkit-clip-path: none !important;
    clip-path: none !important;
    overflow: hidden;
    width: 100%;
    display: flex;
    flex-direction: column;
    -webkit-transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                        border-color 0.4s ease,
                        box-shadow 0.4s ease,
                        background 0.4s ease;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                border-color 0.4s ease,
                box-shadow 0.4s ease,
                background 0.4s ease;
}

.wcu-content .wcu-conteiner .wcu-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 193, 7, 0.6), transparent);
    opacity: 0.5;
}

.wcu-content .wcu-conteiner:hover .wcu-box {
    -webkit-transform: translateY(-10px) !important;
    transform: translateY(-10px) !important;
    background: linear-gradient(165deg, #223f51 0%, #121f29 100%) !important;
    border-color: rgba(255, 193, 7, 0.45);
    box-shadow: 0 26px 62px rgba(0, 0, 0, 0.35),
                0 0 0 1px rgba(255, 193, 7, 0.28),
                0 0 40px rgba(255, 193, 7, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.wcu-content .wcu-conteiner .wcu-box .wcu-body {
    padding: 48px 28px 52px;
    text-align: center;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
}

/* Push the CTA arrow to the bottom so cards align visually */
.wcu-content .wcu-conteiner .wcu-box .wcu-body .wcu-go {
    margin-top: auto;
}

/* Circular yellow icon badge */
.wcu-content .wcu-conteiner .wcu-box .wcu-icon {
    width: 78px;
    height: 78px;
    margin: 0 auto 26px;
    border-radius: 50%;
    background: #ffc107;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    box-shadow: 0 0 28px rgba(255, 193, 7, 0.4),
                inset 0 2px 0 rgba(255, 255, 255, 0.3),
                inset 0 -2px 4px rgba(0, 0, 0, 0.15);
    -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                        box-shadow 0.4s ease;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.4s ease;
}

.wcu-content .wcu-conteiner .wcu-box .wcu-icon i {
    font-size: 32px !important;
    color: #ffffff !important;
    line-height: 1;
    -webkit-transition: none !important;
    transition: none !important;
}

.wcu-content .wcu-conteiner:hover .wcu-box .wcu-icon {
    -webkit-transform: rotate(-8deg) scale(1.08);
    transform: rotate(-8deg) scale(1.08);
    box-shadow: 0 0 50px rgba(255, 193, 7, 0.65),
                inset 0 2px 0 rgba(255, 255, 255, 0.4),
                inset 0 -2px 4px rgba(0, 0, 0, 0.15);
}

.wcu-content .wcu-conteiner .wcu-box .wcu-icon i {
    color: #0c151b !important;
}

.wcu-content .wcu-conteiner:hover .wcu-box .wcu-icon i {
    color: #0c151b !important;
}

.wcu-content .wcu-conteiner .wcu-box .wcu-title {
    font-size: 21px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.35;
    margin: 0 0 14px;
    letter-spacing: -0.2px;
}

.wcu-content .wcu-conteiner .wcu-box .wcu-text {
    font-size: 14.5px;
    line-height: 1.7;
    color: #A8B3BD;
    margin: 0;
}

.wcu-content .wcu-conteiner:hover .wcu-box .wcu-text {
    color: #C9D2DC;
}

.wcu-content .wcu-conteiner .wcu-box .wcu-go {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-top: 26px;
    border-radius: 50%;
    background: rgba(255, 193, 7, 0.1);
    border: 1px solid rgba(255, 193, 7, 0.25);
    transition: all 0.3s ease;
}

.wcu-content .wcu-conteiner .wcu-box .wcu-go i {
    font-size: 20px !important;
    color: #ffc107 !important;
}

.wcu-content .wcu-conteiner:hover .wcu-box .wcu-go {
    background: #ffc107;
    border-color: #ffc107;
    transform: rotate(45deg);
}

.wcu-content .wcu-conteiner:hover .wcu-box .wcu-go i {
    color: #15222e !important;
}

/* Section title polish — solid dark text for readability on yellow body (#ffbf00)
   NOTE: The base rule at line ~815 sets color:#fff (broken on yellow body). We override
   here to dark. Existing overrides in .signin-comparison-section/.signin-faq-section
   etc. also set dark (#121d27) so they remain consistent. */
.home-title h2 {
    font-size: 39px;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: #0c151b;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.1);
}

/* Preserve white title on .about-contact-section (orange gradient bg) */
.about-contact-section .home-title h2 {
    color: #ffffff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

/* ---------- Social Platform Tabs: Pill + Brand colors ---------- */
.home-section {
    position: relative;
}

.hsobs {
    margin-bottom: 44px;
    padding: 10px;
    background: #0f1d25;
    border: 1px solid rgba(255, 193, 7, 0.1);
    border-radius: 22px;
    box-shadow: 0 14px 42px rgba(0, 0, 0, 0.25),
                inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.hsobs > .row {
    margin: 0;
    gap: 0;
}

.hsobs > .row > [class*="col-"] {
    padding: 4px;
}

.home-section .hsobs .hsob {
    background: transparent !important;
    padding: 14px 20px !important;
    border-radius: 16px !important;
    color: #C9D2DC !important;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    -webkit-transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1) !important;
    transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.home-section .hsobs .hsob::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    opacity: 0;
    transition: opacity 0.35s ease;
    z-index: 0;
}

.home-section .hsobs .hsob > * {
    position: relative;
    z-index: 1;
}

.home-section .hsobs .hsob:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    -webkit-transform: translateY(-2px) !important;
    transform: translateY(-2px) !important;
}

.home-section .hsobs .hsob:hover .hsob-icon {
    -webkit-transform: scale(1.1) !important;
    transform: scale(1.1) !important;
    color: #ffffff !important;
}

/* Active state + platform colors (nth-child in row: 1=IG, 2=FB, 3=TW, 4=YT) */
.home-section .hsobs .hsob.active {
    background: transparent !important;
    color: #ffffff !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.home-section .hsobs .hsob.active::before {
    opacity: 1;
}

/* Instagram pill */
.home-section .hsobs .row > div:nth-child(1) .hsob.active::before {
    background: linear-gradient(135deg, #833ab4 0%, #fd1d1d 50%, #fcb045 100%);
}
.home-section .hsobs .row > div:nth-child(1) .hsob.active .hsob-icon,
.home-section .hsobs .row > div:nth-child(1) .hsob.active .hsob-title {
    color: #ffffff !important;
}

/* Facebook pill */
.home-section .hsobs .row > div:nth-child(2) .hsob.active::before {
    background: linear-gradient(135deg, #1877F2 0%, #00B2FF 100%);
}

/* Twitter/X pill */
.home-section .hsobs .row > div:nth-child(3) .hsob.active::before {
    background: linear-gradient(135deg, #1DA1F2 0%, #0d8bd9 100%);
}

/* YouTube pill */
.home-section .hsobs .row > div:nth-child(4) .hsob.active::before {
    background: linear-gradient(135deg, #FF0000 0%, #CC0000 100%);
}

.home-section .hsobs .hsob-icon {
    color: #ffc107;
    font-size: 26px;
    transition: all 0.35s ease;
}

.home-section .hsobs .hsob-title {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.3px;
}

/* ---------- Tab content: refined layout ---------- */
.home-tabs {
    padding: 40px 32px;
    background: linear-gradient(165deg, #1a3140 0%, #0f1d25 100%);
    border: 1px solid rgba(255, 193, 7, 0.12);
    border-radius: 28px;
    box-shadow: 0 14px 42px rgba(0, 0, 0, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.home-tabs .tab {
    animation: hsTabFadeIn 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes hsTabFadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.home-tabs .hsl-title-icon {
    width: 68px !important;
    height: 68px !important;
    border-radius: 20px !important;
    font-size: 34px !important;
    background: #ffc107 !important;
    color: #0c151b !important;
    box-shadow: 0 10px 28px rgba(255, 193, 7, 0.3),
                inset 0 2px 0 rgba(255, 255, 255, 0.25);
}

/* Per-tab icon color override (match brand) */
.home-tabs #tab-1 .hsl-title-icon {
    background: linear-gradient(135deg, #833ab4 0%, #fd1d1d 50%, #fcb045 100%) !important;
    box-shadow: 0 10px 28px rgba(253, 29, 29, 0.3), inset 0 2px 0 rgba(255,255,255,0.25) !important;
}
.home-tabs #tab-2 .hsl-title-icon {
    background: linear-gradient(135deg, #1877F2 0%, #00B2FF 100%) !important;
    box-shadow: 0 10px 28px rgba(24, 119, 242, 0.3), inset 0 2px 0 rgba(255,255,255,0.25) !important;
}
.home-tabs #tab-3 .hsl-title-icon {
    background: linear-gradient(135deg, #1DA1F2 0%, #0d8bd9 100%) !important;
    box-shadow: 0 10px 28px rgba(29, 161, 242, 0.3), inset 0 2px 0 rgba(255,255,255,0.25) !important;
}
.home-tabs #tab-4 .hsl-title-icon {
    background: linear-gradient(135deg, #FF0000 0%, #CC0000 100%) !important;
    box-shadow: 0 10px 28px rgba(255, 0, 0, 0.3), inset 0 2px 0 rgba(255,255,255,0.25) !important;
}

.home-tabs .hsl-title h2 {
    font-size: 34px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.4px;
}

.home-tabs .hsl-text {
    font-size: 17px;
    line-height: 1.75;
    color: #C9D2DC;
    margin: 26px 0;
}

.home-tabs .hsl-bottom {
    margin-top: 28px;
}

.home-tabs .hsl-item {
    position: relative;
    padding: 16px 20px 16px 42px;
    margin: 12px 0;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    transition: all 0.3s ease;
}

.home-tabs .hsl-item::before {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', 'FontAwesome';
    font-weight: 900;
    position: absolute;
    left: 16px;
    top: 18px;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    background: #ffc107;
    color: #0c151b;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(255, 193, 7, 0.45);
}

.home-tabs .hsl-item:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 193, 7, 0.2);
    transform: translateX(4px);
}

.home-tabs .hsli-title {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin-bottom: 6px !important;
}

.home-tabs .hsli-text {
    font-size: 14px !important;
    line-height: 1.65 !important;
    color: rgba(255, 255, 255, 0.72) !important;
}

/* Right-side image: add glow wrapper */
.home-tabs .tab .col-lg-6 > img.img-fluid {
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4),
                0 0 0 1px rgba(255, 255, 255, 0.08);
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    background: linear-gradient(145deg, rgba(24, 52, 65, 0.5), rgba(17, 30, 38, 0.7));
}

.home-tabs .tab:hover .col-lg-6 > img.img-fluid {
    transform: translateY(-6px);
}

/* ---------- New enhancement DOM (stats row + CTA) ---------- */
.hsl-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 28px 0 24px;
}

.hsl-stat {
    padding: 16px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    text-align: center;
    transition: all 0.3s ease;
}

.hsl-stat:hover {
    border-color: rgba(255, 193, 7, 0.35);
    background: rgba(255, 193, 7, 0.05);
    transform: translateY(-2px);
}

.hsl-stat-value {
    display: block;
    font-size: 22px;
    font-weight: 800;
    color: #ffc107;
    line-height: 1.2;
    margin-bottom: 4px;
}

.hsl-stat-label {
    display: block;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
}

.hsl-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 24px;
    padding: 14px 28px;
    background: #ffc107;
    color: #0c151b !important;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none !important;
    border-radius: 14px;
    box-shadow: 0 10px 28px rgba(255, 193, 7, 0.35),
                inset 0 2px 0 rgba(255, 255, 255, 0.25);
    transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.hsl-cta:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 16px 40px rgba(255, 193, 7, 0.5),
                inset 0 2px 0 rgba(255, 255, 255, 0.3);
    color: #0c151b !important;
}

.hsl-cta i {
    font-size: 14px;
    transition: transform 0.3s ease;
}

.hsl-cta:hover i {
    transform: translateX(4px);
}

/* ---------- Responsive tweaks ---------- */
@media (max-width: 991px) {
    .home-tabs {
        padding: 28px 20px;
        border-radius: 22px;
    }
    .home-tabs .hsl-title h2 {
        font-size: 26px;
    }
    .hsl-stats {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
    .hsl-stat-value {
        font-size: 18px;
    }
    .hsl-stat-label {
        font-size: 11px;
    }
}

@media (max-width: 768px) {
    .home-title h2 {
        font-size: 28px !important;
    }
    .wcu-content .wcu-conteiner .wcu-box .wcu-body {
        padding: 38px 22px 42px;
    }
    .wcu-content .wcu-conteiner .wcu-box .wcu-icon {
        width: 66px;
        height: 66px;
    }
    .wcu-content .wcu-conteiner .wcu-box .wcu-icon i {
        font-size: 28px !important;
    }
    .wcu-content .wcu-conteiner .wcu-box .wcu-title {
        font-size: 19px;
    }
    .home-section .hsobs .hsob-title {
        font-size: 14px;
    }
    .home-section .hsobs .hsob-icon {
        font-size: 22px;
    }
    .home-tabs .col-lg-6 > img.img-fluid {
        margin-top: 24px;
    }
}
/* ===========================================================================
   How-It-Works "ใช้งานง่าย 4 ขั้น" — Direction A (Yellow-native)
   Rewritten 2026-04-11. Philosophy: brand-first, typography-forward.
   - No wave dividers, no white bg (section inherits yellow body color)
   - Title = massive dark typography (no decoration)
   - 4 individual dark cards floating on yellow
   - Massive outline numeric watermarks behind each card (Linear/Framer style)
   =========================================================================== */

/* ---------- Section 1: Title area ---------- */
/* Neutralize any background on .how-pworks — let yellow body show through */
.how-pworks {
    background: transparent !important;
    overflow: visible !important;
    padding: 110px 0 40px !important;
    position: relative;
}

.how-pworks .bg-1,
.how-pworks::before,
.how-pworks::after,
.how-pworks .hpw-content::before,
.how-pworks .hpw-content::after {
    content: none !important;
    display: none !important;
    background: none !important;
}

.how-pworks .hpw-content {
    position: relative;
    z-index: 2;
    /* base rule sets padding: 180px 0 260px — kill it, let section padding handle spacing */
    padding: 0 !important;
}

.how-pworks .hpw-title {
    font-size: clamp(36px, 5.2vw, 64px) !important;
    font-weight: 900 !important;
    color: #0c151b !important; /* !important to defeat mobile @media overrides at line 2183 & 4335 */
    letter-spacing: -1.5px;
    line-height: 1.05;
    margin-bottom: 18px !important;
    text-shadow: none;
}

.how-pworks .hpw-text {
    max-width: 640px;
    margin: 0 auto;
    font-size: clamp(15px, 1.3vw, 18px) !important;
    font-weight: 500 !important;
    color: #0c151b !important;
    opacity: 0.72;
    line-height: 1.65 !important;
}

/* ---------- Section 2: Cards area (.how-pworks-bottom) ---------- */
/* Neutralize wave/fade on this section too */
.how-pworks-bottom {
    background: transparent !important;
    padding: 0 0 130px !important;
    position: relative;
}

.how-pworks-bottom::before,
.how-pworks-bottom::after {
    content: none !important;
    display: none !important;
    background: none !important;
}

/* ---------- Remove old dark wrapper — cards stand alone ---------- */
.hpw-box {
    margin-top: 0 !important;
    padding: 0;
    background: transparent !important;
    position: relative;
}

.hpw-box::before,
.hpw-box::after {
    content: none !important;
    display: none !important;
    background: none !important;
}

.hpw-box .hpw-box-r {
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    position: relative;
    z-index: 2;
}

.hpw-box .hpw-box-r::before,
.hpw-box .hpw-box-r::after {
    content: none !important;
    display: none !important;
    background: none !important;
}

/* Row gutters + equal-height cards */
.hpw-box .hpw-box-r > .row {
    --bs-gutter-x: 28px;
    --bs-gutter-y: 28px;
    align-items: stretch;
}

.hpw-box .hpw-box-r > .row > [class*="col-"] {
    position: relative;
    display: flex;
}

/* Kill the old horizontal dashed connector */
.hpw-box .hpw-box-r > .row > [class*="col-"]:not(:last-child)::after {
    content: none !important;
    display: none !important;
    background: none !important;
}

/* ---------- Individual dark cards floating on yellow ---------- */
.hpw-item {
    position: relative;
    width: 100%;
    text-align: left;
    padding: 140px 28px 34px;
    background: linear-gradient(180deg, #101f28 0%, #0a1218 100%);
    border: 1px solid rgba(255, 193, 7, 0.12);
    border-radius: 22px;
    overflow: hidden;
    min-height: 340px;
    box-shadow: 0 20px 40px rgba(12, 21, 27, 0.2),
                0 4px 12px rgba(12, 21, 27, 0.12),
                inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                border-color 0.5s ease,
                box-shadow 0.5s ease;
    margin: 0 !important;
    z-index: 2;
}

.hpw-item::after,
.hpw-item::before {
    content: none !important;
    display: none !important;
}

.hpw-item:hover {
    transform: translateY(-8px);
    border-color: rgba(255, 193, 7, 0.38);
    box-shadow: 0 32px 64px rgba(12, 21, 27, 0.28),
                0 8px 20px rgba(12, 21, 27, 0.16),
                0 0 0 1px rgba(255, 193, 7, 0.18),
                inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* ---------- Watermark number (outline style) ---------- */
.hpw-item .hpw-num {
    position: absolute !important;
    top: -44px;
    right: -22px;
    z-index: 1;
    margin: 0 !important;
    display: block;
    pointer-events: none;
    line-height: 0.75;
}

.hpw-item .hpw-num::before,
.hpw-item .hpw-num::after {
    content: none !important;
    display: none !important;
    background: none !important;
}

.hpw-item .hpw-num span {
    display: block !important;
    height: auto !important;
    width: auto !important;
    background: none !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    font-family: 'Inter', -apple-system, 'Noto Sans Thai', sans-serif;
    font-size: 220px !important;
    font-weight: 900 !important;
    line-height: 0.75 !important;
    letter-spacing: -10px;
    color: transparent !important;
    -webkit-text-stroke: 2px rgba(255, 193, 7, 0.2);
    /* `text-stroke` is non-standard; -webkit-text-stroke covers Safari/Chrome
     * and Firefox 116+ ships unprefixed but still labels it experimental. */
    transform: none !important;
    transition: -webkit-text-stroke-color 0.5s ease;
}

.hpw-item:hover .hpw-num span {
    -webkit-text-stroke-color: rgba(255, 193, 7, 0.38);
    transform: none !important;
    box-shadow: none !important;
}

/* ---------- Icon (top-left, left-aligned) ---------- */
.hpw-item .hpw-icon {
    position: relative;
    z-index: 2;
    height: 58px;
    margin: 0 0 26px !important;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.hpw-item:hover .hpw-icon {
    transform: scale(1.08);
}

.hpw-item .hpw-icon img {
    max-height: 54px;
    filter: brightness(0) saturate(100%) invert(83%) sepia(58%) saturate(653%) hue-rotate(1deg) brightness(103%) contrast(106%)
            drop-shadow(0 6px 18px rgba(255, 193, 7, 0.35));
    transition: filter 0.5s ease;
}

.hpw-item:hover .hpw-icon img {
    filter: brightness(0) saturate(100%) invert(93%) sepia(41%) saturate(1352%) hue-rotate(0deg) brightness(107%) contrast(104%)
            drop-shadow(0 8px 22px rgba(255, 193, 7, 0.55));
}

/* ---------- Typography (left-aligned editorial style) ---------- */
.hpw-item .hpw-title {
    position: relative;
    z-index: 2;
    margin: 0 !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    letter-spacing: -0.3px;
    line-height: 1.3;
    text-align: left;
}

.hpw-item .hpw-text {
    position: relative;
    z-index: 2;
    margin: 10px 0 0 !important;
    max-width: none !important;
    font-size: 14px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.62);
    text-align: left;
    transition: color 0.5s ease;
}

.hpw-item:hover .hpw-text {
    color: rgba(255, 255, 255, 0.78);
}

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
    .how-pworks {
        padding: 80px 0 30px !important;
    }
    .how-pworks-bottom {
        padding: 0 0 90px !important;
    }
    .hpw-item {
        padding: 120px 24px 30px;
        min-height: 310px;
    }
    .hpw-item .hpw-num span {
        font-size: 180px !important;
        letter-spacing: -8px;
    }
    .hpw-item .hpw-num {
        top: -36px;
        right: -18px;
    }
}

@media (max-width: 768px) {
    .how-pworks {
        padding: 60px 0 24px !important;
    }
    .how-pworks-bottom {
        padding: 0 0 70px !important;
    }
    .hpw-item {
        padding: 110px 22px 28px;
        min-height: 280px;
        border-radius: 20px;
    }
    .hpw-item .hpw-num span {
        font-size: 160px !important;
    }
    .hpw-item .hpw-title {
        font-size: 20px !important;
    }
}

/* ---------- "10 ปี" Hero Section (row containing .hl-btns) ---------- */
/* Targets the specific .home-section row that hosts the .hl-btns CTA pair.
   Uses :has() so we don't need new DOM classes. Scope is tight: must contain
   .hl-btns which only appears in this "why we've lasted 10 years" section. */

.home-section:has(.hl-btns) {
    padding: 80px 0;
}

.home-section:has(.hl-btns) > .container > .row {
    position: relative;
    margin-left: 0;
    margin-right: 0;
    padding: 50px 56px;
    background: radial-gradient(ellipse at 85% 30%, #22394a 0%, #0f1d25 65%),
                linear-gradient(165deg, #18303f, #0a1218);
    background-blend-mode: screen;
    border: 1px solid rgba(255, 193, 7, 0.18);
    border-radius: 32px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35),
                inset 0 1px 0 rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

/* Ambient glow orb behind image */
.home-section:has(.hl-btns) > .container > .row::before {
    content: '';
    position: absolute;
    top: -20%;
    right: -10%;
    width: 520px;
    height: 520px;
    background: radial-gradient(circle, rgba(255, 193, 7, 0.2) 0%, rgba(255, 193, 7, 0.06) 40%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
}

/* Top gradient highlight line */
.home-section:has(.hl-btns) > .container > .row::after {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 193, 7, 0.6), transparent);
    pointer-events: none;
}

.home-section:has(.hl-btns) .col-lg-6 {
    position: relative;
    z-index: 2;
}

/* Reset old py/my padding on desktop — we handle spacing via row padding now */
.home-section:has(.hl-btns) > .container > .row > .col-lg-6.py-5.my-5 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Crown badge — circular gradient badge */
.home-section:has(.hl-btns) .hsl-title {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 4px;
}

.home-section:has(.hl-btns) .hsl-title > .row {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 0;
    width: 100%;
}

.home-section:has(.hl-btns) .hsl-title > .row > [class*="col-"] {
    padding: 0;
    flex: 0 0 auto;
    width: auto;
}

.home-section:has(.hl-btns) .hsl-title > .row > .col-md:last-child,
.home-section:has(.hl-btns) .hsl-title > .row > .col:last-child {
    flex: 1 1 auto;
}

.home-section:has(.hl-btns) .hsl-title-icon {
    width: 72px !important;
    height: 72px !important;
    border-radius: 22px !important;
    background: linear-gradient(135deg, #ffc107 0%, #ff9500 100%) !important;
    box-shadow: 0 14px 34px rgba(255, 193, 7, 0.4),
                inset 0 2px 0 rgba(255, 255, 255, 0.3),
                inset 0 -3px 6px rgba(0, 0, 0, 0.15) !important;
    font-size: 34px !important;
    color: #0c151b !important;
    position: relative;
}

.home-section:has(.hl-btns) .hsl-title-icon::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 26px;
    background: radial-gradient(circle, rgba(255, 193, 7, 0.4) 0%, rgba(255, 193, 7, 0.1) 60%, transparent 100%);
    z-index: -1;
    filter: blur(12px);
}

.home-section:has(.hl-btns) .hsl-title h2 {
    font-size: 38px !important;
    font-weight: 800;
    line-height: 1.2;
    color: #ffffff;
    letter-spacing: -0.6px;
    margin: 0;
}

/* Title year highlight */
.home-section:has(.hl-btns) .hsl-title h2 {
    background: linear-gradient(135deg, #ffffff 0%, #ffffff 60%, #ffc107 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.home-section:has(.hl-btns) .hsl-text {
    font-size: 17px;
    line-height: 1.8;
    color: #B8C7D2;
    max-width: 520px;
    margin: 26px 0 8px;
    font-weight: 400;
}

/* Stats chip row — injected via pseudo element would be ideal, but we'll keep
   DOM as-is and add a subtle decorative badge via ::before on .hl-btns */
.home-section:has(.hl-btns) .hl-btns {
    position: relative;
    margin-top: 36px;
    gap: 14px;
    flex-wrap: wrap;
}

.home-section:has(.hl-btns) .hl-btns > a {
    margin: 0 !important;
}

/* Primary CTA: solid yellow */
.home-section:has(.hl-btns) .btn-hero-primary {
    padding: 16px 34px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    background: var(--lk-accent-yellow) !important;
    background-color: var(--lk-accent-yellow) !important;
    border: none !important;
    border-color: transparent !important;
    color: #0c151b !important;
    border-radius: 14px !important;
    box-shadow: 0 12px 30px rgba(255, 193, 7, 0.3),
                inset 0 2px 0 rgba(255, 255, 255, 0.25) !important;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.35s ease !important;
}

.home-section:has(.hl-btns) .btn-hero-primary:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 18px 44px rgba(255, 193, 7, 0.5),
                inset 0 2px 0 rgba(255, 255, 255, 0.3) !important;
    color: #0c151b !important;
}

/* Secondary CTA: transparent outline */
.home-section:has(.hl-btns) .signin-hero-dark-btn {
    padding: 16px 34px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    background: rgba(255, 255, 255, 0.04) !important;
    background-color: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    border-radius: 14px !important;
    transition: all 0.35s ease !important;
}

.home-section:has(.hl-btns) .signin-hero-dark-btn:hover {
    background: rgba(255, 193, 7, 0.1) !important;
    border-color: rgba(255, 193, 7, 0.4) !important;
    color: #ffc107 !important;
    transform: translateY(-3px);
}

/* Right-side image: glow + subtle float animation */
.home-section:has(.hl-btns) .col-lg-6 > img.img-fluid {
    filter: drop-shadow(0 30px 50px rgba(255, 193, 7, 0.25))
            drop-shadow(0 20px 40px rgba(0, 0, 0, 0.35));
    animation: hero10yFloat 6s ease-in-out infinite;
}

@keyframes hero10yFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-12px); }
}

/* Responsive tweaks */
@media (max-width: 991px) {
    .home-section:has(.hl-btns) {
        padding: 50px 0;
    }
    .home-section:has(.hl-btns) > .container > .row {
        padding: 36px 28px;
        border-radius: 24px;
    }
    .home-section:has(.hl-btns) .hsl-title h2 {
        font-size: 28px !important;
    }
    .home-section:has(.hl-btns) .hsl-title-icon {
        width: 60px !important;
        height: 60px !important;
        font-size: 28px !important;
    }
    .home-section:has(.hl-btns) .hsl-text {
        font-size: 15px;
    }
}

@media (max-width: 768px) {
    .home-section:has(.hl-btns) > .container > .row {
        padding: 32px 22px;
    }
    .home-section:has(.hl-btns) .hl-btns {
        flex-direction: column;
    }
    .home-section:has(.hl-btns) .hl-btns > a {
        width: 100%;
        text-align: center;
    }
}

/* ---------- how-pworks BG transition REMOVED 2026-04-11 ----------
   Removed: SVG wave dividers (top + bottom), white gradient canvas,
   aurora blobs, dated 2017-era wave transition. Replaced by Direction A
   yellow-native styling (see block at ~line 22186). The section now
   inherits the yellow body color directly — no divider needed. */

/* Keep scroll-reveal on title + cards (still useful in Direction A) */
@supports (animation-timeline: view()) {
    .how-pworks .hpw-title,
    .how-pworks .hpw-text {
        animation: hpwFadeUp linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 40%;
    }

    .hpw-item {
        animation: hpwFadeUp linear both;
        animation-timeline: view();
        animation-range: entry 5% entry 50%;
    }
}

@keyframes hpwFadeUp {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .how-pworks .hpw-title,
    .how-pworks .hpw-text,
    .hpw-item {
        animation: none;
    }
}

/* ---------- "ครบจบ ทุกโซเชียล" 8 Service Cards (.stepbox .sboxes) ---------- */
/* Overrides old .stepbox rules (lines ~8569-8631). Scope: .stepbox class */

.stepbox {
    position: relative;
}

.stepbox > .row {
    align-items: stretch !important;
    row-gap: var(--lk-space-5);
}

.stepbox > .row > [class*="col-"] {
    display: flex;
}

.stepbox .sboxes {
    position: relative;
    margin: 0 !important;
    width: 100%;
    display: flex;
}

.stepbox .sboxes .barea {
    background: var(--lk-gradient-card) !important;
    border: 1px solid var(--lk-border-card) !important;
    border-radius: var(--lk-radius-lg) !important;
    box-shadow: var(--lk-shadow-md);
    padding: 0 !important;
    position: relative;
    overflow: hidden;
    width: 100%;
    display: flex;
    flex-direction: column;
    transition: transform var(--lk-dur-base) var(--lk-ease),
                border-color var(--lk-dur-base) ease,
                box-shadow var(--lk-dur-base) ease,
                background var(--lk-dur-base) ease;
}

/* Top highlight line */
.stepbox .sboxes .barea::before {
    content: '';
    position: absolute;
    top: 0;
    left: 15%;
    right: 15%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--lk-accent-yellow), transparent);
    opacity: 0.55;
    z-index: 2;
}

/* Kill old yellow hover and ugly invert filter */
.stepbox .sboxes:hover .barea {
    background: var(--lk-gradient-card-hi) !important;
    transform: translateY(-8px);
    border-color: var(--lk-border-card-hover) !important;
    box-shadow: var(--lk-shadow-lg), var(--lk-glow-green);
    cursor: pointer;
}

.stepbox .sboxes:hover .barea .sbicon i {
    filter: none !important;
    -webkit-filter: none !important;
}

/* Content padding */
.stepbox .sboxes .barea .sbbody {
    padding: var(--lk-space-6) var(--lk-space-5) !important;
    height: auto !important;
    min-height: 220px;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 3;
}

/* Flex row with icon + title */
.stepbox .sboxes .barea .sbbody > .row {
    margin: 0 !important;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
}

/* Icon column override (kill bootstrap col-2 sizing — force 50x50 square badge).
   Base bg is yellow fallback; nth-child platform rules override per platform. */
.stepbox .sboxes .barea .sbbody > .row > .sbicon.col-2,
.stepbox .sboxes .barea .sbbody > .row > .col-2.sbicon,
.stepbox .sboxes .barea .sbicon {
    flex: 0 0 50px !important;
    width: 50px !important;
    height: 50px !important;
    max-width: 50px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ffc107;
    border-radius: var(--lk-radius-sm);
    box-shadow: 0 8px 22px rgba(255, 193, 7, 0.35),
                inset 0 2px 0 rgba(255, 255, 255, 0.25);
    transition: transform var(--lk-dur-base) var(--lk-ease),
                box-shadow var(--lk-dur-base) ease;
    aspect-ratio: 1 / 1;
}

.stepbox .sboxes:hover .sbicon {
    transform: rotate(-6deg) scale(1.06);
}

.stepbox .sboxes .barea .sbicon i {
    font-size: 22px !important;
    color: #ffffff !important;
    line-height: 1;
    transition: none !important;
}

/* Title column override */
.stepbox .sboxes .barea .sbbody > .row > .sbtitle.col-10,
.stepbox .sboxes .barea .sbbody > .row > .col-10.sbtitle {
    flex: 1 1 0 !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
}

.stepbox .sboxes .barea .sbtitle {
    margin: 0 !important;
    font-size: var(--lk-text-xl);
    font-weight: 700;
    color: var(--lk-text-primary);
    line-height: 1.3;
    letter-spacing: -0.2px;
}

/* Description text below the row */
.stepbox .sboxes .barea .sbbody .sbtext {
    width: 100%;
    padding: 0 !important;
    margin: 16px 0 0 !important;
    font-size: var(--lk-text-sm) !important;
    color: var(--lk-text-muted) !important;
    line-height: 1.7;
    transition: color var(--lk-dur-base) ease;
}

.stepbox .sboxes:hover .barea .sbtext {
    color: var(--lk-text-secondary) !important;
}

/* ===== Platform-specific icon badge gradients + hover glow =====
   NOTE: !important required because the icon base rule has specificity 0,6,0
   (via .sbicon.col-2 override). These nth-child rules are only 0,4,0. */

/* Facebook */
.stepbox > .row > [class*="col-"]:nth-child(1) .sbicon {
    background: linear-gradient(135deg, #1877F2 0%, #4293F5 100%) !important;
    box-shadow: 0 8px 22px rgba(24, 119, 242, 0.4),
                inset 0 2px 0 rgba(255, 255, 255, 0.25) !important;
}
.stepbox > .row > [class*="col-"]:nth-child(1) .sboxes:hover .barea {
    box-shadow: var(--lk-shadow-lg), 0 0 60px rgba(24, 119, 242, 0.25);
}

/* YouTube */
.stepbox > .row > [class*="col-"]:nth-child(2) .sbicon {
    background: linear-gradient(135deg, #FF0000 0%, #FF5454 100%) !important;
    box-shadow: 0 8px 22px rgba(255, 0, 0, 0.4),
                inset 0 2px 0 rgba(255, 255, 255, 0.25) !important;
}
.stepbox > .row > [class*="col-"]:nth-child(2) .sboxes:hover .barea {
    box-shadow: var(--lk-shadow-lg), 0 0 60px rgba(255, 0, 0, 0.22);
}

/* Instagram — signature gradient */
.stepbox > .row > [class*="col-"]:nth-child(3) .sbicon {
    background: linear-gradient(135deg, #833ab4 0%, #fd1d1d 50%, #fcb045 100%) !important;
    box-shadow: 0 8px 22px rgba(253, 29, 29, 0.35),
                inset 0 2px 0 rgba(255, 255, 255, 0.25) !important;
}
.stepbox > .row > [class*="col-"]:nth-child(3) .sboxes:hover .barea {
    box-shadow: var(--lk-shadow-lg), 0 0 60px rgba(253, 29, 29, 0.22);
}

/* X / Twitter */
.stepbox > .row > [class*="col-"]:nth-child(4) .sbicon {
    background: linear-gradient(135deg, #1DA1F2 0%, #0d8bd9 100%) !important;
    box-shadow: 0 8px 22px rgba(29, 161, 242, 0.4),
                inset 0 2px 0 rgba(255, 255, 255, 0.25) !important;
}
.stepbox > .row > [class*="col-"]:nth-child(4) .sboxes:hover .barea {
    box-shadow: var(--lk-shadow-lg), 0 0 60px rgba(29, 161, 242, 0.22);
}

/* TikTok */
.stepbox > .row > [class*="col-"]:nth-child(5) .sbicon {
    background: linear-gradient(135deg, #25F4EE 0%, #FE2C55 100%) !important;
    box-shadow: 0 8px 22px rgba(254, 44, 85, 0.38),
                inset 0 2px 0 rgba(255, 255, 255, 0.25) !important;
}
.stepbox > .row > [class*="col-"]:nth-child(5) .sboxes:hover .barea {
    box-shadow: var(--lk-shadow-lg), 0 0 60px rgba(254, 44, 85, 0.22);
}

/* Telegram */
.stepbox > .row > [class*="col-"]:nth-child(6) .sbicon {
    background: linear-gradient(135deg, #0088CC 0%, #00AEEF 100%) !important;
    box-shadow: 0 8px 22px rgba(0, 136, 204, 0.4),
                inset 0 2px 0 rgba(255, 255, 255, 0.25) !important;
}
.stepbox > .row > [class*="col-"]:nth-child(6) .sboxes:hover .barea {
    box-shadow: var(--lk-shadow-lg), 0 0 60px rgba(0, 136, 204, 0.22);
}

/* Snapchat */
.stepbox > .row > [class*="col-"]:nth-child(7) .sbicon {
    background: linear-gradient(135deg, #FFFC00 0%, #FFE800 100%) !important;
    box-shadow: 0 8px 22px rgba(255, 252, 0, 0.38),
                inset 0 2px 0 rgba(255, 255, 255, 0.35) !important;
}
.stepbox > .row > [class*="col-"]:nth-child(7) .sbicon i {
    color: #0c151b !important;  /* black icon on yellow badge */
}
.stepbox > .row > [class*="col-"]:nth-child(7) .sboxes:hover .barea {
    box-shadow: var(--lk-shadow-lg), 0 0 60px rgba(255, 252, 0, 0.25);
}

/* Spotify */
.stepbox > .row > [class*="col-"]:nth-child(8) .sbicon {
    background: linear-gradient(135deg, #1DB954 0%, #1ed760 100%) !important;
    box-shadow: 0 8px 22px rgba(29, 185, 84, 0.4),
                inset 0 2px 0 rgba(255, 255, 255, 0.25) !important;
}
.stepbox > .row > [class*="col-"]:nth-child(8) .sboxes:hover .barea {
    box-shadow: var(--lk-shadow-lg), 0 0 60px rgba(29, 185, 84, 0.22);
}

/* Responsive */
@media (max-width: 768px) {
    .stepbox .sboxes .barea .sbbody {
        padding: var(--lk-space-5) var(--lk-space-4) !important;
        min-height: 180px;
    }
    .stepbox .sboxes .barea .sbbody > .row > .sbicon.col-2,
    .stepbox .sboxes .barea .sbbody > .row > .col-2.sbicon,
    .stepbox .sboxes .barea .sbicon {
        flex: 0 0 44px !important;
        width: 44px !important;
        height: 44px !important;
        max-width: 44px !important;
    }
    .stepbox .sboxes .barea .sbicon i {
        font-size: 20px !important;
    }
    .stepbox .sboxes .barea .sbtitle {
        font-size: var(--lk-text-lg);
    }
}

/* ---------- Stats Bar (.hfs-content) — just below hero ---------- */
/* Wrap the 3 stats + CTA into a single glass dark container */

.hfs-content {
    position: relative;
    padding: var(--lk-space-8) var(--lk-space-10);
    background: var(--lk-gradient-card);
    border: 1px solid var(--lk-border-card);
    border-radius: var(--lk-radius-xl);
    box-shadow: var(--lk-shadow-lg);
    overflow: hidden;
}

/* Top gradient highlight */
.hfs-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 12%;
    right: 12%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--lk-accent-yellow), transparent);
    opacity: 0.6;
}

/* Ambient glow orb */
.hfs-content::after {
    content: '';
    position: absolute;
    top: -40%;
    right: 15%;
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, rgba(255, 193, 7, 0.1) 0%, transparent 60%);
    border-radius: 50%;
    pointer-events: none;
    filter: blur(40px);
}

.hfs-content > .row {
    position: relative;
    z-index: 2;
    align-items: center;
}

.hfs-content .hfs-item {
    position: relative;
    margin: var(--lk-space-3) 0;
    padding-right: var(--lk-space-6);
}

/* Vertical divider between stats (desktop only) */
.hfs-content > .row > .col-lg-3:not(:last-child) .hfs-item::after {
    content: '';
    position: absolute;
    right: 0;
    top: 15%;
    bottom: 15%;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(255, 193, 7, 0.25), transparent);
}

/* Big gradient stat number */
.hfs-content .hfs-item .hfs-count {
    font-size: var(--lk-text-4xl) !important;
    font-weight: 800 !important;
    letter-spacing: -0.8px;
    line-height: 1.1;
    background: linear-gradient(135deg, #ffffff 0%, var(--lk-accent-yellow) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 6px;
}

/* Label under the number */
.hfs-content .hfs-item .hfs-title {
    font-size: var(--lk-text-sm) !important;
    font-weight: 500 !important;
    color: var(--lk-text-muted) !important;
    letter-spacing: 0.3px;
    text-transform: none;
}

/* CTA button inside stats bar — dark with yellow hover */
.hfs-content .signin-hero-dark-btn {
    padding: 16px 28px !important;
    font-size: var(--lk-text-base) !important;
    font-weight: 700 !important;
    background: #0c151b !important;
    background-color: #0c151b !important;
    border: 1px solid rgba(255, 193, 7, 0.35) !important;
    color: var(--lk-accent-yellow) !important;
    border-radius: var(--lk-radius-sm) !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3) !important;
    transition: transform var(--lk-dur-fast) var(--lk-ease),
                box-shadow var(--lk-dur-fast) ease,
                background var(--lk-dur-fast) ease !important;
}

.hfs-content .signin-hero-dark-btn:hover {
    transform: translateY(-3px) scale(1.02);
    background: var(--lk-accent-yellow) !important;
    border-color: var(--lk-accent-yellow) !important;
    color: #0c151b !important;
    box-shadow: 0 16px 40px rgba(255, 193, 7, 0.45) !important;
}

/* Responsive */
@media (max-width: 991px) {
    .hfs-content {
        padding: var(--lk-space-6) var(--lk-space-5);
    }
    .hfs-content .hfs-item .hfs-count {
        font-size: var(--lk-text-3xl) !important;
    }
    .hfs-content > .row > .col-lg-3:not(:last-child) .hfs-item::after {
        display: none;
    }
    .hfs-content .hfs-item {
        text-align: center;
        padding-right: 0;
    }
}

/* ---------- Comparison Table (.signin-comparison-table) ---------- */
/* Convert light table to dark glass for consistency with rest of page */

.signin-comparison-section .table-responsive {
    position: relative;
    padding: var(--lk-space-4);
    background: var(--lk-gradient-card);
    border: 1px solid var(--lk-border-card);
    border-radius: var(--lk-radius-xl);
    box-shadow: var(--lk-shadow-lg);
    overflow: hidden;
}

.signin-comparison-section .table-responsive::before {
    content: '';
    position: absolute;
    top: 0;
    left: 12%;
    right: 12%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--lk-accent-yellow), transparent);
    opacity: 0.6;
    z-index: 1;
}

.signin-comparison-table {
    background: transparent !important;
    border-radius: var(--lk-radius-lg) !important;
    box-shadow: none !important;
    overflow: visible !important;
    margin: 0 !important;
    position: relative;
    z-index: 2;
}

/* ===== Header row ===== */
.signin-comparison-table thead tr {
    background: transparent !important;
}

.signin-comparison-table th {
    background: transparent !important;
    border: none !important;
    padding: var(--lk-space-5) var(--lk-space-4) !important;
    font-size: var(--lk-text-base) !important;
    font-weight: 700 !important;
    text-align: center !important;
    position: relative;
}

.signin-comparison-table th.col-feature {
    color: var(--lk-text-secondary) !important;
    text-align: left !important;
    padding-left: var(--lk-space-6) !important;
}

.signin-comparison-table th.col-likester {
    background: #0c151b !important;
    color: var(--lk-accent-yellow) !important;
    border-radius: var(--lk-radius-sm) var(--lk-radius-sm) 0 0 !important;
    position: relative;
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.35),
                inset 0 1px 0 rgba(255, 193, 7, 0.25);
    border: 1px solid rgba(255, 193, 7, 0.35) !important;
    border-bottom: none !important;
}

.signin-comparison-table th.col-likester .signin-cta-pill-icon {
    color: var(--lk-accent-yellow);
    margin-right: 6px;
}

.signin-comparison-table th.col-competitor {
    color: var(--lk-text-muted) !important;
    font-weight: 600 !important;
}

.signin-comparison-table .best-badge {
    position: absolute;
    top: 8px;
    right: 12px;
    background: var(--lk-accent-yellow) !important;
    color: #0c151b !important;
    padding: 3px 10px !important;
    border-radius: var(--lk-radius-full) !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    box-shadow: 0 3px 10px rgba(255, 193, 7, 0.35);
}

/* ===== Body rows ===== */
.signin-comparison-table tbody tr {
    border: none !important;
    transition: background var(--lk-dur-fast) ease;
}

.signin-comparison-table tbody tr:hover {
    background: rgba(255, 193, 7, 0.04);
}

.signin-comparison-table tbody tr + tr td {
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.signin-comparison-table td {
    padding: var(--lk-space-5) var(--lk-space-4) !important;
    border: none !important;
    background: transparent !important;
    vertical-align: middle !important;
}

.signin-comparison-table td.feature-cell {
    color: var(--lk-text-primary) !important;
    font-size: var(--lk-text-base) !important;
    font-weight: 600 !important;
    background: transparent !important;
    padding-left: var(--lk-space-6) !important;
}

.signin-comparison-table td.feature-cell i {
    color: var(--lk-accent-yellow) !important;
    margin-right: 10px;
    font-size: var(--lk-text-base);
    width: 18px;
    text-align: center;
}

.signin-comparison-table td.likester-cell {
    background: rgba(255, 193, 7, 0.08) !important;
    color: var(--lk-accent-yellow) !important;
    font-weight: 800 !important;
    font-size: var(--lk-text-lg) !important;
    text-align: center !important;
    border-left: 1px solid rgba(255, 193, 7, 0.2) !important;
    border-right: 1px solid rgba(255, 193, 7, 0.2) !important;
}

.signin-comparison-table tbody tr:last-child td.likester-cell {
    border-bottom: 1px solid rgba(255, 193, 7, 0.2) !important;
    border-radius: 0 0 var(--lk-radius-sm) var(--lk-radius-sm);
}

.signin-comparison-table td.likester-cell .fa-check-circle {
    color: var(--lk-accent-green) !important;
    margin-right: 4px;
    /* subtle glow only — check icon is a functional "OK" indicator */
    filter: drop-shadow(0 0 4px rgba(0, 175, 76, 0.25));
}

.signin-comparison-table td.likester-cell .fa-star {
    color: var(--lk-accent-yellow) !important;
    margin-left: 4px;
    filter: drop-shadow(0 0 6px rgba(255, 193, 7, 0.5));
}

.signin-comparison-table td.competitor-cell {
    color: var(--lk-text-muted) !important;
    font-weight: 600 !important;
    font-size: var(--lk-text-base) !important;
    text-align: center !important;
}

.signin-comparison-table td.competitor-cell.text-danger {
    color: #ff6b6b !important;
}

.signin-comparison-table td.competitor-cell.text-danger .fa-times-circle {
    color: #ff6b6b !important;
    margin-right: 4px;
}

.signin-comparison-table td.competitor-cell .fa-check-circle {
    color: rgba(255, 255, 255, 0.35) !important;
}

/* Section background: dark glass on yellow section body */
.signin-comparison-section {
    background: #ffc107 !important;
}

/* ---------- FAQ Cards (.sp-faq-card) ---------- */
/* Keep yellow section bg, convert cards to dark glass for coherence */

.signin-faq-section .sp-faq-card {
    background: var(--lk-gradient-card) !important;
    border: 1px solid var(--lk-border-card) !important;
    border-radius: var(--lk-radius-lg) !important;
    padding: var(--lk-space-6) var(--lk-space-6) !important;
    box-shadow: var(--lk-shadow-md) !important;
    height: 100%;
    position: relative;
    overflow: hidden;
    transition: transform var(--lk-dur-base) var(--lk-ease),
                border-color var(--lk-dur-base) ease,
                box-shadow var(--lk-dur-base) ease;
}

.signin-faq-section .sp-faq-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 15%;
    right: 15%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--lk-accent-yellow), transparent);
    opacity: 0.55;
}

.signin-faq-section .sp-faq-card:hover {
    transform: translateY(-6px);
    border-color: var(--lk-border-card-hover) !important;
    box-shadow: var(--lk-shadow-lg), 0 0 40px rgba(255, 193, 7, 0.1) !important;
}

.signin-faq-section .sp-faq-card h3 {
    color: var(--lk-text-primary) !important;
    font-size: var(--lk-text-lg) !important;
    font-weight: 700 !important;
    margin-bottom: var(--lk-space-4) !important;
    line-height: 1.4 !important;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.signin-faq-section .sp-faq-card h3 i {
    color: #0c151b !important;
    margin-right: 0 !important;
    font-size: 16px !important;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--lk-accent-yellow);
    border-radius: var(--lk-radius-sm);
    box-shadow: 0 4px 14px rgba(255, 193, 7, 0.35),
                inset 0 1px 0 rgba(255, 255, 255, 0.25);
    flex-shrink: 0;
}

.signin-faq-section .sp-faq-card p {
    color: var(--lk-text-muted) !important;
    font-size: var(--lk-text-sm) !important;
    line-height: 1.75 !important;
    margin: 0 !important;
}

.signin-faq-section .sp-faq-card p a.text-gold {
    color: var(--lk-accent-yellow) !important;
    text-decoration: underline;
    text-decoration-color: rgba(255, 193, 7, 0.35);
    text-underline-offset: 3px;
    transition: text-decoration-color var(--lk-dur-fast) ease;
}

.signin-faq-section .sp-faq-card p a.text-gold:hover {
    text-decoration-color: var(--lk-accent-yellow);
}

/* Bottom CTA chips inside FAQ section */
.signin-faq-section .signin-bottom-cta {
    position: relative;
}

.signin-faq-section .signin-bottom-cta h3 {
    color: #0c151b;
    font-weight: 800;
    font-size: var(--lk-text-2xl);
    margin-bottom: var(--lk-space-5);
}

/* ---------- Blog Cards (.signin-blog-card) ---------- */

.signin-blog-section .signin-blog-card {
    background: var(--lk-gradient-card) !important;
    border: 1px solid var(--lk-border-card) !important;
    border-radius: var(--lk-radius-lg) !important;
    box-shadow: var(--lk-shadow-md) !important;
    overflow: hidden !important;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform var(--lk-dur-base) var(--lk-ease),
                border-color var(--lk-dur-base) ease,
                box-shadow var(--lk-dur-base) ease !important;
}

.signin-blog-section .signin-blog-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 15%;
    right: 15%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--lk-accent-yellow), transparent);
    opacity: 0.55;
    z-index: 3;
}

.signin-blog-section .signin-blog-card:hover {
    transform: translateY(-8px);
    border-color: var(--lk-border-card-hover) !important;
    box-shadow: var(--lk-shadow-lg), 0 0 50px rgba(255, 193, 7, 0.12) !important;
}

.signin-blog-section .signin-blog-thumb,
.signin-blog-section .signin-blog-grad-gold,
.signin-blog-section .signin-blog-grad-dark,
.signin-blog-section .signin-blog-grad-mixed {
    height: 200px;
    position: relative;
    overflow: hidden;
    transition: transform var(--lk-dur-base) var(--lk-ease);
}

.signin-blog-section .signin-blog-card:hover .signin-blog-thumb,
.signin-blog-section .signin-blog-card:hover [class^="signin-blog-grad-"] {
    transform: scale(1.05);
}

.signin-blog-section .signin-blog-thumb-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60%;
    background: linear-gradient(180deg, transparent 0%, rgba(10, 18, 24, 0.9) 100%);
}

.signin-blog-section .signin-blog-card-body {
    padding: var(--lk-space-6) var(--lk-space-5) !important;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.signin-blog-section .signin-blog-card-body h3 {
    color: var(--lk-text-primary) !important;
    font-size: var(--lk-text-lg) !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    margin-bottom: var(--lk-space-3) !important;
    min-height: 50px;
}

.signin-blog-section .signin-blog-card-body p {
    color: var(--lk-text-muted) !important;
    font-size: var(--lk-text-sm) !important;
    line-height: 1.7 !important;
    margin-bottom: var(--lk-space-5) !important;
    flex: 1 1 auto;
}

.signin-blog-section .signin-blog-card-body .btn {
    align-self: flex-start;
    padding: 10px 22px !important;
    font-size: var(--lk-text-sm) !important;
    font-weight: 700 !important;
    background: transparent !important;
    border: 1px solid rgba(255, 193, 7, 0.3) !important;
    color: var(--lk-accent-yellow) !important;
    border-radius: var(--lk-radius-sm) !important;
    transition: all var(--lk-dur-fast) var(--lk-ease) !important;
}

.signin-blog-section .signin-blog-card-body .btn:hover {
    background: var(--lk-accent-yellow) !important;
    border-color: var(--lk-accent-yellow) !important;
    color: #0c151b !important;
    transform: translateX(4px);
}

/* ---------- Hero Section (.home-head) ---------- */
/* Scope: all pages with .home-head (signin, signin_lao, smm-panel-*, about-us,
   how-it-works, all Social Page landing pages) — shared hero styling */

/* Update badge "อัพเดตใหม่ล่าสุด 2025!" — modern glass pill */
.home-head .hh-left-badge {
    background: rgba(12, 21, 27, 0.85) !important;
    border: 1px solid rgba(255, 193, 7, 0.3);
    border-radius: var(--lk-radius-full) !important;
    padding-right: 18px !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25),
                0 0 0 1px rgba(255, 255, 255, 0.04) inset;
    transition: transform var(--lk-dur-fast) var(--lk-ease),
                box-shadow var(--lk-dur-fast) ease;
}

.home-head .hh-left-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.3),
                0 0 30px rgba(255, 193, 7, 0.25);
}

.home-head .hh-left-badge .hhlb-icon {
    background: var(--lk-accent-yellow) !important;
    color: #0c151b !important;
    box-shadow: 0 6px 18px rgba(255, 193, 7, 0.35),
                inset 0 2px 0 rgba(255, 255, 255, 0.3);
}

.home-head .hh-left-badge .hhlb-text {
    color: var(--lk-accent-yellow) !important;
    font-size: var(--lk-text-sm) !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px;
}

/* Hero headline with gradient accent */
.home-head .hl-title {
    font-size: 54px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    letter-spacing: -1px;
    margin-top: 36px !important;
    margin-bottom: 28px !important;
    color: #0c151b !important;
    text-shadow: 0 2px 6px rgba(255, 255, 255, 0.15);
}

/* Preserve yellow highlight span inside title (smm-panel-thailand) — but use
   orange for better contrast on yellow body */
.home-head .hl-title .text-gold {
    color: #d97706 !important;  /* amber-600, readable on yellow body */
    font-weight: 800;
}

.home-head .hl-title .text-gold .fa-star {
    color: var(--lk-accent-yellow) !important;
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.4));
}

.home-head .hl-text {
    color: rgba(12, 21, 27, 0.78) !important;
    font-size: var(--lk-text-lg) !important;
    line-height: 1.75 !important;
    font-weight: 500 !important;
    max-width: 560px;
}

/* Hero CTA buttons */
.home-head .hl-btns {
    margin-top: var(--lk-space-10) !important;
    gap: 14px;
    flex-wrap: wrap;
}

.home-head .hl-btns > a {
    margin: 0 !important;
}

.home-head .btn-hero-primary {
    padding: 18px 38px !important;
    font-size: var(--lk-text-base) !important;
    font-weight: 700 !important;
    background: linear-gradient(135deg, #0c151b 0%, #1a2a36 100%) !important;
    background-color: #0c151b !important;
    border: none !important;
    border-color: transparent !important;
    color: #ffffff !important;
    border-radius: var(--lk-radius-sm) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35),
                inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    transition: transform var(--lk-dur-fast) var(--lk-ease),
                box-shadow var(--lk-dur-fast) ease !important;
}

.home-head .btn-hero-primary:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45),
                0 0 40px rgba(255, 193, 7, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
}

.home-head .btn-hero-outline {
    padding: 18px 38px !important;
    font-size: var(--lk-text-base) !important;
    font-weight: 700 !important;
    background: rgba(12, 21, 27, 0.06) !important;
    border: 1.5px solid rgba(12, 21, 27, 0.35) !important;
    color: #0c151b !important;
    border-radius: var(--lk-radius-sm) !important;
    transition: all var(--lk-dur-fast) var(--lk-ease) !important;
}

.home-head .btn-hero-outline:hover {
    background: #0c151b !important;
    border-color: #0c151b !important;
    color: #ffc107 !important;
    transform: translateY(-3px) scale(1.02);
}

/* Login box: subtle shadow only — let base CSS handle bg (supports light/dark mode) */
.home-head .logbox .logbox-content {
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.25) !important;
}

/* Subtle float animation on decorative bubble images (desktop only) */
@media (min-width: 992px) {
    .home-head .bub-items .bubi-0 { animation: bubFloat1 7s ease-in-out infinite; }
    .home-head .bub-items .bubi-1 { animation: bubFloat2 9s ease-in-out infinite; }
    .home-head .bub-items .bubi-2 { animation: bubFloat1 8s ease-in-out infinite 0.5s; }
    .home-head .bub-items .bubi-3 { animation: bubFloat2 10s ease-in-out infinite 1s; }
}

@keyframes bubFloat1 {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-12px) rotate(-3deg); }
}

@keyframes bubFloat2 {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(14px) rotate(4deg); }
}

@media (prefers-reduced-motion: reduce) {
    .home-head .bub-items [class*="bubi-"] {
        animation: none !important;
    }
}

/* Responsive */
@media (max-width: 991px) {
    .home-head .hl-title {
        font-size: 36px !important;
        line-height: 1.25 !important;
    }
    .home-head .hl-text {
        font-size: var(--lk-text-base) !important;
    }
    .home-head .btn-hero-primary,
    .home-head .btn-hero-outline {
        padding: 14px 26px !important;
    }
}

@media (max-width: 768px) {
    .home-head .hl-title {
        font-size: 28px !important;
    }
    .home-head .hl-btns {
        flex-direction: column;
    }
    .home-head .hl-btns > a {
        width: 100%;
        text-align: center;
    }
}

/* ---------- CTA Pill buttons (signin-cta-pill-*) ---------- */
/* Used in FAQ bottom CTA, blog section, comparison CTA. Modernize with
   gradient + consistent radius using tokens. */

.signin-cta-pill-gold,
.signin-cta-pill-white,
.signin-cta-pill-outline,
.signin-pill-outline-sm {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding: 12px 22px !important;
    margin: 6px !important;
    font-size: var(--lk-text-sm) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    border-radius: var(--lk-radius-full) !important;
    transition: transform var(--lk-dur-fast) var(--lk-ease),
                box-shadow var(--lk-dur-fast) ease,
                background var(--lk-dur-fast) ease !important;
}

.signin-cta-pill-gold {
    background: var(--lk-accent-yellow) !important;
    color: #0c151b !important;
    box-shadow: 0 8px 22px rgba(255, 193, 7, 0.3),
                inset 0 2px 0 rgba(255, 255, 255, 0.25) !important;
}

.signin-cta-pill-gold:hover {
    transform: translateY(-3px);
    background: #0c151b !important;
    color: var(--lk-accent-yellow) !important;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.35) !important;
}

.signin-cta-pill-white {
    background: #ffffff !important;
    color: #0c151b !important;
    border: 1px solid rgba(12, 21, 27, 0.1) !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12) !important;
}

.signin-cta-pill-white:hover {
    background: #0c151b !important;
    color: var(--lk-accent-yellow) !important;
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.3) !important;
}

.signin-cta-pill-outline {
    background: transparent !important;
    border: 1.5px solid rgba(12, 21, 27, 0.4) !important;
    color: #0c151b !important;
}

.signin-cta-pill-outline:hover {
    background: #0c151b !important;
    color: var(--lk-accent-yellow) !important;
    border-color: #0c151b !important;
    transform: translateY(-3px);
}

/* .signin-pill-outline-sm lives inside .signin-featured-keywords which has
   a DARK gradient bg — must use white/yellow text, not dark. Scope it via
   parent to avoid contrast bugs in other contexts. */
.signin-featured-keywords .signin-pill-outline-sm,
.signin-pill-outline-sm {
    padding: 9px 18px !important;
    font-size: var(--lk-text-xs) !important;
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
}

.signin-featured-keywords .signin-pill-outline-sm:hover,
.signin-pill-outline-sm:hover {
    background: var(--lk-accent-yellow) !important;
    border-color: var(--lk-accent-yellow) !important;
    color: #0c151b !important;
    transform: translateY(-2px);
}

/* "View all articles" dark button at bottom of featured-keywords (dark bg) */
.signin-view-all-btn {
    padding: 14px 34px !important;
    background: var(--lk-accent-yellow) !important;
    color: #0c151b !important;
    border: none !important;
    border-radius: var(--lk-radius-full) !important;
    font-weight: 700 !important;
    box-shadow: 0 10px 26px rgba(255, 193, 7, 0.35),
                inset 0 2px 0 rgba(255, 255, 255, 0.25) !important;
    transition: all var(--lk-dur-fast) var(--lk-ease) !important;
}

.signin-view-all-btn:hover {
    background: #ffffff !important;
    color: #0c151b !important;
    transform: translateY(-3px);
    box-shadow: 0 16px 36px rgba(255, 255, 255, 0.35) !important;
}

/* Tag chips "เพิ่มไลค์" "เพิ่มวิว" in FAQ bottom CTA (yellow body section).
   Both variants use DARK bg so they contrast against yellow body.
   Use subtle differentiation via border/shadow instead of bg color swap. */
.signin-tag-gold,
.signin-tag-dark {
    display: inline-block;
    padding: 10px 20px;
    margin: 4px;
    font-size: var(--lk-text-sm);
    font-weight: 700;
    border-radius: var(--lk-radius-full);
    background: #0c151b;
    color: var(--lk-accent-yellow);
    box-shadow: 0 6px 18px rgba(12, 21, 27, 0.25);
    transition: transform var(--lk-dur-fast) var(--lk-ease),
                box-shadow var(--lk-dur-fast) ease;
}

.signin-tag-gold {
    /* Primary emphasis: yellow border ring */
    border: 2px solid var(--lk-accent-yellow);
    box-shadow: 0 6px 18px rgba(255, 193, 7, 0.35),
                inset 0 1px 0 rgba(255, 193, 7, 0.2);
}

.signin-tag-dark {
    /* Secondary: subtle outline only */
    border: 1px solid rgba(255, 193, 7, 0.25);
}

.signin-tag-gold:hover,
.signin-tag-dark:hover {
    transform: translateY(-2px) scale(1.05);
    background: var(--lk-accent-yellow);
    color: #0c151b;
    border-color: var(--lk-accent-yellow);
}

/* Final CTA button "เริ่มต้นเพียง 1 บาท!" in .signin-bottom-cta
   (yellow section body — needs dark button to stand out) */
.signin-bottom-cta .btn.btn-primary,
.signin-bottom-cta a.btn.btn-primary {
    padding: 16px 44px !important;
    font-size: var(--lk-text-lg) !important;
    font-weight: 800 !important;
    background: #0c151b !important;
    background-color: #0c151b !important;
    border: 2px solid #0c151b !important;
    color: var(--lk-accent-yellow) !important;
    border-radius: var(--lk-radius-full) !important;
    box-shadow: 0 14px 36px rgba(12, 21, 27, 0.35),
                inset 0 2px 0 rgba(255, 255, 255, 0.08) !important;
    transition: transform var(--lk-dur-fast) var(--lk-ease),
                box-shadow var(--lk-dur-fast) ease,
                background var(--lk-dur-fast) ease !important;
    letter-spacing: 0.3px;
}

.signin-bottom-cta .btn.btn-primary:hover,
.signin-bottom-cta a.btn.btn-primary:hover {
    transform: translateY(-3px) scale(1.03) !important;
    background: var(--lk-accent-yellow) !important;
    background-color: var(--lk-accent-yellow) !important;
    border-color: var(--lk-accent-yellow) !important;
    color: #0c151b !important;
    box-shadow: 0 20px 48px rgba(255, 255, 255, 0.35) !important;
}

/* ============================================================================
   DIRECTION A PASS 2 — 2026-04-11
   ============================================================================
   Applied to 3 sections in signin.twig following the success of how-pworks:
     1. 10-Years Hero Section (.home-section:has(.hl-btns))
     2. Comparison Table (.signin-comparison-section)
     3. Final CTA (.signin-cta-section)
   Philosophy: brand-first (yellow + dark + white), typography-forward,
   editorial layout, zero wave/fade dividers, no nested "box-in-box".
   ============================================================================ */


/* ============================================================================
   1. "10 YEARS" HERO SECTION — Yellow-native editorial with giant watermark
   ============================================================================
   Kills the dark container entirely. Content sits directly on yellow body.
   Adds a massive outline "10+" watermark (220-300px) as a Linear-style
   background element. Highlights "10 ปี" in title with a yellow underline. */

/* --- Override dark wrapper: make row transparent --- */
.home-section:has(.hl-btns) {
    padding: 100px 0 !important;
    overflow: visible !important;
}

.home-section:has(.hl-btns) > .container {
    position: relative;
}

.home-section:has(.hl-btns) > .container > .row {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    overflow: visible !important;
    position: relative;
}

/* --- Kill existing glow orb + highlight line pseudo-elements --- */
.home-section:has(.hl-btns) > .container > .row::before,
.home-section:has(.hl-btns) > .container > .row::after {
    content: none !important;
    display: none !important;
    background: none !important;
}

/* --- Giant "10+" watermark as pseudo on .container --- */
.home-section:has(.hl-btns) > .container::before {
    content: "10+";
    position: absolute;
    top: -40px;
    right: -30px;
    font-family: 'Inter', -apple-system, 'Noto Sans Thai', sans-serif;
    font-size: clamp(180px, 22vw, 320px);
    font-weight: 900;
    line-height: 0.82;
    letter-spacing: -12px;
    color: transparent;
    -webkit-text-stroke: 3px rgba(12, 21, 27, 0.16);
    /* `text-stroke` is non-standard — -webkit-text-stroke is the supported form */
    pointer-events: none;
    z-index: 0;
    user-select: none;
}

/* --- Kill the old crown icon badge entirely (too ornamental) --- */
.home-section:has(.hl-btns) .hsl-title > .row > .col-md-auto,
.home-section:has(.hl-btns) .hsl-title > .row > .col-12.col-md-auto {
    display: none !important;
}

.home-section:has(.hl-btns) .hsl-title-icon,
.home-section:has(.hl-btns) .hsl-title-icon::after {
    display: none !important;
    content: none !important;
}

/* --- Title block: editorial, massive, dark-on-yellow --- */
.home-section:has(.hl-btns) .col-lg-6 {
    position: relative;
    z-index: 2;
}

.home-section:has(.hl-btns) .hsl-title {
    display: block !important;
    margin: 0 0 24px !important;
    gap: 0 !important;
}

.home-section:has(.hl-btns) .hsl-title > .row {
    display: block !important;
    margin: 0 !important;
    gap: 0 !important;
}

.home-section:has(.hl-btns) .hsl-title > .row > [class*="col-"] {
    width: 100% !important;
    flex: 1 1 100% !important;
    padding: 0 !important;
}

.home-section:has(.hl-btns) .hsl-title h2 {
    font-size: clamp(34px, 4.8vw, 58px) !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
    letter-spacing: -1.2px;
    color: #0c151b !important;
    margin: 0 !important;
    /* KILL the gradient text-clip from previous pass — use solid dark */
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: #0c151b !important;
    text-align: left;
}

.home-section:has(.hl-btns) .hsl-text {
    font-size: clamp(15px, 1.3vw, 18px) !important;
    font-weight: 500 !important;
    color: #0c151b !important;
    opacity: 0.72 !important;
    max-width: 520px;
    margin: 0 0 32px !important;
    line-height: 1.7 !important;
    text-align: left;
}

/* --- Buttons on yellow: dark solid + yellow outline --- */
.home-section:has(.hl-btns) .hl-btns {
    position: relative !important;
    margin: 0 !important;
    gap: 12px !important;
    flex-wrap: wrap;
    display: flex;
}

.home-section:has(.hl-btns) .hl-btns > a {
    margin: 0 !important;
}

.home-section:has(.hl-btns) .btn-hero-primary {
    padding: 16px 36px !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    background: #0c151b !important;
    background-color: #0c151b !important;
    border: 2px solid #0c151b !important;
    color: var(--lk-accent-yellow) !important;
    border-radius: var(--lk-radius-full) !important;
    box-shadow: 0 14px 34px rgba(12, 21, 27, 0.3),
                inset 0 2px 0 rgba(255, 255, 255, 0.08) !important;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                background 0.35s ease,
                color 0.35s ease,
                box-shadow 0.35s ease !important;
    letter-spacing: 0.2px;
}

.home-section:has(.hl-btns) .btn-hero-primary:hover {
    transform: translateY(-3px) !important;
    background: var(--lk-accent-yellow) !important;
    background-color: var(--lk-accent-yellow) !important;
    border-color: var(--lk-accent-yellow) !important;
    color: #0c151b !important;
    box-shadow: 0 20px 48px rgba(255, 255, 255, 0.45),
                inset 0 2px 0 rgba(255, 255, 255, 0.35) !important;
}

.home-section:has(.hl-btns) .signin-hero-dark-btn {
    padding: 16px 36px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 2px solid #0c151b !important;
    color: #0c151b !important;
    border-radius: var(--lk-radius-full) !important;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                background 0.35s ease,
                color 0.35s ease !important;
    letter-spacing: 0.2px;
}

.home-section:has(.hl-btns) .signin-hero-dark-btn:hover {
    transform: translateY(-3px) !important;
    background: #0c151b !important;
    border-color: #0c151b !important;
    color: var(--lk-accent-yellow) !important;
}

/* --- Right-side image: remove yellow drop-shadow, add subtle lift --- */
.home-section:has(.hl-btns) .col-lg-6 > img.img-fluid {
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 30px 60px rgba(12, 21, 27, 0.25))
            drop-shadow(0 10px 30px rgba(12, 21, 27, 0.18)) !important;
}

/* --- Responsive --- */
@media (max-width: 991px) {
    .home-section:has(.hl-btns) {
        padding: 70px 0 !important;
    }
    .home-section:has(.hl-btns) > .container::before {
        font-size: clamp(140px, 28vw, 220px);
        top: -20px;
        right: -20px;
        -webkit-text-stroke-width: 2px;
    }
    .home-section:has(.hl-btns) .hsl-title h2 {
        font-size: 32px !important;
    }
}

@media (max-width: 768px) {
    .home-section:has(.hl-btns) {
        padding: 56px 0 !important;
    }
    .home-section:has(.hl-btns) > .container::before {
        top: -10px;
        right: -10px;
        font-size: 150px;
        opacity: 0.8;
    }
    .home-section:has(.hl-btns) .hsl-title h2 {
        font-size: 28px !important;
    }
    .home-section:has(.hl-btns) .hl-btns {
        flex-direction: column;
    }
    .home-section:has(.hl-btns) .hl-btns > a {
        width: 100%;
        text-align: center;
    }
}


/* ============================================================================
   2. COMPARISON TABLE — "Likester Winner Podium"
   ============================================================================
   Makes the Likester column POP (podium effect via padding/border/glow),
   fades competitor columns to tier-2 feel, adds grid-dot texture behind table. */

/* Section body: stays yellow, add depth with subtle grid */
.signin-comparison-section {
    position: relative;
    padding: 90px 0 110px !important;
    overflow: hidden;
}

/* Grid dot pattern as subtle texture */
.signin-comparison-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(12, 21, 27, 0.08) 1.2px, transparent 1.2px);
    background-size: 28px 28px;
    opacity: 0.6;
    pointer-events: none;
    z-index: 0;
}

.signin-comparison-section > .container {
    position: relative;
    z-index: 2;
}

/* Glow orb behind Likester column */
.signin-comparison-section .table-responsive::after {
    content: '';
    position: absolute;
    top: -40px;
    left: 46%;
    width: 380px;
    height: 380px;
    background: radial-gradient(circle, rgba(255, 193, 7, 0.55) 0%, rgba(255, 193, 7, 0.18) 35%, transparent 65%);
    filter: blur(40px);
    pointer-events: none;
    z-index: 0;
    transform: translateX(-50%);
}

/* --- Dark glass wrapper: refined --- */
.signin-comparison-section .table-responsive {
    position: relative !important;
    padding: 48px 36px 36px !important;
    background: linear-gradient(180deg, rgba(16, 31, 40, 0.96) 0%, rgba(10, 18, 24, 0.98) 100%) !important;
    border: 1px solid rgba(255, 193, 7, 0.18) !important;
    border-radius: 28px !important;
    box-shadow: 0 40px 90px rgba(12, 21, 27, 0.4),
                0 12px 32px rgba(12, 21, 27, 0.25),
                inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    overflow: visible !important;
    z-index: 2;
}

/* --- Table reset --- */
.signin-comparison-table {
    position: relative;
    z-index: 2;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

/* --- Header cells --- */
.signin-comparison-table thead tr {
    background: transparent !important;
}

.signin-comparison-table th {
    background: transparent !important;
    border: none !important;
    padding: 24px 18px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-align: center !important;
    position: relative;
    vertical-align: middle !important;
}

.signin-comparison-table th.col-feature {
    color: rgba(255, 255, 255, 0.35) !important;
    text-align: left !important;
    padding-left: 28px !important;
    font-size: 13px !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600 !important;
}

/* --- LIKESTER column (the winner podium) --- */
.signin-comparison-table th.col-likester {
    background: linear-gradient(180deg, #1a2f3d 0%, #0f1d25 100%) !important;
    color: var(--lk-accent-yellow) !important;
    border: 2px solid rgba(255, 193, 7, 0.55) !important;
    border-bottom: none !important;
    border-radius: 18px 18px 0 0 !important;
    box-shadow: 0 -14px 40px rgba(255, 193, 7, 0.25),
                inset 0 2px 0 rgba(255, 193, 7, 0.4) !important;
    padding: 32px 20px 28px !important;
    font-size: 22px !important;
    font-weight: 900 !important;
    letter-spacing: 0.3px;
    position: relative;
}

.signin-comparison-table th.col-likester .signin-cta-pill-icon {
    color: var(--lk-accent-yellow) !important;
    margin-right: 8px;
    font-size: 20px !important;
    filter: drop-shadow(0 0 8px rgba(255, 193, 7, 0.5));
}

/* BEST badge: bigger + crown */
.signin-comparison-table .best-badge {
    position: absolute !important;
    top: -16px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
    background: linear-gradient(135deg, var(--lk-accent-yellow) 0%, #ffa000 100%) !important;
    color: #0c151b !important;
    padding: 7px 18px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase;
    box-shadow: 0 8px 22px rgba(255, 193, 7, 0.55),
                0 0 0 3px rgba(12, 21, 27, 0.8),
                inset 0 2px 0 rgba(255, 255, 255, 0.35) !important;
    white-space: nowrap;
    z-index: 5;
}

.signin-comparison-table .best-badge::before {
    content: '\f521';  /* crown icon */
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', sans-serif;
    font-weight: 900;
    margin-right: 5px;
    color: #0c151b;
}

/* --- Competitor columns (fade to tier-2) --- */
.signin-comparison-table th.col-competitor {
    color: rgba(255, 255, 255, 0.4) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    opacity: 0.7;
    padding-top: 44px !important;  /* align with Likester baseline */
}

/* --- Body rows --- */
.signin-comparison-table tbody tr {
    border: none !important;
    transition: background 0.3s ease;
}

.signin-comparison-table tbody tr:hover {
    background: transparent !important;
}

.signin-comparison-table tbody tr + tr td {
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.signin-comparison-table td {
    padding: 22px 18px !important;
    border: none !important;
    background: transparent !important;
    vertical-align: middle !important;
    text-align: center !important;
}

/* Feature cell (leftmost - descriptions) */
.signin-comparison-table td.feature-cell {
    color: rgba(255, 255, 255, 0.72) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-align: left !important;
    padding-left: 28px !important;
}

.signin-comparison-table td.feature-cell i {
    color: rgba(255, 193, 7, 0.7) !important;
    margin-right: 12px;
    font-size: 14px;
    width: 18px;
    text-align: center;
}

/* --- LIKESTER column body cells (elevated) --- */
.signin-comparison-table td.likester-cell {
    background: linear-gradient(180deg, rgba(255, 193, 7, 0.08) 0%, rgba(255, 193, 7, 0.04) 100%) !important;
    color: var(--lk-accent-yellow) !important;
    font-weight: 900 !important;
    font-size: 18px !important;
    border-left: 2px solid rgba(255, 193, 7, 0.55) !important;
    border-right: 2px solid rgba(255, 193, 7, 0.55) !important;
    position: relative;
}

.signin-comparison-table tbody tr:last-child td.likester-cell {
    border-bottom: 2px solid rgba(255, 193, 7, 0.55) !important;
    border-radius: 0 0 18px 18px;
}

.signin-comparison-table td.likester-cell .fa-check-circle {
    color: var(--lk-accent-green) !important;
    margin-right: 6px;
    filter: drop-shadow(0 0 6px rgba(0, 175, 76, 0.35));
}

.signin-comparison-table td.likester-cell .fa-star {
    color: var(--lk-accent-yellow) !important;
    margin-left: 6px;
    filter: drop-shadow(0 0 8px rgba(255, 193, 7, 0.6));
}

/* --- Competitor cells (faded, tier-2) --- */
.signin-comparison-table td.competitor-cell {
    color: rgba(255, 255, 255, 0.38) !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    opacity: 0.75;
}

.signin-comparison-table td.competitor-cell.text-danger {
    color: #ff7575 !important;
    opacity: 0.85;
}

.signin-comparison-table td.competitor-cell.text-danger .fa-times-circle {
    color: #ff7575 !important;
    margin-right: 5px;
    opacity: 0.85;
}

.signin-comparison-table td.competitor-cell .fa-check-circle {
    color: rgba(255, 255, 255, 0.28) !important;
    margin-right: 4px;
}

.signin-comparison-table td.competitor-cell.text-gold {
    color: rgba(255, 193, 7, 0.45) !important;
}

/* Section comparison title */
.signin-comparison-section .home-title h2 {
    font-size: clamp(32px, 4.5vw, 52px) !important;
    font-weight: 900 !important;
    color: #0c151b !important;
    letter-spacing: -1px;
    margin-bottom: 14px !important;
    line-height: 1.1;
}

.signin-comparison-section .home-title p {
    color: #0c151b !important;
    opacity: 0.68;
    font-size: 16px;
    font-weight: 500;
    max-width: 640px;
    margin: 0 auto;
    line-height: 1.6;
}

.signin-comparison-section .hh-content i {
    color: #0c151b !important;
}

@media (max-width: 991px) {
    .signin-comparison-section {
        padding: 60px 0 80px !important;
    }
    .signin-comparison-section .table-responsive {
        padding: 40px 20px 24px !important;
    }
    .signin-comparison-table th.col-likester {
        font-size: 18px !important;
        padding: 26px 12px 22px !important;
    }
    .signin-comparison-table td.likester-cell {
        font-size: 16px !important;
    }
    .signin-comparison-table td,
    .signin-comparison-table th {
        padding: 16px 10px !important;
    }
    .signin-comparison-table td.feature-cell,
    .signin-comparison-table th.col-feature {
        padding-left: 14px !important;
    }
    .signin-comparison-section .table-responsive::after {
        width: 280px;
        height: 280px;
    }
}


/* ============================================================================
   3. FINAL CTA "พร้อมเริ่มต้น..." — Typography Finale Moment
   ============================================================================
   Kills the dark wrapper (was nested dark-on-yellow). Makes it a big editorial
   closing moment: massive headline, wider 3 CTAs, decorative arrow accent. */

/* Kill dark wrapper entirely */
.signin-cta-section {
    background: transparent !important;
    background-color: transparent !important;
    padding: 90px 20px 40px !important;
    border-radius: 0 !important;
    color: #0c151b !important;
    box-shadow: none !important;
    position: relative;
    max-width: 900px;
    margin: 40px auto 0 !important;
    text-align: center;
}

/* Decorative arrow above title — uses pseudo, pure CSS */
.signin-cta-section::before {
    content: '';
    position: absolute;
    top: 36px;
    left: 50%;
    width: 2px;
    height: 40px;
    background: linear-gradient(180deg, transparent 0%, rgba(12, 21, 27, 0.4) 100%);
    transform: translateX(-50%);
    pointer-events: none;
}

.signin-cta-section::after {
    content: '';
    position: absolute;
    top: 70px;
    left: 50%;
    width: 14px;
    height: 14px;
    border-right: 2px solid rgba(12, 21, 27, 0.4);
    border-bottom: 2px solid rgba(12, 21, 27, 0.4);
    transform: translateX(-50%) rotate(45deg);
    pointer-events: none;
}

/* Massive headline */
.signin-cta-section h3 {
    margin: 60px 0 20px !important;
    font-size: clamp(28px, 4vw, 48px) !important;
    font-weight: 900 !important;
    color: #0c151b !important;
    letter-spacing: -1px;
    line-height: 1.2 !important;
    text-align: center;
    max-width: 780px;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Subtitle paragraph */
.signin-cta-section > p {
    font-size: clamp(14px, 1.2vw, 17px) !important;
    font-weight: 500 !important;
    color: #0c151b !important;
    opacity: 0.7 !important;
    margin: 0 auto 40px !important;
    max-width: 620px;
    line-height: 1.7 !important;
    text-align: center;
}

/* --- 3 platform CTAs: upgraded pills → large brand-colored cards --- */
.signin-cta-section .d-flex {
    gap: 14px !important;
    flex-wrap: wrap;
    justify-content: center !important;
}

.signin-cta-section .signin-cta-pill-gold,
.signin-cta-section .signin-cta-pill-white,
.signin-cta-section .signin-cta-pill-outline {
    padding: 18px 32px !important;
    margin: 0 !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    border-radius: var(--lk-radius-full) !important;
    letter-spacing: 0.2px;
    position: relative;
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                background 0.4s ease,
                color 0.4s ease,
                box-shadow 0.4s ease,
                border-color 0.4s ease !important;
    min-width: 220px;
    text-align: center;
    justify-content: center;
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
}

.signin-cta-section .signin-cta-pill-gold .signin-cta-pill-icon,
.signin-cta-section .signin-cta-pill-white .signin-cta-pill-icon,
.signin-cta-section .signin-cta-pill-outline .signin-cta-pill-icon {
    margin: 0 !important;
    font-size: 20px !important;
}

/* Instagram (gold pill) → dark card with IG gradient on hover */
.signin-cta-section .signin-cta-pill-gold {
    background: #0c151b !important;
    color: #ffffff !important;
    border: 2px solid #0c151b !important;
    box-shadow: 0 16px 36px rgba(12, 21, 27, 0.28),
                inset 0 2px 0 rgba(255, 255, 255, 0.06) !important;
}

.signin-cta-section .signin-cta-pill-gold:hover {
    transform: translateY(-4px) !important;
    background: linear-gradient(45deg, #833ab4, #fd1d1d, #fcb045) !important;
    border-color: transparent !important;
    color: #ffffff !important;
    box-shadow: 0 22px 50px rgba(253, 29, 29, 0.45),
                inset 0 2px 0 rgba(255, 255, 255, 0.25) !important;
}

/* YouTube (white pill) → dark card with YouTube red on hover */
.signin-cta-section .signin-cta-pill-white {
    background: #0c151b !important;
    color: #ffffff !important;
    border: 2px solid #0c151b !important;
    box-shadow: 0 16px 36px rgba(12, 21, 27, 0.28),
                inset 0 2px 0 rgba(255, 255, 255, 0.06) !important;
}

.signin-cta-section .signin-cta-pill-white:hover {
    transform: translateY(-4px) !important;
    background: linear-gradient(135deg, #ff0000 0%, #cc0000 100%) !important;
    border-color: transparent !important;
    color: #ffffff !important;
    box-shadow: 0 22px 50px rgba(255, 0, 0, 0.4),
                inset 0 2px 0 rgba(255, 255, 255, 0.25) !important;
}

/* TikTok (outline pill) → dark card with TT cyan/pink gradient on hover */
.signin-cta-section .signin-cta-pill-outline {
    background: #0c151b !important;
    color: #ffffff !important;
    border: 2px solid #0c151b !important;
    box-shadow: 0 16px 36px rgba(12, 21, 27, 0.28),
                inset 0 2px 0 rgba(255, 255, 255, 0.06) !important;
}

.signin-cta-section .signin-cta-pill-outline:hover {
    transform: translateY(-4px) !important;
    background: linear-gradient(135deg, #25f4ee 0%, #000000 50%, #fe2c55 100%) !important;
    border-color: transparent !important;
    color: #ffffff !important;
    box-shadow: 0 22px 50px rgba(254, 44, 85, 0.4),
                inset 0 2px 0 rgba(255, 255, 255, 0.25) !important;
}

@media (max-width: 768px) {
    .signin-cta-section {
        padding: 70px 16px 20px !important;
    }
    .signin-cta-section::before {
        top: 24px;
        height: 30px;
    }
    .signin-cta-section::after {
        top: 50px;
    }
    .signin-cta-section h3 {
        margin: 44px 0 16px !important;
        font-size: 26px !important;
    }
    .signin-cta-section .signin-cta-pill-gold,
    .signin-cta-section .signin-cta-pill-white,
    .signin-cta-section .signin-cta-pill-outline {
        width: 100%;
        min-width: 0;
        padding: 16px 24px !important;
    }
}


/* ============================================================
   PHASE 8 — Editorial lift for stepbox + blog + signup page
   (yellow-native direction, matches how-pworks / 10-years /
    comparison table / final-CTA treatments)
   ============================================================ */


/* ============================================================
   8A. "ครบจบ ทุกโซเชี่ยล" — 8 platform cards editorial lift
   Section wrapper is <section class="home-section"> containing
   .stepbox. Target the parent via :has() so we don't touch other
   .home-section uses.
   ============================================================ */

.home-section:has(> .container > .stepbox) {
    position: relative !important;
    background: transparent !important;
    padding: 90px 0 70px !important;
    overflow: visible !important;
}

/* Giant outline watermark "8 SOCIAL" behind the headline */
.home-section:has(> .container > .stepbox) > .container {
    position: relative;
    z-index: 1;
}

.home-section:has(> .container > .stepbox) > .container::before {
    content: "ALL SOCIAL";
    position: absolute;
    top: -36px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Inter', -apple-system, 'Noto Sans Thai', sans-serif;
    font-size: clamp(80px, 13vw, 200px);
    font-weight: 900;
    line-height: 0.85;
    letter-spacing: -8px;
    color: transparent;
    -webkit-text-stroke: 2.5px rgba(12, 21, 27, 0.14);
    white-space: nowrap;
    pointer-events: none;
    z-index: 0;
    user-select: none;
}

/* Editorial headline block */
.home-section:has(> .container > .stepbox) .home-title {
    position: relative;
    z-index: 2;
    margin-bottom: 56px !important;
    text-align: center;
}

.home-section:has(> .container > .stepbox) .home-title h2 {
    font-size: clamp(36px, 5.2vw, 64px) !important;
    font-weight: 900 !important;
    color: #0c151b !important;
    letter-spacing: -1.5px;
    line-height: 1.05;
    margin: 0 !important;
    text-shadow: 0 2px 0 rgba(255, 255, 255, 0.2);
}

/* Small eyebrow label below the title */
.home-section:has(> .container > .stepbox) .home-title::after {
    content: "8 PLATFORMS · 1 PANEL";
    display: block;
    margin-top: 18px;
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 4px;
    color: rgba(12, 21, 27, 0.55);
    text-transform: uppercase;
}

/* Kill the old divider (•••) */
.home-section:has(> .container > .stepbox) .home-title .divider {
    display: none !important;
}

/* Override the card backgrounds — upgrade to richer gradient + tighter
   look. Keep platform color accents but bolder. */
.home-section:has(> .container > .stepbox) .stepbox {
    position: relative;
    z-index: 2;
}

.home-section:has(> .container > .stepbox) .stepbox .sboxes .barea {
    background: linear-gradient(180deg, #101f28 0%, #0a1218 100%) !important;
    border: 1px solid rgba(255, 193, 7, 0.14) !important;
    border-radius: 22px !important;
    box-shadow: 0 18px 44px rgba(12, 21, 27, 0.18),
                0 0 0 1px rgba(255, 255, 255, 0.03) inset !important;
    padding: 0 !important;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                border-color 0.35s ease,
                box-shadow 0.35s ease !important;
}

.home-section:has(> .container > .stepbox) .stepbox .sboxes:hover .barea {
    transform: translateY(-10px) !important;
    border-color: rgba(255, 193, 7, 0.45) !important;
    box-shadow: 0 30px 60px rgba(12, 21, 27, 0.3),
                0 0 0 1px rgba(255, 193, 7, 0.12) inset !important;
}

.home-section:has(> .container > .stepbox) .stepbox .sboxes .barea::before {
    left: 12% !important;
    right: 12% !important;
    opacity: 0.7 !important;
}

.home-section:has(> .container > .stepbox) .stepbox .sboxes .barea .sbbody {
    padding: 36px 28px 30px !important;
    min-height: 240px !important;
}

/* Icon: switch from square to soft rounded, bigger */
.home-section:has(> .container > .stepbox) .stepbox .sboxes .barea .sbicon {
    flex: 0 0 58px !important;
    width: 58px !important;
    height: 58px !important;
    max-width: 58px !important;
    border-radius: 16px !important;
}

.home-section:has(> .container > .stepbox) .stepbox .sboxes .barea .sbicon i {
    font-size: 26px !important;
}

/* Title stronger, more editorial */
.home-section:has(> .container > .stepbox) .stepbox .sboxes .barea .sbtitle {
    font-size: 20px !important;
    font-weight: 800 !important;
    letter-spacing: -0.3px !important;
    color: #ffffff !important;
}

.home-section:has(> .container > .stepbox) .stepbox .sboxes .barea .sbbody .sbtext {
    font-size: 14.5px !important;
    line-height: 1.72 !important;
    color: rgba(255, 255, 255, 0.62) !important;
    margin-top: 20px !important;
}

.home-section:has(> .container > .stepbox) .stepbox .sboxes:hover .barea .sbtext {
    color: rgba(255, 255, 255, 0.82) !important;
}

/* Responsive */
@media (max-width: 991px) {
    .home-section:has(> .container > .stepbox) {
        padding: 70px 0 50px !important;
    }
    .home-section:has(> .container > .stepbox) > .container::before {
        font-size: clamp(60px, 14vw, 110px);
        top: -20px;
        letter-spacing: -5px;
    }
    .home-section:has(> .container > .stepbox) .home-title {
        margin-bottom: 36px !important;
    }
}

@media (max-width: 768px) {
    .home-section:has(> .container > .stepbox) .stepbox .sboxes .barea .sbbody {
        padding: 26px 22px 24px !important;
        min-height: 200px !important;
    }
    .home-section:has(> .container > .stepbox) .stepbox .sboxes .barea .sbicon {
        flex: 0 0 50px !important;
        width: 50px !important;
        height: 50px !important;
        max-width: 50px !important;
    }
    .home-section:has(> .container > .stepbox) .stepbox .sboxes .barea .sbtitle {
        font-size: 17px !important;
    }
    .home-section:has(> .container > .stepbox) .home-title::after {
        font-size: 11px;
        letter-spacing: 2.5px;
    }
}


/* ============================================================
   8B. "ข่าวสารและเทคนิคล่าสุด" — blog section editorial lift
   Scope: .signin-blog-section (only signin.twig uses this)
   ============================================================ */

.signin-blog-section {
    position: relative !important;
    background: transparent !important;
    padding: 100px 0 80px !important;
    overflow: visible !important;
}

.signin-blog-section > .container {
    position: relative;
    z-index: 1;
}

/* Giant outline watermark "LATEST" */
.signin-blog-section > .container::before {
    content: "LATEST";
    position: absolute;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: clamp(90px, 14vw, 220px);
    font-weight: 900;
    line-height: 0.85;
    letter-spacing: -10px;
    color: transparent;
    -webkit-text-stroke: 3px rgba(12, 21, 27, 0.14);
    white-space: nowrap;
    pointer-events: none;
    z-index: 0;
    user-select: none;
}

/* Kill the old newspaper icon badge — editorial doesn't need it */
.signin-blog-section .home-title .hh-icon {
    display: none !important;
}

.signin-blog-section .home-title {
    position: relative;
    z-index: 2;
    margin-bottom: 64px !important;
    text-align: center;
}

.signin-blog-section .home-title h2 {
    font-size: clamp(36px, 5.2vw, 64px) !important;
    font-weight: 900 !important;
    color: #0c151b !important;
    letter-spacing: -1.5px;
    line-height: 1.05;
    margin: 0 0 14px 0 !important;
    text-shadow: 0 2px 0 rgba(255, 255, 255, 0.2);
}

.signin-blog-section .home-title p {
    font-size: 17px !important;
    font-weight: 500 !important;
    color: rgba(12, 21, 27, 0.68) !important;
    margin: 0 !important;
    letter-spacing: 0.1px;
}

/* Eyebrow label */
.signin-blog-section .home-title::before {
    content: "— BLOG & INSIGHTS —";
    display: block;
    margin-bottom: 16px;
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 4px;
    color: rgba(12, 21, 27, 0.5);
    text-transform: uppercase;
}

/* Blog cards — keep dark gradient cards but with bolder editorial typography */
.signin-blog-section .signin-blog-card {
    background: linear-gradient(180deg, #101f28 0%, #0a1218 100%) !important;
    border: 1px solid rgba(255, 193, 7, 0.14) !important;
    border-radius: 22px !important;
    box-shadow: 0 18px 44px rgba(12, 21, 27, 0.18),
                0 0 0 1px rgba(255, 255, 255, 0.03) inset !important;
    overflow: hidden !important;
    position: relative;
}

.signin-blog-section .signin-blog-card:hover {
    transform: translateY(-10px) !important;
    border-color: rgba(255, 193, 7, 0.45) !important;
    box-shadow: 0 30px 60px rgba(12, 21, 27, 0.3),
                0 0 0 1px rgba(255, 193, 7, 0.15) inset !important;
}

.signin-blog-section .signin-blog-card::before {
    left: 12% !important;
    right: 12% !important;
    opacity: 0.7 !important;
}

/* Thumbnail area — make it taller + bolder */
.signin-blog-section .signin-blog-thumb,
.signin-blog-section .signin-blog-grad-gold,
.signin-blog-section .signin-blog-grad-dark,
.signin-blog-section .signin-blog-grad-mixed {
    height: 220px !important;
}

.signin-blog-section .signin-blog-grad-gold {
    background: linear-gradient(135deg, #ffc107 0%, #ff8f00 100%) !important;
}

.signin-blog-section .signin-blog-grad-dark {
    background: linear-gradient(135deg, #0c151b 0%, #1a2f3d 100%) !important;
}

.signin-blog-section .signin-blog-grad-mixed {
    background: linear-gradient(135deg, #0c151b 0%, #ffc107 100%) !important;
}

.signin-blog-section .signin-blog-thumb-icon-lg {
    font-size: 72px !important;
    opacity: 0.9 !important;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
}

.signin-blog-section .signin-blog-card-body {
    padding: 32px 28px 28px !important;
}

.signin-blog-section .signin-blog-card-body h3 {
    font-size: 22px !important;
    font-weight: 800 !important;
    letter-spacing: -0.3px !important;
    line-height: 1.35 !important;
    color: #ffffff !important;
    margin-bottom: 14px !important;
    min-height: auto !important;
}

.signin-blog-section .signin-blog-card-body p {
    font-size: 14.5px !important;
    line-height: 1.72 !important;
    color: rgba(255, 255, 255, 0.62) !important;
    margin-bottom: 22px !important;
}

.signin-blog-section .signin-blog-card:hover .signin-blog-card-body p {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* "อ่านต่อ" link — convert to arrow link editorial style */
.signin-blog-section .signin-blog-card-body .btn {
    align-self: flex-start;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    color: #ffc107 !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    position: relative;
    padding-right: 26px !important;
}

.signin-blog-section .signin-blog-card-body .btn::after {
    content: "→";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
    font-size: 16px;
}

.signin-blog-section .signin-blog-card-body .btn:hover {
    background: transparent !important;
    color: #ffffff !important;
    transform: none !important;
}

.signin-blog-section .signin-blog-card-body .btn:hover::after {
    transform: translateY(-50%) translateX(6px);
    color: #ffc107;
}

/* ===== Featured keywords — kill dark wrapper, make editorial ===== */
.signin-blog-section .signin-featured-keywords {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 60px 0 0 !important;
    margin-top: 30px !important;
    max-width: 900px;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center;
    position: relative;
}

/* Decorative top divider line */
.signin-blog-section .signin-featured-keywords::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 2px;
    background: rgba(12, 21, 27, 0.25);
}

.signin-blog-section .signin-featured-keywords h3 {
    font-size: clamp(24px, 3.5vw, 36px) !important;
    font-weight: 900 !important;
    color: #0c151b !important;
    letter-spacing: -0.8px;
    margin: 0 0 28px !important;
}

/* Since featured-keywords no longer has dark bg, .signin-pill-outline-sm
   inside it should use DARK text/border (revert the white scoping) */
.signin-blog-section .signin-featured-keywords .signin-pill-outline-sm {
    background: transparent !important;
    border: 1.5px solid rgba(12, 21, 27, 0.3) !important;
    color: #0c151b !important;
    padding: 10px 20px !important;
    font-size: 13px !important;
}

.signin-blog-section .signin-featured-keywords .signin-pill-outline-sm:hover {
    background: #0c151b !important;
    border-color: #0c151b !important;
    color: #ffc107 !important;
    transform: translateY(-2px);
}

/* View all articles button — big editorial arrow link style */
.signin-blog-section .signin-view-all-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 12px;
    padding: 16px 36px !important;
    background: #0c151b !important;
    color: #ffc107 !important;
    border: 2px solid #0c151b !important;
    border-radius: 999px !important;
    font-weight: 800 !important;
    font-size: 15px !important;
    letter-spacing: 0.3px;
    box-shadow: 0 12px 32px rgba(12, 21, 27, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.25s ease,
                background 0.25s ease !important;
}

.signin-blog-section .signin-view-all-btn::after {
    content: "→";
    font-size: 18px;
    transition: transform 0.3s ease;
}

.signin-blog-section .signin-view-all-btn:hover {
    background: #ffc107 !important;
    color: #0c151b !important;
    border-color: #ffc107 !important;
    transform: translateY(-3px);
    box-shadow: 0 18px 44px rgba(255, 193, 7, 0.45),
                inset 0 2px 0 rgba(255, 255, 255, 0.3) !important;
}

.signin-blog-section .signin-view-all-btn:hover::after {
    transform: translateX(6px);
}

/* Responsive */
@media (max-width: 991px) {
    .signin-blog-section {
        padding: 70px 0 60px !important;
    }
    .signin-blog-section > .container::before {
        font-size: clamp(60px, 16vw, 120px);
        top: -30px;
        letter-spacing: -5px;
    }
    .signin-blog-section .home-title {
        margin-bottom: 40px !important;
    }
    .signin-blog-section .home-title p {
        font-size: 15px !important;
    }
}

@media (max-width: 768px) {
    .signin-blog-section .signin-blog-card-body {
        padding: 26px 22px 24px !important;
    }
    .signin-blog-section .signin-blog-card-body h3 {
        font-size: 19px !important;
    }
    .signin-blog-section .signin-blog-thumb,
    .signin-blog-section .signin-blog-grad-gold,
    .signin-blog-section .signin-blog-grad-dark,
    .signin-blog-section .signin-blog-grad-mixed {
        height: 170px !important;
    }
    .signin-blog-section .home-title::before {
        font-size: 10px;
        letter-spacing: 2.5px;
    }
    .signin-blog-section .signin-view-all-btn {
        padding: 14px 28px !important;
        font-size: 14px !important;
    }
}


/* ============================================================
   8C. signup.twig (.register-page) editorial lift
   Scope: .register-page — same yellow body as signin.
   Fixes:
   - Label color #fff on yellow body = INVISIBLE. Switch to dark.
   - Login text (#606b80) readable but dull — bump contrast.
   - Inputs kept dark (.login-control #183441) — good contrast.
   - Add editorial heading above the form via ::before pseudo.
   - Submit button: big dark solid.
   ============================================================ */

.register-page {
    background: #ffc107 !important;
    padding: 120px 0 80px !important;
}

/* Decorative left column: giant outline watermark "JOIN" */
@media (min-width: 1200px) {
    .register-page::before {
        background-image: none !important;
        background-color: transparent !important;
    }
    .register-page .register-left::before {
        content: "JOIN";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-family: 'Inter', -apple-system, sans-serif;
        font-size: clamp(140px, 18vw, 280px);
        font-weight: 900;
        line-height: 0.85;
        letter-spacing: -12px;
        color: transparent;
        -webkit-text-stroke: 3px rgba(12, 21, 27, 0.18);
        pointer-events: none;
        user-select: none;
        white-space: nowrap;
    }
    .register-page .register-left::after {
        content: "SIGN UP · FREE · INSTANT";
        position: absolute;
        top: calc(50% + 90px);
        left: 50%;
        transform: translateX(-50%);
        font-family: 'Inter', -apple-system, sans-serif;
        font-size: 13px;
        font-weight: 800;
        letter-spacing: 5px;
        color: rgba(12, 21, 27, 0.55);
        white-space: nowrap;
        text-transform: uppercase;
    }
}

/* Right column: editorial header above the form */
.register-page .col-xl-5.offset-xl-1 {
    position: relative;
}

.register-page .col-xl-5.offset-xl-1::before {
    content: "สมัครสมาชิก";
    display: block;
    font-family: 'Inter', -apple-system, 'Noto Sans Thai', sans-serif;
    font-size: clamp(36px, 5vw, 58px);
    font-weight: 900;
    color: #0c151b;
    letter-spacing: -1.2px;
    line-height: 1.05;
    margin-bottom: 10px;
    text-shadow: 0 2px 0 rgba(255, 255, 255, 0.2);
}

.register-page .col-xl-5.offset-xl-1::after {
    content: "— REGISTER IN 30 SECONDS —";
    display: block;
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 4px;
    color: rgba(12, 21, 27, 0.55);
    margin-bottom: 28px;
    text-transform: uppercase;
}

/* Intro paragraph — dark readable on yellow */
.register-page .login-text {
    color: rgba(12, 21, 27, 0.75) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.7 !important;
    margin-bottom: 32px !important;
    max-width: 480px;
}

/* Labels — dark instead of white */
.register-page .login-label {
    color: #0c151b !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: 0.4px !important;
    text-transform: uppercase;
    margin-bottom: 10px !important;
}

/* Inputs: modern dark glass */
.register-page .login-control {
    background: rgba(12, 21, 27, 0.92) !important;
    border: 1.5px solid rgba(12, 21, 27, 0.85) !important;
    border-radius: 14px !important;
    height: 56px !important;
    box-shadow: 0 10px 26px rgba(12, 21, 27, 0.18),
                inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transition: border-color 0.2s ease,
                box-shadow 0.2s ease,
                transform 0.2s ease !important;
}

.register-page .login-control:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 34px rgba(12, 21, 27, 0.22),
                inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.register-page .login-control:focus-within {
    background: rgba(12, 21, 27, 0.98) !important;
    border-color: #ffc107 !important;
    box-shadow: 0 14px 34px rgba(12, 21, 27, 0.25),
                0 0 0 3px rgba(255, 255, 255, 0.35),
                inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transform: translateY(-1px);
}

.register-page .login-control .icon {
    color: #ffc107 !important;
    width: 54px;
    font-size: 18px;
}

.register-page .login-control input {
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

.register-page .login-control input::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}

/* Checkbox agreement — readable dark on yellow */
.register-page .form-group .checkbox label {
    color: rgba(12, 21, 27, 0.8) !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    line-height: 1.6 !important;
}

.register-page .form-group .checkbox label a {
    color: #0c151b !important;
    font-weight: 800 !important;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.register-page .form-group .checkbox label a:hover {
    color: #ffffff !important;
    text-decoration-color: #ffffff;
}

/* Submit button — editorial big dark solid */
.register-page .btn.btn-primary.btn-hero-dark,
.register-page button[type="submit"].btn-hero-dark {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    max-width: 360px;
    margin-top: 10px !important;
    padding: 18px 36px !important;
    background: #0c151b !important;
    background-color: #0c151b !important;
    color: #ffc107 !important;
    border: 2px solid #0c151b !important;
    border-radius: 999px !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    box-shadow: 0 14px 36px rgba(12, 21, 27, 0.35),
                inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.25s ease,
                background 0.25s ease,
                color 0.25s ease !important;
}

.register-page .btn.btn-primary.btn-hero-dark::after,
.register-page button[type="submit"].btn-hero-dark::after {
    content: "→";
    font-size: 18px;
    transition: transform 0.3s ease;
}

.register-page .btn.btn-primary.btn-hero-dark:hover,
.register-page button[type="submit"].btn-hero-dark:hover {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #0c151b !important;
    border-color: #ffffff !important;
    transform: translateY(-3px);
    box-shadow: 0 22px 50px rgba(12, 21, 27, 0.4),
                inset 0 2px 0 rgba(255, 255, 255, 0.5) !important;
}

.register-page .btn.btn-primary.btn-hero-dark:hover::after,
.register-page button[type="submit"].btn-hero-dark:hover::after {
    transform: translateX(6px);
}

/* Alerts — readable on yellow body */
.register-page .alert {
    border-radius: 14px !important;
    border: 1.5px solid rgba(12, 21, 27, 0.15) !important;
    font-weight: 600;
}

.register-page .alert.alert-danger {
    background: rgba(220, 53, 69, 0.95) !important;
    color: #ffffff !important;
    border-color: rgba(220, 53, 69, 1) !important;
}

.register-page .alert.alert-success {
    background: rgba(12, 21, 27, 0.95) !important;
    color: #ffc107 !important;
    border-color: #0c151b !important;
}

/* Responsive */
@media (max-width: 1199px) {
    .register-page .col-xl-5.offset-xl-1::before {
        font-size: clamp(32px, 7vw, 48px);
    }
}

@media (max-width: 991px) {
    .register-page {
        padding: 100px 0 60px !important;
    }
    .register-page .col-xl-5.offset-xl-1::before {
        font-size: 36px;
    }
    .register-page .col-xl-5.offset-xl-1::after {
        font-size: 11px;
        letter-spacing: 2.5px;
        margin-bottom: 22px;
    }
    .register-page .login-control {
        height: 52px !important;
    }
}

@media (max-width: 768px) {
    .register-page {
        padding: 90px 0 50px !important;
    }
    .register-page .col-xl-5.offset-xl-1::before {
        font-size: 30px;
    }
    .register-page .btn.btn-primary.btn-hero-dark,
    .register-page button[type="submit"].btn-hero-dark {
        padding: 16px 28px !important;
        font-size: 14px !important;
    }
}


/* ============================================================
   PHASE 9 — Editorial lift for blog / faq / terms pages
   All three pages sit on dark app background (.appContent).
   Strategy: yellow outline watermarks on dark, massive white
   headlines, eyebrow labels, dark gradient cards with yellow
   accents, modern pill buttons. Scope via :has() to avoid
   affecting other dashboard pages that share .dashboard-head.
   ============================================================ */


/* ============================================================
   9A. blog.twig  (/blog list page)
   Scope: .blog-header / .blog-posts-section / .blog-post-card
   Only blog.twig uses these class names.
   ============================================================ */

/* --- Blog header editorial block --- */
.blog-header {
    background: transparent !important;
    box-shadow: none !important;
    padding: 130px 0 50px !important;
    margin-bottom: 0 !important;
    position: relative;
    overflow: visible;
}

.blog-header--guest {
    padding-top: 160px !important;
}

.blog-header > .container {
    position: relative;
    z-index: 1;
}

/* Giant outline "BLOG" watermark */
.blog-header > .container::before {
    content: "BLOG";
    position: absolute;
    top: -70px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: clamp(120px, 18vw, 280px);
    font-weight: 900;
    line-height: 0.85;
    letter-spacing: -12px;
    color: transparent;
    -webkit-text-stroke: 3px rgba(255, 193, 7, 0.18);
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

/* Blog intro content card — editorial, transparent, dark-friendly */
.blog-header .blog-main-content {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    text-align: center;
    position: relative;
    z-index: 2;
}

/* Eyebrow label above intro */
.blog-header .blog-main-content::before {
    content: "— INSIGHTS · STRATEGY · NEWS —";
    display: block;
    margin-bottom: 16px;
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 4px;
    color: rgba(255, 193, 7, 0.65);
    text-transform: uppercase;
}

.blog-header .blog-main-content h1,
.blog-header .blog-main-content h2,
.blog-header .blog-main-content h3 {
    font-family: 'Inter', -apple-system, 'Noto Sans Thai', sans-serif;
    font-size: clamp(36px, 5.2vw, 68px) !important;
    font-weight: 900 !important;
    color: #ffffff !important;
    letter-spacing: -1.5px;
    line-height: 1.05 !important;
    margin: 0 0 20px !important;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
}

.blog-header .blog-main-content p {
    font-size: 17px !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.7) !important;
    line-height: 1.75 !important;
    max-width: 680px;
    margin: 0 auto !important;
}

/* Light mode override */
html.light .blog-header .blog-main-content h1,
html.light .blog-header .blog-main-content h2,
html.light .blog-header .blog-main-content h3 {
    color: #0c151b !important;
    text-shadow: 0 2px 0 rgba(255, 255, 255, 0.3);
}

html.light .blog-header .blog-main-content p {
    color: rgba(12, 21, 27, 0.72) !important;
}

html.light .blog-header > .container::before {
    -webkit-text-stroke: 3px rgba(12, 21, 27, 0.14);
}

html.light .blog-header .blog-main-content::before {
    color: rgba(12, 21, 27, 0.55);
}


/* --- Blog posts grid section --- */
.blog-posts-section {
    position: relative;
    padding: 50px 0 100px !important;
    background: transparent !important;
    overflow: visible;
}

.blog-posts-section--guest {
    padding-top: 140px !important;
}

/* Blog logged-in: clear the fixed topbar so top card isn't clipped */
@media (min-width: 992px) {
  body#appDashboard.l2v2 .l2v2-page-blog .blog-header,
  body#appDashboard.l2v2 .l2v2-page-blog .blog-posts-section:first-child { padding-top: 120px !important; }
}
@media (max-width: 991.98px) {
  body#appDashboard.l2v2 .l2v2-page-blog .blog-header,
  body#appDashboard.l2v2 .l2v2-page-blog .blog-posts-section:first-child { padding-top: 96px !important; }
}

.blog-posts-section--guest > .container {
    position: relative;
}

/* If no .blog-header (guest only sees posts) — add watermark here instead */
.blog-posts-section--guest > .container::before {
    content: "BLOG";
    position: absolute;
    top: -90px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: clamp(100px, 16vw, 240px);
    font-weight: 900;
    line-height: 0.85;
    letter-spacing: -10px;
    color: transparent;
    -webkit-text-stroke: 3px rgba(255, 193, 7, 0.18);
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

html.light .blog-posts-section--guest > .container::before {
    -webkit-text-stroke: 3px rgba(12, 21, 27, 0.14);
}

/* Post card — match signin-blog-card style but adapted */
.blog-posts-section .blog-post-card {
    background: linear-gradient(180deg, #101f28 0%, #0a1218 100%) !important;
    border: 1px solid rgba(255, 193, 7, 0.14) !important;
    border-radius: 22px !important;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.3),
                0 0 0 1px rgba(255, 255, 255, 0.03) inset !important;
    overflow: hidden !important;
    position: relative;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                border-color 0.35s ease,
                box-shadow 0.35s ease !important;
}

.blog-posts-section .blog-post-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 12%;
    right: 12%;
    height: 1px;
    background: linear-gradient(90deg, transparent, #ffc107, transparent);
    opacity: 0.7;
    z-index: 3;
}

.blog-posts-section .blog-post-card:hover {
    transform: translateY(-10px) !important;
    border-color: rgba(255, 193, 7, 0.4) !important;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45),
                0 0 0 1px rgba(255, 193, 7, 0.15) inset !important;
}

.blog-posts-section .post-thumbnail {
    width: 100%;
    height: 240px !important;
    overflow: hidden;
    border-bottom: none !important;
    position: relative;
}

.blog-posts-section .post-thumbnail::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(10, 18, 24, 0.7) 100%);
    pointer-events: none;
}

.blog-posts-section .post-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.blog-posts-section .blog-post-card:hover .post-thumbnail img {
    transform: scale(1.06);
}

.blog-posts-section .post-content {
    padding: 32px 28px 28px !important;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.blog-posts-section .post-content h3 {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    letter-spacing: -0.3px !important;
    line-height: 1.35 !important;
    margin: 0 0 14px !important;
}

.blog-posts-section .post-excerpt {
    font-size: 14.5px !important;
    line-height: 1.72 !important;
    color: rgba(255, 255, 255, 0.62) !important;
    margin-bottom: 22px !important;
    flex-grow: 1;
}

.blog-posts-section .blog-post-card:hover .post-excerpt {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* "อ่านบทความ" — editorial arrow link style */
.blog-posts-section .blog-read-more,
.blog-posts-section .blog-post-card .btn.blog-read-more {
    align-self: flex-start;
    padding: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    color: #ffc107 !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    position: relative;
    padding-right: 26px !important;
    transition: transform 0.3s ease, color 0.3s ease !important;
    box-shadow: none !important;
}

.blog-posts-section .blog-read-more::after {
    content: "→";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
    font-size: 16px;
}

.blog-posts-section .blog-read-more:hover {
    background: transparent !important;
    color: #ffffff !important;
    transform: none !important;
}

.blog-posts-section .blog-read-more:hover::after {
    transform: translateY(-50%) translateX(6px);
    color: #ffc107;
}

/* Light mode post cards */
html.light .blog-posts-section .blog-post-card {
    background: #ffffff !important;
    border: 1px solid rgba(12, 21, 27, 0.08) !important;
    box-shadow: 0 18px 44px rgba(12, 21, 27, 0.1),
                0 0 0 1px rgba(0, 0, 0, 0.02) inset !important;
}

html.light .blog-posts-section .blog-post-card:hover {
    border-color: rgba(255, 193, 7, 0.5) !important;
    box-shadow: 0 30px 60px rgba(12, 21, 27, 0.15),
                0 0 0 1px rgba(255, 193, 7, 0.2) inset !important;
}

html.light .blog-posts-section .post-content h3 {
    color: #0c151b !important;
}

html.light .blog-posts-section .post-excerpt {
    color: rgba(12, 21, 27, 0.62) !important;
}

html.light .blog-posts-section .blog-post-card:hover .post-excerpt {
    color: rgba(12, 21, 27, 0.8) !important;
}

html.light .blog-posts-section .blog-read-more {
    color: #d97706 !important;
}

html.light .blog-posts-section .blog-read-more:hover {
    color: #0c151b !important;
}

/* --- Pagination --- */
.blog-pagination {
    margin-top: 60px;
    display: flex;
    justify-content: center;
}

.blog-pagination .pagination {
    display: flex !important;
    gap: 8px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.blog-pagination .pagination > li > a,
.blog-pagination .pagination > li > span {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 14px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 193, 7, 0.14) !important;
    border-radius: 999px !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.blog-pagination .pagination > li > a:hover {
    background: rgba(255, 193, 7, 0.1) !important;
    border-color: rgba(255, 193, 7, 0.5) !important;
    color: #ffc107 !important;
    transform: translateY(-2px);
}

.blog-pagination .pagination > li.active > a,
.blog-pagination .pagination > li.active > span {
    background: #ffc107 !important;
    border-color: #ffc107 !important;
    color: #0c151b !important;
    box-shadow: 0 10px 26px rgba(255, 193, 7, 0.3),
                inset 0 2px 0 rgba(255, 255, 255, 0.35) !important;
}

html.light .blog-pagination .pagination > li > a,
html.light .blog-pagination .pagination > li > span {
    background: #ffffff !important;
    border-color: rgba(12, 21, 27, 0.12) !important;
    color: #0c151b !important;
}

html.light .blog-pagination .pagination > li > a:hover {
    background: #0c151b !important;
    color: #ffc107 !important;
    border-color: #0c151b !important;
}

/* Blog responsive */
@media (max-width: 991px) {
    .blog-header {
        padding: 100px 0 40px !important;
    }
    .blog-header > .container::before {
        font-size: clamp(80px, 18vw, 160px);
        top: -40px;
        letter-spacing: -6px;
    }
    .blog-posts-section {
        padding: 40px 0 70px !important;
    }
}

@media (max-width: 768px) {
    .blog-posts-section .post-content {
        padding: 26px 22px 24px !important;
    }
    .blog-posts-section .post-content h3 {
        font-size: 19px !important;
    }
    .blog-posts-section .post-thumbnail {
        height: 200px !important;
    }
    .blog-header .blog-main-content::before {
        font-size: 10px;
        letter-spacing: 2.5px;
    }
    .blog-pagination .pagination > li > a,
    .blog-pagination .pagination > li > span {
        min-width: 38px;
        height: 38px;
        padding: 0 10px !important;
        font-size: 13px !important;
    }
}


/* ============================================================
   9B. faq.twig  (/faq page)
   Scope: .appContent:has(.card-header-ap .faq-ss-tabs)  — only applies when
   the FAQ accordion is present, so we don't touch other
   dashboard pages that share .dashboard-head-wrapper.
   ============================================================ */

/* --- Section spacing + watermark container --- */
.appContent:has(.card-header-ap .faq-ss-tabs) {
    position: relative;
    overflow: hidden;
}

.appContent:has(.card-header-ap .faq-ss-tabs) .dashboard-head-wrapper {
    position: relative;
    padding-top: 40px !important;
    padding-bottom: 30px !important;
    margin-bottom: 30px !important;
    overflow: visible;
}

.appContent:has(.card-header-ap .faq-ss-tabs) .dashboard-head-wrapper > .container {
    position: relative;
    z-index: 1;
}

/* Giant outline "FAQ" watermark */
.appContent:has(.card-header-ap .faq-ss-tabs) .dashboard-head-wrapper > .container::before {
    content: "FAQ";
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: clamp(140px, 20vw, 300px);
    font-weight: 900;
    line-height: 0.85;
    letter-spacing: -12px;
    color: transparent;
    -webkit-text-stroke: 3px rgba(255, 193, 7, 0.18);
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

html.light .appContent:has(.card-header-ap .faq-ss-tabs) .dashboard-head-wrapper > .container::before {
    -webkit-text-stroke: 3px rgba(12, 21, 27, 0.14);
}

/* Dashboard head: kill card border, go editorial */
.appContent:has(.card-header-ap .faq-ss-tabs) .dashboard-head-wrapper .dashboard-head {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    position: relative;
    z-index: 2;
}

.appContent:has(.card-header-ap .faq-ss-tabs) .dashboard-head-wrapper .dhead-body {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 0 !important;
    padding: 40px 20px !important;
}

/* Kill the old dollar icon box — use eyebrow label instead */
.appContent:has(.card-header-ap .faq-ss-tabs) .dashboard-head-wrapper .dhead-left {
    display: none !important;
}

.appContent:has(.card-header-ap .faq-ss-tabs) .dashboard-head-wrapper .dhead-right {
    flex: none !important;
    width: auto !important;
    padding: 0 !important;
    text-align: center;
}

.appContent:has(.card-header-ap .faq-ss-tabs) .dashboard-head-wrapper .dhead-right::before {
    content: "— FREQUENTLY ASKED QUESTIONS —";
    display: block;
    margin-bottom: 18px;
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 4px;
    color: rgba(255, 193, 7, 0.7);
    text-transform: uppercase;
}

html.light .appContent:has(.card-header-ap .faq-ss-tabs) .dashboard-head-wrapper .dhead-right::before {
    color: rgba(12, 21, 27, 0.55);
}

.appContent:has(.card-header-ap .faq-ss-tabs) .dashboard-head-wrapper .dhead-body .title {
    font-size: clamp(40px, 6vw, 72px) !important;
    font-weight: 900 !important;
    color: #ffffff !important;
    letter-spacing: -2px !important;
    line-height: 1.02 !important;
    margin: 0 0 16px 0 !important;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
}

html.light .appContent:has(.card-header-ap .faq-ss-tabs) .dashboard-head-wrapper .dhead-body .title {
    color: #0c151b !important;
    text-shadow: 0 2px 0 rgba(255, 255, 255, 0.3);
}

.appContent:has(.card-header-ap .faq-ss-tabs) .dashboard-head-wrapper .dhead-body .text {
    font-size: 17px !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.68) !important;
    line-height: 1.7 !important;
    margin: 0 auto !important;
    max-width: 560px;
}

html.light .appContent:has(.card-header-ap .faq-ss-tabs) .dashboard-head-wrapper .dhead-body .text {
    color: rgba(12, 21, 27, 0.72) !important;
}

/* --- FAQ outer card wrapper — kill boxy look --- */
/* U182 2026-07-28: was :last-child. U167 appended two <script type="application/ld+json"> blocks
   inside .appContent after the final </section>, so .appContent > section:last-child stopped
   matching anything and every width/centering rule below silently died — the accordion collapsed to
   the 50% that row-cols-md-2 gives it and sat left of centre. :last-of-type ignores trailing
   non-section siblings, so appending more markup can never break it again. */
.appContent:has(.card-header-ap .faq-ss-tabs) > section:last-of-type .card.card-border {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.appContent:has(.card-header-ap .faq-ss-tabs) > section:last-of-type .card-header-ap {
    background: transparent !important;
    border: none !important;
    padding: 20px 0 !important;
}

/* --- Accordion container --- */
.appContent:has(.card-header-ap .faq-ss-tabs) .faq-ss-tabs {
    max-width: 880px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* --- Individual accordion item --- */
.appContent:has(.card-header-ap .faq-ss-tabs) .faq-ss-tabs .home-ss-tab {
    position: relative;
    background: linear-gradient(180deg, rgba(16, 31, 40, 0.7) 0%, rgba(10, 18, 24, 0.85) 100%) !important;
    border: 1px solid rgba(255, 193, 7, 0.1) !important;
    border-radius: 20px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden;
    cursor: pointer;
    transition: background 0.35s ease,
                border-color 0.35s ease,
                box-shadow 0.35s ease,
                transform 0.35s cubic-bezier(0.22, 1, 0.36, 1) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

html.light .appContent:has(.card-header-ap .faq-ss-tabs) .faq-ss-tabs .home-ss-tab {
    background: #ffffff !important;
    border: 1px solid rgba(12, 21, 27, 0.08) !important;
    box-shadow: 0 10px 30px rgba(12, 21, 27, 0.08) !important;
}

.appContent:has(.card-header-ap .faq-ss-tabs) .faq-ss-tabs .home-ss-tab:hover {
    border-color: rgba(255, 193, 7, 0.3) !important;
    transform: translateY(-2px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
}

html.light .appContent:has(.card-header-ap .faq-ss-tabs) .faq-ss-tabs .home-ss-tab:hover {
    box-shadow: 0 16px 40px rgba(12, 21, 27, 0.1) !important;
}

/* Active accordion — override old yellow bg rule */
.appContent:has(.card-header-ap .faq-ss-tabs) .faq-ss-tabs .home-ss-tab.active {
    background: linear-gradient(180deg, rgba(24, 52, 65, 0.85) 0%, rgba(16, 31, 40, 0.95) 100%) !important;
    border-color: rgba(255, 193, 7, 0.45) !important;
    color: inherit !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35),
                0 0 0 1px rgba(255, 193, 7, 0.15) inset !important;
}

html.light .appContent:has(.card-header-ap .faq-ss-tabs) .faq-ss-tabs .home-ss-tab.active {
    background: #fffdf5 !important;
    border-color: rgba(255, 193, 7, 0.5) !important;
    box-shadow: 0 20px 50px rgba(12, 21, 27, 0.1),
                0 0 0 1px rgba(255, 193, 7, 0.25) inset !important;
}

/* Top yellow highlight bar when active */
.appContent:has(.card-header-ap .faq-ss-tabs) .faq-ss-tabs .home-ss-tab::before {
    content: '';
    position: absolute;
    top: 0;
    left: 20px;
    right: 20px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #ffc107, transparent);
    opacity: 0;
    transition: opacity 0.35s ease;
    z-index: 2;
}

.appContent:has(.card-header-ap .faq-ss-tabs) .faq-ss-tabs .home-ss-tab.active::before {
    opacity: 1;
}

/* Head: question text + plus/minus badge */
.appContent:has(.card-header-ap .faq-ss-tabs) .faq-ss-tabs .home-ss-tab .ss-tab-head {
    padding: 22px 26px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    line-height: 1.5 !important;
    transition: color 0.25s ease;
}

html.light .appContent:has(.card-header-ap .faq-ss-tabs) .faq-ss-tabs .home-ss-tab .ss-tab-head {
    color: #0c151b !important;
}

.appContent:has(.card-header-ap .faq-ss-tabs) .faq-ss-tabs .home-ss-tab.active .ss-tab-head {
    color: #ffc107 !important;
}

html.light .appContent:has(.card-header-ap .faq-ss-tabs) .faq-ss-tabs .home-ss-tab.active .ss-tab-head {
    color: #0c151b !important;
}

.appContent:has(.card-header-ap .faq-ss-tabs) .faq-ss-tabs .home-ss-tab .ss-tab-head > .row {
    align-items: center !important;
    margin: 0 !important;
    flex-wrap: nowrap;
    gap: 20px;
}

.appContent:has(.card-header-ap .faq-ss-tabs) .faq-ss-tabs .home-ss-tab .ss-tab-head > .row > .col {
    padding: 0 !important;
    flex: 1 1 auto;
}

.appContent:has(.card-header-ap .faq-ss-tabs) .faq-ss-tabs .home-ss-tab .ss-tab-head .right-p {
    flex: 0 0 auto !important;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 193, 7, 0.1) !important;
    border: 1px solid rgba(255, 193, 7, 0.3) !important;
    border-radius: 50% !important;
    color: #ffc107 !important;
    font-size: 14px !important;
    line-height: 1 !important;
    transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.appContent:has(.card-header-ap .faq-ss-tabs) .faq-ss-tabs .home-ss-tab.active .ss-tab-head .right-p {
    background: #ffc107 !important;
    border-color: #ffc107 !important;
    color: #0c151b !important;
    transform: rotate(180deg);
    box-shadow: 0 8px 22px rgba(255, 193, 7, 0.4);
}

/* Content area */
.appContent:has(.card-header-ap .faq-ss-tabs) .faq-ss-tabs .home-ss-tab .ss-tab-content {
    padding: 0 26px 26px !important;
    font-size: 15px !important;
    line-height: 1.8 !important;
    color: rgba(255, 255, 255, 0.72) !important;
    border-top: 1px solid rgba(255, 193, 7, 0.1);
    padding-top: 20px !important;
    margin-top: 0 !important;
}

html.light .appContent:has(.card-header-ap .faq-ss-tabs) .faq-ss-tabs .home-ss-tab .ss-tab-content {
    color: rgba(12, 21, 27, 0.72) !important;
    border-top-color: rgba(12, 21, 27, 0.08);
}

.appContent:has(.card-header-ap .faq-ss-tabs) .faq-ss-tabs .home-ss-tab .ss-tab-content a {
    color: #ffc107 !important;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(255, 193, 7, 0.4);
    transition: text-decoration-color 0.25s ease;
}

.appContent:has(.card-header-ap .faq-ss-tabs) .faq-ss-tabs .home-ss-tab .ss-tab-content a:hover {
    text-decoration-color: #ffc107;
}

/* Responsive */
@media (max-width: 768px) {
    .appContent:has(.card-header-ap .faq-ss-tabs) .dashboard-head-wrapper > .container::before {
        font-size: clamp(90px, 22vw, 140px);
        top: -20px;
        letter-spacing: -6px;
    }
    .appContent:has(.card-header-ap .faq-ss-tabs) .dashboard-head-wrapper .dhead-body {
        padding: 30px 15px !important;
    }
    .appContent:has(.card-header-ap .faq-ss-tabs) .dashboard-head-wrapper .dhead-right::before {
        font-size: 10px;
        letter-spacing: 2.5px;
    }
    .appContent:has(.card-header-ap .faq-ss-tabs) .faq-ss-tabs .home-ss-tab .ss-tab-head {
        padding: 18px 20px !important;
        font-size: 15px !important;
    }
    .appContent:has(.card-header-ap .faq-ss-tabs) .faq-ss-tabs .home-ss-tab .ss-tab-content {
        padding: 16px 20px 22px !important;
        font-size: 14px !important;
    }
    .appContent:has(.card-header-ap .faq-ss-tabs) .faq-ss-tabs .home-ss-tab .ss-tab-head .right-p {
        width: 34px !important;
        height: 34px !important;
        font-size: 12px !important;
    }
}


/* ============================================================
   9C. terms.twig  (/terms page)
   Scope: .appContent:has(.tos-page)
   ============================================================ */

.appContent:has(.tos-page) {
    position: relative;
    overflow: hidden;
}

.appContent:has(.tos-page) .dashboard-head-wrapper {
    position: relative;
    padding-top: 40px !important;
    padding-bottom: 40px !important;
    margin-bottom: 20px !important;
    overflow: visible;
}

.appContent:has(.tos-page) .dashboard-head-wrapper > .container {
    position: relative;
    z-index: 1;
}

/* Giant outline "LEGAL" watermark */
.appContent:has(.tos-page) .dashboard-head-wrapper > .container::before {
    content: "LEGAL";
    position: absolute;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: clamp(120px, 18vw, 260px);
    font-weight: 900;
    line-height: 0.85;
    letter-spacing: -12px;
    color: transparent;
    -webkit-text-stroke: 3px rgba(255, 193, 7, 0.18);
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

html.light .appContent:has(.tos-page) .dashboard-head-wrapper > .container::before {
    -webkit-text-stroke: 3px rgba(12, 21, 27, 0.14);
}

.appContent:has(.tos-page) .dashboard-head-wrapper .dashboard-head {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    position: relative;
    z-index: 2;
}

.appContent:has(.tos-page) .dashboard-head-wrapper .dhead-body {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 0 !important;
    padding: 40px 20px !important;
}

.appContent:has(.tos-page) .dashboard-head-wrapper .dhead-left {
    display: none !important;
}

.appContent:has(.tos-page) .dashboard-head-wrapper .dhead-right {
    flex: none !important;
    width: 100% !important;
    max-width: 820px;
    padding: 0 !important;
    text-align: center;
}

.appContent:has(.tos-page) .dashboard-head-wrapper .dhead-right::before {
    content: "— TERMS · PRIVACY · REFUND · LAW —";
    display: block;
    margin-bottom: 18px;
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 4px;
    color: rgba(255, 193, 7, 0.7);
    text-transform: uppercase;
}

html.light .appContent:has(.tos-page) .dashboard-head-wrapper .dhead-right::before {
    color: rgba(12, 21, 27, 0.55);
}

.appContent:has(.tos-page) .dashboard-head-wrapper .dhead-body .title {
    font-size: clamp(40px, 6vw, 68px) !important;
    font-weight: 900 !important;
    color: #ffffff !important;
    letter-spacing: -2px !important;
    line-height: 1.02 !important;
    margin: 0 0 18px 0 !important;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
}

html.light .appContent:has(.tos-page) .dashboard-head-wrapper .dhead-body .title {
    color: #0c151b !important;
    text-shadow: 0 2px 0 rgba(255, 255, 255, 0.3);
}

.appContent:has(.tos-page) .dashboard-head-wrapper .dhead-body .text,
.appContent:has(.tos-page) .dashboard-head-wrapper .dhead-body .tos-intro-text {
    font-size: 15.5px !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.68) !important;
    line-height: 1.78 !important;
    margin: 0 auto !important;
    max-width: 780px;
}

html.light .appContent:has(.tos-page) .dashboard-head-wrapper .dhead-body .text,
html.light .appContent:has(.tos-page) .dashboard-head-wrapper .dhead-body .tos-intro-text {
    color: rgba(12, 21, 27, 0.72) !important;
}

/* --- Terms outer card wrapper --- */
.appContent:has(.tos-page) > section:last-child .card.card-border {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.appContent:has(.tos-page) > section:last-child .card-header-ap {
    background: transparent !important;
    border: none !important;
    padding: 20px 0 0 !important;
}

/* --- Tab navigation pill segmented --- */
.appContent:has(.tos-page) .tos-page {
    max-width: 960px;
    margin: 0 auto;
}

.appContent:has(.tos-page) .tos-page .tos-nav-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 12px 22px !important;
    margin: 0 6px 12px 0 !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 193, 7, 0.14) !important;
    border-radius: 999px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: rgba(255, 255, 255, 0.72) !important;
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1) !important;
    box-shadow: none !important;
}

html.light .appContent:has(.tos-page) .tos-page .tos-nav-btn {
    background: #ffffff !important;
    border-color: rgba(12, 21, 27, 0.1) !important;
    color: rgba(12, 21, 27, 0.7) !important;
    box-shadow: 0 4px 12px rgba(12, 21, 27, 0.04) !important;
}

.appContent:has(.tos-page) .tos-page .tos-nav-btn:hover {
    background: rgba(255, 193, 7, 0.1) !important;
    border-color: rgba(255, 193, 7, 0.45) !important;
    color: #ffc107 !important;
    transform: translateY(-2px);
}

html.light .appContent:has(.tos-page) .tos-page .tos-nav-btn:hover {
    background: #0c151b !important;
    border-color: #0c151b !important;
    color: #ffc107 !important;
}

.appContent:has(.tos-page) .tos-page .tos-nav-btn.active {
    background: #ffc107 !important;
    border-color: #ffc107 !important;
    color: #0c151b !important;
    box-shadow: 0 10px 26px rgba(255, 193, 7, 0.35),
                inset 0 2px 0 rgba(255, 255, 255, 0.35) !important;
}

.appContent:has(.tos-page) .tos-page .tos-nav-btn.active span {
    color: #0c151b !important;
}

/* --- Content card wrapper --- */
.appContent:has(.tos-page) .tos-page .d-card {
    background: linear-gradient(180deg, rgba(16, 31, 40, 0.7) 0%, rgba(10, 18, 24, 0.85) 100%) !important;
    border: 1px solid rgba(255, 193, 7, 0.12) !important;
    border-radius: 22px !important;
    padding: 40px 44px !important;
    margin-top: 20px !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3),
                0 0 0 1px rgba(255, 255, 255, 0.03) inset !important;
    position: relative;
    overflow: hidden;
}

.appContent:has(.tos-page) .tos-page .d-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 20%;
    right: 20%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #ffc107, transparent);
    opacity: 0.6;
}

html.light .appContent:has(.tos-page) .tos-page .d-card {
    background: #ffffff !important;
    border-color: rgba(12, 21, 27, 0.08) !important;
    box-shadow: 0 20px 50px rgba(12, 21, 27, 0.08),
                0 0 0 1px rgba(0, 0, 0, 0.02) inset !important;
}

/* --- Tab content pane --- */
.appContent:has(.tos-page) .tos-tabs .tos-tab {
    display: none;
}

.appContent:has(.tos-page) .tos-tabs .tos-tab.active {
    display: block;
    animation: tosTabFadeIn 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes tosTabFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.appContent:has(.tos-page) .tos-tab h4 {
    font-size: clamp(26px, 3.5vw, 38px) !important;
    font-weight: 900 !important;
    color: #ffffff !important;
    letter-spacing: -0.8px;
    line-height: 1.15 !important;
    padding: 0 0 20px !important;
    margin: 0 0 28px !important;
    border-bottom: 1px solid rgba(255, 193, 7, 0.2) !important;
    position: relative;
}

html.light .appContent:has(.tos-page) .tos-tab h4 {
    color: #0c151b !important;
    border-bottom-color: rgba(12, 21, 27, 0.1) !important;
}

.appContent:has(.tos-page) .tos-tab h4::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 60px;
    height: 3px;
    background: #ffc107;
    border-radius: 999px;
}

/* Section label — larger, more prominent */
.appContent:has(.tos-page) .tos-section-label {
    display: inline-block;
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 3px !important;
    text-transform: uppercase;
    color: #ffc107 !important;
    background: rgba(255, 193, 7, 0.08) !important;
    border: 1px solid rgba(255, 193, 7, 0.25) !important;
    padding: 7px 16px !important;
    border-radius: 999px !important;
    margin: 30px 0 18px !important;
}

html.light .appContent:has(.tos-page) .tos-section-label {
    color: #d97706 !important;
    background: rgba(255, 193, 7, 0.15) !important;
    border-color: rgba(255, 193, 7, 0.45) !important;
}

.appContent:has(.tos-page) .tos-tab .tos-sub {
    font-size: 17px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin: 26px 0 10px !important;
    padding-left: 0 !important;
    letter-spacing: -0.2px;
}

html.light .appContent:has(.tos-page) .tos-tab .tos-sub {
    color: #0c151b !important;
}

.appContent:has(.tos-page) .tos-tab p {
    font-size: 14.5px !important;
    line-height: 1.85 !important;
    color: rgba(255, 255, 255, 0.75) !important;
    margin-bottom: 12px !important;
}

html.light .appContent:has(.tos-page) .tos-tab p {
    color: rgba(12, 21, 27, 0.75) !important;
}

.appContent:has(.tos-page) .tos-tab ul {
    margin: 10px 0 20px !important;
    padding-left: 24px !important;
}

.appContent:has(.tos-page) .tos-tab ul li {
    font-size: 14.5px !important;
    line-height: 1.85 !important;
    color: rgba(255, 255, 255, 0.72) !important;
    margin-bottom: 6px !important;
}

html.light .appContent:has(.tos-page) .tos-tab ul li {
    color: rgba(12, 21, 27, 0.72) !important;
}

.appContent:has(.tos-page) .tos-tab strong,
.appContent:has(.tos-page) .tos-tab ul li strong {
    color: #ffffff !important;
    font-weight: 800;
}

html.light .appContent:has(.tos-page) .tos-tab strong,
html.light .appContent:has(.tos-page) .tos-tab ul li strong {
    color: #0c151b !important;
}

/* Numbered legal items — card-like with yellow bar */
.appContent:has(.tos-page) .tos-item {
    padding: 18px 22px 18px 22px !important;
    margin: 10px 0 !important;
    background: rgba(255, 255, 255, 0.025) !important;
    border: 1px solid rgba(255, 193, 7, 0.08) !important;
    border-left: 3px solid rgba(255, 193, 7, 0.55) !important;
    border-radius: 14px !important;
    transition: all 0.3s ease;
}

.appContent:has(.tos-page) .tos-item:hover {
    background: rgba(255, 255, 255, 0.04) !important;
    border-left-color: #ffc107 !important;
    transform: translateX(4px);
}

html.light .appContent:has(.tos-page) .tos-item {
    background: rgba(12, 21, 27, 0.02) !important;
    border-color: rgba(255, 193, 7, 0.25) !important;
    border-left-color: #ffc107 !important;
}

html.light .appContent:has(.tos-page) .tos-item:hover {
    background: rgba(255, 193, 7, 0.05) !important;
}

.appContent:has(.tos-page) .tos-item p {
    margin: 0 !important;
}

.appContent:has(.tos-page) .tos-item-num {
    display: inline-block;
    min-width: 34px;
    padding: 2px 8px;
    margin-right: 8px;
    background: rgba(255, 193, 7, 0.15);
    border: 1px solid rgba(255, 193, 7, 0.35);
    border-radius: 6px;
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 11px !important;
    font-weight: 800 !important;
    color: #ffc107 !important;
    text-align: center;
    letter-spacing: 0.3px;
}

html.light .appContent:has(.tos-page) .tos-item-num {
    background: rgba(255, 193, 7, 0.2);
    border-color: rgba(255, 193, 7, 0.45);
    color: #d97706 !important;
}

/* Highlight / warning box */
.appContent:has(.tos-page) .tos-highlight {
    background: rgba(220, 53, 69, 0.08) !important;
    border: 1px solid rgba(220, 53, 69, 0.3) !important;
    border-left: 4px solid #dc3545 !important;
    border-radius: 14px !important;
    padding: 18px 22px !important;
    margin: 22px 0 !important;
    position: relative;
}

.appContent:has(.tos-page) .tos-highlight::before {
    content: '⚠';
    position: absolute;
    top: 16px;
    right: 20px;
    font-size: 20px;
    opacity: 0.6;
}

.appContent:has(.tos-page) .tos-highlight p {
    color: #fca5a5 !important;
    font-weight: 600 !important;
}

.appContent:has(.tos-page) .tos-highlight strong {
    color: #ef4444 !important;
}

html.light .appContent:has(.tos-page) .tos-highlight {
    background: rgba(220, 53, 69, 0.05) !important;
    border-color: rgba(220, 53, 69, 0.35) !important;
}

html.light .appContent:has(.tos-page) .tos-highlight p {
    color: #991b1b !important;
}

html.light .appContent:has(.tos-page) .tos-highlight strong {
    color: #dc2626 !important;
}

/* Info box */
.appContent:has(.tos-page) .tos-info-box {
    background: rgba(59, 130, 246, 0.08) !important;
    border: 1px solid rgba(59, 130, 246, 0.3) !important;
    border-left: 4px solid #3b82f6 !important;
    border-radius: 14px !important;
    padding: 18px 22px !important;
    margin: 22px 0 !important;
    position: relative;
}

.appContent:has(.tos-page) .tos-info-box::before {
    content: 'ⓘ';
    position: absolute;
    top: 16px;
    right: 20px;
    font-size: 20px;
    opacity: 0.6;
}

.appContent:has(.tos-page) .tos-info-box p {
    color: #93c5fd !important;
    font-weight: 600 !important;
}

html.light .appContent:has(.tos-page) .tos-info-box p {
    color: #1e40af !important;
}

/* Contact box */
.appContent:has(.tos-page) .tos-contact-box {
    background: rgba(255, 193, 7, 0.06) !important;
    border: 1px solid rgba(255, 193, 7, 0.3) !important;
    border-left: 4px solid #ffc107 !important;
    border-radius: 14px !important;
    padding: 20px 24px !important;
    margin: 26px 0 12px !important;
    position: relative;
}

.appContent:has(.tos-page) .tos-contact-box::before {
    content: '📧';
    position: absolute;
    top: 18px;
    right: 22px;
    font-size: 20px;
    opacity: 0.8;
}

.appContent:has(.tos-page) .tos-contact-box p {
    color: rgba(255, 255, 255, 0.85) !important;
    font-weight: 600 !important;
}

html.light .appContent:has(.tos-page) .tos-contact-box p {
    color: rgba(12, 21, 27, 0.85) !important;
}

/* Update date footer */
.appContent:has(.tos-page) .tos-update-date {
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 11px !important;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4) !important;
    margin-top: 36px !important;
    padding-top: 20px !important;
    border-top: 1px solid rgba(255, 193, 7, 0.15) !important;
}

html.light .appContent:has(.tos-page) .tos-update-date {
    color: rgba(12, 21, 27, 0.5) !important;
    border-top-color: rgba(12, 21, 27, 0.08) !important;
}

/* Responsive */
@media (max-width: 768px) {
    .appContent:has(.tos-page) .dashboard-head-wrapper > .container::before {
        font-size: clamp(80px, 22vw, 130px);
        top: -25px;
        letter-spacing: -6px;
    }
    .appContent:has(.tos-page) .dashboard-head-wrapper .dhead-body {
        padding: 30px 15px !important;
    }
    .appContent:has(.tos-page) .dashboard-head-wrapper .dhead-right::before {
        font-size: 10px;
        letter-spacing: 2.5px;
    }
    .appContent:has(.tos-page) .tos-page .d-card {
        padding: 28px 22px !important;
    }
    .appContent:has(.tos-page) .tos-page .tos-nav-btn {
        padding: 10px 16px !important;
        font-size: 12px !important;
        margin: 0 4px 10px 0 !important;
    }
    .appContent:has(.tos-page) .tos-tab p,
    .appContent:has(.tos-page) .tos-tab ul li {
        font-size: 13.5px !important;
    }
    .appContent:has(.tos-page) .tos-item {
        padding: 14px 18px !important;
    }
    .appContent:has(.tos-page) .tos-highlight::before,
    .appContent:has(.tos-page) .tos-info-box::before,
    .appContent:has(.tos-page) .tos-contact-box::before {
        display: none;
    }
}


/* ============================================================
   PHASE 9 FIX PATCH — Critical layout bugs in FAQ/Terms/Blog
   Root causes identified from user screenshots:
   1. Base .dhead-body max-width: 80%/70% (style.css:5077,5084)
      forces header content into left 70-80% → title not centered
   2. Bootstrap row-cols-md-2 wrapping col-lg-12 forces children
      to 50% width at md breakpoint — col-lg-12 loses specificity
      → accordion/tab content only fills LEFT half of container
   3. Blog guest watermark at top:-90px gets hidden under fixed nav
   ============================================================ */


/* --- Fix 1: Full-width centered dashboard header for FAQ/Terms --- */
.appContent:has(.card-header-ap .faq-ss-tabs) .dashboard-head-wrapper .dhead-body,
.appContent:has(.tos-page) .dashboard-head-wrapper .dhead-body {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 50px 30px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 0 !important;
}

@media (min-width: 992px) {
    .appContent:has(.card-header-ap .faq-ss-tabs) .dashboard-head-wrapper .dhead-body,
    .appContent:has(.tos-page) .dashboard-head-wrapper .dhead-body {
        max-width: 100% !important;
        padding: 70px 30px !important;
    }
}

/* Make title + text actually center-align their text too */
.appContent:has(.card-header-ap .faq-ss-tabs) .dashboard-head-wrapper .dhead-body .title,
.appContent:has(.card-header-ap .faq-ss-tabs) .dashboard-head-wrapper .dhead-body .text,
.appContent:has(.tos-page) .dashboard-head-wrapper .dhead-body .title,
.appContent:has(.tos-page) .dashboard-head-wrapper .dhead-body .text {
    text-align: center !important;
    width: 100% !important;
    max-width: 780px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* dhead-right wrapper full width */
.appContent:has(.card-header-ap .faq-ss-tabs) .dashboard-head-wrapper .dhead-right,
.appContent:has(.tos-page) .dashboard-head-wrapper .dhead-right {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    padding: 0 !important;
    text-align: center !important;
}


/* --- Fix 2: row-cols-md-2 forcing 50% width on col-lg-12 --- */
.appContent:has(.card-header-ap .faq-ss-tabs) .card-header-ap > .row.row-cols-md-2,
.appContent:has(.tos-page) .card-header-ap > .row.row-cols-md-2 {
    --bs-gutter-x: 0 !important;
    --bs-gutter-y: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    row-gap: 0 !important;
    display: block !important;
}

.appContent:has(.card-header-ap .faq-ss-tabs) .card-header-ap > .row.row-cols-md-2 > *,
.appContent:has(.tos-page) .card-header-ap > .row.row-cols-md-2 > * {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-top: 0 !important;
}

/* Kill outer .card / .card-header wrappers that force white bg
   (Bootstrap .card default bg is #fff; we want transparent) */
.appContent:has(.card-header-ap .faq-ss-tabs) > section .card,
.appContent:has(.card-header-ap .faq-ss-tabs) > section .card-header,
.appContent:has(.card-header-ap .faq-ss-tabs) > section .card-header-ap,
.appContent:has(.tos-page) > section .card,
.appContent:has(.tos-page) > section .card-header,
.appContent:has(.tos-page) > section .card-header-ap {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Dashboard-head outer card on FAQ/Terms — kill its border/bg too */
.appContent:has(.card-header-ap .faq-ss-tabs) .dashboard-head-wrapper .dashboard-head.card-border,
.appContent:has(.tos-page) .dashboard-head-wrapper .dashboard-head.card-border {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}


/* --- Fix 3: Blog guest page — move watermark above posts, ensure
   it's visible below fixed nav --- */

/* Blog guest page — giant editorial hero: watermark + eyebrow + headline.
   Uses 3 pseudo layers (section::before/::after + container::before).
   Section has breathing room pushed below fixed nav. */
.blog-posts-section--guest {
    padding-top: 320px !important;
    padding-bottom: 120px !important;
    position: relative;
    overflow: visible;
}

/* Layer 1: Giant outline watermark "BLOG" (background) */
.blog-posts-section--guest::before {
    content: "BLOG";
    position: absolute;
    top: 130px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: clamp(120px, 18vw, 280px);
    font-weight: 900;
    line-height: 0.82;
    letter-spacing: -12px;
    color: transparent;
    -webkit-text-stroke: 3px rgba(12, 21, 27, 0.14);
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

html.dark .blog-posts-section--guest::before {
    -webkit-text-stroke: 3px rgba(255, 193, 7, 0.18);
}

/* Layer 2: Solid editorial headline stacked over the watermark */
.blog-posts-section--guest::after {
    content: "บทความ & ข่าวสาร ล่าสุด";
    position: absolute;
    top: 200px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Inter', 'Noto Sans Thai', -apple-system, sans-serif;
    font-size: clamp(30px, 4.6vw, 62px);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -1.2px;
    color: #0c151b;
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
    z-index: 2;
    text-shadow: 0 2px 0 rgba(255, 255, 255, 0.35);
}

html.dark .blog-posts-section--guest::after {
    color: #ffffff;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.4);
}

/* Layer 3: Eyebrow pill above the headline (uses container::before) */
.blog-posts-section--guest > .container {
    position: relative;
    z-index: 3;
}

.blog-posts-section--guest > .container::before {
    content: "— INSIGHTS · STRATEGY · NEWS —";
    position: absolute;
    top: -155px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 4px;
    color: rgba(12, 21, 27, 0.6);
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
    z-index: 3;
    display: block !important;
    padding: 8px 18px;
    border: 1px solid rgba(12, 21, 27, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

html.dark .blog-posts-section--guest > .container::before {
    color: rgba(255, 193, 7, 0.85);
    border-color: rgba(255, 193, 7, 0.28);
    background: rgba(12, 21, 27, 0.4);
}

/* Ensure post cards float above the watermark layer */
.blog-posts-section--guest > .container > .row {
    position: relative;
    z-index: 2;
}

@media (max-width: 991px) {
    .blog-posts-section--guest {
        padding-top: 240px !important;
        padding-bottom: 80px !important;
    }
    .blog-posts-section--guest::before {
        top: 100px;
        font-size: clamp(70px, 20vw, 140px);
        letter-spacing: -6px;
    }
    .blog-posts-section--guest::after {
        top: 148px;
        font-size: clamp(22px, 6.2vw, 38px);
        letter-spacing: -0.5px;
    }
    .blog-posts-section--guest > .container::before {
        top: -95px;
        font-size: 10px;
        letter-spacing: 2.5px;
        padding: 6px 14px;
    }
}

@media (max-width: 575px) {
    .blog-posts-section--guest::after {
        white-space: normal;
        width: 90%;
        text-align: center;
    }
}


/* --- Fix 4: FAQ accordion — stronger active state + better spacing
   NOTE: Do NOT override `display` on .ss-tab-content — jQuery in
   layout.twig uses .slideToggle() which manages inline display style.
   Any CSS display rule here would fight with jQuery's animation. --- */
.appContent:has(.card-header-ap .faq-ss-tabs) .faq-ss-tabs {
    gap: 16px;
    padding: 10px 0 40px !important;
}


/* --- Fix 5: Terms d-card margin + width when row-cols-md-2 fix applies --- */
.appContent:has(.tos-page) .tos-page {
    max-width: 960px !important;
    margin: 0 auto !important;
    padding: 20px 0 60px !important;
}

.appContent:has(.tos-page) .tos-page .d-card {
    width: 100%;
    max-width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Tab nav row — center the pills */
.appContent:has(.tos-page) .tos-page > .tos-nav-btn:first-of-type {
    margin-left: 0 !important;
}


/* ============================================================
   SIDEBAR COMPACT — Light tightening
   Desktop (≥993px): ~12% reduction in per-item height
   Mobile  (≤992px): ~7% reduction (subtle)
   Text size UNCHANGED on both — only vertical spacing/padding
   ============================================================ */

/* --- Mobile (tighten ~15-17% total) --- */
@media (max-width: 992px) {
    .sbMenu {
        gap: 11px !important;  /* was 15, now -27% */
        padding: 0 26px !important;  /* was 0 30 */
    }
    .sbMenu .mLink {
        padding: 12px 18px !important;  /* was 15px 20px */
    }
    .sbMenu .mLink .mIcon {
        font-size: 19px !important;  /* was 20 */
        width: 34px !important;  /* was 37 */
    }
    .sbMenu li.qr-code-item {
        margin-top: 16px !important;
    }
}

/* --- Desktop (~12% tighten) --- */
@media (min-width: 993px) {
    .sbMenuWr {
        padding: 16px 0 32px !important;  /* was 20 0 40 */
    }

    .sbMenu {
        gap: 12px !important;  /* was 15 */
        padding: 0 26px !important;  /* was 0 30 */
    }

    .sbMenu .mLink {
        padding: 13px 18px !important;  /* was 15px 20px */
    }

    /* Text size stays 14px — untouched */

    .sbMenu .mLink .mIcon {
        font-size: 19px !important;  /* was 20 */
        width: 34px !important;  /* was 37 */
    }

    /* QR code item: trim a bit of the top gap too */
    .sbMenu li.qr-code-item {
        margin-top: 18px !important;
    }

    /* Section more-button (if present) */
    .sbMenu .mSMore {
        padding: 13px 18px !important;
    }
    .sbMenu .mSMore .mIcon {
        font-size: 19px !important;
    }
}


/* ============================================================
   PHASE 10 — FAQ PREMIUM REDESIGN (Apple / Linear / Vercel)
   ------------------------------------------------------------
   Problem: Previous pass created white cards on yellow body
   (html.light kicking in) — flat, low-contrast, cheap.
   Inspiration: Linear changelog cards, Vercel docs, Stripe FAQ,
   Framer support — dark editorial cards on colored body with
   CSS-counter numbering, big typography, single circular icon.
   ============================================================ */

/* --- Tighten hero so cards aren't floating in emptiness --- */
.appContent:has(.card-header-ap .faq-ss-tabs) .dashboard-head-wrapper {
    padding-bottom: 0 !important;
    margin-bottom: -40px;
}

.appContent:has(.card-header-ap .faq-ss-tabs) .dashboard-head-wrapper .dhead-body,
html.light .appContent:has(.card-header-ap .faq-ss-tabs) .dashboard-head-wrapper .dhead-body {
    padding: 70px 30px 30px !important;
}

@media (min-width: 992px) {
    .appContent:has(.card-header-ap .faq-ss-tabs) .dashboard-head-wrapper .dhead-body,
    html.light .appContent:has(.card-header-ap .faq-ss-tabs) .dashboard-head-wrapper .dhead-body {
        padding: 90px 30px 30px !important;
    }
}

/* --- List container: counter reset + tighter gap + hard centering --- */
.appContent:has(.card-header-ap .faq-ss-tabs) .faq-ss-tabs {
    counter-reset: faq-counter;
    max-width: 920px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 20px 0 100px !important;
    gap: 12px !important;
    position: relative;
    z-index: 2;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
}

/* Force the parent chain to be full-width so faq-ss-tabs centers cleanly
   inside the section's container (not offset to left) */
.appContent:has(.card-header-ap .faq-ss-tabs) > section:last-of-type > .container {
    max-width: 1200px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
}

.appContent:has(.card-header-ap .faq-ss-tabs) > section:last-of-type .card,
.appContent:has(.card-header-ap .faq-ss-tabs) > section:last-of-type .card-header-ap,
.appContent:has(.card-header-ap .faq-ss-tabs) > section:last-of-type .card-header-ap > .row,
.appContent:has(.card-header-ap .faq-ss-tabs) > section:last-of-type .card-header-ap > .row > .col-lg-12 {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    flex: 0 0 100% !important;
    display: block !important;
}

/* --- CARD: force dark editorial on BOTH themes --- */
.appContent:has(.card-header-ap .faq-ss-tabs) .faq-ss-tabs .home-ss-tab,
html.light .appContent:has(.card-header-ap .faq-ss-tabs) .faq-ss-tabs .home-ss-tab {
    counter-increment: faq-counter;
    position: relative;
    background: linear-gradient(180deg, #101f28 0%, #0a1218 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 22px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 14px 44px rgba(12, 21, 27, 0.22),
                0 1px 0 rgba(255, 255, 255, 0.04) inset !important;
    transition: border-color 0.4s ease,
                transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.4s ease !important;
}

.appContent:has(.card-header-ap .faq-ss-tabs) .faq-ss-tabs .home-ss-tab:hover,
html.light .appContent:has(.card-header-ap .faq-ss-tabs) .faq-ss-tabs .home-ss-tab:hover {
    border-color: rgba(255, 193, 7, 0.32) !important;
    transform: translateY(-3px);
    box-shadow: 0 24px 56px rgba(12, 21, 27, 0.32),
                0 1px 0 rgba(255, 255, 255, 0.08) inset !important;
}

.appContent:has(.card-header-ap .faq-ss-tabs) .faq-ss-tabs .home-ss-tab.active,
html.light .appContent:has(.card-header-ap .faq-ss-tabs) .faq-ss-tabs .home-ss-tab.active {
    background: linear-gradient(180deg, #15283a 0%, #0b141a 100%) !important;
    border-color: rgba(255, 193, 7, 0.42) !important;
    box-shadow: 0 28px 64px rgba(12, 21, 27, 0.4),
                0 0 0 1px rgba(255, 193, 7, 0.2) inset,
                0 0 48px rgba(255, 193, 7, 0.12) !important;
    transform: translateY(-2px) scale(1.003);
}

/* Top glowing accent line on active */
.appContent:has(.card-header-ap .faq-ss-tabs) .faq-ss-tabs .home-ss-tab::before {
    content: '' !important;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #ffc107, transparent);
    opacity: 0;
    transition: width 0.55s ease, opacity 0.35s ease;
    z-index: 2;
    display: block !important;
}
.appContent:has(.card-header-ap .faq-ss-tabs) .faq-ss-tabs .home-ss-tab.active::before {
    width: 72%;
    opacity: 1;
}

/* --- HEAD: the clickable question row --- */
.appContent:has(.card-header-ap .faq-ss-tabs) .faq-ss-tabs .home-ss-tab .ss-tab-head,
html.light .appContent:has(.card-header-ap .faq-ss-tabs) .faq-ss-tabs .home-ss-tab .ss-tab-head {
    padding: 26px 30px !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    line-height: 1.5 !important;
    transition: color 0.3s ease;
    background: transparent !important;
}

.appContent:has(.card-header-ap .faq-ss-tabs) .faq-ss-tabs .home-ss-tab.active .ss-tab-head,
html.light .appContent:has(.card-header-ap .faq-ss-tabs) .faq-ss-tabs .home-ss-tab.active .ss-tab-head {
    color: #ffc107 !important;
}

.appContent:has(.card-header-ap .faq-ss-tabs) .faq-ss-tabs .home-ss-tab .ss-tab-head > .row {
    align-items: center !important;
    margin: 0 !important;
    flex-wrap: nowrap !important;
    gap: 22px;
}

.appContent:has(.card-header-ap .faq-ss-tabs) .faq-ss-tabs .home-ss-tab .ss-tab-head > .row > .col {
    padding: 0 !important;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 22px;
    min-width: 0;
}

/* Question number prefix (01, 02 ... via CSS counter) */
.appContent:has(.card-header-ap .faq-ss-tabs) .faq-ss-tabs .home-ss-tab .ss-tab-head > .row > .col::before {
    content: counter(faq-counter, decimal-leading-zero);
    flex: 0 0 auto;
    font-family: 'Inter', 'SF Mono', -apple-system, monospace;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2px;
    color: rgba(255, 193, 7, 0.65);
    padding: 8px 12px;
    background: rgba(255, 193, 7, 0.06);
    border: 1px solid rgba(255, 193, 7, 0.18);
    border-radius: 8px;
    line-height: 1;
    transition: all 0.35s ease;
}

.appContent:has(.card-header-ap .faq-ss-tabs) .faq-ss-tabs .home-ss-tab.active .ss-tab-head > .row > .col::before {
    background: #ffc107;
    border-color: #ffc107;
    color: #0c151b;
    box-shadow: 0 6px 18px rgba(255, 193, 7, 0.35);
}

/* Toggle icon button (plus/minus wrapper) */
.appContent:has(.card-header-ap .faq-ss-tabs) .faq-ss-tabs .home-ss-tab .ss-tab-head .right-p {
    flex: 0 0 auto !important;
    width: 46px !important;
    height: 46px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 50% !important;
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 15px !important;
    line-height: 1 !important;
    transition: all 0.45s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.appContent:has(.card-header-ap .faq-ss-tabs) .faq-ss-tabs .home-ss-tab:hover .ss-tab-head .right-p {
    background: rgba(255, 193, 7, 0.1) !important;
    border-color: rgba(255, 193, 7, 0.35) !important;
    color: #ffc107 !important;
}

.appContent:has(.card-header-ap .faq-ss-tabs) .faq-ss-tabs .home-ss-tab.active .ss-tab-head .right-p {
    background: #ffc107 !important;
    border-color: #ffc107 !important;
    color: #0c151b !important;
    box-shadow: 0 10px 28px rgba(255, 193, 7, 0.45),
                0 0 0 6px rgba(255, 193, 7, 0.1) !important;
}

/* Keep fa-plus/minus visible (original CSS handles swap) */
.appContent:has(.card-header-ap .faq-ss-tabs) .faq-ss-tabs .home-ss-tab .ss-tab-head .right-p i {
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- CONTENT: expanded panel --- */
.appContent:has(.card-header-ap .faq-ss-tabs) .faq-ss-tabs .home-ss-tab .ss-tab-content,
html.light .appContent:has(.card-header-ap .faq-ss-tabs) .faq-ss-tabs .home-ss-tab .ss-tab-content {
    padding: 22px 30px 30px 82px !important;
    font-size: 15px !important;
    line-height: 1.85 !important;
    color: rgba(255, 255, 255, 0.72) !important;
    border-top: 1px solid rgba(255, 193, 7, 0.1) !important;
    margin-top: 0 !important;
    background: transparent !important;
    position: relative;
}

/* Subtle yellow indicator dot at content start */
.appContent:has(.card-header-ap .faq-ss-tabs) .faq-ss-tabs .home-ss-tab .ss-tab-content::before {
    content: '';
    position: absolute;
    left: 40px;
    top: 30px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ffc107;
    box-shadow: 0 0 12px rgba(255, 193, 7, 0.6);
}

.appContent:has(.card-header-ap .faq-ss-tabs) .faq-ss-tabs .home-ss-tab .ss-tab-content a {
    color: #ffc107 !important;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(255, 193, 7, 0.4);
    transition: text-decoration-color 0.25s ease;
}

.appContent:has(.card-header-ap .faq-ss-tabs) .faq-ss-tabs .home-ss-tab .ss-tab-content a:hover {
    text-decoration-color: #ffc107;
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
    .appContent:has(.card-header-ap .faq-ss-tabs) .faq-ss-tabs {
        padding: 10px 0 60px !important;
    }
    .appContent:has(.card-header-ap .faq-ss-tabs) .faq-ss-tabs .home-ss-tab .ss-tab-head {
        padding: 20px 20px !important;
        font-size: 15px !important;
    }
    .appContent:has(.card-header-ap .faq-ss-tabs) .faq-ss-tabs .home-ss-tab .ss-tab-head > .row {
        gap: 14px;
    }
    .appContent:has(.card-header-ap .faq-ss-tabs) .faq-ss-tabs .home-ss-tab .ss-tab-head > .row > .col {
        gap: 14px;
    }
    .appContent:has(.card-header-ap .faq-ss-tabs) .faq-ss-tabs .home-ss-tab .ss-tab-head > .row > .col::before {
        font-size: 11px;
        padding: 6px 9px;
    }
    .appContent:has(.card-header-ap .faq-ss-tabs) .faq-ss-tabs .home-ss-tab .ss-tab-content {
        padding: 18px 20px 22px 20px !important;
        font-size: 14px !important;
    }
    .appContent:has(.card-header-ap .faq-ss-tabs) .faq-ss-tabs .home-ss-tab .ss-tab-content::before {
        display: none;
    }
    .appContent:has(.card-header-ap .faq-ss-tabs) .faq-ss-tabs .home-ss-tab .ss-tab-head .right-p {
        width: 40px !important;
        height: 40px !important;
        font-size: 13px !important;
    }
}


/* ============================================================
   END MODERNIZATION PACK v2026-04
   ============================================================ */


/* ============================================================
   QR PAYMENT MODAL — Premium loading experience (2026-04-25)
   Modern minimal: soft glass card, concentric radar rings, 3-dot
   wave loader, rotating status, hairline LIKESTER wordmark.
   Ported pattern from adserve R14.4 but redesigned visually so
   the two brands feel distinct.
   ============================================================ */

/* --- Modal delayed reveal (1.7s) --- */
.modal.fade:has(#qr-code-image) .modal-dialog {
    opacity: 0;
    transform: scale(0.95) translateY(18px);
}
.modal.fade.show:has(#qr-code-image) .modal-dialog,
.modal.fade.in:has(#qr-code-image) .modal-dialog {
    animation: lkQRReveal 0.55s cubic-bezier(0.22, 1, 0.36, 1) 1.7s both;
}
@keyframes lkQRReveal {
    from { opacity: 0; transform: scale(0.95) translateY(18px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* --- Backdrop tweaks while QR modal is open ---
   Likester already hides .modal-backdrop and applies blur on .modal.show,
   but lift the blur strength + tint while QR is loading so the page
   recedes more deeply. */
body:has(.modal.show #qr-code-image) .modal.show {
    background: rgba(255, 191, 0, 0.08) !important;
    backdrop-filter: blur(20px) saturate(1.4) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.4) !important;
}
html.dark body:has(.modal.show #qr-code-image) .modal.show {
    background: rgba(12, 20, 27, 0.55) !important;
}

/* --- Prep overlay container --- */
.lk-prep-overlay {
    position: fixed;
    inset: 0;
    z-index: 1055; /* above .modal (1050) so prep card sits on top of blurred modal layer */
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    padding: 20px;
    animation: lkPrepIn 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.lk-prep-overlay.lk-prep-fading {
    animation: lkPrepOut 0.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes lkPrepIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes lkPrepOut { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.97); } }

/* --- Card --- */
.lk-prep-card {
    position: relative;
    width: 340px;
    max-width: 100%;
    padding: 38px 32px 26px;
    background: #ffffff;
    border: 1px solid #f0e9d8;
    border-radius: 20px;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.7) inset,
        0 24px 50px -18px rgba(255, 191, 0, 0.20),
        0 8px 22px -6px rgba(20, 22, 30, 0.10);
    text-align: center;
    overflow: hidden;
    isolation: isolate;
    transform: scale(0.97);
    animation: lkPrepCardIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.05s forwards;
}
@keyframes lkPrepCardIn { to { transform: scale(1); } }
.lk-prep-card::before {
    /* warm gradient wash top */
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 70%;
    background: radial-gradient(60% 50% at 50% 0%, rgba(255, 191, 0, 0.16), transparent 70%);
    pointer-events: none;
    z-index: -1;
}

html.dark .lk-prep-card {
    background: rgba(18, 29, 39, 0.96);
    border-color: rgba(255, 255, 255, 0.06);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.04) inset,
        0 28px 60px -20px rgba(0, 0, 0, 0.70),
        0 8px 22px -6px rgba(0, 0, 0, 0.40);
}
html.dark .lk-prep-card::before {
    background: radial-gradient(60% 50% at 50% 0%, rgba(255, 191, 0, 0.20), transparent 70%);
}

/* --- Concentric radar rings + QR mini-icon --- */
.lk-prep-radar {
    position: relative;
    width: 96px;
    height: 96px;
    margin: 0 auto 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lk-prep-radar-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid #ffbf00;
    opacity: 0;
    animation: lkRing 2s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
.lk-prep-radar-ring:nth-child(2) { animation-delay: 0.66s; border-color: #ff7a59; }
.lk-prep-radar-ring:nth-child(3) { animation-delay: 1.33s; border-color: #ffbf00; }
@keyframes lkRing {
    0%   { transform: scale(0.55); opacity: 0; border-width: 2.5px; }
    20%  { opacity: 0.85; }
    100% { transform: scale(1.15); opacity: 0; border-width: 1px; }
}
.lk-prep-radar-icon {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 11px;
    background: linear-gradient(135deg, #ffbf00 0%, #ff9500 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 6px 18px -4px rgba(255, 191, 0, 0.45),
        0 0 0 4px rgba(255, 255, 255, 0.85);
    z-index: 2;
}
html.dark .lk-prep-radar-icon {
    box-shadow:
        0 6px 18px -4px rgba(255, 191, 0, 0.45),
        0 0 0 4px rgba(18, 29, 39, 0.85);
}
.lk-prep-radar-icon svg { width: 22px; height: 22px; color: #ffffff; display: block; }

/* --- Title --- */
.lk-prep-title {
    font-family: "Sarabun", "Noto Sans Thai", -apple-system, sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #1d2a37;
    line-height: 1.35;
    margin: 0 0 6px;
    letter-spacing: 0.005em;
}
html.dark .lk-prep-title { color: #f4f6f9; }

/* --- Status (rotating) --- */
.lk-prep-status {
    font-family: "Noto Sans Thai", -apple-system, sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #6b7785;
    line-height: 1.4;
    margin: 0 0 22px;
    min-height: 18px;
    transition: opacity 0.16s ease;
}
html.dark .lk-prep-status { color: #95a4b3; }

/* --- 3-dot wave bouncer --- */
.lk-prep-dots {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 0 26px;
    height: 18px;
}
.lk-prep-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ffbf00;
    box-shadow: 0 2px 6px rgba(255, 191, 0, 0.4);
    animation: lkDotWave 1.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
}
.lk-prep-dot:nth-child(2) { animation-delay: 0.13s; background: #ff9500; box-shadow: 0 2px 6px rgba(255, 149, 0, 0.4); }
.lk-prep-dot:nth-child(3) { animation-delay: 0.26s; background: #ff7a59; box-shadow: 0 2px 6px rgba(255, 122, 89, 0.4); }
@keyframes lkDotWave {
    0%, 60%, 100% { transform: translateY(0) scale(1); opacity: 0.6; }
    30%           { transform: translateY(-7px) scale(1.15); opacity: 1; }
}

/* --- Brand mark — minimal wordmark with hairline --- */
.lk-prep-brand {
    padding-top: 16px;
    border-top: 1px solid #f0e9d8;
}
html.dark .lk-prep-brand { border-top-color: rgba(255, 255, 255, 0.06); }
.lk-prep-brand-text {
    font-family: "Montserrat", "Sarabun", sans-serif;
    font-size: 13px;
    font-weight: 800;
    color: #1d2a37;
    letter-spacing: 0.18em;
    line-height: 1;
    display: inline-block;
    position: relative;
}
.lk-prep-brand-text::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -5px;
    transform: translateX(-50%);
    width: 24px;
    height: 1.5px;
    background: linear-gradient(90deg, #ffbf00, #ff7a59);
    border-radius: 999px;
}
html.dark .lk-prep-brand-text { color: #f4f6f9; }
.lk-prep-brand-tag {
    font-family: "Montserrat", monospace;
    font-size: 9px;
    font-weight: 600;
    color: #9aa6b3;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    line-height: 1;
    display: block;
    margin-top: 12px;
}
html.dark .lk-prep-brand-tag { color: #6b7785; }

/* --- Mobile sizing --- */
@media (max-width: 480px) {
    .lk-prep-card { width: 300px; padding: 32px 24px 22px; border-radius: 18px; }
    .lk-prep-radar { width: 86px; height: 86px; margin-bottom: 18px; }
    .lk-prep-radar-icon { width: 40px; height: 40px; border-radius: 10px; }
    .lk-prep-radar-icon svg { width: 20px; height: 20px; }
    .lk-prep-title { font-size: 15px; }
    .lk-prep-status { font-size: 12.5px; margin-bottom: 18px; }
    .lk-prep-dots { gap: 7px; margin-bottom: 22px; }
    .lk-prep-dot { width: 9px; height: 9px; }
    .lk-prep-brand-text { font-size: 12px; }
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
    .lk-prep-radar-ring { animation: none; opacity: 0.4; }
    .lk-prep-dot       { animation: none; }
    .lk-prep-card      { animation: none; transform: none; }
}

/* ============================================================
   CSS GAP FIXES — from Claude Design ref (2026-05-27)
   ============================================================ */

/* ---- pg-stat-row / pg-stat-mini (affiliates stats row, etc.) ---- */
.pg-stat-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin: 16px 0;
}
.pg-stat-mini {
    background: var(--side);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 18px;
    display: flex;
    gap: 14px;
    align-items: center;
}
.pg-stat-mini .ic {
    width: 46px; height: 46px;
    border-radius: 50%;
    border: 2.5px solid;
    display: grid; place-items: center;
    font-size: 20px;
    flex-shrink: 0;
}
.pg-stat-mini.b .ic { color: #2A62FF; border-color: #2A62FF; }
.pg-stat-mini.r .ic { color: #FF2828; border-color: #FF2828; }
.pg-stat-mini.g .ic { color: #10b981; border-color: #10b981; }
.pg-stat-mini.p .ic { color: #A12AFF; border-color: #A12AFF; }
.pg-stat-mini .l {
    font-size: 12px;
    color: var(--inkDim);
    font-weight: 500;
}
.pg-stat-mini .v {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 22px;
    color: var(--ink);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-top: 2px;
}
.pg-stat-mini .v small {
    font-size: 11px;
    font-weight: 600;
    color: #10b981;
    margin-left: 5px;
}
@media (max-width: 768px) {
    .pg-stat-row { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .pg-stat-mini { padding: 14px; border-radius: 14px; }
    .pg-stat-mini .ic { width: 38px; height: 38px; font-size: 16px; }
    .pg-stat-mini .v { font-size: 18px; }
}

/* ---- af-t-history / af-history (transaction list rows) ---- */
.af-t-history,
.af-history {
    background: var(--side);
    border: 1px solid var(--line);
    border-radius: 14px;
    margin-bottom: 10px;
    overflow: hidden;
}
.af-t-history .sc-sup-item,
.af-history .sc-sup-item,
.af-t-history > a,
.af-history > a {
    display: block;
    padding: 14px 18px;
    text-decoration: none;
    color: var(--ink);
    transition: background 0.15s;
}
.af-t-history .sc-sup-item:hover,
.af-history .sc-sup-item:hover,
.af-t-history > a:hover,
.af-history > a:hover {
    background: rgba(255, 193, 7, 0.04);
    text-decoration: none;
    color: var(--ink);
}
.af-t-history .payment-info,
.af-history .payment-info {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    align-items: start;
}
.af-t-history .payment-info .title,
.af-history .payment-info .title {
    font-size: 11px;
    color: var(--inkDim);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    margin-bottom: 4px;
}
.af-t-history .payment-info .text,
.af-history .payment-info .text {
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
}
.af-t-history .payment-info .text.primary-color,
.af-history .payment-info .text.primary-color {
    color: #ffc107;
}
@media (max-width: 640px) {
    .af-t-history .payment-info,
    .af-history .payment-info { grid-template-columns: 1fr 1fr; }
}

/* ---- pre.code / .code (api.twig JSON code block) ---- */
pre.code,
.code {
    background: #0a0f15;
    color: #c5cdd6;
    border: 1px solid #1a2532;
    border-radius: 12px;
    padding: 18px 20px;
    font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
    font-size: 12.5px;
    line-height: 1.7;
    overflow-x: auto;
    white-space: pre;
    margin: 0 0 16px;
}
pre.code.card,
.code.card { box-shadow: none; }
html.light pre.code,
html.light .code {
    background: #0c151b;
    color: #e5e7eb;
    border-color: #1f2937;
}

/* ---- Chrome autofill override (dark inputs in child_panel_order form, etc.) ---- */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--ink);
    -webkit-box-shadow: 0 0 0 1000px var(--side) inset;
    caret-color: var(--ink);
    transition: background-color 5000s ease-in-out 0s;
}
html.light input:-webkit-autofill,
html.light input:-webkit-autofill:hover,
html.light input:-webkit-autofill:focus {
    -webkit-text-fill-color: #0c151b;
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset;
}

/* ============================================================
   DAILY CHECK-IN MODAL — Match reference design (modals.jsx lkm-checkin)
   Overrides earlier .ci-modal/.ci-day styles at line 22025+
   ============================================================ */

/* ---- Modal shell ---- */
.ci-modal {
    background: var(--side);
    border-radius: 24px;
    overflow: hidden;
    border: none;
    box-shadow: 0 25px 60px rgba(0,0,0,0.4);
}

/* ---- HERO (yellow gradient with centered gift icon) ---- */
.ci-modal-header {
    background: linear-gradient(135deg, #ffc107 0%, #ffce3a 100%);
    padding: 30px 26px 26px;
    position: relative;
    overflow: hidden;
    text-align: center;
    border: none;
}
.ci-modal-header .ci-header-deco {
    position: absolute;
    right: -40px; top: -50px;
    width: 180px; height: 180px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    pointer-events: none;
    z-index: 0;
}
.ci-modal-header .ci-header-deco::before {
    content: ''; position: absolute;
    left: -30px; bottom: -260px;
    width: 140px; height: 140px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
}
.ci-modal-header .ci-header-deco::after { display: none; }
.ci-modal-header .ci-close-btn {
  position: absolute; top: 18px; right: 18px;
  background-color: rgba(0,0,0,0.12) !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230c151b'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat; background-position: center; background-size: 14px;
  border: 0; width: 34px; height: 34px; border-radius: 10px;
  opacity: 1; filter: none; z-index: 2; padding: 0;
}
.ci-modal-header .ci-close-btn:hover { background-color: rgba(0,0,0,0.2) !important; }

/* ---- Header content layout: gift → title → subtitle ---- */
.ci-modal-header .ci-header-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

/* ---- Gift icon at top center (from streak badge, repurposed) ---- */
.ci-modal-header .ci-streak-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: auto; height: auto;
    background: rgba(12,21,27,0.10);
    border: 1px solid rgba(12,21,27,0.12);
    border-radius: 999px;
    padding: 6px 16px 6px 6px;
    margin: 0 auto 14px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
    backdrop-filter: none;
}
.ci-modal-header .ci-streak-icon {
    flex-shrink: 0;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: #0c151b;
    color: #ffc107;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    font-size: 18px;
    line-height: 1;
}
.ci-modal-header .ci-streak-icon i::before {
    content: '🎁';
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}
.ci-modal-header .ci-streak-info {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
}
.ci-modal-header .ci-streak-num {
    font-family: var(--font-en), 'Inter', sans-serif;
    font-weight: 800;
    font-size: 18px;
    line-height: 1;
    color: #0c151b;
}
.ci-modal-header .ci-streak-label {
    font-size: 12px;
    font-weight: 600;
    color: #0c151b;
    opacity: 0.78;
}

/* ---- Title + Subtitle on yellow hero ---- */
.ci-modal-header .ci-header-title {
    margin: 0;
    font-size: 24px;
    font-weight: 900;
    color: #0c151b;
    letter-spacing: -0.02em;
    line-height: 1.2;
}
.ci-modal-header .ci-header-sub {
    margin: 4px 0 0;
    font-size: 13px;
    color: #0c151b;
    opacity: 0.78;
    font-weight: 500;
}

/* ---- Modal body & day grid ---- */
.ci-modal-body {
    padding: 22px 26px 22px;
    background: var(--side);
}
.ci-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    margin: 0 0 18px;
    justify-content: stretch;
    flex-wrap: nowrap;
}

/* ---- Day card (rectangular, 3 states: todo/done/today) ---- */
.ci-day {
    background: var(--side2, rgba(255,255,255,0.04));
    border: 1.5px solid var(--line);
    border-radius: 14px;
    padding: 12px 4px;
    text-align: center;
    transition: 0.14s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: auto;
    height: auto;
    min-width: 0;
    max-width: none;
    flex: none;
    color: var(--ink);
    position: relative;
    cursor: default;
    animation: none;
    box-shadow: none;
}
.ci-day-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--inkDim);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1;
    margin-bottom: 2px;
}
/* Icon container — neutralize round coin/check, use plain icon */
.ci-day .ci-coin,
.ci-day .ci-check,
.ci-day .ci-gift {
    width: auto; height: auto;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--ink);
    font-size: 22px;
    line-height: 1;
    border-radius: 0;
    display: block;
    margin: 0 auto;
    padding: 0;
    overflow: visible;
}
.ci-day .ci-coin::after,
.ci-day .ci-check::after,
.ci-day .ci-gift::before,
.ci-day .ci-gift::after { display: none !important; }
.ci-day-pts {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 12px;
    color: var(--ink);
    line-height: 1;
    margin-top: 2px;
    opacity: 1 !important;
}
.ci-bonus-tag { display: none; } /* Reference design omits bonus tag */

/* ── State: done (past, checked-in) ── */
.ci-day.checked {
    background: linear-gradient(135deg, #ffc107, #ffce3a);
    border-color: #ffc107;
    color: #0c151b;
}
.ci-day.checked .ci-day-label { color: #0c151b; opacity: 0.7; }
.ci-day.checked .ci-day-pts { color: #0c151b; font-weight: 900; opacity: 1; font-size: 13px; }
.ci-day.checked .ci-check,
.ci-day.checked .ci-coin,
.ci-day.checked .ci-gift { color: #0c151b !important; display: block; }

/* ── State: today (current day, highlighted) ── */
.ci-day.today {
    background: #0c151b;
    border-color: #0c151b;
    box-shadow: 0 8px 18px rgba(12,21,27,0.3);
    transform: scale(1.05);
    flex: none;
    animation: none;
}
.ci-day.today .ci-day-label { color: #ffc107; font-weight: 800; opacity: 1; }
.ci-day.today .ci-day-pts { color: #ffc107; font-weight: 900; font-size: 13px; }
.ci-day.today .ci-coin,
.ci-day.today .ci-check,
.ci-day.today .ci-gift { color: #ffc107 !important; width: auto; height: auto; font-size: 22px; }

/* ── State: bonus day (day 7) ── */
.ci-day.bonus {
    background: var(--side2, rgba(255,255,255,0.04));
    border: 1.5px solid var(--line);
    flex: none;
    max-width: none;
    color: var(--ink);
}
.ci-day.bonus .ci-gift { color: var(--inkDim) !important; }
.ci-day.bonus.checked {
    background: linear-gradient(135deg, #ffc107, #ffce3a);
    border-color: #ffc107;
    color: #0c151b;
}
.ci-day.bonus.checked .ci-day-label,
.ci-day.bonus.checked .ci-day-pts,
.ci-day.bonus.checked .ci-gift { color: #0c151b !important; }
.ci-day.bonus.today {
    background: #0c151b;
    border-color: #0c151b;
}
.ci-day.bonus.today .ci-gift { color: #ffc107 !important; }

/* ── Future days (not checked, not today) ── */
.ci-day:not(.checked):not(.today) .ci-coin,
.ci-day:not(.checked):not(.today) .ci-gift {
    color: var(--inkDim);
}

/* ---- Reward box (centered claim with big bold number) ---- */
.ci-reward-box {
    text-align: center;
    padding: 14px 0 0;
    background: transparent;
    border: 0;
    margin: 0 0 18px;
    color: var(--ink);
}

/* ---- CTA button (full-width yellow primary) ---- */
.ci-cta-btn {
    display: block;
    width: 100%;
    background: linear-gradient(135deg, #ffc107, #ffab00);
    color: #0c151b;
    border: 0;
    border-radius: 14px;
    padding: 14px 24px;
    font-size: 16px;
    font-weight: 900;
    box-shadow: 0 8px 20px rgba(255,193,7,0.35);
    transition: 0.18s;
    cursor: pointer;
}
.ci-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(255,193,7,0.45);
}
.ci-cta-btn:disabled {
    background: var(--line);
    color: var(--inkDim);
    box-shadow: none;
    transform: none;
    cursor: not-allowed;
}

/* ---- Responsive: 7 days wrap on small mobile ---- */
@media (max-width: 480px) {
    .ci-modal-header { padding: 24px 18px 20px; }
    .ci-modal-header .ci-streak-badge { padding: 5px 14px 5px 5px; gap: 8px; }
    .ci-modal-header .ci-streak-icon { width: 30px; height: 30px; font-size: 16px; }
    .ci-modal-header .ci-streak-num { font-size: 16px; }
    .ci-modal-header .ci-streak-label { font-size: 11px; }
    .ci-modal-header .ci-header-title { font-size: 20px; }
    .ci-modal-body { padding: 18px 18px 18px; }
    .ci-grid { gap: 5px; }
    .ci-day { padding: 10px 2px; border-radius: 12px; }
    .ci-day-label { font-size: 9px; }
    .ci-day .ci-coin, .ci-day .ci-check, .ci-day .ci-gift { font-size: 18px; }
    .ci-day-pts { font-size: 11px; }
}

/* ---- Light mode override ---- */
html.light .ci-modal {
    background: #ffffff;
    box-shadow: 0 25px 60px rgba(0,0,0,0.15);
}
html.light .ci-modal-body { background: #ffffff; }
html.light .ci-day {
    background: #f7f8f9;
    border-color: #e5e7eb;
    color: #0c151b;
}
html.light .ci-day .ci-coin,
html.light .ci-day .ci-check,
html.light .ci-day .ci-gift { color: #0c151b; }
html.light .ci-day:not(.checked):not(.today) .ci-coin,
html.light .ci-day:not(.checked):not(.today) .ci-gift { color: #9ca3af; }
html.light .ci-day-label { color: #6b7280; }
html.light .ci-day-pts { color: #0c151b; }
html.light .ci-day.today {
    background: #0c151b;
    border-color: #0c151b;
}
html.light .ci-day.today .ci-day-label,
html.light .ci-day.today .ci-day-pts,
html.light .ci-day.today .ci-coin,
html.light .ci-day.today .ci-gift,
html.light .ci-day.today .ci-check { color: #ffc107; }

/* ============================================================
   API DOCUMENTATION — Match reference (pages-2.jsx APIDocsPage)
   ============================================================ */

/* ---- Page header (api documentation hero) ---- */
.api-pg-head {
    background: var(--side);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 24px 28px;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.api-pg-head .api-pg-ic {
    width: 52px; height: 52px;
    border-radius: 14px;
    background: rgba(161, 42, 255, 0.15);
    color: #A12AFF;
    display: grid; place-items: center;
    font-size: 26px;
    flex-shrink: 0;
}
.api-pg-head .api-pg-body { flex: 1; min-width: 0; }
.api-pg-head .api-pg-body h1 {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -0.01em;
}
.api-pg-head .api-pg-body p {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--inkDim);
}
.api-pg-head .api-pg-actions {
    display: flex; gap: 8px;
    flex-wrap: wrap;
}
.api-pg-head .api-pg-btn {
    background: linear-gradient(135deg, #ffc107, #ffce3a);
    color: #0c151b;
    border: 0;
    padding: 9px 16px;
    border-radius: 11px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    font-family: inherit;
}
.api-pg-head .api-pg-btn.outline {
    background: var(--side2);
    border: 1px solid var(--line);
    color: var(--ink);
}

/* ---- API Key card ---- */
.api-key-card {
    background: var(--side);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 22px 24px;
    margin-bottom: 18px;
}
.api-key-card .akc-h {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 14px;
}
.api-key-card .akc-h .akc-ic {
    width: 42px; height: 42px;
    border-radius: 11px;
    background: linear-gradient(135deg, #ffc107, #ffce3a);
    color: #0c151b;
    display: grid; place-items: center;
    font-size: 22px;
}
.api-key-card .akc-h h2 {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
    color: var(--ink);
}
.api-key-card .akc-h p {
    margin: 1px 0 0;
    font-size: 12.5px;
    color: var(--inkDim);
}
.api-key-card .key-row {
    background: #0c151b;
    border-radius: 12px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #a8b3c7;
    font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
    font-size: 13px;
    flex-wrap: wrap;
}
.api-key-card .key-row .k {
    flex: 1;
    min-width: 0;
    word-break: break-all;
}
.api-key-card .key-row .k.masked {
    letter-spacing: 0.05em;
}
.api-key-card .key-row .key-btn {
    background: rgba(255, 193, 7, 0.2);
    color: #ffc107;
    border: 1px solid rgba(255, 193, 7, 0.3);
    padding: 7px 12px;
    border-radius: 8px;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: inherit;
    text-decoration: none;
}
.api-key-card .key-row .key-btn:hover { background: rgba(255, 193, 7, 0.3); }
.api-key-card .akc-actions {
    display: flex; gap: 8px;
    margin-top: 14px;
    flex-wrap: wrap;
}
.api-key-card .akc-actions .akc-btn {
    background: var(--side2);
    border: 1px solid var(--line);
    color: var(--ink);
    padding: 9px 14px;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
    text-decoration: none;
}
.api-key-card .akc-actions .akc-btn:hover { background: var(--side); border-color: var(--brand); }
.api-key-card .akc-actions .akc-btn.danger {
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.25);
}

/* ---- API shell (2-col layout) ---- */
.api-shell {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 18px;
    align-items: start;
}
@media (max-width: 991px) {
    .api-shell { grid-template-columns: 1fr; }
}

/* ---- API navigation sidebar ---- */
.api-nav {
    background: var(--side);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 14px;
    position: sticky;
    top: 14px;
}
@media (max-width: 991px) {
    .api-nav { position: static; }
}
.api-nav .h {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--inkDim);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 6px 12px 10px;
}
.api-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 9px;
    font-size: 13px;
    color: var(--ink);
    text-decoration: none;
    transition: 0.14s;
}
.api-nav a:hover {
    background: var(--side2);
    color: var(--ink);
    text-decoration: none;
}
.api-nav a.act {
    background: rgba(255, 193, 7, 0.1);
    color: #ffc107;
    font-weight: 700;
}
.api-nav a .method {
    font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 5px;
    letter-spacing: 0.04em;
}
.api-nav a .method.post { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.api-nav a .method.get { background: rgba(42, 98, 255, 0.15); color: #2A62FF; }

/* ---- API documentation main column ---- */
.api-doc {
    background: var(--side);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 0;
    overflow: hidden;
}
.api-endpoint {
    padding: 28px 32px;
    border-bottom: 1px solid var(--line);
}
.api-endpoint:last-child { border-bottom: 0; }
.api-endpoint h3 {
    margin: 0 0 6px;
    font-size: 20px;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -0.01em;
}
.api-endpoint .desc {
    font-size: 13.5px;
    color: var(--inkDim);
    margin: 0 0 16px;
    max-width: 720px;
    line-height: 1.6;
}
.api-endpoint .desc code,
.api-endpoint code.inline {
    background: var(--side2);
    padding: 1px 6px;
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--ink);
}

/* ---- API route box ---- */
.api-route {
    background: var(--side2);
    border: 1px solid var(--line);
    border-radius: 11px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    color: var(--ink);
    margin-bottom: 18px;
}
.api-route .method {
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    letter-spacing: 0.04em;
}
.api-route .method.post { background: #10b981; color: #fff; }
.api-route .method.get { background: #2A62FF; color: #fff; }
.api-route .path { flex: 1; }

/* ---- 2-col layout (parameters + response) ---- */
.api-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
@media (max-width: 768px) {
    .api-2col { grid-template-columns: 1fr; }
    .api-endpoint { padding: 22px 20px; }
}
.api-side h4 {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -0.01em;
}

/* ---- API parameters list ---- */
.api-params { display: flex; flex-direction: column; gap: 8px; }
.api-param {
    background: var(--side2);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 10px 14px;
}
.api-param .pn {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.api-param .pn code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
    background: transparent;
    padding: 0;
}
.api-param .pn .type {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--inkDim);
}
.api-param .pn .req {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    padding: 1px 7px;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.api-param .pn .opt {
    background: rgba(107, 114, 128, 0.15);
    color: #6b7280;
    padding: 1px 7px;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 700;
}
.api-param .pd {
    font-size: 11.5px;
    color: var(--inkDim);
    margin-top: 5px;
}

/* ---- Code block with syntax highlighting ---- */
.code-block {
    background: #0a0f15;
    border-radius: 12px;
    padding: 0;
    overflow: hidden;
    border: 1px solid #1a2532;
}
.code-block .tabs {
    display: flex;
    background: #101820;
    border-bottom: 1px solid #1a2532;
    overflow-x: auto;
}
.code-block .tabs button,
.code-block .tabs a {
    background: transparent;
    border: 0;
    padding: 9px 16px;
    font-size: 11.5px;
    font-weight: 700;
    color: #6b7891;
    cursor: pointer;
    font-family: 'JetBrains Mono', monospace;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
    text-decoration: none;
}
.code-block .tabs button.act,
.code-block .tabs a.act {
    color: #ffc107;
    background: #0a0f15;
    border-top: 2px solid #ffc107;
    padding-top: 7px;
}
.code-block pre {
    margin: 0;
    padding: 18px 20px;
    font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
    font-size: 12.5px;
    line-height: 1.7;
    color: #c5cdd6;
    overflow-x: auto;
    white-space: pre;
    background: transparent;
    border: 0;
}
/* Syntax highlight tokens — k=keyword, s=string, n=number, c=comment, v=value */
.code-block pre .k { color: #ff79c6; }
.code-block pre .s { color: #f1fa8c; }
.code-block pre .n { color: #bd93f9; }
.code-block pre .c { color: #6272a4; font-style: italic; }
.code-block pre .v { color: #50fa7b; }

/* Light mode tweaks for API doc */
html.light .api-key-card .key-row {
    background: #0c151b;  /* keep dark for key display */
    color: #d1d5db;
}
html.light .api-nav a { color: #0c151b; }
html.light .api-nav a.act { color: #b8860b; }
html.light .code-block,
html.light .code-block .tabs,
html.light .code-block pre {
    /* keep dark theme for code blocks even in light mode */
}

/* ============================================================
   v7 TAB SYSTEM + MISSING PIECES — from tabs.jsx (2026-05-27)
   ============================================================ */

/* ---- Shared tab toolbar ---- */
.tb-toolbar {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    padding: 16px 22px;
    border-bottom: 1px solid var(--line);
}
.tb-toolbar .pill-tabs {
    display: flex;
    gap: 4px;
    background: var(--side2);
    border: 1px solid var(--line);
    border-radius: 11px;
    padding: 3px;
}
.tb-toolbar .pill-tabs button,
.tb-toolbar .pill-tabs a {
    background: transparent;
    border: 0;
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--inkDim);
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}
.tb-toolbar .pill-tabs button.active,
.tb-toolbar .pill-tabs a.active {
    background: var(--brand, #ffc107);
    color: var(--brandText, #0c151b);
}
.tb-toolbar .pill-tabs button .c,
.tb-toolbar .pill-tabs a .c {
    background: rgba(0, 0, 0, 0.1);
    color: inherit;
    padding: 1px 7px;
    border-radius: 99px;
    font-size: 10px;
    font-weight: 800;
    font-family: 'Inter', sans-serif;
}
.tb-toolbar .pill-tabs button.active .c,
.tb-toolbar .pill-tabs a.active .c { background: rgba(0, 0, 0, 0.15); }
.tb-toolbar > select {
    padding: 7px 12px;
    background: var(--side2);
    border: 1px solid var(--line);
    border-radius: 9px;
    color: var(--ink);
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
}
.tb-toolbar .pg-btn {
    padding: 8px 14px;
    border-radius: 9px;
    background: var(--brand);
    color: var(--brandText);
    border: 0;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
    text-decoration: none;
}
.tb-toolbar .pg-btn.outline {
    background: var(--side2);
    border: 1px solid var(--line);
    color: var(--ink);
}

/* ---- Add Funds History list/row ---- */
.afh-list { display: flex; flex-direction: column; }
.afh-row {
    display: grid;
    grid-template-columns: 44px 1.2fr 1fr 1fr 1fr 120px;
    gap: 14px;
    align-items: center;
    padding: 14px 22px;
    border-bottom: 1px solid var(--line);
    transition: 0.14s;
}
.afh-row:hover { background: var(--side2); }
.afh-row:last-child { border-bottom: 0; }
.afh-row .ic {
    width: 42px; height: 42px;
    border-radius: 11px;
    display: grid; place-items: center;
    color: #fff;
    font-size: 18px;
}
.afh-row .ic.qr { background: linear-gradient(135deg, #0258FF, #0042c4); }
.afh-row .ic.tm { background: linear-gradient(135deg, #ff8a3c, #ff5722); }
.afh-row .ic.bk { background: linear-gradient(135deg, #10b981, #059669); }
.afh-row .ic.cr { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
.afh-row .label { font-size: 13px; font-weight: 700; color: var(--ink); }
.afh-row .label small { display: block; font-size: 11px; font-weight: 500; color: var(--inkDim); margin-top: 2px; }
.afh-row .ref { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--inkDim); }
.afh-row .amt { font-family: 'Inter', sans-serif; font-weight: 800; font-size: 16px; color: var(--ink); }
.afh-row .amt em { font-style: normal; color: #10b981; font-size: 11px; margin-left: 4px; }
.afh-row .date { font-size: 12px; color: var(--inkDim); }
.afh-row .date b { color: var(--ink); display: block; font-size: 12.5px; }
.afh-row .st {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 12px; border-radius: 999px;
    font-size: 11px; font-weight: 700;
    justify-self: start;
}
.afh-row .st.done { background: rgba(16, 185, 129, 0.12); color: #10b981; }
.afh-row .st.pend { background: rgba(255, 193, 7, 0.18); color: #ca8a04; }
.afh-row .st.fail { background: rgba(239, 68, 68, 0.12); color: #ef4444; }
@media (max-width: 768px) {
    .afh-row { grid-template-columns: 44px 1fr; gap: 10px; padding: 12px 16px; }
    .afh-row .ref, .afh-row .date { display: none; }
    .afh-row .amt { grid-column: 2; }
    .afh-row .st { grid-column: 2; }
}

/* ---- New Order Tabs (Mass + Info) ---- */
.no-tab-card { padding: 24px; }
.no-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.no-info-it {
    background: var(--side2);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 18px 20px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
}
.no-info-it .ic {
    width: 44px; height: 44px;
    border-radius: 50%;
    border: 2.5px solid;
    display: grid; place-items: center;
    font-size: 20px;
    flex-shrink: 0;
}
.no-info-it.b .ic { color: #2A62FF; border-color: #2A62FF; }
.no-info-it.r .ic { color: #FF2828; border-color: #FF2828; }
.no-info-it.g .ic { color: #10b981; border-color: #10b981; }
.no-info-it.p .ic { color: #A12AFF; border-color: #A12AFF; }
.no-info-it.y .ic { color: #ca8a04; border-color: #ffc107; }
.no-info-it.o .ic { color: #ff6b35; border-color: #ff6b35; }
.no-info-it b { display: block; font-size: 13.5px; font-weight: 800; color: var(--ink); margin-bottom: 5px; }
.no-info-it p { margin: 0; font-size: 12.5px; color: var(--inkDim); line-height: 1.6; }
@media (max-width: 640px) { .no-info-grid { grid-template-columns: 1fr; } }

/* ---- Services List view ---- */
.svc-list {
    background: var(--side);
    border: 1px solid var(--line);
    border-radius: 18px;
    overflow: hidden;
}
.svc-list-row {
    display: grid;
    grid-template-columns: 60px 1fr 100px 110px 110px 130px 110px;
    gap: 14px;
    align-items: center;
    padding: 14px 22px;
    border-bottom: 1px solid var(--line);
}
.svc-list-row:last-child { border-bottom: 0; }
.svc-list-row:hover { background: var(--side2); }
.svc-list-row.head {
    background: var(--side2);
    font-size: 11px; font-weight: 800;
    color: var(--inkDim);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.svc-list-row .pic {
    width: 38px; height: 38px;
    border-radius: 11px;
    display: grid; place-items: center;
    color: #fff;
    font-size: 18px;
}
.svc-list-row .pic.ig { background: linear-gradient(135deg, #f09433, #dc2743, #bc1888); }
.svc-list-row .pic.tt { background: #000; }
.svc-list-row .pic.yt { background: #ff0000; }
.svc-list-row .pic.fb { background: #1877f2; }
.svc-list-row .pic.x { background: #000; }
.svc-list-row .nm { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.svc-list-row .nm small { display: block; font-size: 11.5px; font-weight: 500; color: var(--inkDim); margin-top: 2px; }
.svc-list-row .id { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--inkDim); font-weight: 600; }
.svc-list-row .pr { font-family: 'Inter', sans-serif; font-weight: 800; font-size: 14px; color: var(--brand); }
.svc-list-row .pr small { display: block; font-size: 10.5px; color: var(--inkDim); font-weight: 500; }
.svc-list-row .num { font-family: 'Inter', sans-serif; font-size: 12.5px; color: var(--ink); font-weight: 600; }
.svc-list-row .actions { display: flex; gap: 6px; }
.svc-list-row .actions button,
.svc-list-row .actions a {
    padding: 7px 12px;
    border-radius: 8px;
    font-size: 11.5px;
    font-weight: 700;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    text-decoration: none;
    display: inline-block;
}
.svc-list-row .actions .ord { background: var(--brand); color: var(--brandText); }
.svc-list-row .actions .det { background: var(--side2); color: var(--ink); border: 1px solid var(--line); }
@media (max-width: 991px) {
    .svc-list-row { grid-template-columns: 60px 1fr 100px; gap: 10px; padding: 12px 16px; }
    .svc-list-row .id, .svc-list-row .num, .svc-list-row .pr small { display: none; }
}

/* ---- Account Tabs (Security, Notifications, Billing) ---- */
.acc-tabs {
    display: flex;
    gap: 4px;
    background: var(--side);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 4px;
    margin-bottom: 14px;
}
.acc-tabs button,
.acc-tabs a {
    flex: 1;
    background: transparent;
    border: 0;
    padding: 11px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: 0.14s;
    text-decoration: none;
}
.acc-tabs button.active,
.acc-tabs a.active {
    background: linear-gradient(95deg, #ffc107, #ffce3a);
    color: #0c151b;
    box-shadow: 0 4px 10px rgba(255, 193, 7, 0.3);
}

.acc-notif-row {
    display: flex; gap: 14px;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
}
.acc-notif-row:last-child { border-bottom: 0; }
.acc-notif-row .ic {
    width: 38px; height: 38px;
    border-radius: 11px;
    display: grid; place-items: center;
    font-size: 18px;
    flex-shrink: 0;
}
.acc-notif-row .body { flex: 1; min-width: 0; }
.acc-notif-row .body b { display: block; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.acc-notif-row .body span { display: block; font-size: 11.5px; color: var(--inkDim); margin-top: 2px; }
.acc-notif-row .toggle {
    width: 46px; height: 26px;
    background: #10b981;
    border-radius: 99px;
    position: relative;
    cursor: pointer;
}
.acc-notif-row .toggle::after {
    content: '';
    position: absolute;
    top: 2px; right: 2px;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: #fff;
}
.acc-notif-row .toggle.off { background: var(--line, #1f2937); }
.acc-notif-row .toggle.off::after { right: auto; left: 2px; }

.acc-billing-card {
    background: linear-gradient(135deg, #0c151b, #1a2532);
    color: #fff;
    border-radius: 20px;
    padding: 24px;
    position: relative;
    overflow: hidden;
}
.acc-billing-card::before {
    content: '';
    position: absolute;
    right: -50px; top: -50px;
    width: 200px; height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 193, 7, 0.2), transparent 60%);
}
.acc-billing-card .l {
    font-size: 11px;
    color: #8b98b8;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
}
.acc-billing-card h3 {
    margin: 5px 0 18px;
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: 28px;
    color: #ffc107;
    letter-spacing: -0.02em;
}
.acc-billing-card .row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 13px;
}
.acc-billing-card .row span { color: #c5cdd6; }
.acc-billing-card .row b { color: #fff; font-weight: 700; }

.acc-bill-row {
    display: grid;
    grid-template-columns: 1fr 100px 100px 100px 80px;
    gap: 14px;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
    font-size: 13px;
}
.acc-bill-row:last-child { border-bottom: 0; }
.acc-bill-row .id { font-family: 'JetBrains Mono', monospace; color: var(--inkDim); }
.acc-bill-row .amt { font-family: 'Inter', sans-serif; font-weight: 700; color: var(--ink); }
.acc-bill-row .dl { color: var(--brand); font-weight: 700; cursor: pointer; }
@media (max-width: 640px) {
    .acc-bill-row { grid-template-columns: 1fr 80px 80px; }
    .acc-bill-row .id { display: none; }
}

/* ---- Affiliates Tabs (Network, History, Marketing Kit) ---- */
.aff-tabs {
    display: flex;
    gap: 6px;
    background: var(--side);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 4px;
    margin-bottom: 14px;
}
.aff-tabs button,
.aff-tabs a {
    flex: 1;
    background: transparent;
    border: 0;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
}
.aff-tabs button.active,
.aff-tabs a.active {
    background: #0c151b;
    color: #ffc107;
}

.aff-network-row {
    display: grid;
    grid-template-columns: 50px 1fr 110px 110px 110px 100px;
    gap: 14px;
    align-items: center;
    padding: 14px 22px;
    border-bottom: 1px solid var(--line);
}
.aff-network-row:last-child { border-bottom: 0; }
.aff-network-row .av {
    width: 42px; height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffc107, #ff9800);
    color: #0c151b;
    display: grid; place-items: center;
    font-weight: 800;
    font-family: 'Inter', sans-serif;
    font-size: 17px;
}
.aff-network-row .nm { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.aff-network-row .nm small { display: block; font-size: 11px; font-weight: 500; color: var(--inkDim); margin-top: 2px; }
.aff-network-row .tier {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px;
    border-radius: 99px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.06em;
}
.aff-network-row .tier.gold { background: rgba(255, 193, 7, 0.18); color: #ca8a04; }
.aff-network-row .tier.silver { background: rgba(107, 114, 128, 0.15); color: #6b7280; }
.aff-network-row .tier.bronze { background: rgba(180, 83, 9, 0.15); color: #92400e; }
.aff-network-row .tier.dia { background: linear-gradient(135deg, #3D8AFF, #A12AFF); color: #fff; }
.aff-network-row .v { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 13.5px; color: var(--ink); }
.aff-network-row .v.green { color: #10b981; }
@media (max-width: 768px) {
    .aff-network-row { grid-template-columns: 50px 1fr 90px; gap: 10px; padding: 12px 16px; }
    .aff-network-row .v:nth-of-type(2),
    .aff-network-row .v:nth-of-type(3) { display: none; }
}

/* ---- Affiliates Marketing Kit ---- */
.aff-kit {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    padding: 18px;
}
.aff-kit-card {
    background: var(--side2);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    transition: 0.18s;
}
.aff-kit-card:hover {
    transform: translateY(-3px);
    border-color: var(--brand);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.08);
}
.aff-kit-card .thumb {
    aspect-ratio: 16 / 9;
    display: grid;
    place-items: center;
    font-size: 50px;
    color: #fff;
    position: relative;
}
.aff-kit-card .thumb.b1 { background: linear-gradient(135deg, #ffc107, #ff9800); color: #0c151b; }
.aff-kit-card .thumb.b2 { background: linear-gradient(135deg, #0c151b, #1a2532); }
.aff-kit-card .thumb.b3 { background: linear-gradient(135deg, #3D8AFF, #A12AFF); }
.aff-kit-card .thumb.b4 { background: linear-gradient(135deg, #10b981, #059669); }
.aff-kit-card .thumb.b5 { background: linear-gradient(135deg, #ff5e6e, #ff2828); }
.aff-kit-card .thumb.b6 { background: linear-gradient(135deg, #A12AFF, #7e1edd); }
.aff-kit-card .thumb .size {
    position: absolute;
    bottom: 8px; right: 8px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 10.5px;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
}
.aff-kit-card .body { padding: 14px 16px; }
.aff-kit-card .body b { display: block; font-size: 13.5px; font-weight: 800; color: var(--ink); margin-bottom: 4px; }
.aff-kit-card .body span { display: block; font-size: 11.5px; color: var(--inkDim); }
.aff-kit-card .body .dl {
    margin-top: 10px;
    padding: 8px 12px;
    border-radius: 9px;
    background: var(--brand);
    color: var(--brandText);
    font-size: 11.5px;
    font-weight: 800;
    border: 0;
    cursor: pointer;
    width: 100%;
    font-family: inherit;
}
@media (max-width: 991px) { .aff-kit { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .aff-kit { grid-template-columns: 1fr; } }

/* ============================================================
   USER FEEDBACK FIXES — 2026-05-28
   ============================================================ */

/* ---- Fix: Daily check-in modal size (was being squished narrow) ---- */
.modal-dialog.ci-dialog,
.ci-dialog {
    max-width: 540px !important;
    width: 100% !important;
    margin: 1.75rem auto;
}
@media (max-width: 575px) {
    .modal-dialog.ci-dialog,
    .ci-dialog { max-width: calc(100vw - 1rem) !important; margin: 0.5rem auto; }
}
.ci-modal { width: 100%; }
.ci-grid {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    width: 100% !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    justify-content: stretch !important;
    margin: 0 0 18px !important;
}

/* ---- Fix: card-h-text + similar muted subtitles too faded (was 0.35 opacity) ---- */
.card-h-text {
    color: rgba(255, 255, 255, 0.65) !important;
    font-weight: 500;
}
html.light .card-h-text { color: rgba(60, 66, 73, 0.7) !important; }

/* ---- Fix: file input visibility on dark mode (tickets, viewticket) ---- */
input[type="file"] {
    color: var(--ink);
    background: var(--side2);
    border: 1.5px dashed var(--line);
    border-radius: 12px;
    padding: 14px 16px;
    cursor: pointer;
    transition: 0.15s;
    font-family: inherit;
    font-size: 13px;
    width: 100%;
    box-sizing: border-box;
}
input[type="file"]:hover {
    border-color: var(--brand);
    background: var(--side);
}
input[type="file"]:focus {
    outline: none;
    border-color: var(--brand);
}
input[type="file"]::-webkit-file-upload-button,
input[type="file"]::file-selector-button {
    background: linear-gradient(135deg, #ffc107, #ffce3a);
    color: #0c151b;
    border: 0;
    border-radius: 8px;
    padding: 7px 14px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    margin-right: 12px;
    font-family: inherit;
}
input[type="file"]::-webkit-file-upload-button:hover,
input[type="file"]::file-selector-button:hover {
    background: linear-gradient(135deg, #ffce3a, #ffc107);
}
html.light input[type="file"] {
    color: #0c151b;
    background: #f7f8f9;
    border-color: #e5e7eb;
}
/* Keep custom .tickets-uploader hidden file input, but if exposed elsewhere, style it */
.tickets-uploader input[type="file"][style*="display: block"],
.tickets-uploader input[type="file"]:not([hidden]):not(.d-none) { display: block; }

/* ---- Fix: child_panel_order.twig form polish (Reseller signup) ---- */
.l2v2-page-child-panel-order .form-control,
.l2v2-page-child-panel-order .form-select,
.l2v2-content .logbox-content .form-control,
.l2v2-content .logbox-content .form-select {
    background: var(--side2);
    border: 1.5px solid var(--line);
    border-radius: 11px;
    color: var(--ink);
    padding: 12px 16px;
    font-size: 14px;
    transition: 0.15s;
}
.l2v2-page-child-panel-order .form-control:focus,
.l2v2-page-child-panel-order .form-select:focus,
.l2v2-content .logbox-content .form-control:focus,
.l2v2-content .logbox-content .form-select:focus {
    border-color: var(--brand);
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.15);
}
.l2v2-page-child-panel-order .control-label,
.l2v2-content .logbox-content .control-label,
.l2v2-content .logbox-content label {
    color: var(--ink);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 6px;
    display: block;
}
.l2v2-page-child-panel-order .info-panel-yellow,
.l2v2-content .logbox-content .info-panel-yellow {
    background: linear-gradient(135deg, #ffc107, #ffce3a);
    color: #0c151b;
    padding: 18px 22px;
    border-radius: 14px;
    margin-bottom: 18px;
    font-size: 13.5px;
    line-height: 1.6;
    box-shadow: 0 8px 20px rgba(255, 193, 7, 0.18);
}
.l2v2-page-child-panel-order .info-panel-yellow ul,
.l2v2-content .logbox-content .info-panel-yellow ul {
    margin: 8px 0 0;
    padding-left: 20px;
    font-weight: 600;
}
.l2v2-page-child-panel-order .info-panel-yellow li,
.l2v2-content .logbox-content .info-panel-yellow li {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12.5px;
    margin-bottom: 2px;
}
.l2v2-page-child-panel-order .form-group,
.l2v2-content .logbox-content .form-group { margin-bottom: 16px; }
.l2v2-page-child-panel-order .btn-primary,
.l2v2-content .logbox-content button[type="submit"].btn-primary,
.l2v2-content .logbox-content .btn-primary {
    background: linear-gradient(135deg, #ffc107, #ffce3a) !important;
    border: 0 !important;
    color: #0c151b !important;
    padding: 12px 28px;
    border-radius: 12px;
    font-weight: 800;
    font-size: 14px;
    box-shadow: 0 8px 20px rgba(255, 193, 7, 0.3);
    transition: 0.15s;
}
.l2v2-page-child-panel-order .btn-primary:hover,
.l2v2-content .logbox-content .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(255, 193, 7, 0.4);
}
.l2v2-content .logbox-content {
    background: var(--side);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 28px;
    margin-bottom: 18px;
}

/* ---- Fix: viewticket "เลือกไฟล์" label visibility ---- */
.tk-conv .tk-input input[type="file"],
.viewticket input[type="file"],
.ticket-reply-form input[type="file"] {
    background: var(--side2);
    border: 1.5px dashed var(--line);
    color: var(--ink);
}







/* ==========================================================================
 * LIKESTER 2026 — MODAL FAMILY (lkm-* / vm-*)  [APPEND-ONLY SECTION]
 * Added: 2026-05-31 — paste-ready, token-driven, light/dark aware.
 *
 * STRATEGY (read before editing):
 * The existing .modal-wrapper overlay already owns visibility:
 *   .modal-wrapper { display:none } / .modal-wrapper.active { display:flex }
 * and modalOpen(id) (script.js L135) does exactly:
 *   t = getElementById(id); a = t.querySelector('.modal-box');
 *   t.classList.add('active'); body.overflow='hidden';
 *   click-outside .modal-box closes; .m-close closes.
 * Therefore we DO NOT redefine overlay show/hide. We only RESKIN the
 * .modal-box (via an .lkm / .vm skin class placed ON the .modal-box element)
 * so modalOpen keeps finding .modal-box + .m-close unchanged.
 *
 * The legacy .modal-box rules (style.css L9435+) hard-pin width/height/position
 * to a bottom-sheet drawer; we must override those when the skin class is
 * present. All overrides below are guarded by .lkm / .vm so untouched modals
 * keep their old look. Light/dark comes from :root (dark default) and
 * html.light overrides already defined at style.css L78-103.
 * ========================================================================== */

/* ---- Shared shell: reskin the .modal-box when it carries .lkm ------------ */
.modal-box.lkm,
.modal-box.vm {
    /* neutralise legacy bottom-sheet pinning from style.css L9435/9452/9460 */
    position: relative;
    right: auto; bottom: auto; top: auto; left: auto;
    transform: none;
    margin: auto;
    height: auto;
    max-height: calc(100vh - 40px);
    width: 100%;
    max-width: 540px;
    border-radius: 22px;
    background: var(--side, #fff);
    color: var(--ink, #0c151b);
    text-align: left;
    white-space: normal;
    overflow: hidden auto;
    box-shadow: 0 40px 80px rgba(0,0,0,.4);
    font-family: var(--font-th), var(--font-en);
    animation: lkmIn .25s ease-out;
}
@media (min-width: 992px) {
    .modal-box.lkm, .modal-box.vm { position: relative; transform: none; top: auto; left: auto; }
}
@media (max-width: 991.98px) {
    .modal-box.lkm, .modal-box.vm { max-width: 100%; height: auto; max-height: 88vh; border-radius: 20px; }
}
@keyframes lkmIn { from { opacity:0; transform: translateY(20px) scale(.96); } to { opacity:1; transform: translateY(0) scale(1); } }

/* ---- Header / body / footer (lkm) ---------------------------------------- */
.lkm .lkm-h, .lkm .h {
    display: flex; align-items: center; gap: 13px;
    padding: 22px 26px;
    background: transparent;
    border-bottom: 1px solid var(--line, #eee);
    position: relative;
}
.lkm .lkm-h .ic, .lkm .h .ic {
    width: 46px; height: 46px; border-radius: 13px;
    display: grid; place-items: center; color: #fff; font-size: 22px; flex-shrink: 0;
}
.lkm .lkm-h h2, .lkm .h h2 { margin: 0; font-size: 18px; font-weight: 800; color: var(--ink, #0c151b); letter-spacing: -0.01em; }
.lkm .lkm-h p, .lkm .h p { margin: 2px 0 0; font-size: 12.5px; color: var(--inkDim, #6b7280); font-weight: 600; }

/* close button — the .x visual; pair it with the modalOpen .m-close hook */
.lkm .x, .vm .x {
    margin-left: auto;
    width: 34px; height: 34px; border-radius: 10px;
    background: var(--side2, #f5f6f8); border: 1px solid var(--line, #eee);
    color: var(--ink, #0c151b); cursor: pointer;
    display: grid; place-items: center; font-size: 17px; flex-shrink: 0; padding: 0;
}
.lkm .x:hover, .vm .x:hover { background: var(--line, #eee); }

.lkm .lkm-b, .lkm .b { padding: 22px 26px; }
.lkm .lkm-f, .lkm-f {
    display: flex; gap: 10px;
    padding: 16px 26px 22px;
    border-top: 1px solid var(--line, #eee);
}
.lkm-f button {
    flex: 1; padding: 13px; border-radius: 13px;
    font-weight: 800; font-size: 13.5px; border: 0; cursor: pointer;
    font-family: inherit; display: flex; align-items: center; justify-content: center; gap: 8px;
    transition: .14s;
}
.lkm-f .primary { background: linear-gradient(95deg,#ffc107,#ffd24a); color: #0c151b; box-shadow: 0 8px 20px rgba(255,193,7,.3); }
.lkm-f .primary:hover { filter: brightness(1.03); }
.lkm-f .ghost { background: var(--side2, #f5f6f8); color: var(--ink, #0c151b); border: 1px solid var(--line, #eee); }
.lkm-f .ghost:hover { border-color: var(--brand, #ffc107); }
.lkm-f .danger { background: linear-gradient(95deg,#ef4444,#dc2626); color: #fff; box-shadow: 0 8px 20px rgba(239,68,68,.28); }
.lkm-f .danger:hover { filter: brightness(1.04); }

/* ---- V10 shared shell (vm) — adapted to .modal-box (no .vm-bd needed) ----- */
/* NOTE: original v10-modals.jsx wrapped each modal in its own fixed .vm-bd
 * backdrop. Under modalOpen the .modal-wrapper IS the backdrop, so we drop
 * .vm-bd and apply the .vm skin straight onto .modal-box. */
.vm .vm-yellow-h {
    background: linear-gradient(120deg,#ffc107,#ffd24a);
    padding: 24px 26px; position: relative; overflow: hidden;
}
.vm .vm-yellow-h::before { content:''; position:absolute; right:-40px; top:-50px; width:170px; height:170px; border-radius:50%; background:rgba(255,255,255,.22); }
.vm .vm-yellow-h::after  { content:''; position:absolute; left:30px; bottom:-50px; width:120px; height:120px; border-radius:50%; background:rgba(12,21,27,.05); }
.vm .vm-yellow-h .ttl { position:relative; z-index:1; display:flex; align-items:center; gap:13px; }
.vm .vm-yellow-h .ttl .ic { width:46px; height:46px; border-radius:13px; background:#0c151b; color:#ffc107; display:grid; place-items:center; font-size:22px; flex-shrink:0; }
.vm .vm-yellow-h .ttl h2 { margin:0; font-size:19px; font-weight:800; color:#0c151b; letter-spacing:-0.01em; }
.vm .vm-yellow-h .ttl p { margin:1px 0 0; font-size:12.5px; color:rgba(12,21,27,.65); font-weight:600; }
.vm .vm-yellow-h .x { position:absolute; top:20px; right:20px; z-index:2; background:rgba(12,21,27,.12); border:0; color:#0c151b; }
.vm .vm-yellow-h .x:hover { background:rgba(12,21,27,.2); }
.vm .vm-b { padding: 22px 26px; }
.vm .vm-f { padding: 0 26px 22px; display: flex; gap: 10px; border: 0; }
.vm .vm-f button { flex:1; padding:13px; border-radius:13px; font-weight:800; font-size:13.5px; border:0; cursor:pointer; font-family:inherit; display:flex; align-items:center; justify-content:center; gap:8px; }
.vm .vm-f .primary { background:linear-gradient(95deg,#ffc107,#ffd24a); color:#0c151b; box-shadow:0 8px 20px rgba(255,193,7,.3); }
.vm .vm-f .ghost { background:var(--side2,#f5f6f8); color:var(--ink,#0c151b); border:1px solid var(--line,#eee); }

/* ---- DailyCheckinModal (lkm) · page:layout · net-new ---- */
.lkm-checkin { max-width: 540px; } .lkm-checkin .lkm-checkin-hero { background: linear-gradient(135deg,#ffc107 0%, #ffce3a 100%); padding: 30px 26px 26px; position:relative; overflow:hidden; text-align:center; } .lkm-checkin .lkm-checkin-hero::before { content:''; position:absolute; right:-40px; top:-50px; width:180px; height:180px; border-radius:50%; background: rgba(255,255,255,.2); pointer-events:none; } .lkm-checkin .lkm-checkin-hero::after { content:''; position:absolute; left:-30px; bottom:-40px; width:140px; height:140px; border-radius:50%; background: rgba(255,255,255,.15); pointer-events:none; } .lkm-checkin .lkm-checkin-hero .gift { width:72px; height:72px; border-radius:50%; background:#0c151b; color:#ffc107; display:grid; place-items:center; font-size:36px; margin: 0 auto 14px; box-shadow: 0 10px 24px rgba(0,0,0,.2); position:relative; z-index:1; } .lkm-checkin .lkm-checkin-hero h2 { margin:0; font-size: 24px; font-weight:900; color:#0c151b; letter-spacing:-0.02em; position:relative; z-index:1; } .lkm-checkin .lkm-checkin-hero p { margin: 4px 0 0; font-size: 13px; color:#0c151b; opacity: .78; position:relative; z-index:1; } .lkm-checkin .lkm-checkin-days { padding: 22px 26px 0; display:grid; grid-template-columns: repeat(7, 1fr); gap: 8px; } .lkm-checkin .lkm-day { background: var(--side2,#fafafa); border:1.5px solid var(--line,#eee); border-radius: 14px; padding: 12px 6px; text-align:center; cursor:pointer; transition:.14s; } .lkm-checkin .lkm-day.done { background: linear-gradient(135deg,#ffc107,#ffce3a); border-color: #ffc107; } .lkm-checkin .lkm-day.today { background: #0c151b; border-color: #0c151b; box-shadow: 0 8px 18px rgba(12,21,27,.3); transform: scale(1.05); } .lkm-checkin .lkm-day .d { font-size: 10px; font-weight:700; color: var(--inkDim, #6b7280); margin-bottom: 4px; text-transform:uppercase; letter-spacing:.06em; } .lkm-checkin .lkm-day .ic { font-size: 22px; color: var(--ink,#0c151b); margin-bottom: 4px; } .lkm-checkin .lkm-day.done .ic { color: #0c151b; } .lkm-checkin .lkm-day.today .ic { color: #ffc107; } .lkm-checkin .lkm-day .rw { font-family:var(--font-en); font-weight: 800; font-size: 12px; color: var(--ink,#0c151b); } .lkm-checkin .lkm-day.today .rw, .lkm-checkin .lkm-day.today .d { color: #ffc107; } .lkm-checkin .lkm-day.todo .ic { color: var(--inkDim, #c5cdd6); } .lkm-checkin .lkm-checkin-claim { padding: 18px 26px 4px; text-align:center; } .lkm-checkin .lkm-checkin-claim .lbl { font-size: 12px; color: var(--inkDim,#6b7280); } .lkm-checkin .lkm-checkin-claim .reward { font-family:var(--font-en); font-weight: 900; font-size: 38px; color:var(--ink,#0c151b); letter-spacing:-0.02em; } .lkm-checkin .lkm-checkin-claim .reward em { font-style:normal; color: var(--brand,#ffc107); } .lkm-checkin .lkm-checkin-claim .desc { font-size: 12.5px; color: var(--inkDim,#6b7280); margin-top: 4px; }

/* ---- QRPaymentModal (lkm) · page:addfunds · net-new ---- */
.lkm-qr.modal-box { background: linear-gradient(135deg, #0c151b 0%, #1a2532 100%); color:#fff; max-width: 440px; } .lkm-qr .h { background: transparent; border-bottom: 1px solid rgba(255,255,255,.1); padding: 22px 26px; } .lkm-qr .h h2 { color:#fff; } .lkm-qr .h p { color: rgba(255,255,255,.6); } .lkm-qr .x { background: rgba(255,255,255,.08); color:#fff; border-color: rgba(255,255,255,.15); } .lkm-qr .x:hover { background: rgba(255,255,255,.15); } .lkm-qr .b { padding: 28px; text-align:center; } .lkm-qr .qr-box { background:#fff; padding:22px; border-radius: 18px; display:inline-block; box-shadow: 0 18px 36px rgba(0,0,0,.3); } .lkm-qr .qr-code { width: 220px; height: 220px; background-color: #fff; border-radius: 8px; position:relative; background-image: radial-gradient(circle at 16% 16%, #000 12px, transparent 12px), radial-gradient(circle at 84% 16%, #000 12px, transparent 12px), radial-gradient(circle at 16% 84%, #000 12px, transparent 12px), radial-gradient(rgba(0,0,0,1) 2px, transparent 2.5px); background-size: auto, auto, auto, 10px 10px; background-repeat: no-repeat, no-repeat, no-repeat, repeat; background-position: 0 0, 100% 0, 0 100%, 0 0; } .lkm-qr .qr-code::before { content:''; position:absolute; left: calc(50% - 30px); top: calc(50% - 30px); width: 60px; height: 60px; background:#fff; border-radius: 10px; display:grid; place-items:center; } .lkm-qr .qr-code::after { content:'฿'; position:absolute; left: calc(50% - 22px); top: calc(50% - 22px); width: 44px; height: 44px; background: #ffc107; color: #0c151b; border-radius: 8px; display:grid; place-items:center; font-family:var(--font-en); font-weight:900; font-size: 24px; z-index:1; } .lkm-qr .amt { font-family:var(--font-en); font-weight: 900; font-size: 38px; letter-spacing: -0.02em; color: #ffc107; margin-top:18px; } .lkm-qr .amt small { font-size: 14px; color: #c5cdd6; font-weight: 500; } .lkm-qr .ref { background: rgba(255,255,255,.06); border:1px dashed rgba(255,255,255,.18); padding: 10px 16px; border-radius: 10px; font-size: 12.5px; color: #c5cdd6; margin: 14px 0; font-family:var(--font-en),monospace; } .lkm-qr .ref b { color: #ffc107; } .lkm-qr .timer { display:inline-flex; align-items:center; gap: 8px; background: rgba(239,68,68,.15); border:1px solid rgba(239,68,68,.3); color: #ff6b6b; padding: 6px 14px; border-radius: 999px; font-size: 12px; font-weight: 600; margin-top: 6px; } .lkm-qr .lkm-f { border-top: 1px solid rgba(255,255,255,.1); } .lkm-qr .lkm-f .ghost { background: rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.15); }

/* ---- OrderDetailModal (lkm) · page:orders · net-new ---- */
.lkm-order { max-width: 600px; } .lkm-order .summary { display:grid; grid-template-columns: 1fr 1fr; gap: 12px; } .lkm-order .item { background: var(--side2,#fafafa); border:1px solid var(--line,#eee); border-radius:12px; padding: 12px 14px; } .lkm-order .item .l { font-size:11px; color: var(--inkDim,#6b7280); font-weight:600; letter-spacing:.06em; text-transform:uppercase; } .lkm-order .item .v { font-family:var(--font-en); font-weight:800; font-size:15px; color: var(--ink,#0c151b); margin-top:3px; } .lkm-order .progress-wrap { padding: 14px; background: var(--side2,#fafafa); border-radius:12px; margin-top:12px; } .lkm-order .progress-wrap .top { display:flex; justify-content:space-between; align-items:center; margin-bottom: 8px; font-size:12.5px; } .lkm-order .progress-wrap .top b { font-family:var(--font-en); font-weight:800; color:#10b981; } .lkm-order .progress-bar { height:8px; background: var(--line,#eee); border-radius:99px; overflow:hidden; } .lkm-order .progress-bar .b { height:100%; background: linear-gradient(90deg,#ffc107,#10b981); border-radius:99px; } .lkm-order .timeline { display:flex; flex-direction:column; gap: 12px; margin-top:14px; padding-top:14px; border-top:1px solid var(--line,#eee); } .lkm-order .tl { display:flex; gap: 12px; align-items:flex-start; } .lkm-order .tl .dot { width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font-size:12px; flex-shrink:0; } .lkm-order .tl .dot.done { background:#10b981; color:#fff; } .lkm-order .tl .dot.cur { background:#ffc107; color:#0c151b; } .lkm-order .tl .dot.todo { background: var(--line,#eee); color: var(--inkDim,#6b7280); } .lkm-order .tl .body b { display:block; font-size: 13px; font-weight:700; color: var(--ink,#0c151b); } .lkm-order .tl .body span { display:block; font-size: 11.5px; color: var(--inkDim,#6b7280); margin-top:1px; }

/* ---- SlipUploadModal (lkm) · page:addfunds · net-new ---- */
.lkm .lkm-slip-area { background: var(--side2,#fafafa); border: 2px dashed var(--line2,#d9dfe6); border-radius: 16px; padding: 40px 20px; text-align:center; cursor:pointer; transition:.18s; } .lkm .lkm-slip-area:hover { border-color: var(--brand,#ffc107); background: rgba(255,193,7,.05); } .lkm .lkm-slip-area i { font-size: 44px; color: var(--brand,#ffc107); display:block; margin-bottom: 10px; } .lkm .lkm-slip-area .t { font-size: 14px; font-weight: 700; color: var(--ink,#0c151b); } .lkm .lkm-slip-area .s { font-size: 12px; color: var(--inkDim,#6b7280); margin-top: 4px; } .lkm .lkm-slip-preview { background:var(--side,#fff); border:1px solid var(--line,#eee); border-radius:14px; padding: 16px; margin-top:14px; display:flex; align-items:center; gap:14px; } .lkm .lkm-slip-preview .pic { width: 72px; height:72px; border-radius: 12px; background: linear-gradient(135deg,#10b981,#0a7960); display:grid; place-items:center; color:#fff; font-size:32px; flex-shrink:0; } .lkm .lkm-slip-preview .meta { flex:1; min-width:0; } .lkm .lkm-slip-preview .meta b { display:block; font-size:13.5px; font-weight:700; color: var(--ink,#0c151b); } .lkm .lkm-slip-preview .meta span { display:block; font-size:11.5px; color: var(--inkDim,#6b7280); margin-top:1px; } .lkm .lkm-slip-preview .check { color:#10b981; font-size:24px; }

/* ---- ServiceDetailModal (lkm) · page:services · reskin-existing ---- */
.lkm-svc { max-width: 580px; } .lkm-svc .lkm-h .pic { width:74px; height:74px; border-radius:18px; display:grid; place-items:center; color:#fff; font-size:34px; flex-shrink:0; } .lkm-svc .lkm-svc-spec { display:grid; grid-template-columns: repeat(2,1fr); gap: 10px; margin-top: 14px; } .lkm-svc .lkm-svc-spec .it { background: var(--side2,#fafafa); border:1px solid var(--line,#eee); border-radius:12px; padding: 12px; display:flex; gap:10px; align-items:center; } .lkm-svc .lkm-svc-spec .it .ic { width:34px; height:34px; border-radius:9px; background:var(--side,#fff); border:1px solid var(--line,#eee); display:grid; place-items:center; color: var(--brand,#ffc107); font-size:16px; flex-shrink:0; } .lkm-svc .lkm-svc-spec .it b { display:block; font-size:13px; font-weight:800; color: var(--ink,#0c151b); } .lkm-svc .lkm-svc-spec .it span { display:block; font-size:11px; color: var(--inkDim,#6b7280); margin-top:1px; }

/* ---- WithdrawModal (lkm) · page:affiliates · net-new ---- */
.lkm .lkm-wd-bal { background: linear-gradient(135deg,#10b981,#059669); color:#fff; padding: 20px 22px; border-radius: 14px; margin-bottom: 14px; } .lkm .lkm-wd-bal .l { font-size:11px; opacity:.85; font-weight:700; letter-spacing:.06em; text-transform:uppercase; } .lkm .lkm-wd-bal .v { font-family:var(--font-en); font-weight: 900; font-size: 34px; letter-spacing:-0.02em; line-height: 1; margin-top: 6px; }

/* ---- ToastStack (lkm) · page:layout · net-new ---- */
.lkm-toast-row { position: fixed; top: 20px; right: 20px; display:flex; flex-direction:column; gap: 10px; z-index: 9999; } .lkm-toast { background: var(--side,#fff); border:1px solid var(--line,#eee); border-left: 4px solid; border-radius: 12px; padding: 14px 16px 14px 14px; display:flex; gap:12px; align-items:flex-start; min-width: 320px; max-width: 420px; box-shadow: 0 14px 28px rgba(0,0,0,.12); animation: lkmToast .25s ease-out; } @keyframes lkmToast { from { opacity:0; transform: translateX(20px); } to { opacity:1; transform: translateX(0); } } .lkm-toast.success { border-left-color:#10b981; } .lkm-toast.error { border-left-color:#ef4444; } .lkm-toast.warn { border-left-color:#ffc107; } .lkm-toast.info { border-left-color:#2A62FF; } .lkm-toast .ic { width:32px; height:32px; border-radius:9px; display:grid; place-items:center; font-size:16px; flex-shrink:0; } .lkm-toast.success .ic { background: rgba(16,185,129,.15); color:#10b981; } .lkm-toast.error .ic { background: rgba(239,68,68,.15); color:#ef4444; } .lkm-toast.warn .ic { background: rgba(255,193,7,.18); color:#ca8a04; } .lkm-toast.info .ic { background: rgba(42,98,255,.15); color:#2A62FF; } .lkm-toast .body { flex:1; } .lkm-toast .body b { display:block; font-size:13.5px; font-weight:800; color: var(--ink,#0c151b); } .lkm-toast .body p { margin: 2px 0 0; font-size: 12px; color: var(--inkDim,#6b7280); line-height: 1.5; } .lkm-toast .x { background:transparent; border:0; cursor:pointer; color: var(--inkDim,#6b7280); font-size: 16px; padding: 2px; margin:0; width:auto; height:auto; }

/* ---- MassOrderResultModal (lkm) · page:massorder · net-new ---- */
.lkm .lkm-mass-stat { display:grid; grid-template-columns: repeat(3,1fr); gap:10px; } .lkm .lkm-mass-stat .s { background: var(--side2,#fafafa); border:1px solid var(--line,#eee); border-radius:14px; padding:16px; text-align:center; } .lkm .lkm-mass-stat .s .v { font-family:var(--font-en); font-weight:900; font-size: 28px; letter-spacing:-0.02em; line-height:1; } .lkm .lkm-mass-stat .s .l { font-size:11px; color: var(--inkDim,#6b7280); margin-top:4px; font-weight:600; } .lkm .lkm-mass-stat .s.ok .v { color:#10b981; } .lkm .lkm-mass-stat .s.fail .v { color:#ef4444; } .lkm .lkm-mass-stat .s.tot .v { color:#ca8a04; } .lkm .lkm-mass-list { margin-top: 14px; max-height: 200px; overflow-y: auto; } .lkm .lkm-mass-row { display:flex; align-items:center; gap: 10px; padding: 10px 12px; background: var(--side2,#fafafa); border:1px solid var(--line,#eee); border-radius:10px; margin-bottom: 6px; font-size:12px; } .lkm .lkm-mass-row .st { width: 22px; height: 22px; border-radius:50%; display:grid; place-items:center; font-size:12px; flex-shrink:0; } .lkm .lkm-mass-row .st.ok { background:#10b981; color:#fff; } .lkm .lkm-mass-row .st.fail { background:#ef4444; color:#fff; } .lkm .lkm-mass-row .id { font-family:var(--font-en),monospace; color: var(--inkDim,#6b7280); } .lkm .lkm-mass-row .body { flex:1; min-width:0; color: var(--ink,#0c151b); } .lkm .lkm-mass-row .err { color:#ef4444; font-size:11px; }

/* ---- CheckinModalV10 (vm) · page:neworder · net-new ---- */
.vm-days { display:grid; grid-template-columns:repeat(7,1fr); gap:8px; } .vm-day { border:1.5px solid var(--line,#eee); border-radius:13px; padding:12px 4px; text-align:center; background:var(--side2,#f5f6f8); } .vm-day.done { background:linear-gradient(135deg,#ffc107,#ffd24a); border-color:#ffc107; } .vm-day.today { background:#0c151b; border-color:#0c151b; transform:scale(1.06); box-shadow:0 8px 18px rgba(12,21,27,.3); } .vm-day .d { font-size:9.5px; font-weight:800; color:var(--inkDim,#6b7280); text-transform:uppercase; letter-spacing:.05em; margin-bottom:5px; } .vm-day .ic { font-size:19px; color:var(--ink,#0c151b); } .vm-day.done .ic { color:#0c151b; } .vm-day.today .ic { color:#ffc107; } .vm-day.todo .ic { color:var(--inkDim,#c5cdd6); } .vm-day .rw { font-family:var(--font-en); font-size:11px; font-weight:800; color:var(--ink,#0c151b); margin-top:4px; } .vm-day.today .rw, .vm-day.today .d { color:#ffc107; } .vm-claim { text-align:center; padding:16px 0 4px; } .vm-claim .l { font-size:12px; color:var(--inkDim,#6b7280); } .vm-claim .v { font-family:var(--font-en); font-size:34px; font-weight:900; color:var(--ink,#0c151b); letter-spacing:-0.02em; } .vm-claim .v em { font-style:normal; color:#ca8a04; } .vm-note { display:flex; gap:9px; align-items:flex-start; margin-top:14px; padding:12px 14px; background:rgba(255,193,7,.1); border:1px dashed rgba(255,193,7,.4); border-radius:11px; font-size:11.5px; color:var(--ink2,#344); line-height:1.55; } .vm-note i { color:#ca8a04; font-size:15px; flex-shrink:0; }

/* ---- MemberInfoModalV10 (vm) · page:neworder · net-new ---- */
.vm-lvl-cards { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:16px; } .vm-lvl { border-radius:14px; padding:16px 18px; border:1px solid var(--line,#eee); background:var(--side2,#f5f6f8); } .vm-lvl.cur { background:linear-gradient(135deg,#0c151b,#1a2532); border-color:transparent; } .vm-lvl .l { font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--inkDim,#6b7280); } .vm-lvl.cur .l { color:#8b98b8; } .vm-lvl .badge { display:inline-flex; align-items:center; gap:6px; margin-top:7px; font-family:var(--font-en); font-weight:900; font-size:22px; letter-spacing:-0.02em; color:var(--ink,#0c151b); } .vm-lvl.cur .badge { color:#ffc107; } .vm-lvl .sub { font-size:11.5px; color:var(--inkDim,#6b7280); margin-top:4px; } .vm-lvl.cur .sub { color:#c5cdd6; } .vm-prog { margin-bottom:16px; } .vm-prog .top { display:flex; justify-content:space-between; font-size:12px; margin-bottom:7px; color:var(--ink,#0c151b); } .vm-prog .top b { font-family:var(--font-en); color:#ca8a04; } .vm-prog .track { height:10px; background:var(--line,#eee); border-radius:99px; overflow:hidden; } .vm-prog .track i { display:block; height:100%; background:linear-gradient(90deg,#ffc107,#ffd24a); border-radius:99px; } .vm-prog .lbls { display:flex; justify-content:space-between; font-size:10.5px; color:var(--inkDim,#6b7280); margin-top:6px; font-family:var(--font-en); font-weight:600; } .vm-bens { display:flex; flex-direction:column; gap:8px; } .vm-ben { display:flex; align-items:center; gap:11px; padding:11px 14px; background:var(--side2,#f5f6f8); border:1px solid var(--line,#eee); border-radius:11px; } .vm-ben .ic { width:32px; height:32px; border-radius:9px; background:rgba(255,193,7,.16); color:#ca8a04; display:grid; place-items:center; font-size:15px; flex-shrink:0; } .vm-ben b { font-size:12.5px; font-weight:700; color:var(--ink,#0c151b); } .vm-ben span { display:block; font-size:11px; color:var(--inkDim,#6b7280); margin-top:1px; } .vm-ben .val { margin-left:auto; font-family:var(--font-en); font-weight:800; font-size:14px; color:var(--ink,#0c151b); }

/* ---- PointsModalV10 (vm) · page:neworder · reskin-existing ---- */
.vm-pts-sum { background:linear-gradient(135deg,#0c151b,#1a2532); border-radius:16px; padding:20px 22px; color:#fff; display:flex; align-items:center; gap:18px; margin-bottom:16px; position:relative; overflow:hidden; } .vm-pts-sum::before { content:''; position:absolute; right:-40px; top:-50px; width:160px; height:160px; border-radius:50%; background:radial-gradient(circle,rgba(255,193,7,.25),transparent 60%); } .vm-pts-sum .b1, .vm-pts-sum .b2, .vm-pts-sum .div, .vm-pts-sum .rate { position:relative; z-index:1; } .vm-pts-sum .b1 .l, .vm-pts-sum .b2 .l { font-size:11px; color:#8b98b8; font-weight:600; } .vm-pts-sum .b1 .v { font-family:var(--font-en); font-size:30px; font-weight:900; letter-spacing:-0.02em; color:#ffc107; line-height:1; margin-top:4px; } .vm-pts-sum .b2 .v { font-family:var(--font-en); font-size:30px; font-weight:900; letter-spacing:-0.02em; line-height:1; margin-top:4px; color:#fff; } .vm-pts-sum .b2 .v small { font-size:14px; color:#8b98b8; } .vm-pts-sum .div { width:1px; align-self:stretch; background:rgba(255,255,255,.12); } .vm-pts-sum .rate { margin-left:auto; text-align:right; } .vm-pts-sum .rate .badge { display:inline-flex; align-items:center; gap:5px; background:rgba(255,193,7,.16); color:#ffc107; padding:5px 12px; border-radius:99px; font-size:11px; font-weight:700; } .vm-pts-sum .rate .r { font-size:11px; color:#8b98b8; margin-top:6px; } .vm-seg { display:flex; gap:6px; background:var(--side2,#f5f6f8); border:1px solid var(--line,#eee); border-radius:12px; padding:4px; margin-bottom:14px; } .vm-seg button { flex:1; background:none; border:0; padding:10px; border-radius:9px; font-size:12.5px; font-weight:700; color:var(--inkDim,#6b7280); cursor:pointer; font-family:inherit; } .vm-seg button.active { background:var(--side,#fff); color:var(--ink,#0c151b); box-shadow:0 2px 6px rgba(0,0,0,.08); } .vm-fld { display:flex; flex-direction:column; gap:6px; margin-bottom:13px; } .vm-fld label { font-size:12px; font-weight:700; color:var(--ink,#0c151b); } .vm-fld input, .vm-fld select { padding:12px 14px; background:var(--side2,#f5f6f8); border:1px solid var(--line,#eee); border-radius:11px; color:var(--ink,#0c151b); font-family:inherit; font-size:13.5px; outline:none; } .vm-fld input:focus, .vm-fld select:focus { border-color:var(--brand,#ffc107); box-shadow:0 0 0 3px rgba(255,193,7,.14); } .vm-conv { display:flex; align-items:center; justify-content:space-between; padding:13px 16px; background:rgba(255,193,7,.1); border:1px dashed rgba(255,193,7,.4); border-radius:12px; margin-bottom:13px; } .vm-conv .l { font-size:12px; color:var(--ink2,#344); } .vm-conv .v { font-family:var(--font-en); font-weight:800; font-size:20px; color:#ca8a04; letter-spacing:-0.02em; } .vm-note { display:flex; gap:9px; align-items:flex-start; margin-top:14px; padding:12px 14px; background:rgba(255,193,7,.1); border:1px dashed rgba(255,193,7,.4); border-radius:11px; font-size:11.5px; color:var(--ink2,#344); line-height:1.55; } .vm-note i { color:#ca8a04; font-size:15px; flex-shrink:0; }

/* === END LIKESTER 2026 MODAL FAMILY (U22) === */


/* ==========================================================================
 * LIKESTER 2026 — U23 PAGE INLINE-STYLE CLEANUP HELPERS  [APPEND-ONLY]
 * Added 2026-05-31. Classes that replace repeated/one-off inline styles on
 * .pg-* pages so markup carries no presentational style="". Token-driven.
 * ========================================================================== */
.l2v2 .l2v2-content .pg-head .ic-big.purple { border-color: var(--ring-purple); color: var(--ring-purple); }
.l2v2 .l2v2-content .pg-head .ic-big.green  { border-color: #10b981; color: #10b981; }
.l2v2 .l2v2-content .pg-head .ic-big.red    { border-color: var(--ring-red); color: var(--ring-red); }
.l2v2 .l2v2-content .pg-head .ic-big.blue   { border-color: var(--ring-blue); color: var(--ring-blue); }
.l2v2 .l2v2-content .pg-tbl-empty { text-align: center; padding: 48px 16px; color: var(--inkDim); }
/* viewticket reply textarea (was inline #0c141b = var(--side2)) */
.sd-textarea-dark { background: var(--side2); height: 100px; border: none; }
/* updates card-grid wrapper padding (was inline) */
.l2v2 .l2v2-content .up-grid-pad { padding: 18px 24px; }
/* === END U23 === */


/* ==========================================================================
 * LIKESTER 2026 — U24 MASS ORDER PAGE (mo-*)  [APPEND-ONLY]
 * Added 2026-06-01. Ported from design pages-2.jsx MassOrderPage. Token-driven.
 * ========================================================================== */
.l2v2 .l2v2-content .mo-wrap { display:grid; grid-template-columns:1.4fr 1fr; gap:18px; align-items:start; }
.l2v2 .l2v2-content .mo-card { background:var(--side); border:1px solid var(--line); border-radius:22px; overflow:hidden; }
.l2v2 .l2v2-content .mo-card .h { background:linear-gradient(95deg,#ffc107,#ffce3a); padding:18px 24px; position:relative; overflow:hidden; }
.l2v2 .l2v2-content .mo-card .h::before { content:''; position:absolute; right:-30px; top:-40px; width:160px; height:160px; border-radius:50%; background:rgba(255,255,255,.18); pointer-events:none; }
.l2v2 .l2v2-content .mo-card .h h3 { margin:0; font-size:17px; font-weight:800; color:#0c151b; position:relative; z-index:1; }
.l2v2 .l2v2-content .mo-card .h p { margin:2px 0 0; font-size:12px; color:rgba(0,0,0,.6); font-weight:500; position:relative; z-index:1; }
.l2v2 .l2v2-content .mo-card .h p code { background:rgba(0,0,0,.08); padding:2px 8px; border-radius:5px; font-family:var(--font-mono),monospace; font-size:11px; }
.l2v2 .l2v2-content .mo-card .h.muted { background:var(--side2); border-bottom:1px solid var(--line); }
.l2v2 .l2v2-content .mo-card .h.muted h3 { color:var(--ink); }
.l2v2 .l2v2-content .mo-card .h.muted p { color:var(--inkDim); }
.l2v2 .l2v2-content .mo-card .b { padding:22px; display:flex; flex-direction:column; gap:16px; }
.l2v2 .l2v2-content .mo-card .b.tight { gap:10px; }
.l2v2 .l2v2-content .mo-textarea { width:100%; padding:16px 18px; background:var(--bg); border:1.5px solid var(--line); border-radius:14px; color:var(--ink); font-family:var(--font-mono),monospace; font-size:13px; line-height:1.7; outline:none; min-height:280px; resize:vertical; }
.l2v2 .l2v2-content .mo-textarea:focus { border-color:var(--brand); box-shadow:0 0 0 3px rgba(255,193,7,.15); }
.l2v2 .l2v2-content .mo-format { background:var(--bg); border-radius:12px; padding:14px 18px; font-family:var(--font-mono),monospace; font-size:12px; color:var(--inkDim); line-height:1.8; border:1px dashed var(--line2); }
.l2v2 .l2v2-content .mo-format b { color:var(--ink); }
.l2v2 .l2v2-content .mo-format .ex { color:var(--brand); font-weight:600; }
.l2v2 .l2v2-content .mo-side { display:flex; flex-direction:column; gap:14px; }
.l2v2 .l2v2-content .mo-side .stat-r { background:var(--side2); border:1px solid var(--line); border-radius:14px; padding:14px 18px; display:flex; justify-content:space-between; align-items:center; }
.l2v2 .l2v2-content .mo-side .stat-r .l { font-size:13px; color:var(--ink2); }
.l2v2 .l2v2-content .mo-side .stat-r .v { font-family:var(--font-en); font-weight:800; font-size:18px; color:var(--ink); }
.l2v2 .l2v2-content .mo-side .stat-r .v.b { color:var(--brand); font-size:22px; }
.l2v2 .l2v2-content .mo-warn-row { display:flex; gap:10px; font-size:12px; color:var(--ink2); }
.l2v2 .l2v2-content .mo-warn-row i { color:var(--brand); font-size:16px; flex-shrink:0; margin-top:1px; }
.l2v2 .l2v2-content .mo-warn-row b { color:var(--ink); display:block; font-size:12.5px; }
.l2v2 .l2v2-content .mo-warn-row span { color:var(--inkDim); }
.l2v2 .l2v2-content .pg-btn-big { width:100%; justify-content:center; background:linear-gradient(95deg,#ffc107,#ffce3a); color:#0c151b; padding:14px 18px; border:0; border-radius:14px; font-weight:800; font-size:14px; display:flex; align-items:center; gap:8px; cursor:pointer; font-family:inherit; box-shadow:0 8px 20px rgba(255,193,7,.3); transition:.14s; }
.l2v2 .l2v2-content .pg-btn-big:hover { filter:brightness(1.03); transform:translateY(-1px); }
@media (max-width:991.98px){ .l2v2 .l2v2-content .mo-wrap { grid-template-columns:1fr; } }
/* === END U24 === */


/* ==========================================================================
 * LIKESTER 2026 — U25 SERVICE-DETAIL MODAL (lkm-svc helpers)  [APPEND-ONLY]
 * Added 2026-06-01. Completes the lkm-svc reskin used by services.twig.
 * ========================================================================== */
.lkm-svc .lkm-h .ic { background: linear-gradient(135deg,#ffc107,#ff9800); color:#0c151b; }
.lkm-svc .lkm-svc-spec .it b i { color: var(--inkDim); font-size:13px; cursor:pointer; margin-left:4px; }
.lkm-svc-desc { font-size:13px; color:var(--ink2); line-height:1.65; margin-top:14px; background:var(--side2); border:1px solid var(--line); border-radius:12px; padding:12px 14px; max-height:170px; overflow:auto; }
.lkm-f a { flex:1; padding:13px; border-radius:13px; font-weight:800; font-size:13.5px; text-decoration:none; display:flex; align-items:center; justify-content:center; gap:8px; transition:.14s; }
.lkm-f a.primary { background:linear-gradient(95deg,#ffc107,#ffd24a); color:#0c151b; box-shadow:0 8px 20px rgba(255,193,7,.3); }
.lkm-f a.primary:hover { filter:brightness(1.03); }
/* === END U25 === */

/* U26 — faq guest top padding (was an inline <style> block in faq.twig; unscoped so it works on the public/guest layout too) */
.appContent.faq-guest-pad { padding-top: 150px; color: #fff; }

/* U27 — account change-email button (was inline font/padding) + tab section show/hide for upcoming acc-tabs */
.acc-email-btn { font-size: 13px; font-weight: 400; padding: 5px 25px; }
.acc-section { display: none; }
.acc-section.active { display: block; }


/* ==========================================================================
 * LIKESTER 2026 — U28 AUTH SHELL (.au / au-*)  [APPEND-ONLY]
 * Full-screen light auth shell ported from design auth.jsx. Net-new classes.
 * Used by signup/resetpassword/setnewpassword/confirm_signup.
 * ========================================================================== */
.au { font-family:'Noto Sans Thai','Inter',sans-serif; color:#0c151b; background:#ffc107; min-height:100%; position:relative; display:flex; flex-direction:column; }
.au * { box-sizing:border-box; }
.au .dots { position:absolute; inset:0; background-image:radial-gradient(rgba(12,21,27,.07) 1.5px,transparent 1.5px); background-size:24px 24px; pointer-events:none; }
.au-hex { position:absolute; width:70px; height:78px; clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); display:grid; place-items:center; color:#fff; font-size:28px; box-shadow:0 16px 30px rgba(0,0,0,.18); animation:auf 5.5s ease-in-out infinite; }
.au-hex.h1 { background:linear-gradient(135deg,#ff5e6e,#ff2828); top:14%; left:12%; }
.au-hex.h2 { background:linear-gradient(135deg,#37e09f,#10b981); bottom:16%; right:14%; width:58px; height:64px; font-size:24px; animation-delay:-2.4s; }
.au-hex.h3 { background:linear-gradient(135deg,#3e9bff,#0258ff); top:60%; left:8%; width:52px; height:58px; font-size:22px; animation-delay:-3.6s; }
@keyframes auf { 0%,100%{transform:translateY(0) rotate(-4deg)} 50%{transform:translateY(-15px) rotate(4deg)} }
.au-nav { display:flex; align-items:center; justify-content:space-between; padding:22px 48px; position:relative; z-index:3; }
.au-nav .logo { display:flex; align-items:center; gap:11px; }
.au-nav .lion { width:44px; height:44px; border-radius:12px; background:linear-gradient(135deg,#ff6b35,#ff9800); display:grid; place-items:center; color:#0c151b; font-weight:900; font-family:'Inter',sans-serif; font-size:23px; box-shadow:0 8px 18px rgba(255,107,53,.3); }
.au-nav .word { font-family:'Inter',sans-serif; font-weight:900; font-size:21px; letter-spacing:.02em; line-height:1; }
.au-nav .word small { display:block; font-size:9px; font-weight:600; letter-spacing:.2em; margin-top:3px; text-transform:uppercase; opacity:.65; }
.au-nav .back { display:inline-flex; align-items:center; gap:7px; background:#0c151b; color:#fff; padding:10px 18px; border-radius:12px; font-size:13px; font-weight:700; text-decoration:none; cursor:pointer; }
.au-main { flex:1; display:grid; place-items:center; padding:20px 48px 56px; position:relative; z-index:3; }
.au-card { background:#fff; border-radius:26px; padding:36px 34px; box-shadow:0 30px 70px rgba(0,0,0,.2),0 6px 16px rgba(0,0,0,.06); width:100%; max-width:440px; }
.au-card.wide { max-width:480px; }
.au-ico { width:60px; height:60px; border-radius:17px; display:grid; place-items:center; font-size:28px; margin:0 auto 18px; }
.au-ico.y { background:linear-gradient(135deg,#ffc107,#ffd24a); color:#0c151b; }
.au-ico.g { background:linear-gradient(135deg,#37e09f,#10b981); color:#fff; }
.au-ico.b { background:linear-gradient(135deg,#3e9bff,#0258ff); color:#fff; }
.au-card h1 { margin:0 0 6px; font-size:25px; font-weight:800; letter-spacing:-0.02em; text-align:center; }
.au-card .lead { margin:0 0 22px; font-size:13.5px; color:#6b7280; text-align:center; line-height:1.55; }
.au-card .lead b { color:#0c151b; }
.au-fld { display:flex; flex-direction:column; gap:7px; margin-bottom:14px; }
.au-fld label { font-size:12.5px; font-weight:700; }
.au-fld .w { position:relative; }
.au-fld .w i { position:absolute; left:15px; top:50%; transform:translateY(-50%); color:#9ca3af; font-size:17px; }
.au-fld input { width:100%; padding:14px 16px 14px 44px; border-radius:14px; border:1.5px solid #e5e7eb; background:#f9fafb; font-family:inherit; font-size:14px; outline:none; transition:.14s; }
.au-fld input.plain { padding-left:16px; }
.au-fld input:focus { border-color:#ffc107; background:#fff; box-shadow:0 0 0 3px rgba(255,193,7,.2); }
.au-row2 { display:grid; grid-template-columns:1fr 1fr; gap:11px; }
.au-submit { width:100%; padding:15px; border-radius:15px; background:#ffc107; color:#0c151b; font-weight:800; font-size:15px; border:0; cursor:pointer; box-shadow:0 10px 22px rgba(255,193,7,.4); display:flex; align-items:center; justify-content:center; gap:8px; font-family:inherit; transition:.16s; }
.au-submit:hover { background:#ffce3a; transform:translateY(-2px); }
.au-ghost { width:100%; padding:13px; border-radius:14px; background:#fff; border:1.5px solid #e5e7eb; color:#0c151b; font-weight:700; font-size:13.5px; cursor:pointer; font-family:inherit; display:flex; align-items:center; justify-content:center; gap:8px; margin-top:10px; }
.au-foot { text-align:center; font-size:12.5px; color:#6b7280; margin:16px 0 0; }
.au-foot a { color:#0c151b; font-weight:800; text-decoration:none; }
.au-meter { display:flex; flex-direction:column; gap:4px; padding:10px 14px; background:#fffaef; border:1px dashed #ffc107; border-radius:11px; margin-bottom:14px; }
.au-meter .lbl { font-size:11.5px; font-weight:700; }
.au-meter .track { height:6px; background:#e5e7eb; border-radius:99px; overflow:hidden; }
.au-meter .track i { display:block; height:100%; background:linear-gradient(90deg,#10b981,#ffc107); border-radius:99px; }
.au-meter .ok { font-size:11px; color:#10b981; font-weight:700; }
.au-terms { display:flex; gap:9px; align-items:flex-start; font-size:12px; color:#344; line-height:1.5; margin-bottom:16px; }
.au-terms a { color:#ca8a04; font-weight:700; text-decoration:none; }
.au-otp { display:flex; gap:10px; justify-content:center; margin:6px 0 18px; }
.au-otp input { width:48px; height:58px; text-align:center; font-family:'Inter',sans-serif; font-size:24px; font-weight:800; border:1.5px solid #e5e7eb; border-radius:13px; background:#f9fafb; outline:none; }
.au-otp input:focus { border-color:#ffc107; background:#fff; box-shadow:0 0 0 3px rgba(255,193,7,.2); }
.au-otp input.filled { border-color:#ffc107; background:#fffaef; }
.au-resend { text-align:center; font-size:12.5px; color:#6b7280; margin-top:14px; }
.au-resend a { color:#0c151b; font-weight:800; text-decoration:none; }
/* === END U28 === */

/* U28b — password show/hide toggle inside .au-fld (setnewpassword) */
.au-fld .w .pw-toggle { position:absolute; right:10px; top:50%; transform:translateY(-50%); background:none; border:0; cursor:pointer; color:#9ca3af; font-size:18px; padding:4px; line-height:0; }
.au-fld .w .pw-toggle:hover { color:#0c151b; }
.au-fld .w .pw-toggle .ri-eye-off-line { display:none; }
.au-fld .w .pw-toggle.active .ri-eye-line { display:none; }
.au-fld .w .pw-toggle.active .ri-eye-off-line { display:inline-block; }
.au-fld .w input.pw { padding-right:44px; }

/* U28c — .au auth shell MOBILE responsive [APPEND-ONLY].
 * .au is a fixed-yellow standalone public page (no dark mode) → tune for small
 * screens only. Fixes: nav/main 48px side-pad too wide, hex deco overlapping the
 * card, otp boxes overflowing 390px. */
@media (max-width: 640px) {
  .au { overflow-x:clip; }
  .au-nav { padding:16px 18px; }
  .au-nav .word { font-size:18px; }
  .au-nav .word small { font-size:8px; }
  .au-nav .lion { width:40px; height:40px; font-size:21px; }
  .au-nav .back { padding:9px 14px; font-size:12px; }
  .au-main { padding:6px 16px 40px; }
  .au-card, .au-card.wide { padding:28px 20px; border-radius:22px; max-width:440px; }
  .au-card h1 { font-size:22px; }
  .au-card .lead { font-size:13px; margin-bottom:18px; }
  .au-ico { width:54px; height:54px; font-size:25px; margin-bottom:15px; }
  .au-hex { width:54px; height:60px; font-size:21px; box-shadow:0 10px 20px rgba(0,0,0,.16); }
  .au-hex.h1 { top:8%; left:-10px; }
  .au-hex.h2 { bottom:7%; right:6px; width:46px; height:51px; font-size:18px; }
  .au-hex.h3 { top:auto; bottom:26%; left:6px; width:42px; height:47px; font-size:17px; }
  .au-otp input { width:42px; height:52px; font-size:21px; }
  .au-otp { gap:7px; }
  .au-row2 { grid-template-columns:1fr; }
}
@media (max-width: 380px) {
  .au-hex { display:none; }
  .au-main { padding:6px 12px 36px; }
}
/* === END U28c === */

/* ==========================================================================
 * LIKESTER 2026 — U29 SERVICES card grid (pg-svc-*) + guest top pad  [APPEND-ONLY]
 * Restyles services.twig service list into a responsive card grid. Preserves
 * all filter/search/favorite JS hooks (.service-item/.category-card/data-*).
 * ========================================================================== */
.appContent.guest-top-pad { padding-top: 150px; color: #fff; }
html.light .appContent.guest-top-pad { color: #3d4249; }
.l2v2 .l2v2-page-services .services-wrapper { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.l2v2 .l2v2-page-services .service-item.pg-svc-card { background: var(--side); border: 1px solid var(--line); border-radius: 16px; padding: 18px; position: relative; transition: .16s; display: flex; flex-direction: column; gap: 12px; height: 100%; }
.l2v2 .l2v2-page-services .service-item.pg-svc-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--brand); }
.l2v2 .l2v2-page-services .pg-svc-card .pg-svc-id { font-family: var(--font-en); font-size: 11px; font-weight: 700; color: var(--inkDim); letter-spacing: .04em; }
.l2v2 .l2v2-page-services .pg-svc-card .pg-svc-name { font-size: 14px; font-weight: 700; color: var(--ink); margin: 0; line-height: 1.45; }
.l2v2 .l2v2-page-services .pg-svc-card .pg-svc-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: auto; }
.l2v2 .l2v2-page-services .pg-svc-card .pg-svc-meta > div { display: flex; flex-direction: column; gap: 3px; text-align: center; }
.l2v2 .l2v2-page-services .pg-svc-card .pg-svc-meta .l { font-size: 10px; color: var(--inkDim); text-transform: uppercase; letter-spacing: .05em; }
.l2v2 .l2v2-page-services .pg-svc-card .pg-svc-meta .v { font-family: var(--font-en); font-weight: 800; font-size: 13px; color: var(--ink); }
.l2v2 .l2v2-page-services .pg-svc-card .pg-svc-avt { font-size: 11px; color: var(--inkDim); display: flex; align-items: center; gap: 5px; }
.l2v2 .l2v2-page-services .pg-svc-card .pg-svc-btn { background: linear-gradient(95deg, #ffc107, #ffd24a); color: #0c151b; border: 0; border-radius: 11px; padding: 10px; font-weight: 800; font-size: 13px; cursor: pointer; width: 100%; }
.l2v2 .l2v2-page-services .pg-svc-card .pg-svc-btn:hover { filter: brightness(1.03); }
.l2v2 .l2v2-page-services .pg-svc-card .pg-svc-fav { position: absolute; top: 14px; right: 14px; font-size: 17px; color: #ffc107; cursor: pointer; z-index: 1; }
/* === END U29 === */

/* ========================================================================== */
/* === Affiliate light-mode redesign (match /api standard) — token-based  === */
/* === Additive overrides only (legacy dark blocks kept to avoid regress) === */
/* ========================================================================== */

/* [1] Hero (.dashboard-head) in light: clean card surface instead of the flat
   grey #edeff2 from `html.light .dashboard-head-wrapper .dashboard-head`.
   Specificity raised with .l2v2 + .l2v2-page-affiliates + wrapper to beat it. */
html.light .l2v2 .l2v2-page-affiliates .dashboard-head-wrapper .dashboard-head {
    background: var(--side);
    border: 1px solid var(--line);
}
html.light .l2v2 .l2v2-page-affiliates .dashboard-head::before {
    background: radial-gradient(circle, rgba(255, 193, 7, .12), transparent 60%);
}
html.light .l2v2 .l2v2-page-affiliates .dashboard-head .dhead-icon {
    background: rgba(255, 193, 7, .15);
    color: var(--brand);
    box-shadow: none;
}

/* [2] Referral / modern-card in light: white card, no dark gradient, no radial.
   section-title (#fff !important at L859/L2085) re-tokenised; link-input readable. */
html.light .l2v2 .l2v2-page-affiliates .modern-card,
html.light .l2v2 .l2v2-page-affiliates .referral-section {
    background: var(--side) !important;
    border: 1px solid var(--line);
    color: var(--ink);
}
html.light .l2v2 .l2v2-page-affiliates .modern-card::before,
html.light .l2v2 .l2v2-page-affiliates .referral-section::before {
    display: none;
}
html.light .l2v2 .l2v2-page-affiliates .section-title,
html.light .l2v2 .l2v2-page-affiliates .section-title h5,
html.light .l2v2 .l2v2-page-affiliates .referral-section .section-title {
    color: var(--ink) !important;
}
html.light .l2v2 .l2v2-page-affiliates .section-title p {
    color: var(--inkDim) !important;
}
html.light .l2v2 .l2v2-page-affiliates .link-input {
    background: var(--side2);
    border: 1px solid var(--line);
    color: var(--ink);
}

/* [3] Tier cards in light: token surface + neutral text, yellow only on rate.
   Additive (legacy un-scoped #121D27 block & html.light .aff-tier-card kept). */
html.light .l2v2 .l2v2-page-affiliates .aff-tier-card {
    background: var(--side);
    border-color: var(--line);
}
html.light .l2v2 .l2v2-page-affiliates .aff-tier-active-new,
html.light .l2v2 .l2v2-page-affiliates .aff-tier-active-gold,
html.light .l2v2 .l2v2-page-affiliates .aff-tier-active-platinum,
html.light .l2v2 .l2v2-page-affiliates .aff-tier-active-vip {
    background: rgba(255, 193, 7, .08);
    border-color: var(--brand);
}
html.light .l2v2 .l2v2-page-affiliates .aff-tier-name {
    color: var(--ink);
}
html.light .l2v2 .l2v2-page-affiliates .aff-tier-sublabel,
html.light .l2v2 .l2v2-page-affiliates .tier-name {
    color: var(--inkDim);
}
html.light .l2v2 .l2v2-page-affiliates .aff-tier-rate {
    color: var(--brand);
}
html.light .l2v2 .l2v2-page-affiliates .aff-tier-rate-free {
    color: var(--success);
}
/* === END affiliate light redesign === */

/* ================================================================
   FINAL FIX: Daily check-in coins were squished/oval + cells too narrow.
   Earlier block (~L29326) neutralized the round coins to plain icons
   (width:auto/height:auto/border-radius:0/background:transparent) which
   rendered as ~22x24 ovals. This block restores true circular coins and
   forces .ci-day to stretch the full 7-col grid track. Placed last to win
   the cascade; uses !important to override the neutralizing block.
   ================================================================ */
.ci-grid {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    width: 100% !important;
    gap: 8px !important;
    justify-items: stretch !important;
    margin: 0 0 18px !important;
}
.ci-day {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    justify-self: stretch !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    box-sizing: border-box !important;
    padding: 12px 4px !important;
}
.ci-day .ci-coin,
.ci-day .ci-check,
.ci-day .ci-gift {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    flex-shrink: 0 !important;
    border-radius: 50% !important;
    display: grid !important;
    place-items: center !important;
    font-size: 16px !important;
    line-height: 1 !important;
    padding: 0 !important;
    margin: 0 auto !important;
    overflow: hidden !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.18) !important;
}
/* default coin = grey */
.ci-day .ci-coin {
    background: linear-gradient(135deg, #d4d4d8, #a1a1aa) !important;
    color: #6b6b73 !important;
}
/* checked = yellow gold */
.ci-day.checked .ci-coin,
.ci-day.checked .ci-check {
    background: linear-gradient(135deg, #ffc107, #e8a800) !important;
    color: #0c151b !important;
    display: grid !important;
}
/* today = bright yellow */
.ci-day.today .ci-coin,
.ci-day.today .ci-check,
.ci-day.today .ci-gift {
    background: linear-gradient(135deg, #ffc107, #ff9800) !important;
    color: #0c151b !important;
    box-shadow: 0 4px 12px rgba(255,193,7,0.4) !important;
}
/* gift (bonus day) = yellow, slightly larger but still 1:1 */
.ci-day .ci-gift {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    background: linear-gradient(135deg, #ff9800, #ff6e3e) !important;
    color: #fff !important;
}
.ci-day.bonus.checked .ci-gift,
.ci-day.bonus.checked .ci-check {
    background: linear-gradient(135deg, #ffc107, #e8a800) !important;
    color: #0c151b !important;
}
/* keep glyph inside the circle from overflowing */
.ci-day .ci-coin i,
.ci-day .ci-check i,
.ci-day .ci-gift i {
    font-size: inherit !important;
    line-height: 1 !important;
}

/* ci-day cell = transparent (coin วงกลมข้างในเป็นตัวแสดง state ไม่ใช่ cell) */
.ci-modal-body .ci-grid .ci-day,
.ci-modal-body .ci-grid .ci-day.today,
.ci-modal-body .ci-grid .ci-day.bonus,
.ci-modal-body .ci-grid .ci-day.checked {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* ================================================================
   DAILY CHECK-IN MODAL — FINAL REDESIGN (token-based, /api standard)
   Self-contained override block. Wins the cascade over all 5 earlier
   .ci-* blocks (L1312 / L2342 / L22055 / L29150 / L30976). Markup &
   JS untouched — CSS only.

   Design notes
   - Header: full yellow gradient hero (streak pill + gift + title + sub).
     Body: token surface (var(--side)) below a hard divider — DAY labels
     sit fully on the body, never straddling the header line.
   - Coin fix: the ri-coin-fill glyph is intrinsically wide and renders as
     a flat oval/"flying saucer" when clipped inside a round chip. We HIDE
     the <i> glyph for plain coins and draw a crisp, true-1:1 coin face via
     ::after (centred ฿-style mark on a domed gold/neutral disc). Gift and
     check glyphs are square, so they're kept (sized to fit the 1:1 chip).
   - Works in light + dark via tokens (--side/--side2/--line/--ink/--inkDim).
   ================================================================ */

/* ---- Shell ---- */
#checkinModal .ci-modal {
    background: var(--side) !important;
    border: 1px solid var(--line) !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    box-shadow: 0 30px 70px rgba(0,0,0,0.45) !important;
}
html.light #checkinModal .ci-modal { box-shadow: 0 30px 70px rgba(12,21,27,0.18) !important; }

/* ---- HERO (full yellow gradient — same on light + dark) ---- */
#checkinModal .ci-modal-header {
    background: linear-gradient(135deg, #ffc107 0%, #ffce3a 100%) !important;
    padding: 30px 26px 28px !important;
    text-align: center !important;
    position: relative !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
}
#checkinModal .ci-modal-header .ci-header-deco {
    position: absolute !important;
    right: -42px; top: -54px;
    width: 184px; height: 184px;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.22) !important;
    pointer-events: none;
    z-index: 0;
}
#checkinModal .ci-modal-header .ci-header-deco::before {
    content: ''; position: absolute;
    left: -10px; bottom: -250px;
    width: 130px; height: 130px;
    border-radius: 50%;
    background: rgba(255,255,255,0.16);
}
#checkinModal .ci-modal-header .ci-header-deco::after { display: none !important; }

/* close button — dark glyph on the yellow hero, top-right */
#checkinModal .ci-modal-header .ci-close-btn {
    position: absolute !important;
    top: 16px !important; right: 16px !important;
    width: 34px !important; height: 34px !important;
    border-radius: 10px !important;
    border: 0 !important;
    padding: 0 !important;
    opacity: 1 !important; filter: none !important;
    z-index: 3 !important;
    background-color: rgba(12,21,27,0.12) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230c151b'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 13px !important;
    transition: background-color .15s ease !important;
}
#checkinModal .ci-modal-header .ci-close-btn:hover { background-color: rgba(12,21,27,0.22) !important; }

/* header content stack: streak pill → title → sub */
#checkinModal .ci-modal-header .ci-header-content {
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0 !important;
}

/* streak pill (gift chip + count) */
#checkinModal .ci-modal-header .ci-streak-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: auto !important; height: auto !important;
    background: rgba(12,21,27,0.10) !important;
    border: 1px solid rgba(12,21,27,0.10) !important;
    border-radius: 999px !important;
    padding: 6px 16px 6px 6px !important;
    margin: 0 auto 14px !important;
    box-shadow: 0 6px 16px rgba(12,21,27,0.10) !important;
    backdrop-filter: none !important;
}
#checkinModal .ci-modal-header .ci-streak-icon {
    flex-shrink: 0 !important;
    width: 34px !important; height: 34px !important;
    border-radius: 50% !important;
    background: #0c151b !important;
    color: #ffc107 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 17px !important;
    line-height: 1 !important;
    box-shadow: none !important;
}
#checkinModal .ci-modal-header .ci-streak-icon i { font-size: inherit !important; line-height: 1 !important; }
#checkinModal .ci-modal-header .ci-streak-info {
    display: inline-flex !important;
    align-items: baseline !important;
    gap: 6px !important;
}
#checkinModal .ci-modal-header .ci-streak-num {
    font-family: var(--font-en), "Inter", sans-serif !important;
    font-weight: 800 !important;
    font-size: 18px !important;
    line-height: 1 !important;
    color: #0c151b !important;
}
#checkinModal .ci-modal-header .ci-streak-label {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #0c151b !important;
    opacity: 0.78 !important;
}
#checkinModal .ci-modal-header .ci-header-title {
    margin: 0 !important;
    font-size: 23px !important;
    font-weight: 900 !important;
    color: #0c151b !important;
    letter-spacing: -0.02em !important;
    line-height: 1.2 !important;
}
#checkinModal .ci-modal-header .ci-header-sub {
    margin: 4px 0 0 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #0c151b !important;
    opacity: 0.78 !important;
}

/* ---- BODY (token surface; clear separation from yellow hero) ---- */
#checkinModal .ci-modal-body {
    padding: 24px 24px 22px !important;
    background: var(--side) !important;
    border: 0 !important;
}

/* ---- 7-day grid ---- */
#checkinModal .ci-modal-body .ci-grid {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 0 18px !important;
}

/* ---- Day card (filled cell, 1:1 coin chip inside) ----
   NOTE: must reset width/height/min-height/border-radius because the dashboard
   banner-dot rule `.l2v2 .l2v2-content .ci-day { width:10px; height:10px;
   border-radius:50% }` (7-day dot progress) leaks into this modal — the modal is
   rendered inside .l2v2 .l2v2-content, so without height:auto the cell collapses
   to ~27px and its content overflows onto the reward box below. */
#checkinModal .ci-modal-body .ci-grid .ci-day {
    background: var(--side2) !important;
    border: 1.5px solid var(--line) !important;
    border-radius: 14px !important;
    padding: 12px 4px !important;
    min-width: 0 !important;
    max-width: none !important;
    width: auto !important;
    height: auto !important;
    min-height: 92px !important;
    justify-self: stretch !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 7px !important;
    text-align: center !important;
    color: var(--ink) !important;
    box-shadow: none !important;
    transform: none !important;
    animation: none !important;
    cursor: default !important;
    position: relative !important;
}

#checkinModal .ci-modal-body .ci-grid .ci-day-label {
    font-size: 9.5px !important;
    font-weight: 800 !important;
    color: var(--inkDim) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    line-height: 1 !important;
    margin: 0 !important;
}
#checkinModal .ci-modal-body .ci-grid .ci-day-pts {
    font-family: var(--font-en), "Inter", sans-serif !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    color: var(--ink) !important;
    line-height: 1 !important;
    margin: 0 !important;
    opacity: 1 !important;
}
#checkinModal .ci-modal-body .ci-grid .ci-bonus-tag { display: none !important; }

/* ---- Coin / gift / check chip — true 1:1 circle ---- */
#checkinModal .ci-modal-body .ci-grid .ci-coin,
#checkinModal .ci-modal-body .ci-grid .ci-check,
#checkinModal .ci-modal-body .ci-grid .ci-gift {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    flex-shrink: 0 !important;
    border-radius: 50% !important;
    display: grid !important;
    place-items: center !important;
    margin: 0 auto !important;
    padding: 0 !important;
    line-height: 1 !important;
    position: relative !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* default coin = neutral domed disc; HIDE the wide ri-coin-fill glyph
   (the oval culprit) and draw a crisp coin face via ::after */
#checkinModal .ci-modal-body .ci-grid .ci-coin {
    background:
        radial-gradient(120% 120% at 30% 25%, rgba(255,255,255,0.55), rgba(255,255,255,0) 55%),
        linear-gradient(160deg, #e4e7ec 0%, #b9bfc8 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -2px 3px rgba(0,0,0,0.18), 0 2px 5px rgba(0,0,0,0.16) !important;
}
#checkinModal .ci-modal-body .ci-grid .ci-coin i { display: none !important; }
#checkinModal .ci-modal-body .ci-grid .ci-coin::after {
    content: "฿" !important;
    font-family: var(--font-en), "Inter", sans-serif !important;
    font-weight: 900 !important;
    font-size: 16px !important;
    line-height: 1 !important;
    color: #6b7280 !important;
    text-shadow: 0 1px 0 rgba(255,255,255,0.5) !important;
}

/* gift chip (bonus day, day 7) — square glyph fits fine */
#checkinModal .ci-modal-body .ci-grid .ci-gift {
    background:
        radial-gradient(120% 120% at 30% 25%, rgba(255,255,255,0.45), rgba(255,255,255,0) 55%),
        linear-gradient(160deg, #ff9800 0%, #ff6e3e 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 3px 8px rgba(255,110,62,0.35) !important;
}
#checkinModal .ci-modal-body .ci-grid .ci-gift i {
    display: block !important;
    font-size: 18px !important;
    line-height: 1 !important;
    color: #fff !important;
}

/* check chip (already checked-in) — square glyph fits fine */
#checkinModal .ci-modal-body .ci-grid .ci-check {
    background:
        radial-gradient(120% 120% at 30% 25%, rgba(255,255,255,0.5), rgba(255,255,255,0) 55%),
        linear-gradient(160deg, #ffc107 0%, #e8a800 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 3px 8px rgba(255,193,7,0.3) !important;
}
#checkinModal .ci-modal-body .ci-grid .ci-check i {
    display: block !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    color: #0c151b !important;
}

/* ---- State: checked (past day, claimed) — filled gold card ---- */
#checkinModal .ci-modal-body .ci-grid .ci-day.checked {
    background: linear-gradient(135deg, #ffc107, #ffce3a) !important;
    border-color: #ffc107 !important;
}
#checkinModal .ci-modal-body .ci-grid .ci-day.checked .ci-day-label,
#checkinModal .ci-modal-body .ci-grid .ci-day.checked .ci-day-pts { color: #0c151b !important; }
#checkinModal .ci-modal-body .ci-grid .ci-day.checked .ci-day-label { opacity: 0.7 !important; }
#checkinModal .ci-modal-body .ci-grid .ci-day.checked .ci-check {
    background: rgba(12,21,27,0.12) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.25) !important;
}
#checkinModal .ci-modal-body .ci-grid .ci-day.checked .ci-check i { color: #0c151b !important; }
/* hide the leftover coin chip when a day is checked (markup keeps both) */
#checkinModal .ci-modal-body .ci-grid .ci-day.checked .ci-coin { display: none !important; }

/* ---- State: today (current claimable day) — dark card, gold accents, ring ---- */
#checkinModal .ci-modal-body .ci-grid .ci-day.today {
    background: #0c151b !important;
    border-color: #0c151b !important;
    box-shadow: 0 0 0 2px rgba(255,193,7,0.55), 0 10px 22px rgba(12,21,27,0.35) !important;
    transform: scale(1.05) !important;
    z-index: 1 !important;
}
#checkinModal .ci-modal-body .ci-grid .ci-day.today .ci-day-label { color: #ffc107 !important; opacity: 1 !important; }
#checkinModal .ci-modal-body .ci-grid .ci-day.today .ci-day-pts { color: #ffc107 !important; font-weight: 900 !important; }
#checkinModal .ci-modal-body .ci-grid .ci-day.today .ci-coin {
    background:
        radial-gradient(120% 120% at 30% 25%, rgba(255,255,255,0.65), rgba(255,255,255,0) 55%),
        linear-gradient(160deg, #ffc107 0%, #ff9800 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 0 0 3px rgba(255,193,7,0.28), 0 4px 10px rgba(255,152,0,0.45) !important;
}
#checkinModal .ci-modal-body .ci-grid .ci-day.today .ci-coin::after { color: #7a4b00 !important; text-shadow: 0 1px 0 rgba(255,255,255,0.45) !important; }
#checkinModal .ci-modal-body .ci-grid .ci-day.today .ci-gift {
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 0 0 3px rgba(255,152,0,0.3), 0 4px 10px rgba(255,110,62,0.5) !important;
}

/* ---- State: bonus (day 7, not yet reached) — neutral card, gift chip ---- */
#checkinModal .ci-modal-body .ci-grid .ci-day.bonus {
    background: var(--side2) !important;
    border-color: var(--line) !important;
}
#checkinModal .ci-modal-body .ci-grid .ci-day.bonus.checked {
    background: linear-gradient(135deg, #ffc107, #ffce3a) !important;
    border-color: #ffc107 !important;
}
#checkinModal .ci-modal-body .ci-grid .ci-day.bonus.checked .ci-gift { display: none !important; }
#checkinModal .ci-modal-body .ci-grid .ci-day.bonus.today {
    background: #0c151b !important;
    border-color: #0c151b !important;
}

/* ---- Reward box (centered claim summary) ---- */
#checkinModal .ci-modal-body .ci-reward-box {
    text-align: center !important;
    padding: 0 !important;
    margin: 0 0 16px !important;
    background: transparent !important;
    border: 0 !important;
    color: var(--ink) !important;
}

/* ---- CTA (full-width gold primary) ---- */
#checkinModal .ci-modal-body .ci-cta-btn {
    display: block !important;
    width: 100% !important;
    background: linear-gradient(135deg, #ffc107, #ffab00) !important;
    color: #0c151b !important;
    border: 0 !important;
    border-radius: 13px !important;
    padding: 15px 24px !important;
    font-size: 15.5px !important;
    font-weight: 900 !important;
    font-family: inherit !important;
    box-shadow: 0 10px 22px rgba(255,193,7,0.34) !important;
    transition: transform .16s ease, box-shadow .16s ease !important;
    cursor: pointer !important;
}
#checkinModal .ci-modal-body .ci-cta-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 14px 30px rgba(255,193,7,0.46) !important;
}
#checkinModal .ci-modal-body .ci-cta-btn:disabled {
    background: var(--side2) !important;
    color: var(--inkDim) !important;
    box-shadow: none !important;
    transform: none !important;
    cursor: not-allowed !important;
}

/* ---- Light mode: body & neutral cards on white tokens ---- */
html.light #checkinModal .ci-modal-body .ci-grid .ci-day { background: var(--side2) !important; border-color: var(--line) !important; }
html.light #checkinModal .ci-modal-body .ci-grid .ci-coin::after { color: #9099a3 !important; }

/* ---- Responsive ---- */
@media (max-width: 480px) {
    #checkinModal .ci-modal-header { padding: 24px 18px 22px !important; }
    #checkinModal .ci-modal-header .ci-header-title { font-size: 20px !important; }
    #checkinModal .ci-modal-body { padding: 18px 16px 18px !important; }
    #checkinModal .ci-modal-body .ci-grid { gap: 5px !important; }
    #checkinModal .ci-modal-body .ci-grid .ci-day { padding: 10px 2px !important; border-radius: 12px !important; gap: 5px !important; height: auto !important; min-height: 84px !important; }
    #checkinModal .ci-modal-body .ci-grid .ci-day-label { font-size: 8.5px !important; }
    #checkinModal .ci-modal-body .ci-grid .ci-day-pts { font-size: 11px !important; }
    #checkinModal .ci-modal-body .ci-grid .ci-coin,
    #checkinModal .ci-modal-body .ci-grid .ci-check,
    #checkinModal .ci-modal-body .ci-grid .ci-gift { width: 32px !important; height: 32px !important; min-width: 32px !important; }
    #checkinModal .ci-modal-body .ci-grid .ci-coin::after { font-size: 14px !important; }
    #checkinModal .ci-modal-body .ci-grid .ci-gift i { font-size: 16px !important; }
    #checkinModal .ci-modal-body .ci-grid .ci-check i { font-size: 17px !important; }
}

/* ==========================================================================
 * U30 — SIGNIN landing "บริการยอดนิยม" pills (.signin-featured-keywords)
 * The 5 service pills alternate .signin-cta-pill-gold/-white → the yellow ones
 * blended into the yellow page bg while white ones popped = inconsistent
 * (user report "แปลกๆ"). Unify to dark pills (pop on yellow, match the
 * .signin-cta-section pills above), brand-colour on hover. [APPEND-ONLY]
 * ========================================================================== */
.signin-featured-keywords .signin-cta-pill-gold,
.signin-featured-keywords .signin-cta-pill-white {
  background: #0c151b !important;
  color: #fff !important;
  border: 2px solid #0c151b !important;
  box-shadow: 0 10px 24px rgba(12,21,27,.20) !important;
}
.signin-featured-keywords .signin-cta-pill-gold:hover,
.signin-featured-keywords .signin-cta-pill-white:hover {
  background: var(--lk-accent-yellow) !important;
  color: #0c151b !important;
  border-color: var(--lk-accent-yellow) !important;
  transform: translateY(-3px);
}
/* === END U30 === */

/* ==========================================================================
 * U31 — SIGNIN landing TAB CONTENT (.home-tabs = IG/FB/YT/TT feature cards).
 * The card is navy (L23327). But .hsl-title h2 (L23372) sets NO color → it
 * inherited #0c151b black-on-navy in dark mode; and html.light (L1275) forced
 * the whole hsl/hsli block to #0c151b black-on-navy in light mode. Both =
 * unreadable (user report Image#1 pattern). Force readable light text in BOTH
 * modes (card is navy regardless of toggle). [APPEND-ONLY]
 * ========================================================================== */
.home-tabs .hsl-title h2 { color: #fff !important; }
.home-tabs .hsl-text { color: #C9D2DC !important; }
.home-tabs .hsli-title { color: #fff !important; }
.home-tabs .hsli-text { color: rgba(255,255,255,.72) !important; }
/* === END U31 === */

/* ==========================================================================
 * U32 — GUEST /services (logged-out) card grid. The guest page has NO .l2v2
 * ancestor (body class empty; only .l2v2-page-services on .appContent), so the
 * U29 grid (scoped `.l2v2 .l2v2-page-services`) never matched → wrapper fell
 * back to the legacy flex column (L803) = raw 1-col stack of 344 cards, and the
 * legacy .orlc pastel min/max chips showed. Re-scope to .l2v2-page-services so
 * it covers guest AND logged-in; !important beats the legacy flex rule.
 * Tokens (--side/--line/--ink) keep light+dark correct automatically. [APPEND]
 * ========================================================================== */
.l2v2-page-services .services-wrapper { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; align-items: stretch; }
.l2v2-page-services .service-item.pg-svc-card { background: var(--side); border: 1px solid var(--line); border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 10px; height: 100%; }
.l2v2-page-services .service-item.pg-svc-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--brand); }
.l2v2-page-services .pg-svc-card .pg-svc-id { font-family: var(--font-en); font-size: 11px; font-weight: 700; color: var(--inkDim); letter-spacing: .04em; }
.l2v2-page-services .pg-svc-card .pg-svc-name { font-size: 14px; font-weight: 700; color: var(--ink); margin: 0; line-height: 1.45; }
.l2v2-page-services .pg-svc-card .pg-svc-avt { font-size: 11px; color: var(--inkDim); display: flex; align-items: center; gap: 5px; }
.l2v2-page-services .pg-svc-card .pg-svc-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: auto; }
.l2v2-page-services .pg-svc-card .pg-svc-meta > div { display: flex; flex-direction: column; gap: 3px; text-align: center; }
.l2v2-page-services .pg-svc-card .pg-svc-meta .l { font-size: 10px; color: var(--inkDim); text-transform: uppercase; letter-spacing: .04em; }
.l2v2-page-services .pg-svc-card .pg-svc-meta .v { font-family: var(--font-en); font-weight: 800; font-size: 13px; color: var(--ink); background: none !important; padding: 0 !important; border-radius: 0 !important; }
.l2v2-page-services .pg-svc-card .pg-svc-btn { background: linear-gradient(95deg, #ffc107, #ffd24a) !important; color: #0c151b !important; border: 0 !important; border-radius: 11px; padding: 11px; font-weight: 800; font-size: 13px; cursor: pointer; width: 100%; margin-top: 2px; }
.l2v2-page-services .pg-svc-card .pg-svc-btn:hover { filter: brightness(1.04); }
.l2v2-page-services .pg-svc-card .pg-svc-fav { position: absolute; top: 14px; right: 14px; font-size: 17px; color: #ffc107; cursor: pointer; z-index: 1; }
/* === END U32 === */

/* ==========================================================================
 * U33 — /services COMPACT ROW redesign (user chose compact list over card grid).
 * One service per full-width row: id+name+time stacked left, meta inline below,
 * yellow button spanning the right. Category header (.si-title) becomes a dark
 * pill with a yellow accent bar so it stands out on the yellow page. Tokens keep
 * light+dark correct. Overrides the U32 card grid. [APPEND-ONLY]
 * ========================================================================== */
.l2v2-page-services .services-wrapper { display:flex !important; flex-direction:column; gap:10px; grid-template-columns:none !important; }
.l2v2-page-services .si-wrapper { width:100%; }
.l2v2-page-services .service-item.pg-svc-card {
  display:grid; grid-template-columns:1fr auto; align-items:center;
  column-gap:18px; row-gap:5px; padding:15px 20px; height:auto;
  background:var(--side); border:1px solid var(--line); border-radius:14px; position:relative;
}
.l2v2-page-services .service-item.pg-svc-card:hover { border-color:var(--brand); transform:none; box-shadow:none; }
.l2v2-page-services .pg-svc-id { grid-column:1; font-family:var(--font-en); font-size:11px; font-weight:700; color:var(--inkDim); }
.l2v2-page-services .pg-svc-name { grid-column:1; margin:0; font-size:15px; font-weight:700; color:var(--ink); line-height:1.4; }
.l2v2-page-services .pg-svc-avt { grid-column:1; font-size:11px; color:var(--inkDim); display:flex; align-items:center; gap:5px; }
.l2v2-page-services .pg-svc-meta { grid-column:1; display:flex !important; flex-wrap:wrap; gap:5px 18px; padding:3px 0 0 !important; margin:0 !important; border:none !important; }
.l2v2-page-services .pg-svc-meta > div { display:flex !important; flex-direction:row !important; align-items:baseline; gap:5px; text-align:left !important; }
.l2v2-page-services .pg-svc-meta .l { font-size:11px; color:var(--inkDim); text-transform:none; letter-spacing:0; }
.l2v2-page-services .pg-svc-meta .v { font-family:var(--font-en); font-weight:800; font-size:13px; color:var(--ink); background:none !important; border:none !important; padding:0 !important; border-radius:0 !important; }
.l2v2-page-services .pg-svc-meta .v.min { color:var(--success); }
.l2v2-page-services .pg-svc-meta .v.max { color:#ff6b6b; }
.l2v2-page-services .pg-svc-btn {
  grid-column:2; grid-row:1 / -1; align-self:center; justify-self:end;
  width:auto !important; white-space:nowrap; margin:0 !important;
  padding:11px 24px !important; border:0 !important; border-radius:11px;
  background:linear-gradient(95deg,#ffc107,#ffd24a) !important; color:#0c151b !important;
  font-weight:800; font-size:13px; cursor:pointer;
}
.l2v2-page-services .pg-svc-btn:hover { filter:brightness(1.04); }
.l2v2-page-services .pg-svc-fav { position:absolute; top:10px; right:14px; z-index:2; }
.l2v2-page-services .si-header { margin:26px 0 12px !important; padding:0 !important; background:none !important; border:none !important; }
.l2v2-page-services .si-title {
  display:inline-flex; align-items:center; gap:10px; margin:0;
  font-size:17px; font-weight:800; color:#fff;
  padding:10px 20px 10px 15px; background:#0c151b;
  border-left:4px solid var(--brand); border-radius:10px;
  box-shadow:0 6px 18px rgba(12,21,27,.18);
}
.l2v2-page-services .si-title span[class^="ri-"] { color:var(--brand); }
.l2v2-page-services .si-title img.category-icon-img { width:24px; height:24px; border-radius:6px; }
/* === END U33 === */

/* ==========================================================================
 * U34 — /services Apple-style full-width row. U33 clumped content left leaving
 * the card center empty (user feedback Image#5). Distribute across full width:
 * id | name(flex, time below) | RATE | MIN | MAX | button — meta uses
 * display:contents so its 3 cells become real grid columns aligned across every
 * row (Apple spec-table feel). Mobile (<820) stacks back to compact. [APPEND]
 * ========================================================================== */
.l2v2-page-services .service-item.pg-svc-card {
  grid-template-columns: 52px minmax(0,1fr) 124px 104px 124px auto !important;
  column-gap:24px !important; row-gap:2px !important; padding:16px 26px !important;
}
.l2v2-page-services .pg-svc-id { grid-column:1 !important; grid-row:1 / 3 !important; align-self:center; }
.l2v2-page-services .pg-svc-name { grid-column:2 !important; grid-row:1 !important; font-size:15.5px; }
.l2v2-page-services .pg-svc-avt { grid-column:2 !important; grid-row:2 !important; }
.l2v2-page-services .pg-svc-meta { display:contents !important; }
.l2v2-page-services .pg-svc-meta > div { grid-row:1 / 3 !important; align-self:center; flex-direction:column !important; align-items:center !important; gap:3px !important; text-align:center !important; padding:0 !important; }
.l2v2-page-services .pg-svc-meta > div:nth-child(1) { grid-column:3 !important; }
.l2v2-page-services .pg-svc-meta > div:nth-child(2) { grid-column:4 !important; }
.l2v2-page-services .pg-svc-meta > div:nth-child(3) { grid-column:5 !important; }
.l2v2-page-services .pg-svc-meta .l { font-size:10px !important; text-transform:uppercase; letter-spacing:.04em; opacity:.72; }
.l2v2-page-services .pg-svc-meta .v { font-size:14px !important; }
.l2v2-page-services .pg-svc-btn { grid-column:6 !important; grid-row:1 / 3 !important; align-self:center; }
@media (max-width:820px) {
  .l2v2-page-services .service-item.pg-svc-card {
    grid-template-columns: 1fr auto !important; column-gap:14px !important; row-gap:5px !important;
  }
  .l2v2-page-services .pg-svc-id { grid-column:1 !important; grid-row:auto !important; }
  .l2v2-page-services .pg-svc-name { grid-column:1 !important; grid-row:auto !important; }
  .l2v2-page-services .pg-svc-avt { grid-column:1 !important; grid-row:auto !important; }
  .l2v2-page-services .pg-svc-meta { display:flex !important; grid-column:1 !important; flex-wrap:wrap; gap:5px 16px; }
  .l2v2-page-services .pg-svc-meta > div { grid-row:auto !important; flex-direction:row !important; align-items:baseline !important; gap:5px !important; text-align:left !important; }
  .l2v2-page-services .pg-svc-meta .l { text-transform:none !important; }
  .l2v2-page-services .pg-svc-btn { grid-column:2 !important; grid-row:1 / -1 !important; }
}
/* === END U34 === */

/* ==========================================================================
 * U35 — /child-panel (เช่าเว็บตัวแทน) uses a legacy Bootstrap body>.container
 * instead of .appContent, so it gets NO sidebar offset and slides under the
 * 280px fixed sidebar (content clipped on the left — user audit). Offset the
 * direct-child .container to match .appContent (padding-left 310 = 280+30).
 * Scoped to `body.l2v2 > .container` (direct child) so dashboard pages whose
 * .container sits inside .appContent are unaffected. Desktop only; mobile the
 * sidebar collapses so Bootstrap centering is fine. [APPEND-ONLY]
 * ========================================================================== */
@media (min-width: 992px) {
  body.l2v2 > .container {
    max-width: none !important;
    margin-left: 0 !important; margin-right: 0 !important;
    padding-left: 310px !important; padding-right: 32px !important;
    box-sizing: border-box;
  }
}
/* === END U35 === */

/* ==========================================================================
 * U36 — public pages (how-it-works/terms/privacy/about-us/faq) viewed while
 * LOGGED IN render their content as body>section / body>.home-head (full-width
 * x0, NOT inside .appContent), so the centered .container sits under the 280px
 * fixed sidebar and gets clipped on the left (user audit /how-it-works). Offset
 * every direct-child public wrapper past the sidebar. Desktop only (mobile the
 * sidebar collapses, so full-width is correct). [APPEND-ONLY]
 * ========================================================================== */
@media (min-width: 992px) {
  body#appDashboard.l2v2 > section,
  body#appDashboard.l2v2 > .home-head,
  body#appDashboard.l2v2 > .home-head-content,
  body#appDashboard.l2v2 > .home-section,
  body#appDashboard.l2v2 > .page-content,
  body#appDashboard.l2v2 > .seo-section,
  body#appDashboard.l2v2 > .lk-legal,
  body#appDashboard.l2v2 > .lk-land,
  body#appDashboard.l2v2 > .blog-wrapper,
  body#appDashboard.l2v2 > .about-wrapper {
    padding-left: 280px !important;
    box-sizing: border-box;
  }
}
/* === END U36 === */

/* ==========================================================================
 * U37 — public page hero text (.hl-title / .hl-text) is hard #0c151b black —
 * fine on the light hero, but black-on-navy (unreadable) in DARK mode (user
 * Image#6 /how-it-works "วิธีการใช้งาน Likester" black-on-dark). Force light
 * text in dark mode only. Scoped to hl-title/hl-text so the yellow subtitle is
 * untouched. [APPEND-ONLY]
 * ========================================================================== */
html.dark .hl-title { color:#fff !important; -webkit-text-fill-color:#fff !important; }
html.dark .hl-text { color:rgba(255,255,255,.82) !important; }
/* === END U37 === */

/* ==========================================================================
 * U38 — /about-us two contrast bugs: (1) DARK mode .about-section /
 * .services-overview .section-title is dark-grey-on-dark (lum51/18); (2) LIGHT
 * mode .about-contact-sec text is white-on-white (lum255/248 — designed for a
 * dark bg). Fix each per mode. [APPEND-ONLY]
 * ========================================================================== */
html.dark .about-section .section-title,
html.dark .about-section .section-title *,
html.dark .services-overview .section-title,
html.dark .services-overview .section-title * { color:#fff !important; }
html.light .about-contact-section .section-title,
html.light .about-contact-section .section-title *,
html.light .about-contact-section p,
html.light .about-contact-section .contact-intro,
html.light .about-contact-section .contact-info-section,
html.light .about-contact-section .contact-info-section *,
html.light .about-contact-section a:not(.btn):not([class*="btn"]) { color:#0c151b !important; }
/* === END U38 === */

/* ==========================================================================
 * U39 — /account profile tab redesign (Hero + stats grid — user-chosen).
 * Was: 2-col (profile | settings) with huge empty space under profile + yellow
 * card-header flood + full-width save buttons (Image#8). New: profile hero
 * (full-width) → account-info stat grid → compact 2-col settings. Reorder via
 * display:contents + order (NO markup change — SettingsFrom/email hooks intact).
 * Scoped to .acc-section[data-tab=profile] (account-only). [APPEND-ONLY]
 * ========================================================================== */
@media (min-width: 768px) {
  .acc-section[data-tab="profile"].active { display:flex; flex-direction:column; gap:16px; }
  .acc-section[data-tab="profile"] > .row:first-of-type { display:contents; }
  .acc-section[data-tab="profile"] > .row > [class*="col-lg-6"] { max-width:100% !important; flex:0 0 100% !important; width:100% !important; margin-bottom:0 !important; }
  .acc-section[data-tab="profile"] > .row > [class*="col-lg-6"]:first-child { order:1; }
  .acc-section[data-tab="profile"] > .card { order:2; margin-bottom:0 !important; }
  .acc-section[data-tab="profile"] > .row > [class*="col-lg-6"]:nth-child(2) { order:3; }
  /* settings: lang | timezone side-by-side */
  .acc-section[data-tab="profile"] > .row > [class*="col-lg-6"]:nth-child(2) .card-body { display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start; }
  .acc-section[data-tab="profile"] > .row > [class*="col-lg-6"]:nth-child(2) .card-body > .mb-4 { margin-bottom:0 !important; }
}
/* profile hero avatar */
.acc-section[data-tab="profile"] .avtWr { width:54px; height:54px; font-size:23px; }
/* settings header — neutral, kill yellow flood */
.acc-section[data-tab="profile"] > .row > [class*="col-lg-6"]:nth-child(2) .card-header { background:var(--side) !important; background-image:none !important; border-bottom:1px solid var(--line); }
.acc-section[data-tab="profile"] > .row > [class*="col-lg-6"]:nth-child(2) .card-header .card-title { color:var(--ink) !important; }
/* save buttons — compact (not full-width) */
.acc-section[data-tab="profile"] .btn-100 { width:auto !important; min-width:140px; padding:10px 26px !important; }
/* account info → stat cards grid */
.acc-section[data-tab="profile"] .acc-item { background:var(--side2); border:1px solid var(--line); border-radius:13px; padding:15px 16px; margin:0 !important; height:100%; transition:border-color .15s; }
.acc-section[data-tab="profile"] .acc-item:hover { border-color:var(--brand); }
.acc-section[data-tab="profile"] .row-cols-xxl-4 > .col { margin-bottom:12px; }
/* security tab + shared: neutral card-headers (kill yellow flood on เปลี่ยนรหัส/2FA),
   compact buttons, equal-height cards (2FA | API balance) */
.acc-section .card-header { background:var(--side) !important; background-image:none !important; border-bottom:1px solid var(--line); }
.acc-section .card-header .card-title { color:var(--ink) !important; }
.acc-section .btn-100, .acc-section .btn-block { width:auto !important; min-width:160px; padding:11px 28px !important; }
.acc-section[data-tab="security"] > .row { align-items:stretch; }
.acc-section[data-tab="security"] > .row > [class*="col-lg-6"] { display:flex; }
.acc-section[data-tab="security"] > .row > [class*="col-lg-6"] > .card { width:100%; height:100%; margin-bottom:0 !important; }
.acc-section[data-tab="security"] .acc-icon { flex-shrink:0; }
/* === END U39 === */

/* ==========================================================================
 * U40 — DESIGN v15 (Account + Affiliates + New Order) — from handoff bundle
 * styles/v15-pages.jsx. Token-based (--ink/--side/--line/--brand/--ink2 etc all
 * present in theme 32). Shared .v15-* classes used by all 3 redesigned pages.
 * [APPEND-ONLY]
 * ========================================================================== */
/* ============================================================ shared */
.v15 { display:flex; flex-direction:column; gap:22px; }
.v15-pagehead { display:flex; align-items:center; gap:18px; }
.v15-pagehead .ic { width:58px; height:58px; border-radius:18px; flex-shrink:0; display:grid; place-items:center; font-size:27px; color:var(--brandText);
  background: linear-gradient(135deg,#ffc107,#ff9800); box-shadow:0 10px 24px rgba(255,168,7,.32); }
.v15-pagehead h1 { margin:0; font-size:24px; font-weight:800; letter-spacing:-.02em; color:var(--ink); }
.v15-pagehead p { margin:4px 0 0; font-size:13.5px; color:var(--inkDim); max-width:640px; line-height:1.5; }
.v15-tabs { display:inline-flex; gap:4px; padding:4px; background:var(--side2); border:1px solid var(--line); border-radius:14px; width:fit-content; }
.v15-tabs button { display:flex; align-items:center; gap:7px; border:0; background:transparent; cursor:pointer; font-family:inherit;
  font-size:13px; font-weight:700; color:var(--inkDim); padding:9px 18px; border-radius:10px; transition:.16s; }
.v15-tabs button i { font-size:16px; }
.v15-tabs button.active { background:var(--side); color:var(--ink); box-shadow:0 4px 12px rgba(0,0,0,.08); }
.l2v2.dark .v15-tabs button.active { background:var(--line); }
/* ============================================================ affiliates referral hero */
.v15-ref { display:grid; grid-template-columns: 1.55fr 1fr; gap:0; border-radius:24px; overflow:hidden; border:1px solid var(--line); background:var(--side); }
.v15-ref-main { padding:30px 32px; position:relative; overflow:hidden; }
.v15-ref-main::before { content:''; position:absolute; right:-80px; top:-90px; width:280px; height:280px; border-radius:50%;
  background: radial-gradient(circle, rgba(255,193,7,.16), transparent 70%); pointer-events:none; }
.v15-ref-eyebrow { display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:800; letter-spacing:.04em;
  color:#ca8a04; background:rgba(255,193,7,.16); border:1px solid rgba(255,193,7,.32); padding:6px 13px; border-radius:999px; }
.l2v2.dark .v15-ref-eyebrow { color:#ffce3a; }
.v15-ref-main h2 { margin:16px 0 8px; font-size:27px; font-weight:800; letter-spacing:-.02em; color:var(--ink); line-height:1.18; }
.v15-ref-main h2 em { font-style:normal; color:#ca8a04; }
.l2v2.dark .v15-ref-main h2 em { color:#ffce3a; }
.v15-ref-main > p { margin:0 0 22px; font-size:13.5px; color:var(--ink2); line-height:1.6; max-width:520px; }
.v15-linkrow { display:flex; align-items:stretch; gap:10px; background:var(--side2); border:1px solid var(--line); border-radius:16px; padding:8px 8px 8px 18px; }
.v15-linkrow .meta { flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; }
.v15-linkrow .meta .lbl { font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--inkDim); }
.v15-linkrow .meta .url { font-family:'Inter',sans-serif; font-size:14px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; }
.v15-copy { flex-shrink:0; border:0; cursor:pointer; font-family:inherit; font-weight:700; font-size:13px; padding:0 18px; border-radius:12px;
  background:var(--brand); color:var(--brandText); display:flex; align-items:center; gap:7px; transition:.16s; }
.v15-copy:hover { background:var(--brandDeep,#e2aa03); }
.v15-copy.copied { background:#10b981; color:#fff; }
.v15-share { display:flex; gap:10px; margin-top:14px; }
.v15-share a { flex:1; display:flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; font-size:13px; font-weight:700;
  padding:12px; border-radius:13px; color:#fff; transition:.16s; cursor:pointer; }
.v15-share a:hover { transform:translateY(-2px); }
.v15-share a.line { background:#06C755; box-shadow:0 8px 18px rgba(6,199,85,.28); }
.v15-share a.fb { background:#1877f2; box-shadow:0 8px 18px rgba(24,119,242,.28); }
.v15-share a.x { background:#0c151b; }
.l2v2.dark .v15-share a.x { background:#000; border:1px solid var(--line2); }
.v15-ref-side { background: linear-gradient(160deg,#0c151b,#16242f); padding:28px 26px; color:#fff; display:flex; flex-direction:column; }
.l2v2.light .v15-ref-side { background: linear-gradient(160deg,#13202b,#1d3340); }
.v15-ref-rate { text-align:center; padding-bottom:20px; margin-bottom:20px; border-bottom:1px solid rgba(255,255,255,.12); }
.v15-ref-rate .big { font-family:'Inter',sans-serif; font-size:48px; font-weight:800; letter-spacing:-.03em; color:#ffc107; line-height:1; }
.v15-ref-rate .cap { font-size:12px; color:rgba(255,255,255,.7); margin-top:6px; font-weight:600; }
.v15-tips-h { font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.55); margin-bottom:14px; display:flex; align-items:center; gap:7px; }
.v15-tip { display:flex; gap:12px; align-items:flex-start; margin-bottom:14px; }
.v15-tip .ti { width:34px; height:34px; border-radius:10px; flex-shrink:0; display:grid; place-items:center; font-size:16px; color:#ffc107; background:rgba(255,193,7,.14); }
.v15-tip b { display:block; font-size:13px; font-weight:700; color:#fff; }
.v15-tip span { display:block; font-size:11.5px; color:rgba(255,255,255,.62); margin-top:2px; line-height:1.45; }
/* ============================================================ tier fee grid */
.v15-tier-wrap { background:var(--side); border:1px solid var(--line); border-radius:22px; padding:22px 24px 24px; }
.v15-tier-head { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:18px; flex-wrap:wrap; }
.v15-tier-head .l { display:flex; align-items:center; gap:10px; font-size:15px; font-weight:800; color:var(--ink); }
.v15-tier-head .l i { font-size:20px; color:#ca8a04; }
.l2v2.dark .v15-tier-head .l i { color:#ffce3a; }
.v15-tier-head .badge { font-size:12px; font-weight:700; color:#10b981; background:rgba(16,185,129,.12); border:1px solid rgba(16,185,129,.25); padding:6px 13px; border-radius:999px; }
.v15-tier-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.v15-tier { position:relative; border:1.5px solid var(--line); border-radius:18px; padding:22px 16px 18px; text-align:center; background:var(--side2); transition:.18s; }
.v15-tier:hover { transform:translateY(-3px); box-shadow:0 14px 30px rgba(0,0,0,.1); }
.v15-tier .tag { position:absolute; top:-11px; left:50%; transform:translateX(-50%); font-size:10px; font-weight:800; letter-spacing:.06em;
  padding:4px 12px; border-radius:999px; white-space:nowrap; color:#0c151b; }
.v15-tier .tring { width:54px; height:54px; border-radius:16px; margin:0 auto 12px; display:grid; place-items:center; font-size:25px; }
.v15-tier .tname { font-family:'Inter',sans-serif; font-size:14px; font-weight:800; letter-spacing:.04em; color:var(--ink); }
.v15-tier .trate { font-family:'Inter',sans-serif; font-size:26px; font-weight:800; margin-top:6px; letter-spacing:-.02em; }
.v15-tier .tsub { font-size:11.5px; color:var(--inkDim); margin-top:2px; font-weight:500; }
.v15-tier.is-active { border-color:var(--brand); background:linear-gradient(180deg, rgba(255,193,7,.10), var(--side2)); box-shadow:0 12px 28px rgba(255,193,7,.18); }
.v15-tier.t-new .tring { color:#6b7280; background:rgba(107,114,128,.12); }
.v15-tier.t-new .trate { color:#FF2828; }
.v15-tier.t-gold .tring { color:#ca8a04; background:rgba(255,193,7,.16); }
.v15-tier.t-plat .tring { color:#2A62FF; background:rgba(42,98,255,.12); }
.v15-tier.t-vip .tring { color:#A12AFF; background:rgba(161,42,255,.12); }
.v15-tier .trate.free { color:#10b981; }
.v15-tier .tag.new { background:#ffc107; }
.v15-tier .tag.gold { background:#ffc107; }
.v15-upgrade { display:flex; align-items:center; gap:10px; margin-top:16px; padding:13px 18px; border-radius:14px;
  background:rgba(42,98,255,.07); border:1px solid rgba(42,98,255,.18); font-size:13px; color:var(--ink2); }
.v15-upgrade i { font-size:19px; color:#2A62FF; flex-shrink:0; }
.v15-upgrade strong { color:var(--ink); font-weight:700; }
/* ============================================================ payout card */
.v15-payout { display:flex; align-items:center; gap:18px; padding:22px 26px; border-radius:22px; color:#fff; position:relative; overflow:hidden;
  background:linear-gradient(110deg,#0c151b 0%,#1a2c38 100%); }
.l2v2.light .v15-payout { background:linear-gradient(110deg,#13202b,#22394a); }
.v15-payout::before { content:''; position:absolute; right:-40px; top:-60px; width:220px; height:220px; border-radius:50%; background:radial-gradient(circle,rgba(255,193,7,.18),transparent 70%); }
.v15-payout .pic { width:56px; height:56px; border-radius:16px; display:grid; place-items:center; font-size:26px; color:#0c151b; background:linear-gradient(135deg,#ffc107,#ff9800); flex-shrink:0; position:relative; z-index:1; }
.v15-payout .pi { position:relative; z-index:1; }
.v15-payout .pi .l { font-size:12.5px; color:rgba(255,255,255,.65); font-weight:600; }
.v15-payout .pi .v { font-family:'Inter',sans-serif; font-size:30px; font-weight:800; letter-spacing:-.02em; margin-top:2px; }
.v15-payout .pi .v small { font-size:16px; font-weight:600; color:rgba(255,255,255,.8); }
.v15-payout .pbtn { margin-left:auto; position:relative; z-index:1; border:0; cursor:pointer; font-family:inherit; font-weight:700; font-size:14px;
  padding:14px 24px; border-radius:14px; background:var(--brand); color:var(--brandText); display:flex; align-items:center; gap:8px; transition:.16s; box-shadow:0 10px 22px rgba(255,193,7,.3); }
.v15-payout .pbtn:hover { transform:translateY(-2px); }
.v15-empty { padding:54px 20px; text-align:center; color:var(--inkDim); }
.v15-empty i { font-size:38px; opacity:.5; display:block; margin-bottom:10px; }
/* ============================================================ new order summary */
.v15-sum { background:var(--side); border:1px solid var(--line); border-radius:20px; overflow:hidden; position:sticky; top:90px; }
.v15-sum .sh { background:linear-gradient(95deg,#ffc107,#ffce3a 60%,#ffc107); padding:16px 22px; position:relative; overflow:hidden; }
.v15-sum .sh::before { content:''; position:absolute; right:-24px; top:-34px; width:130px; height:130px; border-radius:50%; background:rgba(255,255,255,.18); }
.v15-sum .sh h3 { margin:0; font-size:16px; font-weight:800; color:var(--brandText); position:relative; }
.v15-sum .sh p { margin:1px 0 0; font-size:11.5px; color:rgba(0,0,0,.6); font-weight:600; position:relative; }
.v15-sum-body { padding:18px 22px; }
.v15-sline { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 0; font-size:13px; border-bottom:1px dashed var(--line); }
.v15-sline:last-of-type { border-bottom:0; }
.v15-sline .k { color:var(--inkDim); display:flex; align-items:center; gap:8px; }
.v15-sline .k i { font-size:15px; }
.v15-sline .vv { font-weight:700; color:var(--ink); font-family:'Inter',sans-serif; text-align:right; }
.v15-sline .vv small { display:block; font-weight:500; font-size:10.5px; color:var(--inkDim); }
.v15-sline.disc .vv { color:#10b981; }
.v15-total { margin-top:6px; padding:16px 18px; border-radius:16px; background:var(--side2); border:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; }
.v15-total .k { font-size:13px; font-weight:700; color:var(--ink); }
.v15-total .vv { font-family:'Inter',sans-serif; font-size:26px; font-weight:800; letter-spacing:-.02em; color:#ca8a04; }
.l2v2.dark .v15-total .vv { color:#ffce3a; }
.v15-sum-note { margin-top:14px; display:flex; gap:9px; padding:12px 14px; border-radius:12px; background:rgba(16,185,129,.08); border:1px solid rgba(16,185,129,.2); font-size:11.5px; color:var(--ink2); line-height:1.5; }
.v15-sum-note i { color:#10b981; font-size:16px; flex-shrink:0; }
.v15-info { background:var(--side); border:1px solid var(--line); border-radius:20px; overflow:hidden; margin-top:18px; }
.v15-info .ih { padding:15px 20px; font-size:13.5px; font-weight:800; color:var(--ink); display:flex; align-items:center; gap:9px; border-bottom:1px solid var(--line); }
.v15-info .ih i { color:#ca8a04; font-size:18px; }
.l2v2.dark .v15-info .ih i { color:#ffce3a; }
.v15-acc { border-bottom:1px solid var(--line); }
.v15-acc:last-child { border-bottom:0; }
.v15-acc .q { padding:13px 20px; display:flex; align-items:center; justify-content:space-between; gap:12px; cursor:pointer; font-size:13px; font-weight:600; color:var(--ink); }
.v15-acc .q .pl { width:22px; height:22px; border-radius:7px; background:var(--side2); display:grid; place-items:center; color:var(--ink2); transition:.18s; flex-shrink:0; }
.v15-acc.open .q .pl { background:var(--brand); color:var(--brandText); transform:rotate(45deg); }
.v15-acc .a { max-height:0; overflow:hidden; transition:max-height .24s ease; }
.v15-acc.open .a { max-height:140px; }
.v15-acc .a div { padding:0 20px 14px; font-size:12px; color:var(--inkDim); line-height:1.6; }
.v15-chips { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.v15-chip { border:1px solid var(--line); background:var(--side2); color:var(--ink2); font-family:'Inter',sans-serif; font-weight:700; font-size:12.5px;
  padding:8px 14px; border-radius:10px; cursor:pointer; transition:.14s; }
.v15-chip:hover { border-color:var(--brand); color:var(--ink); }
.v15-chip.active { background:var(--brand); color:var(--brandText); border-color:var(--brand); }
/* ============================================================ account */
.v15-acc-top { display:grid; grid-template-columns: 1.15fr 1fr; gap:18px; }
.v15-id { display:flex; align-items:center; gap:20px; padding:24px 26px; border-radius:22px; color:#fff; position:relative; overflow:hidden;
  background:linear-gradient(115deg,#0c151b 0%,#1c2f3c 100%); border:1px solid var(--line); }
.l2v2.light .v15-id { background:linear-gradient(115deg,#13202b,#24404f); }
.v15-id::before { content:''; position:absolute; right:-50px; top:-70px; width:230px; height:230px; border-radius:50%; background:radial-gradient(circle,rgba(255,193,7,.16),transparent 70%); }
.v15-id .av { width:78px; height:78px; border-radius:22px; flex-shrink:0; display:grid; place-items:center; font-family:'Inter',sans-serif;
  font-size:34px; font-weight:800; color:#0c151b; background:linear-gradient(135deg,#ffc107,#ff9800); position:relative; z-index:1; box-shadow:0 12px 26px rgba(255,168,7,.32); }
.v15-id .meta { position:relative; z-index:1; min-width:0; }
.v15-id .uname { display:flex; align-items:center; gap:7px; font-size:21px; font-weight:800; letter-spacing:-.01em; }
.v15-id .uname i { color:#28F1AA; font-size:18px; }
.v15-id .uemail { font-size:13px; color:rgba(255,255,255,.66); margin-top:3px; }
.v15-id .utier { display:inline-flex; align-items:center; gap:6px; margin-top:11px; font-size:12px; font-weight:700; color:#0c151b;
  background:linear-gradient(135deg,#ffce3a,#ffc107); padding:5px 13px; border-radius:999px; }
.v15-id .uchg { margin-left:auto; position:relative; z-index:1; flex-shrink:0; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.08);
  color:#fff; cursor:pointer; font-family:inherit; font-weight:700; font-size:12.5px; padding:10px 16px; border-radius:12px; transition:.16s; display:flex; align-items:center; gap:7px; }
.v15-id .uchg:hover { background:rgba(255,255,255,.16); }
.v15-card { background:var(--side); border:1px solid var(--line); border-radius:20px; overflow:hidden; }
.v15-card > .ch { padding:15px 22px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:9px; font-size:14.5px; font-weight:800; color:var(--ink); }
.v15-card > .ch i { color:#ca8a04; font-size:18px; }
.l2v2.dark .v15-card > .ch i { color:#ffce3a; }
.v15-card > .cb { padding:20px 22px; }
.v15-fld { margin-bottom:16px; }
.v15-fld:last-child { margin-bottom:0; }
.v15-fld label { display:block; font-size:12px; font-weight:700; color:var(--inkDim); margin-bottom:7px; }
.v15-fld input, .v15-fld select { width:100%; box-sizing:border-box; font-family:inherit; font-size:13.5px; color:var(--ink); background:var(--side2);
  border:1px solid var(--line); border-radius:12px; padding:12px 14px; outline:none; transition:.14s; }
.v15-fld input:focus, .v15-fld select:focus { border-color:var(--brand); box-shadow:0 0 0 3px rgba(255,193,7,.16); }
.v15-fld input[readonly] { color:var(--inkDim); background:var(--bg,var(--side2)); }
.v15-fld .hint { font-size:11px; color:var(--inkDim); margin-top:6px; }
.v15-save { border:0; cursor:pointer; font-family:inherit; font-weight:700; font-size:13px; padding:11px 20px; border-radius:12px;
  background:var(--brand); color:var(--brandText); display:inline-flex; align-items:center; gap:7px; transition:.16s; }
.v15-save:hover { background:var(--brandDeep,#e2aa03); }
.v15-save.full { width:100%; justify-content:center; margin-top:4px; }
.v15-info-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.v15-info-item { display:flex; align-items:center; gap:13px; padding:16px; border-radius:16px; background:var(--side2); border:1px solid var(--line); }
.v15-info-item .ii { width:42px; height:42px; border-radius:12px; flex-shrink:0; display:grid; place-items:center; font-size:20px; }
.v15-info-item .ii.c0 { color:#ca8a04; background:rgba(255,193,7,.14); }
.v15-info-item .ii.c1 { color:#2A62FF; background:rgba(42,98,255,.12); }
.v15-info-item .ii.c2 { color:#10b981; background:rgba(16,185,129,.12); }
.v15-info-item .ii.c3 { color:#A12AFF; background:rgba(161,42,255,.12); }
.v15-info-item .t { font-size:11.5px; color:var(--inkDim); font-weight:600; }
.v15-info-item .v { font-size:14px; font-weight:700; color:var(--ink); margin-top:2px; }
.v15-2col { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.v15-2col .span2 { grid-column:1/-1; }
.v15-secrow { display:flex; align-items:center; gap:14px; padding:16px 18px; border-radius:16px; background:var(--side2); border:1px solid var(--line); }
.v15-secrow + .v15-secrow { margin-top:12px; }
.v15-secrow .si { width:44px; height:44px; border-radius:13px; flex-shrink:0; display:grid; place-items:center; font-size:21px; color:#ca8a04; background:rgba(255,193,7,.14); }
.l2v2.dark .v15-secrow .si { color:#ffce3a; }
.v15-secrow .sm { min-width:0; flex:1; }
.v15-secrow .sm b { display:block; font-size:13.5px; font-weight:700; color:var(--ink); }
.v15-secrow .sm span { display:block; font-size:11.5px; color:var(--inkDim); margin-top:2px; }
.v15-api { display:flex; align-items:center; gap:14px; padding:18px; border-radius:16px; background:var(--side2); border:1px solid var(--line); flex-wrap:wrap; }
.v15-api .si { width:44px; height:44px; border-radius:13px; flex-shrink:0; display:grid; place-items:center; font-size:21px; color:#2A62FF; background:rgba(42,98,255,.12); }
.v15-api .sm { flex:1; min-width:160px; }
.v15-api .sm b { display:block; font-size:13.5px; font-weight:700; color:var(--ink); }
.v15-api .key { font-family:'Inter',sans-serif; font-size:12px; color:var(--inkDim); margin-top:3px; letter-spacing:.02em; }
.v15-api .regen { border:1px solid var(--line); background:var(--side); color:var(--ink2); cursor:pointer; font-family:inherit; font-weight:700; font-size:12.5px;
  padding:10px 16px; border-radius:12px; display:flex; align-items:center; gap:7px; transition:.14s; }
.v15-api .regen:hover { border-color:var(--brand); color:var(--ink); }
/* account tab section visibility (works with switchAccTab .active toggle) */
.l2v2-content .acc-section { display:none; }
.l2v2-content .acc-section.active { display:block; }
/* === END U40 === */

/* ==========================================================================
 * U41 — v15 spacing + mobile responsive (design v15 was 1440-desktop only).
 * More breathing room between cards (user: "card ชิดกันไป") + stack all v15
 * grids on small screens so nothing overflows. [APPEND-ONLY]
 * ========================================================================== */
.v15 { gap:26px; }
.v15-acc-top { gap:20px; }
@media (max-width: 860px) {
  .v15-acc-top, .v15-2col, .v15-ref, .l2v2-grid { grid-template-columns:1fr !important; }
  .v15-tier-grid, .v15-info-grid { grid-template-columns:repeat(2,1fr) !important; }
  .v15-sum { position:static !important; top:auto; }
  .v15-ref { border-radius:20px; }
  .v15-ref-side { display:none; }
  .v15-id { flex-wrap:wrap; }
  .v15-id .uchg { margin-left:0; margin-top:8px; }
}
@media (max-width: 480px) {
  .v15-tier-grid, .v15-info-grid { grid-template-columns:1fr !important; }
  .v15-share { flex-wrap:wrap; }
  .v15-pagehead .ic { width:48px; height:48px; font-size:22px; }
  .v15-pagehead h1 { font-size:20px; }
}
/* === END U41 === */

/* ============================================================ U42 — New Order polish: tabs pill, card-title dark, total prominence, merged info accordion */

/* (1) card title readable in dark mode (was dark-on-dark; theme rule had higher specificity) */
.nwoMain .card .card-header .card-title,
.nwoMain .card .card-header .card-title span { color: var(--ink) !important; }

/* (5) small "service info · reference" subheading above the read-only detail boxes (not a step) */
.nwo-svc-info-label { display:flex; align-items:center; gap:7px; font-size:12px; font-weight:600;
  color:var(--inkDim); margin-bottom:12px; opacity:.9; }
.nwo-svc-info-label i { font-size:15px; color:#ca8a04; }
html.dark .nwo-svc-info-label i { color:#ffce3a; }

/* (2) order tabs → segmented pill (keep bootstrap tab hook, restyle CSS only) */
.nwoMain .nwoNav.nav-tabs { display:inline-flex !important; gap:4px; padding:4px; margin:0; border:1px solid var(--line) !important;
  background:var(--side2) !important; border-radius:14px !important; list-style:none; }
.nwoMain .nwoNav.nav-tabs li { margin:0; border:0; }
.nwoMain .nwoNavLink { border:0 !important; background:transparent !important; cursor:pointer; font-family:inherit;
  font-size:13px; font-weight:700; color:var(--inkDim); padding:9px 16px; border-radius:10px !important; transition:.16s; white-space:nowrap; box-shadow:none !important; }
.nwoMain .nwoNavLink:hover { color:var(--ink); }
.nwoMain .nwoNavLink.active { background:var(--side) !important; color:var(--ink) !important; box-shadow:0 4px 12px rgba(0,0,0,.08) !important; }
html.dark .nwoMain .nwoNavLink.active { background:var(--line) !important; }

/* (6) total payable — stand out as the summary figure */
.v15-sum .v15-total { background:linear-gradient(135deg, rgba(255,193,7,.14), var(--side2));
  border:1.5px solid var(--brand); padding:18px 20px; box-shadow:0 8px 20px rgba(255,168,7,.16); }
.v15-sum .v15-total .k { font-size:14px; }
.v15-sum .v15-total .vv { font-size:30px; }

/* (3) merged "ข้อควรทราบ" accordion in readTab — allow long content + contact footer */
.nwo-read-acc { margin:0; }
#readTab .v15-acc.open .a { max-height:600px; }
.nwo-read-contact { display:flex; align-items:center; gap:8px; padding:14px 20px; font-size:12.5px; font-weight:600;
  color:var(--ink2); border-top:1px solid var(--line); }
.nwo-read-contact i { color:#06C755; font-size:17px; }

/* mobile: stack order card-header (title above) + full-width 3-segment tab pill */
@media (max-width: 575.98px) {
  .nwoMain .card-header .col-auto { flex:0 0 100%; max-width:100%; margin-top:12px; }
  .nwoMain .nwoNav.nav-tabs { display:flex !important; width:100%; }
  .nwoMain .nwoNav.nav-tabs li { flex:1 1 0; }
  .nwoMain .nwoNavLink { width:100%; text-align:center; padding:9px 6px; font-size:12px; }
}
/* === END U42 === */

/* ============================================================ U43 — New Order polish #2: order-success card, announcement banners, radius harmony, smaller service-detail */

/* (1) ORDER SUCCESS — was a broken columnar green alert; redesign as a clean success card (CSS only) */
.nwoMain .alert.alert-success {
  display:block !important; position:relative; float:none;
  background:linear-gradient(160deg, rgba(16,185,129,.12), var(--side)) !important;
  border:1px solid rgba(16,185,129,.35) !important; border-radius:20px !important;
  padding:24px 24px 20px !important; margin-bottom:20px; color:var(--ink) !important;
  line-height:1.95; box-shadow:0 10px 28px rgba(16,185,129,.12) !important;
}
.nwoMain .alert.alert-success > * { float:none !important; }
.nwoMain .alert.alert-success h4 {
  position:relative; font-size:18px; font-weight:800; color:var(--ink); margin:0 0 14px;
  padding-left:48px; min-height:38px; display:flex; align-items:center; width:auto;
}
.nwoMain .alert.alert-success h4::before {
  content:"\2713"; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:38px; height:38px; border-radius:12px; background:linear-gradient(135deg,#10b981,#059669);
  color:#fff; display:grid; place-items:center; font-size:21px; font-weight:700; box-shadow:0 6px 16px rgba(16,185,129,.32);
}
.nwoMain .alert.alert-success .close {
  position:absolute; top:16px; right:18px; opacity:.55; font-size:20px; text-shadow:none; color:var(--ink); z-index:2;
}
.nwoMain .alert.alert-success .close:hover { opacity:.9; }

/* (2) ANNOUNCEMENT BANNERS — were squishing the bold title into a 3-line column; make title a nowrap badge, wrap gracefully */
.nwo-alert-success, .nwo-alert-danger, .alert-unread-message { flex-wrap:wrap !important; align-items:center !important; }
.nwo-alert-success > strong, .nwo-alert-danger > strong, .alert-unread-message > strong {
  flex:0 0 auto !important; white-space:nowrap; display:inline-flex; align-items:center; gap:5px;
  padding:5px 12px; border-radius:999px; font-size:12px; font-weight:800; line-height:1.3;
  background:rgba(255,255,255,.18); margin:0;
}
html.light .nwo-alert-success > strong, html.light .nwo-alert-danger > strong { background:rgba(0,0,0,.10); }
.nwo-alert-btn { flex:0 0 auto !important; white-space:nowrap; }
@media (max-width: 575.98px) {
  .nwo-alert-success, .nwo-alert-danger, .alert-unread-message { gap:9px !important; padding:14px !important; }
  .nwo-alert-btn { width:100%; justify-content:center; margin-left:0 !important; }
}

/* (3) RADIUS HARMONY — unify big containers to 20px (daily check-in was a 999px pill = the worst offender) */
.l2v2-page-dashboard .ci-banner-card, .l2v2-page-dashboard .nwo-ci-banner-card { border-radius:20px !important; }
.nwo-ci-btn { border-radius:12px !important; }
.nwo-ci-streak-badge { border-radius:999px !important; }
.l2v2-page-dashboard #service-search-input, .l2v2-page-dashboard .search-input-container { border-radius:14px !important; }

/* (4) SERVICE DETAIL — keep the cards but smaller + flatter (reference info, not a step) */
.nwoMain .nwoDeIt { padding:8px 11px !important; min-height:42px !important; gap:9px !important; border-radius:13px !important; box-shadow:none !important; }
.nwoMain .nwoDeIt .icon { width:30px !important; height:30px !important; min-width:30px !important; min-height:30px !important; font-size:14px !important; }
.nwoMain .nwoDeIt .icon i { font-size:15px; }
.nwoMain .nwoDeIt .text span { font-size:12.5px; }
.nwoMain .nwoDeIt.description { min-height:0 !important; }
/* === END U43 === */

/* ============================================================ U44 — polish #4: compact sidebar, banner CTA width, points size, stat-card badge contrast */

/* (1) SIDEBAR (.l2v2-side) — a touch more compact so it scrolls less (not tiny). Global. */
.l2v2-side .sbMenu.sb-menu-ul { gap:2px !important; }
.l2v2-side .sb-i.mLink { padding:9px 16px !important; font-size:15px !important; }
.l2v2-side .sb-grp-h { padding:8px 12px 3px !important; font-size:11px !important; }

/* (2) BANNER CTA — was display:block → stretched full-width (too long) when wrapping; hug content */
.nwo-alert-btn { display:inline-flex !important; width:auto !important; align-self:flex-start; }

/* (3) POINTS stat value — was 22px and wrapping to 2 lines; reduce so it fits */
.cnb-4 .nbox-value { font-size:18px !important; }

/* (4) STAT-CARD BADGES (ข้อมูลสมาชิก / ใช้แต้ม) — text was sunken in dark+light; make solid + high contrast */
.nwo-card-badge-btn.nwo-card-badge-btn--green { background:#10b981 !important; color:#fff !important; border:0 !important; font-weight:700; }
.nwo-card-badge-btn.nwo-card-badge-btn--gold { background:linear-gradient(135deg,#ffce3a,#ffc107) !important; color:#0c151b !important; border:0 !important; font-weight:700; }
.nwo-card-badge-btn.nwo-card-badge-btn--green i, .nwo-card-badge-btn.nwo-card-badge-btn--gold i { color:inherit !important; }
/* === END U44 === */

/* ============================================================ U45 — Add Funds polish: cashback banner title, payment-method bonus badges */

/* cashback promo banner (.af-alert-banner) — title was squished into a narrow column (esp. mobile) */
.af-alert-banner { flex-wrap:wrap !important; align-items:center; row-gap:6px; }
.af-alert-banner > strong { white-space:nowrap; flex:0 0 auto; }
@media (max-width: 575.98px) { .af-alert-banner > strong { flex:1 1 100%; } }

/* payment-method bonus badges — fix contrast; "ไม่มีโบนัส" had a green bg (should be neutral) */
.af-pay-bonus { background:rgba(16,185,129,.18) !important; color:#059669 !important; font-weight:700; }
html.dark .af-pay-bonus { color:#34d399 !important; }
.af-pay-bonus.af-no-bonus { background:rgba(148,163,184,.16) !important; color:var(--inkDim) !important; }
/* === END U45 === */

/* ============================================================ U46 — Add Funds af2 redesign (restyle existing engine markup → af2 look; payment engine 100% preserved) */

/* (8) card titles readable in dark (was dark-on-dark; theme rule had higher specificity) */
.l2v2-page-addfunds .card .card-header .card-title,
.l2v2-page-addfunds .card .card-header .card-title span { color:var(--ink) !important; }

/* (9/10) payment method cards → compact af2-pay (icon on white bg so QR/logos never sink in dark) */
.l2v2-page-addfunds .af-pay-grid { display:grid !important; grid-template-columns:repeat(3,1fr) !important; gap:12px !important; }
.l2v2-page-addfunds .af-pay-card { position:relative; min-width:0; cursor:pointer; border:1.5px solid var(--line) !important; background:var(--side2) !important;
  border-radius:16px !important; padding:15px 14px !important; transition:.16s; display:flex !important; flex-direction:column; align-items:center; gap:10px; text-align:center; box-shadow:none !important; }
.l2v2-page-addfunds .af-pay-card:hover { border-color:var(--brand) !important; transform:translateY(-2px); }
.l2v2-page-addfunds .af-pay-card.af-pay-active { border-color:var(--brand) !important; background:linear-gradient(180deg,rgba(255,193,7,.10),var(--side2)) !important; box-shadow:0 10px 24px rgba(255,193,7,.16) !important; }
.l2v2-page-addfunds .af-pay-card.af-pay-active::after { content:'\2713'; position:absolute; top:-7px; right:-7px; width:21px; height:21px; border-radius:50%; background:var(--brand); color:var(--brandText); display:grid; place-items:center; font-size:12px; font-weight:700; border:2px solid var(--side); }
.l2v2-page-addfunds .af-pay-icon { width:46px !important; height:46px !important; min-width:46px; flex-shrink:0; border-radius:12px !important; padding:8px !important; background:#fff !important; box-shadow:0 2px 6px rgba(0,0,0,.10); display:grid !important; place-items:center; }
.l2v2-page-addfunds .af-pay-icon svg { width:100% !important; height:100% !important; }
.l2v2-page-addfunds .af-pay-name { font-size:13.5px !important; font-weight:700 !important; color:var(--ink) !important; line-height:1.3; }
.l2v2-page-addfunds .af-pay-bonus { display:inline-flex; align-items:center; gap:4px; font-size:11px !important; font-weight:800 !important; color:#059669 !important; background:rgba(16,185,129,.16) !important; padding:4px 11px !important; border-radius:999px !important; }
html.dark .l2v2-page-addfunds .af-pay-bonus { color:#34d399 !important; }
.l2v2-page-addfunds .af-pay-bonus.af-no-bonus { color:var(--inkDim) !important; background:rgba(148,163,184,.16) !important; }
.l2v2-page-addfunds .af-pay-bonus:empty { display:none; }

/* (11) receive box always inline + prominent (so bonus is visible while choosing amount, not buried at the bottom) */
.l2v2-page-addfunds #bonusCalculator { display:block !important; }
.l2v2-page-addfunds .bonus-result-minimal { border-radius:16px; padding:16px 20px; background:linear-gradient(120deg,rgba(16,185,129,.10),rgba(16,185,129,.03)); border:1px solid rgba(16,185,129,.25); }
.l2v2-page-addfunds .bonus-summary { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.l2v2-page-addfunds .bonus-label { font-size:12.5px; font-weight:600; color:var(--ink2); }
.l2v2-page-addfunds .bonus-total-value { font-family:'Inter',sans-serif; font-weight:800; font-size:25px; letter-spacing:-.02em; color:var(--ink); }
.l2v2-page-addfunds .bonus-details { margin-top:7px; font-size:12px; color:var(--inkDim); }
.l2v2-page-addfunds .bonus-details #bonusAmount, .l2v2-page-addfunds .bonus-details #bonusPercent { color:#10b981; font-weight:700; }
.l2v2-page-addfunds .bonus-note { margin-top:6px; font-size:11px; color:var(--inkDim); }

/* bonus ladder (right col) — radius + active-tier highlight consistency */
.l2v2-page-addfunds .bonus-progress-item { border-radius:14px; }
.l2v2-page-addfunds .af-bonus-flat, .l2v2-page-addfunds .af-bonus-none { border-radius:16px; }

/* desktop: bonus column sticky beside the form */
@media (min-width: 992px) {
  .l2v2-page-addfunds .col-lg-6:last-child .card { position:sticky; top:88px; }
}
/* mobile: payment cards 2-up, compact */
@media (max-width: 575.98px) {
  .l2v2-page-addfunds .af-pay-grid { grid-template-columns:repeat(2,1fr) !important; gap:10px !important; }
  .l2v2-page-addfunds .af-pay-card { padding:13px 10px !important; }
  .l2v2-page-addfunds .af-pay-name { font-size:12.5px !important; }
}
/* === END U46 === */

/* ============================================================ U47 — Add Funds FAITHFUL af2 rebuild (markup→af2 mockup; payment engine hooks preserved). compact header, af2 amount+quick chips, pill tabs, af2-tier ladder */

/* compact page header (replaces big dashboard-head hero) */
.l2v2-page-addfunds .af2-head { display:flex; align-items:center; gap:16px; }
.l2v2-page-addfunds .af2-head .hi { width:54px; height:54px; border-radius:16px; flex-shrink:0; display:grid; place-items:center; font-size:26px; color:#fff; background:linear-gradient(135deg,#2A62FF,#1842b8); box-shadow:0 10px 22px rgba(42,98,255,.32); }
.l2v2-page-addfunds .af2-head h1 { margin:0; font-size:23px; font-weight:800; letter-spacing:-.02em; color:var(--ink); }
.l2v2-page-addfunds .af2-head p { margin:3px 0 0; font-size:13px; color:var(--inkDim); }

/* card shell → af2 rounded */
.l2v2-page-addfunds .card.card-border { border-radius:22px; }

/* tabs → segmented pill */
.l2v2-page-addfunds .nwoNav.nav-tabs { display:inline-flex !important; gap:3px; padding:4px; margin:0; border:1px solid var(--line) !important; background:var(--side2) !important; border-radius:12px !important; list-style:none; }
.l2v2-page-addfunds .nwoNav.nav-tabs li { margin:0; border:0; }
.l2v2-page-addfunds .nwoNavLink { border:0 !important; background:transparent !important; box-shadow:none !important; cursor:pointer; font-size:12.5px; font-weight:700; color:var(--inkDim); padding:8px 16px; border-radius:9px !important; transition:.15s; }
.l2v2-page-addfunds .nwoNavLink.active { background:var(--side) !important; color:var(--ink) !important; box-shadow:0 3px 9px rgba(0,0,0,.1) !important; }
html.dark .l2v2-page-addfunds .nwoNavLink.active { background:var(--line) !important; }

/* amount → af2-amt big input + currency + quick chips */
.l2v2-page-addfunds .af2-amt { display:flex; align-items:center; gap:12px; padding:14px 18px; border-radius:16px; border:1.5px solid var(--line); background:var(--side2); transition:.15s; }
.l2v2-page-addfunds .af2-amt:focus-within { border-color:var(--brand); box-shadow:0 0 0 3px rgba(255,193,7,.16); }
.l2v2-page-addfunds .af2-amt .cur { font-family:'Inter',sans-serif; font-weight:700; font-size:20px; color:var(--inkDim); }
.l2v2-page-addfunds .af2-amt input#paymentAmount { flex:1; min-width:0; background:transparent !important; border:0 !important; outline:0 !important; box-shadow:none !important; padding:0 !important; height:auto !important; min-height:0 !important;
  font-family:'Inter',sans-serif; font-weight:800; font-size:26px; letter-spacing:-.02em; color:var(--ink) !important; }
.l2v2-page-addfunds .af2-amt .u { font-size:13px; color:var(--inkDim); font-weight:600; }
.l2v2-page-addfunds .af2-quick { display:flex; gap:8px; flex-wrap:wrap; margin-top:11px; }
.l2v2-page-addfunds .af2-quick button { border:1px solid var(--line); background:var(--side2); color:var(--ink2); font-family:'Inter',sans-serif; font-weight:700; font-size:12.5px; padding:8px 15px; border-radius:10px; cursor:pointer; transition:.14s; }
.l2v2-page-addfunds .af2-quick button:hover { border-color:var(--brand); color:var(--ink); }
.l2v2-page-addfunds .af2-quick button.on { background:var(--brand); color:var(--brandText); border-color:var(--brand); }

/* bonus ladder → af2-tier cards (replaces progress-bar tiers) */
.l2v2-page-addfunds .bonus-progress-container { display:flex; flex-direction:column; gap:9px; }
.l2v2-page-addfunds .af2-tier { display:flex; align-items:center; gap:13px; padding:13px 15px; border-radius:14px; border:1.5px solid var(--line); background:var(--side2); transition:.18s; position:relative; }
.l2v2-page-addfunds .af2-tier.on { border-color:var(--brand); background:linear-gradient(120deg,rgba(255,193,7,.12),var(--side2)); box-shadow:0 8px 20px rgba(255,193,7,.16); }
.l2v2-page-addfunds .af2-tier .rng { font-family:'Inter',sans-serif; font-size:12.5px; font-weight:700; color:var(--ink); flex:1; }
.l2v2-page-addfunds .af2-tier .rng small { display:block; font-size:10px; font-weight:500; color:var(--inkDim); margin-top:1px; }
.l2v2-page-addfunds .af2-tier .pct { font-family:'Inter',sans-serif; font-size:18px; font-weight:800; letter-spacing:-.02em; }
.l2v2-page-addfunds .af2-tier .pct.z { font-size:12px; font-weight:600; color:var(--inkDim); }
.l2v2-page-addfunds .af2-tier.t-none .pct { color:var(--inkDim); }
.l2v2-page-addfunds .af2-tier.t-low .pct { color:#2A62FF; }
.l2v2-page-addfunds .af2-tier.t-hot .pct { color:#ff7a00; }
.l2v2-page-addfunds .af2-tier.t-sup .pct { color:#10b981; }
.l2v2-page-addfunds .af2-tier .tag { position:absolute; top:-8px; left:13px; font-size:9px; font-weight:800; letter-spacing:.04em; padding:2px 8px; border-radius:999px; color:#fff; }
.l2v2-page-addfunds .af2-tier .tag.HOT { background:linear-gradient(90deg,#ff8a3c,#ff5722); }
.l2v2-page-addfunds .af2-tier .tag.SUPER { background:linear-gradient(90deg,#10b981,#059669); }
.l2v2-page-addfunds .af2-tier .nowtag { position:absolute; top:-8px; right:13px; font-size:9px; font-weight:800; padding:2px 9px; border-radius:999px; background:var(--brand); color:var(--brandText); }
/* === END U47 === */

/* ============================================================ U48 — Add Funds af2 fidelity: left-align method cards (icon top-left) + gold submit button (match mockup) */
.l2v2-page-addfunds .af-pay-card { align-items:flex-start !important; text-align:left !important; }
.l2v2-page-addfunds .af-pay-icon { align-self:flex-start; margin:0 !important; }
.l2v2-page-addfunds .af-pay-name { width:100%; text-align:left; }
.l2v2-page-addfunds .af-pay-bonus { align-self:flex-start; }

/* gold gradient submit (af2-submit) */
.l2v2-page-addfunds #submitButton,
.l2v2-page-addfunds #manualSubmitButton .btn {
  border:0 !important; border-radius:16px !important; font-family:inherit; font-weight:800 !important; font-size:15px !important; padding:16px !important;
  background:linear-gradient(95deg,#FFDD63,#FBBA00) !important; color:#3a2c00 !important; box-shadow:0 12px 26px rgba(245,180,7,.36) !important; transition:.18s; }
.l2v2-page-addfunds #submitButton:hover:not(:disabled),
.l2v2-page-addfunds #manualSubmitButton .btn:hover:not(:disabled) { transform:translateY(-2px); box-shadow:0 16px 34px rgba(245,180,7,.46) !important; }
.l2v2-page-addfunds #submitButton:disabled,
.l2v2-page-addfunds #manualSubmitButton .btn:disabled { opacity:.5 !important; box-shadow:none !important; cursor:not-allowed; }
/* === END U48 === */

/* ============================================================ U49 — Add Funds receive-box effects (af2): count-up + green glow + coin burst + unlock badge */
.l2v2-page-addfunds .bonus-result-minimal { position:relative; overflow:visible; transition:box-shadow .2s; }
@keyframes afReceiveGlow { 0%{box-shadow:0 0 0 0 rgba(16,185,129,0);} 28%{box-shadow:0 0 0 4px rgba(16,185,129,.22),0 12px 30px rgba(16,185,129,.28);} 100%{box-shadow:0 0 0 0 rgba(16,185,129,0);} }
.l2v2-page-addfunds .bonus-result-minimal.afwin { animation:afReceiveGlow 1.4s ease; }
.l2v2-page-addfunds .bonus-result-minimal.afwin .bonus-total-value { color:#10b981; transition:color .2s; }
.l2v2-page-addfunds .af-burst { position:absolute; inset:0; pointer-events:none; overflow:visible; z-index:4; }
@keyframes afCoinUp { 0%{transform:translateY(8px) scale(.5) rotate(0);opacity:0;} 18%{opacity:1;} 100%{transform:translateY(-52px) scale(1) rotate(28deg);opacity:0;} }
.l2v2-page-addfunds .af-burst .cn { position:absolute; bottom:16px; color:#FBBA00; font-size:17px; text-shadow:0 2px 5px rgba(245,180,7,.5); animation:afCoinUp 1.15s ease-out forwards; }
@keyframes afUnlockPop { 0%{transform:translateX(-50%) scale(.3);opacity:0;} 55%{transform:translateX(-50%) scale(1.1);} 100%{transform:translateX(-50%) scale(1);opacity:1;} }
.l2v2-page-addfunds .af-unlock { position:absolute; top:-13px; left:50%; display:inline-flex; align-items:center; gap:5px; white-space:nowrap; background:linear-gradient(95deg,#10b981,#059669); color:#fff; font-size:11.5px; font-weight:800; padding:5px 14px; border-radius:999px; box-shadow:0 8px 18px rgba(16,185,129,.42); animation:afUnlockPop .5s cubic-bezier(.34,1.56,.64,1) both; z-index:5; }
@media (prefers-reduced-motion: reduce) { .l2v2-page-addfunds .bonus-result-minimal.afwin, .l2v2-page-addfunds .af-burst .cn, .l2v2-page-addfunds .af-unlock { animation:none !important; } }
/* === END U49 === */

/* ============================================================ U50 — Add Funds MOBILE: inline live bonus meter + slide-up bottom sheet (af2). desktop unchanged */
.l2v2-page-addfunds .af2-meter { display:none; border-radius:16px; padding:15px 17px; background:var(--side2); border:1px solid var(--line); margin-bottom:16px; }
.l2v2-page-addfunds .af2-meter .mtop { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:11px; }
.l2v2-page-addfunds .af2-m-now { display:flex; align-items:center; gap:8px; font-size:12px; font-weight:700; color:var(--ink); white-space:nowrap; }
.l2v2-page-addfunds .af2-m-now b { font-family:'Inter',sans-serif; color:#10b981; font-size:15px; }
.l2v2-page-addfunds .af2-meter .all { display:inline-flex; align-items:center; gap:3px; font-size:11.5px; font-weight:700; color:#E0A500; cursor:pointer; background:none; border:0; font-family:inherit; padding:0; }
.l2v2-page-addfunds .af2-segs { display:flex; gap:4px; }
.l2v2-page-addfunds .af2-segs .sg { flex:1; height:7px; border-radius:4px; background:var(--line); transition:.25s; }
.l2v2-page-addfunds .af2-segs .sg.fill { background:linear-gradient(90deg,#FFDD63,#FBBA00); box-shadow:0 1px 6px rgba(245,180,7,.5); }
.l2v2-page-addfunds .af2-segs .sg.hot.fill { background:linear-gradient(90deg,#ff8a3c,#ff5722); }
.l2v2-page-addfunds .af2-segs .sg.sup.fill { background:linear-gradient(90deg,#10b981,#059669); box-shadow:0 1px 8px rgba(16,185,129,.55); }
.l2v2-page-addfunds .af2-m-nudge { margin-top:11px; font-size:11.5px; color:var(--ink2); line-height:1.45; }
.l2v2-page-addfunds .af2-m-nudge b { color:var(--ink); font-weight:700; }
.l2v2-page-addfunds .af2-m-nudge .up { color:#E0A500; font-weight:800; }
.l2v2-page-addfunds .af2-m-nudge .mx { color:#10b981; font-weight:700; }

.l2v2-page-addfunds .af2-sheet-scrim { position:fixed; inset:0; background:rgba(8,12,16,.5); backdrop-filter:blur(2px); z-index:99998; opacity:0; pointer-events:none; transition:.25s; }
.l2v2-page-addfunds .af2-sheet-scrim.open { opacity:1; pointer-events:auto; }
.l2v2-page-addfunds .af2-sheet { position:fixed; left:0; right:0; bottom:0; z-index:99999; background:var(--side); border-radius:26px 26px 0 0; padding:8px 0 26px; transform:translateY(110%); transition:transform .32s cubic-bezier(.32,.72,0,1); max-height:82%; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 -10px 40px rgba(0,0,0,.35); }
.l2v2-page-addfunds .af2-sheet.open { transform:translateY(0); }
.l2v2-page-addfunds .af2-sheet .grab { width:38px; height:5px; border-radius:3px; background:var(--line2,#cbd5e1); margin:6px auto 12px; flex-shrink:0; }
.l2v2-page-addfunds .af2-sheet .shead { display:flex; align-items:center; justify-content:space-between; padding:0 20px 14px; border-bottom:1px solid var(--line); }
.l2v2-page-addfunds .af2-sheet .shead h3 { margin:0; font-size:16px; font-weight:800; color:var(--ink); }
.l2v2-page-addfunds .af2-sheet .shead p { margin:2px 0 0; font-size:11.5px; color:var(--inkDim); }
.l2v2-page-addfunds .af2-sheet .sx { width:30px; height:30px; border-radius:50%; background:var(--side2); border:0; color:var(--ink2); cursor:pointer; font-size:18px; display:grid; place-items:center; }
.l2v2-page-addfunds .af2-sheet .sbody { overflow-y:auto; padding:16px 18px 4px; display:flex; flex-direction:column; gap:9px; }

@media (max-width: 991.98px) {
  .l2v2-page-addfunds .af2-meter { display:block; }
  .l2v2-page-addfunds .col-lg-5 { display:none !important; }
}
@media (min-width: 992px) {
  .l2v2-page-addfunds .af2-sheet, .l2v2-page-addfunds .af2-sheet-scrim { display:none !important; }
}
/* === END U50 === */

/* ============================================================ U51 — Add Funds bottom sheet renders just outside .l2v2-page-addfunds wrapper → unscoped styles */
.af2-sheet-scrim { position:fixed; inset:0; background:rgba(8,12,16,.5); backdrop-filter:blur(2px); z-index:99998; opacity:0; pointer-events:none; transition:.25s; }
.af2-sheet-scrim.open { opacity:1; pointer-events:auto; }
.af2-sheet { position:fixed; left:0; right:0; bottom:0; z-index:99999; background:var(--side); border-radius:26px 26px 0 0; padding:8px 0 26px; transform:translateY(110%); transition:transform .32s cubic-bezier(.32,.72,0,1); max-height:82%; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 -10px 40px rgba(0,0,0,.35); }
.af2-sheet.open { transform:translateY(0); }
.af2-sheet .grab { width:38px; height:5px; border-radius:3px; background:var(--line2,#cbd5e1); margin:6px auto 12px; flex-shrink:0; }
.af2-sheet .shead { display:flex; align-items:center; justify-content:space-between; padding:0 20px 14px; border-bottom:1px solid var(--line); }
.af2-sheet .shead h3 { margin:0; font-size:16px; font-weight:800; color:var(--ink); }
.af2-sheet .shead p { margin:2px 0 0; font-size:11.5px; color:var(--inkDim); }
.af2-sheet .sx { width:30px; height:30px; border-radius:50%; background:var(--side2); border:0; color:var(--ink2); cursor:pointer; font-size:18px; display:grid; place-items:center; }
.af2-sheet .sbody { overflow-y:auto; padding:16px 18px 4px; display:flex; flex-direction:column; gap:9px; }
.af2-sheet .af2-tier { display:flex; align-items:center; gap:13px; padding:13px 15px; border-radius:14px; border:1.5px solid var(--line); background:var(--side2); position:relative; }
.af2-sheet .af2-tier.on { border-color:var(--brand); background:linear-gradient(120deg,rgba(255,193,7,.12),var(--side2)); }
.af2-sheet .af2-tier .rng { font-family:'Inter',sans-serif; font-size:12.5px; font-weight:700; color:var(--ink); flex:1; }
.af2-sheet .af2-tier .rng small { display:block; font-size:10px; font-weight:500; color:var(--inkDim); margin-top:1px; }
.af2-sheet .af2-tier .pct { font-family:'Inter',sans-serif; font-size:18px; font-weight:800; }
.af2-sheet .af2-tier .pct.z { font-size:12px; font-weight:600; color:var(--inkDim); }
.af2-sheet .af2-tier.t-low .pct { color:#2A62FF; } .af2-sheet .af2-tier.t-hot .pct { color:#ff7a00; } .af2-sheet .af2-tier.t-sup .pct { color:#10b981; } .af2-sheet .af2-tier.t-none .pct { color:var(--inkDim); }
.af2-sheet .af2-tier .tag { position:absolute; top:-8px; left:13px; font-size:9px; font-weight:800; padding:2px 8px; border-radius:999px; color:#fff; }
.af2-sheet .af2-tier .tag.HOT { background:linear-gradient(90deg,#ff8a3c,#ff5722); } .af2-sheet .af2-tier .tag.SUPER { background:linear-gradient(90deg,#10b981,#059669); }
.af2-sheet .af2-tier .nowtag { position:absolute; top:-8px; right:13px; font-size:9px; font-weight:800; padding:2px 9px; border-radius:999px; background:var(--brand); color:var(--brandText); }
@media (min-width: 992px) { .af2-sheet, .af2-sheet-scrim { display:none !important; } }
/* === END U51 === */

/* ============================================================ U52 — Add Funds FLATTEN: remove nested section-wrapper boxes (amount/receive) → single clean card, spaced sections */
/* amount section: drop the outer wrapper box (kept only the af2-amt input box inside) */
.l2v2-page-addfunds #paymentAmountField { border:0 !important; background:none !important; padding:0 !important; border-radius:0 !important; box-shadow:none !important; }
/* receive: was a gold dashed double-box → single clean solid green box (af2-receive) */
.l2v2-page-addfunds #bonusCalculator .bonus-result-minimal {
  border:1px solid rgba(16,185,129,.28) !important; border-style:solid !important;
  background:linear-gradient(120deg, rgba(16,185,129,.12), rgba(16,185,129,.04)) !important;
  border-radius:16px !important; padding:18px 20px !important; }
/* receive inner: kill any nested border/box so it's one layer */
.l2v2-page-addfunds .bonus-result-minimal .bonus-summary,
.l2v2-page-addfunds .bonus-result-minimal .bonus-details { border:0 !important; background:none !important; padding:0 !important; }
/* === END U52 === */

/* ============================================================ U53 — Add Funds mobile: tab pill full-width (was stacking) + clean history rows */
@media (max-width: 767.98px) {
  .l2v2-page-addfunds .card-header .col-md-auto { width:100%; flex:0 0 100%; max-width:100%; margin-top:10px; }
  .l2v2-page-addfunds .nwoNav.nav-tabs { display:flex !important; width:100%; flex-wrap:nowrap; }
  .l2v2-page-addfunds .nwoNav.nav-tabs li { flex:1 1 0; min-width:0; }
  .l2v2-page-addfunds .nwoNavLink { width:100%; text-align:center; }
}

/* history rows → clean af2-hrow style */
.l2v2-page-addfunds .afh-list { display:flex; flex-direction:column; }
.l2v2-page-addfunds .afh-row { display:flex !important; align-items:center; gap:12px; padding:14px 6px !important; border-bottom:1px solid var(--line); flex-wrap:nowrap; }
.l2v2-page-addfunds .afh-row:last-child { border-bottom:0; }
.l2v2-page-addfunds .afh-row .ic { width:40px; height:40px; border-radius:12px; flex-shrink:0; display:grid; place-items:center; font-size:19px; background:rgba(42,98,255,.12); color:#2A62FF; }
.l2v2-page-addfunds .afh-row .ic.tm { background:rgba(255,107,0,.12); color:#FF6B00; }
.l2v2-page-addfunds .afh-row .ic.bk { background:rgba(16,185,129,.12); color:#10b981; }
.l2v2-page-addfunds .afh-row .ic.cr { background:rgba(91,108,240,.14); color:#5b6cf0; }
.l2v2-page-addfunds .afh-row .label { flex:1; min-width:0; font-size:13.5px; font-weight:700; color:var(--ink); line-height:1.3; overflow:hidden; }
.l2v2-page-addfunds .afh-row .label small { display:block; font-size:11px; font-weight:500; color:var(--inkDim); margin-top:1px; }
.l2v2-page-addfunds .afh-row .ref { display:none !important; }
.l2v2-page-addfunds .afh-row .date { font-size:10.5px; color:var(--inkDim); text-align:right; flex-shrink:0; line-height:1.3; }
.l2v2-page-addfunds .afh-row .date b { display:block; font-weight:600; color:var(--ink2); }
.l2v2-page-addfunds .afh-row .amt { font-family:'Inter',sans-serif; font-weight:800; font-size:14px; color:var(--ink); text-align:right; white-space:nowrap; flex-shrink:0; }
.l2v2-page-addfunds .afh-row .st { font-size:10.5px; font-weight:700; padding:4px 10px; border-radius:999px; flex-shrink:0; }
.l2v2-page-addfunds .afh-row .st.done { color:#10b981; background:rgba(16,185,129,.14); }
.l2v2-page-addfunds .afh-row .st.fail { color:#ef4444; background:rgba(239,68,68,.12); }
@media (max-width: 575.98px) { .l2v2-page-addfunds .afh-row .date { display:none; } }
/* === END U53 === */

/* === U54/U55 (bottom nav) REMOVED — superseded by the rewritten ".l2v2 .my-mobile-navbar" liquid-glass block above (single source of truth, higher specificity). === */

/* ============================================================ U57 — mobile side-drawer fixes: (1) hide bottom nav while drawer open (it floated on top & covered the LINE button), (2) make the close ✕ tappable above the scrim. JS in layout.twig adds tap-scrim/Escape to close. */
/* hide the floating liquid-glass bottom nav whenever the side drawer is open */
body.drawer-open .my-mobile-navbar { display: none !important; }
@media (max-width: 991.98px) {
  /* the scrim is .appAuth.sidebar-active::before (z 1030) — lift the close button above it so the ✕ is clickable */
  .appAuth.sidebar-active .menu-btn { z-index: 1060 !important; }
  /* now that the nav is hidden while open, give the drawer footer (LINE button) clearance from the iOS home indicator */
  body#appDashboard.l2v2 .appSidebar.l2v2-side { padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important; }
  /* mobile: the width-collapse button is desktop-only — swap it for a clear close ✕ inside the drawer header */
  .l2v2 .l2v2-side .col-btn { display: none !important; }
  .l2v2 .l2v2-side .sb-top { display: flex; align-items: center; }
  .l2v2 .l2v2-side .sb-top .lg { flex: 1; min-width: 0; }
}
/* the close ✕ lives inside the drawer (z above the scrim) so it is always visible + tappable; hidden on desktop */
.l2v2 .l2v2-side .sb-close { display: none; }
@media (max-width: 991.98px) {
  .l2v2 .l2v2-side .sb-close {
    display: grid; place-items: center;
    width: 36px; height: 36px; flex: 0 0 36px;
    margin-left: auto; padding: 0;
    border-radius: 10px;
    background: rgba(127,140,160,.14);
    border: 1px solid var(--line);
    color: var(--ink); font-size: 21px; line-height: 1;
    cursor: pointer; transition: .14s;
  }
  .l2v2 .l2v2-side .sb-close:active { transform: scale(.92); background: rgba(127,140,160,.24); }
}
/* === END U57 === */

/* ============================================================ U58 — signin landing harmonization: warm-neutral gray tokens (kill "เทาอมเขียว") + body/landing yellow seam. Scoped to landing only (logged-out body has no .l2v2). NOTE: dark wcu cards are already OPAQUE navy via the L23037 !important rule (the legacy teal hover at L3460 never renders), and the .hsob tabs use intentional per-platform brand colors — so no dark-section overrides are needed here. */
:root {
  --wn-50:#faf8f4; --wn-100:#f3efe8; --wn-200:#e7e1d6; --wn-300:#cfc6b6; --wn-500:#6e665b; --wn-600:#4a443a;
}
/* kill the body(#ffbf00) vs .lk-land(#ffc107) yellow seam */
html:has(.lk-land) body { background:#ffc107 !important; }
/* === END U58 === */

/* ============================================================ U59 — signin landing WHOLE-PAGE cohesion (one story): unified dark-card system + one header icon-badge + ONE warm-neutral gray + FLAT (no yellow glow) + de-green/teal. Scoped .lk-land, !important to beat scattered legacy rules. Colorful hero hex + comparison table kept on purpose. */
.lk-land {
  --lkc-card:#0f1b24; --lkc-bd:rgba(255,193,7,.14); --lkc-r:16px;
  --lkc-shadow:0 12px 30px rgba(12,21,27,.18); --lkc-muted:rgba(255,255,255,.66);
}

/* (1) Section-header icon badge: green #00AF4C → navy tile + yellow icon, flat (Why-Choose / Comparison / FAQ / Blog) */
.lk-land .home-title .hh-icon::before,
.lk-land .home-title .hh-content::before { display:none !important; }
.lk-land .home-title .hh-content { background:#0c151b !important; box-shadow:var(--lkc-shadow) !important; border-radius:14px !important; }
.lk-land .home-title .hh-content i { color:var(--y-400) !important; }

/* (2) Section title on the yellow page: one size, weight, dark ink */
.lk-land .home-title h2 { font-size:clamp(30px,4.6vw,44px) !important; font-weight:800 !important; color:#0c151b !important; }
.lk-land .home-title p { color:rgba(12,21,27,.6) !important; }

/* (3) Unified dark-card system: navy, radius 16, flat shadow, gold-hairline border (was: wcu 22px+clip, hpw 10px+gradient-border, stepbox 10px) */
.lk-land .wcu-box,
.lk-land .hpw-box, .lk-land .hpw-box-r,
.lk-land .stepbox .sboxes, .lk-land .stepbox .sbbody,
.lk-land .sp-faq-card,
.lk-land .signin-blog-card { border-radius:var(--lkc-r) !important; box-shadow:var(--lkc-shadow) !important; }
.lk-land .wcu-box { clip-path:none !important; border:1px solid var(--lkc-bd) !important; }
.lk-land .wcu-content .wcu-conteiner .wcu-box { border-radius:var(--lkc-r) !important; }
.lk-land .stepbox .sboxes, .lk-land .stepbox .sbbody { border:1px solid var(--lkc-bd) !important; }

/* (4) ONE warm-neutral body gray on dark cards (was cool #9799A3 / #c3c3c3 / #B5B5B5 / #6c757d) */
.lk-land .wcu-box .wcu-text,
.lk-land .hpw-text, .lk-land .hpw-item .hpw-text,
.lk-land .stepbox .sboxes .sbtext, .lk-land .stepbox .sbbody .sbtext,
.lk-land .sp-faq-card p { color:var(--lkc-muted) !important; }

/* (5) stepbox hover: stay navy + subtle gold lift (was: ENTIRE card turns yellow) */
.lk-land .stepbox .sboxes:hover, .lk-land .stepbox .sbbody:hover {
  background:#13212b !important; border-color:rgba(255,193,7,.42) !important; transform:translateY(-6px) !important; }
.lk-land .stepbox .sboxes:hover .sbtext, .lk-land .stepbox .sbbody:hover .sbtext { color:#fff !important; }
.lk-land .stepbox .sboxes:hover .sbicon i, .lk-land .stepbox .sbbody:hover .sbicon i { color:var(--y-400) !important; }

/* (6) Flatten yellow GLOWs on FAQ + blog cards/badges */
.lk-land .sp-faq-card:hover, .lk-land .signin-blog-card:hover { box-shadow:var(--lkc-shadow) !important; }
.lk-land .sp-faq-card h3 i { box-shadow:0 2px 6px rgba(12,21,27,.18) !important; }

/* (7) de-teal legacy wcu hover (#04843B → navy; base is already navy !important, belt-and-suspenders) */
.lk-land .wcu-content .wcu-conteiner:hover .wcu-box { background:#0f1b24 !important; }
/* === END U59 === */

/* ============================================================ U60 — Apple-like full-page redesign layer (.lk-land). Builds on U58/U59. ONE type scale + spacing rhythm + clean headers + unified card/icon/button. High-specificity / !important to beat scattered legacy rules. */

/* A. SPACING RHYTHM — uniform vertical cadence; kill extreme + negative spacing */
.lk-land .home-section { padding:clamp(58px,7vw,94px) 24px !important; }
.lk-land .how-pworks { padding:clamp(58px,7vw,94px) 24px !important; }
.lk-land .how-pworks-bottom { padding:0 24px clamp(40px,6vw,80px) !important; }
.lk-land .how-pworks-bottom .hpw-box { margin-top:0 !important; }
.lk-land .signin-comparison-section,
.lk-land .signin-faq-section,
.lk-land .signin-blog-section { padding:clamp(58px,7vw,94px) 24px !important; }

/* B. SECTION HEADERS — one clean, consistent type system; drop green badges, ghost watermarks, dividers */
.lk-land .home-title .hh-icon,
.lk-land .home-title .divider,
.lk-land .home-section .col-lg-6 .hsl-title .hsl-title-icon { display:none !important; }
/* ghost watermarks ("10+", "ALL SOCIAL") live as ::before on section .container */
.lk-land .home-section > .container::before { content:none !important; display:none !important; }
.lk-land .home-title::before, .lk-land .home-title::after,
.lk-land .home-title h2::before, .lk-land .home-title h2::after,
.lk-land .how-pworks .hpw-title::before, .lk-land .how-pworks .hpw-title::after,
.lk-land .home-section .col-lg-6 .hsl-title h2::before,
.lk-land .home-section .col-lg-6 .hsl-title h2::after { content:none !important; display:none !important; }
.lk-land .home-title h2,
.lk-land .how-pworks .hpw-title,
.lk-land .home-section .col-lg-6 .hsl-title h2 {
  font-size:clamp(30px,4.4vw,46px) !important; font-weight:800 !important; color:#0c151b !important;
  letter-spacing:-.02em !important; line-height:1.14 !important; margin:0 0 14px !important; }
.lk-land .home-title p,
.lk-land .how-pworks .hpw-text,
.lk-land .home-section .col-lg-6 .hsl-text {
  font-size:clamp(15px,1.55vw,17px) !important; font-weight:500 !important; line-height:1.6 !important;
  color:rgba(12,21,27,.62) !important; }
.lk-land .home-title p { max-width:660px; margin:0 auto !important; }
.lk-land .how-pworks .hpw-text { max-width:660px; margin:0 auto !important; }
.lk-land .home-section .col-lg-6 .hsl-text { margin:0 0 26px !important; }
.lk-land .home-title { margin-bottom:clamp(34px,4.5vw,52px) !important; }
.lk-land .how-pworks .text-center { margin-bottom:clamp(8px,2vw,20px) !important; }

/* C. BUTTONS — consistent primary (flat yellow) + secondary (ink outline) */
.lk-land .hl-btns .btn-primary, .lk-land .btn-hero-primary {
  background:#0c151b !important; color:#fff !important; border:0 !important;
  box-shadow:none !important; border-radius:14px !important; font-weight:800 !important; padding:14px 30px !important; }
.lk-land .signin-hero-dark-btn, .lk-land .hl-btns .btn-outline {
  background:transparent !important; color:#0c151b !important; border:2px solid #0c151b !important;
  box-shadow:none !important; border-radius:14px !important; font-weight:700 !important; }

/* D. FLAT everywhere — purge remaining yellow GLOW halos on landing icons/tags/CTAs (keep flat, on-brand) */
.lk-land .wcu-icon, .lk-land .hsl-title-icon, .lk-land .hsl-cta,
.lk-land .signin-tag-gold, .lk-land .signin-faq-section .hh-content,
.lk-land .sp-faq-card h3 i,
.lk-land .home-tabs .hsl-title .hsl-title-icon,
.lk-land .hsl-title .hsl-title-icon { box-shadow:none !important; }
/* === END U60 === */

/* ============================================================ U61 — Signin "Solar" full-page redesign (recreated from design bundle yellow-signin.jsx). Scoped to .yp. Replaces the old .lk-land landing (U58/U60 above now dead — no .lk-land in markup). */
.yp { --y:#FFC400; --y-deep:#E7A700; --y-tint:#FFD740; --y-soft:#FFE9A0;
  --ink:#141414; --ink2:#3a3a3a; --paper:#ffffff; --paper2:#FFFDF6; --mut:#6b6b6b;
  color-scheme:only light; background:var(--y); color:var(--ink);
  font-family:'Inter','Noto Sans Thai',-apple-system,BlinkMacSystemFont,sans-serif;
  -webkit-font-smoothing:antialiased; overflow-x:clip; min-height:100vh; }
.yp *, .yp *::before, .yp *::after { box-sizing:border-box; }
.yp img, .yp input, .yp button, .yp select, .yp textarea { color-scheme:only light; }
.yp .wrap { max-width:1160px; margin:0 auto; padding:0 40px; position:relative; }
/* integration: this landing serves the logged-out page; hide layout's public header (avoid double nav) + unify body bg */
body:has(.yp), .yp-on { background:#FFC400 !important; }
/* U173 2026-07-28: keyed on .yp-nav (the nav that would collide), NOT on the .yp page wrapper.
   Deleting the <nav class="yp-nav"> block from a page now hands that page straight back to the
   layout header with no edit here. CONTRACT: when you delete a .yp-nav block from a *.twig, delete
   that file's `document.body.classList.add('yp-on')` line in the same save — .yp-on is the
   no-:has() fallback and both signals must describe the same state. */
body:has(.yp-nav) .header, .yp-on .header { display:none !important; }
/* hide layout's public footer too (mine is footer.yp-foot) — avoid double footer */
body:has(.yp) footer:not(.yp-foot), .yp-on footer:not(.yp-foot) { display:none !important; }
.yp-pt-panel:not(.active) { display:none !important; }
.yp .yp-ph img { width:100%; height:100%; object-fit:cover; display:block; border-radius:inherit; }
.yp .yp-ph { background-image:none; }

/* type */
.yp .yp-kicker { display:inline-flex; align-items:center; gap:9px; font-size:13px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; margin:0 0 18px; }
.yp .yp-kicker .bar { width:26px; height:2px; background:var(--ink); }
.yp h2.yp-h2 { font-size:clamp(34px,3.8vw,52px); line-height:1.16; font-weight:800; letter-spacing:-0.025em; margin:0; }
.yp .yp-sub { font-size:clamp(17px,1.5vw,20px); line-height:1.55; color:var(--ink2); margin:16px auto 0; max-width:600px; font-weight:400; }
.yp .yp-head { text-align:center; margin-bottom:60px; display:flex; flex-direction:column; align-items:center; }
.yp .yp-sec { padding:clamp(72px,9vw,118px) 0; position:relative; }

/* buttons */
.yp .yp-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:inherit; font-size:16px; font-weight:600; border:0; cursor:pointer; text-decoration:none; white-space:nowrap; transition:transform .18s ease, box-shadow .18s ease, background .18s ease; }
.yp .yp-btn-ink { background:var(--ink); color:#fff; padding:15px 30px; border-radius:980px; }
.yp .yp-btn-ink:hover { transform:translateY(-2px); box-shadow:0 14px 30px rgba(0,0,0,.28); color:#fff; }
.yp .yp-btn-paper { background:#fff; color:var(--ink); padding:15px 30px; border-radius:980px; box-shadow:0 8px 22px rgba(0,0,0,.1); }
.yp .yp-btn-paper:hover { transform:translateY(-2px); box-shadow:0 16px 34px rgba(0,0,0,.16); color:var(--ink); }
.yp .yp-link { display:inline-flex; align-items:center; gap:6px; font-size:16px; font-weight:600; color:var(--ink); text-decoration:none; cursor:pointer; white-space:nowrap; }
.yp .yp-link i { transition:transform .18s; }
.yp .yp-link:hover i { transform:translateX(3px); }
.yp .yp-link u { text-decoration:none; box-shadow:inset 0 -2px 0 var(--ink); }

/* NAV */
.yp .yp-nav { position:sticky; top:0; z-index:50; background:rgba(255,196,0,.82); backdrop-filter:saturate(160%) blur(14px); -webkit-backdrop-filter:saturate(160%) blur(14px); border-bottom:1.5px solid rgba(0,0,0,.14); }
.yp .yp-nav .row { max-width:1160px; margin:0 auto; height:64px; padding:0 40px; display:flex; align-items:center; gap:36px; }
.yp .yp-nav .brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); }
.yp .yp-nav .mark { width:34px; height:34px; border-radius:9px; background:var(--ink); display:grid; place-items:center; color:var(--y); font-weight:800; font-size:19px; }
.yp .yp-nav .word { font-weight:800; font-size:19px; letter-spacing:-0.02em; }
.yp .yp-nav .links { display:flex; gap:30px; flex:1; }
.yp .yp-nav .links a { color:var(--ink); text-decoration:none; font-size:15px; font-weight:600; opacity:.82; position:relative; }
.yp .yp-nav .links a::after { content:''; position:absolute; left:0; bottom:-4px; width:0; height:2px; background:var(--ink); transition:width .2s; }
.yp .yp-nav .links a:hover { opacity:1; } .yp .yp-nav .links a:hover::after { width:100%; }
.yp .yp-nav .signup { background:var(--ink); color:#fff; padding:9px 20px; border-radius:980px; font-size:14px; font-weight:600; border:0; cursor:pointer; font-family:inherit; white-space:nowrap; text-decoration:none; }

/* background art */
.yp .yp-art { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.yp .yp-art .ring { position:absolute; border-radius:50%; border:2px solid rgba(0,0,0,.12); }
.yp .yp-art .disc { position:absolute; border-radius:50%; }
.yp .yp-fx { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.yp .yp-fx .chip { position:absolute; padding:0; box-sizing:border-box; display:grid; place-items:center; border-radius:16px; box-shadow:0 12px 26px rgba(0,0,0,.16); }
.yp .yp-fx .chip.sm { width:46px; height:46px; font-size:20px; border-radius:13px; }
.yp .yp-fx .chip.md { width:60px; height:60px; font-size:26px; border-radius:17px; }
.yp .yp-fx .chip.lg { width:74px; height:74px; font-size:32px; border-radius:20px; }
.yp .yp-fx .chip.ink { background:var(--ink); }
.yp .yp-fx .chip.paper { background:#fff; color:var(--ink); }
.yp .yp-fx .ringlet { position:absolute; border-radius:50%; border:2px solid rgba(0,0,0,.11); }
.yp .yp-fx .blob { position:absolute; border-radius:50%; background:#fff; opacity:.4; }
.yp .yp-fx .blob.ink { background:var(--ink); opacity:.06; }
.yp .yp-fx .plus { position:absolute; color:rgba(0,0,0,.14); font-size:30px; }
.yp .wrap > * { position:relative; z-index:1; }

@media (prefers-reduced-motion: no-preference){
  .yp.anim .float { animation:ypf 7s ease-in-out infinite; }
  @keyframes ypf { 0%,100%{ transform:translateY(0) rotate(var(--r,0deg)); } 50%{ transform:translateY(-16px) rotate(calc(var(--r,0deg) + 5deg)); } }
  .yp.anim .floatA { animation:ypfA 8s ease-in-out infinite; }
  .yp.anim .floatB { animation:ypfB 6.5s ease-in-out infinite; }
  .yp.anim .floatC { animation:ypfC 9.5s ease-in-out infinite; }
  @keyframes ypfA { 0%,100%{ transform:translateY(0) rotate(var(--r,0deg)); } 50%{ transform:translateY(-22px) rotate(calc(var(--r,0deg) - 7deg)); } }
  @keyframes ypfB { 0%,100%{ transform:translate(0,0) rotate(var(--r,0deg)); } 50%{ transform:translate(10px,-15px) rotate(calc(var(--r,0deg) + 9deg)); } }
  @keyframes ypfC { 0%,100%{ transform:translateY(0) rotate(var(--r,0deg)); } 33%{ transform:translateY(-12px) rotate(calc(var(--r,0deg) + 6deg)); } 66%{ transform:translateY(8px) rotate(calc(var(--r,0deg) - 4deg)); } }
}

/* HERO */
.yp .yp-hero { position:relative; padding:clamp(48px,7vw,96px) 0 clamp(64px,8vw,110px); }
.yp .yp-hero .grid { position:relative; z-index:2; display:grid; grid-template-columns:1fr 420px; gap:60px; align-items:center; }
.yp .yp-badge { display:inline-flex; align-items:center; gap:10px; background:var(--ink); color:var(--y); padding:8px 16px 8px 9px; border-radius:980px; font-size:13px; font-weight:600; margin-bottom:24px; white-space:nowrap; }
.yp .yp-badge .b { width:24px; height:24px; border-radius:50%; background:var(--y); color:var(--ink); display:grid; place-items:center; font-size:13px; }
.yp .yp-hero h1 { font-size:clamp(40px,5.6vw,76px); line-height:1.14; font-weight:800; letter-spacing:-0.035em; margin:0; max-width:9.5em; }
.yp .yp-hero h1 .hl { position:relative; white-space:nowrap; }
.yp .yp-hero h1 .hl::after { content:''; position:absolute; left:-4px; right:-4px; bottom:.08em; height:.34em; background:#fff; z-index:-1; transform:rotate(-1deg); border-radius:3px; }
.yp .yp-hero .lead { font-size:clamp(16px,1.5vw,19px); line-height:1.6; color:var(--ink2); margin:26px 0 0; max-width:30em; }
.yp .yp-hero .ctas { display:flex; align-items:center; gap:22px; margin-top:36px; flex-wrap:wrap; }
.yp .yp-hero .floatchip { color:#fff; }

/* login card */
.yp .yp-card { position:relative; z-index:2; background:#fff; border-radius:26px; padding:34px 32px; box-shadow:0 30px 70px rgba(0,0,0,.22), 0 4px 12px rgba(0,0,0,.08); }
.yp .yp-card h2 { margin:0 0 4px; font-size:25px; font-weight:800; letter-spacing:-0.02em; }
.yp .yp-card .csub { margin:0 0 24px; font-size:14.5px; color:var(--mut); }
.yp .yp-fld { display:flex; flex-direction:column; gap:8px; margin-bottom:15px; }
.yp .yp-fld label { font-size:13px; font-weight:700; }
.yp .yp-fld .w { position:relative; }
.yp .yp-fld .w i { position:absolute; left:15px; top:50%; transform:translateY(-50%); color:#aaa; font-size:18px; }
.yp .yp-fld input { width:100%; padding:15px 16px 15px 44px; border-radius:14px; border:1.5px solid #e3e3e3; background:#fafafa; color:#141414; font-family:inherit; font-size:15px; outline:none; transition:.15s; }
.yp .yp-fld input::placeholder { color:#bbb; }
.yp .yp-fld input:focus { border-color:var(--ink); background:#fff; box-shadow:0 0 0 4px rgba(0,0,0,.06); }
.yp .yp-row2 { display:flex; align-items:center; justify-content:space-between; margin:6px 0 20px; }
.yp .yp-stay { display:flex; align-items:center; gap:10px; font-size:14px; font-weight:600; cursor:pointer; white-space:nowrap; }
.yp .yp-switch { position:relative; width:46px; height:27px; flex-shrink:0; display:inline-block; }
.yp .yp-switch input { position:absolute; opacity:0; width:0; height:0; }
.yp .yp-switch .tr { position:absolute; inset:0; background:#e0e0e0; border-radius:999px; transition:.2s; }
.yp .yp-switch .tr::after { content:''; position:absolute; top:2.5px; left:2.5px; width:22px; height:22px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3); transition:.2s; }
.yp .yp-switch input:checked + .tr { background:var(--ink); }
.yp .yp-switch input:checked + .tr::after { transform:translateX(19px); }
.yp .yp-row2 .forgot { font-size:14px; color:var(--ink); font-weight:600; text-decoration:none; box-shadow:inset 0 -2px 0 var(--y-deep); white-space:nowrap; }
.yp .yp-submit { width:100%; padding:16px; border-radius:15px; background:var(--y); color:var(--ink); font-weight:800; font-size:16px; border:2px solid var(--ink); cursor:pointer; font-family:inherit; transition:.18s; display:flex; align-items:center; justify-content:center; gap:8px; }
.yp .yp-submit:hover { background:var(--ink); color:var(--y); }
.yp .yp-or { display:flex; align-items:center; gap:14px; margin:18px 0; color:#aaa; font-size:12px; font-weight:700; letter-spacing:.08em; }
.yp .yp-or::before, .yp .yp-or::after { content:''; flex:1; height:1px; background:#eaeaea; }
.yp .yp-google { width:100%; padding:14px; border-radius:14px; border:1.5px solid #e3e3e3; background:#fff; font-weight:600; font-size:14.5px; color:#141414; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:10px; font-family:inherit; transition:.15s; }
.yp .yp-google:hover { border-color:var(--ink); }
.yp .yp-google svg { width:18px; height:18px; }
.yp .yp-card .foot { text-align:center; font-size:14px; color:var(--mut); margin:18px 0 0; }
.yp .yp-card .foot a { color:var(--ink); font-weight:800; text-decoration:none; box-shadow:inset 0 -2px 0 var(--y-deep); }

/* MARQUEE */
.yp .yp-marq { background:var(--ink); color:var(--y); overflow:hidden; padding:18px 0; border-top:2px solid var(--ink); }
.yp .yp-marq .track { display:flex; gap:40px; width:max-content; }
@media (prefers-reduced-motion: no-preference){ .yp .yp-marq > .track { animation:ypm 30s linear infinite; } }
@keyframes ypm { to { transform:translateX(-50%); } }
.yp .yp-marq .it { display:inline-flex; align-items:center; gap:12px; font-size:18px; font-weight:700; letter-spacing:-0.01em; }
.yp .yp-marq .it i { font-size:20px; }
.yp .yp-marq .star { color:var(--y); opacity:.5; }

/* STATS */
.yp .yp-statsP { background:var(--ink); border-radius:30px; padding:clamp(34px,4vw,52px) clamp(28px,4vw,56px); display:grid; grid-template-columns:repeat(3,1fr) auto; gap:30px; align-items:center; box-shadow:0 30px 60px rgba(0,0,0,.25); position:relative; overflow:hidden; }
.yp .yp-statsP .gdots { position:absolute; right:-20px; top:-20px; width:200px; height:200px; background-image:radial-gradient(rgba(255,196,0,.22) 2px,transparent 2px); background-size:22px 22px; }
.yp .yp-statsP .item { position:relative; z-index:1; }
.yp .yp-statsP .item .v { font-size:clamp(40px,4.6vw,58px); font-weight:800; letter-spacing:-0.03em; line-height:1; color:#fff; }
.yp .yp-statsP .item .v em { font-style:normal; color:var(--y); }
.yp .yp-statsP .item .l { font-size:15px; color:#a6a6a6; margin-top:10px; }
.yp .yp-statsP .cta, .yp .yp-statsP .yp-btn { position:relative; z-index:1; }

/* feature cards */
.yp .yp-grid4 { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.yp .yp-fc { background:#fff; border-radius:22px; padding:32px 26px; box-shadow:0 12px 30px rgba(0,0,0,.1); transition:transform .2s, box-shadow .2s; }
.yp .yp-fc:hover { transform:translateY(-5px); box-shadow:0 24px 48px rgba(0,0,0,.16); }
.yp .yp-fc .ic { width:54px; height:54px; border-radius:15px; background:var(--y); display:grid; place-items:center; font-size:27px; color:var(--ink); margin-bottom:20px; }
.yp .yp-fc h3 { margin:0 0 10px; font-size:19px; font-weight:800; letter-spacing:-0.01em; }
.yp .yp-fc p { margin:0; font-size:15px; line-height:1.55; color:var(--mut); }

/* platform tabs */
.yp .yp-seg { display:inline-flex; background:var(--ink); padding:5px; border-radius:16px; gap:4px; flex-wrap:wrap; justify-content:center; }
.yp .yp-seg button { display:inline-flex; align-items:center; gap:9px; padding:12px 24px; border-radius:11px; border:0; background:transparent; color:#cfcfcf; font-family:inherit; font-size:15px; font-weight:700; cursor:pointer; transition:.15s; }
.yp .yp-seg button i { font-size:19px; }
.yp .yp-seg button.active { background:var(--y); color:var(--ink); }
.yp .yp-ptP { background:#fff; border-radius:30px; padding:clamp(30px,3.6vw,52px); margin-top:42px; display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(32px,4vw,60px); align-items:center; box-shadow:0 20px 50px rgba(0,0,0,.12); }
.yp .yp-pt .phead { display:flex; align-items:center; gap:16px; margin-bottom:22px; }
.yp .yp-pt .phead .ic { width:58px; height:58px; flex-shrink:0; border-radius:16px; display:grid; place-items:center; color:#fff; font-size:29px; }
.yp .yp-pt .phead h3 { margin:0; font-size:clamp(22px,2.3vw,30px); font-weight:800; letter-spacing:-0.02em; line-height:1.3; }
.yp .yp-pt .ptext { font-size:16.5px; line-height:1.6; color:var(--ink2); margin:0 0 26px; }
.yp .yp-pt-stats { display:grid; grid-template-columns:repeat(3,1fr); margin-bottom:26px; border-top:1.5px solid #eee; border-bottom:1.5px solid #eee; }
.yp .yp-pt-stat { padding:18px 4px; text-align:center; border-right:1.5px solid #eee; }
.yp .yp-pt-stat:last-child { border-right:0; }
.yp .yp-pt-stat .v { font-size:clamp(24px,2.4vw,30px); font-weight:800; letter-spacing:-0.02em; }
.yp .yp-pt-stat .l { font-size:13px; color:var(--mut); margin-top:5px; }
.yp .yp-pt-items { display:flex; flex-direction:column; gap:16px; margin-bottom:28px; }
.yp .yp-pt-item { display:flex; gap:13px; }
.yp .yp-pt-item .ck { width:27px; height:27px; border-radius:50%; background:var(--ink); color:var(--y); display:grid; place-items:center; font-size:15px; flex-shrink:0; margin-top:1px; }
.yp .yp-pt-item b { display:block; font-size:15.5px; font-weight:700; }
.yp .yp-pt-item span { display:block; font-size:14.5px; color:var(--mut); line-height:1.5; margin-top:3px; }
.yp .yp-ph { border-radius:22px; background-color:var(--y-soft); background-image:repeating-linear-gradient(135deg,rgba(0,0,0,.05) 0 14px,transparent 14px 28px); display:grid; place-items:center; position:relative; overflow:hidden; aspect-ratio:1; }
.yp .yp-ph .glyph { font-size:clamp(80px,11vw,128px); }
.yp .yp-ph .tag { position:absolute; bottom:16px; left:16px; font-family:'SF Mono',ui-monospace,Menlo,monospace; font-size:12px; color:var(--ink2); background:rgba(255,255,255,.8); padding:5px 11px; border-radius:8px; }

/* steps */
.yp .yp-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:26px; position:relative; }
.yp .yp-step { position:relative; }
.yp .yp-step .num { width:56px; height:56px; border-radius:50%; background:var(--ink); color:var(--y); display:grid; place-items:center; font-size:22px; font-weight:800; margin-bottom:20px; box-shadow:0 8px 18px rgba(0,0,0,.2); }
.yp .yp-step .sic { font-size:28px; color:var(--ink); margin-bottom:12px; }
.yp .yp-step h3 { margin:0 0 9px; font-size:20px; font-weight:800; letter-spacing:-0.01em; }
.yp .yp-step p { margin:0; font-size:15px; line-height:1.55; color:var(--ink2); }

/* decade */
.yp .yp-decadeP { background:var(--ink); border-radius:34px; padding:clamp(40px,5vw,72px); display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,4vw,64px); align-items:center; position:relative; overflow:hidden; box-shadow:0 30px 60px rgba(0,0,0,.25); }
.yp .yp-decadeP .gdots { position:absolute; left:-30px; bottom:-30px; width:260px; height:260px; background-image:radial-gradient(rgba(255,196,0,.18) 2px,transparent 2px); background-size:24px 24px; }
.yp .yp-decadeP .ic { width:56px; height:56px; border-radius:15px; background:rgba(255,196,0,.16); color:var(--y); display:grid; place-items:center; font-size:28px; margin-bottom:24px; }
.yp .yp-decadeP h2 { font-size:clamp(32px,3.8vw,50px); line-height:1.16; font-weight:800; letter-spacing:-0.025em; margin:0 0 18px; color:#fff; }
.yp .yp-decadeP h2 em { font-style:normal; color:var(--y); }
.yp .yp-decadeP p { font-size:18px; line-height:1.6; color:#aaa; margin:0 0 32px; max-width:26em; }
.yp .yp-decadeP .ctas { display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.yp .yp-decadeP .big { position:relative; z-index:1; display:grid; place-items:center; }
.yp .yp-decadeP .big span { font-size:clamp(140px,20vw,240px); font-weight:800; letter-spacing:-0.06em; line-height:.85; background:linear-gradient(150deg,#FFE082,#FFC400); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }

/* all social */
.yp .yp-soc { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.yp .yp-sc { border-radius:20px; padding:28px 24px; transition:transform .2s, box-shadow .2s; }
.yp .yp-sc:hover { transform:translateY(-5px); }
.yp .yp-sc.paper { background:#fff; box-shadow:0 12px 28px rgba(0,0,0,.1); }
.yp .yp-sc.paper:hover { box-shadow:0 22px 44px rgba(0,0,0,.16); }
.yp .yp-sc.dark { background:var(--ink); box-shadow:0 12px 28px rgba(0,0,0,.22); }
.yp .yp-sc .ic { width:50px; height:50px; border-radius:14px; display:grid; place-items:center; font-size:25px; margin-bottom:16px; }
.yp .yp-sc.paper .ic { background:var(--y); color:var(--ink); }
.yp .yp-sc.dark .ic { background:rgba(255,255,255,.1); }
.yp .yp-sc h4 { margin:0 0 8px; font-size:16px; font-weight:800; }
.yp .yp-sc.dark h4 { color:#fff; }
.yp .yp-sc p { margin:0; font-size:13.5px; line-height:1.55; color:var(--mut); }
.yp .yp-sc.dark p { color:#9a9a9a; }

/* compare */
.yp .yp-cmp { max-width:960px; margin:0 auto; background:#fff; border-radius:24px; overflow:hidden; box-shadow:0 18px 44px rgba(0,0,0,.12); }
.yp .yp-cmp table { width:100%; border-collapse:collapse; }
.yp .yp-cmp th, .yp .yp-cmp td { padding:18px 24px; text-align:left; font-size:15.5px; }
.yp .yp-cmp thead th { font-size:14px; font-weight:700; color:var(--mut); border-bottom:1.5px solid #eee; }
.yp .yp-cmp thead th.lk { background:var(--ink); color:var(--y); text-align:center; }
.yp .yp-cmp thead th.lk .best { display:inline-block; background:var(--y); color:var(--ink); font-size:10px; font-weight:800; padding:2px 8px; border-radius:6px; margin-left:7px; letter-spacing:.05em; vertical-align:middle; }
.yp .yp-cmp thead th.co { text-align:center; }
.yp .yp-cmp td { color:var(--mut); border-bottom:1px solid #f0f0f0; }
.yp .yp-cmp td.feat { font-weight:600; color:var(--ink); display:flex; align-items:center; gap:11px; }
.yp .yp-cmp td.feat i { color:var(--y-deep); font-size:19px; }
.yp .yp-cmp td.lk { text-align:center; color:var(--ink); font-weight:800; background:var(--y-soft); }
.yp .yp-cmp td.co { text-align:center; }
.yp .yp-cmp td.co.bad { color:#d11; }
.yp .yp-cmp tr:last-child td { border-bottom:0; }
.yp .yp-bigcta { text-align:center; max-width:740px; margin:64px auto 0; }
.yp .yp-bigcta h3 { font-size:clamp(24px,2.8vw,34px); font-weight:800; letter-spacing:-0.02em; line-height:1.25; margin:0 0 14px; }
.yp .yp-bigcta p { font-size:17px; line-height:1.55; color:var(--ink2); margin:0 0 28px; }
.yp .yp-pills { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.yp .yp-pill { display:inline-flex; align-items:center; gap:9px; padding:13px 22px; border-radius:980px; font-size:15px; font-weight:700; text-decoration:none; background:#fff; color:var(--ink); box-shadow:0 8px 20px rgba(0,0,0,.1); transition:transform .18s; }
.yp .yp-pill:hover { transform:translateY(-2px); }
.yp .yp-pill i { font-size:19px; }

/* FAQ */
.yp .yp-faq { max-width:820px; margin:0 auto; }
.yp .yp-fq { border-bottom:1.5px solid rgba(0,0,0,.16); }
.yp .yp-fq button { width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:24px 4px; background:transparent; border:0; cursor:pointer; font-family:inherit; text-align:left; }
.yp .yp-fq .q { font-size:18px; font-weight:800; letter-spacing:-0.01em; color:var(--ink); }
.yp .yp-fq .pm { width:34px; height:34px; flex-shrink:0; border-radius:50%; background:var(--ink); color:var(--y); display:grid; place-items:center; font-size:20px; transition:transform .3s; }
.yp .yp-fq.open .pm { transform:rotate(45deg); }
.yp .yp-fq .ans { overflow:hidden; max-height:0; transition:max-height .35s cubic-bezier(.4,0,.2,1); }
.yp .yp-fq .ans .inr { padding:0 4px 24px; font-size:15.5px; line-height:1.65; color:var(--ink2); max-width:62ch; }
.yp .yp-faq-cta { text-align:center; margin-top:60px; }
.yp .yp-faq-cta h3 { font-size:clamp(22px,2.6vw,30px); font-weight:800; letter-spacing:-0.02em; margin:0 0 20px; }
.yp .yp-tags { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:26px; }
.yp .yp-tag { padding:9px 18px; border-radius:980px; font-size:14px; font-weight:700; }
.yp .yp-tag.ink { background:var(--ink); color:var(--y); }
.yp .yp-tag.paper { background:#fff; color:var(--ink); }

/* news */
.yp .yp-news { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.yp .yp-nc { background:#fff; border-radius:22px; overflow:hidden; box-shadow:0 12px 30px rgba(0,0,0,.1); transition:transform .2s, box-shadow .2s; cursor:pointer; text-decoration:none; color:inherit; display:block; }
.yp .yp-nc:hover { transform:translateY(-5px); box-shadow:0 24px 48px rgba(0,0,0,.16); }
.yp .yp-nc .thumb { aspect-ratio:16/10; }
.yp .yp-nc .thumb .glyph { font-size:60px; }
.yp .yp-nc .body { padding:24px 26px 26px; }
.yp .yp-nc h3 { margin:0 0 10px; font-size:18px; font-weight:800; line-height:1.35; letter-spacing:-0.01em; }
.yp .yp-nc p { margin:0 0 16px; font-size:14.5px; line-height:1.5; color:var(--mut); }

/* popular */
.yp .yp-pop { text-align:center; max-width:800px; margin:60px auto 0; }
.yp .yp-pop h3 { font-size:22px; font-weight:800; letter-spacing:-0.02em; margin:0 0 22px; }
.yp .yp-pop .row { display:flex; gap:11px; justify-content:center; flex-wrap:wrap; margin-bottom:14px; }
.yp .yp-kw { padding:11px 18px; border-radius:980px; font-size:14.5px; font-weight:700; text-decoration:none; transition:transform .15s; }
.yp .yp-kw.ink { background:var(--ink); color:var(--y); } .yp .yp-kw.paper { background:#fff; color:var(--ink); box-shadow:0 6px 16px rgba(0,0,0,.08); }
.yp .yp-kw:hover { transform:translateY(-2px); }

/* footer */
.yp .yp-foot { padding:0 0 40px; }
.yp .yp-footP { background:var(--ink); color:#bfbfbf; border-radius:34px 34px 0 0; padding:clamp(44px,5vw,64px) clamp(32px,4vw,60px) 40px; }
.yp .yp-ft { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; padding-bottom:36px; border-bottom:1px solid #2a2a2a; }
.yp .yp-ft .brand { display:flex; align-items:center; gap:11px; margin-bottom:16px; }
.yp .yp-ft .brand .mark { width:34px; height:34px; border-radius:9px; background:var(--y); display:grid; place-items:center; color:var(--ink); font-weight:800; font-size:19px; }
.yp .yp-ft .brand .word { font-weight:800; font-size:19px; color:#fff; letter-spacing:-0.02em; }
.yp .yp-ft .desc { font-size:14px; line-height:1.65; max-width:300px; margin:0; }
.yp .yp-ft h5 { margin:0 0 16px; font-size:13px; font-weight:800; color:var(--y); letter-spacing:.04em; }
.yp .yp-ft a { display:block; color:#bfbfbf; text-decoration:none; font-size:14px; margin-bottom:11px; }
.yp .yp-ft a:hover { color:#fff; }
.yp .yp-fb { display:flex; justify-content:space-between; margin-top:24px; font-size:13px; color:#8a8a8a; flex-wrap:wrap; gap:8px; }

/* responsive */
@media (max-width:980px){
  .yp .yp-hero .grid { grid-template-columns:1fr; gap:44px; }
  .yp .yp-card { max-width:480px; }
  .yp .yp-statsP { grid-template-columns:repeat(2,1fr); }
  .yp .yp-grid4 { grid-template-columns:repeat(2,1fr); }
  .yp .yp-ptP { grid-template-columns:1fr; }
  .yp .yp-steps { grid-template-columns:repeat(2,1fr); row-gap:36px; }
  .yp .yp-decadeP { grid-template-columns:1fr; }
  .yp .yp-soc { grid-template-columns:repeat(2,1fr); }
  .yp .yp-news { grid-template-columns:1fr; }
  .yp .yp-ft { grid-template-columns:1fr 1fr; gap:28px; }
  .yp .yp-nav .links { display:none; }
}
@media (max-width:560px){
  .yp .wrap { padding:0 22px; }
  .yp .yp-statsP { grid-template-columns:1fr; text-align:center; }
  .yp .yp-grid4, .yp .yp-soc, .yp .yp-steps { grid-template-columns:1fr; }
  .yp .yp-cmp { font-size:13px; }
  .yp .yp-cmp th, .yp .yp-cmp td { padding:13px 12px; }
}
/* comprehensive SEO footer (platform service columns → internal links) */
.yp .yp-ft-head { display:grid; grid-template-columns:1.3fr 2.7fr; gap:48px; padding-bottom:36px; border-bottom:1px solid #2a2a2a; }
.yp .yp-ft-brand .brand { display:flex; align-items:center; gap:11px; margin-bottom:16px; }
.yp .yp-ft-brand .brand .mark { width:34px; height:34px; border-radius:9px; background:var(--y); display:grid; place-items:center; color:var(--ink); font-weight:800; font-size:19px; }
.yp .yp-ft-brand .brand .word { font-weight:800; font-size:19px; color:#fff; letter-spacing:-0.02em; }
.yp .yp-ft-brand .desc { font-size:14px; line-height:1.65; color:#bfbfbf; max-width:320px; margin:0 0 18px; }
.yp .yp-ft-contact a { display:flex; align-items:center; gap:9px; color:#bfbfbf; text-decoration:none; font-size:13.5px; margin-bottom:9px; }
.yp .yp-ft-contact a:hover { color:var(--y); }
.yp .yp-ft-contact a i { color:var(--y); font-size:16px; }
.yp .yp-ft-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:26px; }
.yp .yp-ft-mid { display:grid; grid-template-columns:repeat(3,1fr); gap:40px; padding-top:32px; }
.yp .yp-ft-col h5 { margin:0 0 15px; font-size:13px; font-weight:800; color:var(--y); letter-spacing:.04em; }
.yp .yp-ft-col a { display:block; color:#bfbfbf; text-decoration:none; font-size:13.5px; margin-bottom:10px; transition:.14s; }
.yp .yp-ft-col a:hover { color:#fff; }
.yp .yp-ft-col a.all { color:var(--y); font-weight:600; margin-top:4px; }
.yp .yp-ft-col a.all i { font-size:14px; }
@media (max-width:980px){ .yp .yp-ft-head { grid-template-columns:1fr; gap:34px; } .yp .yp-ft-grid { grid-template-columns:repeat(3,1fr); row-gap:28px; } .yp .yp-ft-mid { grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .yp .yp-ft-grid { grid-template-columns:1fr 1fr; } .yp .yp-ft-mid { grid-template-columns:1fr; } }
/* === END U61 === */

/* ============================================================ U62 — Solar PLATFORM LANDING layer (recreated from likester-net 6: solar-landing.jsx solarLandingStyle + platform-theme.jsx platformThemeStyle). Loads after U61 base (.yp). Used by instagram-landing / facebook-landing / tiktok-landing / youtube-landing. Accent/shape driven by inline --vars per page (themeVars). */

/* ===== HERO ===== */
.yl-hero { position:relative; padding:clamp(40px,6vw,86px) 0 clamp(56px,7vw,96px); }
.yl-hero .grid { position:relative; z-index:2; display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(36px,5vw,72px); align-items:center; }
.yl-badge { display:inline-flex; align-items:center; gap:10px; background:var(--ink); color:#fff; padding:8px 16px 8px 9px; border-radius:980px; font-size:13px; font-weight:700; margin-bottom:22px; }
.yl-badge .b { width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font-size:13px; color:#fff; }
.yl-hero h1 { font-size:clamp(33px,4.6vw,58px); line-height:1.18; font-weight:800; letter-spacing:-0.03em; margin:0; }
.yl-hero h1 .hl { position:relative; white-space:nowrap; }
.yl-hero h1 .hl::after { content:''; position:absolute; left:-3px; right:-3px; bottom:.06em; height:.32em; background:#fff; z-index:-1; transform:rotate(-1deg); border-radius:3px; }
.yl-hero .sub { font-size:clamp(17px,1.7vw,20px); font-weight:700; color:var(--ink); margin:18px 0 0; }
.yl-hero .lead { font-size:clamp(15px,1.4vw,17px); line-height:1.65; color:var(--ink2); margin:14px 0 0; max-width:36em; }
.yl-trust { display:flex; gap:34px; margin:30px 0 0; flex-wrap:wrap; }
.yl-trust .t .v { font-size:clamp(26px,2.6vw,34px); font-weight:800; letter-spacing:-0.02em; line-height:1; }
.yl-trust .t .l { font-size:13.5px; color:var(--ink2); margin-top:6px; }
.yl-hero .ctas { display:flex; align-items:center; gap:18px; margin-top:32px; flex-wrap:wrap; }

/* phone mockup placeholder */
.yl-mock { position:relative; z-index:2; justify-self:center; width:300px; max-width:100%; aspect-ratio:300/600; background:#fff; border-radius:42px; box-shadow:0 40px 80px rgba(0,0,0,.24), 0 6px 16px rgba(0,0,0,.08); padding:14px; }
.yl-mock .screen { width:100%; height:100%; border-radius:30px; overflow:hidden; display:flex; flex-direction:column; background:var(--y-soft); background-image:repeating-linear-gradient(135deg,rgba(0,0,0,.04) 0 16px,transparent 16px 32px); }
.yl-mock .top { display:flex; align-items:center; gap:9px; padding:18px 18px 14px; font-weight:800; font-size:15px; color:#fff; }
.yl-mock .top i { font-size:21px; }
.yl-mock .body { flex:1; display:grid; grid-template-rows:auto auto; align-content:center; gap:22px; padding:20px; }
.yl-mock .m-stat { text-align:center; }
.yl-mock .m-stat .v { font-size:38px; font-weight:800; letter-spacing:-0.02em; color:var(--ink); line-height:1; }
.yl-mock .m-stat .l { font-size:13px; color:var(--ink2); margin-top:7px; font-weight:600; }
.yl-mock .notch { position:absolute; top:14px; left:50%; transform:translateX(-50%); width:120px; height:26px; background:#fff; border-radius:0 0 16px 16px; z-index:2; }
.yl-mock .fbubble { position:absolute; z-index:3; width:54px; height:54px; border-radius:16px; display:grid; place-items:center; color:#fff; font-size:25px; box-shadow:0 14px 28px rgba(0,0,0,.22); }

/* ===== generic section header on yellow ===== */
.yl-band { background:var(--paper2); }
.yl-band-soft { background:#fff; }

/* service cards (reuse yp-fc grid feel but with link button) */
.yl-svc { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.yl-svc .card { background:#fff; border-radius:22px; padding:30px 24px; box-shadow:0 12px 30px rgba(0,0,0,.1); display:flex; flex-direction:column; transition:transform .2s, box-shadow .2s; }
.yl-svc .card:hover { transform:translateY(-5px); box-shadow:0 24px 48px rgba(0,0,0,.16); }
.yl-svc .ic { width:52px; height:52px; border-radius:14px; display:grid; place-items:center; font-size:25px; color:#fff; margin-bottom:18px; }
.yl-svc h3 { margin:0 0 9px; font-size:17px; font-weight:800; letter-spacing:-0.01em; }
.yl-svc p { margin:0 0 18px; font-size:14px; line-height:1.55; color:var(--mut); flex:1; }
.yl-svc .go { align-self:flex-start; display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:700; color:var(--ink); text-decoration:none; padding:9px 16px; border-radius:980px; border:1.5px solid var(--ink); transition:.15s; }
.yl-svc .go:hover { background:var(--ink); color:var(--y); }

/* why split */
.yl-why { display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,68px); align-items:center; }
.yl-flist { display:flex; flex-direction:column; gap:22px; }
.yl-fitem { display:flex; gap:16px; }
.yl-fitem .ic { width:50px; height:50px; flex-shrink:0; border-radius:14px; background:var(--y); color:var(--ink); display:grid; place-items:center; font-size:23px; }
.yl-fitem h4 { margin:0 0 5px; font-size:17px; font-weight:800; }
.yl-fitem p { margin:0; font-size:14.5px; line-height:1.55; color:var(--ink2); }
.yl-statpanel { background:var(--ink); border-radius:28px; padding:clamp(30px,3.5vw,44px); display:grid; grid-template-columns:1fr 1fr; gap:28px; position:relative; overflow:hidden; box-shadow:0 28px 56px rgba(0,0,0,.22); }
.yl-statpanel .gdots { position:absolute; right:-20px; top:-20px; width:180px; height:180px; background-image:radial-gradient(rgba(255,196,0,.2) 2px,transparent 2px); background-size:22px 22px; }
.yl-statpanel .s { position:relative; z-index:1; }
.yl-statpanel .s .v { font-size:clamp(30px,3.2vw,40px); font-weight:800; letter-spacing:-0.02em; color:var(--y); line-height:1; }
.yl-statpanel .s .l { font-size:13.5px; color:#a6a6a6; margin-top:8px; }

/* steps */
.yl-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.yl-step { background:#fff; border-radius:22px; padding:28px 24px; box-shadow:0 12px 30px rgba(0,0,0,.1); position:relative; }
.yl-step .num { width:46px; height:46px; border-radius:50%; background:var(--ink); color:var(--y); display:grid; place-items:center; font-size:19px; font-weight:800; margin-bottom:18px; }
.yl-step .sic { font-size:25px; color:var(--ink); margin-bottom:11px; }
.yl-step h4 { margin:0 0 8px; font-size:17px; font-weight:800; }
.yl-step p { margin:0; font-size:14px; line-height:1.55; color:var(--mut); }

/* pricing */
.yl-price { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:start; }
.yl-pc { background:#fff; border-radius:26px; padding:34px 30px; box-shadow:0 14px 34px rgba(0,0,0,.1); position:relative; display:flex; flex-direction:column; }
.yl-pc.pop { background:var(--ink); color:#fff; transform:scale(1.04); box-shadow:0 30px 60px rgba(0,0,0,.28); }
.yl-pc .pop-badge { position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--y); color:var(--ink); font-size:12px; font-weight:800; padding:6px 16px; border-radius:980px; letter-spacing:.03em; }
.yl-pc .ic { width:54px; height:54px; border-radius:15px; display:grid; place-items:center; font-size:26px; color:#fff; margin-bottom:18px; }
.yl-pc h4 { margin:0 0 5px; font-size:20px; font-weight:800; letter-spacing:-0.01em; }
.yl-pc .desc { margin:0 0 20px; font-size:14px; color:var(--mut); }
.yl-pc.pop .desc { color:#a6a6a6; }
.yl-pc ul { list-style:none; margin:0 0 22px; padding:0; display:flex; flex-direction:column; gap:11px; }
.yl-pc li { display:flex; align-items:center; gap:10px; font-size:14.5px; }
.yl-pc li i { color:var(--y-deep); font-size:17px; flex-shrink:0; }
.yl-pc.pop li i { color:var(--y); }
.yl-pc .price { font-size:40px; font-weight:800; letter-spacing:-0.03em; line-height:1; }
.yl-pc .price-l { font-size:13px; color:var(--mut); margin:7px 0 22px; }
.yl-pc.pop .price-l { color:#a6a6a6; }
.yl-pc .buy { margin-top:auto; text-align:center; padding:14px; border-radius:14px; font-weight:800; font-size:15px; text-decoration:none; transition:.18s; }
.yl-pc .buy { background:var(--y); color:var(--ink); border:2px solid var(--ink); }
.yl-pc .buy:hover { background:var(--ink); color:var(--y); }
.yl-pc.pop .buy { border-color:var(--y); }

/* faq */
.yl-faq { max-width:820px; margin:0 auto; }
.yl-fq { border-bottom:1.5px solid rgba(0,0,0,.16); }
.yl-fq button { width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:24px 4px; background:transparent; border:0; cursor:pointer; font-family:inherit; text-align:left; }
.yl-fq .q { font-size:17.5px; font-weight:800; letter-spacing:-0.01em; color:var(--ink); }
.yl-fq .pm { width:34px; height:34px; flex-shrink:0; border-radius:50%; background:var(--ink); color:var(--y); display:grid; place-items:center; font-size:20px; transition:transform .3s; }
.yl-fq.open .pm { transform:rotate(45deg); }
.yl-fq .ans { overflow:hidden; max-height:0; transition:max-height .35s cubic-bezier(.4,0,.2,1); }
.yl-fq .ans .inr { padding:0 4px 24px; font-size:15px; line-height:1.65; color:var(--ink2); max-width:64ch; }

/* testimonials */
.yl-tg { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.yl-tc { background:#fff; border-radius:22px; padding:30px 28px; box-shadow:0 12px 30px rgba(0,0,0,.1); }
.yl-tc .stars { display:flex; gap:3px; color:#ffb800; font-size:17px; margin-bottom:16px; }
.yl-tc .txt { margin:0 0 22px; font-size:15px; line-height:1.6; color:var(--ink2); }
.yl-tc .who { display:flex; align-items:center; gap:12px; }
.yl-tc .av { width:44px; height:44px; border-radius:50%; background:var(--y); color:var(--ink); display:grid; place-items:center; font-size:20px; }
.yl-tc .nm { font-size:15px; font-weight:800; }
.yl-tc .ro { font-size:13px; color:var(--mut); margin-top:2px; }

/* related platforms */
.yl-rel { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.yl-rel a { background:#fff; border-radius:20px; padding:28px 22px; text-decoration:none; color:var(--ink); box-shadow:0 12px 28px rgba(0,0,0,.1); transition:transform .2s, box-shadow .2s; text-align:center; }
.yl-rel a:hover { transform:translateY(-5px); box-shadow:0 22px 44px rgba(0,0,0,.16); }
.yl-rel .ic { width:54px; height:54px; border-radius:15px; display:grid; place-items:center; font-size:26px; color:#fff; margin:0 auto 14px; }
.yl-rel h4 { margin:0 0 6px; font-size:16px; font-weight:800; }
.yl-rel p { margin:0; font-size:13px; color:var(--mut); line-height:1.5; }

/* big cta band */
.yl-cta { text-align:center; max-width:680px; margin:0 auto; }
.yl-cta h2 { font-size:clamp(26px,3vw,38px); font-weight:800; letter-spacing:-0.02em; line-height:1.22; margin:0 0 16px; }
.yl-cta p { font-size:17px; line-height:1.55; color:var(--ink2); margin:0 0 30px; }

@media (max-width:980px){
  .yl-hero .grid { grid-template-columns:1fr; gap:44px; }
  .yl-mock { order:-1; }
  .yl-svc { grid-template-columns:repeat(2,1fr); }
  .yl-why { grid-template-columns:1fr; }
  .yl-steps { grid-template-columns:repeat(2,1fr); }
  .yl-price { grid-template-columns:1fr; max-width:440px; margin:0 auto; }
  .yl-pc.pop { transform:none; }
  .yl-tg { grid-template-columns:1fr; max-width:480px; margin:0 auto; }
  .yl-rel { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .yl-svc, .yl-steps, .yl-rel { grid-template-columns:1fr; }
  .yl-statpanel { grid-template-columns:1fr; }
  .yl-trust { gap:22px; }
}

/* ===== accent + shape language (driven by inline --vars per page) ===== */
.yp .yp-kicker .bar { background:var(--accent); height:3px; }
.yp .yl-hero h1 .hl::after { background:var(--pf-grad); height:.34em; opacity:.9; border-radius:var(--r-sm); }
.yp .yl-badge { border-radius:var(--btn-r); }
.yp .yp-btn-ink, .yp .yp-nav .signup, .yp .yl-svc .go, .yp .yl-pc .buy { border-radius:var(--btn-r); }
.yp .yl-svc .card, .yp .yl-step, .yp .yl-pc, .yp .yl-tc, .yp .yp-fc, .yp .yl-rel a, .yp .yl-statpanel { border-radius:var(--r-lg); }
.yp .yl-svc .ic, .yp .yl-pc .ic, .yp .yl-fitem .ic, .yp .yp-fc .ic, .yp .yl-rel .ic, .yp .yl-step .num { border-radius:var(--r-md); }
.yp .yl-svc .go { border-color:var(--accent); color:var(--accent); }
.yp .yl-svc .go:hover { background:var(--accent); color:#fff; }
.yp .yl-pc.pop { box-shadow:0 24px 56px color-mix(in srgb, var(--accent) 32%, transparent), 0 0 0 2px var(--accent); }
.yp .yl-fq .pm, .yp .yl-step .num { background:var(--ink); }
.yp .yl-tc .stars { color:var(--accent); }

/* hero accent glow behind the phone (yellow still dominates the page) */
.yl-glow { position:absolute; z-index:1; width:62%; max-width:560px; aspect-ratio:1; right:-4%; top:46%; transform:translateY(-50%);
  background:radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--pf-glow) 60%, transparent), transparent 64%);
  filter:blur(8px); opacity:.5; pointer-events:none; }

/* themed floating chips */
.yp-fx .chip.pf-chip { box-shadow:0 14px 30px rgba(0,0,0,.2); }

/* ===== phone mockup shell tweaks ===== */
.yp .yl-mock.pm { border-radius:42px; padding:12px; background:#fff; }
.pm .pm-bubble { position:absolute; z-index:5; width:52px; height:52px; border-radius:16px; display:grid; place-items:center; font-size:24px; box-shadow:0 14px 28px rgba(0,0,0,.24); }
.pm .pm-screen { width:100%; height:100%; border-radius:30px; overflow:hidden; display:flex; flex-direction:column; background:#fff; background-image:none; }
.pm-bar { background:currentColor; }

/* ---- Instagram screen ---- */
.pm .pm-ig-s { color:#262626; font-size:11px; padding:14px 12px 0; }
.pm-ig-s .ig-top { display:flex; align-items:center; justify-content:space-between; }
.pm-ig-s .ig-user { font-weight:800; font-size:14px; display:inline-flex; align-items:center; gap:3px; }
.pm-ig-s .ig-top-ic { display:flex; gap:10px; font-size:17px; }
.pm-ig-s .ig-prof { display:flex; align-items:center; gap:16px; margin-top:14px; }
.pm-ig-s .ig-avwrap { padding:3px; border-radius:50%; background:linear-gradient(45deg,#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5); flex-shrink:0; }
.pm-ig-s .ig-av { width:60px; height:60px; border-radius:50%; background:#efefef; border:2.5px solid #fff; display:grid; place-items:center; font-size:28px; color:#b9b9b9; }
.pm-ig-s .ig-stats { flex:1; display:flex; justify-content:space-around; text-align:center; }
.pm-ig-s .ig-stats .st b { display:block; font-size:16px; font-weight:800; }
.pm-ig-s .ig-stats .st span { font-size:10px; color:#737373; }
.pm-ig-s .ig-bio { margin-top:12px; }
.pm-ig-s .ig-bio b { font-size:12px; font-weight:700; }
.pm-ig-s .ig-actions { display:flex; gap:7px; margin-top:13px; }
.pm-ig-s .ig-btn { flex:1; text-align:center; padding:7px 0; border-radius:9px; background:#efefef; font-weight:700; font-size:11px; }
.pm-ig-s .ig-btn-follow { background:#d62976; color:#fff; }
.pm-ig-s .ig-hl { display:flex; gap:14px; margin-top:15px; padding-left:2px; }
.pm-ig-s .ig-hlc { width:42px; height:42px; border-radius:50%; background:#efefef; border:1px solid #dbdbdb; }
.pm-ig-s .ig-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:3px; margin-top:14px; }
.pm-ig-s .ig-cell { aspect-ratio:1; background:#ededed; background-image:repeating-linear-gradient(135deg,rgba(0,0,0,.05) 0 7px,transparent 7px 14px); display:grid; place-items:center; color:#fff; font-size:14px; }
.pm-ig-s .ig-cell.a { background:linear-gradient(135deg,#fa7e1e,#d62976); }

/* ---- TikTok screen ---- */
.pm .pm-tk-s { background:#010101; color:#fff; position:relative; font-size:11px;
  background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.04) 0 12px,transparent 12px 24px); }
.pm-tk-s .tk-tabs { position:absolute; top:16px; left:0; right:0; display:flex; gap:16px; justify-content:center; font-size:13px; font-weight:700; z-index:3; }
.pm-tk-s .tk-tabs span { opacity:.6; } .pm-tk-s .tk-tabs .on { opacity:1; border-bottom:2px solid #fff; padding-bottom:3px; }
.pm-tk-s .tk-play { position:absolute; inset:0; display:grid; place-items:center; font-size:46px; color:rgba(255,255,255,.85); }
.pm-tk-s .tk-rail { position:absolute; right:10px; bottom:78px; display:flex; flex-direction:column; align-items:center; gap:17px; z-index:3; }
.pm-tk-s .tk-av { position:relative; width:42px; height:42px; border-radius:50%; background:#333; border:2px solid #fff; display:grid; place-items:center; font-size:20px; color:#999; }
.pm-tk-s .tk-plus { position:absolute; bottom:-7px; left:50%; transform:translateX(-50%); width:17px; height:17px; border-radius:50%; background:#FE2C55; color:#fff; font-size:13px; display:grid; place-items:center; font-weight:700; }
.pm-tk-s .tk-act { display:flex; flex-direction:column; align-items:center; gap:3px; font-size:23px; }
.pm-tk-s .tk-act b { font-size:11px; font-weight:700; }
.pm-tk-s .tk-disc { width:42px; height:42px; border-radius:50%; background:linear-gradient(135deg,#25F4EE,#FE2C55); display:grid; place-items:center; font-size:18px; }
.pm-tk-s .tk-meta { position:absolute; left:12px; right:62px; bottom:16px; z-index:3; }
.pm-tk-s .tk-meta > b { font-size:13px; font-weight:800; }
.pm-tk-s .tk-music { display:flex; align-items:center; gap:6px; margin-top:9px; font-size:10px; opacity:.9; }

/* ---- YouTube screen ---- */
.pm .pm-yt-s { background:#fff; color:#0f0f0f; font-size:11px; }
.pm-yt-s .yt-player { aspect-ratio:16/9; background:#181818; background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 10px,transparent 10px 20px); position:relative; display:grid; place-items:center; }
.pm-yt-s .yt-play { width:46px; height:46px; border-radius:50%; background:#FF0000; color:#fff; display:grid; place-items:center; font-size:24px; }
.pm-yt-s .yt-dur { position:absolute; right:8px; bottom:8px; background:rgba(0,0,0,.8); color:#fff; font-size:10px; padding:2px 5px; border-radius:4px; }
.pm-yt-s .yt-info { padding:13px 13px 0; }
.pm-yt-s .yt-title { font-size:13px; font-weight:800; line-height:1.3; display:block; }
.pm-yt-s .yt-meta { font-size:11px; color:#606060; margin-top:6px; }
.pm-yt-s .yt-chan { display:flex; align-items:center; gap:10px; padding:13px; }
.pm-yt-s .yt-cav { width:38px; height:38px; border-radius:50%; background:#eee; display:grid; place-items:center; font-size:18px; color:#bbb; }
.pm-yt-s .yt-cname { flex:1; } .pm-yt-s .yt-cname b { display:block; font-size:12px; font-weight:800; } .pm-yt-s .yt-cname span { font-size:10px; color:#606060; }
.pm-yt-s .yt-sub { background:#FF0000; color:#fff; font-weight:800; font-size:11px; padding:8px 14px; border-radius:980px; }
.pm-yt-s .yt-row { display:flex; gap:8px; padding:0 13px; }
.pm-yt-s .yt-pill { display:inline-flex; align-items:center; gap:5px; background:#f2f2f2; padding:7px 12px; border-radius:980px; font-size:11px; font-weight:700; }
.pm-yt-s .yt-next { padding:14px 13px 0; display:flex; flex-direction:column; gap:13px; }
.pm-yt-s .yt-nrow { display:flex; gap:9px; }
.pm-yt-s .yt-nthumb { width:88px; height:50px; border-radius:8px; flex-shrink:0; background:#181818; background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.06) 0 8px,transparent 8px 16px); }
.pm-yt-s .yt-nmeta { flex:1; padding-top:2px; color:#0f0f0f; }

/* ---- Facebook screen ---- */
.pm .pm-fb-s { background:#f0f2f5; color:#050505; font-size:11px; }
.pm-fb-s .fb-cover { height:74px; background:linear-gradient(120deg,#1877F2,#00C6FF); }
.pm-fb-s .fb-head { background:#fff; padding:0 12px 12px; text-align:center; position:relative; }
.pm-fb-s .fb-av { width:64px; height:64px; border-radius:50%; background:#e4e6eb; border:4px solid #fff; display:grid; place-items:center; font-size:30px; color:#bcc0c4; margin:-32px auto 0; }
.pm-fb-s .fb-name { font-size:15px; font-weight:800; margin-top:6px; display:flex; align-items:center; justify-content:center; gap:4px; }
.pm-fb-s .fb-name i { color:#1877F2; font-size:14px; }
.pm-fb-s .fb-stat { font-size:11px; color:#65676b; margin-top:3px; }
.pm-fb-s .fb-stat b { color:#050505; }
.pm-fb-s .fb-actions { display:flex; gap:7px; padding:11px 12px; background:#fff; }
.pm-fb-s .fb-btn { flex:1; text-align:center; padding:8px 0; border-radius:7px; background:#e4e6eb; font-weight:700; font-size:11px; display:flex; align-items:center; justify-content:center; gap:5px; }
.pm-fb-s .fb-btn-p { background:#1877F2; color:#fff; }
.pm-fb-s .fb-post { background:#fff; margin-top:8px; padding:12px; flex:1; }
.pm-fb-s .fb-prow { display:flex; align-items:center; gap:8px; }
.pm-fb-s .fb-pav { width:34px; height:34px; border-radius:50%; background:#e4e6eb; }
.pm-fb-s .fb-img { height:78px; border-radius:8px; margin-top:11px; background:#e4e6eb; background-image:repeating-linear-gradient(135deg,rgba(0,0,0,.05) 0 8px,transparent 8px 16px); }
.pm-fb-s .fb-react { display:flex; align-items:center; gap:4px; margin-top:10px; }
.pm-fb-s .fb-rb { width:19px; height:19px; border-radius:50%; display:grid; place-items:center; font-size:11px; color:#fff; background:#1877F2; }
.pm-fb-s .fb-rb.love { background:#f33e58; margin-left:-6px; }
.pm-fb-s .fb-rc { font-size:10px; color:#65676b; margin-left:5px; }

@media (max-width:560px){
  .pm .pm-bubble { width:44px; height:44px; font-size:20px; }
}
/* === END U62 === */

/* ============================================================ U63 — Solar SEO SUB-PAGE layer (recreated from likester-net 6: solar-sub.jsx solarSubStyle). Single-service deep-dive: breadcrumb + 6-package grid + why + steps + faq + related + CTA. Reuses .yp (U61) + .yl/.pm (U62). Used by the 20 *-thailand SEO pages. */
.sub-bc { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--ink2); margin-bottom:22px; flex-wrap:wrap; }
.sub-bc a { color:var(--ink2); text-decoration:none; } .sub-bc a:hover { color:var(--ink); }
.sub-bc i { font-size:14px; opacity:.6; }
.sub-bc .cur { color:var(--accent); font-weight:700; }

.sub-pk { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.sub-card { background:#fff; border-radius:var(--r-lg); padding:28px 26px; box-shadow:0 12px 30px rgba(0,0,0,.1); position:relative; display:flex; flex-direction:column; transition:transform .2s, box-shadow .2s; }
.sub-card:hover { transform:translateY(-5px); box-shadow:0 24px 48px rgba(0,0,0,.16); }
.sub-card.pop { box-shadow:0 22px 50px color-mix(in srgb, var(--accent) 30%, transparent), 0 0 0 2px var(--accent); }
.sub-card .pop-b { position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--accent); color:#fff; font-size:11.5px; font-weight:800; padding:6px 15px; border-radius:980px; white-space:nowrap; }
.sub-card .qty { font-size:34px; font-weight:800; letter-spacing:-0.02em; line-height:1; }
.sub-card .qty span { font-size:15px; font-weight:700; color:var(--mut); }
.sub-card .pr { margin-top:14px; font-size:28px; font-weight:800; color:var(--accent); letter-spacing:-0.02em; }
.sub-card .pr small { font-size:14px; color:var(--mut); font-weight:600; }
.sub-card ul { list-style:none; margin:18px 0 22px; padding:0; display:flex; flex-direction:column; gap:9px; }
.sub-card li { display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--ink2); }
.sub-card li i { color:var(--accent); font-size:16px; flex-shrink:0; }
.sub-card .buy { margin-top:auto; text-align:center; padding:13px; border-radius:var(--btn-r); font-weight:800; font-size:15px; text-decoration:none; background:var(--ink); color:#fff; transition:.18s; }
.sub-card .buy:hover { transform:translateY(-2px); box-shadow:0 14px 28px rgba(0,0,0,.24); }
.sub-card.pop .buy { background:var(--accent); }

.sub-rel { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.sub-rel a { background:#fff; border-radius:var(--r-lg); padding:26px; text-decoration:none; color:var(--ink); box-shadow:0 12px 28px rgba(0,0,0,.1); transition:transform .2s, box-shadow .2s; display:flex; align-items:center; gap:16px; }
.sub-rel a:hover { transform:translateY(-4px); box-shadow:0 22px 44px rgba(0,0,0,.16); }
.sub-rel .ic { width:52px; height:52px; border-radius:var(--r-md); display:grid; place-items:center; font-size:25px; color:#fff; background:var(--accent); flex-shrink:0; }
.sub-rel h4 { margin:0 0 4px; font-size:16px; font-weight:800; }
.sub-rel p { margin:0; font-size:13px; color:var(--mut); }

@media (max-width:980px){ .sub-pk { grid-template-columns:1fr 1fr; } .sub-rel { grid-template-columns:1fr; max-width:440px; margin:0 auto; } }
@media (max-width:560px){ .sub-pk { grid-template-columns:1fr; max-width:380px; margin:0 auto; } }
/* === END U63 === */

/* ============================================================ U67 — /services LOGGED-IN (.l2v2) row-grid fix. ROOT CAUSE: U29 `.l2v2 .l2v2-page-services .service-item.pg-svc-card{display:flex;flex-direction:column}` (specificity 0,4,0, no !important) beat the U33/U34 Apple full-width row grid (`.l2v2-page-services …` 0,3,0) inside the dashboard → cards stacked vertically logged-in, while logged-out (body has NO .l2v2) rendered the U34 grid correctly. Re-assert the U34 row layout under .l2v2 with matching specificity + !important so dashboard == public. */
.l2v2 .l2v2-page-services .services-wrapper { display:flex !important; flex-direction:column !important; grid-template-columns:none !important; gap:10px !important; }
.l2v2 .l2v2-page-services .service-item.pg-svc-card {
  display:grid !important; height:auto !important;
  grid-template-columns: 52px minmax(0,1fr) 124px 104px 124px auto !important;
  column-gap:24px !important; row-gap:2px !important; padding:16px 26px !important;
}
.l2v2 .l2v2-page-services .pg-svc-card .pg-svc-id { grid-column:1 !important; grid-row:1 / 3 !important; align-self:center; }
.l2v2 .l2v2-page-services .pg-svc-card .pg-svc-name { grid-column:2 !important; grid-row:1 !important; font-size:15.5px; }
.l2v2 .l2v2-page-services .pg-svc-card .pg-svc-avt { grid-column:2 !important; grid-row:2 !important; }
.l2v2 .l2v2-page-services .pg-svc-card .pg-svc-meta { display:contents !important; border:none !important; margin:0 !important; padding:0 !important; }
.l2v2 .l2v2-page-services .pg-svc-card .pg-svc-meta > div { grid-row:1 / 3 !important; align-self:center; display:flex !important; flex-direction:column !important; align-items:center !important; gap:3px !important; text-align:center !important; padding:0 !important; }
.l2v2 .l2v2-page-services .pg-svc-card .pg-svc-meta > div:nth-child(1) { grid-column:3 !important; }
.l2v2 .l2v2-page-services .pg-svc-card .pg-svc-meta > div:nth-child(2) { grid-column:4 !important; }
.l2v2 .l2v2-page-services .pg-svc-card .pg-svc-meta > div:nth-child(3) { grid-column:5 !important; }
.l2v2 .l2v2-page-services .pg-svc-card .pg-svc-meta .l { font-size:10px !important; text-transform:uppercase; letter-spacing:.04em; opacity:.72; }
.l2v2 .l2v2-page-services .pg-svc-card .pg-svc-meta .v { font-size:14px !important; }
.l2v2 .l2v2-page-services .pg-svc-card .pg-svc-btn { grid-column:6 !important; grid-row:1 / 3 !important; align-self:center; justify-self:end; width:auto !important; margin:0 !important; padding:11px 24px !important; }
@media (max-width:820px){
  .l2v2 .l2v2-page-services .service-item.pg-svc-card { grid-template-columns:1fr auto !important; column-gap:14px !important; row-gap:5px !important; }
  .l2v2 .l2v2-page-services .pg-svc-card .pg-svc-id { grid-column:1 !important; grid-row:auto !important; }
  .l2v2 .l2v2-page-services .pg-svc-card .pg-svc-name { grid-column:1 !important; grid-row:auto !important; }
  .l2v2 .l2v2-page-services .pg-svc-card .pg-svc-avt { grid-column:1 !important; grid-row:auto !important; }
  .l2v2 .l2v2-page-services .pg-svc-card .pg-svc-meta { display:flex !important; flex-wrap:wrap; gap:5px 16px; grid-column:1 !important; }
  .l2v2 .l2v2-page-services .pg-svc-card .pg-svc-meta > div { grid-row:auto !important; flex-direction:row !important; align-items:baseline !important; text-align:left !important; }
  .l2v2 .l2v2-page-services .pg-svc-card .pg-svc-meta .l { text-transform:none !important; }
  .l2v2 .l2v2-page-services .pg-svc-card .pg-svc-btn { grid-column:2 !important; grid-row:1 / -1 !important; }
}
/* === END U67 === */

/* ============================================================ U68 — /services LOGGED-IN polish (user: "card ซ้อน card" + invisible category title + stray box). Sibling to U67. The OLD `.l2v2 .l2v2-page-services` block (L2139-2156) wraps each category in a dark card (.si-wrapper bg+border) → nests with the U33 standalone .pg-svc-card (double card); forces .si-title color #0c151b !important (== the #0c151b pill bg → invisible text); and adds .si-header::before white circle (the stray box). Neutralize under .l2v2 so the U33/U34 standalone-row design shows clean. */
.l2v2 .l2v2-page-services .si-wrapper { background:transparent !important; border:0 !important; border-radius:0 !important; overflow:visible !important; margin:0 !important; }
.l2v2 .l2v2-page-services .si-title { color:#fff !important; }
.l2v2 .l2v2-page-services .si-title span[class^="ri-"], .l2v2 .l2v2-page-services .si-title span[class*=" ri-"] { color:var(--brand) !important; }
.l2v2 .l2v2-page-services .si-header { background:none !important; overflow:visible !important; }
.l2v2 .l2v2-page-services .si-header::before { display:none !important; content:none !important; }
.l2v2 .l2v2-page-services .service-item { border-top:0 !important; }
/* === END U68 === */

/* ============================================================ U69 — /drip-feed LOGGED-IN card layout (user Image#4: stats stacked vertically + cs-button floating in big empty space). ROOT: old `.l2v2 .l2v2-content .op-card--bottom{display:flex}` (L768) made .subcard-stats-grid a shrink-to-fit flex item → its auto-fit grid collapsed to 1 column. The intended design (unscoped L22001) is block: stats grid row then actions below. Restore that under .l2v2. Only drip_feed + refill use these classes (orders.twig does not) → safe. */
.l2v2 .l2v2-content .op-card--bottom { display:block !important; padding:0 !important; }
.l2v2 .l2v2-content .subcard-stats-grid { display:grid !important; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)) !important; gap:14px !important; padding:16px 20px !important; }
.l2v2 .l2v2-content .subcard-actions { display:flex !important; justify-content:flex-end !important; gap:8px; padding:12px 20px 16px !important; margin:0 !important; border-top:1px solid var(--line); background:transparent; }
@media (max-width:767px){ .l2v2 .l2v2-content .subcard-stats-grid { grid-template-columns:repeat(2,1fr) !important; } }
/* === END U69 === */

/* ============================================================ U70 — Drip Feed (ระบบทะยอยสั่ง) REDESIGN (from likester-net 7 / dripfeed-redesign.jsx). Replaces the old op-card drip layout (U69 now only affects refill). .dfx-* card: platform glyph + id/title + status pill / link+date+cs / runs PROGRESS BAR / 4-stat strip. Desktop + .dfx.mobile. Uses .l2v2 tokens (resolve via .l2v2 ancestor). */
.dfx { display:flex; flex-direction:column; gap:20px; }
.dfx-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; }
.dfx-head .ti { display:flex; align-items:center; gap:14px; }
.dfx-head .ic { width:48px; height:48px; border-radius:14px; background:rgba(42,98,255,.16); color:#2A62FF; display:grid; place-items:center; font-size:24px; flex-shrink:0; }
.dfx-head h1 { margin:0; font-size:22px; font-weight:800; color:var(--ink); letter-spacing:-0.01em; }
.dfx-head p { margin:3px 0 0; font-size:13px; color:var(--inkDim); }
.dfx-new { background:var(--brand); color:var(--brandText); border:0; border-radius:12px; padding:12px 20px; font-weight:700; font-size:13.5px; display:inline-flex; align-items:center; gap:7px; cursor:pointer; font-family:inherit; box-shadow:0 8px 20px rgba(255,193,7,.25); white-space:nowrap; transition:.16s; text-decoration:none; }
.dfx-new:hover { transform:translateY(-2px); box-shadow:0 12px 24px rgba(255,193,7,.35); color:var(--brandText); }

.dfx-toolbar { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.dfx-tabs { display:flex; gap:6px; background:var(--side); border:1px solid var(--line); border-radius:13px; padding:5px; }
.dfx-tabs a { display:inline-flex; align-items:center; gap:7px; border:0; background:transparent; color:var(--ink2); font-family:inherit; font-size:13px; font-weight:600; padding:9px 15px; border-radius:9px; cursor:pointer; transition:.14s; white-space:nowrap; text-decoration:none; }
.dfx-tabs a:hover { color:var(--ink); }
.dfx-tabs a.active { background:linear-gradient(95deg,#ffc107,#ffd54a); color:var(--brandText); box-shadow:0 6px 14px rgba(255,193,7,.3); }
.dfx-srch { position:relative; width:280px; margin:0; }
.dfx-srch i { position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--inkDim); font-size:15px; }
.dfx-srch input { width:100%; padding:11px 14px 11px 38px; background:var(--side); border:1px solid var(--line); border-radius:11px; color:var(--ink); font-family:inherit; font-size:13px; outline:none; transition:.14s; }
.dfx-srch input::placeholder { color:var(--inkDim); }
.dfx-srch input:focus { border-color:var(--brand); box-shadow:0 0 0 3px rgba(255,193,7,.15); }

.dfx-list { display:flex; flex-direction:column; gap:14px; }
.dfx-card { background:var(--side); border:1px solid var(--line); border-radius:18px; padding:18px 20px; transition:.15s; }
.dfx-card:hover { border-color:var(--line2); box-shadow:0 14px 32px rgba(0,0,0,.20); }
.dfx-top { display:flex; align-items:flex-start; gap:14px; }
.dfx-plat { width:42px; height:42px; border-radius:12px; display:grid; place-items:center; color:#fff; font-size:21px; flex-shrink:0; box-shadow:0 4px 12px rgba(0,0,0,.2); }
.dfx-tt { flex:1; min-width:0; }
.dfx-idrow { display:flex; align-items:center; gap:9px; margin-bottom:6px; }
.dfx-id { font-family:'Inter',sans-serif; font-weight:800; font-size:11px; padding:3px 9px; border-radius:7px; letter-spacing:.02em; }
.dfx-title { font-size:14.5px; font-weight:700; color:var(--ink); line-height:1.4; }
.dfx-status { flex-shrink:0; display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; padding:6px 13px; border-radius:999px; white-space:nowrap; }
.dfx-status .dot { width:7px; height:7px; border-radius:50%; background:currentColor; }
.dfx-status.run .dot { animation:dfxpulse 1.4s ease-in-out infinite; }
@keyframes dfxpulse { 0%,100%{ box-shadow:0 0 0 0 currentColor; opacity:1; } 50%{ box-shadow:0 0 0 4px transparent; opacity:.5; } }
.dfx-meta { display:flex; align-items:center; gap:10px; margin-top:14px; flex-wrap:wrap; }
.dfx-link { display:inline-flex; align-items:center; gap:7px; font-size:12.5px; color:var(--ink2); background:var(--side2); border:1px solid var(--line); border-radius:9px; padding:7px 12px; text-decoration:none; max-width:330px; transition:.14s; }
.dfx-link:hover { border-color:var(--brand); color:var(--ink); }
.dfx-link i { color:var(--brand); flex-shrink:0; }
.dfx-link span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dfx-date { font-size:12px; color:var(--inkDim); display:inline-flex; align-items:center; gap:6px; }
.dfx-cs { margin-left:auto; width:38px; height:38px; border-radius:10px; border:1px solid var(--line); background:var(--side2); color:var(--inkDim); display:grid; place-items:center; cursor:pointer; transition:.14s; flex-shrink:0; font-size:17px; }
.dfx-cs:hover { color:#ef4444; border-color:#ef4444; background:rgba(239,68,68,.1); }
.dfx-prog { margin-top:16px; }
.dfx-prog-h { display:flex; align-items:center; justify-content:space-between; font-size:12px; margin-bottom:8px; }
.dfx-prog-h .lab { color:var(--inkDim); display:inline-flex; align-items:center; gap:6px; }
.dfx-prog-h .val { font-family:'Inter',sans-serif; color:var(--ink); font-weight:700; }
.dfx-prog-h .val b { font-weight:800; }
.dfx-prog-h .val .pct { margin-left:9px; padding:2px 8px; border-radius:999px; font-size:11px; font-weight:800; }
.dfx-bar { height:9px; border-radius:999px; background:var(--side2); overflow:hidden; position:relative; }
.dfx-bar-fill { height:100%; border-radius:999px; position:relative; transition:width .5s ease; }
.dfx-bar-fill.run { background-image:linear-gradient(110deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.35) 50%, rgba(255,255,255,0) 70%); background-size:200% 100%; animation:dfxstripe 1.6s linear infinite; }
@keyframes dfxstripe { to { background-position:-200% 0; } }
.dfx-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden; margin-top:16px; }
.dfx-stat { background:var(--side); padding:12px 16px; }
.dfx-stat .l { font-size:11px; color:var(--inkDim); display:flex; align-items:center; gap:5px; }
.dfx-stat .l i { font-size:13px; }
.dfx-stat .v { font-size:15.5px; font-weight:700; color:var(--ink); margin-top:6px; font-family:'Inter',sans-serif; letter-spacing:-0.01em; }
.dfx-stat .v small { font-size:11px; color:var(--inkDim); font-weight:500; }
.dfx-stat .v a { color:var(--brand); text-decoration:none; }
.dfx-foot { display:flex; align-items:center; justify-content:center; gap:6px; padding-top:4px; flex-wrap:wrap; }
.dfx-foot .pg { min-width:36px; height:36px; padding:0 10px; border-radius:10px; border:1px solid var(--line); background:var(--side); color:var(--ink2); font-family:'Inter',sans-serif; font-size:13px; font-weight:600; cursor:pointer; transition:.14s; display:inline-grid; place-items:center; text-decoration:none; }
.dfx-foot .pg:hover { border-color:var(--brand); color:var(--ink); }
.dfx-foot .pg.active { background:var(--brand); color:var(--brandText); border-color:var(--brand); }

/* ===== mobile ===== */
@media (max-width:820px){
  .dfx { gap:16px; }
  .dfx-head { flex-direction:column; align-items:stretch; gap:14px; }
  .dfx-head h1 { font-size:19px; }
  .dfx-new { width:100%; justify-content:center; }
  .dfx-toolbar { flex-direction:column; align-items:stretch; gap:12px; }
  .dfx-tabs { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .dfx-tabs::-webkit-scrollbar { display:none; }
  .dfx-tabs a { white-space:nowrap; flex-shrink:0; }
  .dfx-srch { width:100%; }
  .dfx-card { padding:16px; }
  .dfx-top { gap:12px; }
  .dfx-plat { width:38px; height:38px; font-size:19px; }
  .dfx-title { font-size:13.5px; }
  .dfx-status { padding:5px 11px; font-size:11px; }
  .dfx-meta { gap:8px; }
  .dfx-link { max-width:200px; flex:1; }
  .dfx-stats { grid-template-columns:1fr 1fr; }
}
/* === END U70 === */

/* ============================================================ U71 — Child Panel / เช่าเว็บตัวแทนจำหน่าย REDESIGN (from likester-net 8 / childpanel-redesign.jsx). Reseller business page: hero + benefits + steps + profit example + order form/summary + FAQ. .cpx-* classes, .l2v2 tokens. Replaces the bare form. (.cpx.mobile variant → @media here.) */
.cpx { display:flex; flex-direction:column; gap:22px; }
.cpx-hero { position:relative; overflow:hidden; border-radius:24px; padding:38px 40px; background:linear-gradient(120deg,#ffc107 0%,#ffd451 55%,#ffbe00 100%); color:#0c151b; }
.cpx-hero::before { content:''; position:absolute; right:-60px; top:-80px; width:280px; height:280px; border-radius:50%; background:rgba(255,255,255,.22); pointer-events:none; }
.cpx-hero::after { content:''; position:absolute; right:90px; bottom:-110px; width:200px; height:200px; border-radius:50%; background:rgba(12,21,27,.07); pointer-events:none; }
.cpx-hero .in { position:relative; z-index:1; max-width:680px; }
.cpx-pill { display:inline-flex; align-items:center; gap:8px; background:#0c151b; color:#ffc107; padding:7px 15px; border-radius:999px; font-size:12px; font-weight:800; letter-spacing:.04em; }
.cpx-hero h1 { margin:18px 0 0; font-size:34px; font-weight:900; line-height:1.18; letter-spacing:-0.02em; }
.cpx-hero h1 em { font-style:normal; background:#0c151b; color:#ffc107; padding:0 10px; border-radius:9px; }
.cpx-hero p { margin:14px 0 0; font-size:15px; line-height:1.6; color:#3a2f00; max-width:600px; font-weight:500; }
.cpx-hero .ctas { display:flex; gap:12px; margin-top:24px; flex-wrap:wrap; }
.cpx-btn { display:inline-flex; align-items:center; gap:8px; border:0; cursor:pointer; font-family:inherit; font-weight:800; font-size:14.5px; padding:13px 24px; border-radius:13px; text-decoration:none; transition:.16s; }
.cpx-btn.dark { background:#0c151b; color:#ffc107; }
.cpx-btn.dark:hover { transform:translateY(-2px); box-shadow:0 12px 26px rgba(12,21,27,.3); }
.cpx-btn.ghost { background:rgba(12,21,27,.08); color:#0c151b; border:1.5px solid rgba(12,21,27,.25); }
.cpx-btn.ghost:hover { background:rgba(12,21,27,.14); }
.cpx-hero .stats { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:30px; position:relative; z-index:1; }
.cpx-hero .stats .s { background:rgba(255,255,255,.45); border:1px solid rgba(12,21,27,.1); border-radius:14px; padding:14px 16px; }
.cpx-hero .stats .v { font-family:'Inter',sans-serif; font-weight:900; font-size:24px; letter-spacing:-0.02em; }
.cpx-hero .stats .l { font-size:12px; font-weight:600; color:#4a3d00; margin-top:3px; }
.cpx-sh { margin-bottom:4px; }
.cpx-sh .k { font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--brand); }
.cpx-sh h2 { margin:7px 0 0; font-size:22px; font-weight:800; color:var(--ink); letter-spacing:-0.01em; }
.cpx-sh p { margin:5px 0 0; font-size:13.5px; color:var(--inkDim); }
.cpx-ben { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.cpx-bc { background:var(--side); border:1px solid var(--line); border-radius:16px; padding:22px; transition:.16s; }
.cpx-bc:hover { border-color:var(--line2); transform:translateY(-3px); box-shadow:0 16px 32px rgba(0,0,0,.16); }
.cpx-bc .ic { width:46px; height:46px; border-radius:13px; display:grid; place-items:center; color:#fff; font-size:23px; margin-bottom:15px; }
.cpx-bc h3 { margin:0 0 7px; font-size:15.5px; font-weight:800; color:var(--ink); }
.cpx-bc p { margin:0; font-size:13px; line-height:1.6; color:var(--inkDim); }
.cpx-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.cpx-step { background:var(--side); border:1px solid var(--line); border-radius:16px; padding:22px; position:relative; }
.cpx-step .n { width:34px; height:34px; border-radius:10px; background:var(--brand); color:var(--brandText); font-family:'Inter',sans-serif; font-weight:800; font-size:15px; display:grid; place-items:center; margin-bottom:14px; }
.cpx-step h4 { margin:0 0 6px; font-size:14.5px; font-weight:800; color:var(--ink); }
.cpx-step p { margin:0; font-size:12.5px; line-height:1.55; color:var(--inkDim); }
.cpx-step .arrow { position:absolute; right:-11px; top:34px; color:var(--line2); font-size:20px; z-index:2; }
.cpx-profit { background:linear-gradient(120deg,#0c151b,#16222e); border:1px solid var(--line); border-radius:20px; padding:28px 32px; display:grid; grid-template-columns:1.1fr 1.4fr; gap:30px; align-items:center; position:relative; overflow:hidden; }
.cpx-profit::before { content:''; position:absolute; right:-40px; bottom:-60px; width:220px; height:220px; border-radius:50%; background:radial-gradient(circle,rgba(255,193,7,.18),transparent 70%); }
.cpx-profit .lead { position:relative; z-index:1; }
.cpx-profit .lead .k { font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#ffc107; }
.cpx-profit .lead h3 { margin:9px 0 0; font-size:23px; font-weight:800; color:#fff; line-height:1.3; }
.cpx-profit .lead p { margin:10px 0 0; font-size:13px; color:#9fb0bf; line-height:1.6; }
.cpx-pcalc { position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
.cpx-pcalc .c { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:14px; padding:16px; text-align:center; }
.cpx-pcalc .c .l { font-size:11px; color:#9fb0bf; font-weight:600; }
.cpx-pcalc .c .v { font-family:'Inter',sans-serif; font-weight:900; font-size:22px; letter-spacing:-0.02em; margin-top:7px; color:#fff; }
.cpx-pcalc .c.win { background:linear-gradient(135deg,rgba(16,185,129,.2),rgba(16,185,129,.05)); border-color:rgba(16,185,129,.4); }
.cpx-pcalc .c.win .v { color:#34d399; }
.cpx-order { display:grid; grid-template-columns:1.55fr 1fr; gap:18px; align-items:start; }
.cpx-card { background:var(--side); border:1px solid var(--line); border-radius:20px; overflow:hidden; }
.cpx-card .ch { padding:20px 24px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:12px; }
.cpx-card .ch .ci { width:40px; height:40px; border-radius:11px; background:rgba(255,193,7,.16); color:var(--brand); display:grid; place-items:center; font-size:20px; }
.cpx-card .ch h3 { margin:0; font-size:16px; font-weight:800; color:var(--ink); }
.cpx-card .ch p { margin:2px 0 0; font-size:12px; color:var(--inkDim); }
.cpx-cb { padding:22px 24px; display:flex; flex-direction:column; gap:16px; }
.cpx-fld { display:flex; flex-direction:column; gap:7px; }
.cpx-fld > label { font-size:12.5px; font-weight:700; color:var(--ink); display:flex; align-items:center; gap:7px; }
.cpx-fld > label .req { color:#ef4444; }
.cpx-input, .cpx-select { width:100%; padding:13px 15px; background:var(--side2); border:1px solid var(--line); border-radius:12px; color:var(--ink); font-family:inherit; font-size:13.5px; outline:none; transition:.14s; }
.cpx-input::placeholder { color:var(--inkDim); }
.cpx-input:focus, .cpx-select:focus { border-color:var(--brand); box-shadow:0 0 0 3px rgba(255,193,7,.15); }
.cpx-input[readonly] { color:var(--brand); font-weight:800; font-family:'Inter',sans-serif; }
.cpx-select-wrap { position:relative; }
.cpx-select { appearance:none; cursor:pointer; padding-right:40px; }
.cpx-select-wrap .chev { position:absolute; right:14px; top:50%; transform:translateY(-50%); color:var(--inkDim); pointer-events:none; }
.cpx-ns { background:rgba(255,193,7,.1); border:1px solid rgba(255,193,7,.35); border-radius:12px; padding:14px 16px; }
.cpx-ns .t { display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; color:var(--ink); margin-bottom:10px; }
.cpx-ns .t i { color:var(--brand); font-size:16px; }
.cpx-ns .grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.cpx-ns .ns { display:flex; align-items:center; gap:8px; background:var(--side); border:1px solid var(--line); border-radius:9px; padding:9px 12px; font-family:'Inter',monospace; font-size:12.5px; color:var(--ink2); }
.cpx-ns .ns i { color:var(--brand); font-size:13px; }
.cpx-row2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.cpx-sum { position:sticky; top:16px; }
.cpx-sum .sh { background:linear-gradient(95deg,#ffc107,#ffd451); padding:20px 24px; }
.cpx-sum .sh .tag { font-size:11px; font-weight:800; letter-spacing:.1em; color:#3a2f00; }
.cpx-sum .sh .price { display:flex; align-items:baseline; gap:4px; margin-top:6px; color:#0c151b; }
.cpx-sum .sh .price .n { font-family:'Inter',sans-serif; font-weight:900; font-size:34px; letter-spacing:-0.02em; }
.cpx-sum .sh .price .m { font-size:14px; font-weight:700; }
.cpx-sum ul { list-style:none; margin:0; padding:18px 24px; display:flex; flex-direction:column; gap:12px; }
.cpx-sum li { display:flex; gap:10px; font-size:13px; color:var(--ink2); line-height:1.45; }
.cpx-sum li i { color:#10b981; font-size:17px; flex-shrink:0; }
.cpx-sub { margin:0 24px; border-top:1px solid var(--line); padding:16px 0; display:flex; flex-direction:column; gap:9px; }
.cpx-sub .r { display:flex; align-items:center; justify-content:space-between; font-size:13px; color:var(--inkDim); }
.cpx-sub .r b { color:var(--ink); font-family:'Inter',sans-serif; }
.cpx-sub .r.total { font-size:15px; }
.cpx-sub .r.total b { color:var(--brand); font-weight:800; font-size:18px; }
.cpx-submit { margin:4px 24px 22px; }
.cpx-submit button { width:100%; background:var(--brand); color:var(--brandText); border:0; border-radius:14px; padding:15px; font-family:inherit; font-weight:800; font-size:15px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; box-shadow:0 10px 24px rgba(255,193,7,.3); transition:.16s; }
.cpx-submit button:hover { transform:translateY(-2px); box-shadow:0 14px 30px rgba(255,193,7,.4); }
.cpx-submit .note { text-align:center; font-size:11.5px; color:var(--inkDim); margin-top:10px; display:flex; align-items:center; justify-content:center; gap:6px; }
.cpx-faq { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.cpx-fq { background:var(--side); border:1px solid var(--line); border-radius:14px; padding:18px 20px; }
.cpx-fq h4 { margin:0 0 7px; font-size:14px; font-weight:800; color:var(--ink); display:flex; align-items:center; gap:8px; }
.cpx-fq h4 i { color:var(--brand); }
.cpx-fq p { margin:0; font-size:12.5px; line-height:1.6; color:var(--inkDim); }
@media (max-width:980px){
  .cpx-hero { padding:26px 22px; }
  .cpx-hero h1 { font-size:25px; }
  .cpx-hero .stats { grid-template-columns:1fr 1fr; }
  .cpx-ben { grid-template-columns:1fr; }
  .cpx-steps { grid-template-columns:1fr; }
  .cpx-step .arrow { display:none; }
  .cpx-profit { grid-template-columns:1fr; gap:20px; padding:24px; }
  .cpx-order { grid-template-columns:1fr; }
  .cpx-sum { position:static; }
  .cpx-faq { grid-template-columns:1fr; }
  .cpx-hero .ctas .cpx-btn { flex:1; justify-content:center; }
}
/* === END U71 === */

/* ============================================================ U72 — BLOG redesign (list + single article) from likester-net 9 / blog-redesign.jsx.
   .blogx (theme-aware: .light=guest public yellow / .dark=logged-in dashboard) + .bx-* (list) + .bxa-* (article).
   Renders inside blog.twig + blogpost.twig wrapper .lk-land.l2v2-page-blog. Tabs/search = client-side filter by title (no blog taxonomy). TOC = JS auto from h2. read-time/tag derived; views/likes/author/related dropped (no data). Embedded per-post <style>/card neutralized so the article body blends. */

/* ---- wrapper: padding + theme bg for both states ---- */
.lk-land.l2v2-page-blog { padding:34px 26px 70px !important; }
.l2v2 .lk-land.l2v2-page-blog { padding-left:306px !important; background:#0a1219 !important; min-height:100vh; }
@media (max-width:980px){ .lk-land.l2v2-page-blog { padding:18px 14px 48px !important; } .l2v2 .lk-land.l2v2-page-blog { padding-left:14px !important; } }

.blogx { --bx-brand:#ffc107; --bx-brandText:#0c151b; font-family:'Noto Sans Thai','Inter',system-ui,sans-serif; }
.blogx.light { --bx-card:#ffffff; --bx-soft:#fffaef; --bx-line:rgba(12,21,27,.1); --bx-ink:#0c151b; --bx-dim:#6b7280; }
.blogx.dark  { --bx-card:#121D27; --bx-soft:#0C141B; --bx-line:#1f3a4a; --bx-ink:#ffffff; --bx-dim:#8b98b8; }
.blogx * { box-sizing:border-box; }
.bx-wrap, .bxa { max-width:1180px; margin:0 auto; }

/* ===== hero panel (brand yellow, both states) ===== */
.bx-hero { position:relative; overflow:hidden; border-radius:24px; padding:40px 44px; background:linear-gradient(120deg,#ffc107,#ffd451 55%,#ffbe00); color:#0c151b; }
.bx-hero::before { content:''; position:absolute; inset:0; background-image:radial-gradient(rgba(12,21,27,.09) 1.5px,transparent 1.5px); background-size:22px 22px; opacity:.5; }
.bx-hero::after { content:''; position:absolute; right:-60px; top:-80px; width:240px; height:240px; border-radius:50%; background:rgba(255,255,255,.2); }
.bx-hero .in { position:relative; z-index:1; }
.bx-badge { display:inline-flex; align-items:center; gap:8px; background:#0c151b; color:#ffc107; padding:7px 16px; border-radius:999px; font-size:11.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.bx-hero h1 { margin:16px 0 0; font-weight:900; font-size:36px; letter-spacing:-0.02em; line-height:1.1; max-width:660px; color:#0c151b; }
.bx-hero h1 em { font-style:normal; background:#0c151b; color:#ffc107; padding:0 12px; border-radius:9px; }
.bx-hero p { margin:13px 0 0; font-size:15px; line-height:1.6; color:#3a2f00; max-width:560px; font-weight:500; }
.bx-search { margin-top:24px; background:#fff; border-radius:15px; padding:7px 7px 7px 18px; display:flex; align-items:center; gap:10px; max-width:600px; box-shadow:0 14px 28px rgba(0,0,0,.1); }
.bx-search i { color:#6b7280; font-size:19px; }
.bx-search input { flex:1; padding:13px 0; border:0; background:transparent; outline:none; font-size:14px; font-family:inherit; color:#0c151b; }
.bx-search button { background:#0c151b; color:#ffc107; padding:11px 22px; border-radius:11px; font-weight:800; font-size:13px; border:0; cursor:pointer; font-family:inherit; white-space:nowrap; }

/* ===== category tabs (client filter by title keyword) ===== */
.bx-cats { display:flex; gap:8px; flex-wrap:wrap; margin:26px 0 22px; }
.bx-cat { background:var(--bx-card); border:1.5px solid var(--bx-line); color:var(--bx-ink); padding:9px 16px; border-radius:999px; font-size:13px; font-weight:600; cursor:pointer; transition:.14s; display:inline-flex; align-items:center; gap:7px; }
.bx-cat:hover { border-color:var(--bx-brand); }
.bx-cat.act { background:#0c151b; color:#ffc107; border-color:#0c151b; }
.bx-cat .c { background:rgba(0,0,0,.12); padding:1px 7px; border-radius:99px; font-size:11px; font-weight:800; font-family:'Inter',sans-serif; }
.blogx.dark .bx-cat.act { background:var(--bx-brand); color:#0c151b; border-color:var(--bx-brand); }
.blogx.dark .bx-cat:not(.act) .c { background:rgba(255,255,255,.1); }
.bx-cat.act .c { background:rgba(255,193,7,.25); color:#ffc107; }
.blogx.dark .bx-cat.act .c { background:rgba(0,0,0,.2); color:#0c151b; }

/* ===== featured ===== */
.bx-feat { background:var(--bx-card); border:1px solid var(--bx-line); border-radius:22px; overflow:hidden; display:grid; grid-template-columns:1.05fr 1fr; margin-bottom:24px; }
.bx-feat .img { aspect-ratio:16/10; display:grid; place-items:center; font-size:96px; color:rgba(255,255,255,.9); position:relative; background-size:cover; background-position:center; }
.bx-feat .img .play { position:absolute; bottom:16px; right:16px; background:rgba(255,255,255,.95); color:#0c151b; padding:7px 13px; border-radius:999px; font-size:11.5px; font-weight:800; display:inline-flex; align-items:center; gap:6px; }
.bx-feat .body { padding:32px 36px; display:flex; flex-direction:column; justify-content:center; }
.bx-tagrow { display:flex; align-items:center; gap:10px; margin-bottom:13px; flex-wrap:wrap; }
.bx-tag { background:rgba(255,193,7,.2); color:#ca8a04; padding:4px 10px; border-radius:6px; font-size:10.5px; font-weight:800; letter-spacing:.05em; }
.blogx.dark .bx-tag { background:rgba(255,193,7,.16); color:#ffc107; }
.bx-meta { font-size:12px; color:var(--bx-dim); }
.bx-feat h2 { margin:0 0 12px; font-size:27px; font-weight:900; letter-spacing:-0.02em; line-height:1.18; color:var(--bx-ink); }
.bx-feat h2 a { color:inherit; text-decoration:none; }
.bx-feat p { font-size:14px; line-height:1.65; color:var(--bx-dim); margin:0 0 20px; }
.bx-readmore { display:inline-flex; align-items:center; gap:7px; align-self:flex-start; background:var(--bx-brand); color:#0c151b; padding:11px 20px; border-radius:11px; font-weight:800; font-size:13px; text-decoration:none; transition:.15s; }
.bx-readmore:hover { transform:translateY(-2px); color:#0c151b; }

/* ===== grid ===== */
.bx-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.bx-card { background:var(--bx-card); border:1px solid var(--bx-line); border-radius:18px; overflow:hidden; transition:.18s; display:flex; flex-direction:column; }
.bx-card.hide { display:none; }
.bx-card:hover { transform:translateY(-4px); box-shadow:0 22px 44px rgba(0,0,0,.12); border-color:var(--bx-brand); }
.bx-card a.imgwrap { display:block; }
.bx-card .img { aspect-ratio:16/10; display:grid; place-items:center; font-size:50px; color:rgba(255,255,255,.9); background-size:cover; background-position:center; }
.bx-card .body { padding:20px 22px; display:flex; flex-direction:column; flex:1; }
.bx-card h3 { margin:9px 0 8px; font-size:15.5px; font-weight:800; line-height:1.4; color:var(--bx-ink); }
.bx-card h3 a { color:inherit; text-decoration:none; }
.bx-card h3 a:hover { color:#ca8a04; }
.blogx.dark .bx-card h3 a:hover { color:var(--bx-brand); }
.bx-card p { margin:0 0 14px; font-size:12.5px; line-height:1.55; color:var(--bx-dim); }
.bx-card .bx-foot { margin-top:auto; display:flex; align-items:center; justify-content:space-between; }
.bx-card .bx-rt { font-size:12px; color:var(--bx-dim); display:inline-flex; align-items:center; gap:6px; }
.bx-card .bx-rt i { color:var(--bx-brand); }
.bx-card .bx-go { font-size:12.5px; font-weight:700; color:#ca8a04; text-decoration:none; display:inline-flex; align-items:center; gap:5px; }
.blogx.dark .bx-card .bx-go { color:var(--bx-brand); }
.bx-empty { grid-column:1/-1; text-align:center; padding:50px 20px; color:var(--bx-dim); font-size:14px; }

/* ===== pager ===== */
.bx-pager { display:flex; justify-content:center; gap:6px; margin-top:34px; }
.bx-pager a, .bx-pager span { min-width:40px; height:40px; padding:0 12px; border-radius:11px; background:var(--bx-card); border:1.5px solid var(--bx-line); color:var(--bx-ink); font-weight:700; cursor:pointer; font-family:'Inter',sans-serif; font-size:13px; transition:.14s; display:inline-flex; align-items:center; justify-content:center; text-decoration:none; }
.bx-pager a:hover { border-color:var(--bx-brand); }
.bx-pager .act { background:#0c151b; color:#ffc107; border-color:#0c151b; }
.blogx.dark .bx-pager .act { background:var(--bx-brand); color:#0c151b; border-color:var(--bx-brand); }

/* ===== logged-in CTA strip ===== */
.bx-cta { margin-top:26px; background:var(--bx-card); border:1px solid var(--bx-line); border-radius:18px; padding:22px 26px; display:flex; align-items:center; gap:18px; }
.bx-cta .ic { width:48px; height:48px; border-radius:13px; background:rgba(255,193,7,.16); color:var(--bx-brand); display:grid; place-items:center; font-size:24px; flex-shrink:0; }
.bx-cta .tx { flex:1; min-width:0; }
.bx-cta .tx b { display:block; font-size:15px; font-weight:800; color:var(--bx-ink); }
.bx-cta .tx span { font-size:12.5px; color:var(--bx-dim); }
.bx-cta .go { background:var(--bx-brand); color:#0c151b; border:0; border-radius:11px; padding:11px 20px; font-weight:800; font-size:13px; cursor:pointer; font-family:inherit; white-space:nowrap; display:inline-flex; align-items:center; gap:7px; text-decoration:none; }

/* ===================== SINGLE ARTICLE ===================== */
.bxa-hero { position:relative; overflow:hidden; border-radius:24px; padding:38px 44px; background:linear-gradient(120deg,#ffc107,#ffd451 55%,#ffbe00); color:#0c151b; }
.bxa-hero::before { content:''; position:absolute; inset:0; background-image:radial-gradient(rgba(12,21,27,.09) 1.5px,transparent 1.5px); background-size:22px 22px; opacity:.5; }
.bxa-hero .in { position:relative; z-index:1; max-width:760px; }
.bxa-back { display:inline-flex; align-items:center; gap:7px; background:#0c151b; color:#fff; padding:8px 15px; border-radius:999px; font-size:12.5px; font-weight:600; text-decoration:none; cursor:pointer; }
.bxa-back:hover { color:#ffc107; }
.bxa-tagrow { display:flex; align-items:center; gap:10px; margin:18px 0 0; flex-wrap:wrap; }
.bxa-tag { background:#0c151b; color:#ffc107; padding:5px 13px; border-radius:8px; font-size:10.5px; font-weight:800; letter-spacing:.06em; }
.bxa-tagrow .meta { font-size:12.5px; color:#3a2f00; font-weight:600; }
.bxa-hero h1 { margin:16px 0 0; font-weight:900; font-size:36px; letter-spacing:-0.02em; line-height:1.12; color:#0c151b; }

.bxa-cover { margin:-30px auto 0; max-width:1000px; position:relative; z-index:3; }
.bxa-cover .img { aspect-ratio:16/9; border-radius:20px; display:grid; place-items:center; color:#fff; font-size:84px; box-shadow:0 30px 60px rgba(0,0,0,.28); background-size:cover; background-position:center; }

.bxa-body { display:grid; grid-template-columns:220px 1fr 210px; gap:28px; margin-top:34px; align-items:start; }
.bxa-body.no-toc { grid-template-columns:1fr 210px; }
.bxa-toc { position:sticky; top:14px; background:var(--bx-card); border:1px solid var(--bx-line); border-radius:16px; padding:20px; }
.bxa-toc.hide { display:none; }
.bxa-toc h4 { margin:0 0 12px; font-size:10.5px; font-weight:800; letter-spacing:.12em; color:var(--bx-dim); text-transform:uppercase; }
.bxa-toc a { display:block; font-size:12.5px; color:var(--bx-ink); padding:6px 0 6px 12px; text-decoration:none; border-left:2px solid transparent; cursor:pointer; transition:.14s; line-height:1.4; }
.bxa-toc a:hover { color:#ca8a04; border-color:var(--bx-brand); }
.bxa-toc a.act { border-color:var(--bx-brand); color:#ca8a04; font-weight:700; }
.blogx.dark .bxa-toc a.act, .blogx.dark .bxa-toc a:hover { color:var(--bx-brand); }

.bxa-text { background:var(--bx-card); border:1px solid var(--bx-line); border-radius:22px; padding:42px 48px; min-width:0; overflow:hidden; }
/* base typography (helps clean posts; embedded per-post <style> still wins for legacy posts) */
.bxa-text h2 { font-size:23px; font-weight:900; letter-spacing:-0.01em; color:var(--bx-ink); margin:30px 0 12px; scroll-margin-top:80px; }
.bxa-text h2:first-child { margin-top:0; }
.bxa-text h3 { font-size:18px; font-weight:800; color:var(--bx-ink); margin:24px 0 10px; scroll-margin-top:80px; }
.bxa-text p { font-size:15px; line-height:1.85; color:var(--bx-dim); margin:0 0 16px; }
.bxa-text p b, .bxa-text p strong, .bxa-text li b, .bxa-text li strong { color:var(--bx-ink); }
.bxa-text ul, .bxa-text ol { padding-left:20px; margin:12px 0 20px; }
.bxa-text li { font-size:15px; line-height:1.8; color:var(--bx-dim); margin-bottom:8px; }
.bxa-text img { max-width:100%; height:auto; border-radius:14px; margin:18px 0; }
.bxa-text a { color:#ca8a04; }
.blogx.dark .bxa-text a { color:var(--bx-brand); }
/* neutralize a per-post HTML page that ships its own white card / max-width / shadow */
.bxa-text .article-container { max-width:none !important; margin:0 !important; padding:0 !important; }
.bxa-text .article-content { background:transparent !important; box-shadow:none !important; padding:0 !important; border-radius:0 !important; }

.bxa-share { position:sticky; top:14px; }
.bxa-share h4 { margin:0 0 12px; font-size:10.5px; font-weight:800; color:var(--bx-dim); letter-spacing:.12em; text-transform:uppercase; }
.bxa-sbtn { display:flex; align-items:center; gap:10px; padding:11px 13px; background:var(--bx-card); border:1px solid var(--bx-line); border-radius:11px; font-size:12.5px; font-weight:700; color:var(--bx-ink); cursor:pointer; transition:.14s; margin-bottom:7px; text-decoration:none; }
.bxa-sbtn:hover { border-color:var(--bx-brand); }
.bxa-sbtn .ic { width:24px; height:24px; border-radius:7px; display:grid; place-items:center; color:#fff; font-size:14px; }
.bxa-sbtn .ic.line { background:#06C755; } .bxa-sbtn .ic.fb { background:#1877f2; } .bxa-sbtn .ic.x { background:#000; } .bxa-sbtn .ic.cp { background:var(--bx-brand); color:#0c151b; }

.bxa-promo { margin-top:26px; border-radius:18px; padding:26px 30px; background:linear-gradient(120deg,#0c151b,#16222e); border:1px solid var(--bx-line); display:flex; align-items:center; gap:20px; position:relative; overflow:hidden; }
.bxa-promo::before { content:''; position:absolute; right:-30px; bottom:-50px; width:180px; height:180px; border-radius:50%; background:radial-gradient(circle,rgba(255,193,7,.2),transparent 70%); }
.bxa-promo .tx { flex:1; position:relative; z-index:1; }
.bxa-promo .tx b { display:block; font-size:18px; font-weight:800; color:#fff; }
.bxa-promo .tx span { font-size:13px; color:#9fb0bf; }
.bxa-promo .go { position:relative; z-index:1; background:var(--bx-brand); color:#0c151b; border:0; border-radius:12px; padding:13px 24px; font-weight:800; font-size:14px; cursor:pointer; font-family:inherit; white-space:nowrap; display:inline-flex; align-items:center; gap:8px; text-decoration:none; }

/* ===== mobile (was .blogx.mobile in jsx) ===== */
@media (max-width:980px){
  .bx-hero, .bxa-hero { padding:26px 22px; }
  .bx-hero h1, .bxa-hero h1 { font-size:25px; }
  .bx-search { flex-wrap:wrap; }
  .bx-feat { grid-template-columns:1fr; }
  .bx-feat .body { padding:24px; }
  .bx-grid { grid-template-columns:1fr; }
  .bx-cats { overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; }
  .bx-cats::-webkit-scrollbar { display:none; }
  .bx-cat { flex-shrink:0; }
  .bx-cta { flex-direction:column; align-items:flex-start; }
  .bx-cta .go { width:100%; justify-content:center; }
  .bxa-body, .bxa-body.no-toc { grid-template-columns:1fr; gap:18px; }
  .bxa-toc, .bxa-share { position:static; }
  .bxa-text { padding:26px 22px; }
  .bxa-promo { flex-direction:column; align-items:flex-start; }
  .bxa-promo .go { width:100%; justify-content:center; }
  .bxa-cover { margin-top:-20px; }
}
/* === END U72 === */


/* ===== U72b — BLOG article body: white card in dark (logged-in) state + fixed-on-white typography.
   Per-post Summernote HTML is authored for a WHITE bg (color:#333 + its own .highlight-box/.service-item boxes). Keep the article body a light card in BOTH states. Colors are element-scoped WITHOUT !important so the post's own inline/box colors win; we only rescue known dark info-boxes (.service-item) that were authored without a light text color. ===== */
.blogx.dark .bxa-text { background:#ffffff !important; border-color:rgba(0,0,0,.06) !important; box-shadow:0 18px 40px rgba(0,0,0,.28); }
.bxa-text h2, .bxa-text h3, .bxa-text h4 { color:#0c151b; }
.bxa-text p, .bxa-text li, .bxa-text td { color:#333; }
.bxa-text p b, .bxa-text p strong, .bxa-text li b, .bxa-text li strong { color:#0c151b; }
.bxa-text a { color:#ca8a04; }
.bxa-text .service-item, .bxa-text .service-item * { color:#ffffff !important; }
/* === END U72b === */

/* ============================================================ U73 — PUBLIC pages /how-it-works + /terms (likester-net 10 / public-redesign.jsx). NS .px (yellow hero · cream body · white cards · light). PxNav/PxFoot dropped (layout.twig provides nav+footer). .px.mobile → @media. Terms keeps its existing bilingual legal content (.tos-*) inside a .px-doc white card → override its dark-authored text colors to read on white. */
.px { font-family:'Noto Sans Thai','Inter',system-ui,sans-serif; background:#fffaef; color:#0c151b; }
.px *, .px *::before, .px *::after { box-sizing:border-box; }
.px-wrap { max-width:1120px; margin:0 auto; padding:0 24px; }
/* logged-in: this public page sits in the dashboard shell — force its own light bg, drop sidebar gap */
.l2v2 .px { background:#fffaef; }
.l2v2-page-terms, .l2v2-page-how { padding:0 !important; }

/* hero */
.px-hero { background:linear-gradient(180deg,#ffc107,#ffce3a); position:relative; padding:54px 24px 64px; text-align:center; overflow:hidden; }
.px-hero::before { content:''; position:absolute; inset:0; background-image:radial-gradient(rgba(12,21,27,.08) 1.5px,transparent 1.5px); background-size:22px 22px; opacity:.5; }
.px-hero .in { position:relative; z-index:1; max-width:760px; margin:0 auto; }
.px-badge { display:inline-flex; align-items:center; gap:8px; background:#0c151b; color:#ffc107; padding:8px 18px; border-radius:999px; font-size:11.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.px-hero h1 { margin:22px 0 0; font-weight:900; font-size:44px; letter-spacing:-0.02em; line-height:1.32; color:#0c151b; }
.px-hero h1 em { font-style:normal; background:#0c151b; color:#ffc107; padding:0 13px; border-radius:11px; display:inline-block; line-height:1.12; margin-top:6px; }
.px-hero .sub { margin:18px 0 0; font-size:14px; line-height:1.5; color:#6b5a00; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.px-hero .lead { margin:10px auto 0; font-size:14.5px; line-height:1.7; color:#4a3d00; max-width:600px; }
.px-hero .ctas { display:flex; gap:13px; justify-content:center; margin-top:26px; flex-wrap:wrap; }
.px-btn { display:inline-flex; align-items:center; gap:8px; border:0; cursor:pointer; font-family:inherit; font-weight:800; font-size:14.5px; padding:14px 26px; border-radius:13px; text-decoration:none; transition:.16s; }
.px-btn.dark { background:#0c151b; color:#ffc107; }
.px-btn.dark:hover { transform:translateY(-2px); box-shadow:0 12px 26px rgba(12,21,27,.3); color:#ffc107; }
.px-btn.out { background:transparent; color:#0c151b; border:2px solid #0c151b; }
.px-btn.out:hover { background:rgba(12,21,27,.08); color:#0c151b; }

/* sections */
.px-sec { padding:60px 0; }
.px-sec.cream { background:#fffaef; }
.px-sec.white { background:#fff; }
.px-sh { text-align:center; margin-bottom:40px; }
.px-eye { display:inline-flex; align-items:center; gap:8px; font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#ca8a04; }
.px-sh h2 { margin:10px 0 0; font-size:30px; font-weight:900; letter-spacing:-0.02em; color:#0c151b; }
.px-sh h2 em { font-style:normal; background:#ffc107; padding:0 10px; border-radius:8px; }
.px-sh p { margin:9px auto 0; font-size:14px; color:#6b7280; max-width:540px; line-height:1.6; }

/* steps */
.px-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.px-step { background:#fff; border:1.5px solid rgba(12,21,27,.08); border-radius:20px; padding:26px 24px; position:relative; transition:.16s; }
.px-step:hover { transform:translateY(-4px); box-shadow:0 18px 36px rgba(0,0,0,.08); border-color:#ffc107; }
.px-step .n { width:38px; height:38px; border-radius:11px; background:#0c151b; color:#ffc107; font-family:'Inter',sans-serif; font-weight:900; font-size:17px; display:grid; place-items:center; }
.px-step .ic { font-size:26px; color:#ffc107; margin:16px 0 12px; }
.px-step h3 { margin:0 0 8px; font-size:16.5px; font-weight:800; color:#0c151b; }
.px-step p { margin:0; font-size:13px; line-height:1.6; color:#6b7280; }
.px-step .arrow { position:absolute; right:-11px; top:40px; color:rgba(12,21,27,.2); font-size:20px; z-index:2; }
.px-step .top { display:flex; align-items:center; justify-content:space-between; }
.px-step .meta { display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:800; color:#ca8a04; background:#fffaef; border:1px solid #ffe08a; padding:5px 10px; border-radius:999px; }
.px-step ul { list-style:none; margin:13px 0 0; padding:13px 0 0; border-top:1px solid rgba(12,21,27,.07); display:flex; flex-direction:column; gap:8px; }
.px-step li { display:flex; align-items:flex-start; gap:8px; font-size:12px; line-height:1.45; color:#475569; }
.px-step li i { color:#10b981; font-size:14px; flex-shrink:0; margin-top:1px; }

/* stats */
.px-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; max-width:900px; margin:0 auto; }
.px-stat { text-align:center; background:#fff; border:1.5px solid rgba(12,21,27,.08); border-radius:16px; padding:24px 16px; }
.px-stat .v { font-family:'Inter',sans-serif; font-weight:900; font-size:30px; color:#0c151b; letter-spacing:-0.02em; line-height:1; }
.px-stat .l { font-size:12.5px; color:#6b7280; margin-top:7px; font-weight:600; }

/* walkthrough */
.px-walk { display:flex; flex-direction:column; gap:34px; max-width:1000px; margin:0 auto; }
.px-wrow { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
.px-wrow.rev .px-wvis { order:2; }
.px-wvis { aspect-ratio:4/3; border-radius:20px; background-color:#fffaef; background-image:repeating-linear-gradient(135deg,rgba(12,21,27,.05) 0 12px,transparent 12px 24px); border:1.5px solid rgba(12,21,27,.08); display:grid; place-items:center; position:relative; overflow:hidden; }
.px-wvis .glyph { font-size:66px; color:#ffc107; }
.px-wvis .tag { position:absolute; bottom:14px; left:14px; font-family:'Inter',ui-monospace,monospace; font-size:11px; color:#6b7280; background:#fff; padding:5px 11px; border-radius:8px; border:1px solid #ffe08a; }
.px-wtext .k { font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#ca8a04; }
.px-wtext h3 { margin:9px 0 11px; font-size:23px; font-weight:900; letter-spacing:-0.01em; color:#0c151b; }
.px-wtext p { margin:0 0 16px; font-size:14px; line-height:1.75; color:#475569; }
.px-wtext ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.px-wtext li { display:flex; gap:10px; font-size:13.5px; color:#334155; line-height:1.5; }
.px-wtext li i { color:#10b981; font-size:17px; flex-shrink:0; margin-top:1px; }

/* feature cards */
.px-feat { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.px-fc { background:#fffaef; border:1.5px solid rgba(12,21,27,.07); border-radius:18px; padding:24px; text-align:center; }
.px-fc .ic { width:54px; height:54px; border-radius:15px; display:grid; place-items:center; color:#fff; font-size:26px; margin:0 auto 14px; }
.px-fc h4 { margin:0 0 7px; font-size:15px; font-weight:800; color:#0c151b; }
.px-fc p { margin:0; font-size:12.5px; line-height:1.6; color:#6b7280; }

/* payment */
.px-pay { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.px-pc { display:inline-flex; align-items:center; gap:9px; background:#fff; border:1.5px solid rgba(12,21,27,.08); border-radius:13px; padding:13px 20px; font-size:13.5px; font-weight:700; color:#0c151b; }
.px-pc i { font-size:20px; color:#ca8a04; }

/* platforms */
.px-plats { display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
.px-plat { background:#fff; border:1.5px solid rgba(12,21,27,.08); border-radius:16px; padding:22px 14px; text-align:center; transition:.16s; }
.px-plat:hover { transform:translateY(-4px); box-shadow:0 16px 30px rgba(0,0,0,.1); }
.px-plat .ic { width:48px; height:48px; border-radius:13px; display:grid; place-items:center; color:#fff; font-size:24px; margin:0 auto 10px; }
.px-plat span { font-size:13px; font-weight:700; color:#0c151b; }

/* faq */
.px-faq { max-width:780px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.px-fq { background:#fff; border:1.5px solid rgba(12,21,27,.08); border-radius:14px; padding:20px 24px; }
.px-fq h4 { margin:0 0 8px; font-size:15px; font-weight:800; display:flex; align-items:center; gap:9px; color:#0c151b; }
.px-fq h4 i { color:#ffc107; }
.px-fq p { margin:0; font-size:13px; line-height:1.65; color:#6b7280; }

/* final cta */
.px-final { background:linear-gradient(180deg,#ffc107,#ffce3a); text-align:center; padding:60px 24px; position:relative; overflow:hidden; }
.px-final::before { content:''; position:absolute; inset:0; background-image:radial-gradient(rgba(12,21,27,.08) 1.5px,transparent 1.5px); background-size:22px 22px; opacity:.5; }
.px-final .in { position:relative; z-index:1; }
.px-final h2 { margin:0; font-size:32px; font-weight:900; letter-spacing:-0.02em; color:#0c151b; }
.px-final h2 em { font-style:normal; background:#0c151b; color:#ffc107; padding:0 12px; border-radius:10px; }
.px-final p { margin:12px 0 0; font-size:15px; color:#3a2f00; font-weight:600; }
.px-final .ctas { display:flex; gap:13px; justify-content:center; margin-top:24px; flex-wrap:wrap; }

/* ===== terms: keep its existing tab UI + bilingual legal content + JS; restyle for the light .px frame (override the dark-authored .tos-* styles regardless of html.light/dark) ===== */
.px > section { background:#fffaef; padding:30px 0 56px; }
.px .container { max-width:1120px; }
.px .card, .px .card-header { background:#fff !important; border:1.5px solid rgba(12,21,27,.08) !important; border-radius:22px !important; box-shadow:0 18px 40px rgba(0,0,0,.05) !important; }
.px .card-header { padding:30px 34px !important; }
.px .tos-page { padding:0; }
.px .tos-nav-btn { background:#fffaef !important; border:1.5px solid rgba(12,21,27,.1) !important; color:#0c151b !important; border-radius:999px !important; }
.px .tos-nav-btn.active { background:#0c151b !important; border-color:#0c151b !important; }
.px .tos-nav-btn span, .px .tos-nav-btn.active span { color:inherit !important; }
.px .tos-nav-btn.active span { color:#ffc107 !important; }
.px .tos-intro-text { color:#475569 !important; }
.px .tos-tab h4 { color:#0c151b !important; border-bottom-color:rgba(0,0,0,.08) !important; }
.px .tos-tab .tos-sub { color:#374151 !important; }
.px .tos-tab p { color:#3a4452 !important; }
.px .tos-tab ul li { color:#3a4452 !important; }
.px .tos-tab ul li strong, .px .tos-tab p strong { color:#0c151b !important; }
.px .tos-section-label { color:#ca8a04 !important; }
.px .tos-item { background:#fffaef !important; }
.px .tos-item-num { color:#ca8a04 !important; }
.px .tos-highlight p { color:#991b1b !important; }
.px .tos-highlight strong { color:#dc2626 !important; }
.px .tos-info-box p { color:#1e40af !important; }
.px .tos-contact-box p { color:#374151 !important; }
.px .tos-update-date { color:#6b7280 !important; border-top-color:rgba(0,0,0,.08) !important; }
.px-legal-note { margin:20px auto 0; background:#fffaef; border:1px dashed #ffc107; border-radius:14px; font-size:13.5px; color:#344; display:flex; align-items:center; gap:12px; padding:18px 24px; }
.px-legal-note i { color:#ca8a04; font-size:22px; flex-shrink:0; }

/* mobile (was .px.mobile in jsx) */
@media (max-width:980px){
  .px-hero { padding:34px 18px 40px; }
  .px-hero h1 { font-size:30px; }
  .px-steps { grid-template-columns:1fr; }
  .px-step .arrow { display:none; }
  .px-stats { grid-template-columns:1fr 1fr; }
  .px-walk { gap:26px; }
  .px-wrow { grid-template-columns:1fr; gap:18px; }
  .px-wrow.rev .px-wvis { order:0; }
  .px-feat { grid-template-columns:1fr 1fr; }
  .px-plats { grid-template-columns:1fr 1fr 1fr; }
  .px-sh h2 { font-size:24px; }
  .px-legal { grid-template-columns:1fr; }
  .px-toc { position:static; }
  .px-doc { padding:26px 22px; }
  .px-final h2 { font-size:25px; }
  .px-hero .ctas .px-btn, .px-final .ctas .px-btn { flex:1; justify-content:center; }
}
/* === END U73 === */

/* ============ U74 — GLOBAL FOOTER (was embedded yp-foot in 28 files → moved to layout, single guest-only footer). Host .lkf provides tokens + yellow bg WITHOUT class .yp (so it never triggers the body:has(.yp) header-hide on normal pages). Footer keeps class yp-foot so the legacy footer:not(.yp-foot) hide rule leaves it alone. Rules below = the original .yp .yp-foot block transformed .yp→.lkf. ============ */
.lkf { --y:#FFC400; --y-deep:#E7A700; --y-tint:#FFD740; --y-soft:#FFE9A0; --ink:#141414; --ink2:#3a3a3a; --paper:#ffffff; --paper2:#FFFDF6; --mut:#6b6b6b; background:var(--y); color:var(--ink); font-family:'Inter','Noto Sans Thai',-apple-system,sans-serif; -webkit-font-smoothing:antialiased; }
.lkf *, .lkf *::before, .lkf *::after { box-sizing:border-box; }
.lkf .wrap { max-width:1160px; margin:0 auto; padding:0 40px; position:relative; }
@media (max-width:560px){ .lkf .wrap { padding:0 20px; } }
.lkf .yp-foot { padding:0 0 40px; }
.lkf .yp-footP { background:var(--ink); color:#bfbfbf; border-radius:34px 34px 0 0; padding:clamp(44px,5vw,64px) clamp(32px,4vw,60px) 40px; }
.lkf .yp-ft { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; padding-bottom:36px; border-bottom:1px solid #2a2a2a; }
.lkf .yp-ft .brand { display:flex; align-items:center; gap:11px; margin-bottom:16px; }
.lkf .yp-ft .brand .mark { width:34px; height:34px; border-radius:9px; background:var(--y); display:grid; place-items:center; color:var(--ink); font-weight:800; font-size:19px; }
.lkf .yp-ft .brand .word { font-weight:800; font-size:19px; color:#fff; letter-spacing:-0.02em; }
.lkf .yp-ft .desc { font-size:14px; line-height:1.65; max-width:300px; margin:0; }
.lkf .yp-ft h5 { margin:0 0 16px; font-size:13px; font-weight:800; color:var(--y); letter-spacing:.04em; }
.lkf .yp-ft a { display:block; color:#bfbfbf; text-decoration:none; font-size:14px; margin-bottom:11px; }
.lkf .yp-ft a:hover { color:#fff; }
.lkf .yp-fb { display:flex; justify-content:space-between; margin-top:24px; font-size:13px; color:#8a8a8a; flex-wrap:wrap; gap:8px; }

/* responsive */
@media (max-width:980px){
  .lkf .yp-hero .grid { grid-template-columns:1fr; gap:44px; }
  .lkf .yp-card { max-width:480px; }
  .lkf .yp-statsP { grid-template-columns:repeat(2,1fr); }
  .lkf .yp-grid4 { grid-template-columns:repeat(2,1fr); }
  .lkf .yp-ptP { grid-template-columns:1fr; }
  .lkf .yp-steps { grid-template-columns:repeat(2,1fr); row-gap:36px; }
  .lkf .yp-decadeP { grid-template-columns:1fr; }
  .lkf .yp-soc { grid-template-columns:repeat(2,1fr); }
  .lkf .yp-news { grid-template-columns:1fr; }
  .lkf .yp-ft { grid-template-columns:1fr 1fr; gap:28px; }
  .lkf .yp-nav .links { display:none; }
}
@media (max-width:560px){
  .lkf .wrap { padding:0 22px; }
  .lkf .yp-statsP { grid-template-columns:1fr; text-align:center; }
  .lkf .yp-grid4, .lkf .yp-soc, .lkf .yp-steps { grid-template-columns:1fr; }
  .lkf .yp-cmp { font-size:13px; }
  .lkf .yp-cmp th, .lkf .yp-cmp td { padding:13px 12px; }
}
/* comprehensive SEO footer (platform service columns → internal links) */
.lkf .yp-ft-head { display:grid; grid-template-columns:1.3fr 2.7fr; gap:48px; padding-bottom:36px; border-bottom:1px solid #2a2a2a; }
.lkf .yp-ft-brand .brand { display:flex; align-items:center; gap:11px; margin-bottom:16px; }
.lkf .yp-ft-brand .brand .mark { width:34px; height:34px; border-radius:9px; background:var(--y); display:grid; place-items:center; color:var(--ink); font-weight:800; font-size:19px; }
.lkf .yp-ft-brand .brand .word { font-weight:800; font-size:19px; color:#fff; letter-spacing:-0.02em; }
.lkf .yp-ft-brand .desc { font-size:14px; line-height:1.65; color:#bfbfbf; max-width:320px; margin:0 0 18px; }
.lkf .yp-ft-contact a { display:flex; align-items:center; gap:9px; color:#bfbfbf; text-decoration:none; font-size:13.5px; margin-bottom:9px; }
.lkf .yp-ft-contact a:hover { color:var(--y); }
.lkf .yp-ft-contact a i { color:var(--y); font-size:16px; }
.lkf .yp-ft-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:26px; }
.lkf .yp-ft-mid { display:grid; grid-template-columns:repeat(3,1fr); gap:40px; padding-top:32px; }
.lkf .yp-ft-col h5 { margin:0 0 15px; font-size:13px; font-weight:800; color:var(--y); letter-spacing:.04em; }
.lkf .yp-ft-col a { display:block; color:#bfbfbf; text-decoration:none; font-size:13.5px; margin-bottom:10px; transition:.14s; }
.lkf .yp-ft-col a:hover { color:#fff; }
.lkf .yp-ft-col a.all { color:var(--y); font-weight:600; margin-top:4px; }
.lkf .yp-ft-col a.all i { font-size:14px; }
@media (max-width:980px){ .lkf .yp-ft-head { grid-template-columns:1fr; gap:34px; } .lkf .yp-ft-grid { grid-template-columns:repeat(3,1fr); row-gap:28px; } .lkf .yp-ft-mid { grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .lkf .yp-ft-grid { grid-template-columns:1fr 1fr; } .lkf .yp-ft-mid { grid-template-columns:1fr; } }
/* keep the global footer visible even on .yp landing pages (legacy hide rule targets footer:not(.yp-foot); ours is .yp-foot so it is safe, but assert it) */
body:has(.yp) .lkf, .yp-on .lkf { display:block !important; }
/* === END U74 === */

/* ============ U75 — API key one-time UX (full key shown only on generate; masked otherwise). /api page + /account fresh-key block. ============ */
.l2v2-page-api .akc-note { display:flex; gap:10px; align-items:flex-start; background:rgba(255,193,7,.08); border:1px solid rgba(255,193,7,.22); border-radius:12px; padding:13px 16px; font-size:13px; line-height:1.6; color:var(--ink2); margin-bottom:14px; }
.l2v2-page-api .akc-note i { color:var(--brand); font-size:18px; flex-shrink:0; margin-top:1px; }
.l2v2-page-api .akc-note b { color:var(--ink); }
.l2v2-page-api .akc-fresh { margin-bottom:14px; }
.l2v2-page-api .akc-fresh-banner { display:flex; gap:9px; align-items:center; background:rgba(16,185,129,.12); border:1px solid rgba(16,185,129,.35); color:#10b981; border-radius:12px; padding:12px 16px; font-size:13px; font-weight:700; line-height:1.5; margin-bottom:10px; }
.l2v2-page-api .akc-fresh .k { font-family:'Inter',ui-monospace,monospace; font-size:14px; color:var(--ink); word-break:break-all; flex:1; }
.l2v2-page-api .key-row .k.masked { letter-spacing:2px; color:var(--inkDim); }
.l2v2-page-api .key-btn.copy { background:var(--brand); color:var(--brandText); border:0; border-radius:9px; padding:9px 16px; font-weight:700; font-size:13px; cursor:pointer; white-space:nowrap; display:inline-flex; align-items:center; gap:6px; font-family:inherit; }
.l2v2-page-api .akc-genform { display:inline; margin:0; }
.l2v2-page-api .akc-btn.primary { background:var(--brand) !important; color:var(--brandText) !important; border:0; cursor:pointer; font-family:inherit; }
.l2v2-page-api .akc-btn.primary:hover { filter:brightness(1.05); }
/* account fresh-key block */
.v15-api .key-fresh { margin-top:8px; }
.v15-api .key-fresh .key { font-family:'Inter',ui-monospace,monospace; font-size:13.5px; word-break:break-all; background:rgba(0,0,0,.18); border:1px dashed var(--brand,#ffc107); border-radius:9px; padding:10px 12px; color:var(--ink,#fff); }
.v15-api .key-copy { margin-top:8px; background:var(--brand,#ffc107); color:#0c151b; border:0; border-radius:8px; padding:8px 14px; font-weight:700; font-size:12.5px; cursor:pointer; display:inline-flex; align-items:center; gap:6px; font-family:inherit; }
.v15-api .key-warn { margin-top:9px; display:flex; gap:7px; align-items:center; font-size:12px; color:#f87171; font-weight:600; line-height:1.5; }
.v15-api .key-warn i { font-size:15px; flex-shrink:0; }
/* === END U75 === */

/* ============ U76 — /tickets form polish: tame native <select> dropdown (smaller, dark options, custom arrow) + make the file-upload zone pop on the dark theme. CSS only (markup unchanged). ============ */
.l2v2 .l2v2-page-tickets .tk-form select.form-control {
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  font-size:13.5px; line-height:1.45; padding-right:40px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffc107' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat; background-position:right 14px center; background-size:13px;
}
/* native dropdown list (macOS/Chrome respects option bg+color+font) → dark + smaller */
.l2v2 .l2v2-page-tickets .tk-form select.form-control option {
  background:#0f1a23; color:#e7edf3; font-size:13.5px; padding:8px 12px;
}
.l2v2 .l2v2-page-tickets .tk-form select.form-control option:checked { background:#1b2a36; color:#ffc107; }

/* upload zone — pops on dark */
.l2v2 .l2v2-page-tickets .tickets-uploader {
  background:rgba(255,193,7,.05) !important;
  border:2px dashed rgba(255,193,7,.4) !important;
  padding:20px 18px !important; border-radius:14px !important; transition:.15s;
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.l2v2 .l2v2-page-tickets .tickets-uploader:hover { background:rgba(255,193,7,.1) !important; border-color:var(--brand) !important; }
.l2v2 .l2v2-page-tickets .upload-button {
  display:inline-flex !important; align-items:center; gap:8px;
  background:var(--brand) !important; color:var(--brandText) !important;
  border:0 !important; border-radius:10px !important;
  padding:11px 22px !important; font-weight:700 !important; font-size:13px !important;
  cursor:pointer; box-shadow:0 6px 16px rgba(255,193,7,.22); margin:0 !important;
}
.l2v2 .l2v2-page-tickets .upload-button:hover { filter:brightness(1.06); transform:translateY(-1px); }
.l2v2 .l2v2-page-tickets .tickets-uploader .error-message { color:#f87171; font-size:12px; }
/* === END U76 === */

/* ============ U76b — tickets uploader: compact + readable (U76 made it too big + text was #333 black from perfectuploader) ============ */
.l2v2 .l2v2-page-tickets .tickets-uploader { background:var(--side2) !important; border:1.5px dashed var(--line2) !important; padding:12px 14px !important; border-radius:11px !important; flex-direction:row !important; align-items:center !important; gap:8px !important; }
.l2v2 .l2v2-page-tickets .tickets-uploader:hover { border-color:var(--brand) !important; background:var(--side2) !important; }
.l2v2 .l2v2-page-tickets .tickets-uploader #uploader-button,
.l2v2 .l2v2-page-tickets .tickets-uploader .files-wrapper,
.l2v2 .l2v2-page-tickets .tickets-uploader .paperclip,
.l2v2 .l2v2-page-tickets .tickets-uploader .paperclip * { color:var(--ink2) !important; }
.l2v2 .l2v2-page-tickets .tickets-uploader .paperclip:hover, .l2v2 .l2v2-page-tickets .tickets-uploader .paperclip:hover * { color:var(--ink) !important; }
.l2v2 .l2v2-page-tickets .upload-button { background:transparent !important; color:var(--ink2) !important; box-shadow:none !important; padding:0 !important; font-weight:600 !important; border:0 !important; }

/* ============ U76c — custom dropdown for ticket selects (native macOS popup is huge + uncontrollable). JS in tickets.twig builds .cd-* mirroring the hidden <select> (keeps value/name/onchange). ============ */
.l2v2 .l2v2-page-tickets .cd-wrap { position:relative; }
.l2v2 .l2v2-page-tickets .cd-btn { width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--side2); border:1px solid var(--line); border-radius:11px; padding:12px 14px; color:var(--ink); font-size:13.5px; font-family:inherit; cursor:pointer; text-align:left; }
.l2v2 .l2v2-page-tickets .cd-wrap.open .cd-btn { border-color:var(--brand); }
.l2v2 .l2v2-page-tickets .cd-btn i { color:var(--brand); font-size:18px; transition:.15s; flex-shrink:0; }
.l2v2 .l2v2-page-tickets .cd-wrap.open .cd-btn i { transform:rotate(180deg); }
.l2v2 .l2v2-page-tickets .cd-list { position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:50; background:#0f1a23; border:1px solid var(--line2); border-radius:11px; padding:5px; box-shadow:0 16px 36px rgba(0,0,0,.4); max-height:240px; overflow-y:auto; display:none; }
.l2v2 .l2v2-page-tickets .cd-wrap.open .cd-list { display:block; }
.l2v2 .l2v2-page-tickets .cd-item { padding:9px 12px; border-radius:8px; font-size:13.5px; color:var(--ink2); cursor:pointer; transition:.1s; }
.l2v2 .l2v2-page-tickets .cd-item:hover { background:var(--side); color:var(--ink); }
.l2v2 .l2v2-page-tickets .cd-item.sel { background:rgba(255,193,7,.14); color:var(--brand); font-weight:600; }
/* === END U76c === */

/* ============ U77 — /viewticket redesigned as a chat UI (.vtx). Solar dark. header + scrollable bubbles (support left / user right) + sticky input bar. ============ */
.l2v2 .l2v2-page-viewticket { padding:0 !important; }
.vtx { display:flex; flex-direction:column; height:calc(100vh - 132px); min-height:520px; background:var(--side); border:1px solid var(--line); border-radius:18px; overflow:hidden; margin:6px 0; }

/* header */
.vtx-head { display:flex; align-items:center; gap:14px; padding:16px 20px; border-bottom:1px solid var(--line); background:var(--side2); flex-shrink:0; }
.vtx-back { width:40px; height:40px; flex-shrink:0; border-radius:11px; border:1px solid var(--line); background:var(--side); color:var(--ink); display:grid; place-items:center; font-size:19px; text-decoration:none; transition:.14s; }
.vtx-back:hover { border-color:var(--brand); color:var(--brand); }
.vtx-h-main { flex:1; min-width:0; }
.vtx-h-title { font-size:16px; font-weight:800; color:var(--ink); letter-spacing:-0.01em; display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.vtx-h-title .vtx-id { font-size:12px; font-weight:700; color:var(--brand); background:rgba(255,193,7,.12); padding:2px 9px; border-radius:7px; font-family:'Inter',monospace; }
.vtx-h-meta { display:flex; gap:8px; margin-top:7px; flex-wrap:wrap; }
.vtx-h-meta .chip { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; color:var(--inkDim); background:var(--side); border:1px solid var(--line); padding:4px 10px; border-radius:999px; }
.vtx-h-meta .chip i { font-size:13px; color:var(--brand); }
.vtx-status { margin-left:auto; flex-shrink:0; display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; padding:6px 13px; border-radius:999px; }
.vtx-status.open { background:rgba(16,185,129,.14); color:#10b981; }
.vtx-status.closed { background:rgba(148,163,184,.14); color:#94a3b8; }
.vtx-status .dot { width:7px; height:7px; border-radius:50%; background:currentColor; }

/* body / messages */
.vtx-body { flex:1; overflow-y:auto; padding:22px 20px; display:flex; flex-direction:column; gap:16px; background:var(--side); }
.vtx-body::-webkit-scrollbar { width:8px; } .vtx-body::-webkit-scrollbar-thumb { background:var(--line2); border-radius:8px; }
.vt-row { display:flex; gap:10px; max-width:78%; }
.vt-row.left { align-self:flex-start; }
.vt-row.right { align-self:flex-end; flex-direction:row-reverse; }
.vt-av { width:34px; height:34px; flex-shrink:0; border-radius:50%; display:grid; place-items:center; font-size:16px; font-weight:800; font-family:'Inter',sans-serif; }
.vt-av.sup { background:linear-gradient(135deg,#2A62FF,#1746c0); color:#fff; }
.vt-av.usr { background:linear-gradient(135deg,#ffc107,#ff9800); color:#0c151b; }
.vt-msg { min-width:0; }
.vt-bubble { padding:12px 15px; border-radius:16px; font-size:14px; line-height:1.6; white-space:pre-wrap; word-break:break-word; }
.vt-row.left .vt-bubble { background:var(--side2); border:1px solid var(--line); color:var(--ink); border-top-left-radius:5px; }
.vt-row.right .vt-bubble { background:linear-gradient(135deg,#ffc107,#ffce3a); color:#0c151b; border-top-right-radius:5px; }
.vt-time { font-size:11px; color:var(--inkDim); margin-top:5px; }
.vt-row.right .vt-time { text-align:right; }
.vt-files { display:flex; flex-wrap:wrap; gap:7px; margin-top:8px; }
.vt-file { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--ink2); background:var(--side2); border:1px solid var(--line); border-radius:9px; padding:6px 11px; text-decoration:none; transition:.14s; max-width:200px; }
.vt-file:hover { border-color:var(--brand); color:var(--ink); }
.vt-file i { color:var(--brand); flex-shrink:0; }
.vt-file span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vt-row.right .vt-files { justify-content:flex-end; }
.vt-empty { margin:auto; text-align:center; color:var(--inkDim); font-size:13.5px; }
.vt-empty i { display:block; font-size:34px; color:var(--line2); margin-bottom:10px; }

/* input bar */
.vtx-input { flex-shrink:0; border-top:1px solid var(--line); background:var(--side2); padding:12px 16px; display:flex; align-items:flex-end; gap:10px; }
.vtx-input .alert { width:100%; }
.vtx-input textarea { flex:1; resize:none; background:var(--side); border:1px solid var(--line); border-radius:13px; color:var(--ink); font-family:inherit; font-size:14px; line-height:1.5; padding:11px 14px; outline:none; max-height:140px; min-height:44px; transition:.14s; }
.vtx-input textarea:focus { border-color:var(--brand); box-shadow:0 0 0 3px rgba(255,193,7,.13); }
.vtx-input textarea::placeholder { color:var(--inkDim); }
.vtx-send { flex-shrink:0; width:44px; height:44px; border-radius:13px; border:0; background:var(--brand); color:var(--brandText); display:grid; place-items:center; font-size:19px; cursor:pointer; transition:.14s; }
.vtx-send:hover { filter:brightness(1.06); transform:translateY(-1px); }
/* attach (perfectuploader) → compact icon button in the input bar */
.vtx-input .tickets-uploader { background:transparent !important; border:0 !important; padding:0 !important; margin:0 !important; flex-shrink:0; display:flex; align-items:center; height:44px; }
.vtx-input .tickets-uploader #uploader-button, .vtx-input .tickets-uploader .files-wrapper, .vtx-input .tickets-uploader .paperclip, .vtx-input .tickets-uploader .paperclip * { color:var(--ink2) !important; font-size:0; }
.vtx-input .tickets-uploader .paperclip::before { content:"\eb96"; font-family:'remixicon'; font-size:20px; color:var(--ink2); }
.vtx-input .tickets-uploader:hover .paperclip::before { color:var(--brand); }
.vtx-input .tickets-uploader .error-message { font-size:0; }

.vtx-closed { flex-shrink:0; border-top:1px solid var(--line); background:var(--side2); padding:16px; text-align:center; color:var(--inkDim); font-size:13px; display:flex; align-items:center; justify-content:center; gap:8px; }
.vtx-closed i { color:var(--brand); }

@media (max-width:820px){
  .vtx { height:calc(100vh - 96px); border-radius:0; margin:0; }
  .vt-row { max-width:90%; }
  .vtx-head { padding:13px 15px; }
  .vtx-h-meta .chip:nth-child(n+3) { display:none; }
}
/* === END U77 === */

/* ============ U77b — fix /viewticket: was tucked UNDER the fixed 90px topbar (padding:0) + dark left bubble blended into the dark body. ============ */
.l2v2 .l2v2-page-viewticket { padding:100px 24px 20px !important; }
.vtx { height:calc(100vh - 126px) !important; }
.vt-row.left .vt-bubble { background:#1a2832 !important; border:1px solid var(--line2) !important; color:var(--ink) !important; }
/* === END U77b === */

/* ============ U77c — fix /viewticket overlapping the fixed sidebar: U77/U77b set padding-left:24 (content slid under the 280px sidebar → header/back hidden). Match the dashboard offset used by every other page: padding 110px top / 310px left. ============ */
.l2v2 .l2v2-page-viewticket { padding:110px 30px 24px 310px !important; }
.vtx { height:calc(100vh - 150px) !important; }
@media (max-width:980px){
  .l2v2 .l2v2-page-viewticket { padding:84px 14px 14px 14px !important; }
  .vtx { height:calc(100vh - 104px) !important; border-radius:14px; }
}
/* === END U77c === */

/* =====================================================================
   U79 — Modal chrome unify + tasteful motion (Solar)
   Reskins leftover Bootstrap modal chrome (header/title/close/primary btn)
   that still showed #007bff blue → Solar yellow, on every page that uses a
   Bootstrap modal (orders/addfunds/affiliates/account/api). CSS-only —
   NO markup changes, form hooks 100% safe. Append-only, reversible.
   Plus restrained, reduced-motion-safe micro-motion (card lift, button
   press, input focus, "running" status pulse).
   ===================================================================== */

/* ---------- Bootstrap modal chrome → Solar ---------- */
.modal .modal-header {
  border-bottom: 1px solid rgba(255,255,255,.09);
  padding: 18px 22px; align-items: center;
}
.modal .modal-title {
  font-weight: 800; font-size: 17px; letter-spacing: -.01em;
  color: var(--ink, #e9eef2);
}
.modal .modal-body { padding: 22px; color: var(--ink2, #c0ccd5); }
.modal .modal-footer { border-top: 1px solid rgba(255,255,255,.09); padding: 16px 22px; }

/* close button — visible on dark frosted glass (BS5 .btn-close = dark svg) */
.modal .btn-close {
  filter: invert(1) grayscale(1); opacity: .55;
  transition: opacity .15s ease, transform .15s ease;
}
.modal .btn-close:hover { opacity: 1; transform: rotate(90deg); }
.modal .close { color: var(--ink, #e9eef2); opacity: .6; text-shadow: none; transition: opacity .15s ease; }
.modal .close:hover { opacity: 1; }
html.light .modal .btn-close { filter: none; }

/* labels + form rhythm inside modals */
.modal .control-label, .modal .modal-body label {
  font-size: 13px; font-weight: 600; color: var(--ink, #e9eef2); margin-bottom: 6px; display: block; word-break: keep-all;
}
.modal .form-group { margin-bottom: 16px; }

/* THE FIX: primary action button → brand yellow (was Bootstrap blue) */
.l2v2 .modal .btn-primary,
.modal .btn-primary {
  background: var(--brand, #ffc107) !important;
  border-color: var(--brand, #ffc107) !important;
  color: #0c151b !important;
  font-weight: 800; border-radius: 12px; padding: 12px 18px;
  box-shadow: 0 8px 20px rgba(255,193,7,.22);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.l2v2 .modal .btn-primary:hover,
.modal .btn-primary:hover {
  filter: brightness(1.04);
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(255,193,7,.32);
  color: #0c151b !important;
}
.l2v2 .modal .btn-primary:active,
.modal .btn-primary:active { transform: translateY(0) scale(.985); }

/* secondary / cancel button inside modals */
.modal .btn-secondary, .modal .btn-default {
  background: transparent !important; color: var(--ink2, #c0ccd5) !important;
  border: 1px solid rgba(255,255,255,.16) !important; border-radius: 12px; font-weight: 700;
  transition: border-color .15s ease, color .15s ease;
}
.modal .btn-secondary:hover, .modal .btn-default:hover { border-color: var(--brand, #ffc107) !important; color: var(--ink, #e9eef2) !important; }

/* ---------- Motion (reduced-motion-safe, restrained) ---------- */
@media (prefers-reduced-motion: no-preference) {

  /* modal entrance: gentle rise + fade (covers BS4 .in and BS5 .show) */
  .modal.show .modal-content,
  .modal.in .modal-content { animation: solarModalIn .34s cubic-bezier(.22,1,.36,1) both; }
  @keyframes solarModalIn {
    from { transform: translateY(16px) scale(.975); }
    to   { transform: none; }
  }
  .modal-backdrop.show, .modal-backdrop.in { animation: solarBackdropIn .28s ease both; }
  @keyframes solarBackdropIn { from { opacity: 0; } to { opacity: 1; } }

  /* card hover lift — dashboard + page cards (subtle, hover only) */
  .l2v2 .pg-card, .l2v2 .nt-card, .l2v2 .modern-card, .l2v2 .aff-tier-card, .l2v2 .af-pay-card {
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  }
  .l2v2 .pg-card:hover, .l2v2 .nt-card:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,0,0,.28); }

  /* yellow buttons — press + lift feedback */
  .l2v2 .pg-btn, .l2v2 .acc-btn, .l2v2 .copy-btn {
    transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
  }
  .l2v2 .pg-btn:hover, .l2v2 .acc-btn:hover { transform: translateY(-1px); }
  .l2v2 .pg-btn:active, .l2v2 .acc-btn:active { transform: translateY(0) scale(.98); }

  /* inputs — smooth focus */
  .l2v2 .form-control, .l2v2 .pg-filter .srch input, .modal .form-control {
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
  }

  /* table rows + pill tabs + nav links — gentle state transitions */
  .l2v2 .pg-tbl tbody tr { transition: background .15s ease; }
  .l2v2 .pill-tabs a { transition: background .16s ease, color .16s ease; }

  /* status pill "running" — soft breathing dot (only the in-progress state) */
  .l2v2 .st.run::before {
    content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
    background: currentColor; margin-right: 6px; vertical-align: middle;
    animation: solarPulse 1.8s ease-in-out infinite;
  }
  @keyframes solarPulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
}
/* === END U79 === */

/* =====================================================================
   U80 — New Order MAX (likester-net 12): service-meta strip (duration
   relocated out of a numbered step), animated member card (sheen +
   shimmer badge + real spend→next-tier progress + floating coin),
   game-like check-in modal, points-exchange modal (slider + count-up),
   member-tiers modal. = bundle styles/new-order-max.css.jsx (nomaxStyle)
   + .l2v2 overrides. All animation under prefers-reduced-motion:no-preference.
   ===================================================================== */

/* ===================== shared juice ===================== */
@keyframes nomFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }
@keyframes nomSheen { 0%{transform:translateX(-130%) skewX(-18deg)} 60%,100%{transform:translateX(260%) skewX(-18deg)} }
@keyframes nomPop { 0%{transform:scale(0)} 70%{transform:scale(1.25)} 100%{transform:scale(1)} }
@keyframes nomFlame { 0%,100%{transform:scale(1) rotate(-3deg);opacity:1} 50%{transform:scale(1.14) rotate(4deg);opacity:.9} }
@keyframes nomCoinUp { 0%{transform:translateY(0) scale(.6);opacity:0} 15%{opacity:1} 100%{transform:translateY(-120px) scale(1.1);opacity:0} }
@keyframes nomConfetti { 0%{transform:translateY(0) rotate(0);opacity:1} 100%{transform:translateY(160px) rotate(540deg);opacity:0} }
@keyframes nomModalIn { from{transform:translateY(24px) scale(.94)} to{transform:none} }
@keyframes nomBackIn { from{opacity:0} to{opacity:1} }
@keyframes nomRing { 0%{box-shadow:0 0 0 0 rgba(255,193,7,.5)} 100%{box-shadow:0 0 0 14px rgba(255,193,7,0)} }
@keyframes nomShineSweep { 0%{background-position:-180% 0} 100%{background-position:180% 0} }
@keyframes nomFillIn { from{transform:scaleX(0)} to{transform:scaleX(1)} }

/* ===================== member card (animated) ===================== */
.nom-mcard { position:relative; overflow:hidden; cursor:pointer; }
.nom-mcard .nom-sheen { display:none; } /* sheen sweep removed per feedback — looked too deliberate */
.nom-mcard { transition:transform .16s ease, box-shadow .16s ease; }
.nom-mcard:hover { transform:translateY(-2px); box-shadow:0 8px 22px rgba(0,0,0,.16); }
.nom-gold-badge { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:800; letter-spacing:.04em;
  padding:4px 11px; border-radius:999px; color:#5a3e00; vertical-align:middle;
  background:linear-gradient(100deg,#ffe082,#ffc107,#ffe082,#ffc107); background-size:200% 100%; }
@media (prefers-reduced-motion: no-preference){ .nom-gold-badge { animation:nomShineSweep 2.6s linear infinite; } }
.nom-mlevel { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.nom-mini-prog { margin-top:12px; }
.nom-mini-prog .lbl { display:flex; justify-content:space-between; font-size:10.5px; color:var(--inkDim); margin-bottom:5px; font-weight:600; }
.nom-mini-prog .lbl b { color:var(--ink); }
.nom-mini-prog .bar { height:7px; border-radius:99px; background:var(--side2); overflow:hidden; border:1px solid var(--line); }
.nom-mini-prog .fill { height:100%; border-radius:99px; transform-origin:left; background:linear-gradient(90deg,#ffc107,#ff9800); }
@media (prefers-reduced-motion: no-preference){ .nom-mcard .nom-mini-prog .fill { animation:nomFillIn 1.15s cubic-bezier(.22,1,.36,1) both; } }
.nom-coinfloat { position:absolute; right:16px; bottom:14px; font-size:22px; color:#ffc107; opacity:.9; pointer-events:none; }
@media (prefers-reduced-motion: no-preference){ .nom-coinfloat { animation:nomFloat 3.2s ease-in-out infinite; } }

/* stat-card tap affordance */
.nom-tap { cursor:pointer; transition:transform .16s ease, box-shadow .16s ease; }
.nom-tap:hover { transform:translateY(-3px); box-shadow:0 16px 34px rgba(0,0,0,.28); }
.nom-tap:active { transform:translateY(-1px) scale(.99); }

/* ===================== service meta strip (duration relocated here) ===================== */
.nom-meta { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.nom-chip-meta { display:inline-flex; align-items:center; gap:7px; padding:8px 13px; border-radius:11px;
  background:var(--side2); border:1px solid var(--line); font-size:12.5px; font-weight:600; color:var(--ink2); }
.nom-chip-meta i { font-size:15px; }
.nom-chip-meta.time i { color:#2A62FF; } .nom-chip-meta.fast i { color:#ffc107; } .nom-chip-meta.warranty i { color:#28F1AA; }
.nom-chip-meta b { color:var(--ink); font-weight:800; }
.nom-svc-desc { margin-top:14px; }

/* ===================== game modal shell ===================== */
.nom-overlay { position:fixed; inset:0; z-index:2000; display:flex; align-items:center; justify-content:center; padding:18px;
  background:rgba(5,9,12,.62); backdrop-filter:blur(3px); animation:nomBackIn .26s ease both; }
.nom-modal { position:relative; width:100%; max-width:460px; background:var(--side); border:1px solid var(--line);
  border-radius:24px; overflow:hidden; box-shadow:0 30px 70px rgba(0,0,0,.5); animation:nomModalIn .34s cubic-bezier(.22,1,.36,1) both;
  max-height:92vh; display:flex; flex-direction:column; }
.nom-x { position:absolute; top:14px; right:14px; z-index:5; width:34px; height:34px; border:0; border-radius:10px; cursor:pointer;
  background:rgba(255,255,255,.08); color:#fff; font-size:18px; display:grid; place-items:center; transition:.15s; }
.nom-x:hover { background:rgba(255,255,255,.18); transform:rotate(90deg); }

/* ---- check-in modal ---- */
.nom-ci-head { padding:30px 26px 22px; text-align:center; position:relative; overflow:hidden;
  background:radial-gradient(120% 90% at 50% -10%, rgba(255,193,7,.22), transparent 60%), linear-gradient(180deg,#16242f,var(--side)); }
.nom-flame { font-size:30px; display:inline-block; }
@media (prefers-reduced-motion: no-preference){ .nom-flame { animation:nomFlame 1.1s ease-in-out infinite; } }
.nom-streak-num { font-family:'Inter',sans-serif; font-size:46px; font-weight:800; letter-spacing:-.03em; color:#ffc107; line-height:1; }
.nom-streak-cap { font-size:12.5px; color:var(--inkDim); margin-top:4px; font-weight:600; }
.nom-ci-title { font-size:18px; font-weight:800; color:var(--ink); margin-top:14px; }
.nom-ci-sub { font-size:12.5px; color:var(--inkDim); margin-top:3px; }
.nom-days { display:grid; grid-template-columns:repeat(7,1fr); gap:8px; padding:22px 22px 6px; }
.nom-day { text-align:center; }
.nom-day .coin { width:100%; aspect-ratio:1; border-radius:14px; display:grid; place-items:center; font-size:18px; position:relative;
  background:var(--side2); border:1.5px solid var(--line); color:var(--inkDim); transition:.2s; }
.nom-day .coin .chk { animation:nomPop .4s cubic-bezier(.22,1.4,.4,1) both; }
.nom-day.done .coin { background:linear-gradient(160deg,#ffd34d,#ffae00); border-color:#ffae00; color:#5a3e00; box-shadow:0 6px 16px rgba(255,170,0,.3); }
.nom-day.today .coin { border-color:var(--brand); color:var(--brand); background:rgba(255,193,7,.1); }
@media (prefers-reduced-motion: no-preference){ .nom-day.today .coin { animation:nomRing 1.6s ease-out infinite; } }
.nom-day.reward .coin { font-size:21px; }
.nom-day .d { font-size:10px; color:var(--inkDim); margin-top:6px; font-weight:600; }
.nom-day.done .d { color:var(--ink); }
.nom-ci-body { padding:8px 22px 24px; }
.nom-reward-row { display:flex; align-items:center; gap:12px; background:var(--side2); border:1px solid var(--line); border-radius:14px; padding:13px 16px; margin-bottom:16px; }
.nom-reward-row .ic { width:40px; height:40px; border-radius:11px; background:rgba(255,193,7,.16); color:#ffc107; display:grid; place-items:center; font-size:21px; flex-shrink:0; }
.nom-reward-row .t { flex:1; } .nom-reward-row .t b { display:block; font-size:13.5px; color:var(--ink); font-weight:700; } .nom-reward-row .t span { font-size:11.5px; color:var(--inkDim); }
.nom-reward-row .amt { font-family:'Inter',sans-serif; font-size:20px; font-weight:800; color:#ffc107; }
.nom-cta { width:100%; border:0; cursor:pointer; font-family:inherit; font-weight:800; font-size:15px; padding:15px; border-radius:14px;
  background:linear-gradient(95deg,#ffc107,#ff9800); color:#0c151b; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; gap:9px;
  box-shadow:0 12px 26px rgba(255,168,7,.34); transition:transform .14s ease, box-shadow .14s ease; }
.nom-cta::after { content:''; position:absolute; top:0; bottom:0; width:40%; left:0; background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent); }
@media (prefers-reduced-motion: no-preference){ .nom-cta:not(:disabled)::after { animation:nomSheen 2.4s ease-in-out infinite; } }
.nom-cta:hover:not(:disabled) { transform:translateY(-2px); box-shadow:0 16px 32px rgba(255,168,7,.44); }
.nom-cta:active:not(:disabled) { transform:translateY(0) scale(.98); }
.nom-cta:disabled { background:var(--side2); color:var(--inkDim); box-shadow:none; cursor:default; border:1px solid var(--line); }
.nom-cta:disabled::after { display:none; }

/* coin burst + confetti layer */
.nom-fx { position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:10; }
.nom-coin { position:absolute; left:50%; bottom:90px; font-size:22px; color:#ffc107; }
@media (prefers-reduced-motion: no-preference){ .nom-coin { animation:nomCoinUp 1s ease-out forwards; } }
.nom-conf { position:absolute; top:30%; width:9px; height:14px; border-radius:2px; }
@media (prefers-reduced-motion: no-preference){ .nom-conf { animation:nomConfetti 1.1s ease-out forwards; } }

/* ---- points modal ---- */
.nom-pts-head { padding:28px 26px 20px; text-align:center;
  background:radial-gradient(120% 90% at 50% -10%, rgba(161,42,255,.22), transparent 60%), linear-gradient(180deg,#1a1430,var(--side)); }
.nom-pts-coin { width:64px; height:64px; border-radius:20px; margin:0 auto 14px; display:grid; place-items:center; font-size:32px; color:#5a3e00;
  background:linear-gradient(160deg,#ffe082,#ffc107); box-shadow:0 12px 26px rgba(255,170,0,.34); }
@media (prefers-reduced-motion: no-preference){ .nom-pts-coin { animation:nomFloat 3s ease-in-out infinite; } }
.nom-pts-bal { font-family:'Inter',sans-serif; font-size:40px; font-weight:800; color:var(--ink); letter-spacing:-.02em; line-height:1; }
.nom-pts-bal small { font-size:16px; color:var(--inkDim); font-weight:600; }
.nom-pts-cash { font-size:13px; color:#28F1AA; margin-top:6px; font-weight:700; }
.nom-pts-body { padding:20px 22px 24px; overflow:auto; }
.nom-rate-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:18px; }
.nom-rate { border:1.5px solid var(--line); border-radius:14px; padding:13px 14px; background:var(--side2); transition:.16s; }
.nom-rate.on { border-color:#A12AFF; background:rgba(161,42,255,.08); }
.nom-rate .lv { font-size:12px; font-weight:800; letter-spacing:.04em; color:var(--ink); }
.nom-rate .rt { font-family:'Inter',sans-serif; font-size:17px; font-weight:800; color:var(--ink); margin-top:4px; }
.nom-rate .rt small { font-size:11px; color:var(--inkDim); font-weight:600; }
.nom-ex { background:var(--side2); border:1px solid var(--line); border-radius:16px; padding:16px; margin-bottom:14px; }
.nom-ex label { font-size:12px; font-weight:700; color:var(--ink2); display:block; margin-bottom:9px; }
.nom-ex .slider { width:100%; accent-color:#A12AFF; }
.nom-ex .out { display:flex; align-items:center; justify-content:space-between; margin-top:12px; }
.nom-ex .out .from { font-size:13px; color:var(--inkDim); } .nom-ex .out .from b{color:var(--ink);font-family:'Inter';}
.nom-ex .out .arrow { color:var(--inkDim); }
.nom-ex .out .to { font-family:'Inter',sans-serif; font-size:24px; font-weight:800; color:#28F1AA; }
.nom-pts-note { font-size:11.5px; color:var(--inkDim); line-height:1.55; display:flex; gap:8px; }
.nom-pts-note i { color:#ffc107; margin-top:1px; }

/* ---- member modal (tiers) ---- */
.nom-mm-head { padding:24px 26px; background:linear-gradient(95deg,#ffc107,#ffce3a); color:#5a3e00; }
.nom-mm-head h3 { margin:0; font-size:18px; font-weight:800; display:flex; align-items:center; gap:9px; line-height:1.25; }
.nom-mm-head p { margin:6px 0 0; font-size:12.5px; opacity:.82; font-weight:600; line-height:1.4; }
.nom-mm-body { padding:20px 22px 24px; overflow:auto; }
.nom-tiers { display:flex; flex-direction:column; gap:10px; }
.nom-tierrow { display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:14px; border:1.5px solid var(--line); background:var(--side2); }
.nom-tierrow.cur { border-color:var(--brand); background:rgba(255,193,7,.08); box-shadow:0 8px 20px rgba(255,193,7,.14); }
.nom-tierrow .tr-ic { width:42px; height:42px; border-radius:12px; display:grid; place-items:center; font-size:21px; flex-shrink:0; }
.nom-tierrow .tr-meta { flex:1; min-width:0; }
.nom-tierrow .tr-meta b { font-size:14px; font-weight:800; color:var(--ink); }
.nom-tierrow .tr-meta .cur-tag { font-size:9.5px; font-weight:800; color:#5a3e00; background:#ffc107; padding:2px 7px; border-radius:99px; margin-left:7px; }
.nom-tierrow .tr-meta span { display:block; font-size:11.5px; color:var(--inkDim); margin-top:2px; }
.nom-tierrow .tr-rate { text-align:right; font-family:'Inter',sans-serif; }
.nom-tierrow .tr-rate b { font-size:15px; font-weight:800; color:var(--ink); }
.nom-tierrow .tr-rate span { display:block; font-size:10.5px; color:var(--inkDim); }

/* ===================== mobile ===================== */
@media (max-width:760px){
  .nom-modal { max-width:100%; border-radius:20px; }
  .nom-rate-grid { grid-template-columns:1fr 1fr; }
  .nom-days { gap:6px; padding:18px 16px 4px; }
  .nom-day .coin { font-size:15px; border-radius:11px; }
  .nom-streak-num { font-size:38px; }
}

/* ===================== .l2v2 overrides (member stat card needs overflow + relative for sheen/coin) ===================== */
.l2v2 .card.cnb-3.nom-mcard { position:relative; overflow:hidden; }
.l2v2 .card.cnb-3.nom-mcard .nom-mini-prog { position:relative; z-index:2; }
.l2v2 .card.cnb-3.nom-mcard .nom-coinfloat { z-index:1; }
/* === END U80 === */

/* =====================================================================
   U81 — New Order MAX phase 3-4 polish: make the Bootstrap check-in modal
   render the Solar nom-ci-head/nom-days/nom-cta cleanly, the JS-filled
   reward box, and spacing for the points-exchange slider. Builds on U80.
   ===================================================================== */
/* check-in modal: let the Solar header/body/grid fill the Bootstrap shell */
.ci-modal { background:var(--side) !important; border:1px solid var(--line); border-radius:22px; overflow:hidden; }
.ci-modal .ci-modal-header.nom-ci-head { border:0; margin:0; background:radial-gradient(120% 90% at 50% -10%, rgba(255,193,7,.20), transparent 60%), linear-gradient(180deg,#16242f,var(--side)) !important; }
.ci-modal .ci-modal-body.nom-ci-body { background:var(--side); }
/* reward box (JS fills its inner text) */
.nom-reward-box { background:var(--side2); border:1px solid var(--line); border-radius:14px; padding:15px 16px; text-align:center; margin-bottom:16px; min-height:54px; display:flex; flex-direction:column; justify-content:center; }
/* close button sits over the gradient header */
.ci-modal .nom-x.ci-close-btn { opacity:1; }
/* points-exchange slider block spacing inside the existing request modal */
#nomPtsEx { margin:4px 0 14px; }
#nomPtsEx .slider { accent-color:#A12AFF; }
/* === END U81 === */

/* =====================================================================
   U82 — "ระยะเวลาเฉลี่ย" (#order_average_time) is an engine READ-ONLY info
   field (avg completion time), not a customer step. The engine's
   `.fields .control-label::before{content:counter(field-step)}` was giving
   it a step number (e.g. "6"). Stop it consuming/showing a step number and
   restyle it as a subtle info row. Scoped by id so link/quantity steps keep
   their numbers.
   ===================================================================== */
#order_average_time { counter-increment: none !important; background: var(--side2); border: 1px solid var(--line); border-radius: 12px; padding: 11px 15px; margin-top: 8px; }
#order_average_time .control-label::before { content: none !important; }
#order_average_time .control-label { padding-left: 0 !important; font-size: 12.5px; font-weight: 700; color: var(--inkDim); margin-bottom: 5px; display: flex; align-items: center; gap: 6px; }
#order_average_time .control-label .fa-exclamation-circle { color: var(--brand); opacity: .8; }
#order_average_time input, #order_average_time .form-control { background: transparent !important; border: 0 !important; padding: 0 !important; height: auto !important; font-size: 15px; font-weight: 800; color: var(--ink) !important; }
/* === END U82 === */

/* =====================================================================
   U83 — three polish fixes (2026-06-05)
   (1) neworder stat cards were ~260px tall: the member card's nom-mini-prog
       drove the equal-height row, leaving dead space in the other 3 → COMPACT.
   (2) addfunds DESKTOP: the right "Top-up Bonus" card was short (584px) while
       the left form is tall (973px) = ~389px dead space below it → make the
       bonus a sticky sidebar + add a VIP-cashback footer to fill the column,
       and compact the payment-channel cards.
   (3) addfunds top-up button: a real running-light shine sweep (the user
       remembered a prior design; make it real). reduced-motion-safe.
   ===================================================================== */

/* ---- (1) neworder stat cards — COMPACT ---- */
.l2v2 .l2v2-content .card.card-border.card-no-box .cb-content { padding: 14px 18px 14px; }
.l2v2 .l2v2-content .card.card-border.card-no-box .cnb-circle { width: 46px; height: 46px; font-size: 19px; border-width: 2px; }
.l2v2 .l2v2-content .cnb-content > .row { column-gap: 12px; }
.l2v2 .l2v2-content .cb-content h2,
.l2v2 .l2v2-content .card.card-border.card-no-box h2 { font-size: 12px; }
.l2v2 .l2v2-content .cb-content h3 { font-size: 20px; margin-top: 2px; line-height: 1.05; }
.l2v2 .l2v2-content .card.card-border.card-no-box h3 { font-size: 20px; }
.l2v2 .l2v2-content .nbox-value { font-size: 19px; }
/* tighten the member-card mini progress so cnb-3 stops driving the row tall */
.l2v2 .l2v2-content .nom-mini-prog { margin-top: 8px; }
.l2v2 .l2v2-content .nom-mini-prog .lbl { font-size: 10px; margin-bottom: 3px; }
.l2v2 .l2v2-content .nom-mini-prog .bar { height: 5px; }
/* level pill sits inline with the level word (no wrap → no extra line) */
.l2v2 .l2v2-content .cnb-3 .nom-mlevel { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 19px; }
.l2v2 .l2v2-content .nom-gold-badge { font-size: 9.5px; padding: 2px 7px; }

/* ---- (2) addfunds DESKTOP layout — balance the 7/5 columns ---- */
@media (min-width: 992px) {
  /* right bonus card = sticky sidebar that tracks the (tall) form on scroll */
  .l2v2 .l2v2-page-addfunds .row > .col-lg-5 > .card { position: sticky; top: 92px; }
  /* let the 6 tiers breathe a little to fill the taller column */
  .l2v2 .l2v2-page-addfunds .bonus-progress-container { gap: 11px; }
  .l2v2 .l2v2-page-addfunds .af2-tier { padding: 15px 16px; }
  /* compact the payment-channel cards (were 166px tall, too sparse on desktop) */
  .l2v2 .l2v2-page-addfunds .af-pay-card { padding: 14px 12px !important; gap: 8px; }
  .l2v2 .l2v2-page-addfunds .af-pay-icon { width: 42px; height: 42px; font-size: 19px; border-radius: 11px; }
  .l2v2 .l2v2-page-addfunds .af-pay-name { font-size: 12.5px; }
}
/* VIP cashback footer inside the bonus card — fills the column, ties the theme */
.l2v2 .l2v2-page-addfunds .af2-bonus-foot {
  display: flex; align-items: center; gap: 13px; margin-top: 16px;
  padding: 15px 16px; border-radius: 14px;
  border: 1px solid rgba(255, 193, 7, .28);
  background: linear-gradient(120deg, rgba(255, 193, 7, .10), var(--side2));
}
.l2v2 .l2v2-page-addfunds .af2-bf-ic {
  width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 21px; color: var(--brandText);
  background: linear-gradient(135deg, #ffc107, #ff9800);
  box-shadow: 0 6px 16px rgba(255, 159, 10, .30);
}
.l2v2 .l2v2-page-addfunds .af2-bf-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.l2v2 .l2v2-page-addfunds .af2-bf-tx b { font-size: 12.5px; font-weight: 800; color: var(--ink); }
.l2v2 .l2v2-page-addfunds .af2-bf-tx span { font-size: 10.5px; color: var(--inkDim); line-height: 1.45; }

/* ---- (3) addfunds top-up button — running-light shine sweep ---- */
.l2v2 .l2v2-page-addfunds .btn.btn-100 { position: relative; overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .l2v2 .l2v2-page-addfunds .btn.btn-100:not(:disabled)::after {
    content: ''; position: absolute; top: 0; left: -60%;
    width: 55%; height: 100%; pointer-events: none; z-index: 2;
    background: linear-gradient(100deg,
      transparent 0%, rgba(255, 255, 255, 0) 25%,
      rgba(255, 255, 255, .55) 50%,
      rgba(255, 255, 255, 0) 75%, transparent 100%);
    transform: skewX(-20deg);
    animation: afBtnSweep 2.6s ease-in-out infinite;
  }
}
@keyframes afBtnSweep {
  0% { left: -60%; }
  55% { left: 135%; }
  100% { left: 135%; }
}
/* === END U83 === */

/* =====================================================================
   U84 — sidebar profile cleanup (2026-06-05)
   The legacy "2025 theme" rules (.sbUsr/.avtWr/.sbName) still apply
   alongside the newer Solar rules (.sb-user/.av/.nm) because the markup
   carries BOTH class names on each element. Result: (a) a DUPLICATE
   verified tick — legacy blue `.sbName::after` (\eb80, #0258FF) on top of
   the Solar brand-yellow `.nm i` (the real markup <i>); and (b) the green
   online dot (`.av::after`) was being CLIPPED by `.avtWr{overflow:hidden}`
   (looked like a z-index bug). Fix: keep ONE tick (the Solar yellow one)
   and un-clip the online dot.
   ===================================================================== */
/* (a) drop the legacy blue verified tick → only the brand-yellow .nm i remains */
.l2v2 .l2v2-side .sb-user .sbName::after { content: none !important; display: none !important; }
/* (b) stop .avtWr clipping the online dot + remove its 4px top pad so the letter recenters */
.l2v2 .l2v2-side .sb-user .av.avtWr { overflow: visible !important; padding-top: 0 !important; }
/* keep the green online dot above the card surface */
.l2v2 .l2v2-side .sb-user .av::after { z-index: 2; }
/* === END U84 === */

/* ==========================================================================
 * U85 — /services favorite star: move it from the floating absolute top-right
 * (looked detached / "แปลกๆ", hung off the row edge past the button) to the
 * LEFTMOST grid column, right before the #service-id (user request). Inactive
 * star = dim, favorited (.favorite-active / fas) + hover = brand yellow.
 * Builds on the U34 row grid (52px id | name | rate | min | max | button).
 * Preserves all PerfectPanel favorite hooks (data-favorite-service-id,
 * data-favorite-icon, .favorite-active). [APPEND-ONLY]
 * ========================================================================== */
@media (min-width:821px) {
  /* prepend a 26px star column → shift every cell +1 (.l2v2 prefix = higher
     specificity than the U34 6-col rule so this reliably wins) */
  .l2v2 .l2v2-page-services .service-item.pg-svc-card {
    grid-template-columns: 26px 52px minmax(0,1fr) 124px 104px 124px auto !important;
  }
  .l2v2 .l2v2-page-services .pg-svc-card .pg-svc-fav {
    position: static !important; top:auto !important; right:auto !important;
    grid-column:1 !important; grid-row:1 / 3 !important;
    align-self:center !important; justify-self:center !important;
    display:flex; align-items:center; font-size:18px; line-height:1;
  }
  .l2v2 .l2v2-page-services .pg-svc-card .pg-svc-id   { grid-column:2 !important; }
  .l2v2 .l2v2-page-services .pg-svc-card .pg-svc-name { grid-column:3 !important; }
  .l2v2 .l2v2-page-services .pg-svc-card .pg-svc-avt  { grid-column:3 !important; }
  .l2v2 .l2v2-page-services .pg-svc-card .pg-svc-meta > div:nth-child(1) { grid-column:4 !important; }
  .l2v2 .l2v2-page-services .pg-svc-card .pg-svc-meta > div:nth-child(2) { grid-column:5 !important; }
  .l2v2 .l2v2-page-services .pg-svc-card .pg-svc-meta > div:nth-child(3) { grid-column:6 !important; }
  .l2v2 .l2v2-page-services .pg-svc-card .pg-svc-btn  { grid-column:7 !important; }
}
@media (max-width:820px) {
  /* mobile: keep U67's stacked layout; pin the star to the card's top-left
     (before #id) and pad the card so the content clears it. Avoids fighting
     the auto-row grid (which floated the star to the middle). */
  .l2v2 .l2v2-page-services .service-item.pg-svc-card { padding-left:42px !important; position:relative; }
  .l2v2 .l2v2-page-services .pg-svc-card .pg-svc-fav {
    position:absolute !important; top:14px !important; left:13px !important; right:auto !important;
    grid-column:auto !important; grid-row:auto !important;
    display:flex; align-items:center; font-size:18px; z-index:2;
  }
}
/* star colors: inactive dim, favorited + hover = brand yellow */
.l2v2 .l2v2-page-services .pg-svc-fav [data-favorite-icon] { color: var(--inkDim); transition: color .15s, transform .15s; }
.l2v2 .l2v2-page-services .pg-svc-fav:hover [data-favorite-icon] { color: var(--brand); transform: scale(1.12); }
.l2v2 .l2v2-page-services .pg-svc-fav .favorite-active [data-favorite-icon],
.l2v2 .l2v2-page-services .pg-svc-fav [data-favorite-icon].fas,
.l2v2 .l2v2-page-services .favorite-active { color: var(--brand) !important; }
/* === END U85 === */

/* ==========================================================================
 * U86 — New Order "⭐ งานโปรด" (My Favorites) tab. neworder has NO favorite
 * data in Twig (serviceCategoryList absent, extended_categories carries no
 * .services — verified by probe), so the tab's JS fetches /services in the
 * same session, filters the user's starred services (.favorite-active / fas),
 * and renders them; each row → /?select_service_id=<id> (same preselect hook
 * /services "Buy now" uses). Solar-styled, scoped to the dashboard page.
 * ========================================================================== */
.l2v2 .l2v2-page-dashboard .nom-fav-tabbtn i { color: var(--brand); margin-right: 3px; }
.l2v2 .l2v2-page-dashboard .nom-fav-wrap { padding: 2px; }
.l2v2 .l2v2-page-dashboard .nom-fav-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:16px; flex-wrap:wrap; }
.l2v2 .l2v2-page-dashboard .nom-fav-title { margin:0; font-size:17px; font-weight:800; color:var(--ink); display:flex; align-items:center; gap:8px; }
.l2v2 .l2v2-page-dashboard .nom-fav-title i { color:var(--brand); }
.l2v2 .l2v2-page-dashboard .nom-fav-sub { margin:4px 0 0; font-size:12.5px; color:var(--inkDim); line-height:1.5; }
.l2v2 .l2v2-page-dashboard .nom-fav-manage { flex-shrink:0; display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; color:var(--ink2); border:1px solid var(--line); border-radius:10px; padding:8px 14px; text-decoration:none; transition:.15s; }
.l2v2 .l2v2-page-dashboard .nom-fav-manage:hover { border-color:var(--brand); color:var(--ink); }
.l2v2 .l2v2-page-dashboard .nom-fav-grid { display:flex; flex-direction:column; gap:10px; }
.l2v2 .l2v2-page-dashboard .nom-fav-row { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:14px; padding:14px 16px; background:var(--side2); border:1px solid var(--line); border-radius:14px; cursor:pointer; transition:transform .16s, border-color .16s, box-shadow .16s; }
.l2v2 .l2v2-page-dashboard .nom-fav-row:hover { border-color:var(--brand); transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,.18); }
.l2v2 .l2v2-page-dashboard .nom-fav-star { color:var(--brand); font-size:18px; display:flex; align-items:center; }
.l2v2 .l2v2-page-dashboard .nom-fav-main { min-width:0; }
.l2v2 .l2v2-page-dashboard .nom-fav-id { font-family:var(--font-en); font-size:11px; font-weight:700; color:var(--inkDim); letter-spacing:.04em; }
.l2v2 .l2v2-page-dashboard .nom-fav-name { font-size:14.5px; font-weight:700; color:var(--ink); margin:1px 0 4px; line-height:1.4; }
.l2v2 .l2v2-page-dashboard .nom-fav-meta { display:flex; flex-wrap:wrap; gap:5px 16px; }
.l2v2 .l2v2-page-dashboard .nom-fav-meta span { font-size:11.5px; color:var(--inkDim); }
.l2v2 .l2v2-page-dashboard .nom-fav-meta b { font-family:var(--font-en); color:var(--ink); font-weight:800; }
.l2v2 .l2v2-page-dashboard .nom-fav-order { flex-shrink:0; border:0; border-radius:10px; padding:10px 20px; font-weight:800; font-size:13px; cursor:pointer; background:linear-gradient(95deg,#ffc107,#ffd24a); color:#0c151b; white-space:nowrap; }
.l2v2 .l2v2-page-dashboard .nom-fav-order:hover { filter:brightness(1.04); }
.l2v2 .l2v2-page-dashboard .nom-fav-empty { text-align:center; padding:48px 20px; color:var(--inkDim); }
.l2v2 .l2v2-page-dashboard .nom-fav-empty i { font-size:42px; opacity:.55; display:block; margin-bottom:12px; color:var(--brand); }
.l2v2 .l2v2-page-dashboard .nom-fav-empty p { margin:0 0 4px; font-size:15px; font-weight:700; color:var(--ink2); }
.l2v2 .l2v2-page-dashboard .nom-fav-empty span { font-size:12.5px; display:block; margin-bottom:18px; }
.l2v2 .l2v2-page-dashboard .nom-fav-go { display:inline-flex; align-items:center; gap:6px; background:var(--brand); color:var(--brandText); font-weight:800; font-size:13px; padding:10px 22px; border-radius:11px; text-decoration:none; }
.l2v2 .l2v2-page-dashboard .nom-fav-loading { text-align:center; padding:44px 20px; color:var(--inkDim); font-size:14px; }
.l2v2 .l2v2-page-dashboard .nom-fav-loading i { margin-right:6px; color:var(--brand); display:inline-block; }
@media (prefers-reduced-motion: no-preference){ .l2v2 .l2v2-page-dashboard .nom-fav-loading i { animation:nomFavSpin 1s linear infinite; } }
@keyframes nomFavSpin { to { transform:rotate(360deg); } }
@media (max-width:560px){
  .l2v2 .l2v2-page-dashboard .nom-fav-row { grid-template-columns:auto 1fr; }
  .l2v2 .l2v2-page-dashboard .nom-fav-order { grid-column:2; justify-self:start; margin-top:4px; }
}
/* === END U86 === */

/* ==========================================================================
 * U87 — New Order motion rethink (2026-06-06)
 * Keep the page visually quiet: no patterned backdrop, no page-wide bouncing.
 * Motion is limited to controls that communicate state or action.
 * ========================================================================== */
.l2v2 .l2v2-page-dashboard {
  --nwo-motion-ease: cubic-bezier(.22, 1, .36, 1);
}

.l2v2 .l2v2-page-dashboard > section:first-of-type::before {
  content: none !important;
}

.l2v2 .l2v2-page-dashboard .nwo-categories,
.l2v2 .l2v2-page-dashboard .nwo-categories .swiper-wrapper,
.l2v2 .l2v2-page-dashboard .nwo-categories .swiper-slide {
  z-index: auto !important;
}

body:has(#checkinModal.show) .nwo-categories {
  z-index: 1 !important;
}

#checkinModal.modal,
#checkinModal.modal.show,
#checkinModal.modal.in {
  z-index: 100050 !important;
}

#checkinModal .modal-dialog {
  position: relative;
  z-index: 100052 !important;
}

body:has(#checkinModal.show) .modal-backdrop,
body:has(#checkinModal.in) .modal-backdrop {
  z-index: 100040 !important;
}

.l2v2 .l2v2-page-dashboard .nwo-cat-btn,
.l2v2 .l2v2-page-dashboard .nwoNavLink,
.l2v2 .l2v2-page-dashboard #v15s-submit,
.l2v2 .l2v2-page-dashboard .nom-gold-badge,
.l2v2 .l2v2-page-dashboard .nom-mini-prog .fill,
.l2v2 .l2v2-page-dashboard .nom-coinfloat {
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease, border-color .16s ease;
}

.l2v2 .l2v2-page-dashboard .nwo-cat-btn:hover,
.l2v2 .l2v2-page-dashboard .nwoNavLink:hover {
  transform: translateY(-1px);
}

.l2v2 .l2v2-page-dashboard .nwo-cat-btn.active,
.l2v2 .l2v2-page-dashboard .nwoNavLink.active {
  box-shadow: 0 6px 16px rgba(255, 193, 7, .14) !important;
}

.l2v2 .l2v2-page-dashboard .nom-mcard {
  overflow: hidden !important;
}

.l2v2 .l2v2-page-dashboard .nom-mcard .nom-sheen {
  display: none !important;
}

.l2v2 .l2v2-page-dashboard .nom-gold-badge {
  box-shadow: 0 0 0 1px rgba(255, 193, 7, .18);
}

.l2v2 .l2v2-page-dashboard .nom-mini-prog .fill {
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(255, 193, 7, .20);
}

.l2v2 .l2v2-page-dashboard .nom-mini-prog .fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent);
  transform: translateX(-120%);
}

.l2v2 .l2v2-page-dashboard #v15s-submit {
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
}

.l2v2 .l2v2-page-dashboard #v15s-submit::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -56%;
  width: 42%;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
  transform: skewX(-18deg);
}

.l2v2 .l2v2-page-dashboard #v15s-submit:hover {
  filter: brightness(1.035);
  transform: translateY(-1px);
}

.l2v2 .l2v2-page-dashboard #v15s-submit:active {
  transform: translateY(0) scale(.99);
}

.l2v2 .l2v2-page-dashboard .v15-total .vv,
.l2v2 .l2v2-page-dashboard #v15s-total {
  transform-origin: right center;
  transition: color .16s ease, transform .16s ease;
}

.l2v2 .l2v2-page-dashboard .v15-sum:has(#v15s-submit:hover) #v15s-total,
.l2v2 .l2v2-page-dashboard .v15-sum:has(#v15s-submit:focus-visible) #v15s-total {
  color: var(--brand);
  transform: scale(1.018);
}

@keyframes nwoQuietSubmitSweep {
  0% { left: -56%; }
  46%, 100% { left: 122%; }
}

@keyframes nwoQuietProgressGleam {
  0%, 58% { transform: translateX(-120%); }
  100% { transform: translateX(145%); }
}

@keyframes nwoQuietBadgeBreath {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.06); }
}

@keyframes nwoQuietCoinFloat {
  0%, 100% { transform: translateY(0); opacity: .82; }
  50% { transform: translateY(-5px); opacity: 1; }
}

@media (prefers-reduced-motion: no-preference) {
  .l2v2 .l2v2-page-dashboard #v15s-submit:not(:disabled)::after {
    animation: nwoQuietSubmitSweep 3.4s ease-in-out infinite;
  }

  .l2v2 .l2v2-page-dashboard .nom-mini-prog .fill::after {
    animation: nwoQuietProgressGleam 4.2s ease-in-out infinite;
  }

  .l2v2 .l2v2-page-dashboard .nom-gold-badge {
    animation: nwoQuietBadgeBreath 3.2s ease-in-out infinite;
  }

  .l2v2 .l2v2-page-dashboard .nom-coinfloat {
    animation: nwoQuietCoinFloat 3.8s ease-in-out infinite;
  }
}

@media (prefers-reduced-motion: reduce) {
  .l2v2 .l2v2-page-dashboard *,
  .l2v2 .l2v2-page-dashboard *::before,
  .l2v2 .l2v2-page-dashboard *::after {
    animation: none !important;
    scroll-behavior: auto !important;
  }
}
/* === END U87 === */

/* ==========================================================================
 * U88 — .px marketing pages: dark-theme adaptation when logged-in (2026-06-07)
 * Pages /terms + /how-it-works use the .px namespace (cream #fffaef + white
 * cards + dark ink text) — designed for the YELLOW guest site. Logged-in they
 * render inside the dark .l2v2 dashboard shell → clash. This layer restyles the
 * .px surfaces to the Solar dark palette, ONLY under .l2v2 (guest untouched).
 * Solar dark refs: body #0c141b / card #121d27 / line rgba(255,255,255,.09).
 * ========================================================================== */
.l2v2 .px { background:transparent !important; color:#e7edf2; }
.l2v2 .px > section { background:transparent !important; }
.l2v2 .px-sec.cream, .l2v2 .px-sec.white { background:transparent !important; }

/* hero (yellow gradient → dark) */
.l2v2 .px-hero { background:linear-gradient(180deg,#13212c,#0c141b) !important; }
.l2v2 .px-hero::before, .l2v2 .px-hero::after { opacity:.5; }
.l2v2 .px-hero h1 { color:#f2f6fa; }
.l2v2 .px-hero h1 em { background:#ffc107; color:#0c151b; }
.l2v2 .px-hero .sub { color:#ffd24d; }
.l2v2 .px-badge { background:rgba(255,193,7,.14); color:#ffc107; box-shadow:inset 0 0 0 1px rgba(255,193,7,.32); }

/* section headers */
.l2v2 .px-eye { color:#ffd24d; }
.l2v2 .px-sh h2, .l2v2 .px-wtext h3, .l2v2 .px-final h2 { color:#f2f6fa; }
.l2v2 .px-sh p { color:rgba(255,255,255,.6); }

/* cards (white → dark) — originals use !important so match it */
.l2v2 .px .card, .l2v2 .px .card-header,
.l2v2 .px-step, .l2v2 .px-stat, .l2v2 .px-fc, .l2v2 .px-pc, .l2v2 .px-plat, .l2v2 .px-fq {
  background:#121d27 !important;
  border:1px solid rgba(255,255,255,.09) !important;
  box-shadow:0 14px 34px rgba(0,0,0,.32) !important;
}
.l2v2 .px-step h3, .l2v2 .px-fc h4, .l2v2 .px-fq h4, .l2v2 .px-stat .v, .l2v2 .px-plat span, .l2v2 .px-pc { color:#eef3f7; }
.l2v2 .px-step p, .l2v2 .px-fc p, .l2v2 .px-fq p, .l2v2 .px-stat .l { color:rgba(255,255,255,.6); }
.l2v2 .px-wtext li { color:rgba(255,255,255,.72); }
.l2v2 .px-pc i { color:#ffd24d; }

/* step number badge (#0c151b on white → would vanish on dark; flip to yellow) */
.l2v2 .px-step .n { background:#ffc107; color:#0c151b; }
.l2v2 .px-step .meta { background:rgba(255,193,7,.1); color:#ffd24d; border-color:rgba(255,193,7,.28); }

/* outline button */
.l2v2 .px-btn.out { color:#ffc107; border-color:rgba(255,193,7,.55); }
.l2v2 .px-btn.out:hover { background:rgba(255,193,7,.1); color:#ffc107; }

/* "what's visual" placeholder */
.l2v2 .px-wvis { background-color:#101a23 !important; border-color:rgba(255,255,255,.09) !important; }
.l2v2 .px-wvis .tag { background:#0c141b; color:rgba(255,255,255,.6); border-color:rgba(255,255,255,.12); }
.l2v2 .px-wtext .k { color:#ffd24d; }

/* final CTA band (yellow → dark) */
.l2v2 .px-final { background:linear-gradient(180deg,#13212c,#0c141b) !important; }
.l2v2 .px-final h2 em { background:#ffc107; color:#0c151b; }
.l2v2 .px-final p { color:rgba(255,255,255,.72); }
.l2v2 .px-legal-note { background:rgba(255,193,7,.06) !important; color:rgba(255,255,255,.7); border-color:rgba(255,193,7,.4); }

/* terms — tabbed legal content */
.l2v2 .px .tos-nav-btn { background:rgba(255,255,255,.04) !important; border-color:rgba(255,255,255,.1) !important; color:rgba(255,255,255,.74) !important; }
.l2v2 .px .tos-nav-btn.active { background:#ffc107 !important; border-color:#ffc107 !important; color:#0c151b !important; }
.l2v2 .px .tos-item { background:rgba(255,255,255,.03) !important; border:1px solid rgba(255,255,255,.07); }
.l2v2 .px .tos-tab, .l2v2 .px .d-card { color:#dfe6ec; }
.l2v2 .px .tos-section-label { color:#ffd24d !important; }
.l2v2 .px .tos-item-num { color:#ffc107 !important; }
.l2v2 .px .tos-item p, .l2v2 .px .tos-tab p, .l2v2 .px .tos-tab li { color:#cdd6dd !important; }
.l2v2 .px .tos-tab strong { color:#f2f6fa; }

/* ==========================================================================
 * U89 — about-us (.yp) + blog (.bx-*) dark adaptation when LOGGED-IN (2026-06-07)
 * Companion to U88 (.px). Scope .l2v2 ONLY → guest yellow design untouched.
 *  - about-us uses the big .yp "yellow page" system (body flag .yp-on, its own
 *    .yp-nav). Approach: flip the .yp design tokens (--ink/--mut) to light +
 *    dark the white cards + hide the duplicate guest nav (dashboard has its own).
 *  - blog: .lk-land page already darkened earlier; only .bx-hero (yellow grad)
 *    + .bx-search (white) leak — dark them.
 * ========================================================================== */

/* ---------- about-us / .yp + .yl pages (logged-in) ----------
 * .yp uses --ink for BOTH text color AND dark-accent backgrounds. Flip --ink to
 * light (fixes the many text uses) then force the ink-BACKGROUND accents back to
 * dark explicitly (else badges/marquee/statpanel invert to light). */
.l2v2.yp-on { background:#0c141b !important; }
.l2v2.yp-on .yp { background:transparent !important; --ink:#eef3f7; --mut:rgba(255,255,255,.62); }
/* duplicate guest nav — dashboard chrome already provides navigation */
.l2v2.yp-on .yp-nav { display:none !important; }

/* yellow/cream section bands → transparent (let dark body show) */
.l2v2.yp-on .yp-sec.yl-band, .l2v2.yp-on .yp-band-soft, .l2v2.yp-on .yp-sec.paper, .l2v2.yp-on .yl-band-soft { background:transparent !important; }

/* WHITE cards / paper surfaces → dark */
.l2v2.yp-on .yp .yp-fc, .l2v2.yp-on .yp .yp-card, .l2v2.yp-on .yp .yp-sc.paper,
.l2v2.yp-on .yp .yp-cmp, .l2v2.yp-on .yp .yp-nc, .l2v2.yp-on .yp .yp-pill,
.l2v2.yp-on .yp .yp-tag.paper, .l2v2.yp-on .yp .yp-kw.paper, .l2v2.yp-on .yp .yp-btn-paper,
.l2v2.yp-on .yp .yp-fx .chip.paper, .l2v2.yp-on .yp .card,
.l2v2.yp-on .yp .yl-svc .card, .l2v2.yp-on .yp .yl-step, .l2v2.yp-on .yp .yl-pc,
.l2v2.yp-on .yp .yl-tc, .l2v2.yp-on .yp .yl-rel a {
  background:#121d27 !important; color:#eef3f7 !important;
  border:1px solid rgba(255,255,255,.09) !important;
  box-shadow:0 14px 34px rgba(0,0,0,.32) !important;
}
/* INK-background accents — the --ink flip turned these light; force back to dark */
.l2v2.yp-on .yp .yp-btn-ink, .l2v2.yp-on .yp .yp-badge, .l2v2.yp-on .yp .yp-marq,
.l2v2.yp-on .yp .yp-seg, .l2v2.yp-on .yp .yp-sc.dark, .l2v2.yp-on .yp .yp-step .num,
.l2v2.yp-on .yp .yp-pt-item .ck, .l2v2.yp-on .yp .yp-cmp thead th.lk,
.l2v2.yp-on .yp .yp-fq .pm, .l2v2.yp-on .yp .yp-tag.ink, .l2v2.yp-on .yp .yp-kw.ink,
.l2v2.yp-on .yp .yp-fx .chip.ink, .l2v2.yp-on .yp .yl-badge, .l2v2.yp-on .yp .yl-statpanel {
  background:#0c151b !important;
}
.l2v2.yp-on .yp .yl-badge { color:#fff !important; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); }
.l2v2.yp-on .yp .yp-badge { box-shadow:inset 0 0 0 1px rgba(255,193,7,.3); }
/* feature-card icon tile keeps yellow (brand) */
.l2v2.yp-on .yp .yp-fc .ic { background:#ffc107 !important; color:#0c151b !important; }
/* hero highlight underline (was white) → brand yellow */
.l2v2.yp-on .yp .yp-hero h1 .hl::after, .l2v2.yp-on .yp .yl-hero h1 .hl::after { background:#ffc107 !important; opacity:.9; }
/* decorative white blobs → tone down */
.l2v2.yp-on .yp .yp-fx .blob { background:#ffc107 !important; opacity:.1 !important; }
.l2v2.yp-on .yp .yp-cmp * { border-color:rgba(255,255,255,.08) !important; }

/* ---------- blog (.bx-* hero + search) logged-in ---------- */
.l2v2 .bx-hero { background:linear-gradient(120deg,#13212c,#172733 55%,#0c141b) !important; color:#eef3f7 !important; }
.l2v2 .bx-hero h1, .l2v2 .bx-hero p { color:#eef3f7 !important; }
.l2v2 .bx-badge { background:rgba(255,193,7,.14) !important; color:#ffc107 !important; box-shadow:inset 0 0 0 1px rgba(255,193,7,.32); }
.l2v2 .bx-hero h1 em { background:#ffc107 !important; color:#0c151b !important; }
.l2v2 .bx-search { background:#121d27 !important; box-shadow:0 14px 28px rgba(0,0,0,.3) !important; border:1px solid rgba(255,255,255,.09); }
.l2v2 .bx-search input { background:transparent !important; color:#eef3f7 !important; }
.l2v2 .bx-search input::placeholder { color:rgba(255,255,255,.45) !important; }

/* ==========================================================================
 * U90 — GUEST .px pages: clear the floating global nav (2026-06-07)
 * Pages /terms + /how-it-works (.px namespace) show the global `body > .header`
 * which is position:absolute; z-index:1000 (desktop ~y30–130, mobile ~y0–100) and
 * transparent. The .px-hero padding-top (54px desktop / 34px mobile) was too small
 * → the hero badge ("TERMS OF SERVICE") + <h1> collided with the nav links.
 * (.yp / .yl pages don't hit this — they HIDE the global header and use their own
 *  sticky .yp-nav.) Fix: pad the hero below the absolute header. Scope body:not(.l2v2)
 * so logged-in (dashboard, no global header) keeps tight spacing.
 * ========================================================================== */
body:not(.l2v2) .px .px-hero { padding-top: 140px; }
@media (max-width: 820px){ body:not(.l2v2) .px .px-hero { padding-top: 112px; } }

/* ==========================================================================
 * U90b — GUEST .px pages: match the Solar YELLOW page bg (2026-06-07)
 * /terms + /how-it-works (.px) used cream #fffaef while every other guest page
 * (.yp/.yl = about-us/landings/home) uses the Solar yellow #FFC400 body. That made
 * .px "ไม่เหมือนธีม solar" AND created a cream→yellow SEAM at the global footer
 * (.lkf wrapper is yellow with an inset dark card .yp-footP → its yellow edges showed
 * against the cream page). Fix: paint the .px page + its default sections yellow on
 * guest → consistent with the rest of the site + the footer blends seamlessly.
 * White .px-sec.white panels stay white (intentional Solar contrast). Logged-in keeps
 * the U88 dark adaptation (scope body:not(.l2v2)).
 * ========================================================================== */
body:not(.l2v2) .px,
body:not(.l2v2) .px > section,
body:not(.l2v2) .px-sec.cream { background:#FFC400 !important; }

/* ==========================================================================
 * U91 — Systematic guest-layout fixes from the full template audit (2026-06-07)
 * Audited every page template × guest at desktop+mobile with one probe (nav-overlap
 * vs the absolute global .header / footer-bg seam / h-scroll). Pages that HIDE the
 * global header (.yp/.yl: home, about-us, landings, signup) or reserve space
 * (engine: faq/services/api) were clean. Pages that SHOW the header but didn't clear
 * it overlapped: .px (fixed U90), .blogx blog (list+posts), .lk-legal privacy.
 * ========================================================================== */

/* (A) NAV CLEARANCE — clear the floating global header (~130px desktop / ~100 mobile).
 *     !important needed: .lk-land.l2v2-page-blog has padding:34px… !important (L33365). */
body:not(.l2v2) .lk-land.l2v2-page-blog { padding-top:140px !important; }
body:not(.l2v2) .lk-legal { padding-top:140px !important; }
@media (max-width:820px){
  body:not(.l2v2) .lk-land.l2v2-page-blog { padding-top:108px !important; }
  body:not(.l2v2) .lk-legal { padding-top:104px !important; }
}

/* (B) FOOTER SEAM — blog page bg is gray (--bg #f5f6f8); match the global yellow
 *     footer wrapper (.lkf) to it on blog pages so the dark footer card sits flush. */
body:not(.l2v2) .lk-land.l2v2-page-blog ~ .lkf { background:#f5f6f8 !important; }

/* (C) FOOTER BRAND MARK — elevate the flat "L" tile to a premium gold gem badge */
.lkf .yp-ft-brand .brand .mark,
.yp .yp-ft-brand .brand .mark {
  width:42px; height:42px; border-radius:13px;
  background:linear-gradient(145deg,#ffe487,#ffc107 52%,#f59e0b);
  color:#1a1205; font-weight:900; font-size:22px; line-height:1;
  border:1px solid rgba(255,255,255,.28);
  box-shadow:0 8px 18px rgba(255,168,7,.42), inset 0 1.5px 0 rgba(255,255,255,.65), inset 0 -3px 6px rgba(176,116,0,.35);
  text-shadow:0 1px 0 rgba(255,255,255,.45);
  position:relative; overflow:hidden;
}
.lkf .yp-ft-brand .brand .mark::after,
.yp .yp-ft-brand .brand .mark::after {
  content:""; position:absolute; top:-60%; left:-30%; width:55%; height:220%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);
  transform:rotate(18deg); pointer-events:none;
}
@media (prefers-reduced-motion: no-preference){
  .lkf .yp-ft-brand .brand .mark::after,
  .yp .yp-ft-brand .brand .mark::after { animation:lkfMarkShine 4.8s ease-in-out infinite; }
}
@keyframes lkfMarkShine { 0%,74%{ left:-30%; } 90%,100%{ left:120%; } }

/* (D) LEGAL-NOTE SPACING — terms guest contact note sat flush against the footer */
body:not(.l2v2) .px-legal-note { margin-bottom:56px; }

/* ==========================================================================
 * U92 — Blog card thumbnails: force cover/center fit (2026-06-07)
 * The thumbnail divs render with an INLINE `background:<grad>;background-image:url(..)`
 * (blog.twig). The `background:` shorthand resets background-size→auto / position→0 0 /
 * repeat→repeat, clobbering the .bx-card/.bx-feat .img class's cover/center → images
 * showed at native size, top-left, tiled ("รูปไม่พอดี"). Author !important beats the
 * inline shorthand. Applies to image cards AND gradient placeholders (gradient covers fine).
 * ========================================================================== */
.blogx .img[style*="background"],
.blogx .bx-card .img,
.blogx .bx-feat .img,
.lk-land.l2v2-page-blog .img[style*="background"] {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* ==========================================================================
 * U93 — Privacy / legal page (.lk-legal) FULL design (2026-06-07)
 * privacy.twig is clean semantic markup (.lk-legal-hero/-body/-meta/.toc/h2/p) but
 * had ZERO matching CSS in either theme stylesheet → rendered as raw text. On the
 * guest yellow page it looked broken ("เละ"). This adds a complete Solar-consistent
 * design (white content card on yellow, like terms) + a logged-in .l2v2 dark variant.
 * (U91 keeps the nav-clearance padding-top on body:not(.l2v2) .lk-legal.)
 * ========================================================================== */
.lk-legal { font-family:'Noto Sans Thai','Inter',system-ui,sans-serif; padding-bottom:72px; }
.lk-legal .container { max-width:880px; margin:0 auto; }
.lk-legal-hero { text-align:center; padding:8px 24px 30px; }
.lk-legal .badge-dark { display:inline-flex; align-items:center; gap:8px; background:#0c151b !important; color:#ffc107 !important;
  padding:8px 18px; border-radius:999px; font-size:11.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.lk-legal-hero h1 { margin:18px 0 10px; font-size:clamp(30px,5vw,46px); font-weight:900; color:#0c151b; letter-spacing:-0.02em; line-height:1.2; }
.lk-legal-hero p { margin:0 auto; max-width:640px; font-size:15px; color:rgba(12,21,27,.72); font-weight:600; line-height:1.6; }
.lk-legal-body { padding:0 24px; }
.lk-legal-body .container { background:#fff; border-radius:24px; padding:clamp(26px,4vw,46px);
  box-shadow:0 20px 50px rgba(12,21,27,.13); border:1px solid rgba(12,21,27,.06); }
.lk-legal-meta { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:24px; }
.lk-legal-meta span { display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:700; color:#ca8a04;
  background:#fffaef; border:1px solid #ffe08a; padding:7px 14px; border-radius:999px; }
.lk-legal .toc { background:#fffaef; border:1px solid #ffe08a; border-radius:16px; padding:20px 22px; margin-bottom:30px; }
.lk-legal .toc h4 { margin:0 0 13px; font-size:12.5px; font-weight:800; text-transform:uppercase; letter-spacing:.09em; color:#0c151b; }
.lk-legal .toc a { display:inline-flex; margin:0 8px 8px 0; font-size:13px; font-weight:700; color:#0c151b; text-decoration:none;
  padding:7px 14px; background:#fff; border:1px solid #ffe08a; border-radius:999px; transition:transform .14s, background .14s; }
.lk-legal .toc a:hover { background:#ffc107; transform:translateY(-1px); }
.lk-legal-body h2 { margin:32px 0 11px; font-size:clamp(19px,2.6vw,23px); font-weight:800; color:#0c151b;
  padding-left:15px; border-left:4px solid #ffc107; line-height:1.3; }
.lk-legal-body h2:first-of-type { margin-top:4px; }
.lk-legal-body p { margin:0 0 6px; font-size:15px; line-height:1.78; color:#3a4756; }

/* logged-in (.l2v2) dark variant */
.l2v2 .lk-legal { padding-top:24px; }
.l2v2 .lk-legal-hero h1 { color:#f2f6fa; }
.l2v2 .lk-legal-hero p { color:rgba(255,255,255,.7); }
.l2v2 .lk-legal .badge-dark { background:rgba(255,193,7,.14) !important; color:#ffc107 !important; box-shadow:inset 0 0 0 1px rgba(255,193,7,.32); }
.l2v2 .lk-legal-body .container { background:#121d27; border-color:rgba(255,255,255,.09); box-shadow:0 20px 50px rgba(0,0,0,.34); }
.l2v2 .lk-legal-meta span { background:rgba(255,193,7,.1); color:#ffd24d; border-color:rgba(255,193,7,.28); }
.l2v2 .lk-legal .toc { background:rgba(255,255,255,.03); border-color:rgba(255,255,255,.1); }
.l2v2 .lk-legal .toc h4 { color:#f2f6fa; }
.l2v2 .lk-legal .toc a { background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12); color:#dfe6ec; }
.l2v2 .lk-legal .toc a:hover { background:#ffc107; color:#0c151b; }
.l2v2 .lk-legal-body h2 { color:#f2f6fa; }
.l2v2 .lk-legal-body p { color:#cdd6dd; }


/* ============================================================================
   LIKESTER — Legal pages "Solar Dark-Card" restyle  (U94)
   ----------------------------------------------------------------------------
   วิธีใช้: ก๊อปทั้งบล็อกนี้ไป "ต่อท้ายสุด" ของไฟล์ style.css
            (ต้องอยู่หลังบล็อก U73 ที่บังคับการ์ดขาว — การวางท้ายสุดรับประกันว่าชนะ)

   ทำอะไร: เปลี่ยนหน้า /terms (ซึ่งรวม Terms · Privacy · Refund · Law เป็นแท็บ
            อยู่แล้ว) จาก "การ์ดขาว" → "การ์ดดำบนพื้นเหลือง Solar" ให้เข้าชุดกับ
            หน้า FAQ ใช้ได้ทั้ง guest (พื้นเหลือง) และ member (อยู่ใน dashboard)

   ไม่ต้องแก้ markup / เนื้อหา / JS ของ terms.twig เลย — scope ที่ .l2v2-page-terms
   ทดสอบแล้วกับ cascade จริง (U73 + tos base + inline style ของ twig)
   ============================================================================ */

/* ---- frame: พื้นเหลือง Solar + ลบกรอบการ์ดขาว ---- */
.l2v2-page-terms.px,
.l2v2 .l2v2-page-terms.px            { background:#FFC400 !important; }
.l2v2-page-terms.px > section        { background:transparent !important; padding:8px 0 56px !important; }
.l2v2-page-terms .card,
.l2v2-page-terms .card-header,
.l2v2-page-terms .card-header-ap     { background:transparent !important; border:0 !important; box-shadow:none !important; padding:0 !important; }
.l2v2-page-terms .tos-page           { max-width:880px; margin:0 auto; }

/* ---- แท็บ pill (active = ดำ/เหลือง · inactive = เส้นขอบ) ---- */
.l2v2-page-terms .tos-nav-btn        { height:auto !important; line-height:1.3 !important; min-width:0 !important;
                                       background:rgba(12,21,27,.06) !important; border:1.5px solid rgba(12,21,27,.3) !important;
                                       color:#0c151b !important; border-radius:999px !important; padding:11px 22px !important;
                                       font-weight:800 !important; margin:0 8px 12px 0 !important; }
.l2v2-page-terms .tos-nav-btn:hover  { background:rgba(12,21,27,.14) !important; }
.l2v2-page-terms .tos-nav-btn.active { background:#0c151b !important; border-color:#0c151b !important; padding:11px 22px !important; }
.l2v2-page-terms .tos-nav-btn span        { color:inherit !important; }
.l2v2-page-terms .tos-nav-btn.active span { color:#ffc107 !important; }

/* ---- หัวข้อ + intro ที่วางบนพื้นเหลือง (ใช้หมึกเข้ม) ---- */
.l2v2-page-terms .tos-tab h4         { color:#0c151b !important; font-size:22px !important;
                                       border-bottom:1px solid rgba(12,21,27,.18) !important; padding-bottom:10px !important; margin:6px 0 18px !important; }
.l2v2-page-terms .tos-tab > p        { color:#4a3a00 !important; font-size:14.5px !important; }

/* ---- section label = ป้ายดำ + จุดเหลือง ---- */
.l2v2-page-terms .tos-section-label  { display:inline-flex !important; align-items:center !important; gap:8px !important;
                                       color:#ffc107 !important; background:#0c151b !important; border:1px solid rgba(255,255,255,.12) !important;
                                       border-radius:999px !important; padding:8px 16px !important; margin:28px 0 13px !important;
                                       font-size:12px !important; letter-spacing:.06em !important; text-transform:none !important; }
.l2v2-page-terms .tos-section-label::before { content:''; width:6px; height:6px; border-radius:50%; background:#ffc107; }

/* ---- แต่ละข้อ = การ์ดดำ ---- */
.l2v2-page-terms .tos-item           { background:#121d27 !important; border:1.5px solid rgba(255,255,255,.08) !important;
                                       border-left:1.5px solid rgba(255,255,255,.08) !important; border-radius:16px !important;
                                       padding:16px 20px !important; margin-bottom:11px !important; }
.l2v2-page-terms .tos-item:hover     { border-color:rgba(255,196,0,.3) !important; background:#16222e !important; }
.l2v2-page-terms .tos-item p         { color:#9fb0bd !important; font-size:14.5px !important; line-height:1.8 !important; }
.l2v2-page-terms .tos-item p strong  { color:#e8edf2 !important; }
.l2v2-page-terms .tos-item ul li     { color:#9fb0bd !important; font-size:14px !important; line-height:1.75 !important; }
.l2v2-page-terms .tos-item ul li strong { color:#e8edf2 !important; }
.l2v2-page-terms .tos-item .tos-sub  { color:#cdd9e2 !important; }
.l2v2-page-terms .tos-item-num       { color:#ffc107 !important; background:rgba(255,196,0,.12) !important; border-radius:7px !important;
                                       padding:1px 8px !important; margin-right:6px !important; min-width:0 !important; font-family:'Inter',sans-serif !important; }

/* ---- callout: พื้นเข้ม tint สี (warn=highlight / info=info-box / tip=contact-box) ---- */
/* NB: ใช้ "... p strong" เพื่อเอาชนะกฎ global .px .tos-tab p strong */
.l2v2-page-terms .tos-highlight        { background:#2a1417 !important; border:1.5px solid rgba(248,81,73,.42) !important; border-radius:16px !important; }
.l2v2-page-terms .tos-highlight p      { color:#f4c6c3 !important; font-weight:500 !important; }
.l2v2-page-terms .tos-highlight p strong { color:#ff9b96 !important; }
.l2v2-page-terms .tos-info-box         { background:#10202f !important; border:1.5px solid rgba(96,165,250,.4) !important; border-radius:16px !important; }
.l2v2-page-terms .tos-info-box p       { color:#c2d6f3 !important; }
.l2v2-page-terms .tos-info-box p strong{ color:#dce8fb !important; }
.l2v2-page-terms .tos-contact-box      { background:#241d0c !important; border:1.5px solid rgba(255,196,0,.42) !important; border-radius:16px !important; }
.l2v2-page-terms .tos-contact-box p    { color:#efdca0 !important; }
.l2v2-page-terms .tos-contact-box p strong { color:#ffd86b !important; }

/* ---- วันที่อัปเดต + กล่องโน้ตติดต่อท้ายหน้า ---- */
.l2v2-page-terms .tos-update-date    { color:#6b5a17 !important; border-top:1px dashed rgba(12,21,27,.25) !important; }
.l2v2-page-terms .px-legal-note,
.l2v2-page-terms ~ .px-legal-note    { background:#0c151b !important; border:1px solid rgba(255,255,255,.12) !important;
                                       color:#cdd9e2 !important; max-width:880px; }
.l2v2-page-terms .px-legal-note b    { color:#fff !important; }


/* ============================================================================
   member-extras.css — ก๊อปไปต่อท้าย style.css (คู่กับ refunds.twig ใหม่)
   ----------------------------------------------------------------------------
   .pg-note = กล่อง info ในหน้า refunds (แทน .alert-info เดิม) ใช้ token ธีม
   ปรับตามโหมด light/dark ของ dashboard อัตโนมัติ
   ============================================================================ */
.l2v2-page-refunds .pg-note{
  display:flex; gap:10px; align-items:flex-start;
  background:rgba(255,193,7,.08); border:1px solid rgba(255,193,7,.22);
  border-radius:12px; padding:13px 16px; margin:0 0 16px;
  font-size:13.5px; line-height:1.6; color:var(--ink2);
}
.l2v2-page-refunds .pg-note i{ color:var(--brand); font-size:18px; flex-shrink:0; margin-top:1px; }

/* ==========================================================================
 * U95 — member /terms: keep DARK (legal-solar U94 forced #FFC400 + dark text,
 * which clashes with the dark .l2v2 dashboard shell — yellow bled through + the
 * dark section headings/intro/tabs went invisible). Restore the dark treatment on
 * member only (guest keeps U94 yellow+dark-cards). The .tos-item dark cards from
 * U94 already work on the dark page; this fixes the surfaces around them.
 * ========================================================================== */
.l2v2 .l2v2-page-terms.px,
.l2v2 .l2v2-page-terms.px > section { background:transparent !important; }
.l2v2 .l2v2-page-terms .tos-tab h4 { color:#f2f6fa !important; border-bottom-color:rgba(255,255,255,.14) !important; }
.l2v2 .l2v2-page-terms .tos-tab > p { color:rgba(255,255,255,.72) !important; }
.l2v2 .l2v2-page-terms .tos-nav-btn { background:rgba(255,255,255,.05) !important; border-color:rgba(255,255,255,.16) !important; color:#dfe6ec !important; }
.l2v2 .l2v2-page-terms .tos-nav-btn:hover { background:rgba(255,255,255,.1) !important; }
.l2v2 .l2v2-page-terms .tos-nav-btn.active { background:#ffc107 !important; border-color:#ffc107 !important; }
.l2v2 .l2v2-page-terms .tos-nav-btn.active span { color:#0c151b !important; }
.l2v2 .l2v2-page-terms .tos-update-date { color:rgba(255,255,255,.5) !important; border-top-color:rgba(255,255,255,.15) !important; }

/* ==========================================================================
 * U96 — terms white-container bleed fix + api guest footer seam (2026-06-07)
 * (a) legal-solar's `.l2v2-page-terms .card{transparent}` (0,2,0) lost to the older
 *     `.px .card{#fff !important}` (0,2,0) in the live cascade → the big white
 *     .card.card-border container bled through behind the dark section cards on guest
 *     /terms. Bump to (0,3,0) so transparent wins definitively (guest + member).
 * (b) guest /api is pinned dark (api-guest-fix) but the global yellow footer wrapper
 *     (.lkf) clashed → match it to the dark api surface.
 * ========================================================================== */
.l2v2-page-terms .card.card-border,
.l2v2-page-terms .card.card-no-box,
.l2v2-page-terms .card-border .card-header,
.l2v2-page-terms .d-card {
  background:transparent !important; border:0 !important; box-shadow:none !important;
}
body:not(.l2v2):has(.l2v2-page-api) .lkf { background:#0C141B !important; }

/* ==========================================================================
 * U97 — center the /terms content (2026-06-07)
 * .tos-page is a Bootstrap flex col (.col-lg-12) inside a .row → legal-solar's
 * `margin:0 auto` couldn't center it as a flex item (used margin computed to 0,
 * left-aligned). Center the flex item via justify-content + flex-basis.
 * ========================================================================== */
.l2v2-page-terms .row:has(.tos-page) { justify-content:center !important; }
.l2v2-page-terms .tos-page.col-lg-12,
.l2v2-page-terms .tos-page { flex:0 1 880px !important; max-width:880px !important; margin-left:auto !important; margin-right:auto !important; }

/* ==========================================================================
 * U98 — member /blog: clear the fixed dashboard topbar (2026-06-07)
 * The dashboard topbar (.l2v2-topbar) is position:fixed, height 90px. The blog
 * content `.lk-land.l2v2-page-blog` inherits padding-top:34px (from the base
 * `padding:34px… !important` at L33365) → the blog hero badge/title rendered UNDER
 * the topbar. Bump member padding-top to clear the 90px bar. (Guest blog already
 * cleared the floating yellow nav via U91; this is the logged-in dashboard topbar.)
 * ========================================================================== */
.l2v2 .lk-land.l2v2-page-blog { padding-top:104px !important; }
@media (max-width:980px){ .l2v2 .lk-land.l2v2-page-blog { padding-top:84px !important; } }

/* ==========================================================================
 * U99 — /terms centering, real root (2026-06-07)
 * The content was left-aligned because `.card-header-ap` is `display:flex;
 * justify-content:space-between` → the inner `.row` shrank to its 880px content
 * and sat at the left. U97's row justify-content:center couldn't help (the row
 * itself was 880 + left). Make card-header-ap a block so the row fills the card
 * width; then U97's justify-content:center on the row centers the 880px .tos-page.
 * ========================================================================== */
.l2v2-page-terms .card-header-ap { display:block !important; }
.l2v2-page-terms .card-header-ap > .row { width:auto !important; }

/* ==========================================================================
 * U100 — /privacy guest: dark content card (consistency with /terms) (2026-06-07)
 * User kept /privacy standalone (no redirect). But /terms is now dark-cards-on-yellow
 * (U94) while /privacy guest was a WHITE card (U93) → the two legal pages looked
 * inconsistent. Flip guest /privacy to the dark card too (member already dark via U93)
 * → both legal pages share the Solar dark-card-on-yellow look. Hero stays (dark text
 * on the yellow page). Standalone page preserved.
 * ========================================================================== */
body:not(.l2v2) .lk-legal-body .container { background:#121d27 !important; border-color:rgba(255,255,255,.09) !important; box-shadow:0 20px 50px rgba(0,0,0,.3) !important; }
body:not(.l2v2) .lk-legal-body h2 { color:#f2f6fa !important; }
body:not(.l2v2) .lk-legal-body p { color:#cdd6dd !important; }
body:not(.l2v2) .lk-legal .toc { background:rgba(255,255,255,.04) !important; border-color:rgba(255,255,255,.1) !important; }
body:not(.l2v2) .lk-legal .toc h4 { color:#f2f6fa !important; }
body:not(.l2v2) .lk-legal .toc a { background:rgba(255,255,255,.06) !important; border-color:rgba(255,255,255,.14) !important; color:#dfe6ec !important; }
body:not(.l2v2) .lk-legal .toc a:hover { background:#ffc107 !important; color:#0c151b !important; }
body:not(.l2v2) .lk-legal-meta span { background:rgba(255,193,7,.1) !important; color:#ffd24d !important; border-color:rgba(255,193,7,.28) !important; }

/* ==========================================================================
 * U101 — New Order UX batch 1 (2026-06-07)
 * #5/#6: TWO "สั่งซื้อ" buttons (form-bottom + summary card) confused users + on
 *        mobile the summary sat below the first button so they ordered before
 *        seeing the total. Remove the redundant form-bottom submit → the ONLY CTA
 *        is the summary card's #v15s-submit (always shows the live total). On mobile
 *        the summary card (with total + button) is then the single order action.
 * #2: member dashboard modal content overflowed (overflow:hidden, no max-height) →
 *     PLATINUM/VIP tier cards were cut off. Make it scroll.
 * ========================================================================== */
.l2v2-page-dashboard #order-form button[type="submit"] { display:none !important; }
.l2v2 #memberDashboardModal .modal-content { max-height:calc(100vh - 40px); overflow-y:auto; }
.l2v2 #memberDashboardModal .modal-content::-webkit-scrollbar { width:8px; }
.l2v2 #memberDashboardModal .modal-content::-webkit-scrollbar-thumb { background:rgba(255,255,255,.18); border-radius:8px; }

/* ==========================================================================
 * U102 — New Order UX batch 2 + blog/services responsive (2026-06-07)
 * #3 check-in modal in LIGHT mode: the header forced a dark gradient (inline+CSS)
 *    while the text uses --ink tokens that flip dark in light mode → dark text on a
 *    dark header (invisible). Inline removed in neworder.twig; here add the light
 *    header for html.light so it matches the light body + the dark text reads.
 * #1 member /blog desktop: content sat only ~10px from the 280px sidebar (cramped).
 * #4 ci-banner mobile: text+dots+button crammed in one 344px row → dots to their own
 *    centered row.
 * #7 services mobile: 2-col grid wasted space (button column) → stack + full-width btn.
 * ========================================================================== */
/* #3 — light-mode check-in header */
html.light .ci-modal .ci-modal-header.nom-ci-head { background:radial-gradient(120% 90% at 50% -10%,rgba(255,193,7,.5),transparent 60%),linear-gradient(180deg,#fff6df,#ffe9b8) !important; }
html.light .nom-ci-head .nom-streak-num { color:#c2410c; }

/* #1 — blog desktop breathing room from the sidebar */
@media (min-width:981px){
  .l2v2 .lk-land.l2v2-page-blog { padding-left:318px !important; padding-right:44px !important; }
}

/* #4 — ci-banner mobile: dots drop to their own centered row */
@media (max-width:560px){
  .l2v2-page-dashboard .nwo-ci-banner-row { flex-wrap:wrap; align-items:center; }
  .l2v2-page-dashboard .nwo-ci-banner-left { order:1; flex:1 1 auto; }
  .l2v2-page-dashboard .nwo-ci-btn { order:2; flex:0 0 auto; }
  .l2v2-page-dashboard .nwo-ci-dots { order:3 !important; flex-basis:100% !important; width:100% !important; justify-content:center !important; margin-top:10px; }
}

/* #7 — services mobile: single column + full-width detail button
 * (beat the existing `.l2v2 .l2v2-page-services .service-item.pg-svc-card{1fr auto}` (0,4,0) at @820) */
@media (max-width:560px){
  /* a cross-origin rule wins the grid-template-columns battle (CORS-opaque) → switch
   * the card to block so the children stack + the button drops full-width below. */
  .l2v2 .l2v2-page-services .service-item.pg-svc-card { display:block !important; }
  .l2v2 .l2v2-page-services .pg-svc-card .pg-svc-btn { display:block !important; width:100% !important; margin-top:12px; text-align:center; }
}

/* U102-fix — blog desktop left padding: beat the ID rule
 * `body#appDashboard.l2v2 > .lk-land{padding-left:280px!important}` (L31727, spec 1,2,0)
 * which kept the blog content cramped against the 280px sidebar. */
@media (min-width:981px){
  body#appDashboard.l2v2 > .lk-land.l2v2-page-blog { padding-left:318px !important; }
}

/* ==========================================================================
 * U103 — stat cards: reduce wasted height (2026-06-07)
 * The 4 dashboard stat cards were 213px tall with big empty space (`.cnb-content`
 * padding 30px 30px 50px). Tighten the inner padding → more compact cards.
 * (Member-card "Gold" plain text dedup + the floating coin `.nom-coinfloat` were
 * removed in neworder.twig.)
 * ========================================================================== */
.l2v2-page-dashboard .row.row-cols-lg-4 .cnb-content { padding:18px 26px 20px !important; }
.l2v2-page-dashboard .row.row-cols-lg-4 .cb-content { padding:10px 18px !important; }
.l2v2-page-dashboard .row.row-cols-lg-4 .nom-mini-prog { margin-top:10px; }

/* ==========================================================================
 * U104 — Check-in modal: custom SVG game FX, NO emoji (2026-06-07)
 * Replaced 🔥/🎁/🪙 with inline SVG (flame/chest/coin) + coin-fly-to-balance +
 * count-up (in neworder.twig). This styles the SVG flame flicker, the points
 * count-up pop, and the burst/day-cell SVG coins.
 * ========================================================================== */
.nom-flame { display:inline-block; line-height:0; font-size:0 !important; animation:none !important; filter:drop-shadow(0 4px 10px rgba(255,120,0,.5)); }
.nom-flame svg { display:block; transform-origin:50% 92%; }
@media (prefers-reduced-motion: no-preference){
  .nom-flame svg { animation:nomFlmFlick .85s ease-in-out infinite alternate; }
  .nom-flame .nom-flm-i { animation:nomFlmInner 1.05s ease-in-out infinite alternate; transform-origin:50% 90%; }
}
@keyframes nomFlmFlick { 0%{ transform:scale(1) rotate(-2deg); } 100%{ transform:scale(1.07,1.1) rotate(2deg); } }
@keyframes nomFlmInner { 0%{ opacity:.6; transform:scaleY(.82); } 100%{ opacity:1; transform:scaleY(1.06); } }
.nom-coin svg { width:100%; height:100%; }
.nom-day .coin svg { display:block; margin:0 auto; }
.nom-amt-pop { display:inline-block; animation:nomAmtPop .5s cubic-bezier(.2,1.5,.4,1); }
@keyframes nomAmtPop { 0%{ transform:scale(1); } 35%{ transform:scale(1.22); color:#ff9800; } 100%{ transform:scale(1); } }

/* ==========================================================================
 * U105 — check-in modal dup-X + collapsed sidebar balance (2026-06-07)
 * B: the .nom-x close button rendered TWO X — a text "×" (markup) AND a btn-close
 *    SVG background-image. Drop the bg-image → single clean "×".
 * D: desktop collapsed sidebar — the `.sb-bal` balance pill text ("เงินคงเหลือ
 *    ฿72,783.00") overflowed the 78px rail and was cut to "฿72,7" (looked broken).
 *    Hide it when collapsed (expand to see balance); keep the rail tidy.
 * ========================================================================== */
#checkinModal button.nom-x.ci-close-btn, .ci-modal button.nom-x.ci-close-btn { background-image:none !important; }
.l2v2-sb-collapsed .l2v2-side .sb-bal { display:none !important; }

/* ==========================================================================
 * U106 — sidebar: collapsed (desktop) alignment + mobile drawer backdrop (2026-06-07)
 * Collapsed rail: `.sb-i.mLink` had justify-content:center BUT kept padding-left:16px
 * → icons pushed off-centre (looked unaligned). Zero the side padding so icons truly
 * centre; strip the over-styled avatar/balance box; hide the empty group labels.
 * Mobile drawer: opened over the page with NO backdrop (content showed through) →
 * add a dimmed backdrop behind the drawer (sidebar z-index is 1040).
 * ========================================================================== */
.l2v2-sb-collapsed .l2v2-side .sb-i.mLink,
.l2v2-sb-collapsed .l2v2-side .sb-i { padding-left:0 !important; padding-right:0 !important; justify-content:center !important; }
.l2v2-sb-collapsed .l2v2-side .sb-i .ico,
.l2v2-sb-collapsed .l2v2-side .sb-i .mIcon { margin:0 !important; }
.l2v2-sb-collapsed .l2v2-side .sb-user { justify-content:center !important; padding:8px 0 !important; background:transparent !important; border:0 !important; box-shadow:none !important; margin:0 0 8px !important; }
.l2v2-sb-collapsed .l2v2-side .sb-user .av { margin:0 auto !important; }
.l2v2-sb-collapsed .l2v2-side .sb-section-label,
.l2v2-sb-collapsed .l2v2-side .sb-grp-label,
.l2v2-sb-collapsed .l2v2-side .nm-group-label,
.l2v2-sb-collapsed .l2v2-side [class*="section"] > .lbl { display:none !important; }

/* mobile drawer backdrop — CSS-only (no script): the open sidebar's huge box-shadow
 * spread dims the page behind it. (engine handles open/close via authMenuToggle) */
@media (max-width:991px){
  body.drawer-open .l2v2-side { box-shadow: 0 0 0 100vmax rgba(8,12,20,.58) !important; }
}

/* ===== U107 — collapsed sidebar: uniform square tiles + even spacing =====
   Root cause found via live probe: engine collapse adds body.l2v2-sb-collapsed
   + ul.sbMenu keeps its EXPANDED padding (0 26px) → in the 78px rail only ~26px
   remains, so each .sb-i squished to w:25 h:37 → the active item's yellow gradient
   rendered as a tall narrow DISTORTED pill (user: "ขนาดผิดเพี้ยน"). Group-label
   <li.sb-grp> margin-top:10px also added a 14px extra gap at every group break
   (user: "ระยะห่างไม่เท่ากัน"). Fix: neutralize ul side-padding, make every row a
   uniform 46x46 centered tile, hide the group labels in collapsed for an even
   rhythm, soften the active glow. Scoped to body.l2v2-sb-collapsed (the real
   engine signal) so the EXPANDED sidebar is untouched. */
body.l2v2-sb-collapsed .l2v2-side .sbMenu,
body.l2v2-sb-collapsed .l2v2-side .sb-menu-ul{
  padding-left:0 !important; padding-right:0 !important;
  row-gap:7px !important;
}
/* group labels (หลัก / ระบบอัตโนมัติ / บัญชี / ช่วยเหลือ): hide in collapsed → fully even gaps */
body.l2v2-sb-collapsed .l2v2-side .sbMenu > li.sb-grp{
  display:none !important; margin:0 !important; height:0 !important; padding:0 !important;
}
/* each row centers its tile */
body.l2v2-sb-collapsed .l2v2-side .sbMenu > li.sb-grp-item,
body.l2v2-sb-collapsed .l2v2-side .sbMenu > li.mItem{
  display:flex !important; justify-content:center !important; align-items:center !important;
  margin:0 !important; padding:0 !important;
}
/* uniform square tile (was squished to 25px → tall pill) */
body.l2v2-sb-collapsed .l2v2-side .sb-i.mLink{
  width:46px !important; min-width:46px !important; max-width:46px !important; height:46px !important;
  margin:0 auto !important; padding:0 !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  border-radius:14px !important;
}
/* icon centered + consistent size inside the tile */
body.l2v2-sb-collapsed .l2v2-side .sb-i.mLink .ico,
body.l2v2-sb-collapsed .l2v2-side .sb-i.mLink .mIcon{
  margin:0 !important; width:auto !important; min-width:0 !important; padding:0 !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  font-size:21px !important; line-height:1 !important;
}
body.l2v2-sb-collapsed .l2v2-side .sb-i.mLink .ico i,
body.l2v2-sb-collapsed .l2v2-side .sb-i.mLink .ico svg,
body.l2v2-sb-collapsed .l2v2-side .sb-i.mLink .mIcon i,
body.l2v2-sb-collapsed .l2v2-side .sb-i.mLink .mIcon svg{
  font-size:21px !important; width:21px !important; height:21px !important; margin:0 !important;
}
/* hide the text label remnant so it can't widen the tile */
body.l2v2-sb-collapsed .l2v2-side .sb-i.mLink .tx,
body.l2v2-sb-collapsed .l2v2-side .sb-i.mLink .mText,
body.l2v2-sb-collapsed .l2v2-side .sb-i.mLink .sb-badge,
body.l2v2-sb-collapsed .l2v2-side .sb-i.mLink .mBadge{ display:none !important; }
/* active tile: clean square with a soft (not heavy) glow — no longer a distorted pill */
body.l2v2-sb-collapsed .l2v2-side .sb-i.mLink.active{
  box-shadow:0 5px 16px rgba(255,193,7,.26) !important;
}
/* trim the oversized gap between the avatar block and the first tile */
body.l2v2-sb-collapsed .l2v2-side .sb-user{ margin-bottom:10px !important; }

/* ===== U108 — sidebar collapse is desktop-only; can never leak onto the mobile drawer =====
   Pairs with the layout.twig change that made collapse SESSION-ONLY (removed the
   localStorage persist + restore — same model as the Jay theme). Two CSS guards below the
   drawer breakpoint (≤991px) so the 78px icon rail can never appear on the off-canvas
   mobile drawer:
   1) hide the fold button (.col-btn) — collapse is a desktop affordance only, a mobile
      user must not be able to shrink the drawer to a rail.
   2) if body.l2v2-sb-collapsed is somehow present at mobile width (e.g. a desktop→mobile
      resize without reload, as happens in DevTools device mode), force the full labelled
      drawer back — overrides the U107 collapsed-tile styling on mobile. */
@media (max-width:991px){
  .l2v2-side .col-btn{ display:none !important; }

  body.l2v2-sb-collapsed .l2v2-side{ width:280px !important; }
  body.l2v2-sb-collapsed .l2v2-side .sbMenu,
  body.l2v2-sb-collapsed .l2v2-side .sb-menu-ul{
    padding-left:26px !important; padding-right:26px !important; row-gap:2px !important;
  }
  body.l2v2-sb-collapsed .l2v2-side .sbMenu > li.sb-grp{ display:list-item !important; height:auto !important; }
  body.l2v2-sb-collapsed .l2v2-side .sb-i.mLink{
    width:auto !important; min-width:0 !important; max-width:none !important; height:auto !important;
    margin:0 !important; padding:9px 16px !important;
    justify-content:flex-start !important; border-radius:11px !important;
  }
  body.l2v2-sb-collapsed .l2v2-side .sb-i.mLink .ico,
  body.l2v2-sb-collapsed .l2v2-side .sb-i.mLink .mIcon{
    width:auto !important; min-width:0 !important; font-size:inherit !important;
  }
  body.l2v2-sb-collapsed .l2v2-side .sb-i.mLink .tx,
  body.l2v2-sb-collapsed .l2v2-side .sb-i.mLink .mText{ display:inline !important; }
  body.l2v2-sb-collapsed .l2v2-side .sb-user{ margin-bottom:10px !important; }
}

/* ===== U109 — mobile drawer: ONE close button (kill the redundant empty menu-btn) =====
   The user spotted two close affordances: the header hamburger .menu-btn (which carries both a
   ☰ ri-menu-line and a ✕ ri-close-line) AND the in-drawer .sb-close ✕ beside the logo. Live probe
   with the drawer open showed .menu-btn as an EMPTY 44x44 box (both its icons resolve to
   display:none via conflicting older rules) floating at top-left over the drawer — redundant and
   "ดูแปลกๆ". Fix: while the drawer is open, hide .menu-btn entirely so .sb-close (top-right, by the
   logo) is the single, clear close. When the drawer is closed, .menu-btn still shows ☰ to open it. */
.appAuth.sidebar-active .menu-btn,
body.drawer-open .menu-btn { display: none !important; }

/* ===== U110 — /services (member) redesign v2: desktop=list rows, mobile=cards, fix search overflow. From handoff likester-net 14 (services-redesign.css). CSS-only — services.twig already has .pg-svc-* markup (verified). ===== */
/* ============================================================================
   LIKESTER — /services (member, .l2v2) REDESIGN v2  (U95)
   ----------------------------------------------------------------------------
   วิธีใช้: ก๊อปทั้งบล็อกไป "ต่อท้ายสุด" ของ style.css (ต้องท้ายสุดเพื่อชนะ
            override เดิม U29/U33/U34/U67/U68) — ไม่ต้องแก้ markup ของ services.twig

   เลย์เอาต์:
   • Desktop (≥768px) = LIST แถวยาว 1 คอลัมน์  [★] [#id] [ชื่อ+เวลา] [rate] [min] [max] [ปุ่ม]
     เหมาะกับหมวดที่มีงาน 10–20 รายการ สแกนไว ไม่เปลือง scroll
   • Mobile (<768px)  = การ์ดแนวตั้ง สแกนง่ายบนจอแคบ
   แก้ search overflow (เพิ่ม box-sizing:border-box) ด้วย
   ============================================================================ */

/* ---- filter + search bar: ไม่ overflow / stack บน mobile ---- */
.l2v2 .l2v2-page-services .card.card-border .card-body .row { display:flex !important; flex-wrap:wrap; gap:10px; align-items:center; }
.l2v2 .l2v2-page-services .card.card-border .card-body .row > [class*="col"] { flex:1 1 100%; max-width:100%; padding:0 !important; }
.l2v2 .l2v2-page-services .search-services,
.l2v2 .l2v2-page-services .search-services .textbox { box-sizing:border-box !important; }
.l2v2 .l2v2-page-services .search-services { width:100% !important; flex:1 1 100% !important; min-width:0 !important; }
.l2v2 .l2v2-page-services .search-services .textbox { width:100% !important; margin-left:0 !important; height:44px; }
.l2v2 .l2v2-page-services .dd-btn { width:100%; justify-content:flex-start; height:44px; }
@media (min-width:768px){
  .l2v2 .l2v2-page-services .card.card-border .card-body .row { flex-wrap:nowrap; }
  .l2v2 .l2v2-page-services .card.card-border .card-body .row > [class*="col-md-auto"] { flex:0 0 auto; }
  .l2v2 .l2v2-page-services .dd-btn { width:auto; }
}

/* ---- wrapper = คอลัมน์เดียวเสมอ (เป็น list ทั้ง desktop & mobile) ---- */
.l2v2 .l2v2-page-services .services-wrapper { display:flex !important; flex-direction:column !important; grid-template-columns:none !important; gap:10px !important; }

/* ---------- BASE = MOBILE การ์ดแนวตั้ง ---------- */
.l2v2 .l2v2-page-services .service-item.pg-svc-card {
  display:flex !important; flex-direction:column !important; gap:0 !important;
  grid-template-columns:none !important; align-items:stretch !important;
  position:relative !important; padding:16px 16px 14px !important; height:auto !important;
  background:var(--side) !important; border:1px solid var(--line) !important; border-radius:16px !important;
}
.l2v2 .l2v2-page-services .service-item.pg-svc-card:hover { border-color:var(--brand) !important; box-shadow:var(--shadow-lg) !important; }
.l2v2 .l2v2-page-services .pg-svc-card .pg-svc-id { grid-column:auto !important; grid-row:auto !important; align-self:flex-start !important;
  font-family:var(--font-en) !important; font-size:11px !important; font-weight:700 !important; color:var(--inkDim) !important;
  background:var(--side2) !important; border:1px solid var(--line) !important; border-radius:7px !important; padding:2px 8px !important; }
.l2v2 .l2v2-page-services .pg-svc-card .pg-svc-fav { position:absolute !important; top:14px !important; right:14px !important; left:auto !important; bottom:auto !important; font-size:18px !important; color:var(--brand) !important; }
.l2v2 .l2v2-page-services .pg-svc-card .pg-svc-name { grid-column:auto !important; grid-row:auto !important;
  margin:10px 26px 0 0 !important; font-size:14.5px !important; font-weight:700 !important; color:var(--ink) !important; line-height:1.5 !important;
  display:-webkit-box !important; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.l2v2 .l2v2-page-services .pg-svc-card .pg-svc-avt { grid-column:auto !important; grid-row:auto !important;
  margin:8px 0 0 !important; align-self:flex-start !important; display:inline-flex !important; align-items:center; gap:5px;
  font-size:11px !important; color:#ffd86b !important; background:rgba(255,196,0,.1); border:1px solid rgba(255,196,0,.22); border-radius:999px; padding:3px 10px; white-space:nowrap; max-width:100%; }
.l2v2 .l2v2-page-services .pg-svc-card .pg-svc-meta { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:8px !important;
  margin:12px 0 !important; padding:11px 0 !important; border-top:1px solid var(--line) !important; border-bottom:1px solid var(--line) !important; }
.l2v2 .l2v2-page-services .pg-svc-card .pg-svc-meta > div,
.l2v2 .l2v2-page-services .pg-svc-card .pg-svc-meta > div:nth-child(1),
.l2v2 .l2v2-page-services .pg-svc-card .pg-svc-meta > div:nth-child(2),
.l2v2 .l2v2-page-services .pg-svc-card .pg-svc-meta > div:nth-child(3) { grid-column:auto !important; grid-row:auto !important;
  display:flex !important; flex-direction:column !important; align-items:flex-start !important; gap:2px !important; text-align:left !important; padding:0 !important; min-width:0; }
.l2v2 .l2v2-page-services .pg-svc-card .pg-svc-meta .l { font-size:10.5px !important; color:var(--inkDim) !important; text-transform:none; letter-spacing:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.l2v2 .l2v2-page-services .pg-svc-card .pg-svc-meta .v { font-family:var(--font-en) !important; font-weight:800 !important; font-size:13.5px !important; color:var(--ink) !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.l2v2 .l2v2-page-services .pg-svc-card .pg-svc-meta .v.min { color:var(--success) !important; }
.l2v2 .l2v2-page-services .pg-svc-card .pg-svc-meta .v.max { color:#ff6b6b !important; }
.l2v2 .l2v2-page-services .pg-svc-card .pg-svc-btn { grid-column:auto !important; grid-row:auto !important; margin:auto 0 0 !important; justify-self:stretch !important;
  width:100% !important; padding:11px !important; border-radius:11px !important; font-weight:800 !important; font-size:13px !important;
  background:linear-gradient(95deg,#ffc107,#ffd24a) !important; color:#0c151b !important; border:0 !important; }
.l2v2 .l2v2-page-services .pg-svc-card .pg-svc-btn:hover { filter:brightness(1.04); }

/* ---------- DESKTOP ≥768px = LIST แถวแนวนอน ---------- */
@media (min-width:768px){
  .l2v2 .l2v2-page-services .service-item.pg-svc-card {
    display:grid !important;
    grid-template-columns:26px 64px minmax(160px,1fr) 116px 92px 116px 150px !important;
    grid-template-rows:auto auto !important; align-items:center !important;
    column-gap:16px !important; row-gap:2px !important; padding:12px 18px !important;
  }
  .l2v2 .l2v2-page-services .pg-svc-card .pg-svc-fav { position:static !important; grid-column:1 !important; grid-row:1 / 3 !important; justify-self:center; align-self:center; }
  .l2v2 .l2v2-page-services .pg-svc-card .pg-svc-id { grid-column:2 !important; grid-row:1 / 3 !important; align-self:center !important; justify-self:start; }
  .l2v2 .l2v2-page-services .pg-svc-card .pg-svc-name { grid-column:3 !important; grid-row:1 !important; margin:0 !important; -webkit-line-clamp:1; align-self:end; }
  .l2v2 .l2v2-page-services .pg-svc-card .pg-svc-avt { grid-column:3 !important; grid-row:2 !important; margin:2px 0 0 !important; align-self:start; }
  /* งานที่ไม่มีเวลา (average_time) → ชื่อจัดกึ่งกลางแนวตั้งเต็มแถว ไม่เหลือช่องว่าง */
  .l2v2 .l2v2-page-services .service-item.pg-svc-card:not(:has(.pg-svc-avt)) .pg-svc-name { grid-row:1 / 3 !important; align-self:center !important; }
  .l2v2 .l2v2-page-services .pg-svc-card .pg-svc-meta { display:contents !important; }
  .l2v2 .l2v2-page-services .pg-svc-card .pg-svc-meta > div,
  .l2v2 .l2v2-page-services .pg-svc-card .pg-svc-meta > div:nth-child(1){ grid-column:4 !important; }
  .l2v2 .l2v2-page-services .pg-svc-card .pg-svc-meta > div:nth-child(2){ grid-column:5 !important; }
  .l2v2 .l2v2-page-services .pg-svc-card .pg-svc-meta > div:nth-child(3){ grid-column:6 !important; }
  .l2v2 .l2v2-page-services .pg-svc-card .pg-svc-meta > div { grid-row:1 / 3 !important; align-items:center !important; text-align:center !important; align-self:center; }
  .l2v2 .l2v2-page-services .pg-svc-card .pg-svc-meta .l { text-align:center; }
  .l2v2 .l2v2-page-services .pg-svc-card .pg-svc-btn { grid-column:7 !important; grid-row:1 / 3 !important; align-self:center !important; margin:0 !important; width:100% !important; padding:10px 14px !important; }
}

/* ===== U111 — /updates (member) as .pg-tbl table (matches orders/refunds). From handoff likester-net 14 (updates-design.css). Pairs with replaced updates.twig. Hooks verified identical to current. ===== */
/* ============================================================================
   LIKESTER — /updates (member) เป็น "ตาราง"  (U96)
   ----------------------------------------------------------------------------
   ใช้คู่กับ updates.twig ตัวใหม่ (โครงตาราง .pg-tbl) — ก๊อปไปต่อท้ายสุด style.css
   ตาราง .pg-tbl + badge .st มีสไตล์อยู่แล้ว (จาก orders) ไฟล์นี้เติมแค่ส่วนเฉพาะ /updates
   ============================================================================ */

/* แคบลงกว่าตาราง orders (คอลัมน์น้อยกว่า) → เลื่อนน้อยลงบนมือถือ */
.l2v2 .l2v2-content .l2v2-page-updates .pg-tbl.up-tbl { min-width: 680px; }

/* คอลัมน์ "ประเภท" badge + จุดใหม่ ไม่ตัดบรรทัด */
.l2v2 .l2v2-content .up-tbl td:first-child { white-space: nowrap; }
.l2v2 .l2v2-content .up-tbl .st i { font-size: 13px; }

/* จุด "ใหม่" เต้น สำหรับ 2 รายการล่าสุด */
.l2v2 .l2v2-content .up-tbl .up-new {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--brand); box-shadow: 0 0 0 3px rgba(255,196,0,.18);
  margin-left: 6px; vertical-align: middle; animation: upPulse 1.8s ease-in-out infinite;
}
@keyframes upPulse { 0%,100%{opacity:.45;} 50%{opacity:1;} }

/* #id ในชื่อบริการ */
.l2v2 .l2v2-content .up-tbl .pl .srv-name .id { color: var(--ink2); font-family: var(--font-en); font-weight: 700; }

/* คอลัมน์ "รายละเอียด" — ตัวรอง อ่านง่าย จำกัด 2 บรรทัด */
.l2v2 .l2v2-content .up-tbl .up-desc {
  color: var(--ink2); font-size: 12.5px; line-height: 1.55; max-width: 560px;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* คอลัมน์ "วันที่" */
.l2v2 .l2v2-content .up-tbl .up-date { color: var(--inkDim); font-size: 12px; white-space: nowrap; }

@media (max-width:640px){
  .l2v2 .l2v2-content .l2v2-page-updates .pg-tbl.up-tbl { min-width: 640px; }
}

/* ===== U112 — mobile topbar: stop the page title hugging the hamburger =====
   On mobile the .menu-btn is position:fixed at left:14px, width 44 → its right edge is at 58px.
   The topbar's padding-left is set by several conflicting breakpoints (72 / 60 / 56px); at most
   mobile widths the effective value won 60px (and 56px on small phones), leaving the page title
   only ~2px from the button — "ชิดมาก", and on small phones the title overlapped the button.
   Pin a single safe padding-left across the whole drawer range so every page's title clears the
   hamburger with a comfortable ~16px gap. Vertically center the title block too. */
@media (max-width:991px){
  .l2v2 .appHeader.l2v2-topbar{ padding-left:74px !important; }
  .l2v2 .appHeader.l2v2-topbar .pgti{ display:flex; flex-direction:column; justify-content:center; }
}
@media (max-width:380px){
  /* tightest phones: keep a real gap but reclaim a little width */
  .l2v2 .appHeader.l2v2-topbar{ padding-left:70px !important; padding-right:8px !important; }
}

/* ===== U113 — premium mobile drawer motion: "Staggered Reveal" (option B) =====
   Was: the slide had no eased transition (a .l2v2-side `transition: width .25s` clobbered the
   legacy `.appSidebar { transition:.24s ease }`, so the transform snapped), the scrim appeared
   instantly (the ::before only existed while .sidebar-active), and the menu had no entrance.
   Now: drawer glides on Apple's sheet curve, the scrim fades + blurs the content behind, and the
   rows cascade in top→bottom. All CSS, scoped to the drawer breakpoint (≤991.98px) so the
   always-open desktop sidebar is untouched. Honors prefers-reduced-motion. */
@media (max-width: 991.98px){
  /* 1) drawer glide — restore an eased transform transition (iOS sheet curve, reused from af2-sheet) */
  body#appDashboard.l2v2 .appAuth .appSidebar.l2v2-side{
    transition: transform .44s cubic-bezier(.32,.72,0,1), width .25s !important;
    will-change: transform;
  }

  /* 2) scrim — always present so it can fade; blurs + dims the content behind */
  body#appDashboard.l2v2 .appAuth::before{
    content:''; position:fixed; inset:0; z-index:1030;
    background: rgba(8,12,20,.5);
    -webkit-backdrop-filter: blur(4px) saturate(.9); backdrop-filter: blur(4px) saturate(.9);
    opacity:0; pointer-events:none; cursor:pointer;
    transition: opacity .4s ease;
  }
  body#appDashboard.l2v2 .appAuth.sidebar-active::before{ opacity:1; pointer-events:auto; }

  /* 3) staggered reveal — rows start shifted+faded, cascade in only when the drawer is open */
  body#appDashboard.l2v2 .appAuth .l2v2-side .sb-user,
  body#appDashboard.l2v2 .appAuth .l2v2-side .sbMenu > li{
    opacity:0; transform: translateX(-14px);
    transition: opacity .45s ease, transform .45s cubic-bezier(.32,.72,0,1);
  }
  body#appDashboard.l2v2 .appAuth.sidebar-active .l2v2-side .sb-user,
  body#appDashboard.l2v2 .appAuth.sidebar-active .l2v2-side .sbMenu > li{
    opacity:1; transform:none;
  }
  body#appDashboard.l2v2 .appAuth.sidebar-active .l2v2-side .sb-user{ transition-delay:.05s; }
  body#appDashboard.l2v2 .appAuth.sidebar-active .l2v2-side .sbMenu > li:nth-child(1){ transition-delay:.08s; }
  body#appDashboard.l2v2 .appAuth.sidebar-active .l2v2-side .sbMenu > li:nth-child(2){ transition-delay:.11s; }
  body#appDashboard.l2v2 .appAuth.sidebar-active .l2v2-side .sbMenu > li:nth-child(3){ transition-delay:.14s; }
  body#appDashboard.l2v2 .appAuth.sidebar-active .l2v2-side .sbMenu > li:nth-child(4){ transition-delay:.17s; }
  body#appDashboard.l2v2 .appAuth.sidebar-active .l2v2-side .sbMenu > li:nth-child(5){ transition-delay:.20s; }
  body#appDashboard.l2v2 .appAuth.sidebar-active .l2v2-side .sbMenu > li:nth-child(6){ transition-delay:.23s; }
  body#appDashboard.l2v2 .appAuth.sidebar-active .l2v2-side .sbMenu > li:nth-child(7){ transition-delay:.26s; }
  body#appDashboard.l2v2 .appAuth.sidebar-active .l2v2-side .sbMenu > li:nth-child(8){ transition-delay:.29s; }
  body#appDashboard.l2v2 .appAuth.sidebar-active .l2v2-side .sbMenu > li:nth-child(9){ transition-delay:.32s; }
  body#appDashboard.l2v2 .appAuth.sidebar-active .l2v2-side .sbMenu > li:nth-child(10){ transition-delay:.35s; }
  body#appDashboard.l2v2 .appAuth.sidebar-active .l2v2-side .sbMenu > li:nth-child(11){ transition-delay:.38s; }
  body#appDashboard.l2v2 .appAuth.sidebar-active .l2v2-side .sbMenu > li:nth-child(12){ transition-delay:.41s; }
  body#appDashboard.l2v2 .appAuth.sidebar-active .l2v2-side .sbMenu > li:nth-child(13){ transition-delay:.44s; }
  body#appDashboard.l2v2 .appAuth.sidebar-active .l2v2-side .sbMenu > li:nth-child(14){ transition-delay:.47s; }
  body#appDashboard.l2v2 .appAuth.sidebar-active .l2v2-side .sbMenu > li:nth-child(n+15){ transition-delay:.50s; }
}

/* accessibility: no motion for users who ask for none */
@media (prefers-reduced-motion: reduce){
  body#appDashboard.l2v2 .appAuth .appSidebar.l2v2-side,
  body#appDashboard.l2v2 .appAuth::before,
  body#appDashboard.l2v2 .appAuth .l2v2-side .sb-user,
  body#appDashboard.l2v2 .appAuth .l2v2-side .sbMenu > li{ transition: none !important; }
  body#appDashboard.l2v2 .appAuth .l2v2-side .sb-user,
  body#appDashboard.l2v2 .appAuth .l2v2-side .sbMenu > li{ opacity:1 !important; transform:none !important; }
}

/* ===== U114 — LIGHT-MODE FIX: /blog (P0, user's ปัญหาใหญ่) + /tickets dropdown =====
   Root cause (blog/blogpost): blog.twig hardwires `class="blogx dark"` for logged-in users
   (off user['auth'], NOT off the colour mode), so html.light never reached the content; and the
   `.l2v2 .bx-hero` + page-bg overrides pinned dark with !important and had no html.light variant.
   Fix: under html.light, flip the .blogx.dark token set to the light palette and revert the
   dashboard dark-hero override back to the theme's native YELLOW hero (its text is already dark).
   This makes /blog follow the colour toggle like the rest of the dashboard. */

/* blog token set → light (members carry .blogx.dark) */
html.light .blogx.dark{
  --bx-card:#ffffff; --bx-soft:#fffaef; --bx-line:rgba(12,21,27,.1); --bx-ink:#0c151b; --bx-dim:#6b7280;
}
html.light .l2v2 .lk-land.l2v2-page-blog{ background:#f5f6f8 !important; }

/* revert the dashboard DARK hero → base YELLOW hero (33376) with native dark text */
html.light .l2v2 .bx-hero{ background:linear-gradient(120deg,#ffc107,#ffd451 55%,#ffbe00) !important; color:#0c151b !important; }
html.light .l2v2 .bx-hero h1{ color:#0c151b !important; }
html.light .l2v2 .bx-hero p{ color:#3a2f00 !important; }
html.light .l2v2 .bx-hero h1 em{ background:#0c151b !important; color:#ffc107 !important; }
html.light .l2v2 .bx-badge{ background:#0c151b !important; color:#ffc107 !important; box-shadow:none !important; }
html.light .l2v2 .bx-search{ background:#ffffff !important; border:0 !important; box-shadow:0 14px 28px rgba(0,0,0,.1) !important; }
html.light .l2v2 .bx-search input{ color:#0c151b !important; }
html.light .l2v2 .bx-search input::placeholder{ color:#9aa3ad !important; }

/* dark-specific accent rules → restore the light/guest accents under html.light */
html.light .blogx.dark .bx-tag{ background:rgba(255,193,7,.2) !important; color:#ca8a04 !important; }
html.light .blogx.dark .bx-cat.act{ background:#0c151b !important; color:#ffc107 !important; border-color:#0c151b !important; }
html.light .blogx.dark .bx-cat:not(.act) .c{ background:rgba(0,0,0,.12) !important; }
html.light .blogx.dark .bx-card h3 a:hover{ color:#ca8a04 !important; }
html.light .blogx.dark .bx-card .bx-go{ color:#ca8a04 !important; }
html.light .blogx.dark .bx-pager .act{ background:#0c151b !important; color:#ffc107 !important; border-color:#0c151b !important; }

/* /tickets — custom dropdown popup .cd-list hardcoded #0f1a23, no light override → dark-on-dark options */
html.light .l2v2 .l2v2-page-tickets .cd-list{ background:#ffffff !important; border-color:var(--line) !important; }

/* ===== U115 — LIGHT-MODE FIX: /how-it-works (.px*) + /terms hero + /blogpost promo =====
   Same bug class as blog: the `.l2v2 .px*` block (34585-34632) hard-pins the how-it-works page
   dark with !important and had zero html.light coverage (terms shares .px-hero → its hero was
   dark in light mode too). Revert to the page's native light/yellow design under html.light. */

html.light .l2v2 .px{ color:var(--ink); }
/* hero (dark → native yellow) — also fixes the terms.twig hero band */
html.light .l2v2 .px-hero{ background:linear-gradient(180deg,#ffd451,#ffbe00) !important; }
html.light .l2v2 .px-hero h1{ color:#0c151b !important; }
html.light .l2v2 .px-hero .sub{ color:#7a5c00 !important; }
html.light .l2v2 .px-badge{ background:#0c151b !important; color:#ffc107 !important; box-shadow:none !important; }
html.light .l2v2 .px-eye{ color:#ca8a04 !important; }
html.light .l2v2 .px-sh h2, html.light .l2v2 .px-wtext h3, html.light .l2v2 .px-final h2{ color:#0c151b !important; }
html.light .l2v2 .px-sh p{ color:var(--inkDim) !important; }
/* cards (dark → white) */
html.light .l2v2 .px .card, html.light .l2v2 .px .card-header,
html.light .l2v2 .px-step, html.light .l2v2 .px-stat, html.light .l2v2 .px-fc, html.light .l2v2 .px-pc, html.light .l2v2 .px-plat, html.light .l2v2 .px-fq{
  background:#ffffff !important; border:1px solid var(--line) !important; box-shadow:0 12px 30px rgba(12,21,27,.08) !important;
}
html.light .l2v2 .px-step h3, html.light .l2v2 .px-fc h4, html.light .l2v2 .px-fq h4, html.light .l2v2 .px-stat .v, html.light .l2v2 .px-plat span, html.light .l2v2 .px-pc{ color:#0c151b !important; }
html.light .l2v2 .px-step p, html.light .l2v2 .px-fc p, html.light .l2v2 .px-fq p, html.light .l2v2 .px-stat .l{ color:var(--inkDim) !important; }
html.light .l2v2 .px-wtext li{ color:var(--ink2) !important; }
html.light .l2v2 .px-pc i{ color:#ca8a04 !important; }
html.light .l2v2 .px-step .n{ background:#0c151b !important; color:#ffc107 !important; }
html.light .l2v2 .px-step .meta{ background:rgba(255,193,7,.14) !important; color:#7a5c00 !important; border-color:rgba(255,193,7,.4) !important; }
html.light .l2v2 .px-btn.out{ color:#0c151b !important; border-color:rgba(12,21,27,.25) !important; }
html.light .l2v2 .px-btn.out:hover{ background:rgba(255,193,7,.14) !important; color:#0c151b !important; }
/* visual placeholder */
html.light .l2v2 .px-wvis{ background-color:#f5f6f8 !important; border-color:var(--line) !important; }
html.light .l2v2 .px-wvis .tag{ background:#ffffff !important; color:var(--inkDim) !important; border-color:var(--line) !important; }
html.light .l2v2 .px-wtext .k{ color:#ca8a04 !important; }
/* final CTA band (dark → yellow) */
html.light .l2v2 .px-final{ background:linear-gradient(180deg,#ffd451,#ffbe00) !important; }
html.light .l2v2 .px-final p{ color:#3a2f00 !important; }
html.light .l2v2 .px-legal-note{ background:rgba(255,193,7,.12) !important; color:#3a2f00 !important; border-color:rgba(255,193,7,.4) !important; }

/* blogpost: .bxa-promo is a hardcoded dark gradient (not a --bx token consumer) → light */
html.light .l2v2 .bxa-promo{ background:linear-gradient(120deg,#ffffff,#f5f6f8) !important; color:#0c151b !important; border:1px solid var(--line) !important; }
html.light .l2v2 .bxa-promo *{ color:#0c151b !important; }

/* ===== U116 — dashboard .card-header title contrast in DARK mode =====
   .l2v2 .card-header has background:var(--side) (dark in dark mode) but its h2/h3/.card-title was
   pinned color:var(--brandText) (#0c151b, mode-agnostic) → near-black title on the dark header in
   dark mode (e.g. neworder "สั่งงาน / Place Order"). Use --ink so the title follows the mode.
   Light mode keeps #0c151b-on-white via the original rule (unchanged). */
html.dark .l2v2 .l2v2-content .card-header h2,
html.dark .l2v2 .l2v2-content .card-header h3,
html.dark .l2v2 .l2v2-content .card-header .card-title{ color: var(--ink) !important; }

/* ===== U117 — consistent, visible modal close (✕) across all modals =====
   Audit + live test: BS5 .btn-close renders blank under the theme's BS4 CSS (measured 16x6px,
   background:none, no text) — an invisible smudge that DOES close (data-dismiss works, before:true
   → after:false verified) but looks broken/inconsistent vs the custom .m-close / .nwo close buttons.
   Give every modal close control ONE rounded ✕ button. Pure styling — does not touch the
   close mechanism (data-dismiss / data-bs-dismiss / onclick all keep working). */
.l2v2 .modal .btn-close,
.l2v2 .modal .close,
.l2v2 .modal-wrapper .m-close,
.l2v2 .nwo-custom-modal-close{
  width:34px !important; height:34px !important; min-width:34px !important; border-radius:10px !important;
  padding:0 !important; margin:0 !important; opacity:1 !important;
  background:var(--side2) !important; border:1px solid var(--line) !important;
  box-shadow:none !important; color:var(--inkDim) !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  font-size:0 !important; line-height:1 !important; cursor:pointer; transition:.14s ease; flex-shrink:0;
}
.l2v2 .modal .btn-close::before,
.l2v2 .modal .close::before,
.l2v2 .modal-wrapper .m-close::before,
.l2v2 .nwo-custom-modal-close::before{
  content:"\00d7"; font-size:22px !important; line-height:1; color:inherit; font-weight:400;
}
/* hide any inner glyph/text (BS4 .close has a <span>×</span>) → no double-× */
.l2v2 .modal .close > *,
.l2v2 .modal-wrapper .m-close > *,
.l2v2 .nwo-custom-modal-close > *{ display:none !important; }
.l2v2 .modal .btn-close:hover,
.l2v2 .modal .close:hover,
.l2v2 .modal-wrapper .m-close:hover,
.l2v2 .nwo-custom-modal-close:hover{ background:var(--line) !important; color:var(--ink) !important; }

/* ===== U118 — /blog (logged-in) gutter aligned to the standard dashboard page box =====
   blog renders inside `.lk-land.l2v2-page-blog` — the GUEST landing namespace (.lk-land), not the
   standard `.appContent.l2v2-content`. Its logged-in padding (318 / 44 / 104) differed from every
   other dashboard page (.appContent = 310 / 30 / 110), so the content sat in a different gutter
   ("ใช้พื้นที่ไม่เท่าเมนูอื่นๆ" — the guest .lk-land padding bleeding in). Pin the logged-in desktop
   blog to the same box as orders/refunds/updates. (Mobile blog padding left untouched.) */
@media (min-width:992px){
  body#appDashboard.l2v2 .lk-land.l2v2-page-blog{
    padding-left:310px !important; padding-right:30px !important; padding-top:110px !important;
  }
}

/* ===== U119 — mode-aware sidebar logo + footer lion mark =====
   Sidebar: light mode (default, white sidebar) keeps the current dark-text logo (site['logo']);
   dark mode swaps to the white-text logo so it reads on the dark sidebar. Footer: the "L" letter
   mark → the lion icon. */
.l2v2 .l2v2-side .sb-top .logo-dark{ display:none; }
html.dark .l2v2 .l2v2-side .sb-top .logo-light{ display:none !important; }
html.dark .l2v2 .l2v2-side .sb-top .logo-dark{ display:block !important; }
/* footer lion mark replaces the letter box */
.yp-foot .brand .mark{ background:transparent !important; box-shadow:none !important; border:0 !important; padding:0 !important; width:auto !important; height:auto !important; min-width:0 !important; }
.yp-foot .brand .mark .mark-img{ width:46px !important; height:46px !important; object-fit:contain; display:block; border-radius:12px; }

/* U119b — footer lion mark fix: the .mark box was only ~24px wide (old "L" letter-box width) with
   overflow:hidden → it CLIPPED the 46px lion (looked squished/บีบ). The img itself is fine (46x46
   contain). Pin .mark to a fixed 46x46 square, no flex-shrink, overflow visible. */
.yp-foot .brand .mark{
  width:46px !important; height:46px !important; min-width:46px !important; max-width:46px !important;
  flex:0 0 46px !important; overflow:visible !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  background:transparent !important; box-shadow:none !important; border:0 !important; padding:0 !important;
}
.yp-foot .brand .mark .mark-img{ width:46px !important; height:46px !important; object-fit:contain !important; }

/* U119c — kill the old "L" badge's decorative shine pseudo (.mark::after = 25x101px gradient bar)
   that showed as a gray metallic streak behind the new lion icon. */
.yp-foot .brand .mark::after,
.yp-foot .brand .mark::before{ display:none !important; content:none !important; background:none !important; }

/* ===== U120 — neworder MOBILE: compact summary + sticky bottom submit bar (option A) =====
   Desktop unchanged (.v15-mbar is a plain block wrapping total+submit in the sticky summary).
   Mobile: the big summary forced a long scroll to reach สั่งงาน. Now hide the detail rows already
   shown in the form above (service / start / price-1000 / subtotal / note) → card shrinks to
   header + quantity; lift the total + submit into a FIXED bottom bar above the floating mobile nav
   so สั่งงาน is always one tap away. Reuses #v15s-total (live) + #v15s-submit (mirrors real submit)
   → no new JS. */
@media (max-width:991px){
  #v15-sum .v15-sline:has(#v15s-svc),
  #v15-sum .v15-sline:has(#v15s-start),
  #v15-sum .v15-sline:has(#v15s-unit),
  #v15-sum .v15-sline:has(#v15s-gross),
  #v15-sum .v15-sum-note{ display:none !important; }

  #v15-sum .v15-mbar{
    position:fixed !important; left:0 !important; right:0 !important;
    bottom: calc(94px + env(safe-area-inset-bottom)) !important;
    z-index:1036 !important; margin:0 !important;
    display:flex !important; align-items:center !important; gap:12px !important;
    padding:10px 14px !important;
    background:var(--side) !important; border-top:1px solid var(--line) !important;
    box-shadow:0 -12px 30px rgba(0,0,0,.30) !important;
  }
  #v15-sum .v15-mbar .v15-total{
    flex:1 1 auto !important; margin:0 !important; padding:4px 10px !important; min-width:0 !important;
    display:flex !important; flex-direction:column !important; align-items:flex-start !important; gap:0 !important;
    background:transparent !important; border:0 !important; box-shadow:none !important;
  }
  #v15-sum .v15-mbar .v15-total .k{ font-size:10.5px !important; color:var(--inkDim) !important; margin:0 !important; }
  #v15-sum .v15-mbar .v15-total .vv{ font-size:22px !important; line-height:1.05 !important; }
  #v15-sum .v15-mbar #v15s-submit{
    flex:0 0 auto !important; width:auto !important; margin:0 !important; padding:13px 26px !important;
    font-size:15px !important; white-space:nowrap !important;
  }
  /* order page content clears the fixed bar (bar zone ~ up to 160px from bottom) */
  body#appDashboard.l2v2 .l2v2-page-dashboard .appContent{ padding-bottom:172px !important; }
}

/* ===== U120b — neworder mobile submit bar: floating pill above the nav (not a flat edge bar) =====
   Real-phone check: the flat full-width bar sat right on top of the floating nav's elevated cart FAB
   (cluttered). Make the submit bar a floating rounded pill with the SAME side margins as the nav
   pill, lifted to clear the FAB — so the submit pill + nav pill read as a cohesive floating stack. */
@media (max-width:991px){
  #v15-sum .v15-mbar{
    left:12px !important; right:12px !important;
    bottom: calc(104px + env(safe-area-inset-bottom)) !important;
    border:1px solid var(--line) !important; border-radius:18px !important;
    box-shadow:0 18px 44px rgba(0,0,0,.42) !important;
    padding:9px 10px 9px 16px !important;
  }
  #v15-sum .v15-mbar .v15-total{ background:transparent !important; border:0 !important; box-shadow:none !important; }
  #v15-sum .v15-mbar .v15-total .k,
  #v15-sum .v15-mbar .v15-total .vv{ text-decoration:none !important; border:0 !important; }
  /* a touch more bottom clearance so the last field isn't hidden behind the lifted pill */
  body#appDashboard.l2v2 .l2v2-page-dashboard .appContent{ padding-bottom:184px !important; }
}

/* ===== U120c — neworder mobile: drop the redundant summary card entirely =====
   UX analysis: on mobile the form (service/link/quantity) is one scroll above; a "summary" that
   only repeats the quantity the user just typed confirms nothing. The single submit-time fact that
   isn't trivially in view = the price — and that already lives in the fixed .v15-mbar. So the card
   is pure noise: hide it completely (header + rows + note + the card chrome). Keep ONLY the fixed
   .v15-mbar (total + submit) as the sole bottom summary+action. .v15-sum must stay display:block
   (not none) so its position:fixed child .v15-mbar still renders. */
@media (max-width:991px){
  #v15-sum{ background:transparent !important; border:0 !important; box-shadow:none !important; padding:0 !important; margin:0 !important; min-height:0 !important; }
  #v15-sum .sh,
  #v15-sum .v15-sum-body > .v15-sline,
  #v15-sum .v15-sum-note{ display:none !important; }
  #v15-sum .v15-sum-body{ padding:0 !important; }
}

/* ===== U120d — neworder mobile: EXPANDABLE bottom-sheet summary + hide redundant #charge =====
   Supersedes the plain bar (U120/b/c). The summary is a fixed bottom SHEET: collapsed = total +
   chevron + สั่งซื้อ (one tap to order); tap the chevron → the full desktop detail (service/start/
   qty/price-1000/subtotal/member-discount/note) slides up animated. The engine's readonly #charge
   "ยอดชำระ" field is hidden (stays in DOM → engine + #v15s-total mirror still work). */
.v15-expand{ display:none; }   /* desktop: no chevron (sheet is mobile-only) */
@media (max-width:991px){
  body#appDashboard.l2v2 .l2v2-page-dashboard .mb-4:has(> #charge){ display:none !important; }

  #v15-sum{ background:transparent !important; border:0 !important; box-shadow:none !important; padding:0 !important; margin:0 !important; min-height:0 !important; }
  #v15-sum .sh{ display:none !important; }

  #v15-sum .v15-sum-body{
    position:fixed !important; left:10px !important; right:10px !important;
    bottom: calc(100px + env(safe-area-inset-bottom)) !important;
    z-index:1037 !important; margin:0 !important; padding:0 !important;
    display:flex !important; flex-direction:column !important; overflow:hidden !important;
    background:var(--side) !important; border:1px solid var(--line) !important; border-radius:20px !important;
    box-shadow:0 20px 50px rgba(0,0,0,.45) !important;
  }
  #v15-sum .v15-detail{
    max-height:0 !important; opacity:0 !important; overflow-y:auto !important; padding:0 16px !important; margin:0 !important;
    transition:max-height .4s cubic-bezier(.32,.72,0,1), opacity .3s ease, padding .4s cubic-bezier(.32,.72,0,1) !important;
  }
  #v15-sum.open .v15-detail{ max-height:55vh !important; opacity:1 !important; padding:14px 16px 6px !important; }
  #v15-sum .v15-detail .v15-sum-note{ display:flex !important; margin-top:12px !important; }

  #v15-sum .v15-mbar{
    position:static !important; left:auto !important; right:auto !important; bottom:auto !important;
    display:flex !important; align-items:center !important; gap:10px !important;
    margin:0 !important; padding:10px 10px 10px 12px !important; border:0 !important; border-radius:0 !important;
    background:transparent !important; box-shadow:none !important;
  }
  #v15-sum.open .v15-mbar{ border-top:1px solid var(--line) !important; }
  #v15-sum .v15-expand{
    display:inline-flex !important; flex:0 0 auto !important; width:38px !important; height:38px !important; padding:0 !important; margin:0 !important;
    border-radius:11px !important; background:var(--side2) !important; border:1px solid var(--line) !important;
    color:var(--inkDim) !important; align-items:center !important; justify-content:center !important;
    font-size:22px !important; line-height:1 !important; transition:transform .3s ease, background .15s ease, color .15s ease !important; cursor:pointer;
  }
  #v15-sum.open .v15-expand{ transform:rotate(180deg) !important; color:var(--ink) !important; background:var(--line) !important; }
  #v15-sum .v15-mbar .v15-total{
    flex:1 1 auto !important; margin:0 !important; padding:2px 2px !important; min-width:0 !important;
    display:flex !important; flex-direction:column !important; align-items:flex-start !important; gap:0 !important;
    background:transparent !important; border:0 !important; box-shadow:none !important;
  }
  #v15-sum .v15-mbar .v15-total .k{ font-size:10px !important; color:var(--inkDim) !important; }
  #v15-sum .v15-mbar .v15-total .vv{ font-size:21px !important; line-height:1.05 !important; }
  #v15-sum .v15-mbar #v15s-submit{ flex:0 0 auto !important; width:auto !important; margin:0 !important; padding:13px 24px !important; font-size:15px !important; white-space:nowrap !important; }

  body.v15-sheet-open::after{ content:'' !important; position:fixed !important; inset:0 !important; background:rgba(8,12,20,.5) !important; z-index:1036 !important; pointer-events:none !important; }
}

/* U120e — fix: the expanded sheet showed only "จำนวน". U120's earlier `:has()` row-hide
   (#v15-sum .v15-sline:has(#v15s-svc/...)) still matched the rows after they moved into .v15-detail
   (:has matches at any depth), hiding service/start/price/subtotal. Re-show them inside the sheet
   detail (higher specificity than U120). The disc row stays engine-controlled (inline display:none). */
@media (max-width:991px){
  #v15-sum .v15-detail .v15-sline:has(#v15s-svc),
  #v15-sum .v15-detail .v15-sline:has(#v15s-start),
  #v15-sum .v15-detail .v15-sline:has(#v15s-unit),
  #v15-sum .v15-detail .v15-sline:has(#v15s-gross){ display:flex !important; }
}

/* U120f — #charge ("ยอดชำระ", engine readonly) duplicates the summary's "ยอดที่ต้องชำระ" on DESKTOP too
   (verified: both visible at 1440). Hide it on ALL viewports → one total, living in the summary card.
   #charge stays in the DOM so the engine writes to it + #v15s-total mirror reads it (nothing breaks). */
body#appDashboard.l2v2 .l2v2-page-dashboard .mb-4:has(> #charge){ display:none !important; }

/* ===== U121 — stat cards: remove the glowing colored sparkline wave + tidy the corner badge =====
   User disliked the "แสงเรืองๆ" (the colored .cb-content::after wave glows hard on the dark cards).
   Remove it (cards stay clean: icon ring + text). Also nudge the top-right badge (.nwo-card-badge-wrap)
   a touch further inside so it sits cleanly within the rounded corner instead of hugging the edge. */
.l2v2 .l2v2-content .card.card-border.card-no-box .cb-content::after{ display:none !important; }
.l2v2 .l2v2-content .nwo-card-badge-wrap{ top:16px !important; right:16px !important; }

/* ===== U122 — undo wrong glow-removal + remove the REAL glow (active tab) + fix check-in modal =====
   A) U121 removed the stat-card sparkline wave by mistake — restore it (the user meant a different glow).
   B) The glow the user disliked = the active tab button (.nwoNavLink.active "เมนูสั่งงาน") yellow halo
      box-shadow:0 6px 16px rgba(255,193,7,.14) (style.css:34461). Replace with a subtle neutral shadow.
   C) Check-in modal hero (.ci-modal-header.nom-ci-head): its text was built for a DARK header (title #fff,
      caption/sub var(--inkDim) grey, streak number #ffc107 yellow) but the header rendered YELLOW (the dark
      gradient was lost) → everything low-contrast / unreadable. Restore a dark ember hero so the existing
      text reads. */
/* A — restore the stat-card wave */
.l2v2 .l2v2-content .card.card-border.card-no-box .cb-content::after{ display:block !important; }
/* B — kill the active-tab yellow glow */
.l2v2 .l2v2-page-dashboard .nwo-cat-btn.active,
.l2v2 .l2v2-page-dashboard .nwoNavLink.active{ box-shadow:0 2px 8px rgba(0,0,0,.18) !important; }
/* C — check-in hero back to a dark (fire/ember) header so its light text is readable, both modes */
.ci-modal-header.nom-ci-head,
html.light .ci-modal .ci-modal-header.nom-ci-head{
  background:linear-gradient(160deg,#2c1d10 0%,#16120f 52%,#0c141b 100%) !important;
}
.ci-modal-header.nom-ci-head .nom-ci-title{ color:#ffffff !important; }
.ci-modal-header.nom-ci-head .nom-ci-sub,
.ci-modal-header.nom-ci-head .nom-streak-cap{ color:#c5cdd6 !important; opacity:1 !important; }
.ci-modal-header.nom-ci-head .nom-streak-num{ color:#ffc107 !important; }
.ci-modal-header.nom-ci-head .nom-x.ci-close-btn{ color:#fff !important; }

/* ===== U123 — check-in hero fix (the real winner is an ID rule) =====
   #checkinModal .ci-modal-header (style.css:31184, id-specificity 1,1,0 + !important) forces a YELLOW
   gradient, overriding the dark .nom-ci-head design — but the nom text stayed dark-bg colors (title
   #fff, cap/sub grey, streak #ffc107) → light text on yellow = unreadable ("สีเหมือนลืม css"). U122's
   class-only override (0,2,0) lost to the id. Beat it with #checkinModal-prefixed selectors: restore the
   dark ember hero so the existing light text reads (both modes). */
#checkinModal .ci-modal-header.nom-ci-head,
html.light #checkinModal .ci-modal-header.nom-ci-head{
  background: radial-gradient(120% 90% at 50% -10%, rgba(255,193,7,.22), transparent 60%), linear-gradient(180deg,#16242f,#0c141b) !important;
}
#checkinModal .ci-modal-header.nom-ci-head .nom-ci-title{ color:#ffffff !important; }
#checkinModal .ci-modal-header.nom-ci-head .nom-ci-sub,
#checkinModal .ci-modal-header.nom-ci-head .nom-streak-cap{ color:#c5cdd6 !important; opacity:1 !important; }
#checkinModal .ci-modal-header.nom-ci-head .nom-streak-num,
html.light #checkinModal .ci-modal-header.nom-ci-head .nom-streak-num{ color:#ffc107 !important; }
#checkinModal .ci-modal-header.nom-ci-head .nom-x.ci-close-btn{ color:#ffffff !important; }

/* ===== U124 — corner badges float OVER the top-right edge + level-up the points card =====
   Clarified intent: the ข้อมูลสมาชิก / ใช้แต้ม badges should FLOAT poking up over each card's
   top-right corner (like the old theme), not tuck inside (U121 had it backwards). Let the badge
   escape the card (overflow:visible; the wave stays clipped by .cb-content's own overflow) and lift
   it above the top edge. Plus: the แต้มสะสม (cnb-4) card now has a value strip (baht + gold meter)
   to match the ระดับสมาชิก (cnb-3) card's richness. */
.l2v2 .l2v2-content .card.card-border.card-no-box.cnb-3,
.l2v2 .l2v2-content .card.card-border.card-no-box.cnb-4,
.l2v2 .l2v2-page-dashboard .card.cnb-3.nom-mcard{ overflow:visible !important; }
.l2v2 .l2v2-content .nwo-card-badge-wrap{ top:-11px !important; right:12px !important; }
/* points card value strip — gold accent (decorative parity with the level card progress) */
.l2v2 .l2v2-content .cnb-4 .nom-pts-strip{ margin-top:14px; }
.l2v2 .l2v2-content .cnb-4 .nom-pts-strip .fill{ background:linear-gradient(90deg,#ffc107,#ffce3a) !important; }
.l2v2 .l2v2-content .cnb-4 .nom-pts-strip .lbl b{ color:#ffc107 !important; }

/* ===== U125 — check-in day-7 "grand reward" tile: golden frame + show the bonus value =====
   Day 7 showed only a chest icon → users couldn't tell how many points it gives (the value IS known:
   basePts + day7_bonus). Now the tile shows the chest + "+X" and gets a special golden frame so it
   reads as the climax reward of the streak. */
#checkinModal .nom-day.reward .coin,
#ci-cycle-grid .nom-day.reward .coin{
  display:flex !important; flex-direction:column !important; gap:0 !important; row-gap:1px !important;
  background:radial-gradient(120% 120% at 50% 0%, rgba(255,193,7,.24), rgba(255,193,7,.05)) !important;
  border:1.5px solid #ffc107 !important;
  box-shadow:0 0 0 3px rgba(255,193,7,.14), 0 6px 16px rgba(255,170,0,.22) !important;
}
#checkinModal .nom-day.reward .coin svg{ width:18px !important; height:18px !important; }
#checkinModal .nom-day.reward .coin .d7rew{ font-size:9.5px !important; font-weight:800 !important; color:#ffc107 !important; line-height:1 !important; }
#checkinModal .nom-day.reward .d{ color:#ffc107 !important; font-weight:800 !important; }

/* ===== U126 — instant theme switch (kill the slow fade/flicker) + lighter mobile-nav blur =====
   Cause (user was right — "css advance ไป"): the broad `transition:all .3s` on cards/buttons made
   every colour ANIMATE on a light/dark switch (slow), and the mobile nav's backdrop-filter:blur(30px)
   saturate(180%) re-rendered expensively as the page behind it recoloured (flicker on mobile GPUs).
   The layout.twig observer adds html.theme-switching during a switch → these rules make it instant. */
html.theme-switching,
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after{ transition:none !important; }
/* trim the heavy nav blur (30px/180% → 14px/140%) — much cheaper to recomposite on theme change */
@media (max-width:991px){
  .l2v2 .my-mobile-navbar .mobile-navbar-content{
    -webkit-backdrop-filter:blur(14px) saturate(140%) !important;
    backdrop-filter:blur(14px) saturate(140%) !important;
  }
}

/* ===== U127 — services filter dropdown: category icons (match neworder + si-header) ===== */
/* dropdown items had text only; categories already carry category['icon'] (used in .si-header).
   Render that icon in each item; align icon + text in a flex row. Icon inherits text color
   (#fff) so remix icons match, while emoji/image keep their own colors — same as .si-header. */
.services-filter-dropdown .dropdown-item{
  display:flex; align-items:center; gap:10px;
}
.services-filter-dropdown .dd-cat-ic{
  flex:0 0 20px; width:20px; font-size:17px; line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
  text-align:center; opacity:.92;
}
.services-filter-dropdown .dd-cat-ic-img{
  flex:0 0 20px; width:20px; height:20px; object-fit:contain; border-radius:4px;
}
.services-filter-dropdown .dd-cat-tx{
  flex:1 1 auto; min-width:0; white-space:normal; overflow-wrap:anywhere;
}

/* ===== U128 — check-in day tiles: Apple-grade flat redesign (de-clutter day-7) =====
   Image #37: day-7 crammed a boxy treasure-chest SVG ON TOP of the "+4" (reads as
   "a box on a number") and U125 wrapped it in a 3px gold glow ring; meanwhile every
   tile used a different glowy treatment (done = gold glow, day-7 = halo). Elevate to
   ONE calm, flat system — hairline borders, no colored glow halos, the reward VALUE as
   the hero. Day-7 is now the climax via a flat gold tile + a small CROWN accent (not a
   box). JS (neworder.twig) now emits: future → .dval, day-7 → .d7ic crown + .d7rew. */

/* future-day reward value — crisp, consistent (replaces the old inline 11px) */
#checkinModal .nom-day .coin .dval{ font-size:12.5px; font-weight:800; letter-spacing:.01em; line-height:1; }

/* done tiles: keep the subtle gold gradient fill, but FLATTEN the colored glow */
#checkinModal .nom-day.done .coin{ box-shadow:none !important; }

/* day-7 climax: FLAT gold tile + hairline border, NO 3px glow ring; crown over value */
#checkinModal .nom-day.reward .coin,
#ci-cycle-grid .nom-day.reward .coin{
  display:flex !important; flex-direction:column !important;
  align-items:center !important; justify-content:center !important;
  gap:2px !important;
  background:rgba(255,193,7,.12) !important;
  border:1.5px solid #ffc107 !important;
  box-shadow:none !important;
}
#checkinModal .nom-day.reward .coin .d7ic{
  font-size:12px !important; line-height:1 !important; color:#ffc107 !important;
}
#checkinModal .nom-day.reward .coin .d7rew{
  font-size:13px !important; font-weight:800 !important; color:#ffc107 !important;
  letter-spacing:.01em !important; line-height:1 !important;
}
#checkinModal .nom-day.reward .d{ color:#ffc107 !important; font-weight:800 !important; }

/* light mode: gold-on-pale-gold has poor contrast → darker amber + a touch more fill */
html.light #checkinModal .nom-day.reward .coin{
  background:rgba(255,193,7,.18) !important; border-color:#e0a800 !important;
}
html.light #checkinModal .nom-day.reward .coin .d7ic,
html.light #checkinModal .nom-day.reward .coin .d7rew,
html.light #checkinModal .nom-day.reward .d{ color:#b45309 !important; }

/* mobile: keep the tighter tiles from cramping */
@media (max-width:760px){
  #checkinModal .nom-day .coin .dval{ font-size:11.5px; }
  #checkinModal .nom-day.reward .coin .d7ic{ font-size:11px !important; }
  #checkinModal .nom-day.reward .coin .d7rew{ font-size:11.5px !important; }
}

/* ===== U129 — neworder/subscription: theme the datetime "clear" (trash) button =====
   Image #38 (dark mode): the วันหมดอายุ (expiry) field's clear button rendered as a bare
   Bootstrap .btn-default — trash icon color #212529 (near-invisible on the dark theme) and
   the button was 66px tall vs the 50px input → floated to the right, misaligned, "unarranged".
   The engine markup is fixed: <div.input-group><input.datetime><span.input-group-btn>
   <button.clear-datetime><i.fa-trash-alt>. Scope by :has(.clear-datetime) so only the
   datetime-clear input-groups are touched. */
.l2v2 .input-group:has(.clear-datetime){ flex-wrap:nowrap !important; align-items:center !important; }
.l2v2 .input-group:has(.clear-datetime) > .form-control{ flex:1 1 auto; }
.l2v2 .input-group:has(.clear-datetime) .input-group-btn{
  display:flex !important; align-items:center; width:auto; margin-left:8px;
}
.l2v2 .input-group .clear-datetime{
  flex:0 0 50px; width:50px; height:50px; padding:0;
  display:flex !important; align-items:center; justify-content:center;
  background:var(--side2) !important; border:1px solid var(--line) !important;
  box-shadow:none !important; border-radius:13px;
  color:var(--inkDim) !important;
  transition:background .15s, color .15s, border-color .15s;
}
.l2v2 .input-group .clear-datetime:hover{
  background:rgba(255,77,79,.12) !important; border-color:rgba(255,77,79,.45) !important;
  color:#ff5b5b !important;
}
.l2v2 .input-group .clear-datetime .fa-trash-alt,
.l2v2 .input-group .clear-datetime .fa{ color:inherit !important; font-size:16px; line-height:1; }

/* ===== U130 — /orders mobile UI: stack the hero + readable cards + clear bottom nav =====
   Desktop is fine; mobile (image: 500px) looked "unfinished": the .pg-head hero kept its
   desktop flex ROW (icon + text + 2 buttons all on one line) with no ≤768 rule, so the text
   column was squished to ~120px and wrapped mid-word; the table→card td values had no labels
   (the ::before reads data-label, which the twig was missing → ID floated right, stats showed
   bare numbers); and the last card sat under the fixed mobile bottom-nav. */
@media (max-width:768px){
  /* hero: wrap so icon+title stay on row 1 (body gets the full remaining width, no mid-word
     break), and the actions drop to their own full-width row below. */
  .l2v2 .l2v2-content .pg-head{ flex-wrap:wrap; padding:18px; gap:14px 16px; }
  .l2v2 .l2v2-content .pg-head .ic-big{ width:52px; height:52px; font-size:23px; }
  .l2v2 .l2v2-content .pg-head .pg-head-body{ flex:1 1 auto; min-width:0; }
  .l2v2 .l2v2-content .pg-head .pg-head-body h1{ font-size:20px; }
  .l2v2 .l2v2-content .pg-head .pg-head-body p{ overflow-wrap:anywhere; }
  .l2v2 .l2v2-content .pg-head .right{
    margin-left:0; flex:1 1 100%; width:100%;
    display:grid; grid-template-columns:1fr 1fr; gap:10px;
  }
  .l2v2 .l2v2-content .pg-head .right .pg-btn{
    width:100%; justify-content:center; padding:12px 8px; box-shadow:none;
  }
}
/* clear the fixed mobile bottom-nav so the last order card isn't hidden under it */
@media (max-width:991px){
  .l2v2 .l2v2-page-orders{ padding-bottom:118px; }
}

/* ===== U131 — /orders: copy-ID + reorder action + desktop table FIT (no h-scroll) =====
   (1) order ID is now click-to-copy (reuses copyToClipboard + makeToast in script.js) → style
       the clickable chip + copy-icon affordance. (2) added a "สั่งซ้ำ" reorder action (→ neworder
       with select_service_id, mirrors BullLike) + removed the redundant "view link" eye (the link
       column is already a link). (3) desktop table overflowed its card (~1193px in a 1091px card →
       horizontal scroll, user "ต้องเลื่อนจอ"); switch to table-layout:fixed so it always fits. */

/* (1) clickable order-ID chip */
.l2v2 .l2v2-content .pg-tbl .id .oid-copy{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer; color:inherit;
  border-radius:8px; padding:2px 7px; margin:-2px -7px;
  transition:background .14s, color .14s, transform .1s;
}
.l2v2 .l2v2-content .pg-tbl .id .oid-copy i{ font-size:13px; opacity:.45; transition:opacity .14s; }
.l2v2 .l2v2-content .pg-tbl .id .oid-copy:hover{ background:rgba(255,193,7,.12); color:var(--brand); }
.l2v2 .l2v2-content .pg-tbl .id .oid-copy:hover i{ opacity:1; }
.l2v2 .l2v2-content .pg-tbl .id .oid-copy:active{ transform:scale(.96); }

/* (2) reorder action — subtle brand tint so the primary repeat action reads first */
.l2v2 .l2v2-content .pg-tbl .actions a.reorder{
  background:rgba(255,193,7,.14); border-color:rgba(255,193,7,.3); color:var(--brand);
}
.l2v2 .l2v2-content .pg-tbl .actions a.reorder:hover{
  background:var(--brand); color:var(--brandText); border-color:var(--brand);
}

/* (3) desktop: fixed layout = table always == card width, columns truncate, NO scroll */
@media (min-width:992px){
  .l2v2 .l2v2-content .pg-tbl-wrap{ overflow-x:hidden; }
  .l2v2 .l2v2-content .pg-tbl{ min-width:0; table-layout:fixed; }
  /* 8-col widths are ORDERS-specific — scope so other pg-tbl pages (refunds 4-col,
     affiliates 3, child_panel 5, updates 4) keep equal/auto distribution, not these. */
  .l2v2 .l2v2-page-orders .pg-tbl thead th:nth-child(1){ width:8%; }
  .l2v2 .l2v2-page-orders .pg-tbl thead th:nth-child(2){ width:23%; }
  .l2v2 .l2v2-page-orders .pg-tbl thead th:nth-child(3){ width:17%; }
  .l2v2 .l2v2-page-orders .pg-tbl thead th:nth-child(4){ width:7%; }
  .l2v2 .l2v2-page-orders .pg-tbl thead th:nth-child(5){ width:13%; }
  .l2v2 .l2v2-page-orders .pg-tbl thead th:nth-child(6){ width:10%; }
  .l2v2 .l2v2-page-orders .pg-tbl thead th:nth-child(7){ width:8%; }
  .l2v2 .l2v2-page-orders .pg-tbl thead th:nth-child(8){ width:14%; }
  /* service: allow wrap inside its fixed cell (don't force the column wider) */
  .l2v2 .l2v2-page-orders .pg-tbl tbody td:nth-child(2){ max-width:none; min-width:0; }
  .l2v2 .l2v2-page-orders .pg-tbl .pl{ min-width:0; }
  .l2v2 .l2v2-page-orders .pg-tbl .pl .srv-name{ min-width:0; word-break:break-word; }
  /* link: single-line ellipsis */
  .l2v2 .l2v2-page-orders .pg-tbl td.lk{ overflow:hidden; }
  .l2v2 .l2v2-page-orders .pg-tbl td.lk a{
    display:inline-flex; align-items:center; gap:4px; max-width:100%;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  /* a touch tighter so content breathes within fixed columns */
  .l2v2 .l2v2-content .pg-tbl thead th,
  .l2v2 .l2v2-content .pg-tbl tbody td{ padding-left:12px; padding-right:12px; }
  .l2v2 .l2v2-content .pg-tbl .actions{ gap:5px; flex-wrap:nowrap; }
  .l2v2 .l2v2-content .pg-tbl .actions a,
  .l2v2 .l2v2-content .pg-tbl .actions button{ width:30px; height:30px; font-size:13px; }
}

/* ===== U132 — /orders: kill letter-spacing on Thai headers (broke glyph composition) =====
   .pg-tbl th (and the mobile td::before labels) used letter-spacing for an English small-caps
   look. On Thai ("เลขที่ออเดอร์", "บริการ" …) letter-spacing detaches the stacked vowel/tone
   marks → the word reads like a different/broken font (user: "font ไม่เหมือนที่อื่น"). It only
   showed once the ID header changed from "ID" (English, fine) to Thai. Thai needs normal spacing. */
.l2v2 .l2v2-content .pg-tbl thead th{ letter-spacing:normal; }
@media (max-width:768px){
  .l2v2 .l2v2-content .pg-tbl tbody td::before{ letter-spacing:normal; text-transform:none; }
}

/* ===== U134 — mobile pg-tbl: enterprise grouped-LIST (kill "card-in-card") =====
   User: refunds/orders mobile looked like "การ์ดซ้อนการ์ด" (cards stacked inside a card).
   Probe confirmed: each row = a darker side2 card (radius 14 + border) nested inside the pg-card,
   plus the pill-tabs container is its own boxed card. Apple/SaaS pattern for a table on mobile is a
   single panel (the pg-card) holding a hairline-separated LIST — rows are flat entries, not cards. */
@media (max-width:768px){
  .l2v2 .l2v2-content .pg-tbl tbody tr{
    background:transparent !important; border:0 !important; border-radius:0 !important;
    box-shadow:none !important; margin:0 !important;
    padding:16px !important; border-bottom:1px solid var(--line) !important;
  }
  .l2v2 .l2v2-content .pg-tbl tbody tr:last-child{ border-bottom:0 !important; }
  .l2v2 .l2v2-content .pg-tbl tbody tr:hover{ background:transparent !important; }
  /* drop the per-entry internal hairlines (the entry divider is the only separator now) */
  .l2v2 .l2v2-content .pg-tbl tbody td:nth-child(1){ border-bottom:0 !important; margin-bottom:5px !important; padding-bottom:0 !important; }
  .l2v2 .l2v2-page-orders .pg-tbl tbody td:last-child{ border-top:0 !important; margin-top:8px !important; padding-top:2px !important; }
  /* filter pills: drop the boxed container so they sit flat (one less nested box) */
  .l2v2 .l2v2-content .pg-filter .pill-tabs{ background:transparent !important; border:0 !important; padding:0 !important; }
}

/* ===== U135 — /api: stack hero on mobile + fix akc-note flex-columns bug =====
   Audit (mobile 500px) found: (1) .api-pg-head is flex-wrap with .api-pg-body{flex:1;min-width:0}
   + .api-pg-actions (2 buttons ~303px) on the same row → body starved to 16px → the subtitle
   "RESTful API · v2 · …" wrapped one-word-per-line (vertical). (2) .akc-note was display:flex with
   raw text + <b> + text as children → each text RUN became a separate flex item → squished columns. */
/* (1) note: block + floated icon (so mixed inline text/<b> flows as one paragraph, all 4 states) */
.l2v2-page-api .akc-note{ display:block !important; }
.l2v2-page-api .akc-note i{ float:left; margin-right:10px; margin-top:2px; }
.l2v2-page-api .akc-note::after{ content:''; display:block; clear:both; }
/* (2) hero: drop the actions to a full-width row on mobile so the title/subtitle get full width */
@media (max-width:768px){
  .api-pg-head{ padding:18px; }
  .api-pg-head .api-pg-body{ flex:1 1 auto; }
  .api-pg-head .api-pg-actions{ flex:1 1 100%; width:100%; }
  .api-pg-head .api-pg-actions .api-pg-btn{ flex:1; justify-content:center; }
}

/* ===== U136 — neworder points modals "Solar" reskin (handoff bundle 15; overrides the old 14460 #pointsModal/#pointsRequestModal block via later+ID+!important) ===== */
/* ============================================================================
   LIKESTER — /neworder Points Modals "Solar" reskin   (U97)
   ----------------------------------------------------------------------------
   ก๊อปไป "ต่อท้ายสุด" ของ style.css — ไม่ต้องแก้ neworder.twig และไม่แตะ JS
   reskin 2 modal โดย scope ที่ ID (#pointsModal / #pointsRequestModal) → ชนะกฎเก่า
   (ซึ่งเป็น class-scoped) ด้วย specificity ทุก id/hook เดิมคงอยู่ครบ:
     #pointsSubject·handlePointsType, #points-balance-group/#points-cash-group,
     #nomPtsSlider, #exchangePointsInput, #exchangeCashPointsInput, ธนาคาร,
     #pointsSubmitBtn ฯลฯ — JS ทำงานต่อได้ปกติ
   ใช้ token l2v2 (--side/--line/--ink…) → สลับ light/dark อัตโนมัติ
   ============================================================================ */

/* ===== shared shell ===== */
#pointsModal .modal-content,
#pointsRequestModal .modal-content{
  background:var(--side) !important; border:1px solid var(--line) !important;
  border-radius:22px !important; overflow:hidden !important; padding:0 !important;
  box-shadow:0 36px 80px rgba(0,0,0,.5) !important;
}
#pointsModal .modal-header,
#pointsRequestModal .modal-header{
  position:relative; display:flex !important; align-items:center; gap:12px; padding:18px 22px !important;
  background:linear-gradient(95deg,#ffc107,#ffce3a 60%,#ffc107) !important;
  border:0 !important; border-radius:0 !important; overflow:hidden;
}
#pointsModal .modal-header::after,
#pointsRequestModal .modal-header::after{
  content:''; position:absolute; right:-30px; top:-44px; width:170px; height:170px;
  border-radius:50%; background:rgba(255,255,255,.2);
}
#pointsModal .modal-title,
#pointsRequestModal .modal-title{
  position:relative; z-index:1; margin:0 !important; display:flex !important; align-items:center; gap:12px; flex:1 1 auto; min-width:0;
  font-size:16.5px !important; font-weight:800 !important; color:#0c151b !important; line-height:1.25;
}
/* leading icon → chip */
#pointsModal .modal-title > i:first-child,
#pointsRequestModal .modal-title > i:first-child{
  width:42px; height:42px; margin:0 !important; border-radius:12px; flex:0 0 auto;
  display:grid; place-items:center; font-size:22px; background:rgba(12,21,27,.16); color:#0c151b;
}
#pointsModal .modal-header .btn-close,
#pointsRequestModal .modal-header .btn-close{
  position:relative; z-index:1; margin-left:auto; flex:0 0 auto; opacity:1; width:34px; height:34px; padding:0; border:0; cursor:pointer;
  background:rgba(12,21,27,.16) !important; background-image:none !important; border-radius:11px; display:grid; place-items:center;
}
#pointsModal .modal-header .btn-close::before,
#pointsRequestModal .modal-header .btn-close::before{ content:'\00d7'; font-size:22px; line-height:1; font-weight:700; color:#0c151b; }
#pointsModal .modal-header .btn-close:hover,
#pointsRequestModal .modal-header .btn-close:hover{ background:rgba(12,21,27,.3) !important; }
#pointsModal .modal-body,
#pointsRequestModal .modal-body{ padding:20px !important; }

/* ================= MODAL A — รายละเอียดการแลกแต้ม ================= */
#pointsModal .membership-banking-container{ display:block; }
#pointsModal .current-member-level{ text-align:center; margin:0 0 18px !important; display:block; }
#pointsModal .current-member-level .level-text{ font-size:12px; color:var(--inkDim); font-weight:600; display:block; }
#pointsModal .level-badge-display{
  display:inline-flex !important; align-items:center; gap:7px; margin-top:7px; padding:8px 20px;
  border-radius:999px; font-weight:800; font-size:14px; letter-spacing:.04em; color:#5a3e00 !important;
  background:linear-gradient(160deg,#ffe27a,#ffb300) !important; box-shadow:0 8px 20px rgba(255,170,0,.32);
}

#pointsModal .banking-cards-grid{
  display:grid !important; grid-template-columns:1fr 1fr !important; gap:11px !important; perspective:none !important;
}
/* การ์ดแต่ละระดับ = การ์ดข้อมูลแนวตั้ง (ล้มของเก่า: fixed height + 3D) */
#pointsModal .banking-card{
  position:relative !important; width:auto !important; max-width:none !important; height:auto !important;
  background:var(--side2) !important; border:1px solid var(--line) !important; border-radius:16px !important;
  padding:15px 14px !important; box-shadow:none !important; transform:none !important; perspective:none !important;
  transform-style:flat !important; cursor:default !important; transition:.16s ease !important; overflow:visible !important;
}
#pointsModal .banking-card:hover{ transform:translateY(-2px) !important; border-color:var(--line2) !important; box-shadow:0 10px 22px rgba(0,0,0,.18) !important; }
#pointsModal .banking-card .card-pattern,
#pointsModal .banking-card .card-chip{ display:none !important; }
#pointsModal .banking-card .card-content{ height:auto !important; padding:0 !important; display:block !important; }
#pointsModal .banking-card .card-header{ display:flex !important; align-items:center !important; gap:7px; margin-bottom:12px; }
#pointsModal .banking-card .card-tier{ display:flex; align-items:center; gap:7px; }
#pointsModal .banking-card .card-tier i{
  width:28px; height:28px; border-radius:8px; display:grid; place-items:center; font-size:15px;
  background:rgba(255,196,0,.14); color:#ffd152; filter:none !important;
}
html.light #pointsModal .banking-card .card-tier i{ color:#d99413; }
#pointsModal .banking-card .tier-name{ font-family:'Inter',sans-serif !important; font-weight:800 !important; font-size:14px !important; color:var(--ink) !important; letter-spacing:.02em; }
#pointsModal .banking-card .card-details{ display:flex !important; flex-direction:column !important; gap:9px !important; }
#pointsModal .banking-card .detail-item{ display:flex !important; align-items:center !important; justify-content:space-between !important; gap:8px; }
#pointsModal .banking-card .detail-item > i{ display:none !important; }
#pointsModal .banking-card .detail-info{ display:flex !important; flex-direction:row !important; align-items:center; justify-content:space-between; gap:8px; width:100%; }
#pointsModal .banking-card .detail-label{ font-size:11px !important; color:var(--inkDim) !important; white-space:nowrap; }
#pointsModal .banking-card .detail-value{ font-family:'Inter',sans-serif !important; font-weight:800 !important; font-size:12.5px !important; color:var(--ink) !important; white-space:nowrap; }
/* แถวแรก (อัตราแลก) เน้นทอง */
#pointsModal .banking-card .detail-item:first-child .detail-value{ color:#ffd152 !important; }
html.light #pointsModal .banking-card .detail-item:first-child .detail-value{ color:#d99413 !important; }

/* การ์ดระดับปัจจุบัน = ไฮไลต์เหลือง + ป้าย "ระดับของคุณ" */
#pointsModal .banking-card.active-banking-card{
  border-color:var(--brand) !important;
  background:linear-gradient(180deg,rgba(255,196,0,.12),var(--side2)) !important;
  box-shadow:0 0 0 1px rgba(255,196,0,.4),0 14px 30px rgba(255,170,0,.16) !important;
}
#pointsModal .banking-card.active-banking-card .card-tier i{ background:rgba(255,196,0,.24) !important; }
#pointsModal .banking-card.active-banking-card::before{
  content:'ระดับของคุณ'; position:absolute; top:-9px; left:50%; transform:translateX(-50%);
  font-size:9.5px; font-weight:800; letter-spacing:.04em; color:#0c151b; background:var(--brand);
  padding:3px 9px; border-radius:999px; white-space:nowrap; z-index:3;
}
html[lang="en"] #pointsModal .banking-card.active-banking-card::before{ content:'YOUR LEVEL'; }

/* กฎ 3 ข้อท้าย modal = note cards */
#pointsModal .status-description{ margin-top:18px !important; display:flex; flex-direction:column; gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
#pointsModal .status-description p{ margin:0 !important; padding:13px 15px !important; background:var(--side2);
  font-size:12px; color:var(--ink2); line-height:1.55; border-left:3px solid var(--brand); }
#pointsModal .status-description p:nth-child(2){ border-left-color:#ff6b6b; }
#pointsModal .status-description p:nth-child(3){ border-left-color:#28F1AA; }
#pointsModal .status-description p strong{ display:block; font-size:12.5px; color:var(--ink); margin-bottom:2px; }

/* desktop: ทั้ง 4 ระดับเรียงแถวเดียว + การ์ดโปร่งขึ้น (ไม่ประหยัดพื้นที่เกินไป) */
@media (min-width:768px){
  #pointsModal .modal-body{ padding:24px !important; }
  #pointsModal .banking-cards-grid{ grid-template-columns:repeat(4,1fr) !important; gap:14px !important; }
  #pointsModal .banking-card{ padding:18px 16px !important; }
  #pointsModal .banking-card .card-header{ margin-bottom:14px !important; }
  #pointsModal .banking-card .card-tier i{ width:32px !important; height:32px !important; font-size:17px !important; }
  #pointsModal .banking-card .tier-name{ font-size:15px !important; }
  #pointsModal .banking-card .card-details{ gap:11px !important; }
  #pointsModal .banking-card .detail-label{ font-size:11.5px !important; }
  #pointsModal .banking-card .detail-value{ font-size:13px !important; }
}
@media (max-width:420px){
  #pointsModal .modal-content,
  #pointsRequestModal .modal-content{ border-radius:18px !important; }
}

/* ================= MODAL B — แลกแต้ม (ฟอร์ม) ================= */
#pointsRequestModal .nwo-points-content{ background:var(--side) !important; border:1px solid var(--line) !important; border-radius:22px !important; }

/* summary card */
#pointsRequestModal .points-summary-card{
  background:var(--side2) !important; border:1px solid var(--line) !important; border-radius:16px !important;
  padding:16px !important; box-shadow:none !important; margin-bottom:16px !important;
}
#pointsRequestModal .points-summary-header{ font-size:12px; color:var(--inkDim); font-weight:700; display:flex; align-items:center; gap:7px; margin-bottom:12px; }
#pointsRequestModal .points-summary-header i{ color:#ffd152; }
#pointsRequestModal .points-summary-body{ display:flex !important; align-items:center; justify-content:space-between; gap:8px; }
#pointsRequestModal .points-stat{ text-align:center; flex:1; min-width:0; }
#pointsRequestModal .points-stat-value{ font-family:'Inter',sans-serif !important; font-weight:800 !important; font-size:22px !important; color:var(--ink) !important; line-height:1.05; }
#pointsRequestModal .points-cash-value{ color:#ffd152 !important; }
html.light #pointsRequestModal .points-cash-value{ color:#d99413 !important; }
#pointsRequestModal .points-stat-label{ font-size:10.5px; color:var(--inkDim); margin-top:3px; }
#pointsRequestModal .points-stat-divider{ width:32px; height:32px; border-radius:50%; display:grid; place-items:center; flex-shrink:0; background:var(--side); border:1px solid var(--line); color:#ffd152; }
#pointsRequestModal .points-summary-footer{ display:flex; gap:8px; margin-top:14px; }
#pointsRequestModal .points-level-badge,
#pointsRequestModal .points-rate-info{ flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
  padding:8px; border-radius:10px; background:var(--side); border:1px solid var(--line); font-size:11.5px; color:var(--ink2); }
#pointsRequestModal .points-level-badge i,
#pointsRequestModal .points-rate-info i{ color:#ffd152; }
#pointsRequestModal .points-level-badge strong,
#pointsRequestModal .points-rate-info strong{ color:var(--ink); font-family:'Inter',sans-serif; }

/* labels + form controls */
#pointsRequestModal .control-label{ font-size:12px !important; font-weight:700 !important; color:var(--ink2) !important; margin-bottom:8px !important; }
#pointsRequestModal .form-control{
  background:var(--side2) !important; border:1.5px solid var(--line) !important; border-radius:11px !important;
  color:var(--ink) !important; font-size:13.5px !important; padding:11px 13px !important; box-shadow:none !important;
}
#pointsRequestModal .form-control:focus{ border-color:var(--brand) !important; }
#pointsRequestModal select.form-control{ appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238b98b8'%3E%3Cpath d='M12 15l-5-5h10z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:18px; }

/* ===== ประเภทการใช้แต้ม = ปุ่ม (แทน dropdown) — ใช้คู่กับสคริปต์ neworder-points-typebuttons.js ===== */
#pointsRequestModal select#pointsSubject.pts-hidden{ display:none !important; }
#pointsRequestModal .pts-typebtns{ display:flex; flex-wrap:wrap; gap:8px; }
#pointsRequestModal .pts-typebtns .ptbtn{ display:inline-flex; align-items:center; gap:8px; padding:11px 15px; border-radius:12px; cursor:pointer;
  font-family:inherit; font-weight:700; font-size:12.5px; background:var(--side2); border:1.5px solid var(--line); color:var(--ink2); transition:.14s; }
#pointsRequestModal .pts-typebtns .ptbtn:hover{ border-color:var(--line2); }
#pointsRequestModal .pts-typebtns .ptbtn.on{ border-color:var(--brand); background:rgba(255,196,0,.12); color:var(--ink); }
#pointsRequestModal .pts-typebtns .ptbtn .pti{ width:26px; height:26px; border-radius:8px; display:grid; place-items:center; font-size:14px; flex-shrink:0; background:rgba(255,196,0,.14); color:#d99413; }
html:not(.light) #pointsRequestModal .pts-typebtns .ptbtn .pti{ color:#ffd152; }
#pointsRequestModal .pts-typebtns .ptbtn.on .pti{ background:var(--brand); color:#0c151b; }

/* Solar slider (ล้ม accent ม่วงเดิม) */
#pointsRequestModal .nom-ex{ background:var(--side2) !important; border:1px solid var(--line) !important; border-radius:14px !important; padding:14px 16px !important; }
#pointsRequestModal .nom-ex .slider{
  -webkit-appearance:none; appearance:none; width:100%; height:7px; border-radius:99px; accent-color:auto !important; outline:none;
  background:linear-gradient(90deg,var(--brand) var(--p,0%),var(--line) var(--p,0%)) !important;
}
#pointsRequestModal .nom-ex .slider::-webkit-slider-thumb{ -webkit-appearance:none; width:22px; height:22px; border-radius:50%; cursor:pointer; background:#fff; border:5px solid var(--brand); box-shadow:0 3px 9px rgba(0,0,0,.3); }
#pointsRequestModal .nom-ex .slider::-moz-range-thumb{ width:22px; height:22px; border:5px solid var(--brand); background:#fff; border-radius:50%; cursor:pointer; }
#pointsRequestModal .nom-ex .out .to{ color:#ffd152 !important; }
html.light #pointsRequestModal .nom-ex .out .to{ color:#d99413 !important; }
/* fix: dark-mode "10,000 แต้ม" เดิมเป็นตัวหนังสือดำกลืนพื้น → ใช้ token ที่อ่านออก */
#pointsRequestModal .nom-ex .out .from{ color:var(--ink2) !important; font-size:13px; }
#pointsRequestModal .nom-ex .out .from b{ color:var(--ink) !important; font-family:'Inter',sans-serif; }
#pointsRequestModal .nom-ex .out .arrow{ color:var(--inkDim) !important; }

/* exchange input row */
#pointsRequestModal .exchange-input-wrapper{ display:flex; gap:8px; }
#pointsRequestModal .exchange-input-group{ flex:1; display:flex; align-items:center; background:var(--side2); border:1.5px solid var(--line); border-radius:12px; overflow:hidden; }
#pointsRequestModal .exchange-points-input{ flex:1; min-width:0; background:none !important; border:0 !important; color:var(--ink) !important; font-family:'Inter',sans-serif !important; font-weight:700 !important; font-size:16px !important; padding:12px 14px !important; }
#pointsRequestModal .exchange-input-suffix{ padding:0 14px; font-size:12px; color:var(--inkDim); font-weight:600; }
#pointsRequestModal .btn-exchange-all{
  border:1.5px solid var(--brand) !important; background:rgba(255,196,0,.12) !important; color:#d99413 !important;
  border-radius:12px !important; padding:0 15px !important; font-weight:800 !important; font-size:12.5px !important;
  display:flex; align-items:center; gap:6px; white-space:nowrap;
}
html:not(.light) #pointsRequestModal .btn-exchange-all{ color:#ffd152 !important; }
#pointsRequestModal .btn-exchange-all:hover{ background:rgba(255,196,0,.2) !important; }

/* result card */
#pointsRequestModal .exchange-result-card{
  display:flex !important; align-items:center; gap:13px; margin-top:14px !important; padding:15px 16px !important;
  background:linear-gradient(110deg,rgba(255,196,0,.14),rgba(255,196,0,.05)) !important;
  border:1px solid rgba(255,196,0,.3) !important; border-radius:15px !important;
}
#pointsRequestModal .exchange-result-icon{ width:42px; height:42px; border-radius:12px; display:grid; place-items:center; font-size:20px; flex-shrink:0; background:linear-gradient(160deg,#ffe27a,#ffb300); color:#5a3e00; }
#pointsRequestModal .exchange-result-label{ font-size:11.5px; color:var(--inkDim); }
#pointsRequestModal .exchange-result-value{ font-family:'Inter',sans-serif !important; font-weight:800 !important; font-size:24px !important; color:var(--ink) !important; line-height:1.1; margin-top:2px; }
#pointsRequestModal .exchange-result-fee{ font-size:10.5px; color:#ff6b6b; margin-top:2px; }

/* note hints */
#pointsRequestModal .exchange-note{ display:flex; gap:8px; margin-top:11px !important; font-size:11.5px; line-height:1.55; color:var(--inkDim); align-items:flex-start; }
#pointsRequestModal .exchange-note i{ flex-shrink:0; margin-top:1px; color:#ffd152; }
#pointsRequestModal .exchange-note-warning{ background:rgba(255,107,107,.08); border:1px solid rgba(255,107,107,.2); border-radius:11px; padding:10px 12px; color:#ff6b6b; }
#pointsRequestModal .exchange-note-warning i{ color:#ff6b6b; }

/* divider + submit */
#pointsRequestModal hr{ border-color:var(--line2) !important; opacity:1; border-style:dashed; }
#pointsRequestModal #pointsResult:not(:empty){ margin-bottom:12px; }
#pointsRequestModal #pointsSubmitBtn{
  width:100%; margin-top:18px !important; border:0 !important; font-weight:800 !important; font-size:15px !important; padding:15px !important;
  border-radius:14px !important; color:#0c151b !important;
  background:linear-gradient(95deg,#ffc107,#ff9800) !important; box-shadow:0 12px 26px rgba(255,160,0,.3) !important;
}
#pointsRequestModal #pointsSubmitBtn:hover{ filter:brightness(1.04); }

/* ===== U136-fix — neutralize old 3D banking-card decorations the reskin reused =====
   Verify (live dark desktop) caught a giant solid-yellow ellipse over the active GOLD card:
   the old `.active-banking-card::before` was a 200%×200% radial glow; the reskin repurposed that
   SAME pseudo for the "ระดับของคุณ" badge but only set content/position/bg — it inherited the old
   width:200%/height:200% + radius999 → a 372×461 yellow pill. Reset it to a content-sized chip +
   kill the old glow animation + any leftover card chrome. */
#pointsModal .banking-card.active-banking-card::before{
  width:auto !important; height:auto !important; inset:auto !important;
  top:-9px !important; left:50% !important; right:auto !important; bottom:auto !important;
  animation:none !important; background:var(--brand) !important;
}
#pointsModal .banking-card .card-chip,
#pointsModal .banking-card .card-chip::before,
#pointsModal .banking-card .card-pattern,
#pointsModal .banking-card .card-pattern::before,
#pointsModal .banking-card .card-pattern::after{ display:none !important; }

/* U136-fix2 — kill the old .card-header background-IMAGE (a PerfectPanel storage texture) that the
   reskin didn't reset → showed as a solid yellow banner over each tier card's header. */
#pointsModal .banking-card .card-header{ background:none !important; background-image:none !important; }

/* U136-fix3 — kill old per-tier credit-card SHINE/GLOW pseudos (gold/platinum/vip ::before/::after)
   that overflowed each card with a diagonal gloss + triangle. Keep the active card's badge (its
   ::before is the "ระดับของคุณ" pill — only non-active ::before are shines). Also hide the tier
   icon box: markup uses Bootstrap-Icons `bi` glyphs but that font isn't loaded on the theme →
   empty squares; cleaner without them (tier name carries it). */
#pointsModal .banking-card:not(.active-banking-card)::before,
#pointsModal .banking-card::after{ display:none !important; content:none !important; }
#pointsModal .banking-card .card-tier i{ display:none !important; }

/* ========================================================================== */
/* ===== U137 — /orders progress cell: real numbers + start_count + untracked-state =====
   Was: bar + "%" only (calc from remains). Problems caught live:
     - provider not reporting partial → remains==qty → 0% the whole run (looks stuck/broken)
     - start_count harvested in twig but never shown (customer had no "ยอดเริ่มงาน")
   Now: "delivered / qty · เริ่ม {start}" numbers line above the bar; for an order that is
   still active but has 0 delivered (untracked) we show an indeterminate animated bar + "กำลังทำ"
   instead of a misleading 0%. Fully-canceled → empty muted bar + "—".
   Scoped to .l2v2-page-orders (progress-cell is orders-only).                              */
/* ========================================================================== */
.l2v2 .l2v2-page-orders .pg-tbl .progress-cell {
    display: flex; flex-direction: column; align-items: flex-start;
    gap: 4px; min-width: 124px;
}
.l2v2 .l2v2-page-orders .pg-tbl .progress-cell .pg-nums {
    font-family: var(--font-en); font-size: 11.5px; font-weight: 700;
    color: var(--ink2); letter-spacing: -.01em; white-space: nowrap; line-height: 1.1;
}
.l2v2 .l2v2-page-orders .pg-tbl .progress-cell .pg-nums .pg-start {
    font-weight: 600; color: var(--inkDim);
}
.l2v2 .l2v2-page-orders .pg-tbl .progress-cell .pg-bar-row {
    display: flex; align-items: center; gap: 8px; width: 100%;
}
.l2v2 .l2v2-page-orders .pg-tbl .progress-cell .pct {
    white-space: nowrap; display: inline-flex; align-items: center; gap: 4px;
}
/* untracked / still-working — indeterminate animated bar (no false 0%) */
.l2v2 .l2v2-page-orders .pg-tbl .progress-cell.is-working .pg-progress { position: relative; overflow: hidden; }
.l2v2 .l2v2-page-orders .pg-tbl .progress-cell.is-working .pg-progress .b {
    width: 38% !important;
    background: linear-gradient(90deg, rgba(42,98,255,0), #2A62FF, #28F1AA, rgba(40,241,170,0));
    animation: u137work 1.15s ease-in-out infinite;
}
@keyframes u137work { 0% { transform: translateX(-130%); } 100% { transform: translateX(330%); } }
.l2v2 .l2v2-page-orders .pg-tbl .progress-cell.is-working .pct { color: #2A62FF; font-size: 10.5px; font-weight: 700; }
.l2v2 .l2v2-page-orders .pg-tbl .progress-cell.is-working .pct i { animation: u137spin .9s linear infinite; }
@keyframes u137spin { to { transform: rotate(360deg); } }
/* fully canceled — empty muted bar */
.l2v2 .l2v2-page-orders .pg-tbl .progress-cell.is-void .pg-progress .b { width: 0 !important; }
.l2v2 .l2v2-page-orders .pg-tbl .progress-cell.is-void .pct { color: var(--inkDim); }
/* mobile — keep bar full-width under its label, numbers sit above */
@media (max-width: 768px) {
    .l2v2 .l2v2-page-orders .pg-tbl tbody .progress-cell { min-width: 0; gap: 5px; }
    .l2v2 .l2v2-page-orders .pg-tbl tbody .progress-cell .pg-bar-row { max-width: 100%; }
    .l2v2 .l2v2-page-orders .pg-tbl tbody .progress-cell .pg-progress { max-width: none; flex: 1; }
    .l2v2 .l2v2-page-orders .pg-tbl tbody .progress-cell .pg-nums { font-size: 12.5px; }
}
/* End U137 */

/* ========================================================================== */
/* ===== U138 — mobile pg-tbl labels: force Thai font (fix "ราคา"/"จำนวน" wrong font) =====
   Value cells .pr (charge) and .qty force font-family:var(--font-en) (Inter, Latin-only).
   On mobile the data-label ::before pseudo inherits that font from its <td>, so Thai labels
   like "ราคา"/"จำนวน" fell back to a system Thai face — visually different from every other
   label. Pin all mobile pg-tbl labels to --font-th so the label row is one consistent font;
   the numeric VALUE keeps --font-en (correct for digits).                                   */
/* ========================================================================== */
@media (max-width: 768px) {
    .l2v2 .l2v2-content .pg-tbl tbody td::before {
        font-family: var(--font-th) !important;
        font-weight: 700;
    }
}
/* End U138 */

/* ========================================================================== */
/* ===== U140 — report/ticket modal reskin (.rpt-modal) — orders/subscriptions/drip_feed =====
   Old modal: narrow (~290px), plain Bootstrap header, big empty textarea, wasted space.
   New: wider proportioned card on the frosted .modal-content; icon header + title + order#,
   Solar field styling (filled select w/ custom chevron + textarea), full gold CTA.
   All colors via Solar tokens → auto light/dark. Scoped to .rpt-modal (no leak to other modals). */
/* ========================================================================== */
.l2v2 .rpt-modal .modal-dialog { max-width: 470px !important; width: calc(100% - 32px); margin: auto; }
.l2v2 .rpt-modal .modal-content { border-radius: 22px !important; overflow: hidden; }

/* header — icon badge + title + order chip + close */
.l2v2 .rpt-modal .rpt-head {
    display: flex; align-items: center; gap: 13px;
    padding: 20px 20px 16px; border-bottom: 1px solid var(--line);
    background: none !important;
}
.l2v2 .rpt-modal .rpt-ic {
    width: 44px; height: 44px; flex: 0 0 44px; border-radius: 13px;
    display: grid; place-items: center; font-size: 22px;
    background: rgba(255, 193, 7, .15); color: var(--brand);
}
.l2v2 .rpt-modal .rpt-htx { flex: 1; min-width: 0; }
.l2v2 .rpt-modal .rpt-htx h4 { margin: 0; font-size: 17px; font-weight: 800; color: var(--ink); font-family: var(--font-th); line-height: 1.2; }
.l2v2 .rpt-modal .rpt-htx .rpt-oid { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 600; color: var(--inkDim); font-family: var(--font-en); }
.l2v2 .rpt-modal .rpt-head .btn-close { flex: 0 0 auto; align-self: flex-start; margin: 0; }

/* body */
.l2v2 .rpt-modal .modal-body { background: none !important; padding: 18px 20px 22px; }
.l2v2 .rpt-modal .rpt-field { margin-bottom: 14px; }
.l2v2 .rpt-modal .rpt-field > label { display: block; font-size: 12.5px; font-weight: 700; color: var(--ink2); margin: 0 0 7px; font-family: var(--font-th); }

/* select — filled, native arrow hidden, custom chevron */
.l2v2 .rpt-modal .rpt-sel { position: relative; }
.l2v2 .rpt-modal .rpt-sel select {
    width: 100%; appearance: none; -webkit-appearance: none; -moz-appearance: none;
    padding: 12px 40px 12px 14px; border-radius: 12px;
    background: var(--side2) !important; border: 1.5px solid var(--line) !important;
    color: var(--ink) !important; font-size: 14px; font-weight: 600; font-family: var(--font-th);
    cursor: pointer; transition: border-color .15s, box-shadow .15s;
}
.l2v2 .rpt-modal .rpt-sel select:focus { outline: none; border-color: var(--brand) !important; box-shadow: 0 0 0 3px rgba(255, 193, 7, .18); }
.l2v2 .rpt-modal .rpt-sel i { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--inkDim); font-size: 18px; }

/* textarea */
.l2v2 .rpt-modal textarea {
    width: 100%; padding: 12px 14px; border-radius: 12px; resize: vertical; min-height: 100px;
    background: var(--side2) !important; border: 1.5px solid var(--line) !important;
    color: var(--ink) !important; font-size: 14px; line-height: 1.55; font-family: var(--font-th);
    transition: border-color .15s, box-shadow .15s;
}
.l2v2 .rpt-modal textarea:focus { outline: none; border-color: var(--brand) !important; box-shadow: 0 0 0 3px rgba(255, 193, 7, .18); }
.l2v2 .rpt-modal textarea::placeholder { color: var(--inkDim); opacity: 1; }

/* submit CTA */
.l2v2 .rpt-modal .rpt-submit {
    width: 100%; margin-top: 4px; padding: 13px 16px; border: 0; border-radius: 13px;
    background: var(--brand); color: #1a1205; font-size: 15px; font-weight: 800; font-family: var(--font-th);
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    transition: filter .15s, transform .08s, opacity .15s;
}
.l2v2 .rpt-modal .rpt-submit:hover { filter: brightness(1.06); }
.l2v2 .rpt-modal .rpt-submit:active { transform: translateY(1px); }
.l2v2 .rpt-modal .rpt-submit:disabled { opacity: .68; cursor: default; }
.l2v2 .rpt-modal .rpt-submit i { font-size: 17px; }

/* result alert (#sonuc) spacing */
.l2v2 .rpt-modal .alert { margin: 0 0 14px; border-radius: 10px; font-size: 13px; padding: 10px 12px; }

/* mobile */
@media (max-width: 768px) {
    .l2v2 .rpt-modal .modal-dialog { width: calc(100% - 24px); max-width: 440px !important; }
    .l2v2 .rpt-modal .rpt-head { padding: 16px 16px 14px; gap: 11px; }
    .l2v2 .rpt-modal .rpt-ic { width: 40px; height: 40px; flex-basis: 40px; font-size: 20px; }
    .l2v2 .rpt-modal .modal-body { padding: 16px 16px 18px; }
}
/* End U140 */

/* ========================================================================== */
/* ===== U141 — report modal success state (.rpt-done) =====
   Old success = a flush green Bootstrap alert crammed above the still-visible form
   (cramped, off-theme green). Now on success the whole modal-body is replaced with a
   centered success panel: emerald check circle + title + message + Close button. */
/* ========================================================================== */
.l2v2 .rpt-modal .rpt-done { text-align: center; padding: 18px 8px 8px; }
.l2v2 .rpt-modal .rpt-done-ic {
    width: 66px; height: 66px; margin: 0 auto 16px; border-radius: 50%;
    display: grid; place-items: center; font-size: 36px; line-height: 1;
    background: rgba(16, 185, 129, .15); color: #10b981;
    animation: u141pop .32s cubic-bezier(.34, 1.56, .64, 1) both;
}
@keyframes u141pop { 0% { transform: scale(.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.l2v2 .rpt-modal .rpt-done h4 { margin: 0 0 6px; font-size: 18px; font-weight: 800; color: var(--ink); font-family: var(--font-th); }
.l2v2 .rpt-modal .rpt-done p { margin: 0 0 20px; font-size: 14px; line-height: 1.55; color: var(--inkDim); font-family: var(--font-th); }
.l2v2 .rpt-modal .rpt-done .rpt-done-btn { margin-top: 0; }
/* inline alerts (error path) — small top gap so they aren't flush to the divider */
.l2v2 .rpt-modal .alert { margin: 0 0 14px; }
/* End U141 */

/* ========================================================================== */
/* ===== U142 — /orders: order date+time under the Order ID (was missing entirely) =====
   order['date'] ("YYYY-MM-DD HH:MM:SS", same field BullLike + every likester page uses)
   shown as a small dim line beneath #id. Folded into the ID cell (no new column → no
   horizontal scroll). Mobile: ID cell is the card header row → date right-aligned. */
/* ========================================================================== */
.l2v2 .l2v2-page-orders .pg-tbl .id .oid-wrap {
    display: flex; flex-direction: column; gap: 3px; align-items: flex-start;
}
.l2v2 .l2v2-page-orders .pg-tbl .id .oid-date {
    display: inline-flex; align-items: center; gap: 3px;
    font-family: var(--font-en); font-size: 11px; font-weight: 600;
    color: var(--inkDim); white-space: nowrap; letter-spacing: -.01em;
}
.l2v2 .l2v2-page-orders .pg-tbl .id .oid-date i { font-size: 12px; opacity: .85; }
/* mobile — ID cell is the full-width card header (label left, value right) → align stack right */
@media (max-width: 768px) {
    .l2v2 .l2v2-page-orders .pg-tbl tbody td.id .oid-wrap { align-items: flex-end; }
    .l2v2 .l2v2-page-orders .pg-tbl tbody td.id .oid-date { font-size: 11.5px; }
}
/* End U142 */

/* ========================================================================== */
/* ===== U143 — /orders service icon: platform-aware brand badge (was generic yellow cart) =====
   The shopping-cart badge was identical on every row (decorative, cramped). Now the icon is
   detected from the order link/service (fb/ig/tt/yt/x/tg) → a refined tinted badge + the brand-
   colored glyph: meaningful + scannable. Mono platforms (TikTok, X) use --ink so they adapt to
   light/dark. Bigger avatar on mobile (it's the card's identity). */
/* ========================================================================== */
.l2v2 .l2v2-content .pg-tbl .pl .pic {
    width: 34px; height: 34px; border-radius: 10px;
    font-size: 18px; color: var(--ink2);
    background: var(--side2); background-image: none;
}
.l2v2 .l2v2-content .pg-tbl .pl .pic.pf-fb { background: rgba(24,119,242,.13);  color: #1877F2; }
.l2v2 .l2v2-content .pg-tbl .pl .pic.pf-ig { background: rgba(214,41,118,.13);  color: #D6296C; }
.l2v2 .l2v2-content .pg-tbl .pl .pic.pf-yt { background: rgba(255,0,0,.11);     color: #FF0000; }
.l2v2 .l2v2-content .pg-tbl .pl .pic.pf-tg { background: rgba(34,158,217,.13);  color: #229ED9; }
.l2v2 .l2v2-content .pg-tbl .pl .pic.pf-tt { background: var(--side2);          color: var(--ink); }
.l2v2 .l2v2-content .pg-tbl .pl .pic.pf-tw { background: var(--side2);          color: var(--ink); }
.l2v2 .l2v2-content .pg-tbl .pl .pic.pf-other { background: rgba(255,193,7,.14); color: var(--brand); }
/* mobile — service is the card header; make the platform avatar a touch larger */
@media (max-width: 768px) {
    .l2v2 .l2v2-page-orders .pg-tbl tbody td:nth-child(2) .pl .pic {
        width: 40px; height: 40px; border-radius: 12px; font-size: 21px; margin-top: 0;
    }
    .l2v2 .l2v2-page-orders .pg-tbl tbody td:nth-child(2) .pl { align-items: center; }
}
/* End U143 */

/* ========================================================================== */
/* ===== U144 — /orders ID-column width + copy-toast above mobile nav =====
   (1) ID column was 8% (table-layout:fixed ~84px) but now holds "#id" + a ~110px
       "YYYY-MM-DD HH:MM" date → the date overflowed into the Service cell and collided
       with the platform icon. Widen col1 to 13% (reclaimed from Link 17→13% + Service 23→22%).
   (2) The copy toast (.bs-toast: bottom 30px, z-index 3000) sat BEHIND + under the floating
       mobile bottom-nav (.my-mobile-navbar: bottom ~14px, z-index 10000). On mobile, lift it
       above the nav and bump z-index over it. */
/* ========================================================================== */
@media (min-width: 992px) {
    .l2v2 .l2v2-page-orders .pg-tbl thead th:nth-child(1) { width: 13%; }
    .l2v2 .l2v2-page-orders .pg-tbl thead th:nth-child(2) { width: 22%; }
    .l2v2 .l2v2-page-orders .pg-tbl thead th:nth-child(3) { width: 13%; }
    /* keep the date on one line + a little breathing room from the next column */
    .l2v2 .l2v2-page-orders .pg-tbl tbody td.id { padding-right: 14px; }
    .l2v2 .l2v2-page-orders .pg-tbl tbody td.id .oid-date { white-space: nowrap; }
}
/* copy toast — clear the floating bottom-nav on mobile */
@media (max-width: 768px) {
    body.l2v2 .bs-toast {
        left: 50% !important; right: auto !important;
        transform: translateX(-50%) !important;
        bottom: calc(100px + env(safe-area-inset-bottom)) !important;
        z-index: 10001 !important;
        max-width: calc(100vw - 32px) !important;
    }
}
/* End U144 */

/* ========================================================================== */
/* ===== U145 — toast position: bottom-center (was bottom-left, hid behind LINE widget) =====
   Desktop .bs-toast was left:40px (bottom-left) → tucked behind the floating LINE chat
   widget. Center it horizontally (consistent with the mobile centered toast from U144). */
/* ========================================================================== */
.bs-toast {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
}
/* End U145 */

/* ========================================================================== */
/* ===== U146 — subscriptions parity with /orders (copy-ID + platform icon already in twig) =====
   - posts "X / Y" must not wrap (the linked current_count + "/ total" was breaking to 2 lines)
   - mobile: platform avatar bigger (card identity), matching orders                          */
/* ========================================================================== */
.l2v2 .l2v2-page-subs .pg-tbl .subs-posts { white-space: nowrap; }
@media (max-width: 768px) {
    .l2v2 .l2v2-page-subs .pg-tbl tbody td:nth-child(2) .pl .pic {
        width: 40px; height: 40px; border-radius: 12px; font-size: 21px; margin-top: 0;
    }
    .l2v2 .l2v2-page-subs .pg-tbl tbody td:nth-child(2) .pl { align-items: center; }
}
/* End U146 */

/* ========================================================================== */
/* ===== U148 — /orders table polish: roomier rows + clearer hover + sticky header =====
   User kept the table; elevate it. (1) more vertical breathing room; (2) clearer row hover
   with a brand left-accent + transition; (3) sticky thead under the 64px fixed .appHeader.
   Note: .pg-tbl-wrap had overflow-x → became the scroll container (sticky relative to it,
   no Y-overflow → never stuck). Set overflow:visible on orders desktop so thead sticks to
   the page. Scoped to .l2v2-page-orders. Mobile thead is display:none (card view) — unaffected. */
/* ========================================================================== */
/* (3) breathing room */
.l2v2 .l2v2-page-orders .pg-tbl tbody td { padding-top: 18px; padding-bottom: 18px; }
.l2v2 .l2v2-page-orders .pg-tbl thead th { padding-top: 15px; padding-bottom: 15px; }
/* (1) clearer hover */
.l2v2 .l2v2-page-orders .pg-tbl tbody tr { transition: background .14s ease, box-shadow .14s ease; }
.l2v2 .l2v2-page-orders .pg-tbl tbody tr:hover { background: var(--side2); box-shadow: inset 3px 0 0 var(--brand); }
/* (2) sticky header — desktop only */
@media (min-width: 992px) {
    .l2v2 .l2v2-page-orders .pg-tbl-wrap { overflow: visible; }
    .l2v2 .l2v2-page-orders .pg-tbl thead th {
        position: sticky; top: 64px; z-index: 3;
        background: var(--side2);
        box-shadow: 0 1px 0 var(--line);
    }
}
/* End U148 */

/* ===== U148-fix — sticky thead needs no clipping ancestor; .pg-card had overflow:hidden.
   Allow visible on orders desktop only so the thead sticks to the page (not the card). ===== */
@media (min-width: 992px) {
    .l2v2 .l2v2-page-orders .pg-card { overflow: visible; }
}
/* End U148-fix */

/* ========================================================================== */
/* ===== U149 — /orders link: CSS-driven truncation (was twig slice(0,32) → cut to 32 chars
   even on the full-width mobile row). Output the full URL in a <span>; flex + ellipsis on the
   span truncates per available width (desktop narrow column → clipped; mobile full row → full).
   Specificity (0,4,3) matches the mobile td.lk rule + appended later → wins both. Orders-only. */
/* ========================================================================== */
.l2v2 .l2v2-page-orders .pg-tbl tbody td.lk a { display: flex; align-items: center; gap: 4px; min-width: 0; max-width: 100%; }
.l2v2 .l2v2-page-orders .pg-tbl tbody td.lk a i { flex: 0 0 auto; }
.l2v2 .l2v2-page-orders .pg-tbl tbody td.lk a span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* End U149 */

/* ===== U150 — New Order: 50/50 reward row (check-in + cashback) + cashback locked strip + unlock/info modal (Solar) ===== */

/* ---------- 50/50 reward row ---------- */
.l2v2 .nom-rewards { display:flex; gap:12px; align-items:stretch; margin:8px 0 0; }
.l2v2 .nom-rewards .nom-reward-col { flex:1 1 0; min-width:0; margin:0; }
.l2v2 .nom-rewards .nom-reward-col.hidden { display:none !important; }
.l2v2 .nom-rewards #checkin-section .card { height:100%; margin:0; }
@media (max-width:1100px){ .l2v2 .nom-rewards { flex-direction:column; gap:10px; } }

/* ---------- cashback strip ---------- */
.l2v2 .nom-rewards .nwo-cbstrip {
  display:flex; align-items:center; gap:13px;
  padding:14px 16px; margin:0; height:100%;
  border:1px solid var(--line); border-radius:16px;
  background:var(--side); cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, filter .2s ease, opacity .2s ease;
}
.l2v2 .nom-rewards .nwo-cbstrip:hover { transform:translateY(-2px); box-shadow:0 12px 26px rgba(0,0,0,.16); border-color:rgba(255,193,7,.4); }
.l2v2 .nwo-cbstrip-ic {
  width:42px; height:42px; flex:0 0 auto; border-radius:13px;
  display:grid; place-items:center; font-size:21px;
  background:rgba(255,193,7,.14); color:var(--brand);
  border:1px solid rgba(255,193,7,.22);
}
.l2v2 .nwo-cbstrip-lbl { flex:1; min-width:0; }
.l2v2 .nwo-cbstrip-lbl b { display:block; font-size:14.5px; font-weight:800; color:var(--ink); line-height:1.25; }
.l2v2 .nwo-cbstrip-lbl small { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:11.5px; font-weight:600; color:var(--inkDim); margin-top:2px; }
.l2v2 .nwo-cbstrip-lbl small i { font-size:12px; }
.l2v2 .nwo-cbstrip-badge {
  flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  font-size:11px; font-weight:800; padding:7px 12px; border-radius:999px;
  color:var(--brand); background:rgba(255,193,7,.1); border:1px solid rgba(255,193,7,.3);
}
.l2v2 .nwo-cbstrip-badge i { font-size:13px; }
.l2v2 .nwo-cbstrip-badge.locked { color:var(--inkDim); background:rgba(125,125,125,.12); border-color:var(--line2); }
.l2v2 .nwo-cbstrip-badge.ready  { color:#0c151b; background:var(--brand); border-color:var(--brand); }
.l2v2 .nwo-cbstrip-badge.active { color:#2563eb; background:rgba(37,99,235,.1); border-color:rgba(37,99,235,.3); }
.l2v2 .nwo-cbstrip-badge.rej    { color:#ef4444; background:rgba(239,68,68,.1); border-color:rgba(239,68,68,.3); }
/* locked look */
.l2v2 .nom-rewards .nwo-cbstrip.locked { filter:grayscale(.8); opacity:.8; background:var(--side2); border-style:dashed; }
.l2v2 .nom-rewards .nwo-cbstrip.locked:hover { filter:grayscale(.35); opacity:.96; }
.l2v2 .nwo-cbstrip.locked .nwo-cbstrip-ic { color:var(--inkDim); background:rgba(125,125,125,.1); border-color:var(--line2); }

/* ---------- cashback info / unlock modal ---------- */
#cashbackInfoModal .modal-dialog { max-width:480px; }
#cashbackInfoModal .nwo-cbi {
  border:none !important; border-radius:22px !important; overflow:hidden;
  background:var(--side) !important; color:var(--ink) !important;
  box-shadow:0 30px 70px rgba(0,0,0,.4) !important;
}
#cashbackInfoModal .nwo-cbi-head {
  position:relative; padding:26px 24px 22px; text-align:center;
  background:radial-gradient(120% 90% at 50% -10%, rgba(255,193,7,.24), transparent 62%), var(--side2);
  border-bottom:1px solid var(--line);
}
#cashbackInfoModal .nwo-cbi-x {
  position:absolute; top:12px; right:14px; width:32px; height:32px; border:none; border-radius:50%;
  background:rgba(125,125,125,.16); color:var(--ink); font-size:22px; line-height:1; cursor:pointer;
  display:grid; place-items:center; transition:background .15s ease, transform .15s ease;
}
#cashbackInfoModal .nwo-cbi-x:hover { background:rgba(125,125,125,.3); transform:rotate(90deg); }
#cashbackInfoModal .nwo-cbi-mark {
  width:62px; height:62px; border-radius:18px; margin:0 auto 12px; display:grid; place-items:center;
  font-size:28px; color:#5a3e00; background:linear-gradient(160deg,#ffe082,#ffc107);
  box-shadow:0 12px 26px rgba(255,170,0,.34);
}
#cashbackInfoModal .nwo-cbi-mark.lk { color:var(--inkDim); background:var(--side); border:1px solid var(--line2); box-shadow:none; }
#cashbackInfoModal .nwo-cbi-head h3 { margin:0; font-size:18px; font-weight:800; color:var(--ink); }
#cashbackInfoModal .nwo-cbi-head p  { margin:5px 0 0; font-size:12.5px; color:var(--inkDim); }
#cashbackInfoModal .nwo-cbi-body { padding:20px 22px 24px; max-height:70vh; overflow:auto; }

#cashbackInfoModal .nwo-cbi-lockbar {
  display:flex; align-items:center; gap:13px; padding:13px 15px; border-radius:14px; margin-bottom:18px;
  background:rgba(255,193,7,.08); border:1px solid rgba(255,193,7,.28);
}
#cashbackInfoModal .nwo-cbi-lockbar > i { font-size:24px; color:var(--brand); flex:0 0 auto; }
#cashbackInfoModal .nwo-cbi-lockbar b { display:block; font-size:13.5px; color:var(--ink); font-weight:800; }
#cashbackInfoModal .nwo-cbi-lockbar span { display:block; font-size:11.5px; color:var(--inkDim); margin-top:1px; }

#cashbackInfoModal .nwo-cbi-step { display:flex; align-items:center; gap:9px; font-size:13px; font-weight:800; color:var(--ink); margin:0 0 11px; }
#cashbackInfoModal .nwo-cbi-step .n {
  width:22px; height:22px; flex:0 0 auto; border-radius:50%; display:grid; place-items:center;
  font-size:12px; font-weight:800; color:#0c151b; background:var(--brand);
}

#cashbackInfoModal .nwo-cbi-ladder { display:flex; flex-direction:column; gap:7px; margin-bottom:14px; }
#cashbackInfoModal .nwo-cbi-lrow {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:11px 14px; border-radius:12px; border:1.5px solid var(--line); background:var(--side2);
}
#cashbackInfoModal .nwo-cbi-lrow .lname { font-size:13px; font-weight:700; color:var(--ink2); display:inline-flex; align-items:center; gap:6px; }
#cashbackInfoModal .nwo-cbi-lrow .lreq  { font-family:'Inter',sans-serif; font-size:12.5px; font-weight:700; color:var(--inkDim); white-space:nowrap; }
#cashbackInfoModal .nwo-cbi-lrow.target { border-color:rgba(255,193,7,.5); background:rgba(255,193,7,.07); }
#cashbackInfoModal .nwo-cbi-lrow.target .lname { color:var(--ink); }
#cashbackInfoModal .nwo-cbi-lrow.target .lname i { color:var(--brand); }
#cashbackInfoModal .nwo-cbi-lrow.cur { border-color:var(--brand); box-shadow:0 0 0 1px var(--brand) inset; }
#cashbackInfoModal .nwo-cbi-lrow.cur .lname { color:var(--ink); font-weight:800; }

#cashbackInfoModal .nwo-cbi-prog { background:var(--side2); border:1px solid var(--line); border-radius:14px; padding:14px 16px; margin-bottom:16px; }
#cashbackInfoModal .nwo-cbi-prog .top { display:flex; justify-content:space-between; gap:10px; font-size:12px; margin-bottom:9px; }
#cashbackInfoModal .nwo-cbi-prog .top .k { color:var(--inkDim); }
#cashbackInfoModal .nwo-cbi-prog .top .v { font-family:'Inter',sans-serif; font-weight:800; color:var(--brand); white-space:nowrap; }
#cashbackInfoModal .nwo-cbi-prog .track { height:9px; border-radius:6px; background:var(--line); overflow:hidden; }
#cashbackInfoModal .nwo-cbi-prog .track i { display:block; height:100%; border-radius:6px; background:linear-gradient(90deg,#ffc107,#e2aa03); transition:width .5s cubic-bezier(.22,1,.36,1); }
#cashbackInfoModal .nwo-cbi-prog .rem { font-size:11.5px; color:var(--inkDim); margin-top:8px; }

#cashbackInfoModal .nwo-cbi-mtiers { display:flex; flex-direction:column; gap:10px; margin-bottom:18px; }
#cashbackInfoModal .nwo-cbi-mtier {
  display:flex; align-items:center; gap:13px; padding:13px 15px; border-radius:14px;
  border:1.5px solid var(--line); background:var(--side2);
}
#cashbackInfoModal .nwo-cbi-mtier .g { width:40px; height:40px; flex:0 0 auto; border-radius:12px; display:grid; place-items:center; font-size:19px; background:rgba(255,193,7,.14); color:var(--brand); }
#cashbackInfoModal .nwo-cbi-mtier .m { flex:1; min-width:0; }
#cashbackInfoModal .nwo-cbi-mtier .m b { font-size:13.5px; color:var(--ink); font-weight:800; }
#cashbackInfoModal .nwo-cbi-mtier .m span { display:block; font-size:11.5px; color:var(--inkDim); margin-top:1px; }
#cashbackInfoModal .nwo-cbi-mtier .r { font-family:'Inter',sans-serif; font-size:17px; font-weight:800; color:var(--brand); white-space:nowrap; }

#cashbackInfoModal .nwo-cbi-cta {
  width:100%; border:none; border-radius:14px; padding:14px 18px; cursor:pointer;
  font-size:14.5px; font-weight:800; color:#0c151b;
  display:flex; align-items:center; justify-content:center; gap:8px;
  background:linear-gradient(135deg,#ffe082,#ffc107);
  box-shadow:0 12px 26px rgba(255,170,0,.3);
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
#cashbackInfoModal .nwo-cbi-cta:hover { filter:brightness(1.04); transform:translateY(-1px); box-shadow:0 16px 32px rgba(255,170,0,.4); }
#cashbackInfoModal .nwo-cbi-cta:active { transform:translateY(0) scale(.985); }
#cashbackInfoModal .nwo-cbi-cta i { font-size:18px; }

#cashbackInfoModal .nwo-cbi-note { display:flex; gap:8px; font-size:11.5px; color:var(--inkDim); line-height:1.55; margin-top:14px; }
#cashbackInfoModal .nwo-cbi-note i { color:var(--brand); margin-top:1px; flex:0 0 auto; }

@media (max-width:600px){
  #cashbackInfoModal .nwo-cbi-body { padding:18px 16px 20px; }
  #cashbackInfoModal .nwo-cbi-head { padding:22px 18px 18px; }
  .l2v2 .nom-rewards .nwo-cbstrip { padding:13px 14px; gap:11px; }
}

/* ===== U151 — New Order reward row fix: cashback strip must be horizontal (Bootstrap .card forces flex-direction:column → strip was stacking tall) + keep compact & equal-height ===== */
.l2v2 .nom-rewards .nwo-cbstrip { flex-direction:row !important; align-items:center !important; flex-wrap:nowrap; }
.l2v2 .nom-rewards .nom-reward-col { display:flex; }
.l2v2 .nom-rewards #checkin-section .card { flex:1 1 auto; }

/* ===== U152 — cashback strip fills its 50/50 column + info modal → 2 columns on desktop (wider, less wasted space) ===== */
/* strip/banner must FILL the column (Bootstrap .card is shrink-to-fit as a flex child → "ไม่เต็มจอ") */
.l2v2 .nom-rewards .nom-reward-col > .card { flex:1 1 auto !important; width:100% !important; }

/* wider modal + 2-column body on desktop */
#cashbackInfoModal .modal-dialog.nwo-cbi-dialog { max-width:720px; }
#cashbackInfoModal .nwo-cbi-cols { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
#cashbackInfoModal .nwo-cbi-col { display:flex; flex-direction:column; min-width:0; }
#cashbackInfoModal .nwo-cbi-col .nwo-cbi-cta { margin-top:auto; }
#cashbackInfoModal .nwo-cbi-col > :last-child { margin-bottom:0; }
/* the locked-block's inner last child (progress/ladder) shouldn't add trailing gap */
#cashbackInfoModal #cbi-locked-block > :last-child,
#cashbackInfoModal #cbi-eligible-block > :last-child { margin-bottom:0; }

/* eligible "unlocked" lockbar variant */
#cashbackInfoModal .nwo-cbi-lockbar.ok { background:rgba(16,185,129,.1); border-color:rgba(16,185,129,.32); }
#cashbackInfoModal .nwo-cbi-lockbar.ok > i { color:#10b981; }

/* collapse to single column on phones */
@media (max-width:680px){
  #cashbackInfoModal .modal-dialog.nwo-cbi-dialog { max-width:100%; }
  #cashbackInfoModal .nwo-cbi-cols { grid-template-columns:1fr; gap:6px; }
  #cashbackInfoModal .nwo-cbi-col .nwo-cbi-cta { margin-top:10px; }
  #cashbackInfoModal #cbi-locked-block > :last-child,
  #cashbackInfoModal #cbi-eligible-block > :last-child { margin-bottom:16px; }
}

/* ===== U153 — cashback modal: full-width status bar above the 2 cols + balance the columns ===== */
/* status bar (your level) now spans full width above the grid */
#cashbackInfoModal .nwo-cbi-body > .nwo-cbi-lockbar { margin-bottom:16px; }
/* balance: reward tiers grow to fill col-2 so it matches the taller path column (1 ↔ 2 เสมอกัน) */
#cashbackInfoModal .nwo-cbi-cols { align-items:stretch; }
#cashbackInfoModal .nwo-cbi-col .nwo-cbi-mtiers { flex:1 1 auto; margin-bottom:14px; }
#cashbackInfoModal .nwo-cbi-col .nwo-cbi-mtiers .nwo-cbi-mtier { flex:1 1 auto; }
/* eligible col-1 has only a progress bar → center it so the column doesn't look empty */
#cashbackInfoModal #cbi-eligible-block { display:flex; flex-direction:column; justify-content:center; height:100%; }
@media (max-width:680px){
  #cashbackInfoModal .nwo-cbi-col .nwo-cbi-mtiers { flex:0 0 auto; }
  #cashbackInfoModal .nwo-cbi-col .nwo-cbi-mtiers .nwo-cbi-mtier { flex:0 0 auto; }
  #cashbackInfoModal #cbi-eligible-block { height:auto; }
}

/* ===== U154 — New Order: quantity min/max helper line (cosmetic; filled by existing v15 poll) ===== */
.l2v2 .nom-qty-hint { display:flex; align-items:center; gap:6px; margin:8px 2px 0; font-size:12.5px; font-weight:600; color:var(--inkDim); line-height:1.4; }
.l2v2 .nom-qty-hint i { font-size:14px; flex:0 0 auto; }
.l2v2 .nom-qty-hint.low { color:#ef4444; }

/* ===== U155 — a11y (signin landing): heading-order + color-contrast =====
   - social cards h4→h3 (was h2→h4 skip); mirror the old .yp-sc h4 styling onto h3
   - .yp-or "หรือ" divider text #aaa (~2.3:1 on #fff, FAIL AA) → #666 (~5.7:1, PASS AA)
   [APPEND-ONLY] */
.yp .yp-sc h3 { margin:0 0 8px; font-size:16px; font-weight:800; }
.yp .yp-sc.dark h3 { color:#fff; }
.yp .yp-or { color:#666; }

/* ===== U156 — a11y heading-order: footer column titles h5→h2 (layout.twig) =====
   Footer is guest-only (inside {% if user.auth %}{% else %}). Was content h2/h3 → footer h5 (skip h4).
   h5→h2 = always valid after any content depth (only needs the page h1; going UP never skips).
   Mirror the old .yp-ft(-col) h5 styling onto h2 so it looks identical (13px/800/yellow);
   footer h2 has NO .yp-h2 class so the big section-title rule .yp h2.yp-h2 does NOT match it.
   [APPEND-ONLY] */
.yp .yp-ft h2, .lkf .yp-ft h2 { margin:0 0 16px; font-size:13px; font-weight:800; color:var(--y); letter-spacing:.04em; }
.yp .yp-ft-col h2, .lkf .yp-ft-col h2 { margin:0 0 15px; font-size:13px; font-weight:800; color:var(--y); letter-spacing:.04em; }

/* ===== U159 — /services filter button redesign =====
   Was: solid-yellow btn-primary slab (.btn-100 full-width on mobile) — heavy, clashed with the
   gray search box. Now: clean outline matching the search input, using the SAME tokens
   (var(--side2)/--line/--ink) so it auto-adapts dark/light like .search-services .textbox.
   Filter icon keeps a subtle brand-yellow accent. Applies guest(.l2v2 wrapper)+member. [APPEND-ONLY] */
.l2v2 .l2v2-page-services .btn.dd-btn {
  background: var(--side2) !important;
  border: 1px solid var(--line) !important;
  border-radius: 11px;
  color: var(--ink) !important;
  font-weight: 600;
  font-size: 13px;
}
.l2v2 .l2v2-page-services .btn.dd-btn:hover,
.l2v2 .l2v2-page-services .btn.dd-btn:focus,
.l2v2 .l2v2-page-services .btn.dd-btn.show {
  background: var(--side) !important;
  border-color: var(--inkDim) !important;
  color: var(--ink) !important;
}
.l2v2 .l2v2-page-services .dd-btn .ri-filter-2-line { color: #ffc107; }
.l2v2 .l2v2-page-services .dd-btn .ri-arrow-down-s-line { color: var(--inkDim); }

/* ===== U160 — /services filter+search toolbar: kill card-in-card =====
   The filter button + search box sat inside an outer .card.card-border (white card),
   while they're already bordered controls → card-in-card. Flatten the toolbar wrapper so
   the two controls sit directly on the page. Scoped via the svc-toolbar class (toolbar card
   only; the nothing-found .card.card-border is untouched). guest(.l2v2 wrapper)+member. [APPEND-ONLY] */
.l2v2 .l2v2-page-services .svc-toolbar {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.l2v2 .l2v2-page-services .svc-toolbar > .card-body { padding: 0 !important; }

/* ===== U161 — /neworder (dashboard) promo carousel =====
   3-slide auto-rotating banner above the 4 stat cards (affiliate / membership / check-in).
   Image bg + dark left-scrim + HTML text overlay. All inner classes prefixed np-* so nothing
   collides with the theme. Image URLs are perfectcdn (swapped from __SLIDE*__ tokens on upload). */
.nwo-promo-wrap{ margin-bottom:18px; }
.nwo-promo-carousel{ position:relative; border-radius:20px; overflow:hidden;
  box-shadow:0 14px 36px rgba(8,12,20,.28); }
.nwo-promo-track{ display:flex; transition:transform .5s cubic-bezier(.4,0,.2,1); will-change:transform; }

.nwo-promo{ position:relative; flex:0 0 100%; aspect-ratio:16/5; overflow:hidden;
  background-size:cover; background-position:right center; isolation:isolate; }
.nwo-promo.p1{ background-image:url('https://storage.perfectcdn.com/e70129/xw6j47hris5jbx9i.webp'); }
.nwo-promo.p2{ background-image:url('https://storage.perfectcdn.com/e70129/s2t4gjz7b2nfu5gr.webp'); }
.nwo-promo.p3{ background-image:url('https://storage.perfectcdn.com/e70129/1b7yeyqj3ukd0x9b.webp'); }
.nwo-promo::before{ content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, rgba(8,10,24,.82) 0%, rgba(8,10,24,.6) 32%, rgba(8,10,24,.18) 54%, rgba(8,10,24,0) 70%); }

.nwo-promo .np-in{ position:relative; z-index:2; height:100%; display:flex; flex-direction:column;
  justify-content:center; padding:0 clamp(28px,4.4%,64px); max-width:60%; }
.nwo-promo .np-top{ display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.nwo-promo .np-logo{ width:38px; height:38px; border-radius:50%; background:#fff; padding:2px;
  box-shadow:0 4px 14px rgba(0,0,0,.35); flex:0 0 auto; line-height:0; }
.nwo-promo .np-logo img{ width:100%; height:100%; display:block; border-radius:50%; }
.nwo-promo .np-pill{ display:inline-flex; align-items:center; gap:7px; background:rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.28);
  color:#fff; font-size:13px; font-weight:600; padding:6px 14px; border-radius:999px; }
.nwo-promo .np-pill i{ color:#ffc107; font-size:15px; line-height:1; }
.nwo-promo .np-hd{ color:#fff; font-weight:800; line-height:1.06; font-size:clamp(24px,3.7vw,46px);
  letter-spacing:-.3px; text-shadow:0 2px 18px rgba(0,0,0,.4); margin-bottom:12px; }
.nwo-promo .np-hd b{ color:#ffc107; font-weight:800; }
.nwo-promo.p2 .np-hd b{ color:#fff; }   /* yellow highlight is weak on the orange art */
.nwo-promo .np-sub{ color:rgba(255,255,255,.9); font-weight:400; font-size:clamp(13px,1.25vw,16px);
  line-height:1.5; max-width:30em; text-shadow:0 1px 10px rgba(0,0,0,.4); margin-bottom:20px; }
.nwo-promo .np-cta{ display:inline-flex; align-items:center; gap:7px; align-self:flex-start;
  background:#ffc107; color:#0c151b; font-weight:700; font-size:15px; padding:11px 22px;
  border-radius:12px; text-decoration:none; box-shadow:0 8px 22px rgba(255,193,7,.34);
  transition:transform .15s ease, box-shadow .15s ease; }
.nwo-promo .np-cta:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(255,193,7,.42); color:#0c151b; }
.nwo-promo .np-cta i{ font-size:18px; }

/* arrows (desktop hover only) */
.nwo-promo-arrow{ position:absolute; z-index:4; top:50%; transform:translateY(-50%);
  width:38px; height:38px; border-radius:50%; border:0; cursor:pointer; padding:0;
  background:rgba(12,21,27,.45); color:#fff; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  display:grid; place-items:center; font-size:22px; opacity:0; transition:opacity .2s, background .2s; }
.nwo-promo-carousel:hover .nwo-promo-arrow{ opacity:1; }
.nwo-promo-arrow:hover{ background:rgba(12,21,27,.72); }
.nwo-promo-arrow.prev{ left:12px; }
.nwo-promo-arrow.next{ right:12px; }

/* dots */
.nwo-promo-dots{ position:absolute; z-index:4; left:50%; bottom:14px; transform:translateX(-50%);
  display:flex; gap:7px; }
.nwo-promo-dots button{ width:8px; height:8px; padding:0; border:0; cursor:pointer; border-radius:50%;
  background:rgba(255,255,255,.5); transition:width .25s, background .25s; }
.nwo-promo-dots button.on{ width:22px; border-radius:4px; background:#ffc107; }

/* mobile */
@media (max-width:560px){
  .nwo-promo-wrap{ margin-bottom:14px; }
  .nwo-promo-carousel{ border-radius:16px; }
  .nwo-promo{ aspect-ratio:auto; min-height:184px; background-position:right -28px center; background-size:auto 128%; }
  .nwo-promo::before{ background:linear-gradient(90deg, rgba(8,10,24,.9) 0%, rgba(8,10,24,.74) 44%, rgba(8,10,24,.36) 72%, rgba(8,10,24,.12) 100%); }
  .nwo-promo .np-in{ max-width:80%; padding:18px 16px; }
  .nwo-promo .np-top{ margin-bottom:10px; }
  .nwo-promo .np-logo{ width:30px; height:30px; }
  .nwo-promo .np-pill{ font-size:11.5px; padding:5px 11px; }
  .nwo-promo .np-pill i{ font-size:13px; }
  .nwo-promo .np-hd{ font-size:21px; line-height:1.12; margin-bottom:8px; }
  .nwo-promo .np-sub{ font-size:12.5px; line-height:1.4; margin-bottom:14px; max-width:24em; }
  .nwo-promo .np-cta{ font-size:13px; padding:9px 16px; border-radius:10px; }
  .nwo-promo-arrow{ display:none; }
  .nwo-promo-dots{ bottom:11px; }
}
@media (prefers-reduced-motion: reduce){
  .nwo-promo-track{ transition:none; }
}
/* ===== /U161 ===== */

/* ===== U162 — /neworder promo: 3-across on desktop, carousel stays on mobile =====
   Desktop (>=992px): show all three banners side by side, compact height (~1/3 of the
   old full-width slider). The slider transform is force-disabled with !important (beats the
   JS inline transform), arrows/dots hidden, subcopy hidden so each card stays short.
   Below 992px the U161 carousel (swipe + autoplay + dots) is untouched. */
@media (min-width: 992px){
  .nwo-promo-carousel{ overflow:visible; box-shadow:none; }
  .nwo-promo-track{ transform:none !important; gap:16px; }
  .nwo-promo{ flex:1 1 0; min-width:0; aspect-ratio:auto;
    height:clamp(142px, 10.5vw, 166px); border-radius:18px;
    box-shadow:0 12px 30px rgba(8,12,20,.26); }
  .nwo-promo::before{
    background:linear-gradient(90deg, rgba(8,10,24,.86) 0%, rgba(8,10,24,.64) 38%, rgba(8,10,24,.2) 62%, rgba(8,10,24,0) 82%); }
  .nwo-promo .np-in{ max-width:66%; padding:0 clamp(16px,1.7vw,26px); }
  .nwo-promo .np-top{ margin-bottom:9px; }
  .nwo-promo .np-logo{ width:30px; height:30px; }
  .nwo-promo .np-pill{ font-size:11px; padding:4px 10px; gap:5px; }
  .nwo-promo .np-pill i{ font-size:13px; }
  .nwo-promo .np-hd{ font-size:clamp(15px,1.4vw,20px); line-height:1.14; margin-bottom:0;
    letter-spacing:-.2px; }
  .nwo-promo .np-sub{ display:none; }
  .nwo-promo .np-cta{ margin-top:12px; font-size:12px; padding:7px 15px; border-radius:9px; gap:5px; }
  .nwo-promo .np-cta i{ font-size:15px; }
  .nwo-promo-arrow, .nwo-promo-dots{ display:none !important; }
}
/* ===== /U162 ===== */

/* ===== U163 — kill modal-open content shift (scrollbar reflow) [2026-06-28] =====
   Opening any modal sets body{overflow:hidden} which removes the ~7px viewport scrollbar;
   the theme forces body padding-right:0 so Bootstrap's compensation can't apply → page
   content (text) jumps ~7px right the instant a modal opens. Reserving the scrollbar
   permanently on the root removes the reflow entirely. Verified live: clientWidth stays
   constant on modal open (jump 7px → 0). Global, low-risk (only reserves the gutter). */
html { overflow-y: scroll; }
/* ===== /U163 ===== */

/* ===== U164 — /neworder mobile: check-in banner compact = match cashback strip height [2026-06-28] =====
   On <=560px the 7-day streak dots wrapped to a full-width row under the icon/text/button
   (order:3, flex-basis:100%, margin-top:10) → check-in card 112px vs cashback strip 84px = too tall.
   Hide the inline dots (full streak still shows in the check-in modal on tap) + match cashback's
   padding(13/14) & radius(16) → both strips 84px, equal. Mobile-only; desktop pill row untouched. */
@media (max-width:560px){
  .l2v2 .l2v2-page-dashboard .nwo-ci-dots { display:none !important; }
  .l2v2 .l2v2-page-dashboard .nwo-ci-banner-card { padding:13px 14px; border-radius:16px !important; }
}
/* ===== /U164 ===== */

/* ===== U165 — blog cover: real 2:1 article images must not be cropped [2026-07-24] =====
   .bxa-cover .img is 16/9 for the icon-only gradient placeholder. Uploaded article covers are
   authored at 2:1 (1600x800), so background-size:cover was zooming in and clipping the artwork
   (and its Thai headline) on the sides. Match the container to the artwork when a photo exists. */
.bxa-cover .img.has-photo { aspect-ratio:2/1; }
@media (max-width:640px){ .bxa-cover .img.has-photo { border-radius:14px; } }

/* ===== U166 — blog list thumbnails: show the whole artwork, never crop the headline [2026-07-24] =====
   .bx-feat/.bx-card .img are 16/10 with background-size:cover. Article covers are authored at 2:1
   with the Thai headline on the left, so cover was slicing that headline off. Contain fits the whole
   image; the platform gradient already set inline on the same element fills the letterbox. */
/* Two things must be beaten here:
   1. the inline `background:` shorthand in blog.twig (resets background-size inline), and
   2. U92 above, which forces `background-size:cover !important` through
      `.lk-land.l2v2-page-blog .img[style*="background"]` — specificity (0,4,0).
   U92 stays correct for gradient placeholders and for legacy 16:9 thumbnails; .has-photo is the
   opt-out for real article artwork. Hence !important AND a (0,5,0) selector. */
.lk-land.l2v2-page-blog .bx-feat .img.has-photo,
.lk-land.l2v2-page-blog .bx-card .img.has-photo,
.blogx .bx-feat .img.has-photo,
.blogx .bx-card .img.has-photo {
  background-size:contain !important; background-repeat:no-repeat !important; background-position:center !important;
}

/* ===== U174 — 2026-07-28 — public header menu: fit 5 items on one row (desktop only) =====
   The layout header now renders all 5 admin public-menu items (services / terms / blog / faq /
   about-us) instead of a hardcoded 3. At the theme's original li padding 0 25px + font-size 17px
   the 5 Thai labels wrap to a second row at 1440px and cover the hero, so the spacing is tightened.
   Desktop-only on purpose: below 992px .head-menu is the fixed drawer, whose own rules
   (.head-menu .header-menu>ul>li>a { padding:24px 0; font-size:20px }) must keep winning. */
@media (min-width: 992px) {
  .header .header-menu ul li { margin: 0 !important; padding: 0 !important; }
  .header .header-menu ul li a {
    padding-left: 14px !important;
    padding-right: 14px !important;
    font-size: 15px !important;
    white-space: nowrap;
  }
}

/* ===== U175 — 2026-07-28 — pages that gave their nav back to the layout header =====
   Once a page's <nav class="yp-nav"> block is deleted, U173's rule stops hiding the layout
   header on it. That header is position:absolute, 100px tall, sitting at y=30 (desktop) / y=0
   (mobile). .yl-hero was padded for the old 65px sticky yp-nav (86px desktop / 40px mobile),
   which puts .sub-bc at y=114 desktop and y=68 mobile — both inside the header band.
   Scoped with :not(:has(.yp-nav)) so pages still carrying their own nav are untouched
   while the rollout is half-done. */
body:not(:has(.yp-nav)) .yl-hero { padding-top: 132px !important; }   /* sub-bc 114 -> 160 */
@media (max-width: 991.98px) {
  body:not(:has(.yp-nav)) .yl-hero { padding-top: 120px !important; } /* sub-bc  68 -> 148 */
}

/* ===== U176 — 2026-07-28 — signin / signup after the nav merge =====
   These two use .yp-hero (not .yl-hero) and carry decorative chips positioned in % of the hero:
   .floatchip.floatC at top:4% and .disc.floatB at top:12% (inline styles, hence !important), plus
   a heart chip hanging off the auth card at top:-26px. With the layout header restored (band
   y=30..130 desktop) all three land on top of the menu — the "ติดต่อเรา" item in particular.
   Pushing the hero down moves the card + its heart; the two .yp-art chips are re-anchored lower.
   Measured after: card heart 150, floatC 178, .disc 218 — all clear of the 130px header band. */
body:not(:has(.yp-nav)) .yp-hero { padding-top: 180px !important; }
body:not(:has(.yp-nav)) .yp-hero .yp-art .floatchip.floatC { top: 20% !important; }
body:not(:has(.yp-nav)) .yp-hero .yp-art .disc.floatB { top: 24% !important; }
@media (max-width: 991.98px) {
  /* header sits at y=0..100 on mobile, so less push is needed */
  body:not(:has(.yp-nav)) .yp-hero { padding-top: 130px !important; }
}

/* ============================================================================
   U183 — 2026-07-28 — FAQ accordion: follow the theme instead of forcing dark
   ----------------------------------------------------------------------------
   The block at ~26611 is titled "force dark editorial on BOTH themes" and pairs
   every rule with an html.light twin, so the light dashboard rendered dark cards
   with white text. Owner asked for option C: light mode light, dark mode dark.

   This is the ONE place light-mode colour for .faq-ss-tabs lives. It only
   restates colour — every dimension, radius, counter and animation from the
   block above is left untouched, so the layout is identical in both modes.
   Selectors mirror the ones being overridden exactly (same specificity), so
   file order decides — keep this block last.

   Colours come from the existing html.light tokens, not new values:
     --side #ffffff · --side2 #f5f6f8 · --line #e9ecef · --line2 #dde2e8
     --ink #0c151b · --ink2 #3d4249 · --inkDim #6b7280 · --brand #ffc107
   Amber on white fails contrast, so brand-coloured TEXT becomes #7a5c00
   (same hue, ~7:1 on white); the brand yellow stays on fills and borders.
   ============================================================================ */

/* card */
html.light .appContent:has(.card-header-ap .faq-ss-tabs) .faq-ss-tabs .home-ss-tab {
    background: var(--side) !important;
    border: 1px solid var(--line) !important;
    box-shadow: 0 10px 30px rgba(12, 21, 27, 0.06),
                0 1px 0 rgba(12, 21, 27, 0.02) inset !important;
}
html.light .appContent:has(.card-header-ap .faq-ss-tabs) .faq-ss-tabs .home-ss-tab:hover {
    border-color: rgba(255, 193, 7, 0.55) !important;
    box-shadow: 0 18px 44px rgba(12, 21, 27, 0.1),
                0 1px 0 rgba(255, 255, 255, 0.6) inset !important;
}
html.light .appContent:has(.card-header-ap .faq-ss-tabs) .faq-ss-tabs .home-ss-tab.active {
    background: #fffdf4 !important;
    border-color: rgba(255, 193, 7, 0.6) !important;
    box-shadow: 0 22px 52px rgba(12, 21, 27, 0.1),
                0 0 0 1px rgba(255, 193, 7, 0.28) inset !important;
}

/* question row */
html.light .appContent:has(.card-header-ap .faq-ss-tabs) .faq-ss-tabs .home-ss-tab .ss-tab-head {
    color: var(--ink) !important;
}
html.light .appContent:has(.card-header-ap .faq-ss-tabs) .faq-ss-tabs .home-ss-tab.active .ss-tab-head {
    color: var(--ink) !important;
}

/* answer body */
html.light .appContent:has(.card-header-ap .faq-ss-tabs) .faq-ss-tabs .home-ss-tab .ss-tab-content {
    color: var(--ink2) !important;
}
html.light .appContent:has(.card-header-ap .faq-ss-tabs) .faq-ss-tabs .home-ss-tab .ss-tab-content a {
    color: #7a5c00 !important;
    text-decoration-color: rgba(122, 92, 0, 0.45);
}
html.light .appContent:has(.card-header-ap .faq-ss-tabs) .faq-ss-tabs .home-ss-tab .ss-tab-content a:hover {
    text-decoration-color: #7a5c00;
}

/* +/- pill */
html.light .appContent:has(.card-header-ap .faq-ss-tabs) .faq-ss-tabs .home-ss-tab .ss-tab-head .right-p {
    background: rgba(12, 21, 27, 0.04) !important;
    border-color: var(--line2) !important;
    color: var(--inkDim) !important;
}
html.light .appContent:has(.card-header-ap .faq-ss-tabs) .faq-ss-tabs .home-ss-tab:hover .ss-tab-head .right-p {
    background: rgba(255, 193, 7, 0.16) !important;
    border-color: rgba(255, 193, 7, 0.5) !important;
    color: #7a5c00 !important;
}

/* 01 / 02 counter chip — the active state (yellow fill, dark text) already reads
   correctly on white, so only the resting state is restated here. */
html.light .appContent:has(.card-header-ap .faq-ss-tabs) .faq-ss-tabs .home-ss-tab .ss-tab-head > .row > .col::before {
    color: #7a5c00;
    background: rgba(255, 193, 7, 0.14);
    border-color: rgba(255, 193, 7, 0.38);
}