@charset "UTF-8";

/* ============================================================
 *  Design tokens — mode-agnostic
 * ============================================================ */
:root {
    /* ── ฟอนต์ · เฟส 2 ─────────────────────────────────────────────
       ดูเหตุผลเต็มใน git log และ .claude/verify/ */
    --v2-f-thai: "IBM Plex Sans Thai", system-ui, sans-serif;
    --v2-f-dis: var(--v2-f-thai);
    --v2-f-mono: "JetBrains Mono", "IBM Plex Sans Thai", ui-monospace, Menlo, monospace;
    --v2-f-serif: "Instrument Serif", "IBM Plex Sans Thai", Georgia, serif;

    /* accent — identical in dark + light */
    --v2-yellow: #ffd60a;
    --v2-yellow-2: #ffb400;
    --v2-yellow-ink: #1a1500;
    --v2-ok: #6fe4a8;
    --v2-warn: #ffaa5a;
    --v2-danger: #ff7a6a;
    --v2-info: #4dd0ff;

    /* บนธีมสว่าง ค่าเดียวกันนี้ใช้เป็นพื้นและเส้นได้ แต่ใช้เป็นสีตัวอักษรไม่ผ่าน
       จึงมีชุด -text แยกไว้ ในธีมมืดทั้งสองชุดเป็นสีเดียวกัน */
    --v2-yellow-text: var(--v2-yellow);
    --v2-ok-text:     var(--v2-ok);
    --v2-danger-text: var(--v2-danger);
    --v2-info-text:   var(--v2-info);
    --v2-warn-text:   var(--v2-warn);
    --v2-violet: #7a5bff;

    /* ── มุมโค้ง · เฟส 1 ───────────────────────────────────────────
       ดูเหตุผลเต็มใน git log และ .claude/verify/ */
    --v2-r-xs: 6px;    /* ป้าย · badge · chip */
    --v2-r-sm: 10px;   /* ปุ่ม · ช่องกรอก · แถวในลิสต์ */
    --v2-r-md: 14px;   /* การ์ด · widget */
    --v2-r-lg: 22px;   /* แผงใหญ่ · modal · hero */
    --v2-r-xl: var(--v2-r-lg);
    --v2-r-pill: 999px;

    /* ── ขนาดตัวอักษร · เฟส 1 ─────────────────────────────────────
       ดูเหตุผลเต็มใน git log และ .claude/verify/ */
    --v2-fs-11: 11px;  --v2-fs-12: 12px;  --v2-fs-13: 13px;  --v2-fs-14: 14px;
    --v2-fs-16: 16px;  --v2-fs-20: 20px;  --v2-fs-26: 26px;  --v2-fs-34: 34px;
    --v2-fs-44: 44px;  --v2-fs-56: 56px;

    /* ── ขนาดที่ไหลตามจอ · เฟส 3 ──────────────────────────────────
       ดูเหตุผลเต็มใน git log และ .claude/verify/ */
    --v2-fs-fluid-1: clamp(23px, 2.7vw, 29px);          /* หัวข้อรอง · Δ สูงสุด 3px */
    --v2-fs-fluid-2: clamp(29px, 3.3vw + 7px, 49px);    /* หัวข้อ section · Δ สูงสุด 7px */
    --v2-fs-fluid-3: clamp(34px, 4.5vw + 10px, 68px);   /* หัวข้อหน้า · Δ สูงสุด 8px */
    --v2-fs-fluid-4: clamp(56px, 10vw, 120px);          /* hero */

    /* ── ระยะห่าง · เฟส 3 ─────────────────────────────────────────
       7 ขั้นบนกริด 4px  ค่าที่ต่ำกว่า 3px และสูงกว่า 32px ไม่แตะ */
    --v2-sp-1: 4px;   --v2-sp-2: 8px;   --v2-sp-3: 12px;  --v2-sp-4: 16px;
    --v2-sp-5: 20px;  --v2-sp-6: 24px;  --v2-sp-7: 32px;

    /* ── จังหวะ · เฟส 4 ───────────────────────────────────────────
       ดูเหตุผลเต็มใน git log และ .claude/verify/ */
    --v2-t-fast: 140ms;   /* hover · สีพื้น · เส้นขอบ */
    --v2-t-base: 240ms;   /* เปิด-ปิด · เลื่อน */
    --v2-t-slow: 400ms;   /* แผงใหญ่ · overlay */

    /* ── ระยะบรรทัด · เฟส 2 ───────────────────────────────────────
       ดูเหตุผลเต็มใน git log และ .claude/verify/ */
    --v2-lh-flat: 1;
    --v2-lh-tight: 1.3;   /* หัวเรื่อง — ต่ำสุดที่ไทยรับได้ */
    --v2-lh-ui: 1.5;      /* ปุ่ม · ป้าย · แถว */
    --v2-lh-body: 1.7;    /* เนื้อความ */

    /* motion + blur */
    --v2-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --v2-blur: saturate(160%) blur(26px);
    --v2-blur-strong: saturate(180%) blur(40px);
}

/* ============================================================
 *  Dark mode tokens (default v2 direction)
 *  Palette aligned with smm-panel v4 handoff.
 * ============================================================ */
html.dark {
    /* legacy aliases — kept but retuned to v2 palette */
    --main-bg: #0f0f12;
    --second-bg: #08080b;
    --main-border: rgba(255, 255, 255, 0.10);
    --text-white: #ffffff;
    --text-color: #f7f7f8;
    --main-color: #ffd60a;
    --main-color-hover: #ffe24a;
    --main-color-trans: rgba(255, 214, 10, 0.14);
    --tp-color-red: #ff7a6a;
    --tp-color-green: #6fe4a8;
    --tp-color-orange: #ffaa5a;
    --border-radius: var(--v2-r-md);

    /* v2 extensions */
    --v2-bg: #0a0a0c;
    --v2-bg-soft: #08080b;
    --v2-bg-grad:
        radial-gradient(1200px 800px at 15% -10%, rgba(255, 210, 0, 0.14), transparent 55%),
        radial-gradient(900px 700px at 100% 20%, rgba(255, 180, 60, 0.08), transparent 55%),
        radial-gradient(800px 700px at 50% 120%, rgba(120, 90, 255, 0.10), transparent 55%),
        #08080b;

    --v2-ink: #f7f7f8;
    --v2-ink-dim: rgba(247, 247, 248, 0.72);
    /* 0.48 clears 4.5 against the page but lands at 4.18–4.45 on the raised
       panels, which is where these labels actually sit. 0.56 fixed most of them
       and left the Trustpilot line at 4.44 on the lightest panel of all; 0.62
       clears every surface in the theme. */
    --v2-ink-mute: rgba(247, 247, 248, 0.62);
    --v2-ink-soft: rgba(247, 247, 248, 0.30);

    --v2-line: rgba(255, 255, 255, 0.10);
    --v2-line-strong: rgba(255, 255, 255, 0.18);

    --v2-glass: rgba(255, 255, 255, 0.05);
    --v2-glass-2: rgba(255, 255, 255, 0.08);
    --v2-glass-3: rgba(255, 255, 255, 0.13);

    --v2-yellow: #ffd60a;
    --v2-yellow-2: #ffb400;
    --v2-yellow-soft: rgba(255, 214, 10, 0.14);
    --v2-yellow-glow: rgba(255, 214, 10, 0.40);

    --v2-ok: #6fe4a8;
    --v2-danger: #ff7a6a;
    --v2-warn: #ffaa5a;
    --v2-ok-soft: rgba(111, 228, 168, 0.15);
    --v2-danger-soft: rgba(255, 122, 106, 0.15);
    --v2-warn-soft: rgba(255, 170, 90, 0.15);

    --v2-nav-bg: rgba(12, 12, 16, 0.60);
    --v2-side-bg: rgba(14, 14, 18, 0.65);
    --v2-topbar-bg: rgba(14, 14, 18, 0.55);

    /* ── ความลึก · เฟส 1 · 3 ระดับ ────────────────────────────
       ดูเหตุผลเต็มใน git log และ .claude/verify/ */
    --v2-elev-1: 0 0 0 1px rgba(255, 255, 255, 0.07);
    --v2-elev-2: 0 0 0 1px rgba(255, 255, 255, 0.10), 0 6px 18px rgba(0, 0, 0, 0.55);
    --v2-elev-3: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 16px 40px rgba(0, 0, 0, 0.65);
    --v2-shadow-1: var(--v2-elev-2);
    --v2-shadow-2: var(--v2-elev-3);

    color-scheme: dark;
}

/* ============================================================
 *  Light mode tokens (warm paper · darker yellow for contrast)
 *  Matches both `<html>` (no class) and `<html class="light">`.
 *  Palette mirrored from smm-panel v4 (bg #f6f5f0, yellow #ffc800).
 * ============================================================ */
html,
html.light {
    /* legacy aliases — kept but retuned */
    --main-bg: #ffffff;
    --second-bg: #f6f5f0;
    --main-border: rgba(18, 18, 20, 0.10);
    --text-white: #ffffff;
    --text-color: #121214;
    --main-color: #ffc800;
    --main-color-hover: #ff9f00;
    --main-color-trans: rgba(255, 200, 0, 0.22);
    --tp-color-red: #d2432d;
    --tp-color-green: #18a06a;
    --tp-color-orange: #fd7e14;
    --border-radius: var(--v2-r-md);

    /* v2 extensions */
    --v2-bg: #f6f5f0;
    --v2-bg-soft: #ececf1;
    --v2-bg-grad:
        radial-gradient(1200px 800px at 15% -10%, rgba(255, 210, 0, 0.24), transparent 55%),
        radial-gradient(900px 700px at 100% 20%, rgba(255, 180, 60, 0.14), transparent 55%),
        radial-gradient(800px 700px at 50% 120%, rgba(120, 90, 255, 0.10), transparent 55%),
        #f6f5f0;

    --v2-ink: #121214;
    --v2-ink-dim: rgba(18, 18, 20, 0.72);
    /* 0.52 measured 3.6:1 on white — under AA everywhere it is used, which is
       eyebrows, form labels, table keys and every muted value on the site. It is
       one token rather than one element, so it is fixed here: 0.60 measures
       4.9:1. The dark counterpart is 0.48 and already clears 4.5 against the
       darker panel, so it is left alone. */
    --v2-ink-mute: rgba(18, 18, 20, 0.60);
    --v2-ink-soft: rgba(18, 18, 20, 0.32);

    --v2-line: rgba(18, 18, 20, 0.10);
    --v2-line-strong: rgba(18, 18, 20, 0.20);

    --v2-glass: rgba(255, 255, 255, 0.55);
    --v2-glass-2: rgba(255, 255, 255, 0.70);
    --v2-glass-3: rgba(255, 255, 255, 0.85);

    --v2-yellow: #ffc800;
    --v2-yellow-2: #ff9f00;
    --v2-yellow-soft: rgba(255, 200, 0, 0.22);
    --v2-yellow-glow: rgba(255, 200, 0, 0.35);

    --v2-ok: #18a06a;
    --v2-danger: #d2432d;
    --v2-warn: #d97706;

    /* ink versions of the accents, for light surfaces only — measured on white:
       ดูเหตุผลเต็มใน git log และ .claude/verify/ */
    /* one step darker than the 4.61:1-on-white value this started at: the
       wallet figure sits on a yellow-tinted chip, not on white, where #8f6400
       reached only 4.24 once the font drops to 18px at mobile. #7d5700 is
       5.23 there and 6.49 on white. */
    --v2-yellow-text: #7d5700;
    /* ok measured 4.43 against its own mint fill rather than white, which is the
       surface that matters — one step darker clears it at 5.25 */
    --v2-ok-text:     #0c6d42;
    --v2-danger-text: #b5332a;
    --v2-info-text:   #0a6e93;
    --v2-warn-text:   #8a4d05;
    --v2-ok-soft: rgba(24, 160, 106, 0.14);
    --v2-danger-soft: rgba(210, 67, 45, 0.14);
    --v2-warn-soft: rgba(217, 119, 6, 0.14);

    --v2-nav-bg: rgba(255, 255, 255, 0.70);
    --v2-side-bg: rgba(255, 255, 255, 0.75);
    --v2-topbar-bg: rgba(255, 255, 255, 0.65);

    --v2-elev-1: 0 0 0 1px rgba(18, 18, 20, 0.08);
    --v2-elev-2: 0 0 0 1px rgba(18, 18, 20, 0.08), 0 6px 18px rgba(18, 18, 20, 0.08);
    --v2-elev-3: 0 0 0 1px rgba(18, 18, 20, 0.10), 0 16px 40px rgba(18, 18, 20, 0.14);
    --v2-shadow-1: var(--v2-elev-2);
    --v2-shadow-2: var(--v2-elev-3);

    color-scheme: light;
}

/* A39 — Panel A token set, scoped to the authed shell  (2026-08-03)
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */
body.v2-dash {
    --v2-r-sm: 12px;   /* 10 → 12 · Panel A --rs · ปุ่มเมนู กล่องเล็ก */
    --v2-r-lg: 20px;   /* 22 → 20 · Panel A --rc · การ์ด แผงใหญ่ */
}

html body.v2-dash {
    /* ── ธีมสว่าง · พื้นกระดาษอุ่น การ์ดขาว ไม่มีเส้นขอบ ใช้เงานุ่ม ── */
    --v2-surface: #ffffff;
    --v2-surface-2: #faf9f6;
    --v2-well: #f4f4f0;

    --v2-sidebar: #141410;
    --v2-on-sidebar: #f7f7f3;
    --v2-on-sidebar-dim: rgba(247, 247, 243, 0.55);

    --v2-hero: #141410;
    --v2-on-hero: #f7f7f3;
    --v2-on-hero-dim: rgba(247, 247, 243, 0.66);
    --v2-hero-btn: #ffd60a;
    --v2-hero-btn-ink: #1a1500;

    --v2-acc-line: #e8c200;
}

html.dark body.v2-dash {
    /* ── ธีมมืด · เทาอมน้ำเงินเย็น ทำให้เหลืองแสบขึ้น ── */
    --v2-surface: #1a1c24;
    --v2-surface-2: #22252f;
    --v2-well: #111319;

    --v2-sidebar: #151822;
    --v2-on-sidebar: #f7f7f3;
    --v2-on-sidebar-dim: rgba(247, 247, 243, 0.58);

    --v2-hero: #ffd60a;
    --v2-on-hero: #1a1500;
    --v2-on-hero-dim: rgba(26, 21, 0, 0.72);
    --v2-hero-btn: #16160f;
    --v2-hero-btn-ink: #ffd60a;

    --v2-acc-line: rgba(255, 214, 10, 0.42);
}

/* A44 — Panel A token set, part 2: the kit's tone and elevation  (2026-08-03)
   ‼ --v2-elev is a NEW name, and --v2-elev-2 is deliberately NOT touched.
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */
html body.v2-dash {
    /* ธีมสว่าง · ไม่มีวงแหวน ดีไซน์ 2a ใช้เงานุ่มแทนเส้นขอบ */
    --v2-elev:
        0 1px 2px rgba(20, 21, 15, 0.05),
        0 10px 28px -14px rgba(20, 21, 15, 0.18);
    --v2-info-soft: rgba(10, 110, 147, 0.12);
}

html.dark body.v2-dash {
    /* ธีมมืด · ยังมีวงแหวนขาวบาง เพราะพื้นการ์ดกับพื้นหลังต่างกันน้อยเกินกว่าจะแยกด้วยเงาอย่างเดียว */
    --v2-elev:
        0 0 0 1px rgba(255, 255, 255, 0.075),
        0 14px 32px -16px rgba(0, 0, 0, 0.8);
    --v2-info-soft: rgba(77, 208, 255, 0.14);
}

/* ============================================================
 *  body baseline — Thai-first font stack, global bg gradient
 * ============================================================ */
body {
    font-family: var(--v2-f-thai);
    font-weight: 400;
    font-size: 14px;
    line-height: var(--v2-lh-body);
    /* 320, not 375. Paired with overflow-x:hidden below, a 375 floor does not
       ดูเหตุผลเต็มใน git log และ .claude/verify/ */
    min-width: 320px;
    color: var(--v2-ink);
    background: var(--v2-bg-grad);
    background-color: var(--v2-bg);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
 *  v2 utilities — shared across all restyled pages
 *  Prefix `.v2-` to keep isolated from legacy class names.
 * ============================================================ */

/* typography helpers */
.v2-dis {
    font-family: var(--v2-f-dis);
    font-weight: 700;
    line-height: var(--v2-lh-tight);
}
.v2-mono {
    font-family: var(--v2-f-mono);
    letter-spacing: 0.02em;
}
.v2-serif-i {
    font-family: var(--v2-f-serif);
    font-style: italic;
    font-weight: 400;
    color: var(--v2-yellow);
}
.v2-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-2);
    font-family: var(--v2-f-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--v2-ink-mute);
    font-weight: 500;
}
.v2-eyebrow::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--v2-yellow);
    box-shadow: 0 0 12px var(--v2-yellow-glow);
}

/* max-width wrapper */
.v2-wrap {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 var(--v2-sp-6);
}

/* section spacing */
.v2-section {
    padding: 96px 0;
    position: relative;
    z-index: 2;
}
.v2-section-head {
    display: flex;
    flex-direction: column;
    gap: var(--v2-sp-3);
    margin-bottom: 48px;
    max-width: 680px;
}
.v2-section-head h2 {
    font-family: var(--v2-f-dis);
    font-size: var(--v2-fs-fluid-2);
    font-weight: 700;
    line-height: var(--v2-lh-tight);
    margin: 0;
    color: var(--v2-ink);
}
.v2-section-head h2 i {
    font-family: var(--v2-f-serif);
    font-style: italic;
    color: var(--v2-yellow);
    font-weight: 400;
}
.v2-section-head p {
    font-size: 16px;
    color: var(--v2-ink-dim);
    margin: 0;
    line-height: var(--v2-lh-body);
}

/* frosted glass surfaces */
.v2-glass {
    background: var(--v2-glass-2);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-lg);
    backdrop-filter: var(--v2-blur);
    -webkit-backdrop-filter: var(--v2-blur);
    box-shadow: var(--v2-shadow-1);
    position: relative;
}
.v2-glass-strong {
    background: var(--v2-glass-3);
    border: 1px solid var(--v2-line-strong);
    border-radius: var(--v2-r-xl);
    backdrop-filter: var(--v2-blur-strong);
    -webkit-backdrop-filter: var(--v2-blur-strong);
    box-shadow: var(--v2-shadow-2);
}

/* generic card (denser than glass) */
.v2-card {
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-md);
    padding: var(--v2-sp-5);
    backdrop-filter: var(--v2-blur);
    -webkit-backdrop-filter: var(--v2-blur);
    color: var(--v2-ink);
}
.v2-card-hd {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    gap: var(--v2-sp-3);
}
.v2-card-hd h3 {
    font-family: var(--v2-f-dis);
    font-size: 16px;
    margin: 0;
    font-weight: 600;
    color: var(--v2-ink);
}

/* pill buttons (marketing / hero CTAs) */
.v2-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-2);
    height: 52px;
    padding: 0 var(--v2-sp-6);
    border-radius: var(--v2-r-pill);
    font-family: var(--v2-f-dis);
    font-weight: 600;
    font-size: 14px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform var(--v2-t-fast) var(--v2-ease), background var(--v2-t-base), box-shadow var(--v2-t-base);
    text-decoration: none !important;
    line-height: 1;
    white-space: nowrap;
}
.v2-pill-y {
    background: var(--v2-yellow);
    color: var(--v2-yellow-ink);
}
.v2-pill-y:hover {
    transform: translateY(-1px);
    background: #ffe24a;
    color: var(--v2-yellow-ink);
    box-shadow: 0 12px 40px -10px var(--v2-yellow-glow);
}
.v2-pill-g {
    background: var(--v2-glass-2);
    border-color: var(--v2-line-strong);
    color: var(--v2-ink);
    backdrop-filter: var(--v2-blur);
    -webkit-backdrop-filter: var(--v2-blur);
}
.v2-pill-g:hover {
    background: var(--v2-glass-3);
    color: var(--v2-ink);
}
.v2-pill-sm {
    height: 40px;
    padding: 0 var(--v2-sp-4);
    font-size: 13px;
}

/* compact buttons (in-app) */
.v2-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-2);
    padding: var(--v2-sp-2) var(--v2-sp-3);
    border-radius: var(--v2-r-sm);
    font-family: var(--v2-f-dis);
    font-weight: 600;
    font-size: 13px;
    border: 1px solid var(--v2-line);
    background: var(--v2-glass);
    color: var(--v2-ink);
    cursor: pointer;
    text-decoration: none !important;
    transition: background var(--v2-t-fast), transform var(--v2-t-fast) var(--v2-ease), border-color var(--v2-t-fast);
    line-height: var(--v2-lh-tight);
}
.v2-btn:hover {
    background: var(--v2-glass-2);
    color: var(--v2-ink);
    border-color: var(--v2-line-strong);
}
.v2-btn-y {
    background: var(--v2-yellow);
    color: var(--v2-yellow-ink);
    border-color: transparent;
}
.v2-btn-y:hover {
    background: #ffe24a;
    color: var(--v2-yellow-ink);
    border-color: transparent;
}
.v2-btn-sm {
    padding: var(--v2-sp-1) var(--v2-sp-2);
    font-size: 12px;
}
.v2-btn-danger {
    color: var(--v2-danger);
}
.v2-btn-block {
    display: flex;
    width: 100%;
    justify-content: center;
}

/* form fields */
.v2-field {
    display: flex;
    flex-direction: column;
    gap: var(--v2-sp-1);
}
.v2-field + .v2-field {
    margin-top: 14px;
}
.v2-field > label {
    font-family: var(--v2-f-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--v2-ink-mute);
    text-transform: uppercase;
    font-weight: 500;
}
.v2-field input:not([type="checkbox"]):not([type="radio"]),
.v2-field select,
.v2-field textarea {
    width: 100%;
    padding: var(--v2-sp-3) var(--v2-sp-3);
    border-radius: var(--v2-r-sm);
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    color: var(--v2-ink);
    font: inherit;
    font-family: var(--v2-f-thai);
    font-size: 14px;
    outline: none;
    transition: border-color var(--v2-t-fast), background var(--v2-t-fast);
    line-height: var(--v2-lh-tight);
}
.v2-field input:focus,
.v2-field select:focus,
.v2-field textarea:focus {
    border-color: var(--v2-yellow);
    background: var(--v2-glass-2);
}
.v2-field .hint {
    font-size: 12px;
    color: var(--v2-ink-mute);
}
.v2-field .err {
    font-size: 12px;
    color: var(--v2-danger);
}

/* status chip */
.v2-status {
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-1);
    padding: var(--v2-sp-1) var(--v2-sp-2);
    border-radius: var(--v2-r-pill);
    font-family: var(--v2-f-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    font-weight: 600;
    text-transform: uppercase;
    white-space: nowrap;
}
.v2-status::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}
.v2-status.done { color: var(--v2-ok); background: var(--v2-ok-soft); }
.v2-status.run { color: var(--v2-yellow); background: var(--v2-yellow-soft); }
.v2-status.pend { color: var(--v2-ink-mute); background: var(--v2-glass-2); }
.v2-status.part { color: var(--v2-warn); background: var(--v2-warn-soft); }
.v2-status.fail { color: var(--v2-danger); background: var(--v2-danger-soft); }
.v2-status.cancel { color: var(--v2-ink-soft); background: var(--v2-glass); }

/* table */
.v2-tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.v2-tbl thead th {
    font-family: var(--v2-f-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    color: var(--v2-ink-mute);
    text-transform: uppercase;
    text-align: left;
    padding: var(--v2-sp-2) var(--v2-sp-3);
    border-bottom: 1px solid var(--v2-line);
    font-weight: 500;
}
.v2-tbl tbody td {
    padding: var(--v2-sp-3) var(--v2-sp-3);
    border-bottom: 1px dashed var(--v2-line);
    color: var(--v2-ink-dim);
}
.v2-tbl tbody tr:hover td {
    background: var(--v2-glass);
    color: var(--v2-ink);
}
.v2-tbl tbody td b {
    color: var(--v2-ink);
    font-weight: 600;
}
.v2-tbl .mono {
    font-family: var(--v2-f-mono);
    color: var(--v2-ink-mute);
    font-size: 12px;
}

/* stat cards */
.v2-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--v2-sp-3);
}
@media (max-width: 900px) {
    .v2-stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
.v2-stat {
    padding: var(--v2-sp-5);
    border-radius: var(--v2-r-md);
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    position: relative;
    overflow: hidden;
    backdrop-filter: var(--v2-blur);
    -webkit-backdrop-filter: var(--v2-blur);
}
.v2-stat .l {
    font-family: var(--v2-f-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    color: var(--v2-ink-mute);
    text-transform: uppercase;
}
.v2-stat .n {
    font-family: var(--v2-f-dis);
    font-size: 26px;
    font-weight: 700;
    margin-top: 6px;
    line-height: 1;
    color: var(--v2-ink);
}
.v2-stat .d {
    font-size: 12px;
    margin-top: 6px;
    color: var(--v2-ink-dim);
}
.v2-stat .d.ok { color: var(--v2-ok); }
.v2-stat .d.dn { color: var(--v2-danger); }

/* floating orbs background (body-level decoration) */
.v2-orbs {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}
.v2-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.6;
}
.v2-orb.y1 {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, var(--v2-yellow), transparent 60%);
    top: -100px;
    left: -100px;
    opacity: 0.35;
}
.v2-orb.p1 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, var(--v2-violet), transparent 60%);
    top: 40%;
    right: -150px;
    opacity: 0.30;
}
.v2-orb.c1 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, var(--v2-info), transparent 60%);
    bottom: -150px;
    left: 30%;
    opacity: 0.20;
}
html.light .v2-orb {
    opacity: 0.45;
}
html.light .v2-orb.p1 { opacity: 0.20; }
html.light .v2-orb.c1 { opacity: 0.14; }

/* small utility atoms */
.v2-hidden { display: none !important; }
.v2-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.v2-row { display: flex; gap: var(--v2-sp-3); flex-wrap: wrap; }
.v2-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--v2-sp-3); }
.v2-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--v2-sp-3); }
.v2-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--v2-sp-3); }
@media (max-width: 900px) {
    .v2-grid-3, .v2-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
    .v2-grid-2, .v2-grid-3, .v2-grid-4 { grid-template-columns: 1fr; }
}

a {
    text-decoration: none !important;
    color: var(--text-color);
}

a,
[type="checkbox"] {
    cursor: pointer;
}

a:hover {
    color: var(--main-color);
}

li {
    list-style-type: none;
}

button,
input {
    background-color: transparent;
    line-height: 0;
    border: 0;
    padding: 0;
}

button:focus,
input:focus {
    outline: 0 !important;
    border: none !important;
}

b,
strong {
    font-weight: 800;
    line-height: var(--v2-lh-body);
    transition: all var(--v2-t-fast) var(--v2-ease);
}


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

::-webkit-scrollbar-review-img {
    background: var(--main-border);
    border-radius: var(--v2-r-xs);
}

::-webkit-scrollbar-track {
    background: var(--second-bg);
}

.primary-color {
    color: var(--main-color) !important;
    font-weight: 500;
}

.alert {
    border: none !important;
}

/* A48 · เดิมสองกฎนี้ไม่มีตัวจำกัด scope และมี !important ของตัวเอง จึงชนะบล็อก
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */
body#outside .alert.alert-success {
    color: #09b797 !important;
    background: #2dfad431 !important;
}

body#outside .alert.alert-danger {
    color: #ee5b5b !important;
    background: #ee5b5b41 !important;
}

.badge {
    background: var(--main-color) !important;
    color: #fff;
    font-weight: 300;
    font-size: 12px;
}

.h-section {
    margin: 100px 0;
}

.h-section.section-50 {
    margin: 50px 0 100px 0;
}

.h-section.section-0 {
    margin: 50px 0;
}

.h-section.hs-bg {
    background:
        radial-gradient(
            50% 50% at 50% 50%,
            rgb(255 224 49 / 15%) 0%,
            var(--second-bg) 100%
        ),
        linear-gradient(
            180deg,
            var(--second-bg) 0%,
            var(--second-bg) 57.28%,
            var(--second-bg) 97.75%
        );
}

.c-pointer {
    cursor: pointer;
}

.p-relative {
    position: relative;
}

.p-absolute {
    position: absolute;
}

.transition {
    transition: all var(--v2-t-fast) var(--v2-ease);
}

.hidden {
    display: none !important;
}

input[type="checkbox"] {
    display: none;
}

input[type="checkbox"] + label {
    display: block;
    position: relative;
    padding-left: var(--v2-sp-7);
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 20px;
    color: #ddd;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

input[type="checkbox"] + label:last-child {
    margin-bottom: 0;
}

input[type="checkbox"] + label:before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    border: 2px solid var(--main-color);
    border-radius: var(--v2-r-sm);
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0.6;
    -webkit-transition:
        all 0.12s,
        border-color 0.08s;
    transition:
        all var(--v2-t-fast),
        border-color var(--v2-t-fast);
}

input[type="checkbox"]:checked + label:before {
    width: 10px;
    top: -5px;
    left: 10px;
    border-radius: 0;
    opacity: 1;
    border-top-color: transparent;
    border-left-color: transparent;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.btn {
    position: relative;
    display: flex;
    justify-content: center;
    padding: var(--v2-sp-3) var(--v2-sp-6);
    align-items: center;
    gap: var(--v2-sp-2);
    border-radius: var(--v2-r-md);
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    white-space: nowrap;
    box-shadow: none !important;
    outline: 0 !important;
}

.btn:hover,
.btn:focus {
    box-shadow: none !important;
    outline: 0 !important;
}
/* A56 · `color: var(--text-color) !important` เคยอยู่ในกฎข้างบนนี้แบบไม่มี scope
   --text-color เป็นสีขาว พอ hover ปุ่มหลัก (พื้นเหลืองอ่อน) ตัวหนังสือเลยขาวบนเหลือง
   วัดได้ contrast 1.23 — ป้ายบนปุ่มที่ถูกกดบ่อยที่สุดในเว็บหายไปตอนเอาเมาส์ไปชี้
   ‼ ผูกกับ guest เท่านั้น guest ได้ค่าเดิมเป๊ะ ห้ามถอด body#outside ออก
   ฝั่ง authed ตกไปใช้ของบล็อก Panel A: --v2-yellow-ink บน #ffe24a */
body#outside .btn:hover,
body#outside .btn:focus {
    color: var(--text-color) !important;
}

.btn-sm {
    font-size: 14px !important;
    padding: var(--v2-sp-1) var(--v2-sp-3);
}

.btn-rounded {
    background: var(--main-border);
    border-radius: var(--border-radius);
}

.btn-border {
    border: 1px solid var(--main-border) !important;
}

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

.btn-100.btn-icon {
    display: flex;
}

.btn-dark,
.btn-dark:hover,
.btn-dark:focus {
    background: var(--main-bg) !important;
}

.btn-primary {
    background: #fed130;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #000000;
    border-radius: var(--v2-r-md);
    transition: var(--v2-t-base) all;
}

.btn-primary:hover,
.btn-primary:focus {
    background: #ddbc1b;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    outline: 0 !important;
    transition: var(--v2-t-base) all;
}
/* A56 · `color: #fff !important` เคยอยู่ในกฎข้างบนนี้แบบไม่มี scope
   พื้นปุ่มหลักตอน hover เป็นเหลืองอ่อน (#ffe24a) ตัวหนังสือขาวบนนั้นวัดได้ contrast 1.29
   ป้ายบนปุ่มที่ถูกกดบ่อยที่สุดในเว็บหายไปตอนเอาเมาส์ไปชี้ — และเป็นแบบนี้บน live มาตลอด
   ‼ ผูกกับ guest เท่านั้น ห้ามถอด body#outside ออก
   ฝั่ง authed ตกไปใช้ --v2-yellow-ink ของบล็อก Panel A */
body#outside .btn-primary:hover,
body#outside .btn-primary:focus {
    color: #fff !important;
}

.btn-secondary {
    background: #ffd400;
    color: #fff !important;
    border: 1px solid #27303e;
    box-shadow:
        0px 1.182px 2.365px 0px rgb(19 27 38),
        0px 0px 0px 1.182px #27303e;
}

.btn-secondary:hover,
.btn-secondary:focus {
    background: #ddbc1b;
    color: #fff !important;
    border: 1px solid #27303e;
    box-shadow:
        0px 1.182px 2.365px 0px rgb(19 27 38),
        0px 0px 0px 1.182px #27303e;
}

.light .btn-secondary,
.light .btn-secondary:hover,
.light .btn-secondary:focus {
    background: var(--main-bg);
    color: var(--text-color) !important;
    border: 1px solid #ffc107;
    box-shadow:
        0px 1.182px 2.365px 0px rgb(19 27 38),
        0px 0px 0px 1.182px #27303e;
}

.btn-signup {
    background:
        radial-gradient(
            397.75% 81.29% at 109.6% 34.26%,
            #01993e 0%,
            #038234 99.99%,
            #29cb69 100%
        ),
        #11c456;
    box-shadow:
        0px 1.182px 2.365px 0px rgb(49 155 91),
        0px 0px 0px 1.182px #23a055;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    border-radius: var(--v2-r-md);
}

.btn-signup:hover,
.btn-signup:focus {
    background:
        radial-gradient(
            397.75% 81.29% at 109.6% 34.26%,
            #29cb69 0%,
            #038234 99.99%,
            #01993e 100%
        ),
        #01993e;
    box-shadow:
        0px 1.182px 2.365px 0px rgb(49 155 91),
        0px 0px 0px 1.182px #23a055;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
    outline: 0 !important;
}

.btn-danger {
    background: #bb2d3b;
    border: 1px solid #bb2d3b20;
    color: #fff;
}

.btn-danger:hover,
.btn-danger:focus {
    background: #e83042;
    color: #fff !important;
}

.btn-lg {
    font-size: 14px;
    padding: var(--v2-sp-4) 34px;
    font-weight: 500;
}

.btn-outline {
    padding: var(--v2-sp-3) var(--v2-sp-7);
    border: 1px solid var(--main-bg);
    color: var(--main-bg) !important;
    background: transparent;
}

.btn-purple {
    background: linear-gradient(
            90deg,
            var(--c1, rgb(214, 71, 89)),
            var(--c2, rgb(175, 0, 158)) 51%,
            var(--c1, rgb(148, 40, 139))
        )
        var(--x, 0) / 200%;
    color: #fff;
}

.hm-wrapper .btn.btn-outline:hover {
    background: rgba(255, 255, 255, 0.3);
    color: #fff !important;
}

.form-group {
    position: relative;
}

.form-group label {
    color: var(--text-color);
    width: 100%;
}

.form-control,
.form-select {
    padding: var(--v2-sp-3) var(--v2-sp-6);
    font-size: 14px;
    font-weight: 500;
    border-radius: var(--v2-r-md);
    border: 1px solid var(--main-border);
    background: var(--second-bg);
    color: var(--text-color);
    height: 55px;
    width: 100%;
}

.form-control:focus,
.form-select:focus {
    box-shadow: none !important;
    background: var(--main-bg);
    border: 1px solid var(--main-color) !important;
    color: var(--text-color);
}

.form-control:disabled,
.form-control[readonly] {
    background-color: var(--main-bg);
}

select.form-control {
    border: none;
}

.form-group label {
    padding-bottom: var(--v2-sp-1);
}

.form-group .forget-pass {
    position: absolute;
    right: 13px;
    top: 47px;
    background: var(--main-color);
    width: 32px;
    height: 32px;
    border-radius: var(--v2-r-pill);
    text-align: center;
    line-height: 32px;
}

.form-group .forget-pass:hover {
    background: var(--main-color-hover);
}

.form-group .forget-pass a {
    color: #fff;
}

body.stop-body {
    overflow: hidden;
}

.head-out {
    position: fixed;
    top: 0px;
    background-color: transparent;
    width: 100%;
    z-index: 1030;
}

.head-out.fixed {
    border-bottom: 1px solid var(--main-border);
    background: rgb(242 242 242 / 80%);
}

.dark .head-out.fixed {
    border-bottom: 1px solid var(--main-border);
    background-color: rgb(4, 10, 24, 0.7);
}

.home-logo img {
    max-height: 50px;
}

.hm-wrapper {
    display: block;
    position: fixed;
    top: -1px;
    left: -1px;
    width: calc(100% + 2px);
    padding: 77px 0 var(--v2-sp-2) 0;
    height: auto;
    transition: var(--v2-t-fast) var(--v2-ease);
    transform: translateY(-101%);
    opacity: 0.4;
    background: var(--second-bg);
    z-index: 0;
    border-radius: 0 0 var(--v2-r-md) var(--v2-r-md);
}

@media (max-width: 991.98px) {
    .light .hm-wrapper {
        background: #ddd;
    }
}

.hm-wrapper.active {
    transform: translateY(0);
    opacity: 1;
}

.sm-header {
    display: block;
    padding: var(--v2-sp-3) 0;
    transition: var(--v2-t-fast) var(--v2-ease);
}

.menu-btn {
    height: 48px;
    width: 48px;
    border-radius: var(--border-radius);
    background-color: rgb(255 180 49 / 15%);
    color: var(--main-color);
    outline: none;
    border: none;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.b-menu-close {
    height: 48px;
    width: 48px;
    border-radius: var(--border-radius);
    background-color: var(--main-bg);
    color: var(--text-color);
    outline: none;
    border: none;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 20px;
    top: 20px;
    z-index: 2000;
}

.home-fade {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-x: hidden;
    pointer-events: none;
}

.home-fade > div {
    position: relative;
    width: 100%;
}

.hf-glow {
    position: absolute;
    width: 1176px;
    height: 850px;
    left: -669px;
    top: -886px;
    background: linear-gradient(180deg, rgba(255, 31, 0, 0), var(--main-color));
    -webkit-filter: blur(239.122px);
    filter: blur(239.122px);
    -webkit-transform: rotate(-58.53deg);
    transform: rotate(-58.53deg);
}

.dark-mode.dark {
    display: block;
}

.light .dark-mode.light,
.dark-mode.light {
    display: none;
}

.dark .dark-mode.dark {
    display: none;
}

.dark .dark-mode.light {
    display: block;
}

.header-menu {
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0;
    gap: var(--v2-sp-2);
    padding: var(--v2-sp-2) 0 var(--v2-sp-5) 0;
}

.header-menu .hm-item {
    position: relative;
    display: flex;
    justify-content: flex-start;
}

.header-menu .hm-item .hm-link {
    font-weight: 400;
    font-size: 26px;
    line-height: 125%;
    color: var(--text-color) !important;
    padding: var(--v2-sp-2) 0;
    transition: var(--v2-t-fast) var(--v2-ease);
    text-decoration: none;
    display: inline-block;
    text-align: left;
}

.header-menu .hm-item .hm-link:hover {
    opacity: 0.7;
}

.header-menu .hm-item .hm-link.active {
    opacity: 1;
}

.header-menu .hm-item .hm-link.active::before {
    opacity: 1;
}

.home-header {
    margin-top: -86px;
    padding-top: 86px;
    position: relative;
    background:
        url(https://storage.perfectcdn.com/nb2br9/oe2oqi31hs6djxcp.svg),
        var(--second-bg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.home-header .home-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.57;
}

.home-header .header-content {
    position: relative;
    z-index: 5;
}

.home-header .home-images {
    position: relative;
}

.home-hero--image {
    position: absolute;
    z-index: 2;
}

.home-header .home-hero--image.left {
    top: 150px;
    transform-origin: center center;
    left: 40px;
}

.home-header .home-hero--image.left img {
    animation: heartBeat 1.5s infinite ease-in-out;
}

.home-header .home-hero--image.right {
    top: 290px;
    transform-origin: center center;
    right: 40px;
}

.home-header .home-hero--image .emoji {
    position: absolute;
    top: -18px;
    right: 0px;
    width: 35px;
    height: 35px;
    transform: rotate(-20deg);
    font-size: 34px;
}

.login-card .btn {
    width: 100%;
}

.login-card .form-control .login-card .form-control:focus {
    border-radius: var(--v2-r-md)!important;
    border: 1px solid #303c58 !important;
    background: #09101e !important;
}

.login-card {
    border: 1px solid var(--main-border);
    background:
        radial-gradient(
            77.87% 74.89% at 99.57% 106.76%,
            rgba(30, 54, 119, 0.2) 0%,
            rgba(6, 11, 26, 0.2) 100%
        ),
        var(--main-bg);
    box-shadow:
        0 1.182px 2.365px 0 rgb(19 27 38),
        0 0 0 1.182px #000;
    border-radius: var(--v2-r-md);
    margin: 35px 0 0 0;
    padding: var(--v2-sp-5) var(--v2-sp-4);
}

.light .login-card {
    background: var(--main-bg);
    box-shadow: var(--v2-elev-1),
        0 0 0 1.182px #faebeb;
}

.login-card .lgn-btn {
    background: var(--second-bg);
    width: 55px;
    height: 55px;
    border-radius: var(--v2-r-md);
    text-align: center;
    line-height: 50px;
    border: 1px solid var(--main-border);
    cursor: pointer;
}

.login-card .login-remember-me input {
    display: none;
}

.login-card .login-remember-me input:checked + .lgn-btn {
    background: var(--main-color);
    border-color: var(--main-border);
    color: #fff;
}

.login-card .btn-primary {
    height: 55px;
}

@media (max-width: 991.98px) {
    .login-card {
        padding: var(--v2-sp-4) 0;
    }
    .login-card .btn-primary {
        min-width: 130px;
    }
}

.card {
    border-radius: var(--border-radius);
    background: #fff;
    box-shadow: var(--v2-elev-1),
        0px 0px 0px 1.182px #f7f8f9;
}

.dark .card {
    border-radius: var(--border-radius);
    background: var(--main-bg);
    box-shadow:
        0px 1.182px 2.365px 0px rgb(19 27 38),
        0px 0px 0px 1.182px #1a2433;
}

.card.card-shadow {
    position: relative;
    overflow: hidden;
}

.card-shadow::before {
    content: "";
    position: absolute;
    top: 95%;
    right: 80%;
    width: 60%;
    height: 50%;
    transform: translate(100%, 60%) scale(1);
    transition: var(--v2-t-fast) var(--v2-ease);
    background: linear-gradient(
        120deg,
        var(--main-color) 0%,
        var(--main-color-trans) 100%
    );
    border-radius: var(--v2-r-pill);
    filter: blur(60px);
    z-index: 0;
}

.card .form-control::placeholder {
    color: var(--text-color);
}

.body-scroll {
    height: 500px;
    overflow-y: scroll;
}

.card.order-filter {
    position: relative;
    overflow: hidden !important;
}

.card.order-filter .card-body::before,
.card.order-filter .card-body::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 10;
}

.card.order-filter .card-body::before {
    -webkit-box-shadow: var(--v2-elev-3);
    box-shadow: var(--v2-elev-3);
    left: -40px;
    top: 0;
    width: 40px;
}

.card.order-filter .card-body::after {
    -webkit-box-shadow: var(--v2-elev-3);
    box-shadow: var(--v2-elev-3);
    right: -40px;
    top: 0;
    width: 40px;
}

.dark .card.order-filter .card-body::before {
    -webkit-box-shadow: 10px 0px 70px rgb(49, 156, 255, 0.15);
    box-shadow: 10px 0px 70px rgb(49, 156, 255, 0.15);
}

.dark .card.order-filter .card-body::after {
    -webkit-box-shadow: 10px 0px 70px rgb(49, 156, 255, 0.15);
    box-shadow: 10px 0px 70px rgb(49, 156, 255, 0.15);
}

.card.order-filter .card-body {
    padding: 0.5rem 1.25rem 0.5rem 1.25rem;
}

.ns-name {
    background: var(--main-color);
    border-radius: var(--border-radius);
    padding: var(--v2-sp-4);
    text-align: center;
    color: #000000;
}

.ns-info {
    padding-top: var(--v2-sp-2);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--v2-sp-2);
    flex-wrap: wrap;
}

.ns-info > .ns-item {
    flex: 0 0 calc(50% - 5px);
}

.ns-info .ns-item {
    display: flex;
    gap: var(--v2-sp-4);
    padding: var(--v2-sp-2);
    align-items: center;
    border-radius: var(--border-radius);
    border: 1px solid var(--main-border);
    background: var(--second-bg);
}

.ns-info .ns-item .icon {
    width: 35px;
    height: 35px;
    line-height: 35px;
    border-radius: var(--v2-r-sm);
    background: var(--main-color);
    color: #000;
    text-align: center;
}

.ns-info .ns-item .text {
    color: var(--text-color);
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
}

@media only screen and (min-width: 992px) {
    .head-out.fixed {
        border: 1px solid var(--main-border);
        border-top: none;
        border-left: none;
        border-right: none;
        background: rgb(242 242 242 / 80%);
        -webkit-backdrop-filter: blur(15px);
        backdrop-filter: blur(15px);
    }

    .dark .head-out.fixed {
        background-color: rgb(4, 10, 24, 0.7);
        backdrop-filter: blur(30px);
    }

    .head-out.fixed .header-menu .hm-item .hm-link {
        padding: var(--v2-sp-5) var(--v2-sp-5);
    }

    .hm-wrapper {
        display: block;
        bottom: inherit;
        background-color: transparent;
        position: relative;
        border-radius: 0;
        padding: 0;
        width: 100%;
        transform: none;
        overflow: inherit;
        opacity: 1 !important;
    }

    .sm-header {
        display: none;
    }

    .b-menu-close {
        display: none;
    }

    .header-btn.without-icon {
        background-color: transparent;
        padding: var(--v2-sp-3) var(--v2-sp-7);
    }

    .header-btn.without-icon .icon {
        display: none;
    }

    .header-menu {
        display: inline-flex;
        align-items: center;
        flex-direction: row;
        padding: var(--v2-sp-2) 0 var(--v2-sp-2) 0;
    }

    .header-menu .hm-item .hm-link {
        padding: 34px var(--v2-sp-5);
        display: block;
        font-size: 20px;
    }

    .home-header {
        margin-top: -127px;
        padding-top: 127px;
        padding-bottom: 50px;
    }

    .home-header .header-content {
        padding: 150px 0 125px 0;
    }
}

.home-content-badge {
    display: flex;
    padding: var(--v2-sp-1) var(--v2-sp-4) var(--v2-sp-1) var(--v2-sp-1);
    align-items: center;
    gap: var(--v2-sp-2);
    border-radius: var(--v2-r-pill);
    border: 1px solid var(--main-border);
    background: var(--main-bg);
    width: max-content;
}

.home-content-badge .icon {
    background: var(--main-color-trans);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: var(--main-color);
    font-size: 16px;
    font-style: normal;
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-content-badge .text {
    color: var(--text-color);
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 14.4px;
    text-align: start;
    padding: 0;
    margin: 0;
}

.home-content h2 {
    font-size: 44px;
    font-weight: 600;
    font-style: normal;
    line-height: 54px;
    color: var(--text-color);
}

.home-content p {
    max-width: 850px;
    margin: auto;
    font-size: 14px;
    line-height: 26px;
    color: #9db0d9;
}

.light .home-content p {
    color: #28344e;
}

.home-content small {
    font-family: var(--v2-f-serif);
    font-style: italic;
    font-size: 26px;
    color: var(--main-color);
}

.home-content h2 span {
    background-image: -webkit-gradient(
        linear,
        left top,
        right top,
        from(#126fc5),
        to(var(--main-color))
    );
    background-image: -webkit-linear-gradient(
        left,
        #126fc5 0%,
        var(--main-color) 100%
    );
    background-image: -o-linear-gradient(
        left,
        #126fc5 0%,
        var(--main-color) 100%
    );
    background-image: linear-gradient(
        to right,
        #126fc5 0%,
        var(--main-color) 100%
    );
    background-size: 200% auto;
    font-weight: 700;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: 3s linear infinite textclip;
    position: relative;
    display: inline-block;
}


.dark .dark-mode i {
    color: #ffc107;
}

.dark-mode i {
    font-size: 20px;
    color: #133bbe;
    line-height: 18px;
}

.lg-card {
    background: transparent;
    background-size: cover !important;
    background-position: center !important;
    overflow: hidden !important;
    box-shadow: none !important;
    border-radius: var(--v2-r-lg)!important;
}

.lg-card .lg-card-body {
    background: var(--main-color-trans) !important;
}

.lg-card.c-1 {
    background-image: url(https://storage.perfectcdn.com/nb2br9/f5kyk56mlq4ioa6x.png);
    background-repeat: no-repeat;
}

.lg-card.c-2 {
    background-image: url(https://storage.perfectcdn.com/nb2br9/bcts64l6urt73nj8.png);
    background-repeat: no-repeat;
}

.lg-card h3 {
    font-size: 34px;
    font-weight: 600;
    padding-bottom: var(--v2-sp-4);
}

.lg-card p {
    font-size: 20px;
    line-height: 26px;
    font-weight: 400;
}

@media (min-width: 992px) {
    .lg-card .lg-card-body {
        background-color: transparent;
        backdrop-filter: none !important;
        padding: 55px var(--v2-sp-6) 55px var(--v2-sp-6);
        text-align: center;
    }
}

.features-card {
    background-color: var(--main-bg);
    border: 1px solid var(--main-border);
    border-radius: var(--v2-r-lg);
    flex-direction: column;
    display: flex;
    gap: var(--v2-sp-6);
    padding: var(--v2-sp-5);
}

.features-box {
    display: grid;
    gap: var(--v2-sp-4);
}

@media (min-width: 992px) {
    .features-box {
        grid-template-columns: repeat(3, 1fr);
    }
}

.features-box--item {
    border-radius: var(--v2-r-lg);
    background: var(--main-bg);
    border: 1px solid var(--main-border);
    display: flex;
    flex-direction: column;
    gap: var(--v2-sp-2);
    padding: var(--v2-sp-5) var(--v2-sp-7);
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.features-box--item .fbi-bg i {
    position: absolute;
    top: -40px;
    right: -10px;
    font-size: 175px;
    opacity: 0.1;
    transform: rotate(-15deg);
    z-index: 1;
    color: #1b95cf;
    -webkit-background-clip: text;
    background-clip: text;
}

.features-box--item:hover .features-box--icon {
    -webkit-animation: 0.7s cubic-bezier(0.455, 0.03, 0.515, 0.955) both
        flip-diagonal-1-bck;
    animation: 0.7s cubic-bezier(0.455, 0.03, 0.515, 0.955) both
        flip-diagonal-1-bck;
}

@-webkit-keyframes flip-diagonal-1-bck {
    0% {
        -webkit-transform: translateZ(0) rotate3d(1, 1, 0, 0deg);
        transform: translateZ(0) rotate3d(1, 1, 0, 0deg);
    }
    100% {
        -webkit-transform: translateZ(-260px) rotate3d(1, 1, 0, -360deg);
        transform: translateZ(-260px) rotate3d(1, 1, 0, -360deg);
    }
}
@keyframes flip-diagonal-1-bck {
    0% {
        -webkit-transform: translateZ(0) rotate3d(1, 1, 0, 0deg);
        transform: translateZ(0) rotate3d(1, 1, 0, 0deg);
    }
    100% {
        -webkit-transform: translateZ(-260px) rotate3d(1, 1, 0, -360deg);
        transform: translateZ(-260px) rotate3d(1, 1, 0, -360deg);
    }
}

.features-box--icon {
    clip-path: polygon(
        92.32051% 40%,
        93.79385% 43.1596%,
        94.69616% 46.52704%,
        95% 50%,
        94.69616% 53.47296%,
        93.79385% 56.8404%,
        92.32051% 60%,
        79.82051% 81.65064%,
        77.82089% 84.50639%,
        75.35575% 86.97152%,
        72.5% 88.97114%,
        69.3404% 90.44449%,
        65.97296% 91.34679%,
        62.5% 91.65064%,
        37.5% 91.65064%,
        34.02704% 91.34679%,
        30.6596% 90.44449%,
        27.5% 88.97114%,
        24.64425% 86.97152%,
        22.17911% 84.50639%,
        20.17949% 81.65064%,
        7.67949% 60%,
        6.20615% 56.8404%,
        5.30384% 53.47296%,
        5% 50%,
        5.30384% 46.52704%,
        6.20615% 43.1596%,
        7.67949% 40%,
        20.17949% 18.34936%,
        22.17911% 15.49361%,
        24.64425% 13.02848%,
        27.5% 11.02886%,
        30.6596% 9.55551%,
        34.02704% 8.65321%,
        37.5% 8.34936%,
        62.5% 8.34936%,
        65.97296% 8.65321%,
        69.3404% 9.55551%,
        72.5% 11.02886%,
        75.35575% 13.02848%,
        77.82089% 15.49361%,
        79.82051% 18.34936%
    );
    border-radius: var(--v2-r-lg);
    background: rgb(212 255 49 / 15%);
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: var(--main-color);
}

.features-box--title {
    color: var(--text-color);
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 25px;
    letter-spacing: 0px;
    margin: 0;
}

.features-box--text {
    color: #9eabc5;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;
    margin: 0;
}

.light .features-box--text {
    color: #28344e;
}

.features-rates {
    border-radius: var(--v2-r-md);
    background: var(--main-bg);
    display: inline-flex;
    padding: var(--v2-sp-6) 35px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 39px;
    margin-bottom: 35px;
}

.features-rate {
    display: flex;
    flex-direction: column;
    gap: var(--v2-sp-4);
}

.features-rates--seperator {
    width: 1px;
    align-self: stretch;
    background: var(--main-border);
}

.features-rate--stars {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--v2-sp-1);
    color: var(--main-color);
    font-size: 16px;
}

.features-rate--text {
    color: var(--text-color);
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
}

.features-topcard {
    border-radius: var(--v2-r-lg);
    background-size: cover;
    background-position: center;
    position: relative;
}

.features-topcard--image {
    position: absolute;
    right: 45px;
    bottom: 40px;
    z-index: 2;
    user-select: none;
    pointer-events: none;
    max-width: 450px;
}

.features-topcard--message {
    border-radius: var(--v2-r-lg);
    background: #0e181e;
    box-shadow: var(--v2-elev-3);
    padding: var(--v2-sp-3) var(--v2-sp-4);
    max-width: 200px;
    width: 100%;
    color: #ffffff;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
    position: absolute;
}

.section-title--title {
    font-weight: 600;
}

.section-title--badge {
    display: flex;
    padding: var(--v2-sp-1) var(--v2-sp-4) var(--v2-sp-1) var(--v2-sp-1);
    align-items: center;
    gap: var(--v2-sp-2);
    border-radius: var(--v2-r-pill);
    border: 1px solid var(--main-color);
    background: rgb(228 255 49 / 15%);
    width: max-content;
}

.section-title--badge .icon {
    background: var(--main-color);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: var(--text-white);
    font-size: 20px;
    font-style: normal;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-title--badge .text {
    color: var(--main-color);
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 14.4px;
    text-align: start;
    padding: 0;
    margin: 0;
}

.features .section-title {
    align-items: flex-start;
    justify-content: flex-start;
    margin-bottom: 30px;
}

.features .section-title--content {
    align-items: flex-start;
    text-align: start;
    margin: 0;
}

.section-title--content {
    display: flex;
    gap: var(--v2-sp-5);
    flex-direction: column;
    max-width: var(--st-max-width, 750px);
    margin: 0 auto;
    width: 100%;
}

@media only screen and (max-width: 991.98px) {
    .hm-wrapper .row.row-btn {
        display: unset !important;
    }
    .home-header {
        padding: 175px 0 50px 0;
    }

    .hm-wrapper .dark-mode {
        display: none !important;
    }

    .home-content h2,
    .brands-left .bl-content h3,
    .home-heads h3 {
        font-size: 26px;
        line-height: 32px;
        font-weight: 600;
    }
    .hf-glow {
        position: absolute;
        height: 650px;
        left: 0;
        top: -950px;
    }
    .home-lang {
        display: none;
    }
    .h-section {
        margin: 0 0 50px 0 !important;
        overflow: hidden;
    }
    .home-content .home-text {
        display: none;
    }
    .header-content {
        text-align: center;
    }
    .home-content .d-flex {
        justify-content: center;
    }
    .payment-box {
        margin-bottom: 15px;
    }
    .home-area-text,
    .home-area-text .home-heads {
        text-align: center;
    }
}

@keyframes textclip {
    to {
        background-position: 200% center;
    }
}

@keyframes rotate {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }
}

@-webkit-keyframes floating {
    0% {
        box-shadow: var(--v2-elev-1);
        -webkit-transform: translatey(0px);
        transform: translatey(0px);
    }

    50% {
        box-shadow: var(--v2-elev-1);
        -webkit-transform: translatey(-20px);
        transform: translatey(-20px);
    }

    100% {
        box-shadow: var(--v2-elev-1);
        -webkit-transform: translatey(0px);
        transform: translatey(0px);
    }
}

@keyframes key-animation {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes dropdown-active {
    0% {
        opacity: 0;
        transform: translateY(-50px);
        max-height: 0;
    }

    100% {
        opacity: 1;
        transform: translateY(0) skewY(0);
    }
}

@keyframes floating {
    0% {
        box-shadow: var(--v2-elev-1);
        -webkit-transform: translatey(0px);
        transform: translatey(0px);
    }

    50% {
        box-shadow: var(--v2-elev-1);
        -webkit-transform: translatey(-20px);
        transform: translatey(-20px);
    }

    100% {
        box-shadow: var(--v2-elev-1);
        -webkit-transform: translatey(0px);
        transform: translatey(0px);
    }
}

.floating {
    -webkit-animation-name: floating;
    animation-name: floating;
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    margin-top: 5px;
    box-shadow: none !important;
}

.brands-area {
    width: 100%;
    margin: -105px auto 0;
    z-index: 2;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--second-bg);
    padding: var(--v2-sp-6);
    height: 100px;
    overflow: hidden;
}

.brands-area::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    height: 1px;
    max-width: 1000px;
    width: 100%;
    background: linear-gradient(
        90deg,
        var(--main-bg) 0%,
        var(--main-color) 53%,
        var(--main-bg) 100%
    );
    z-index: 1;
}

.brands-top-active {
    display: flex;
    padding-left: var(--v2-sp-5);
    padding-top: var(--v2-sp-5);
    gap: var(--v2-sp-7);
    overflow: hidden;
    position: relative;
}

.brands-top-active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 50px;
    height: 100%;
    background: linear-gradient(
        90deg,
        var(--second-bg) 0%,
        rgba(4, 10, 24, 0) 100%
    );
    z-index: 5;
}

.brands-top-active::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: 50px;
    height: 100%;
    background: linear-gradient(
        90deg,
        rgba(4, 10, 24, 0) 0% 0%,
        var(--second-bg) 100%
    );
    z-index: 5;
}

.brands-item {
    background:
        radial-gradient(
            68.6% 68.6% at 57.8% 96.86%,
            rgba(56, 75, 110, 0.2) 0%,
            rgba(5, 9, 16, 0.2) 100%
        ),
        linear-gradient(0deg, var(--second-bg) 0%, var(--second-bg) 100%),
        var(--second-bg);
    border: 1px solid var(--main-border);
    box-shadow:
        0px 1.182px 2.365px 0px rgb(19 27 38),
        0px 0px 0px 1.182px #000000;
    border-radius: var(--v2-r-md);
    padding: var(--v2-sp-5) var(--v2-sp-4);
    transition: var(--v2-t-base) all;
    display: flex;
    justify-content: center;
    gap: var(--v2-sp-5);
    min-width: 75px;
    z-index: 1;
    white-space: nowrap;
    line-height: 1px;
    position: relative;
    user-select: none;
    pointer-events: none;
}

.light .brands-item {
    background:
        radial-gradient(
            68.6% 68.6% at 57.8% 96.86%,
            rgb(255 255 255 / 20%) 0,
            rgb(207 215 228 / 20%) 100%
        ),
        linear-gradient(0deg, #e7e8e9 0, #fff 100%), var(--second-bg);
    box-shadow: var(--v2-elev-1),
        0 0 0 1.182px #faebeb;
}

.brands-item span {
    font-size: 16px;
    font-weight: 600;
}

.brands-item .brands-icon {
    font-size: 34px;
}

.select2-selection__icon .fab.fa-instagram,
.nwo-categories .fab.fa-instagram,
.brands-icon .fab.fa-instagram {
    background: radial-gradient(
        circle at 30% 107%,
        #fdf497 0,
        #fdf497 5%,
        #fd5949 45%,
        #d6249f 60%,
        #285aeb 90%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.select2-selection__icon .fab.fa-twitter,
.nwo-categories .fab.fa-twitter,
.brands-icon .fab.fa-twitter {
    background: #1da1f2;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.select2-selection__icon .fab.fa-youtube,
.nwo-categories .fab.fa-youtube,
.brands-icon .fab.fa-youtube {
    background: #ff0042;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.select2-selection__icon .fab.fa-whatsapp,
.nwo-categories .fab.fa-whatsapp,
.brands-icon .fab.fa-whatsapp {
    background: #25d366;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.select2-selection__icon .fab.fa-android,
.nwo-categories .fab.fa-android,
.brands-icon .fab.fa-android {
    background: #3ddc84;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.select2-selection__icon .fab.fa-facebook-f,
.nwo-categories .fab.fa-facebook-f,
.brands-icon .fab.fa-facebook-f {
    background: #207eff;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.select2-selection__icon .fab.fa-soundcloud,
.nwo-categories .fab.fa-soundcloud,
.brands-icon .fab.fa-soundcloud {
    background: #ff5836;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.select2-selection__icon .fab.fa-spotify,
.nwo-categories .fab.fa-spotify,
.brands-icon .fab.fa-spotify {
    background: #1db954;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.select2-selection__icon .fab.fa-tiktok,
.nwo-categories .fab.fa-tiktok,
.brands-icon .fab.fa-tiktok {
    background: #ff0042;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.select2-selection__icon .fab.fa-twitch,
.nwo-categories .fab.fa-twitch,
.brands-icon .fab.fa-twitch {
    background: #4b367c;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.select2-selection__icon .fab.fa-telegram-plane,
.nwo-categories .fab.fa-telegram-plane,
.brands-icon .fa-telegram-plane {
    background: #2b9fd2;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.select2-selection__icon .fab.fa-snapchat-ghost,
.nwo-categories .fab.fa-snapchat-ghost,
.brands-icon .fab.fa-snapchat-ghost {
    background: #fffc00;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.select2-selection__icon .fab.fa-discord,
.nwo-categories .fab.fa-discord,
.brands-icon .fab.fa-discord {
    background: #1090f3;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.select2-selection__icon .fab.fa-reddit-alien,
.nwo-categories .fab.fa-reddit-alien,
.brands-icon .fab.fa-reddit-alien {
    background: #f43708;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.select2-selection__icon .fab.fa-linkedin-in,
.nwo-categories .fab.fa-linkedin-in,
.brands-icon .fab.fa-linkedin-in {
    background: #0077b0;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.select2-selection__icon .fab.fa-steam,
.nwo-categories .fab.fa-steam,
.brands-icon .fab.fa-steam {
    background: #00adee;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.select2-selection__icon .fab.fa-pinterest,
.nwo-categories .fab.fa-pinterest,
.brands-icon .fab.fa-pinterest {
    background: #ff5858;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.select2-selection__icon .fab.fa-tumblr,
.nwo-categories .fab.fa-tumblr,
.brands-icon .fab.fa-tumblr {
    background: #1c3764;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.m-counter {
    background: linear-gradient(
        90deg,
        var(--second-bg) 0%,
        var(--main-bg) 50%,
        var(--second-bg) 100%
    );
    padding: 50px 0;
}

.infoDetail {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--v2-sp-2);
}

.infoDetail .item {
    display: flex;
    align-items: center;
    justify-content: center;
}

.infoDetail .item .icon {
    margin-right: 15px;
}

.infoDetail .item .text {
    font-size: 26px;
    color: var(--main-color);
    font-weight: bold;
}

.infoDetail .item .text small {
    display: block;
    font-size: 20px;
    font-weight: 400;
    color: var(--text-color);
}

.blob {
    background: #000;
    border-radius: 50%;
    margin-right: 5px;
    height: 12px;
    width: 12px;
    transform: scale(1);
    -webkit-animation: pulse-black 2s infinite;
    animation: pulse-black 2s infinite;
    display: inline-block;
}

.blob.blob-red {
    background: rgba(11, 255, 67, 1);
    box-shadow: 0 0 0 0 rgba(11, 255, 67, 1);
    -webkit-animation: pulse-green 2s infinite;
    animation: pulse-green 1.5s infinite;
}

@-webkit-keyframes pulse-green {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(11, 255, 67, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(11, 255, 67, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(11, 255, 67, 0);
    }
}

@media (max-width: 991.98px) {
    .home-header .header-content {
        padding-top: var(--v2-sp-6);
    }
    .mob-logo img {
        width: 175px;
    }
    .infoDetail {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: var(--v2-sp-5);
    }
    .infoDetail .item {
        justify-content: flex-start;
    }
}

.loginArea {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loginArea .card {
    min-width: 450px;
}

.loginArea .bgdegrade {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 50%;
    z-index: -1;
}

.loginArea .bgdegrade::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top left, var(--main-color), #191b29);
    z-index: 1;
    opacity: 0.9;
}

.bgdegrade a.logo {
    position: absolute;
    z-index: 9;
    margin-left: 20px;
    top: 20px;
}

.bgdegrade a.logo img {
    width: 234px;
    height: auto;
    object-fit: cover;
}

.loginArea .bgdegrade img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.loginArea .bgico {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.loginArea .bgico .logMenu ul {
    padding: 0;
    margin: 0;
}

.loginArea .bgico .logMenu ul li {
    padding: var(--v2-sp-3);
    position: relative;
    padding-right: var(--v2-sp-6);
    text-align: right;
    list-style: none;
}

.loginArea .bgico .logMenu ul li.active::before {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    background: var(--main-color);
    border-radius: var(--v2-r-sm) 0 0 var(--v2-r-sm);
}

.loginArea .bgico .logMenu ul li a {
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: var(--v2-sp-2);
    flex-direction: row-reverse;
}

.loginHead {
    margin-bottom: 20px;
}

.loginHead h1 {
    font-size: 26px;
    color: var(--v2-ink);
}

.loginHead p {
    text-align: center;
    font-size: 16px;
    color: var(--v2-ink-dim);
}

@media (max-width: 991.98px) {
    .loginArea {
        align-items: flex-start;
        padding: var(--v2-sp-5);
        padding-top: 100px;
    }
    .loginArea .bgdegrade {
        width: 100%;
    }
    .loginArea .bgico {
        left: 0;
        top: 20px;
        bottom: inherit;
        right: 0;
        width: 100%;
        justify-content: center;
    }
    .loginArea .bgico .logMenu ul {
        display: flex;
        z-index: 99;
        position: relative;
    }
    .loginArea .bgico .logMenu ul li {
        padding: 0 var(--v2-sp-1) !important;
    }
    .loginArea .bgico .logMenu ul li a {
        color: #fff;
        padding: var(--v2-sp-3) var(--v2-sp-3);
        font-size: 14px;
        font-weight: 500;
        text-transform: inherit;
        flex-direction: row;
        opacity: 0.7;
        background: #ffffff15;
        border-radius: var(--border-radius);
        border: 1px solid transparent;
        gap: var(--v2-sp-1);
    }
    .loginArea .card {
        min-width: 90vw;
    }
}

/*! APP */

.main-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1040;
    width: 100vw;
    height: 100vh;
    background-color: var(--main-bg);
    transition: opacity var(--v2-t-fast) linear;
    opacity: 0.8;
}

.tooltip {
    z-index: 5000;
}

.tooltip-inner {
    color: #fff;
    background: var(--main-color);
    border: none;
    font-size: 13px;
    border-radius: var(--v2-r-xs);
    padding: var(--v2-sp-1) var(--v2-sp-2);
    -webkit-box-shadow: var(--v2-elev-1);
    box-shadow: var(--v2-elev-1);
    opacity: 1;
}

.modal-content {
    border-radius: var(--border-radius);
}

.rotate-360 {
    animation: 10s linear infinite rotate;
}

.dark .tooltip-inner {
    -webkit-box-shadow: var(--v2-elev-1);
    box-shadow: var(--v2-elev-1);
}

.modal-open .modal {
    -webkit-backdrop-filter: blur(10px) !important;
    z-index: 9999;
}

input:-webkit-autofill,
input:-webkit-autofill:active,
input:-webkit-autofill:focus,
input:-webkit-autofill:hover {
    transition:
        background-color 0s 600000s,
        color 0s 600000s !important;
    -webkit-text-fill-color: var(--text-color) !important;
    -webkit-transition-delay: 9999s;
}

.app-body,
.home-body {
    background-color: var(--main-bg);
}

.app {
    background:
        url(https://storage.perfectcdn.com/nb2br9/n5nz011oke8j3jt4.png), #f7f8f9;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
    min-height: 100vh;
    min-width: 100%;
    overflow: hidden;
}

.dark .app {
    background:
        url(https://storage.perfectcdn.com/nb2br9/go6hpqplfkbtp6kb.png),
        var(--second-bg);
}

.app .card.no-border {
    border: none;
}

.app .btn.btn-primary {
    -webkit-box-shadow: none;
    box-shadow: none;
    width: 100%;
}

.app-widget {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--v2-sp-3) var(--v2-sp-5);
    font-size: 16px;
    margin-bottom: 12px;
    border-radius: var(--border-radius);
    background: #fff;
    box-shadow: var(--v2-elev-1),
        0px 0px 0px 1.182px #f7f8f9;
    border: 1px solid rgba(0, 0, 0, 0.125);
}

.dark .app-widget {
    border-radius: var(--border-radius);
    background: var(--main-bg);
    box-shadow:
        0px 1.182px 2.365px 0px rgb(19 27 38),
        0px 0px 0px 1.182px #1a2433;
}

.app-widget .btn {
    padding: var(--v2-sp-2) var(--v2-sp-6);
    border-radius: var(--v2-r-sm);
    width: max-content !important;
    min-width: 130px;
}

.app-widget small {
    font-size: 16px;
}

.app-widget span {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-2);
}

.app-widget .fa-telegram-plane {
    color: #2b9fd2;
    font-size: 20px;
}

.app-widget .fa-robot {
    color: #3ddc84;
    font-size: 20px;
}






.btn.btn-favorite {
    height: 46px;
    width: 46px !important;
    padding: 0px !important;
    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;
}










@media (min-width: 991.98px) {
}




















.header {
    background: rgb(237, 239, 242, 0.7);
    border-radius: var(--border-radius);
    padding: var(--v2-sp-4);
    z-index: 1019;
    right: 0px;
    blur: blur(25px);
}

.dark .header {
    background: rgb(9, 16, 30, 0.7);
}

.header .row {
    min-height: 50px;
}

.page {
    padding: var(--v2-sp-1) 0px 40px 320px;
}

/* Fix for fixed header overlapping content */
.page .container-fluid {
    padding-top: 0;
    transition: padding-top var(--v2-t-base) var(--v2-ease);
}


/* Alternative fix that works with older browsers */

/* Additional fix for responsive design */
@media (max-width: 1199.98px) {

    /* Additional padding for mobile screens with fixed header */
    .page .container-fluid {
        padding-top: 80px;
    }
}

@media (max-width: 992px) {
    /* Fix for medium mobile screens */
    .page {
        padding-top: var(--v2-sp-1) !important;
    }

    .page .container-fluid {
        padding-top: var(--v2-sp-7) !important;
    }
}

@media (max-width: 640px) {

    /* Override mobile page padding for very small screens */
    .page {
        padding-top: var(--v2-sp-7) !important;
    }

    /* Additional padding for container-fluid on very small screens */
    .page .container-fluid {
        padding-top: var(--v2-sp-7) !important;
    }
}



.mobHid {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

@media (max-width: 640px) {
    .app-widget {
        padding: var(--v2-sp-2);
    }
    .app-widget .btn {
        padding: var(--v2-sp-2) var(--v2-sp-2);
    }
}

@media (max-width: 1199.98px) {
    .header {
        left: 0px;
        padding: var(--v2-sp-4) var(--v2-sp-4);
        position: fixed;
        right: 0;
        top: 0;
        border-radius: 0;
    }
    .m-top {
        margin-top: 20px;
    }
    .page {
        padding-left: 0px;
        padding-top: 80px; /* Add padding for fixed header in mobile */
    }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
    .header {
        left: 300px;
    }
    .page {
        padding-left: 315px;
    }
}

@media (max-width: 1399.98px) {
    .page .container-fluid {
        padding: 0 var(--v2-sp-4);
    }
}

.alert {
    border: none;
    padding: var(--v2-sp-4) var(--v2-sp-5);
    font-size: 14px;
    line-height: 21px;
    border-radius: var(--border-radius);
}

.alert.alert-danger {
    color: #fff;
    background: #ee5b5b;
}

.alert.alert-success {
    color: #01b780;
    background: rgba(1, 183, 128, 0.25);
}

.alert.alert-secondary {
    background: rgba(135, 135, 135, 0.25);
    color: #9f9f9f;
}

.alert.alert-primary {
    background: rgba(34, 200, 254, 0.25);
    color: #22c8fe;
}

.alert.alert-warning {
    background: rgba(237, 206, 28, 0.12);
    color: #edb51c;
}

.panel-body {
    background: var(--main-bg);
    border-radius: var(--border-radius);
    font-size: 13px;
}

@media (max-width: 992px) {
    .app-body {
        -webkit-transition: 0.25s ease;
        transition: var(--v2-t-base) var(--v2-ease);
        z-index: 1234;
        position: fixed;
        left: 0px;
        width: 100%;
        top: 0px;
        height: 100%;
        overflow: scroll;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    .app-body .home-header {
        top: 0px;
        position: -webkit-sticky;
        position: sticky;
    }
    .app-body.menu-active {
        position: fixed;
        height: 100%;
        border-radius: var(--v2-r-lg);
        -webkit-transform: scale(0.8) translateX(calc(100% - 100px));
        transform: scale(0.8) translateX(calc(100% - 100px));
        overflow: hidden;
        -webkit-box-shadow: var(--v2-elev-3);
        box-shadow: var(--v2-elev-3);
        opacity: 0.9;
    }
}






.pt-info {
    margin-top: 30px;
}

h4.modal-title {
    font-size: 14px;
}

.modal-body {
    font-weight: 400;
}

.pagination .page-item {
    margin: 0 2px;
}

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

.pagination .page-item:first-child {
    border-right: 1px solid var(--v2-line);
}

.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 var(--v2-line);
}

.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: var(--main-bg);
    border: none;
    margin: 0;
    height: 50px;
    padding: 0;
    min-width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 15;
    line-height: 18px;
    position: relative;
}
/* A55 · สีตัวเลขหน้าเคยเป็น `color: var(--text-color) !important` อยู่ในกฎข้างบนนี้
   โดยไม่มี scope — (0,3,0) ก็จริง แต่ !important ทำให้มันชนะกฎธรรมดาทุกตัวรวมถึง
   ของ Panel A ที่ (1,4,1) หน้าที่กำลังอยู่เลยได้ตัวหนังสือสีเดียวกับพื้น contrast = 1
   ‼ ย้ายมาผูกกับ guest เท่านั้น ฝั่ง guest ได้ค่าเดิมเป๊ะ ห้ามถอด body#outside ออก
   นี่คือคู่แข่งที่ A15 หาไม่เจอตอนเขียนว่า "ยกน้ำหนักสองรอบแล้วยังแพ้" */
body#outside .pagination .page-item .page-link { color: var(--text-color) !important; }

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

.pagination .page-item.active .page-link {
    background-color: var(--main-color);
    color: var(--text-white);
}

.blog-txt {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nwo-categories .swiper-slide {
    width: auto !important;
}

.nwo-categories .swiper-wrapper {
    position: relative;
}

.dark .nwo-categories .swiper-wrapper::before,
.dark .nwo-categories .swiper-wrapper::after {
    -webkit-box-shadow: var(--v2-elev-3);
    box-shadow: var(--v2-elev-3);
}

.nwo-categories .swiper-wrapper {
    justify-content: center;
}

.nwo-cat-btn {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-4);
    background: var(--main-bg);
    border: 1px solid var(--main-border);
    border-radius: var(--v2-r-md);
    padding: var(--v2-sp-4);
    justify-content: center;
    width: 45px;
    height: 45px;
}

.nwo-cat-btn:hover {
    background: var(--main-color-trans);
    border: 1px solid var(--main-color);
}

.nwo-cat-btn .g-ticon {
    color: var(--text-color);
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nwo-cat-btn:hover .g-ticon {
    color: var(--main-color);
}

.s-light,
.light .s-dark {
    display: none;
}

.s-dark,
.light .s-light {
    display: block;
}



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

@media (min-width: 992px) {
}

@media (max-width: 992px) {
    .nwo-categories .swiper-wrapper {
        justify-content: flex-start;
    }
}

.dropdown-menu {
    background: var(--second-bg);
    border: 1px solid var(--main-border);
    border-radius: var(--v2-r-md);
    padding: var(--v2-sp-2) 0;
    -webkit-animation: 0.3s cubic-bezier(0.25, 0.1, 0.15, 1.34) forwards
        dropdown-active;
    animation: 0.3s cubic-bezier(0.25, 0.1, 0.15, 1.34) forwards dropdown-active;
    margin-top: 60px;
}

.dropdown-menu .dropdown-item {
    color: var(--text-color);
    padding: var(--v2-sp-1) var(--v2-sp-6);
    font-size: 14px;
}

.dropdown-menu .dropdown-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.order-box {
    border: 1px solid var(--main-border);
    border-radius: var(--border-radius);
    display: flex;
    justify-content: space-between;
    background: var(--second-bg);
    margin: 15px 0;
    font-size: 14px;
}

.order-box-left {
    width: -webkit-fill-available;
}

.ob-top {
    padding: var(--v2-sp-3) var(--v2-sp-4);
    display: grid;
    font-size: 14px;
    color: var(--v2-ink);
    grid-template-columns: 30fr 1fr;
    border-bottom: 1px solid var(--main-border);
    justify-content: space-between;
    align-items: center;
}

.ob-top span {
    text-overflow: ellipsis;
}


.ob-bottom {
    padding: var(--v2-sp-3) var(--v2-sp-4);
    gap: var(--v2-sp-2);
    color: var(--text-color);
    display: flex;
    justify-content: space-between;
}

.order-box-right {
    padding: var(--v2-sp-2);
    display: flex;
    border-left: 1px solid var(--main-border);
    flex-direction: column;
    gap: var(--v2-sp-1);
}

.order-box .btn {
    font-size: 12px;
    padding: 2px var(--v2-sp-2);
    border-radius: var(--border-radius);
    width: 110px;
    text-align: center;
    background: var(--main-bg);
    border: 1px solid var(--main-border);
    color: var(--text-white);
}

.ord-btn-1,
.ord-btn-1:hover,
.ord-btn-1:focus {
    background: var(--main-color) !important;
    border-color: var(--main-color) !important;
    color: #fff !important;
}

.ord-btn-2,
.ord-btn-2:hover,
.ord-btn-2:focus {
    background: var(--second-bg) !important;
    border-color: var(--main-border) !important;
    color: var(--text-color) !important;
}

.order-box .order-id {
    background: var(--main-color-trans);
    padding: var(--v2-sp-1) var(--v2-sp-4);
    border-radius: var(--border-radius);
    font-size: 13px;
    color: var(--main-color);
}

#notification,
#error-search {
    visibility: hidden;
    min-width: 250px;
    background: var(--main-bg);
    border: 1px solid var(--main-border);
    color: var(--text-color);
    text-align: center;
    border-radius: var(--border-radius);
    padding: var(--v2-sp-4);
    position: fixed;
    bottom: 30px;
    left: 50%;
    z-index: 5;
    transform: translate(-50%, -50%);
}

#notification.show i,
#error-search.show i {
    background: var(--main-color-trans);
    border-radius: var(--v2-r-pill);
    line-height: 1;
    display: flex;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
}

#notification.show,
#error-search.show {
    visibility: visible;
    -webkit-animation:
        0.5s fadein,
        0.5s 2.5s fadeout;
    animation:
        0.5s fadein,
        0.5s 2.5s fadeout;
    display: flex;
    gap: var(--v2-sp-2);
    justify-content: center;
    align-items: center;
}

#notification.show i,
#error-search.show i {
    color: var(--main-color);
    flex-direction: column;
}

.order-actions .btn-default,
.order-actions .btn-default:hover,
.order-actions .btn-default:focus {
    background: #fe7e7e;
    color: #fff;
    padding: var(--v2-sp-1) var(--v2-sp-5);
    width: auto;
}

.order-actions .btn-primary,
.order-actions .btn-primary:hover,
.order-actions .btn-primary:focus {
    background: #2ba948 !important;
    color: #fff !important;
    padding: var(--v2-sp-1) var(--v2-sp-5) !important;
    border-radius: var(--v2-r-sm)!important;
    width: auto;
}

.modal-order-content {
    display: flex;
    flex-direction: column;
}

.modal-order-content span {
    align-items: flex-start;
    text-align: left;
    color: var(--text-color);
    overflow: hidden;
    padding: var(--v2-sp-1) var(--v2-sp-4);
}

.modal-order-content span {
    border-bottom: 1px solid var(--main-border);
}

.modal-order-content span {
    text-overflow: ellipsis;
}

.modal-order-content strong {
    color: var(--main-color);
}

.modal-order-detail {
    display: grid;
    grid-template-columns: 5fr 4fr 4fr;
}

.modal-order-detail span {
    border-right: 1px solid var(--main-border);
    display: flex;
    flex-flow: nowrap;
    flex-direction: column;
}

.modal-order-detail span:last-child {
    border-right: none;
}

.modal-order-detail span {
    border-bottom: none;
}

.modal-open .modal {
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

.modal-body.order-modal {
    padding: var(--v2-sp-4) 0 0 0;
}

textarea.form-control {
    border-radius: var(--v2-r-md);
}

.neworder-group {
    position: relative;
}

.neworder-group input {
    padding-left: 50px;
}

.neworder-group i {
    position: absolute;
    left: 20px;
    top: 20px;
}

.dash-widget {
    height: 100%;
    flex: 1;
    position: relative;
    background-image: url();
    background-position: center top;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: var(--v2-sp-5);
    overflow: hidden;
}

.dw-item {
    display: flex;
    flex-direction: row;
    gap: var(--v2-sp-4);
    align-items: center;
}

.dw-first {
    display: flex;
    flex-direction: column;
    gap: var(--v2-sp-1);
}

.dw-icon {
    background: var(--main-color);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #000000 !important;
    width: 48px;
    height: 48px;
    border-radius: var(--v2-r-md);
    text-align: center;
    font-size: 26px;
    line-height: 48px;
}

.dw-title {
    color: #9eabc5;
}

.dw-value {
    color: var(--text-color);
    font-size: 26px;
    font-style: normal;
    font-weight: 800;
    line-height: 30px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: var(--v2-sp-2);
}

.dw-value a {
    color: #edb51c;
    font-size: 20px;
}

@media only screen and (max-width: 991.98px) {
    .dash-widget {
        flex-direction: column;
        align-items: start;
        gap: var(--v2-sp-6);
        padding: 0 var(--v2-sp-1);
    }
    .order-box {
        border: 1px solid var(--main-border);
        border-radius: var(--border-radius);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        background: var(--main-bg);
        margin: 10px 0;
    }

    .order-box-left {
        width: -webkit-fill-available;
    }

    .ob-top {
        padding: var(--v2-sp-3) var(--v2-sp-4);
        display: block;
        font-size: 14px;
        color: var(--text-color);
        grid-template-columns: 20fr 1fr;
        border-bottom: 1px solid var(--main-border);
        align-items: center;
        justify-content: space-between;
        text-align: center;
    }

    .ob-top .order-status {
        margin-top: 10px;
    }

    .ob-bottom {
        padding: var(--v2-sp-3) var(--v2-sp-4);
        display: block;
        gap: var(--v2-sp-2);
        word-wrap: break-word;
    }

    .order-box-right {
        padding: var(--v2-sp-2);
        display: flex;
        flex-direction: unset;
        gap: var(--v2-sp-2);
        justify-content: space-between;
        border-top: 1px solid var(--main-border);
    }

    .order-box .btn {
        padding: var(--v2-sp-1) var(--v2-sp-4);
        border-radius: var(--border-radius);
        text-align: center;
        width: -webkit-fill-available;
    }
}

@media (max-width: 992px) {
    .ns-info {
        flex-direction: column;
    }
    .ns-info .ns-item {
        width: 100%;
    }
}

@media (min-width: 992px) {
    .d-hidden {
        display: none !important;
    }
}

.nav {
    position: relative;
    display: inline-flex;
    flex-wrap: nowrap;
    gap: 2px;
    max-width: 100%;
    overflow-x: auto;
    align-items: center;
    list-style: none;
    margin: 0 0 15px 0;
    border-radius: var(--border-radius);
    background: #fff;
    box-shadow: var(--v2-elev-1),
        0px 0px 0px 1.182px #f7f8f9;
    color: var(--text-color) !important;
    padding: var(--v2-sp-2);
    width: 100%;
    border: 1px solid rgba(0, 0, 0, 0.125);
}

.dark .nav {
    background: var(--main-bg);
    color: #fff !important;
    box-shadow:
        0px 1.182px 2.365px 0px rgb(19 27 38),
        0px 0px 0px 1.182px #27303e;
    border: none;
}

.nav-item {
    width: 100%;
}

/* A66 · `color` ของสองกฎนี้ถูกจำกัดขอบเขตเป็น body#outside
   ‼ เหตุผล: `.nav-link.active { color: #000 !important }` (specificity 20 + important)
     ทับทุกกฎสีของแท็บทั้งไฟล์ รวมถึงของ v2 ที่ L1138/L1140 ซึ่งตายมาตลอด
     ตอนที่แท็บที่เลือกยังเป็นแคปซูลเหลือง ตัวอักษรดำจึงถูกอยู่แล้ว ไม่มีใครเห็นปัญหา
     พอ A66 เปลี่ยนแท็บที่เลือกให้ใช้พื้นเดียวกับการ์ด **ธีมมืดได้ดำบนเข้ม = 1.24:1**
     วัดได้บนหน้าจริงหลัง deploy ไม่ใช่จากการอ่านโค้ด
   ‼ ไม่ได้ลบทิ้ง เพราะฝั่ง guest ยังใช้ค่าเดิมอยู่ — ย้ายไปไว้ใต้ body#outside
     ค่าที่ guest ได้จึงเท่าเดิมทุกพิกเซล ส่วน body#dash ตกไปใช้กฎ v2 ที่เขียนไว้แล้ว
   ‼ ห้ามแก้ด้วยการใส่ !important ทับ — นั่นคือการเพิ่มหนี้เพื่อชนะหนี้ */
.nav-link {
    cursor: pointer;
    display: flex;
    padding: var(--v2-sp-2) var(--v2-sp-3);
    justify-content: center;
    align-items: center;
    text-decoration: none;
    gap: var(--v2-sp-2);
    outline: none;
    border-radius: var(--v2-r-md);
    border: 1px solid rgba(0, 0, 0, 0);
    background-color: rgba(0, 0, 0, 0);
    font-size: 14px;
    font-weight: 500;
    line-height: 160%;
    white-space: nowrap;
}
body#outside .nav-link { color: var(--text-color) !important; }
body#outside .nav-link.active { color: #000000 !important; }

.nav-link:hover {
    background: #00000030;
}

.light .nav-link:hover {
    background: var(--second-bg);
}

.light .nav-link:focus {
    color: var(--text-color);
}

.nav-link.active {
    border-radius: var(--v2-r-md);
    background: var(--main-color);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.nav-link .icon {
    font-size: 20px;
}

@media (max-width: 991.98px) {
    .nav,
    .nav-item {
        width: 100%;
    }
}

.tab-content > .active {
    -webkit-animation: 0.3s ease-in-out key-animation;
    animation: 0.3s ease-in-out key-animation;
}

.select2-container {
    width: 100% !important;
}

.select2.select2-container .select2-selection {
    -webkit-border-radius: var(--v2-r-md);
    -moz-border-radius: var(--v2-r-md);
    border-radius: var(--v2-r-md);
    padding: var(--v2-sp-3) var(--v2-sp-6);
    color: var(--text-color);
    display: flex;
    background: var(--second-bg);
    outline: 0;
    transition: var(--v2-t-fast) var(--v2-ease);
    align-items: center;
    border: 1px solid var(--main-border);
    width: 100%;
}

.select2.select2-container .select2-selection .select2-selection__rendered {
    line-height: 32px;
    padding-right: 33px;
    color: var(--text-color);
    border: 0;
    width: 100%;
    display: flex;
}

.select2.select2-container .select2-selection .select2-selection__arrow {
    -webkit-border-radius: 0 var(--border-radius) var(--border-radius) 0;
    -moz-border-radius: 0 var(--border-radius) var(--border-radius) 0;
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    height: 100%;
    width: 26px;
}

.select2.select2-container.select2-container--open
    .select2-selection.select2-selection--single {
    background: var(--second-bg);
    border-radius: var(--v2-r-md);
}

.select2.select2-container.select2-container--open
    .select2-selection.select2-selection--single
    .select2-selection__arrow {
    -webkit-border-radius: 0 var(--border-radius) 0 0;
    -moz-border-radius: 0 var(--border-radius) 0 0;
}

.select2.select2-container.select2-container--open
    .select2-selection.select2-selection--multiple {
    border: 0 solid #34495e;
}

.select2.select2-container.select2-container--focus .select2-selection {
    border: 1px solid var(--main-border);
    border-radius: var(--v2-r-md);
    display: flex;
    align-items: center;
}

.select2-container .select2-dropdown {
    border-radius: var(--v2-r-md)!important;
    background: var(--second-bg);
    border: 0;
    margin-top: 8px !important;
    overflow: hidden;
}

.select2-container .select2-dropdown .select2-results ul {
    background: 0 0;
    color: var(--text-color);
    display: flex;
    flex-direction: column;
    max-height: 286px;
    padding: var(--v2-sp-1);
}

.select2-results__option[aria-selected] {
    cursor: pointer;
    transition: var(--v2-t-base);
    padding: var(--v2-sp-1);
    font-size: 12px;
}

.select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: var(--main-bg) !important;
    padding: var(--v2-sp-1);
}

.select2-container .select2-dropdown .select2-results ul::-webkit-scrollbar {
    width: 6px;
}

.select2-container
    .select2-dropdown
    .select2-results
    ul::-webkit-scrollbar-track {
    background: 0;
}

.select2-container
    .select2-dropdown
    .select2-results
    ul::-webkit-scrollbar-thumb {
    background-color: var(--main-border);
    border-radius: var(--v2-r-md);
}

.select2-container
    .select2-dropdown
    .select2-results
    ul
    .select2-results__option--highlighted[aria-selected] {
    background-color: var(--main-border) !important;
    transition: var(--v2-t-base);
    color: var(--text-color);
    border-radius: var(--v2-r-sm);
}

.select2-results__option {
    color: var(--text-color) !important;
    font-size: 14px !important;
}

.select2-results__option a {
    color: var(--text-color) !important;
    padding: var(--v2-sp-1) !important;
}

.select2-container--open .select2-dropdown--below {
    border: 1px solid var(--main-border);
    -webkit-box-shadow: 0 5px 35px rgb(49, 156, 255, 0.15);
    box-shadow: 0 5px 35px rgb(49, 156, 255, 0.15);
}

.select2-search--dropdown {
    display: none !important;
}

.modal-content {
    background: var(--main-bg);
    box-shadow:
        0px 1.182px 2.365px 0px rgb(19 27 38),
        0px 0px 0px 1.182px #1a2433;
    border-radius: var(--border-radius);
}

.light .modal-content {
    box-shadow: var(--v2-elev-1),
        0px 0px 0px 1.182px #4e678d;
}

.modal-header {
    border-color: var(--main-border);
}

.modal-header .close {
    color: var(--text-color);
    opacity: 0.7;
    text-shadow: none;
}

.lang-wrapper {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: var(--v2-sp-2);
    width: 100%;
}

.lang-wrapper .lang-item {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-2);
    background: var(--second-bg);
    border: 1px solid var(--main-border);
    border-radius: var(--v2-r-md);
    width: 100%;
    padding: var(--v2-sp-3) var(--v2-sp-2);
    transition: var(--v2-t-base) all;
    color: var(--text-color);
}

.lang-wrapper .lang-item i {
    font-size: 26px;
    border-radius: var(--v2-r-pill);
}

.lang-wrapper .lang-item:hover {
    border-color: var(--main-color);
}

.lang-wrapper .lang-item.active {
    border-color: var(--main-color);
}

.currency-wrapper {
    display: grid;
    align-items: center;
    gap: var(--v2-sp-2);
    width: 100%;
    grid-template-columns: repeat(2, 1fr);
}

.currency-wrapper .currency-item {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-2);
    background: var(--second-bg);
    border: 1px solid var(--main-border);
    border-radius: var(--v2-r-pill);
    width: 100%;
    padding: var(--v2-sp-3) var(--v2-sp-2);
    transition: var(--v2-t-base) all;
    color: var(--text-color);
}

.currency-wrapper .currency-item .cSymbol {
    background: var(--main-color);
    width: 50px;
    text-align: center;
    border-radius: var(--v2-r-pill);
}

.currency-wrapper .currency-item:hover {
    border-color: var(--main-color);
}

.currency-wrapper .currency-item.active {
    border-color: var(--main-color);
}

.dd-custom .dropdown-menu {
    right: 15px !important;
    left: 15px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transform: translate3d(0, 80px, 0) !important;
    background: var(--main-bg);
    color: #fff !important;
    border: 1px solid var(--main-border);
    box-shadow:
        0 0.182px 2.365px 0 rgb(19 27 38),
        0 0 0 0.182px #27303e;
    border-radius: var(--border-radius);
    padding: 0;
    overflow: hidden;
    transition: var(--v2-t-fast);
    margin-top: 0;
}

.light .dd-custom .dropdown-menu {
    background: var(--main-bg);
    color: #fff !important;
    border: 1px solid var(--second-bg);
    box-shadow:
        0 0.182px 2.365px 0 var(--second-bg),
        0 0 0 0.182px var(--second-bg);
}

.dd-custom .dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-2);
    color: var(--text-color);
    padding: var(--v2-sp-2) var(--v2-sp-4);
    border-bottom: 1px solid var(--main-border);
    font-size: 14px;
}

.dd-custom .dropdown-item:focus,
.dd-custom .dropdown-item:hover {
    background: rgba(255, 255, 255, 0.03);
}

.updates-box {
    background:
        radial-gradient(
            397.75% 81.29% at 109.6% 34.26%,
            #0d1117 0%,
            #0e1621 99.99%,
            #0e131b 100%
        ),
        #070a0e;
    color: #fff !important;
    border: 1px solid var(--main-bg);
    border-radius: var(--border-radius);
    padding: var(--v2-sp-4) var(--v2-sp-5);
    position: relative;
    overflow: hidden;
    margin-bottom: 15px;
}

.updates-box.disabled::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 55%;
    width: 100%;
    height: 100%;
    transform: translate(3%, 40%) scale(1);
    transition: var(--v2-t-fast) var(--v2-ease);
    background: linear-gradient(
        216deg,
        rgb(255, 255, 255, 0) 0%,
        rgb(214, 45, 45, 1) 100%
    );
    border-radius: var(--v2-r-pill);
    filter: blur(80px);
    z-index: 1;
}

.updates-box.enabled::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 55%;
    width: 100%;
    height: 100%;
    transform: translate(3%, 40%) scale(1);
    transition: var(--v2-t-fast) var(--v2-ease);
    background: linear-gradient(
        216deg,
        rgb(255, 255, 255, 0) 0%,
        rgb(41, 203, 105, 1) 100%
    );
    border-radius: var(--v2-r-pill);
    filter: blur(80px);
    z-index: 1;
}

.updates-box.decrease::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 55%;
    width: 100%;
    height: 100%;
    transform: translate(3%, 40%) scale(1);
    transition: var(--v2-t-fast) var(--v2-ease);
    background: linear-gradient(
        216deg,
        rgb(255, 255, 255, 0) 0%,
        rgb(28, 240, 255, 1) 100%
    );
    border-radius: var(--v2-r-pill);
    filter: blur(80px);
    z-index: 1;
}

.updates-box.increased::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 55%;
    width: 100%;
    height: 100%;
    transform: translate(3%, 40%) scale(1);
    transition: var(--v2-t-fast) var(--v2-ease);
    background: linear-gradient(
        216deg,
        rgb(255, 255, 255, 0) 0%,
        rgb(255, 154, 0, 1) 100%
    );
    border-radius: var(--v2-r-pill);
    filter: blur(80px);
    z-index: 1;
}

.ub-first {
    display: flex;
    flex-direction: column;
}

.ub-first .ub-header {
    font-size: 13px;
    color: #898e96;
}

.ub-first .ub-service {
    font-size: 14px;
}

.updates-box .ub-last {
    font-size: 13px;
}

.updates-box.disabled .ub-last {
    color: rgb(214, 45, 45, 1);
}

.updates-box.enabled .ub-last {
    color: rgb(41, 203, 105, 1);
}

.updates-box.decrease .ub-last {
    color: rgb(28, 240, 255, 1);
}

.updates-box.increased .ub-last {
    color: rgb(255, 154, 0, 1);
}

.alert strong {
    font-weight: 600;
}

.alert p {
    margin-bottom: 5px;
}

.sb-wrapper {
    display: grid;
    align-items: center;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--v2-sp-2);
    margin-bottom: 15px;
}

@media (max-width: 991.98px) {
    .sb-wrapper {
        grid-template-columns: repeat(1, 1fr);
    }
}

.service-badge {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-1);
    border: 1px solid var(--main-border);
    background: var(--main-bg);
    color: var(--text-color);
    padding: var(--v2-sp-1);
    border-radius: var(--v2-r-md);
}

.dark .service-badge {
    background:
        radial-gradient(
            397.75% 81.29% at 109.6% 34.26%,
            #0d1117 0%,
            #0e1621 99.99%,
            #0e131b 100%
        ),
        #070a0e;
    color: #fff !important;
    border: 1px solid #27303e;
    box-shadow:
        0px 1.182px 0.365px 0px rgb(19 27 38),
        0px 0px 0px 0.182px #27303e;
}

.service-badge .sb-icon {
    width: 20px;
}

.panel-body.service-desc {
    background: var(--main-bg);
    border-radius: var(--border-radius);
    font-size: 14px;
    padding: var(--v2-sp-2);
    margin-bottom: 5px;
    position: relative;
    overflow: hidden;
}

.panel-body.service-desc:before {
    content: "";
    position: absolute;
    top: 50%;
    right: 5%;
    width: 90%;
    height: 50%;
    transform: translate(100%, -60%) scale(1);
    transition: var(--v2-t-fast) var(--v2-ease);
    background: linear-gradient(
        150deg,
        var(--main-color) 0%,
        var(--main-color-trans) 100%
    );
    border-radius: var(--v2-r-pill);
    filter: blur(100px);
    z-index: 0;
}

.faq-ss-tabs .home-ss-tab {
    position: relative;
    cursor: pointer;
    padding: var(--v2-sp-3) var(--v2-sp-5);
    -webkit-transition: 0.2s ease;
    transition: var(--v2-t-base) var(--v2-ease);
    margin-bottom: 14px;
    background:
        radial-gradient(
            68.6% 68.6% at 57.8% 96.86%,
            rgba(56, 75, 110, 0.2) 0%,
            rgba(5, 9, 16, 0.2) 100%
        ),
        linear-gradient(0deg, var(--second-bg) 0%, var(--second-bg) 100%),
        var(--second-bg);
    border: 1px solid var(--main-border);
    box-shadow:
        0px 1.182px 2.365px 0px rgb(19 27 38),
        0px 0px 0px 1.182px #000000;
    border-radius: var(--v2-r-md);
}

.faq-ss-tabs .home-ss-tab h4 {
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 0;
}

.faq-ss-tabs .home-ss-tab .fa-angle-up {
    display: none;
}

.faq-ss-tabs .home-ss-tab .ss-tab-head {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.faq-ss-tabs .home-ss-tab.active {
    border-radius: var(--v2-r-md);
}

.faq-ss-tabs .home-ss-tab.active .fa-angle-up {
    display: block;
}

.faq-ss-tabs .home-ss-tab.active .fa-angle-down {
    display: none;
}

.faq-ss-tabs .home-ss-tab .ss-tab-head .right-p {
    color: var(--text-color);
    font-size: 16px;
    background: #194670;
    width: 24px;
    height: 24px;
    line-height: 28px;
    text-align: center;
    border-radius: 100%;
}

.light .faq-ss-tabs .home-ss-tab .ss-tab-head .right-p {
    background: #dcdee1;
}

.faq-ss-tabs .home-ss-tab .ss-tab-content {
    display: none;
    padding-top: var(--v2-sp-3);
    color: var(--text-color);
    font-size: 14px;
    line-height: 170%;
    padding-bottom: var(--v2-sp-2);
}

.section-top {
    display: flex;
    justify-content: center;
    text-align: center;
}

.section-header {
    display: flex;
    align-items: center;
    max-width: 600px;
    width: 100%;
    flex-direction: column;
    gap: var(--v2-sp-4);
    margin-bottom: 40px;
}

.section-header h5 {
    font-size: 26px;
}

.section-header p {
    color: #9db0d9;
}

.light .section-header p {
    color: #28344e;
}

.sh-label {
    border-radius: var(--v2-r-pill);
    display: inline-flex;
    padding: 1px;
    overflow: hidden;
    position: relative;
    background:
        radial-gradient(
            77.87% 74.89% at 99.57% 106.76%,
            var(--second-bg) 0%,
            rgba(6, 11, 26, 0.2) 100%
        ),
        var(--second-bg);
}

.light .sh-label {
    background: none;
}

.sh-content {
    position: relative;
    z-index: 10;
    background:
        radial-gradient(
            68.6% 68.6% at 57.8% 96.86%,
            rgba(49, 156, 255, 0.2) 0%,
            rgba(5, 9, 16, 0.2) 100%
        ),
        linear-gradient(0deg, var(--second-bg) 0%, var(--second-bg) 100%),
        var(--second-bg);
    border-radius: var(--v2-r-pill);
    padding: var(--v2-sp-1) var(--v2-sp-4) var(--v2-sp-1) var(--v2-sp-1);
    display: flex;
    align-items: center;
    gap: var(--v2-sp-4);
    color: var(--text-color);
    font-size: 14px;
    font-weight: 500;
    line-height: 25px;
    text-align: center;
}

.sh-content > .icon {
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background:
        radial-gradient(
            42.73% 42.73% at 50% 96.36%,
            var(--main-color-hover) 0%,
            var(--main-color) 100%
        ),
        rgba(1, 179, 255, 0.2);
    padding: var(--v2-sp-1);
    color: #fff;
    width: 32px;
    height: 32px;
    font-size: 14px;
    margin: 0;
}

.sh-glow {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: rgb(49 156 255 / 50%);
    filter: blur(20px);
    -webkit-filter: blur(20px);
    position: absolute;
    z-index: 5;
    transform: translate(-50%, -50%);
}

.payments-area {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--v2-sp-7);
}

.p-cards {
    position: relative;
    z-index: 10;
    background:
        radial-gradient(
            68.6% 68.6% at 57.8% 96.86%,
            rgba(56, 75, 110, 0.2) 0%,
            rgba(5, 9, 16, 0.2) 100%
        ),
        linear-gradient(0deg, var(--second-bg) 0%, var(--second-bg) 100%),
        var(--second-bg);
    border-radius: var(--v2-r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--v2-sp-4);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    line-height: 25px;
    text-align: center;
    height: 80px;
    border: 1px solid var(--main-border);
}

.p-cards img {
    max-height: 50px;
}

.home-card {
    background-image: url(../img/home-card-bg.png);
    background-position: center center;
    background-size: cover;
    border-radius: var(--v2-r-md);
    padding: 65px 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}

.home-card .hc-1 {
    max-width: 500px;
}

.home-card .hc-1 p {
    font-size: 14px;
    line-height: 24px;
    font-weight: 400;
}

.c-reviews .slick-track {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-7);
}

.review-item {
    background:
        radial-gradient(
            68.6% 68.6% at 57.8% 96.86%,
            rgba(56, 75, 110, 0.2) 0%,
            rgba(5, 9, 16, 0.2) 100%
        ),
        linear-gradient(0deg, var(--second-bg) 0%, var(--second-bg) 100%),
        var(--second-bg);
    border: 1px solid var(--main-border);
    padding: var(--v2-sp-5) var(--v2-sp-7) var(--v2-sp-2) var(--v2-sp-7);
    border-radius: var(--v2-r-lg);
    position: relative;
    max-width: 400px;
}

.light .review-item,
.light .faq-ss-tabs .home-ss-tab,
.light .p-cards,
.light .sh-content {
    background:
        radial-gradient(
            68.6% 68.6% at 57.8% 96.86%,
            rgb(255 255 255 / 20%) 0,
            rgb(254 254 254 / 20%) 100%
        ),
        linear-gradient(0deg, #e7e8e9 0, #fff 100%), var(--main-bg);
    box-shadow: none;
}

.review-item .head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    padding-bottom: var(--v2-sp-1);
    color: var(--text-color);
    border-bottom: 1px solid var(--main-border);
}

.review-item .head .r-user {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-2);
}

.review-item .head .r-user .avatar {
    background: var(--main-bg);
    width: 42px;
    height: 42px;
    border-radius: var(--v2-r-pill);
    font-size: 26px;
    line-height: 46px;
    text-align: center;
}

.review-item .head .r-user .name {
    font-weight: 600;
    font-size: 16px;
}

.review-item .head .r-user .name span {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--main-color);
}

.review-item .head .rate {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-1);
    font-size: 20px;
    color: #f47133;
}

.review-item .text p {
    color: #9eabc5;
}

.light .review-item .text p {
    color: #28344e;
}

.noaOuFeCard {
    background: var(--main-bg) !important;
    background-image: url(https://storage.perfectcdn.com/nb2br9/wnzd32gb6o6t33c3.png) !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center right !important;
    box-shadow: none !important;
    border: 1px solid var(--main-border);
}

.light .noaOuFeCard {
    background-image: url(https://storage.perfectcdn.com/nb2br9/q7u9hkbe187ur5in.png) !important;
}

.noaOuFeIt .icon {
    background: var(--main-color);
    clip-path: polygon(
        92.32051% 40%,
        93.79385% 43.1596%,
        94.69616% 46.52704%,
        95% 50%,
        94.69616% 53.47296%,
        93.79385% 56.8404%,
        92.32051% 60%,
        79.82051% 81.65064%,
        77.82089% 84.50639%,
        75.35575% 86.97152%,
        72.5% 88.97114%,
        69.3404% 90.44449%,
        65.97296% 91.34679%,
        62.5% 91.65064%,
        37.5% 91.65064%,
        34.02704% 91.34679%,
        30.6596% 90.44449%,
        27.5% 88.97114%,
        24.64425% 86.97152%,
        22.17911% 84.50639%,
        20.17949% 81.65064%,
        7.67949% 60%,
        6.20615% 56.8404%,
        5.30384% 53.47296%,
        5% 50%,
        5.30384% 46.52704%,
        6.20615% 43.1596%,
        7.67949% 40%,
        20.17949% 18.34936%,
        22.17911% 15.49361%,
        24.64425% 13.02848%,
        27.5% 11.02886%,
        30.6596% 9.55551%,
        34.02704% 8.65321%,
        37.5% 8.34936%,
        62.5% 8.34936%,
        65.97296% 8.65321%,
        69.3404% 9.55551%,
        72.5% 11.02886%,
        75.35575% 13.02848%,
        77.82089% 15.49361%,
        79.82051% 18.34936%
    );
    width: 82px;
    height: 82px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    color: #fff;
    margin-bottom: 30px;
}

.noaOuFeIt .title {
    font-weight: 600;
    font-size: 20px;
    line-height: 28px;
    color: var(--text-color);
    margin-bottom: 10px;
}

.noaOuFeIt .text {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: rgba(255, 255, 255, 0.5);
    max-width: 230px;
    margin-bottom: 20px;
}

.light .noaOuFeIt .text {
    color: #28344e;
}

footer {
    border-top: 1px solid var(--main-border);
}

footer .footerTop {
    background: -webkit-gradient(
        linear,
        left top,
        right top,
        from(var(--main-color-hover)),
        to(var(--main-color))
    );
    background: -webkit-linear-gradient(
        left,
        var(--main-color-hover) 0%,
        var(--main-color) 100%
    );
    background: -o-linear-gradient(
        left,
        var(--main-color-hover) 0%,
        var(--main-color) 100%
    );
    background: linear-gradient(
        to right,
        var(--main-color-hover) 0%,
        var(--main-color) 50%,
        var(--main-color-hover) 100%
    );
    padding: var(--v2-sp-6) 0;
    position: relative;
}

footer .footerTop .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

footer .footerTop .info {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-4);
}

footer .footerTop .info .text {
    color: #fff;
    font-size: 14px;
}

footer .footerTop .info .icon i {
    display: flex;
    font-size: 56px;
    color: #fff;
}

footer .footerTop .info .text span {
    display: block;
    font-weight: 600;
    font-size: 26px;
    color: #fff;
}

.footerTop .action {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-2);
}

.footerTop .action > :is(a, button) {
    color: #fff;
    font-size: 26px;
    position: relative;
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    border: 2px dashed #fff;
    transition: var(--v2-t-base);
    cursor: pointer;
}

.footerTop .action > :is(a, button):hover {
    background: #fff;
    border: 2px solid #fff;
    color: var(--main-color);
}

.footerTop .action > a.footWhatsapp {
    width: auto;
    border-radius: var(--v2-r-lg);
    padding: var(--v2-sp-1) var(--v2-sp-5);
    font-size: 16px;
    border-style: solid;
    background: #fff;
    color: var(--main-color);
    gap: var(--v2-sp-5);
    font-weight: 600;
}

.footerTop .action > a.footWhatsapp > i {
    font-size: 20px;
}

footer .footTop {
    padding: var(--v2-sp-7) 0 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

footer .footTop .alert {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-4);
    max-width: 513px;
    padding-left: 0;
}

footer .footTop .alert .icon {
    min-width: 60px;
    height: 60px;
    border-radius: 100%;
    background: var(--main-color);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
}

footer .footTop .alert .text {
    color: var(--text-color);
    font-size: 16px;
}

footer .footTop .alert span {
    color: #a7afd0;
}

footer .footTop .action {
    display: flex;
    align-items: center;
}

footer .footTop .action .footLogo img {
    height: 40px;
}

footer .footTop .action .socialMedias {
    margin-left: 25px;
    border-left: 1px dashed #ffffff40;
    padding: var(--v2-sp-2) 0;
    padding-left: var(--v2-sp-6);
    display: flex;
    align-items: center;
    gap: var(--v2-sp-2);
}

footer .footTop .action .socialMedias .item {
    min-width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--main-color);
    border-radius: 100%;
    color: #fff;
    font-size: 20px;
}

footer .footBottom {
    background: var(--main-bg);
}

footer .footBottom .container .copyright {
    /* was #a7afd0, a lavender-grey from the stock theme: 2.17:1 on the light
       footer. --v2-ink-mute follows the theme and clears AA in both. */
    color: var(--v2-ink-mute);
    padding: var(--v2-sp-4) 0;
    text-align: center;
}

footer .footBottom .footer-alt {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

footer .footBottom .footer-alt .footer-links {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-4);
}

section.counts {
    position: relative;
    background: -webkit-gradient(
        linear,
        left top,
        right top,
        from(var(--main-color-hover)),
        to(var(--main-color))
    );
    background: -webkit-linear-gradient(
        left,
        var(--main-color-hover) 0%,
        var(--main-color) 100%
    );
    background: -o-linear-gradient(
        left,
        var(--main-color-hover) 0%,
        var(--main-color) 100%
    );
    background: linear-gradient(
        to right,
        var(--main-color-hover) 0%,
        var(--main-color) 50%,
        var(--main-color-hover) 100%
    );
    padding: var(--v2-sp-6) 0;
}

section.counts::after {
    content: "";
    position: absolute;
    left: calc(50% - 20px);
    bottom: -14px;
    width: 40px;
    height: 15px;
    background: var(--main-color);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    z-index: 2;
}

.usCount {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.usCount .item {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-4);
}

.usCount .item .icon {
    min-width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    border: 1px dashed #fff;
    font-size: 26px;
    color: #fff;
}

.usCount .item .text {
    color: #9db0d9;
    font-size: 16px;
    line-height: 25px;
}

.usCount .item .text span {
    display: block;
    color: #fff;
    font-weight: 500;
    font-size: 26px;
}

.whyUsCards .card {
    padding: var(--v2-sp-7) var(--v2-sp-7) var(--v2-sp-1) var(--v2-sp-7);
    position: relative;
    overflow: hidden;
    width: 100%;
}

.whyUsCards .card .icon {
    position: absolute;
    right: -15px;
    top: -15px;
    min-width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: var(--v2-sp-2);
    padding-top: var(--v2-sp-2);
    background: var(--main-color);
    border-radius: 100%;
    font-size: 26px;
    color: #fff;
    font-weight: 700;
    z-index: 1;
}

.whyUsCards .card .icon::before {
    content: "";
    position: absolute;
    left: -7px;
    top: -7px;
    right: -7px;
    bottom: -7px;
    border-radius: 100%;
    border: 2px dashed var(--main-color-hover);
    z-index: -1;
}

.whyUsCards .card .title {
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 5px;
}

.whyUsCards .card p {
    color: #9eabc5;
    font-size: 14px;
}

.rank-card {
    position: relative;
    overflow: hidden;
}

.rank-card .card-body {
    z-index: 2;
}

.rank-card:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: url(../img/rank-bg.svg);
    background-repeat: no-repeat;
    background-position: bottom 0 right 0;
    z-index: 1;
}

.rank-card .progress {
    background-color: var(--second-bg);
    border-radius: var(--v2-r-sm);
    height: 10px;
    width: 100%;
    position: relative;
}

.rank-card .progress-bar {
    background-color: var(--main-color);
}

#currentRank {
    background: var(--main-color-trans);
    padding: var(--v2-sp-1) var(--v2-sp-2) var(--v2-sp-1) var(--v2-sp-1);
    border-radius: var(--v2-r-pill);
    color: var(--main-color);
}

#currentRank i {
    background: var(--main-color);
    color: #fff;
    padding: var(--v2-sp-1);
    border-radius: var(--v2-r-pill);
}

#currentRank span {
    color: var(--text-color);
}

#currentRank span strong {
    color: var(--main-color);
}

#nextRank {
    color: var(--main-color);
}

#nextRank i {
    color: #fff;
}

#nextRank span {
    color: var(--text-color);
}

#nextRank span strong {
    color: var(--main-color);
}

.rank-card .rank-area {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.signup-area {
    background:
        url(https://storage.perfectcdn.com/nb2br9/oe2oqi31hs6djxcp.svg) center
            center/cover no-repeat,
        center center/cover no-repeat #0d1117;
    min-height: 100vh;
}

.signup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgb(2, 2, 3, 0.3);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: var(--v2-sp-4);
    z-index: 9999;
}

.light .signup-header {
    background: rgb(243, 243, 244, 0.3);
}

.account_status_wraper .account_status_btn.active,
.signup-badge .icon {
    background: var(--main-color);
}

.signup-content {
    background: var(--main-bg);
    border: 1px solid var(--main-border);
    border-radius: var(--v2-r-md);
    padding: var(--v2-sp-6);
    margin-top: 15px;
}

.signup-badge {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-4);
    margin-top: 100px;
}

.signup-badge .icon {
    width: 45px;
    height: 45px;
    font-size: 26px;
    text-align: center;
    border-radius: var(--v2-r-sm);
    color: var(--text-white);
}

.signup-badge .text {
    display: flex;
    flex-direction: column;
}

.signup-badge .text span {
    font-size: 16px;
    font-weight: 600;
}

.card.card-addfunds,
.card.card-tickets {
    display: flex;
    padding: var(--v2-sp-2);
    align-items: center;
    gap: var(--v2-sp-4);
    flex-direction: row;
}

.card.card-addfunds > .fal,
.card.card-tickets > .fal {
    color: var(--main-color);
    padding: var(--v2-sp-2);
    border-radius: var(--v2-r-sm);
    background: var(--main-color-trans);
}

.card.card-addfunds .btn,
.card.card-tickets .btn {
    width: max-content;
    margin-left: auto;
    border-radius: var(--v2-r-sm);
}

.panel-body.border-solid {
    background: var(--main-bg);
    border-radius: var(--border-radius);
    font-size: 13px;
    padding: var(--v2-sp-2);
    margin-bottom: 5px;
    position: relative;
    overflow: hidden;
}

.panel-body.border-solid:before {
    content: "";
    position: absolute;
    top: 50%;
    right: 5%;
    width: 90%;
    height: 50%;
    transform: translate(100%, -60%) scale(1);
    transition: var(--v2-t-fast) var(--v2-ease);
    background: linear-gradient(
        150deg,
        var(--main-color) 0%,
        var(--main-color-trans) 100%
    );
    border-radius: var(--v2-r-pill);
    filter: blur(100px);
    z-index: 0;
}

.addBalanceBtn {
    background: var(--second-bg);
    position: relative;
}

.addBalance {
    display: grid;
    border-radius: var(--v2-r-sm);
    grid-template-columns: repeat(4, 1fr);
    gap: var(--v2-sp-2);
}

.addBalanceBtn {
    padding: var(--v2-sp-5) var(--v2-sp-4);
    border-radius: var(--v2-r-sm);
    text-align: center;
    border: 1px solid var(--main-border);
    color: var(--text-color);
    font-weight: 600;
}

.addBalanceBtn:focus,
.addBalanceBtn:hover {
    border: 1px solid var(--main-color) !important;
}

.addBalanceBtn span {
    background: var(--main-color);
    position: absolute;
    right: 7px;
    width: auto;
    height: 24px;
    top: 7px;
    line-height: 24px;
    font-size: 12px;
    border-radius: var(--v2-r-xs);
    padding: 0 var(--v2-sp-1);
    color: var(--text-white);
}


.order-item-top {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px dashed var(--main-border);
    padding-bottom: var(--v2-sp-2);
}

.oit-first {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-2);
}

.oit-first .order-id {
    background: var(--main-border);
    min-width: 100px;
    height: 30px;
    line-height: 30px;
    border-radius: var(--v2-r-sm);
    text-align: center;
    color: var(--text-color);
}

.oit-last {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-2);
}

.oit-last .btn-danger,
.oit-last .btn-success,
.oit-last .btn-primary {
    width: 40px !important;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: var(--v2-r-sm);
}

.order-item-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
}

.order-item-bottom .oib-first {
    display: flex;
    align-items: center;
}

.order-item-bottom .oib-first .link {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-1);
    color: #22c8fe;
    background: #22c8fe31;
    padding: var(--v2-sp-1) var(--v2-sp-2);
    border-radius: var(--v2-r-sm);
}

.order-item-bottom .oib-first .link strong {
    max-width: 200px;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.order-item-bottom .oib-first .item {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-1);
    color: var(--text-color);
    background: #191a1e;
    padding: var(--v2-sp-1) var(--v2-sp-2);
    border-radius: var(--v2-r-sm);
    white-space: nowrap;
}

.order-item-bottom .oib-first .item .primary-color {
    color: var(--main-color-hover) !important;
}

.order-item-bottom .oib-last {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--v2-sp-2);
}

.order-item-bottom .oib-last .btn {
    font-size: 14px;
    padding: 0 var(--v2-sp-4);
    height: 35px;
    line-height: 35px;
}

.order-item-bottom .oib-last .btn-success {
    border-radius: var(--v2-r-sm);
}

.order-item-bottom .sib-last .btn.btn-primary {
    border-radius: var(--v2-r-sm);
}

.order-status {
    min-width: max-content;
}

.order-status .os-widget {
    padding: var(--v2-sp-1) var(--v2-sp-2);
    border-radius: var(--v2-r-sm);
    font-size: 13px;
}


.os-widget.processing {
    background: #4a5cf621;
    border: 1px solid #4a5cf6;
    color: #4a5cf6;
}

.os-widget.partial {
    background: #6a7b9121;
    border: 1px solid #6a7b91;
    color: #6a7b91;
}

.os-widget.pending {
    background: #ffc10721;
    border: 1px solid #ffc107;
    color: #ffc107;
}

.os-widget.inprogress {
    background: #f5830021;
    border: 1px solid #f58300;
    color: #f58300;
}


.order-actions {
    display: flex;
    gap: var(--v2-sp-1);
}

.order-actions .btn,
.order-actions .btn:hover,
.order-actions .btn:focus {
    height: 30px !important;
    line-height: 30px !important;
    text-align: center;
    font-size: 13px !important;
    border-radius: var(--v2-r-sm);
}

#notify {
    visibility: hidden;
    width: 100%;
    background: var(--main-color);
    border-bottom: 1px solid var(--main-color-hover);
    color: var(--text-white);
    text-align: center;
    padding: var(--v2-sp-7) var(--v2-sp-4);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* A58 · สองกฎ `#notify.show i` (สี่เหลี่ยมขาว 30px) ถูกลบ — มันเป็น (1,1,1) ซึ่งชนะ
   กฎแผ่นไอคอนตัวใหม่ที่ (1,0,2) ลบคู่แข่งแทนการเพิ่มน้ำหนัก ตามกฎของเฟสนี้
   ‼ ห้ามเขียน `#notify.show i` กลับมา — ถ้าจะแต่งไอคอน ให้แก้ `body#dash #notify i` */

#notify.show {
    visibility: visible;
    -webkit-animation:
        0.5s fadein,
        0.5s 2.5s fadeout;
    animation:
        0.5s fadein,
        0.5s 2.5s fadeout;
    display: flex;
    gap: var(--v2-sp-2);
    justify-content: center;
    align-items: center;
}

#notify #notifyText {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-2);
}

.card-heads {
    border: 1px solid var(--main-border);
    padding: var(--v2-sp-6) var(--v2-sp-2);
    border-radius: var(--border-radius);
    text-align: center;
    margin-bottom: 15px;
}

#notify,
.dw-icon,
.service-cat-side {
    background: var(--main-color);
}

.service-cat-side {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--v2-sp-4) var(--v2-sp-7);
    background-repeat: no-repeat;
    background-position: right center;
    border-radius: var(--v2-r-md);
    margin-bottom: 14px;
}

.child-item,
.service-item {
    padding: var(--v2-sp-2);
    box-sizing: border-box;
    font-size: 14px;
    font-weight: 400;
    position: relative;
    background: var(--main-border);
    border-radius: var(--border-radius);
    margin-bottom: 10px;
    border: 1px solid #273452;
}

.services-item-top {
    border-color: #273452 !important;
}

.light .services-item-top,
.light .service-item {
    border-color: #b4bbcc !important;
}

.order-item {
    padding: var(--v2-sp-4) var(--v2-sp-2);
    box-sizing: border-box;
    font-size: 16px;
    position: relative;
    background: var(--second-bg);
    border-radius: var(--border-radius);
    margin-bottom: 20px;
    border: 1px solid var(--main-border);
}

.order-item:nth-child(odd) {
    border-color: #273452;
}

.order-item:nth-child(even) {
    background: #111112;
    border-color: #273452;
}

.light .order-item:nth-child(even),
.light .order-item:nth-child(odd) {
    border-color: #b4bbcc;
}

.order-item:nth-child(even) .oit-first .order-id {
    background: var(--main-bg);
}

.order-item:nth-child(even) .order-item-top,
.order-item:nth-child(odd) .order-item-top {
    border-color: #273452;
}

.light .order-item:nth-child(even) .order-item-top,
.light .order-item:nth-child(odd) .order-item-top {
    border-color: #b4bbcc;
}

.order-item:nth-child(even) .order-item-bottom .oib-first .item {
    background: var(--main-bg);
}

.order-item:hover {
    border-color: var(--main-color);
    box-shadow: 0px 14px 25px var(--main-color-trans);
    cursor: pointer;
}


.sit-first .services-id {
    background: var(--main-color);
    width: 60px;
    height: 30px;
    line-height: 30px;
    border-radius: var(--v2-r-sm);
    text-align: center;
    color: var(--text-white);
}

.hit-first .history-id,
.tit-first .ticket-id {
    background: var(--main-border);
    width: 60px;
    height: 30px;
    line-height: 30px;
    border-radius: var(--v2-r-sm);
    text-align: center;
    color: var(--text-color);
}

.sit-last .services-rate {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-2);
    color: #09b797;
    background: #2dfad431;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: var(--v2-r-sm);
    padding: 0 var(--v2-sp-2);
}

.sit-last .btn-favorite .fas.fa-star {
    width: 40px;
    height: 30px;
    line-height: 30px;
    background: var(--main-color);
    text-align: center;
    border-radius: var(--v2-r-sm);
    color: var(--main-color-hover) !important;
    background-clip: unset;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
}

.sit-last .favorite {
    width: 40px;
    height: 30px;
    line-height: 30px;
    background: var(--main-border);
    text-align: center;
    border-radius: var(--v2-r-sm);
    color: var(--text-color);
}

.sit-last .favorite.active {
    background: var(--main-color);
}


.order-item-bottom .oib-first .link,
.services-item-bottom .sib-first .min,
.updates-item-bottom .uib-first .decreased {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-1);
    color: var(--v2-info-text);
    background: var(--main-bg);
    padding: var(--v2-sp-1) var(--v2-sp-2);
    border-radius: var(--v2-r-sm);
}

.services-item-bottom .sib-first .max,
.updates-item-bottom .uib-first .removed {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-1);
    color: var(--v2-danger-text);
    background: var(--main-bg);
    padding: var(--v2-sp-1) var(--v2-sp-2);
    border-radius: var(--v2-r-sm);
}

.history-item-bottom .hib-first .date,
.services-item-bottom .sib-first .avg,
.ticket-item-bottom .tib-first .date {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-1);
    color: var(--text-color);
    background: var(--main-border);
    padding: var(--v2-sp-1) var(--v2-sp-2);
    border-radius: var(--v2-r-sm);
}

.services-item-bottom .sib-first .avg strong {
    color: #b9ddff;
}

.history-item-bottom .hib-last,
.order-item-bottom .oib-last,
.services-item-bottom .sib-last,
.ticket-item-bottom .tib-last,
.updates-item-bottom .uib-last {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--v2-sp-2);
}

.order-item-bottom .oib-last .btn,
.services-item-bottom .sib-last .btn {
    font-size: 14px;
    padding: 0 var(--v2-sp-4);
    height: 35px;
    line-height: 35px;
}

.order-item-bottom .sib-last .btn.btn-primary,
.services-item-bottom .sib-last .btn.btn-primary {
    border-radius: var(--v2-r-sm);
}

.s-count {
    background: var(--main-color-hover);
    padding: 2px var(--v2-sp-2);
    border-radius: var(--v2-r-sm);
    font-size: 13px;
    font-weight: 400;
    color: var(--text-white);
}

.service-cat-side .service-cat-header {
    font-weight: 500;
    font-size: 16px;
    /* เคยเป็น 23px — เขียนไว้ตอน font-size ยังเป็น 16px (= 1.44) พอมีกฎอื่น
       ตั้ง 20px ทีหลัง อัตราส่วนตกเหลือ 1.15 เงียบ ๆ (2026-08-02) */
    line-height: var(--v2-lh-tight);
    color: #fff;
    margin-bottom: 0;
}

#notify #notifyText,
.child-item-bottom .cib-first,
.cit-first,
.cit-last,
.history-item-bottom .hib-first,
.hit-first,
.hit-last,
.oit-first,
.oit-last,
.services-item-bottom .sib-first,
.sit-first,
.sit-last,
.ticket-item-bottom .tib-first,
.tit-first,
.tit-last,
.uit-first,
.uit-last,
.updates-item-bottom .uib-first {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-2);
}

.order-item-bottom .oib-first {
    gap: var(--v2-sp-4);
}

.service-search .textbox,
.service-search .textbox:focus {
    width: 100%;
    height: 52px;
    background-color: var(--second-bg);
    outline: 0;
    color: var(--text-color);
    font-weight: 400;
    font-size: 14px;
    line-height: 14px;
    border-radius: var(--border-radius);
    padding: 0 var(--v2-sp-6);
    border: 1px solid var(--main-border) !important;
}

.api-box,
.api-code,
.api-item,
.api-list,
.api-list .api-item,
.api-top-item,
.ns-box,
pre[class*="language-"] {
    display: flex;
}

.payment-history {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: var(--v2-sp-2);
}

.api-item,
.api-list,
.api-top-item {
    background: var(--second-bg);
}

.api-title {
    font-size: 20px;
    color: var(--text-color);
    margin-top: 10px;
    margin-bottom: 10px;
}

.api-box {
    flex-direction: column;
}

.api-top-item {
    padding: var(--v2-sp-2);
    border: 1px solid var(--main-border);
    justify-content: space-between;
    align-items: center;
    color: var(--text-color);
    border-radius: var(--v2-r-sm);
}

.api-top-item a {
    color: var(--text-color);
    margin-left: 10px;
}

.api-code {
    flex-direction: column;
    margin-bottom: 10px;
}

.api-item,
.api-list .api-item {
    padding: var(--v2-sp-2) var(--v2-sp-4);
    color: var(--text-color);
}

.api-item {
    justify-content: space-between;
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    font-weight: 700;
    border: 1px solid var(--main-border);
    border-bottom: 0;
}

.api-list {
    flex-direction: column;
    overflow: hidden;
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    border: 1px solid var(--main-border);
    border-top: 0;
}

.api-list .api-item,
.panel-top {
    justify-content: space-between;
}

.ns-box,
code {
    flex-direction: column;
}

.api-list .api-item {
    border-top: 1px solid var(--main-border);
    background: 0;
    border-radius: 0;
    font-size: 14px;
    font-weight: 400;
    border-left: 0;
    border-right: 0;
}

.api-baslik {
    background: var(--text-color) !important;
    border-radius: var(--border-radius) var(--border-radius) 0 0 !important;
}

.ns-box,
pre {
    background: var(--text-color);
    border-radius: var(--border-radius);
    padding: var(--v2-sp-2);
}

pre {
    color: var(--text-color);
    overflow: auto;
}

.api-item b {
    width: 50%;
    color: var(--text-color);
}

.ns-box {
    margin-bottom: 20px;
    border: 1px solid var(--main-border);
}

pre[class*="language-"] {
    color: var(--main-color);
    background: var(--main-color-trans);
    margin: 0;
    overflow: auto;
}

code {
    padding: 0;
    margin-top: -20px;
}

@media print {
    code[class*="language-"],
    pre[class*="language-"] {
        text-shadow: none;
    }
}

:not(pre) > code[class*="language-"] {
    padding: 0.1em;
    border-radius: 0.3em;
    white-space: normal;
}

.updates-item-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--v2-sp-2);
}


.oit-last .btn-danger,
.oit-last .btn-primary,
.uit-last .btn-primary,
.uit-last .btn-success {
    width: 40px !important;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: var(--v2-r-sm);
}

.oit-first .order-id,
.uit-first .updates-id {
    background: var(--main-border);
    min-width: 100px;
    height: 30px;
    line-height: 30px;
    border-radius: var(--v2-r-sm);
    text-align: center;
    color: var(--text-color);
}

.updates-wrapper {
    max-height: 400px;
    overflow: auto;
}

.updates-item {
    padding: var(--v2-sp-2);
    box-sizing: border-box;
    font-size: 14px;
    border-radius: var(--border-radius);
    margin-bottom: 10px;
    border: 1px solid var(--main-border);
    overflow: hidden;
}

.updates-item-bottom .uib-first .added {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-1);
    color: #09b797;
    background: #2dfad431;
    padding: var(--v2-sp-1) var(--v2-sp-2);
    border-radius: var(--v2-r-sm);
}

.updates-item-bottom .uib-first .increased {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-1);
    color: #ffc107;
    background: #ffc10731;
    padding: var(--v2-sp-1) var(--v2-sp-2);
    border-radius: var(--v2-r-sm);
}

.updates-item {
    background: var(--main-bg);
    position: relative;
}

.nameservers {
    align-items: center;
    display: flex;
    gap: 50px;
}

.nameservers .fa-globe {
    font-size: 56px;
}

.nameservers ul {
    padding-left: 0;
}

.nameservers .fa-dot-circle {
    color: var(--main-color);
    font-size: 12px;
    padding-right: var(--v2-sp-1);
}

.card.card-child {
    background:
        url(https://storage.perfectcdn.com/nb2br9/zc7r7fbxxxli8pfg.svg) bottom 0
            right 0 no-repeat,
        bottom 0 right 0 no-repeat var(--main-color);
    margin-top: 60px;
}

.child-support {
    position: relative;
    padding: 35px var(--v2-sp-6);
}

.child-support h4 {
    max-width: 400px;
    color: var(--text-white);
    line-height: 32px;
}

.child-support .btn-secondary {
    width: max-content;
}

.child-support .cs-image {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 175px;
}

.lg-none-copy {
    display: none;
}

#service_description {
    display: none !important;
}

#order_quantity small {
    font-size: 14px;
}

.history-item {
    padding: var(--v2-sp-2);
    box-sizing: border-box;
    font-size: 14px;
    position: relative;
    background: var(--second-bg);
    border-radius: var(--border-radius);
    border: 1px solid var(--main-border);
    width: 100%;
}

.child-item-top,
.history-item-top,
.order-item-top,
.services-item-top,
.ticket-item-top,
.updates-item-top {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px dashed var(--main-border);
    padding-bottom: var(--v2-sp-2);
}

.child-item-bottom,
.history-item-bottom,
.order-item-bottom,
.services-item-bottom,
.ticket-item-bottom,
.updates-item-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--v2-sp-2);
    font-size: 13px;
    font-weight: 600;
}

.order-item-bottom {
    padding-top: var(--v2-sp-4);
}

.history-status .os-widget {
    padding: var(--v2-sp-1) var(--v2-sp-2);
    border-radius: var(--v2-r-xs);
    font-size: 16px;
    min-width: 100px;
    text-align: center;
    font-weight: 600;
}

.os-widget.canceled {
    background: #ff000021;
    border: 1px solid red;
    color: red;
}

.os-widget.completed {
    background: #28a74521;
    border: 1px solid #28a745;
    color: #28a745;
}

.tickets-uploader {
    padding: var(--v2-sp-2) var(--v2-sp-4);
    border-radius: var(--v2-r-sm);
    background: var(--second-bg);
    transition: var(--v2-t-slow) var(--v2-ease) !important;
    border: 1px solid var(--main-border);
    color: var(--text-color);
    width: max-content;
}

.files-label {
    color: var(--text-color);
    font-size: 13px;
}

.ticket-search {
    height: 52px;
    position: relative;
}

.ticket-search .textbox,
.ticket-search .textbox:focus {
    width: 100%;
    height: 52px;
    background-color: var(--second-bg);
    outline: 0;
    color: var(--text-color);
    font-weight: 400;
    font-size: 14px;
    line-height: 14px;
    border-radius: var(--border-radius);
    padding: 0 var(--v2-sp-6);
    border: 1px solid var(--main-border) !important;
}

.service-search .input-group-btn,
.ticket-search .input-group-btn {
    position: absolute;
    right: 20px;
    top: 3px;
}

.payment-history,
.ticket-list {
    max-height: 450px;
    overflow-x: auto;
    gap: var(--v2-sp-2);
}

.ticket-list {
    display: flex;
    flex-direction: column;
    margin-top: 10px;
}

.ticket-item {
    padding: var(--v2-sp-2);
    box-sizing: border-box;
    font-size: 14px;
    position: relative;
    border-radius: var(--border-radius);
    border: 1px solid var(--main-border);
}

.ticket-body,
.ticket-detail-box,
.ticket-item {
    background: var(--second-bg);
}

.ticket-status .os-widget {
    padding: var(--v2-sp-1) var(--v2-sp-2);
    border-radius: var(--v2-r-xs);
    font-size: 13px;
}

.ticket-detail-box {
    border-radius: var(--v2-r-lg);
    border: 1px solid var(--main-border);
    margin-bottom: 10px;
}

.ticket-detail-box .sup-item {
    padding: var(--v2-sp-6);
    display: flex;
    align-items: center;
    gap: var(--v2-sp-4);
}

.ticket-detail-box .sup-item .icon {
    background: var(--main-color);
    width: 45px;
    height: 45px;
    text-align: center;
    line-height: 45px;
    border-radius: var(--v2-r-sm);
    font-size: 26px;
    color: #fff;
}

.ticket-detail-box .sup-item .content,
.updates-item-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--v2-sp-2);
}

.ticket-detail-box .sup-item-title {
    color: var(--text-color);
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 28.409px;
}

.ticket-detail-box .sup-item-value {
    color: #9eabc5;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 18.182px;
}

.ticket-header {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-6);
}

.ticket-header .item.item-title {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: var(--v2-sp-1);
}

.ticket-header .item.item-title .title {
    color: var(--text-color);
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.ticket-header .item.item-title .value {
    color: #9eabc5;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.ticket-header .ticket-id-title {
    background: var(--second-bg);
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px;
    padding: var(--v2-sp-2) var(--v2-sp-3);
    min-height: 35px;
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-2);
    border-radius: var(--v2-r-sm);
}

.ticket-header .text {
    font-size: 13px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px;
}

.ticket-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--v2-sp-6);
    display: flex;
    flex-direction: column;
    gap: var(--v2-sp-7);
    border-radius: var(--v2-r-md);
    max-height: 500px;
    margin: 15px 0;
}

.ticket-body .ticket-message.ticket-message-support {
    align-self: flex-end;
}

.ticket-body .ticket-message-box {
    border-radius: var(--v2-r-md) var(--v2-r-md) var(--v2-r-md) 0;
    border: 1px solid var(--main-color);
    background: var(--main-color-trans);
    padding: var(--v2-sp-3) var(--v2-sp-5);
    color: var(--main-color);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
    letter-spacing: 0.4px;
}

.light .ticket-body .ticket-message-box {
    background: var(--main-color);
    color: var(--text-white);
}

.light .ticket-body .ticket-message.ticket-message-support .ticket-message-box {
    background: #fafafa;
}

.ticket-body .ticket-message.ticket-message-support .ticket-message-box {
    border: 1px solid var(--main-border);
    background: var(--second-bg);
    border-radius: var(--v2-r-md) var(--v2-r-md) 0;
    color: var(--text-color);
}

.ticket-body .ticket-message-info {
    padding-top: var(--v2-sp-1);
    display: flex;
    gap: var(--v2-sp-2);
    align-items: center;
    justify-content: space-between;
    color: #9eabc5;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 32px;
}

.ticket-body .ticket-message {
    max-width: 450px;
    width: 100%;
}

.ticket-body .ticket-message-info .ticket-owner.support {
    color: var(--text-color);
    font-weight: 600;
}

.ticket-body .ticket-message-info .ticket-owner .verified {
    color: #e2b719;
}

.ticket-footer .message-send {
    width: 100%;
    display: flex;
    gap: var(--v2-sp-2);
    align-items: center;
}

.ticket-footer .message-send textarea {
    flex: 1;
    min-height: 1lh;
    resize: none;
    padding-top: var(--v2-sp-4);
    padding-bottom: var(--v2-sp-4);
    border: 1px solid var(--main-border);
    border-radius: var(--v2-r-md);
    outline: 0;
    box-shadow: none;
    background: var(--main-bg);
}

.ticket-footer .message-send .tickets-uploader {
    padding: var(--v2-sp-4);
    border-radius: var(--v2-r-md);
}

.files-wrapper a {
    color: var(--main-color);
}

.ticket-footer .message-send .files-label {
    display: none;
}

.page-outside {
    padding-top: 125px;
}

.card.blog-card {
    overflow: hidden;
    border-radius: var(--border-radius);
}

.card.blog-card .blog-content {
    padding: var(--v2-sp-6);
    display: flex;
    flex-direction: column;
    gap: var(--v2-sp-2);
}

.card.blog-card .blog-date,
.card.blog-card .blog-title .card.blog-card h2,
.card.blog-card h2 {
    line-height: var(--v2-lh-tight);
    margin-bottom: 0;
}

.card.blog-card .blog-date {
    font-size: 12px;
    font-weight: 400;
    color: #9eabc5;
    padding: var(--v2-sp-2) 0;
}

.blog-single .card .blog-image .btn {
    position: absolute;
    z-index: 3;
    left: 20px;
    top: 20px;
    padding: 0;
    width: 52px;
    min-height: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    font-size: 20px;
}

.outside-switcher .switcher-item {
    margin: 0 auto;
    font-size: 26px;
    position: relative;
    height: 45px;
    width: 45px;
    border-radius: var(--v2-r-md);
    transition: var(--v2-t-slow) var(--v2-ease);
    background: var(--main-color-hover);
    color: var(--text-white);
}

.outside-switcher .switcher-item.light-btn {
    background: var(--main-color);
}

.outside-switcher .light-btn,
.dark .outside-switcher .dark-btn {
    display: none;
}

.dark .outside-switcher .light-btn,
.outside-switcher .dark-btn {
    display: block;
}

.card.card-support {
    background: url(https://storage.perfectcdn.com/nb2br9/oe45zwczhq29d91a.png);
    background-repeat: no-repeat;
    background-position: right top;
    padding: var(--v2-sp-5) 0;
    overflow: hidden;
}

.light .services-item-bottom .sib-first .avg strong {
    color: #000;
}

.dh-icon {
    width: 24px;
    height: 24px;
    border-radius: var(--v2-r-xs);
    text-align: center;
    background: var(--main-color);
    color: var(--text-white);
}

.aff-item {
    background: var(--second-bg);
    border-radius: var(--v2-r-md);
    padding: var(--v2-sp-2) var(--v2-sp-4);
    margin-bottom: 10px;
}

.aff-item span.aff-bold {
    font-weight: 600;
}

.rp-left-title {
    font-size: 26px;
}

.rp-left-text {
    color: #9db0d9;
}

.sign-d {
    background: url(https://storage.perfectcdn.com/nb2br9/31cztlog78uuycr1.png);
    border-radius: var(--v2-r-md);
    background-repeat: no-repeat;
    background-size: cover;
    padding: 35px var(--v2-sp-6) 250px var(--v2-sp-6);
    margin-bottom: 20px;
}

.badgearea {
    display: flex;
    gap: var(--v2-sp-2);
}

.tg-1 {
    position: absolute;
    right: -100px;
    top: -15px;
    width: 100px;
}

.tg-2 {
    position: absolute;
    left: -100px;
    bottom: -100px;
    width: 75px;
}

.pnd-ord-nav {
    background: transparent !important;
    box-shadow: none !important;
    margin: 0 !important;
}

.pnd-ord-nav {
    gap: var(--v2-sp-2);
}

.pnd-ord-nav li a {
    background-color: var(--main-bg);
    color: var(--text-color);
    border: 1px solid var(--main-border);
    padding: var(--v2-sp-3) var(--v2-sp-5);
    font-size: 14px;
    outline: none;
    border-radius: var(--v2-r-sm);
    cursor: pointer;
    -webkit-transition: 0.15s ease;
    transition: var(--v2-t-fast) var(--v2-ease);
    min-height: 40px;
    display: inline-block;
    margin-bottom: 4px;
    width: 100%;
    text-decoration: none;
}

.pnd-ord-nav li a.active {
    background-color: var(--main-color);
    color: var(--text-white);
    border-color: var(--main-color);
}

.home-articles {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--v2-sp-6);
}

.home-articles > a:hover h2 {
    color: var(--main-color) !important;
}

.home-articles > a h2 {
    font-size: 34px;
}

.home-articles .card.card-shadow::before {
    top: 60%;
}

.blog-body {
    padding: var(--v2-sp-2);
}

.blog-body .blog-image {
    position: relative;
}

.blog-body .bb-img {
    border-radius: var(--v2-r-sm);
    width: 100%;
    height: 275px;
    margin-bottom: 15px;
}

.blog-body .blog-date {
    display: flex;
    align-items: center;
    position: absolute;
    top: 10px;
    right: 10px;
    gap: var(--v2-sp-1);
    background: var(--main-bg);
    color: var(--text-color);
    padding: var(--v2-sp-1) var(--v2-sp-2);
    border-radius: var(--v2-r-sm);
    font-size: 13px;
    box-shadow: var(--v2-elev-3);
}

.blog-body .blog-area-text {
    color: var(--text-color);
    font-weight: 400;
    font-size: 14px;
    margin-bottom: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
}

.blog-body h2 {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-color);
}

.blog-three {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: var(--v2-sp-2);
}

.blog-three > a:hover h2 {
    color: var(--main-color) !important;
}

.blog-three .blog-body {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-4);
}

.blog-three .blog-body .bb-img {
    border-radius: var(--v2-r-sm);
    width: 200px;
    height: auto;
    margin-bottom: 0;
}

.blog-three .blog-body .ba-text {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.payment-list {
    display: grid;
    justify-content: space-between;
    grid-template-columns: 1fr 1fr;
    gap: var(--v2-sp-2);
    padding: var(--v2-sp-5) 0;
    border-bottom: 1px solid var(--main-border);
    margin-bottom: 15px;
}
.payment-bottom {
    display: flex;
    gap: var(--v2-sp-1);
}

.payment-icon {
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: var(--v2-sp-1);
}

.payment-box {
    display: flex;
    flex-direction: column;
    position: relative;
    cursor: pointer;
}

.payment-top.active:first-child {
    border-color: var(--main-color);
    background: var(--main-color-trans);
}

.payment-alt {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--v2-sp-2);
    background: #171717;
    padding: var(--v2-sp-1);
    border-radius: var(--v2-r-sm);
    margin: 15px 0 0 0;
}

.payment-top.active > .payment-top {
    border-color: var(--main-color);
    background: var(--main-color-trans);
}

.payment-top {
    background: #000000;
    border: 1px solid #2e2e2e;
    border-radius: var(--border-radius);
    padding: var(--v2-sp-4) var(--v2-sp-2) var(--v2-sp-2) var(--v2-sp-2);
}
.payment-bottom {
    padding: var(--v2-sp-1) var(--v2-sp-2);
    height: fit-content;
    justify-content: center;
    text-align: center;
    font-size: 13px;
}

.payment-icon {
    margin: auto;
}

.payment-icon img {
    height: 34px;
    width: 170px;
}

.payment-alt img {
    width: 24px;
    height: 24px;
}

.pay-best {
    background: #24e04f;
    color: #070800;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    justify-content: center;
    width: max-content;
    padding: 0 var(--v2-sp-2);
    border-radius: var(--v2-r-xs);
    position: absolute;
    left: 0;
    right: 0;
    top: -11px;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.full-bg {
    background-image: url(https://storage.perfectcdn.com/nb2br9/wt1yhe5ct4o17erb.png);
    background-size: cover;
    background-position: center;
    height: 500px;
}

.full-card {
    padding-top: 150px;
    text-align: center;
}

h3.fullc-title {
    font-size: 44px;
    font-weight: 600;
    color: var(--text-white);
}

.fullc-text {
    font-size: 20px;
    color: var(--text-white);
    line-height: 26px;
}

.full-card .btn {
    width: max-content;
    margin: 35px auto 0 auto;
}

.home-boost-box {
    background-color: var(--main-color);
    background-image: url(https://storage.perfectcdn.com/nb2br9/fs58xj2uar4pxpix.png);
    background-size: cover;
    background-position: center;
    padding: 150px 250px 150px 150px;
    border-radius: calc(var(--border-radius) * 4);
    position: relative;
    cursor: pointer;
    width: max-content;
    margin-left: auto;
}

.home-boost-box::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: calc(100% + 15px);
    border-radius: calc(var(--border-radius) * 4);
    background: linear-gradient(
        to left,
        #ffc107 0%,
        rgba(255, 255, 255, 0) 100%
    );
    -webkit-transform: rotate(5deg);
    -moz-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    -o-transform: rotate(5deg);
    transform: rotate(5deg);
    -webkit-transform-origin: bottom right;
    -ms-transform-origin: bottom right;
    transform-origin: bottom right;
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all var(--v2-t-base) var(--v2-ease) 0s;
    opacity: 0.42;
    z-index: 1;
}

.home-boost-box:hover::after {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    height: calc(100% + 0px);
}

@media (min-width: 599.98px) {
    .payment-list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1280.98px) {
    .payment-list {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 599.98px) {
    .full-card {
        padding-top: 125px;
    }
    h3.fullc-title {
        font-size: 26px;
    }
    .fullc-text {
        font-size: 14px;
        line-height: 18px;
    }
    .payment-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    .payment-top {
        padding: var(--v2-sp-4) var(--v2-sp-1) var(--v2-sp-2) var(--v2-sp-1);
    }
    .payment-icon img {
        height: 24px;
        width: 117px;
    }
    .payment-alt {
        gap: var(--v2-sp-1);
    }
    .payment-alt img {
        width: 20px;
        height: 20px;
    }
}

@media screen and (max-width: 991.98px) {
    .pnd-ord-nav {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 991.98px) {
    .page-outside {
        min-height: 750px;
    }
    .order-item-bottom .oib-first .item {
        font-size: 14px;
    }
}

@media (min-width: 991.98px) {
    .api-top {
        grid-template-columns: 1fr 1fr;
        display: grid;
        gap: var(--v2-sp-2);
    }
}

@media (max-width: 991.98px) {
    .blog-three .blog-body {
        flex-direction: column;
    }
    .blog-three .blog-body .bb-img {
        width: 100%;
    }
    .home-articles > a h2 {
        font-size: 20px;
    }
    .blog-body .bb-img {
        height: auto;
    }
    .home-articles {
        grid-template-columns: repeat(1, 1fr);
    }
    .card.card-support {
        background: none;
        padding: unset;
    }
    .dropdown .btn {
        width: 100%;
    }
    .page-outside {
        padding-top: 0;
    }
    .lg-none-copy {
        display: block;
    }
    .ns-info {
        gap: var(--v2-sp-1);
    }
    .ns-name {
        display: none;
    }
    .card.card-child {
        display: none;
    }
    .uit-last {
        justify-content: center;
        margin: 10px 0;
    }
    .updates-title {
        text-align: center;
    }
    .api-top {
        grid-template-columns: 1fr;
        gap: var(--v2-sp-2);
        display: grid;
        font-size: 12px;
    }
    footer .footBottom .footer-alt {
        flex-direction: column;
        padding-bottom: var(--v2-sp-2);
    }
    .lg-card {
        text-align: center;
    }
    .lg-card h3 {
        font-size: 26px;
    }
    .lg-card p {
        font-size: 16px;
    }
    .lg-card .lg-card-body {
        padding: var(--v2-sp-4);
    }
    .features-rates {
        gap: var(--v2-sp-6);
    }
    .section-title--badge {
        margin: auto;
    }
    .features .section-title--content {
        justify-content: center;
        text-align: center;
    }
    .rank-card .rank-area {
        flex-direction: column;
        gap: var(--v2-sp-2);
    }
    .section-header h5 {
        font-size: 20px;
    }
    .section-header p {
        font-size: 13px;
    }
    .payments-area {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--v2-sp-7);
    }
    .p-cards img {
        max-height: 30px;
    }
    .faq-ss-tabs .home-ss-tab h4 {
        font-size: 14px;
    }
    .review-item {
        max-width: 400px;
    }
    .brands-area {
        margin: -25px 0 25px 0;
    }
    .home-card {
        flex-direction: column;
        text-align: center;
        padding: var(--v2-sp-6) var(--v2-sp-4);
        gap: var(--v2-sp-6);
    }
    .home-card .hc-1 .title {
        font-size: 20px;
        padding-bottom: var(--v2-sp-2);
    }
    .tab-heading {
        flex-direction: column;
        text-align: center;
    }
    .tab-heading::before {
        display: none;
    }
    .tab-heading .tabs {
        margin-top: 15px;
    }
    .tab-content .home-content {
        padding: var(--v2-sp-4);
        text-align: center;
    }
    footer .footerTop .info .icon,
    footer .footTop .alert .icon {
        display: none;
    }
    footer .footerTop .container {
        flex-direction: column;
        gap: var(--v2-sp-5);
    }
    footer .footerTop .info {
        text-align: center;
    }
    footer .footTop,
    footer .footTop .action {
        flex-direction: column-reverse;
    }
    footer .footTop .action .socialMedias {
        margin: 0;
        padding: 0;
        border: none;
        margin-top: 20px;
    }
    footer .footTop .action {
        flex-direction: column;
    }
    footer .footTop .action {
        margin-bottom: 15px;
    }
    footer .footTop .alert {
        text-align: center;
    }
    footer .footTop {
        padding: var(--v2-sp-5) 0 var(--v2-sp-2);
    }
    .hm-remember {
        text-align: left;
    }
    .counts {
        margin-bottom: 50px;
    }
    .usCount {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--v2-sp-2);
    }
    .usCount .item {
        background: #ffffff20;
        border-radius: var(--v2-r-sm);
        padding: var(--v2-sp-2);
    }
    .usCount .item .icon {
        min-width: 40px;
        height: 40px;
        font-size: 20px;
        border: none;
        border-radius: var(--v2-r-xs);
        background: #ffffff25;
    }
    .usCount .item .text {
        line-height: 18px;
        font-size: 14px;
    }
    .usCount .item .text span {
        font-size: 20px;
        padding-bottom: var(--v2-sp-1);
    }
    .whyUsCards .card {
        padding: var(--v2-sp-4) var(--v2-sp-6);
        margin-bottom: 15px;
    }
    .home-images .home-hero--image.left {
        display: none;
    }
    .home-header .home-hero--image.right {
        top: 150px;
        opacity: 0.3;
    }
    .addBalance {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--v2-sp-1);
    }

    .order-item-bottom .oib-first,
    .services-item-bottom .sib-first {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
        gap: var(--v2-sp-2);
    }

    .order-item-bottom .oib-first .link {
        grid-area: 1 / 1 / 3 / 3;
        justify-content: center;
    }

    .order-item-bottom .oib-first .item.date {
        grid-area: 3 / 1 / 4 / 3;
        justify-content: center;
    }

    .order-item-top,
    .oit-first {
        flex-direction: column;
    }

    .order-item-top .oit-last,
    .sit-last {
        justify-content: center;
        margin-top: 10px;
    }

    .order-item-bottom .oib-first .item.flex-item {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .order-item-bottom {
        flex-direction: column;
    }

    .home-content .d-flex,
    .services-item-bottom .sib-first .max,
    .services-item-bottom .sib-first .min {
        justify-content: center;
    }

    .services-item-bottom .sib-first .avg {
        grid-area: 2/1/3/3;
        justify-content: center;
    }

    .services-item-bottom .sib-last {
        width: 100%;
        margin-top: 15px;
    }

    .service-cat-side .service-cat-header {
        margin-bottom: 5px;
    }

    .sit-first {
        justify-content: flex-start;
        align-items: unset;
        gap: 0;
    }

    .service-cat-side {
        text-align: center;
        padding: var(--v2-sp-2) var(--v2-sp-4);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .child-item-bottom,
    .cib-first,
    .ns-info,
    .oit-first,
    .order-item-bottom,
    .order-item-top,
    .services-item-bottom,
    .services-item-top,
    .signup-badge,
    .sit-first,
    .uit-first,
    .updates-item-top,
    footer .footer-content,
    footer .footer-content .action {
        flex-direction: column;
    }
    .sit-first .services-title {
        text-align: center;
    }
    .service-item .btn-favorite {
        position: absolute;
        top: 10px;
        right: 10px;
    }
    .m-hidden {
        display: none;
    }
    .services-item-bottom .sib-last .btn {
        width: 100%;
    }
    .hm-wrapper .outside-switcher {
        display: none;
    }
    .sm-header .outside-switcher {
        margin-right: -20px;
    }
    .badgearea {
        grid-area: 3 / 1 / 4 / 3;
        justify-content: center;
        display: flex;
        gap: var(--v2-sp-1);
    }
}

.payment-box.slct79761 .payment-top {
    background: transparent;
}

.frgt-pass {
    background: rgb(232 255 49 / 15%);
    border: 1px solid var(--main-color);
    border-radius: var(--v2-r-sm);
    padding: var(--v2-sp-1) var(--v2-sp-2);
    text-align: center;
    margin-top: 15px;
}

.home-1-card {
    margin-bottom: 30px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
}

.home-1-card::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 40%;
    transform: translateX(-50%);
    height: 0;
    transition: var(--v2-t-fast) var(--v2-ease) all;
    background:
        radial-gradient(
            68.6% 68.6% at 57.8% 96.86%,
            rgba(56, 75, 110, 0.2) 0%,
            rgba(5, 9, 16, 0.2) 100%
        ),
        var(--main-bg);
}

.home-1-card:hover::before {
    height: 100%;
    width: 100%;
}

.home-1-card .card-body {
    position: relative;
    z-index: 1;
    padding: var(--v2-sp-7) var(--v2-sp-4);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--v2-sp-6);
    text-align: center;
}

.home-1-card h4 {
    font-size: 20px;
    margin-bottom: 0;
}

.home-1-card p {
    font-size: 14px;
    margin-bottom: 0;
}

.icon-box {
    background: var(--main-color);
    clip-path: polygon(
        92.32051% 40%,
        93.79385% 43.1596%,
        94.69616% 46.52704%,
        95% 50%,
        94.69616% 53.47296%,
        93.79385% 56.8404%,
        92.32051% 60%,
        79.82051% 81.65064%,
        77.82089% 84.50639%,
        75.35575% 86.97152%,
        72.5% 88.97114%,
        69.3404% 90.44449%,
        65.97296% 91.34679%,
        62.5% 91.65064%,
        37.5% 91.65064%,
        34.02704% 91.34679%,
        30.6596% 90.44449%,
        27.5% 88.97114%,
        24.64425% 86.97152%,
        22.17911% 84.50639%,
        20.17949% 81.65064%,
        7.67949% 60%,
        6.20615% 56.8404%,
        5.30384% 53.47296%,
        5% 50%,
        5.30384% 46.52704%,
        6.20615% 43.1596%,
        7.67949% 40%,
        20.17949% 18.34936%,
        22.17911% 15.49361%,
        24.64425% 13.02848%,
        27.5% 11.02886%,
        30.6596% 9.55551%,
        34.02704% 8.65321%,
        37.5% 8.34936%,
        62.5% 8.34936%,
        65.97296% 8.65321%,
        69.3404% 9.55551%,
        72.5% 11.02886%,
        75.35575% 13.02848%,
        77.82089% 15.49361%,
        79.82051% 18.34936%
    );
    width: 82px;
    height: 82px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    color: #fff;
    margin-bottom: 15px;
}

#desc-badges {
    margin-bottom: 15px;
}

#desc-badges span {
    margin-right: 5px;
    white-space: nowrap;
}

.hit:after {
    content: "NEW";
    background-size: cover;
    height: 30px;
    width: 30px;
    border-radius: 50%;
    margin-right: 5px;
    display: inline-block;
    vertical-align: middle;
    animation: neon-1 0.1s ease-in-out infinite alternate;
    margin-left: 10px;
    font-weight: bold;
}

.light .hit {
    color: #000;
}

@keyframes neon-1 {
    from {
        text-shadow:
            0 0 6px rgba(202, 228, 225, 0.92),
            0 0 30px rgba(202, 228, 225, 0.34),
            0 0 12px rgba(191, 226, 255, 0.52),
            0 0 21px rgba(191, 226, 255, 0.92),
            0 0 34px rgba(191, 226, 255, 0.78),
            0 0 54px rgba(191, 226, 255, 0.92);
    }
    to {
        text-shadow:
            0 0 6px rgba(202, 228, 225, 0.98),
            0 0 30px rgba(202, 228, 225, 0.42),
            0 0 12px rgba(191, 226, 255, 0.58),
            0 0 22px rgba(191, 226, 255, 0.84),
            0 0 38px rgba(191, 226, 255, 0.88),
            0 0 60px #202020;
    }
}

@media (max-width: 991.98px) {
    #desc-badges {
        display: grid;
        gap: var(--v2-sp-2);
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 991.98px) {
    .brands-area {
        height: auto;
    }
    .brands-top-active {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        padding-top: 0;
        padding-left: 0;
    }
    .brands-top-active::before,
    .brands-top-active::after {
        display: none;
    }
    .sm-header.active .menu-btn .fa-times {
        display: block !important;
    }
    .sm-header.active .menu-btn .fa-bars,
    .sm-header .menu-btn .fa-times {
        display: none !important;
    }
    .header-menu .hm-item {
        background: var(--main-bg);
        border-radius: var(--v2-r-sm);
        padding: var(--v2-sp-1) var(--v2-sp-6);
    }
    .header-menu .hm-item .hm-link {
        font-size: 20px;
    }
    .section-title--content {
        text-align: center;
    }
    .home-boost-box {
        padding: 50px var(--v2-sp-4);
        width: 90%;
        margin: 125px auto 50px auto;
    }
    .home-boost-box .features-topcard--image {
        margin-left: auto;
        margin-right: auto;
        left: -10px;
        right: 0;
        max-width: 325px;
    }
    .form-group label {
        text-align: left;
    }
}

a.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%; /* ทำให้สูงเท่ากับปุ่ม */
}

.btn-outline-light:hover {
 /* สีเหลือง */
}

@media (max-width: 768px) {
    .alert {
        margin-top: 30px; /* ปรับตามความสูงของ navbar/logo */
        padding-right: 3rem; /* ปรับได้ตามต้องการ เช่น 2.5rem - 4rem */
    }
    .alert a {
        display: inline-block;
        min-width: 180px; /* ปรับขนาดตามความเหมาะสม */
    }
}





/* !important removed on 2026-08-01. These four are the stock theme's, and the
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */
.btn-outline-light {
    color: #333;
    border-color: #333;
}

.dark .btn-outline-light {
    color: #fbd131;
    border-color: #fbd131;
}

.btn-outline-light:hover {
    color: #fff;
    background-color: #333;
    border-color: #333;
}

.dark .btn-outline-light:hover {
    color: #ffffff;
    background-color: #e3b713;
    border-color: #fbd131;
}

.logo-small {
    display: none;
}
.logo-big {
    display: block;
}


.mob-logo {
    display: none;
}

@media (max-width: 991.98px) {
    .mob-logo {
        display: block;
    }
}

.mob-logo-img {
    display: none;
    height: 35px;
}

.mob-logo .logo-light {
    display: block;
}

.mob-logo .logo-dark {
    display: none;
}

.dark .mob-logo .logo-light {
    display: none;
}

.dark .mob-logo .logo-dark {
    display: block;
}

/* Mobile Service Info Positioning */
/* CSS สำหรับการจัดตำแหน่งข้อมูลบริการในมือถือ */

@media (max-width: 991.98px) {
    /* ซ่อนข้อมูลบริการตัวเดิมในมือถือ - เฉพาะหน้า neworder */
    #nav-info-tab:closest(.col-lg-5),
    .col-lg-5:has(#nav-info-tab) {
        display: none !important;
    }

    /* จัดแต่งข้อมูลบริการสำหรับมือถือ */
    .mobile-service-info {
        margin-bottom: 20px;
        order: -1; /* ให้อยู่ก่อนสุด */
    }

    /* ปรับแต่งข้อมูลบริการในมือถือ */
    .mobile-service-info .ns-info {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--v2-sp-2);
    }

    .mobile-service-info .ns-info > div {
        width: 100%;
    }

    .mobile-service-info .ns-item {
        flex: none;
        width: 100%;
    }

    /* จัดแต่ง tab navigation ในมือถือ */
    .mobile-service-info .nav {
        margin-bottom: 15px;
    }

    .mobile-service-info .nav-item {
        flex: 1;
    }

    .mobile-service-info .nav-link {
        text-align: center;
        padding: var(--v2-sp-2) var(--v2-sp-1);
        font-size: 14px;
    }
}

@media (min-width: 992px) {
    /* ซ่อน mobile version ใน PC */
    .mobile-service-info {
        display: none !important;
    }

    /* แสดงตัวเดิมใน PC - เฉพาะหน้า neworder */
    .col-lg-5:has(#nav-info-tab) {
        display: block !important;
    }
}

/* Promotional Popup Styles */
.promo-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 99999;
    backdrop-filter: blur(5px);
    animation: fadeIn 0.3s ease-in-out;
}

.promo-popup-overlay.show {
    display: flex;
}

.promo-popup {
    position: relative;
    background: linear-gradient(135deg, #ffd700 0%, #ffb300 100%);
    border-radius: var(--v2-r-lg);
    padding: var(--v2-sp-1);
    max-width: 520px;
    width: 90%;
    max-height: 90vh;
    overflow: hidden;
    animation: slideUp 0.4s ease-out;
    box-shadow: var(--v2-elev-2);
}

.promo-content {
    background: white;
    border-radius: var(--v2-r-md);
    overflow: hidden;
}

.promo-close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(255, 255, 255, 0.95);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all var(--v2-t-base) var(--v2-ease);
    box-shadow: var(--v2-elev-1);
}

.promo-close-btn:hover {
    background: white;
    transform: rotate(90deg) scale(1.1);
}

.promo-close-btn i {
    color: #ffb300;
    font-size: 20px;
}

.promo-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--v2-r-md) var(--v2-r-md) 0 0;
}

.promo-footer {
    padding: var(--v2-sp-5);
    background: linear-gradient(to bottom, #f9fafb, #ffffff);
    border-top: 1px solid #e5e7eb;
}

.promo-checkbox-container {
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    transition: all var(--v2-t-base) var(--v2-ease);
}

.promo-checkbox-container:hover {
    transform: translateX(5px);
}

.promo-checkbox-container input[type="checkbox"] {
    margin-right: 10px;
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: #ffb300;
    display: inline-block !important;
}

.promo-checkbox-text {
    font-size: 16px;
    color: #4b5563;
    font-family: var(--v2-f-thai);
    font-weight: 500;
}

/* Popup Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(50px) scale(0.95);
        opacity: 0;
    }
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

/* Responsive Design for Popup */
@media (max-width: 640px) {
    .promo-popup {
        max-width: 95%;
        margin: 10px;
    }

    .promo-footer {
        padding: var(--v2-sp-4);
    }

    .promo-checkbox-text {
        font-size: 14px;
    }
}

/* Shimmer effect on popup border */
@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

.promo-popup::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    animation: shimmer 3s infinite;
    pointer-events: none;
    border-radius: var(--v2-r-lg);
}

/* ============================================================
 *  v2 SHELL — layout.twig restyle (Phase 1)
 *  Targets existing class names so layout.twig HTML stays intact.
 *  Placed at file end to win cascade over legacy rules.
 * ============================================================ */

/* body mode — both authed and guest use the gradient + orbs */
body#dash,
body#outside {
    background-color: var(--v2-bg);
    color: var(--v2-ink);
    font-family: var(--v2-f-thai);
    position: relative;
}

/* ------------- AUTHED SHELL: .app > .sidebar + .page -------------
   NB: do NOT set `z-index` on `.app` — it creates a stacking context
   that traps Bootstrap modal-content beneath body-level .modal-backdrop
   (R15.2). `.app` paints above .v2-orbs naturally via DOM order
   (orbs come first inside <body>). */
body#dash .app {
    display: grid;
    grid-template-columns: 260px 1fr;
    min-height: 100vh;
    background: transparent;
    position: relative;
}
@media (max-width: 991px) {
    body#dash .app { grid-template-columns: 1fr; }
}

@media (max-width: 991px) {
}



@media (max-width: 991px) {
}

/* Sidebar profile — rich v4-style user card with avatar ring + tier chip */
body#dash .dropdown.dd-custom { margin-top: 4px; }
/* .sidebar-profile already is the card: gradient, border, 14px radius. .sp-box
   is the stock theme's own card — its background, 13px padding and 15px radius
   were never cleared, so the two nested with almost the same corner. Clearing
   them removes the doubled edge and hands 20px back to the name and role, which
   were being truncated to "MEMBER · …". */
body#dash .blob.blob-red {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--v2-ok);
    box-shadow: 0 0 10px rgba(111, 228, 168, 0.8);
    border: 2.5px solid var(--v2-bg);
    z-index: 2;
}
html.light body#dash .blob.blob-red { border-color: #ffffff; }

/* Sidebar menu */

/* ------------- AUTHED: page + container-fluid ------------- */
body#dash .page {
    background: transparent;
    padding: 0;
    min-height: 100vh;
    min-width: 0;
}
body#dash .container-fluid {
    padding: var(--v2-sp-4) var(--v2-sp-6) 80px;
    max-width: 1400px;
    margin: 0 auto;
}
@media (max-width: 767px) {
    body#dash .container-fluid { padding: var(--v2-sp-3) var(--v2-sp-3) 60px; }
}

/* ------------- AUTHED: topbar (#up-header.header) ------------- */
@media (max-width: 991px) {
}
body#dash .container-fluid { padding-top: 92px !important; }
@media (max-width: 767px) {
}


/* Topbar right-side cluster */

/* Hide the dropdown toggle on desktop; only visible on mobile. */
@media (max-width: 767px) {
    /* Show the chevron toggle on mobile. */

    /* JS sets inline display:block/none on .header-right — we drop it below the topbar. */
}

/* Theme switcher pill */
body#dash .switcher,
.outside-switcher {
    display: inline-flex;
    padding: var(--v2-sp-1);
    border-radius: var(--v2-r-pill);
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    gap: 2px;
    align-items: center;
}
body#dash .switcher .switcher-item,
.outside-switcher .switcher-item {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--v2-ink-mute);
    cursor: pointer;
    background: transparent;
    border: 0;
    transition: background var(--v2-t-fast), color var(--v2-t-fast);
    font-size: 14px;
    padding: 0;
}
body#dash .switcher .switcher-item:hover,
.outside-switcher .switcher-item:hover { color: var(--v2-ink); }
body#dash .switcher .switcher-item.active,
.outside-switcher .switcher-item.active {
    background: var(--v2-yellow);
    color: var(--v2-yellow-ink);
    box-shadow: 0 4px 12px -4px var(--v2-yellow-glow);
}
body#dash .switcher svg,
.outside-switcher svg {
    width: 16px;
    height: 16px;
}

/* Flag icons — keep size consistent in lang button */
body#dash .sbar-lang .flag-icon-squared { width: 18px; height: 18px; border-radius: 4px; }

/* ------------- GUEST SHELL: #header.head-out ------------- */
body#outside #header.head-out {
    position: sticky;
    top: 0;
    z-index: 50;
    padding: 0;
    background: transparent;
    border-bottom: 1px solid var(--v2-line);
}
body#outside #header.head-out::after { display: none !important; }
body#outside .hm-wrapper {
    background: var(--v2-nav-bg);
    backdrop-filter: var(--v2-blur-strong);
    -webkit-backdrop-filter: var(--v2-blur-strong);
    padding: var(--v2-sp-3) 0;
}
@media (max-width: 991px) {
    body#outside .hm-wrapper { display: none; }
}

body#outside .head-out .container { max-width: 1280px; }
body#outside .row-btn { gap: var(--v2-sp-4); align-items: center; flex-wrap: nowrap; }

body#outside .home-logo a {
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-2);
    font-family: var(--v2-f-dis);
    font-weight: 700;
    font-size: 20px;
    color: var(--v2-ink);
}
body#outside .home-logo img { max-height: 36px; width: auto; }

body#outside .header-menu {
    display: flex;
    gap: 2px;
    justify-content: center;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
    list-style: none;
}
body#outside .header-menu .hm-item { list-style: none; }
body#outside .header-menu .hm-link {
    padding: var(--v2-sp-2) var(--v2-sp-3);
    border-radius: var(--v2-r-pill);
    font-family: var(--v2-f-dis);
    font-size: 14px;
    font-weight: 500;
    color: var(--v2-ink-dim);
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-1);
    transition: background var(--v2-t-fast), color var(--v2-t-fast);
    text-decoration: none !important;
}
body#outside .header-menu .hm-link:hover {
    background: var(--v2-glass);
    color: var(--v2-ink);
}
body#outside .navbar-icon { font-size: 13px; color: var(--v2-ink-mute); }

body#outside .btn.btn-primary,
body#outside .btn.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-2);
    height: 44px;
    padding: 0 var(--v2-sp-5);
    border-radius: var(--v2-r-pill);
    font-family: var(--v2-f-dis);
    font-weight: 600;
    font-size: 14px;
    border: 1px solid transparent;
    text-decoration: none !important;
    transition: background var(--v2-t-base), transform var(--v2-t-fast), box-shadow var(--v2-t-base), color var(--v2-t-fast);
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
}
body#outside .btn.btn-primary {
    background: var(--v2-yellow);
    color: var(--v2-yellow-ink);
}
body#outside .btn.btn-primary:hover {
    background: #ffe24a;
    color: var(--v2-yellow-ink);
    box-shadow: 0 12px 30px -10px var(--v2-yellow-glow);
    transform: translateY(-1px);
}
body#outside .btn.btn-secondary {
    background: var(--v2-glass-2);
    color: var(--v2-ink);
    border-color: var(--v2-line-strong);
    backdrop-filter: var(--v2-blur);
    -webkit-backdrop-filter: var(--v2-blur);
}
body#outside .btn.btn-secondary:hover {
    background: var(--v2-glass-3);
    color: var(--v2-ink);
    border-color: var(--v2-line-strong);
}
body#outside .btn-100 { width: 100%; justify-content: center; }

/* Guest mobile header */
body#outside .sm-header { display: none; }
@media (max-width: 991px) {
    body#outside .sm-header {
        display: block;
        padding: var(--v2-sp-3) 0;
        background: var(--v2-nav-bg);
        backdrop-filter: var(--v2-blur);
        -webkit-backdrop-filter: var(--v2-blur);
        border-bottom: 1px solid var(--v2-line);
        position: sticky;
        top: 0;
        z-index: 50;
    }
    body#outside .sm-header .row { gap: var(--v2-sp-3); align-items: center; }
    body#outside .sm-header .mob-logo img { max-height: 30px; width: auto; }
    html.dark body#outside .sm-header .logo-light,
    html:not(.dark) body#outside .sm-header .logo-dark,
    html.light body#outside .sm-header .logo-dark { display: none; }
    html.dark body#outside .sm-header .logo-dark,
    html:not(.dark) body#outside .sm-header .logo-light,
    html.light body#outside .sm-header .logo-light { display: inline-block; }
}
body#outside .menu-btn {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--v2-r-sm);
    background: var(--v2-glass-2);
    border: 1px solid var(--v2-line);
    color: var(--v2-ink);
    font-size: 20px;
    cursor: pointer;
    padding: 0;
    position: relative;
}
body#outside .menu-btn i + i { display: none; }
body#outside .menu-btn.active i:first-child { display: none; }
body#outside .menu-btn.active i + i { display: inline-flex; }

/* ------------- GUEST FOOTER ------------- */
body#outside footer {
    padding: 64px 0 var(--v2-sp-7);
    margin-top: 80px;
    border-top: 1px solid var(--v2-line);
    position: relative;
    z-index: 2;
}
body#outside .footerBody .container { max-width: 1280px; }
body#outside .footerBody .footTop {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--v2-sp-6);
    flex-wrap: wrap;
    padding-bottom: var(--v2-sp-7);
    border-bottom: 1px solid var(--v2-line);
}
body#outside .footerBody .footTop .alert {
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    color: var(--v2-ink-dim);
    font-size: 13px;
    line-height: var(--v2-lh-body);
    max-width: 540px;
    flex: 1;
}
body#outside .footerBody .footTop .alert .text { color: var(--v2-ink-dim); }
body#outside .footerBody .action {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-5);
    flex-wrap: wrap;
}
body#outside .footerBody .footLogo img { max-height: 32px; width: auto; }
body#outside .footerBody .socialMedias { display: flex; gap: var(--v2-sp-2); }
body#outside .footerBody .socialMedias .item {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--v2-glass-2);
    border: 1px solid var(--v2-line);
    color: var(--v2-ink-dim);
    font-size: 14px;
    transition: background var(--v2-t-fast), color var(--v2-t-fast), transform var(--v2-t-fast);
    text-decoration: none !important;
}
body#outside .footerBody .socialMedias .item:hover {
    background: var(--v2-yellow);
    color: var(--v2-yellow-ink);
    transform: translateY(-2px);
}
body#outside .footBottom { padding-top: var(--v2-sp-6); margin-top: 24px; }
body#outside .footer-alt {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--v2-sp-3);
    font-size: 12px;
    color: var(--v2-ink-mute);
    font-family: var(--v2-f-mono);
    letter-spacing: 0.04em;
}
body#outside .footer-links a {
    color: var(--v2-ink-mute);
    text-decoration: none !important;
    margin-left: 16px;
    transition: color var(--v2-t-fast);
    font-family: var(--v2-f-mono);
}
body#outside .footer-links a:hover { color: var(--v2-yellow); }

/* ------------- MODALS (lang / currency) ------------- */
body .modal-content.modal-fixed,
body .modal-content {
    background: var(--v2-glass-3);
    border: 1px solid var(--v2-line-strong);
    border-radius: var(--v2-r-lg);
    backdrop-filter: var(--v2-blur-strong);
    -webkit-backdrop-filter: var(--v2-blur-strong);
    color: var(--v2-ink);
    box-shadow: var(--v2-shadow-2);
}
body .modal-backdrop.show { opacity: 0.7; }
body .modal-header {
    border-bottom: 1px solid var(--v2-line);
    padding: var(--v2-sp-4) var(--v2-sp-5);
}
body .modal-title {
    font-family: var(--v2-f-dis);
    font-weight: 700;
    font-size: 16px;
    color: var(--v2-ink);
    margin: 0;
}
body .modal-header .close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    color: var(--v2-ink);
    opacity: 1;
    font-size: 14px;
    text-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
}
body .modal-header .close:hover { background: var(--v2-glass-2); opacity: 1; }
body .modal-body { padding: var(--v2-sp-3) var(--v2-sp-5) var(--v2-sp-5); }

body .lang-wrapper,
body .currency-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--v2-sp-1);
}
body .lang-item,
body .currency-item {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-3);
    padding: var(--v2-sp-2) var(--v2-sp-3);
    border-radius: var(--v2-r-sm);
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    color: var(--v2-ink);
    font-family: var(--v2-f-dis);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none !important;
    transition: background var(--v2-t-fast), border-color var(--v2-t-fast), color var(--v2-t-fast);
}
body .lang-item:hover,
body .currency-item:hover {
    background: var(--v2-glass-2);
    border-color: var(--v2-line-strong);
    color: var(--v2-ink);
}
body .lang-item.active {
    background: var(--v2-yellow-soft);
    border-color: rgba(255, 214, 10, 0.30);
    color: var(--v2-yellow);
}
body .currency-item .cSymbol {
    font-family: var(--v2-f-mono);
    font-weight: 700;
    color: var(--v2-yellow);
    min-width: 32px;
}
body .currency-item .cText { color: var(--v2-ink-dim); }

/* ------------- PROMO POPUP ------------- */
body .promo-popup-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: var(--v2-blur);
    -webkit-backdrop-filter: var(--v2-blur);
    z-index: 1050;
    align-items: center;
    justify-content: center;
    padding: var(--v2-sp-5);
}
body .promo-popup-overlay.show { display: flex; }
body .promo-popup {
    background: var(--v2-glass-3);
    border: 1px solid var(--v2-line-strong);
    border-radius: var(--v2-r-xl);
    backdrop-filter: var(--v2-blur-strong);
    -webkit-backdrop-filter: var(--v2-blur-strong);
    max-width: 520px;
    width: 100%;
    padding: var(--v2-sp-5);
    position: relative;
    box-shadow: var(--v2-shadow-2);
}
body .promo-close-btn {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    z-index: 2;
}
body .promo-image {
    width: 100%;
    border-radius: var(--v2-r-md);
    display: block;
}
body .promo-footer {
    margin-top: 16px;
    display: flex;
    justify-content: center;
}
body .promo-checkbox-container {
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-2);
    color: var(--v2-ink-dim);
    font-size: 12px;
    cursor: pointer;
}
body .promo-checkbox-container input { accent-color: var(--v2-yellow); }

/* ------------- Notify toast -------------
   A58 · ก่อนหน้านี้ toast ไม่เคยขึ้นจอเลยสักครั้ง ปุ่ม copy ทั้ง 9 จุดในเว็บจึงกดแล้วเงียบ
   สามอย่างพร้อมกัน:
   ‼ 1. กฎที่เปิด toast ผูกกับ `.active` แต่ `notify()` ที่ script.js:343 ใส่ `.show`
        ตอนนี้ผูกกับ `.show` แล้ว — ‼ ถ้าจะเปลี่ยน ต้องแก้ script.js พร้อมกัน
   ‼ 2. `#notify` ตัวเดิม (L5455) ตั้ง `top: 0` กับ `width: 100%` ไว้ พอมาเจอ `bottom: 24px`
        ที่นี่ กล่องเลยยืดเต็มจอ วัดได้ 1912x925 ต้องล้าง top/width ที่นี่
   ‼ 3. `#notify.show` ตัวเดิมเรียก `animation: 0.5s fadein, 0.5s 2.5s fadeout`
        แต่ในไฟล์นี้ไม่มี keyframe ชื่อนั้น มีแต่ `fadeIn` (I ใหญ่) ชื่อ animation เป็น
        case-sensitive มันเลยไม่ทำงาน — การเข้าออกใช้ transition ที่นี่แทน */
body#dash #notify {
    position: fixed;
    top: auto;
    bottom: 24px;
    left: 50%;
    width: auto;
    max-width: min(560px, calc(100vw - 32px));
    transform: translateX(-50%) translateY(40px);
    padding: var(--v2-sp-3) var(--v2-sp-4);
    border-radius: var(--v2-r-pill);
    background: var(--v2-sidebar);
    color: var(--v2-on-sidebar);
    border: 0;
    font-family: var(--v2-f-thai);
    font-weight: 500;
    font-size: 13px;
    line-height: 1.5;
    text-align: left;
    box-shadow: var(--v2-elev-3);
    opacity: 0;
    pointer-events: none;
    transition: transform var(--v2-t-base) var(--v2-ease), opacity var(--v2-t-base);
    z-index: 1100;
}
body#dash #notify.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    pointer-events: auto;
}

/* ------------- Mobile sidebar backdrop ------------- */
body .main-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 45;
    opacity: 0;
    transition: opacity var(--v2-t-base);
    pointer-events: none;
}
body .main-backdrop:not(.hidden) {
    opacity: 1;
    pointer-events: auto;
}
/* Mobile: when sidebar is open (sidebar-active on body#dash), auto-show backdrop */
@media (max-width: 991px) {
}

/* ------------- Floating orbs (body decoration) ------------- */
/* These orbs are injected via layout.twig right after <body>. */
body > .v2-orbs {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}
body > .v2-orbs .v2-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.35;
}
body > .v2-orbs .v2-orb.y1 {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, var(--v2-yellow), transparent 60%);
    top: -120px;
    left: -120px;
}
body > .v2-orbs .v2-orb.p1 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, var(--v2-violet), transparent 60%);
    top: 40%;
    right: -180px;
    opacity: 0.28;
}
body > .v2-orbs .v2-orb.c1 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, var(--v2-info), transparent 60%);
    bottom: -180px;
    left: 30%;
    opacity: 0.20;
}
html.light body > .v2-orbs .v2-orb,
html:not(.dark) body > .v2-orbs .v2-orb { opacity: 0.45; }
html.light body > .v2-orbs .v2-orb.p1,
html:not(.dark) body > .v2-orbs .v2-orb.p1 { opacity: 0.22; }
html.light body > .v2-orbs .v2-orb.c1,
html:not(.dark) body > .v2-orbs .v2-orb.c1 { opacity: 0.14; }

/* ------------- Content wrapper z-index fix so orbs sit below -------------
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */
body#outside .head-out,
body#outside main,
body#outside #header,
body#outside section,
body#outside footer,
body#outside .sm-header {
    position: relative;
    z-index: 2;
}

/* ============================================================
 *  v2 AUTHED PAGES — shared component overrides (Phase 2)
 *  These target legacy Bootstrap + theme class names used across
 *  neworder, services, orders, addfunds, tickets, account, etc.
 * ============================================================ */

/* Select2 dropdown tweak (was inline <style> in neworder.twig) */
body#dash .select2-results__options.dropdown-menu { margin-top: 0 !important; }
body#dash .select2-dropdown.dropdown-menu { padding: 0 !important; }

/* ---------- Cards ---------- */
/* A46 · พื้นทึบตามดีไซน์ 2a ไม่มีเส้นขอบ เงาเดียว
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */
body#dash .card {
    background: var(--v2-surface);
    border: 0;
    border-radius: var(--v2-r-lg);
    box-shadow: var(--v2-elev);
    color: var(--v2-ink);
}
body#dash .card-shadow { box-shadow: var(--v2-shadow-1); }
body#dash .card-body { padding: var(--v2-sp-5); color: var(--v2-ink); }

/* ---------- Dashboard stats widget (.dash-widget .dw-item) ---------- */
body#dash .dash-widget {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--v2-sp-3);
}
@media (max-width: 767px) {
    body#dash .dash-widget { grid-template-columns: 1fr; gap: var(--v2-sp-2); }
}
body#dash .dw-item {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-3);
    padding: var(--v2-sp-3);
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-md);
    position: relative;
    overflow: hidden;
}
body#dash .dw-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--v2-r-sm);
    background: var(--v2-yellow-soft);
    color: var(--v2-yellow);
    display: grid;
    place-items: center;
    font-size: 20px;
    flex-shrink: 0;
}
body#dash .dw-first { min-width: 0; flex: 1; }
body#dash .dw-value {
    font-family: var(--v2-f-dis);
    font-size: 20px;
    font-weight: 700;
    color: var(--v2-ink);
    line-height: var(--v2-lh-tight);
    display: flex;
    align-items: center;
    gap: var(--v2-sp-1);
    flex-wrap: wrap;
}
body#dash .dw-value a {
    color: var(--v2-yellow);
    font-size: 14px;
    display: inline-flex;
    align-items: center;
}
body#dash .dw-title {
    font-family: var(--v2-f-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--v2-ink-mute);
    margin-top: 4px;
}

/* ---------- App side widgets (contact / updates cards) ---------- */
body#dash .app-widget {
    padding: var(--v2-sp-3) var(--v2-sp-4);
    /* A46 · การ์ดใบเล็ก พื้นเดียวกับ .card มุมเล็กลงหนึ่งขั้น
       เหมือน .card เป๊ะ: กฎเดิมตรงนี้ก็ถูกกลุ่ม !important ที่ 16763 ทับอยู่ */
    background: var(--v2-surface);
    border: 0;
    border-radius: var(--v2-r-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--v2-sp-3);
    margin-bottom: 10px;
    box-shadow: var(--v2-elev);
}
body#dash .app-widget:last-child { margin-bottom: 0; }
body#dash .app-widget > span {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-2);
    color: var(--v2-ink);
    font-family: var(--v2-f-dis);
    font-weight: 600;
    font-size: 14px;
    flex: 1;
    min-width: 0;
}
body#dash .app-widget > span > i {
    width: 34px;
    height: 34px;
    background: var(--v2-yellow-soft);
    color: var(--v2-yellow);
    border-radius: var(--v2-r-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}
body#dash .app-widget > span > small {
    display: block;
    font-size: 11px;
    font-family: var(--v2-f-mono);
    letter-spacing: 0.08em;
    color: var(--v2-ink-mute);
    font-weight: 500;
    margin-top: 2px;
}
body#dash .app-widget .btn.btn-primary {
    height: 36px;
    padding: 0 var(--v2-sp-3);
    font-size: 12px;
    border-radius: var(--v2-r-sm);
    flex-shrink: 0;
}

/* ---------- Category swiper (nwo-categories) ---------- */
body#dash .nwo-categories { margin: 0; padding: 0; overflow: hidden; width: 100%; }
body#dash .nwo-categories .swiper-wrapper { display: flex; gap: var(--v2-sp-2); }
body#dash .nwo-categories .swiper-slide { width: auto; flex-shrink: 0; }
body#dash .nwo-cat-btn {
    width: 54px;
    height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--v2-r-md);
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    color: var(--v2-ink-dim);
    transition: background var(--v2-t-fast), border-color var(--v2-t-fast), color var(--v2-t-fast), transform var(--v2-t-fast);
    cursor: pointer;
    padding: 0;
}
body#dash .nwo-cat-btn:hover {
    background: var(--v2-glass-2);
    border-color: var(--v2-line-strong);
    color: var(--v2-ink);
    transform: translateY(-2px);
}
body#dash .nwo-cat-btn.active {
    background: var(--v2-yellow);
    color: var(--v2-yellow-ink);
    border-color: transparent;
    box-shadow: 0 6px 18px -6px var(--v2-yellow-glow);
}
body#dash .nwo-cat-btn .g-ticon {
    font-size: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Order filter card (wraps swiper) — tighter padding */
body#dash .card.order-filter .card-body {
    padding: var(--v2-sp-3) var(--v2-sp-3);
}
body#dash .card.order-filter .card-body::before,
body#dash .card.order-filter .card-body::after { display: none !important; }

/* ---------- Nav tabs (.nav / .nav-link / .nav-item) ----------
   A65 · ถอน `body#dash ul.nav#nav-tab` ออกจากกลุ่มนี้ — `#nav-tab` มี role="tablist" อยู่แล้ว
   ตัวมันจึงซ้ำซ้อนมาตลอด และตอนนี้บล็อก 21.3 เป็นเจ้าของแท็บสองหน้านั้นแทน */
body#dash ul.nav[role="tablist"] {
    list-style: none;
    padding: var(--v2-sp-1);
    margin: 0 0 12px;
    display: inline-flex;
    gap: var(--v2-sp-1);
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-pill);
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
body#dash .nav .nav-item { list-style: none; margin: 0; }
body#dash .nav-link {
    padding: var(--v2-sp-2) var(--v2-sp-4);
    border-radius: var(--v2-r-pill);
    font-family: var(--v2-f-dis);
    font-size: 13px;
    font-weight: 600;
    color: var(--v2-ink-dim);
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-2);
    cursor: pointer;
    transition: background var(--v2-t-fast), color var(--v2-t-fast);
    text-decoration: none !important;
    border: 0;
    background: transparent;
    line-height: var(--v2-lh-tight);
    white-space: nowrap;
}
body#dash .nav-link:hover { background: var(--v2-glass); color: var(--v2-ink); }
body#dash .nav-link.active {
    background: var(--v2-yellow);
    color: var(--v2-yellow-ink);
    box-shadow: 0 4px 12px -4px var(--v2-yellow-glow);
}
body#dash .nav-link.active .icon { color: var(--v2-yellow-ink); }
body#dash .nav-link .icon { font-size: 14px; }

/* ---------- Form fields ---------- */
body#dash .form-group { margin-bottom: 16px; }
body#dash .form-group.mb-4 { margin-bottom: 18px !important; }
/* A54 · ช่องกรอก — Panel A · พื้น --v2-well ไม่มีขอบ โฟกัสเป็นวงแหวนเหลือง inset 2px
   ‼ ห้ามใส่ font-family mono / text-transform uppercase กลับให้ label
     label มาจาก lang() = ภาษาไทย ("ชื่อผู้ใช้") ทั้งสองอย่างไม่มีผลหรือทำร้ายการอ่าน
     (tracking ถูก A19 ยกเลิกไปแล้ว ตัวนี้เก็บกวาดที่เหลือ)
   ‼ โฟกัสใช้ inset box-shadow ไม่ใช่ border — border เปลี่ยนขนาดกล่อง ข้อความจะกระตุกตอนโฟกัส
   ‼ ห้ามแตะ transition ของ input:-webkit-autofill — มี delay 600000s กัน Chrome ทาสีเหลือง (A37)
   git log --grep=A54 · .claude/verify/panelA2/A54-verify.json */
body#dash .form-label,
body#dash .control-label {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--v2-ink-mute);
    margin-bottom: 7px;
}
body#dash .form-control {
    width: 100%;
    height: 46px;
    padding: 0 var(--v2-sp-3);
    border: 0;
    border-radius: var(--v2-r-md);
    background: var(--v2-well);
    color: var(--v2-ink);
    font-family: var(--v2-f-thai);
    font-size: 13px;
    line-height: 1.5;
    box-shadow: none;
    outline: 0;
    transition: background var(--v2-t-fast), box-shadow var(--v2-t-fast);
}
body#dash .form-control:focus {
    background: var(--v2-well);
    box-shadow: inset 0 0 0 2px var(--v2-acc-line);
    color: var(--v2-ink);
}
body#dash .form-control::placeholder { color: var(--v2-ink-mute); }
body#dash textarea.form-control {
    height: auto;
    min-height: 120px;
    padding: var(--v2-sp-3);
    resize: vertical;
    line-height: 1.7;
    /* mono เก็บไว้ — เนื้อหาคือลิงก์บรรทัดละรายการ ไม่ใช่ประโยคภาษาไทย */
    font-family: var(--v2-f-mono);
    font-size: 13px;
}
body#dash select.form-control {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}
/* readonly ที่นี่ไม่ใช่ "ปิดใช้งาน" แต่คือค่าที่ให้คัดลอก (API key, ลิงก์แนะนำ)
   ดีไซน์ให้ disabled จาง 50% ซึ่งจะทำให้ค่าพวกนี้อ่านยาก — เก็บ mono กับสีไว้ */
body#dash .form-control[readonly] {
    background: var(--v2-surface-2);
    color: var(--v2-yellow-text);
    font-family: var(--v2-f-mono);
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: default;
}

/* ---------- Select2 integration ---------- */
body#dash .select2-container--default .select2-selection--single {
    height: 46px !important;
    padding: 0 var(--v2-sp-3) !important;
    border-radius: var(--v2-r-sm) !important;
    background: var(--v2-glass) !important;
    border: 1px solid var(--v2-line) !important;
    color: var(--v2-ink);
    display: flex !important;
    align-items: center;
    outline: 0;
}
body#dash .select2-container--default.select2-container--focus .select2-selection--single,
body#dash .select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--v2-yellow) !important;
    background: var(--v2-glass-2) !important;
    box-shadow: 0 0 0 3px var(--v2-yellow-soft);
}
body#dash .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--v2-ink);
    padding-left: 0 !important;
    padding-right: var(--v2-sp-5) !important;
    line-height: var(--v2-lh-ui);
    font-family: var(--v2-f-thai);
    font-size: 14px;
}
body#dash .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
    top: 0 !important;
    right: 12px !important;
    width: 16px !important;
}
body#dash .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--v2-ink-mute) transparent transparent transparent !important;
}
body#dash .select2-dropdown {
    background: var(--v2-glass-3) !important;
    border: 1px solid var(--v2-line-strong) !important;
    border-radius: var(--v2-r-md) !important;
    backdrop-filter: var(--v2-blur-strong);
    -webkit-backdrop-filter: var(--v2-blur-strong);
    box-shadow: var(--v2-shadow-2);
    color: var(--v2-ink);
    overflow: hidden;
}
body#dash .select2-container--default .select2-search--dropdown { padding: var(--v2-sp-2); }
body#dash .select2-container--default .select2-search--dropdown .select2-search__field {
    background: var(--v2-glass) !important;
    border: 1px solid var(--v2-line) !important;
    border-radius: var(--v2-r-sm) !important;
    color: var(--v2-ink) !important;
    padding: var(--v2-sp-2) var(--v2-sp-3) !important;
    font-family: var(--v2-f-thai);
    outline: 0;
}
body#dash .select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--v2-yellow) !important;
}
body#dash .select2-results__option {
    padding: var(--v2-sp-2) var(--v2-sp-3) !important;
    color: var(--v2-ink-dim) !important;
    font-size: 14px;
    font-family: var(--v2-f-thai);
}
body#dash .select2-container--default .select2-results__option--highlighted[aria-selected],
body#dash .select2-container--default .select2-results__option--highlighted {
    background: var(--v2-yellow-soft) !important;
    color: var(--v2-yellow) !important;
}
body#dash .select2-container--default .select2-results__option[aria-selected="true"] {
    background: var(--v2-glass-2) !important;
    color: var(--v2-ink) !important;
}

/* ---------- Buttons (Bootstrap overrides for authed) ---------- */
body#dash .btn.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--v2-sp-2);
    padding: var(--v2-sp-2) var(--v2-sp-5);
    border-radius: var(--v2-r-sm);
    font-family: var(--v2-f-dis);
    font-weight: 600;
    font-size: 14px;
    border: 1px solid transparent;
    background: var(--v2-yellow);
    color: var(--v2-yellow-ink);
    cursor: pointer;
    text-decoration: none !important;
    transition: background var(--v2-t-fast), transform var(--v2-t-fast), box-shadow var(--v2-t-base);
    line-height: 1.3;
    white-space: nowrap;
}
/* ‼ ห้ามใส่ box-shadow กลับเข้ามาที่นี่ — `.btn:hover { box-shadow: none !important }`
   ที่ L958 เป็นกฎรวมทั้งเว็บและตั้งใจให้ปุ่มทุกตัวแบน กฎเดิมตรงนี้เคยเขียน
   `0 12px 24px -10px var(--v2-yellow-glow)` ไว้และไม่เคยขึ้นจอเลยสักครั้ง
   ปฏิกิริยาตอนชี้คือสว่างขึ้น + ยกขึ้น 1px ซึ่งเห็นได้จริงทั้งคู่ */
body#dash .btn.btn-primary:hover,
body#dash .btn.btn-primary:focus {
    background: #ffe24a;
    color: var(--v2-yellow-ink);
    transform: translateY(-1px);
}
body#dash .btn.btn-outline-light {
    background: var(--v2-glass-2);
    border: 1px solid var(--v2-line-strong);
    color: var(--v2-ink);
    padding: var(--v2-sp-2) var(--v2-sp-5);
    border-radius: var(--v2-r-sm);
    font-family: var(--v2-f-dis);
    font-weight: 600;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--v2-sp-2);
    text-decoration: none !important;
    transition: background var(--v2-t-fast), border-color var(--v2-t-fast);
    line-height: 1.3;
}
body#dash .btn.btn-outline-light:hover {
    background: var(--v2-glass-3);
    color: var(--v2-ink);
    border-color: var(--v2-line-strong);
}
body#dash .btn.btn-lg { padding: var(--v2-sp-3) var(--v2-sp-5); font-size: 14px; border-radius: var(--v2-r-md); }
body#dash .btn.btn-block { display: flex; width: 100%; justify-content: center; }
body#dash .btn.btn-100 { width: 100%; justify-content: center; }
/* The stock .btn-secondary carries a two-layer drop shadow that never lands:
   .btn sets box-shadow: none !important earlier in the same file. Flat is the
   Soft Panel's intent, so this is one of the stock theme's own dead pairs rather
   than something to restore. */
body#dash .btn.btn-secondary {
    background: var(--v2-glass-2);
    border: 1px solid var(--v2-line-strong);
    color: var(--v2-ink);
    padding: var(--v2-sp-2) var(--v2-sp-4);
    border-radius: var(--v2-r-sm);
    font-family: var(--v2-f-dis);
    font-weight: 500;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-2);
    text-decoration: none !important;
    transition: background var(--v2-t-fast);
}
body#dash .btn.btn-secondary:hover {
    background: var(--v2-glass-3);
    color: var(--v2-ink);
}

/* ---------- Alerts (Bootstrap overrides) ---------- */
/* A48 · alert — โทนเดียวกับชิป พื้นทึบ ไม่มีขอบ
   ‼ ห้ามใส่ !important กลับ และห้ามลบ body#outside .alert.alert-success/-danger ในโซน legacy
     สองกฎนั้นมี !important ของตัวเองและเคยชนะบล็อกนี้อยู่ ตอนนี้จำกัด scope ให้ guest แล้ว
   git log --grep=A48 · .claude/verify/panelA2/A48-verify.json */
body#dash .alert {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-2);
    flex-wrap: wrap;
    padding: var(--v2-sp-3);
    border: 0;
    border-radius: var(--v2-r-md);
    background: var(--v2-well);
    color: var(--v2-ink);
    font-size: 12.5px;
    line-height: 1.6;
    margin-bottom: 18px;
    position: relative;
}
/* :not(.neworder-promo) — the partner banner has its own block further down and
   owns its own border. Without this exclusion that block needs !important on
   border just to clear this line, which is exactly why the version of it that
   shipped before carried border-color: !important with no visible reason. */
body#dash .alert-info    { background: var(--v2-info-soft);   color: var(--v2-info-text); }
body#dash .alert-warning:not(.neworder-promo) {
    background: var(--v2-warn-soft);
    color: var(--v2-warn-text);
}
body#dash .alert-success {
    background: var(--v2-ok-soft);
    color: var(--v2-ok-text);
}
body#dash .alert-success h4 { color: var(--v2-ok); font-family: var(--v2-f-dis); font-size: 14px; font-weight: 700; margin: 0 0 6px; }
body#dash .alert-danger {
    background: var(--v2-danger-soft);
    color: var(--v2-danger-text);
}
body#dash .alert strong { color: inherit; font-weight: 700; }
body#dash .alert.alert-dismissible { padding-right: 48px; }
body#dash .alert .close {
    background: transparent !important;
    border: 0 !important;
    color: var(--v2-ink-mute);
    opacity: 0.8;
    padding: 0;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 20px;
    text-shadow: none;
    line-height: 1;
}
body#dash .alert .close:hover { background: var(--v2-glass) !important; opacity: 1; }

/* Partner promo banner (the "ปรับระบบใหม่" affiliate banner in neworder.twig)
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */
body#dash .alert.alert-warning.neworder-promo,
body#dash .alert.neworder-promo {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--v2-sp-1) var(--v2-sp-3);
    padding: var(--v2-sp-3) 48px var(--v2-sp-3) var(--v2-sp-4);
    background: var(--adv-panel-top) !important;
    border-radius: var(--v2-r-sm);
    /* the accent bar is an inset shadow, not border-left, because
       `body#dash .alert` sets `border: … !important` for every alert on the
       dashboard. Beating that needs !important here too, or a :not() on a rule
       the whole site leans on. box-shadow is uncontested, so the accent costs
       nothing and the hairline border stays the theme's own. */
    box-shadow: inset 3px 0 0 var(--adv-stub-bg), var(--adv-lift-sm);
    color: var(--adv-mute) !important;
    font-size: 13px;
    line-height: var(--v2-lh-body);
}
body#dash .neworder-promo strong {
    color: var(--adv-stub-ink);
    background: var(--adv-stub-bg);
    margin-right: 4px;
    padding: 2px var(--v2-sp-2);
    border-radius: var(--v2-r-pill);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
body#dash .neworder-promo .promo-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-1);
    margin-left: auto;
    padding: var(--v2-sp-2) var(--v2-sp-3);
    border-radius: var(--v2-r-pill);
    background: var(--adv-inner);
    border: 1px solid var(--adv-inner-line);
    /* --adv-stub-ink is the ink for sitting on yellow. The resting button is
       --adv-inner, which is #f2f0ea in light and #20202a in dark, so that ink
       vanished on dark — 12 luminance apart. Only the hover state turns yellow,
       so only hover gets stub-ink. Caught on /affiliates too: .promo-cta is
       shared with the withdraw button there. */
    color: var(--v2-ink);
    font-family: var(--v2-f-dis);
    font-weight: 600;
    font-size: 12px;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background var(--v2-t-fast), box-shadow var(--v2-t-fast), transform var(--v2-t-fast);
}
body#dash .neworder-promo .promo-cta:hover {
    background: var(--adv-stub-bg);
    border-color: var(--adv-stub-bg);
    color: var(--adv-stub-ink) !important;
    box-shadow: var(--adv-sel-glow);
    transform: translateY(-1px);
}
@media (max-width: 640px) {
    body#dash .neworder-promo { padding-right: 38px; }
    body#dash .neworder-promo .promo-cta { margin-left: 0; }
}

/* ---------- Service info right-panel ---------- */
body#dash .ns-name {
    padding: var(--v2-sp-3) var(--v2-sp-4);
    background: var(--v2-yellow-soft);
    border: 1px solid rgba(255, 214, 10, 0.30);
    border-radius: var(--v2-r-md);
    margin-bottom: 14px;
    min-height: 48px;
    display: flex;
    align-items: center;
}
body#dash .ns-name .service-title,
body#dash .ns-name .service-title span {
    color: var(--v2-yellow);
    font-family: var(--v2-f-dis);
    font-weight: 700;
    font-size: 14px;
    line-height: 1.3;
}
body#dash .ns-name .service-title:empty::before {
    content: "เลือกบริการที่ต้องการ";
    color: var(--v2-ink-mute);
    font-weight: 500;
    font-size: 13px;
    font-family: var(--v2-f-thai);
}
body#dash .ns-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--v2-sp-2);
}
body#dash .ns-info > div {
    padding: var(--v2-sp-3);
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-sm);
    display: flex;
    flex-direction: column;
    gap: var(--v2-sp-2);
}
body#dash .ns-info > div > span {
    display: block;
    font-family: var(--v2-f-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--v2-ink-mute);
    text-transform: uppercase;
}
body#dash .ns-item {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-2);
}
body#dash .ns-item .icon {
    width: 30px;
    height: 30px;
    border-radius: var(--v2-r-sm);
    background: var(--v2-yellow-soft);
    color: var(--v2-yellow);
    display: grid;
    place-items: center;
    font-size: 12px;
    flex-shrink: 0;
}
body#dash .ns-item .text {
    font-family: var(--v2-f-dis);
    font-size: 13px;
    font-weight: 600;
    color: var(--v2-ink);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body#dash .ns-item .text > span:empty::before {
    content: "—";
    color: var(--v2-ink-soft);
    font-weight: 400;
}
body#dash .service-desc {
    padding: var(--v2-sp-3) var(--v2-sp-4);
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-md);
    font-size: 13px;
    color: var(--v2-ink-dim);
    line-height: 1.7;
}
body#dash .service-desc:has(> div:empty) { display: none; }

/* ---------- "Read before ordering" list ----------
   A65 · ลบทั้งสองกฎที่เคยอยู่ตรงนี้ (`#nav-read ul` และ `#nav-read ul li`)
   ‼ มันคือตัวที่ทำให้คำเตือนยังเป็นกล่อง 7 ใบ ทั้งที่บล็อก 21.4 สั่งให้เป็นแผงเดียวไปแล้ว
     `body#dash #nav-read ul li` ถือ **สอง id** → (2,0,3)
     `body#dash .read-before-list > li` ถือ id เดียว + class → (1,1,2) → **แพ้**
     ผลคือ background/border/border-radius ของ 21.4 ตายทั้งสามบรรทัด
     แต่ display/gap/counter ยังทำงาน — **กฎขึ้นจอครึ่งเดียว** ซึ่งดูจากรูปแล้วแยกไม่ออก
   ‼ เครื่องมือที่มีมองไม่เห็น: `who-wins.py read-before-list` เก็บเฉพาะกฎที่ชื่อ selector
     มีคำที่ค้น — ตัวที่ชนะไม่มีคำว่า read-before-list เลยสักตัวอักษร
     วิธีที่เจอ: แปลง sheet เป็น blob แล้วไล่ el.matches ทีละกฎ เรียงตาม (specificity, ลำดับ)
   ‼ ปลอดภัยที่จะลบ: `#nav-read` มีที่เดียวคือ neworder.twig:376 และข้างในมี
     ul.read-before-list ตัวเดียว — กฎ 21.4 ครอบทุกบรรทัดที่กฎนี้เคยตั้งไว้
   ที่อยู่ใหม่ของสไตล์ลิสต์นี้: หัวข้อ 21.4 (ค้นคำว่า "ตัวเตือน 7 การ์ด") */

/* ---------- Description badges (set by JS) ---------- */
body#dash #desc-badges {
    display: flex;
    gap: var(--v2-sp-1);
    flex-wrap: wrap;
    margin-bottom: 14px;
    min-height: 0;
}
body#dash #desc-badges:empty { margin-bottom: 0; }
body#dash #desc-badges > span {
    border-radius: var(--v2-r-pill) !important;
    padding: var(--v2-sp-1) var(--v2-sp-2) !important;
    font-family: var(--v2-f-dis) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center;
    gap: var(--v2-sp-1);
    line-height: 1 !important;
}

/* ---------- Service description panel ---------- */
body#dash #service_description { margin-bottom: 18px; }
body#dash #service_description .panel-body {
    padding: var(--v2-sp-3) var(--v2-sp-4);
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-md);
    color: var(--v2-ink-dim);
    font-size: 13px;
    line-height: var(--v2-lh-body);
}
body#dash .border-solid { border: 1px solid var(--v2-line); }
body#dash .border-rounded { border-radius: var(--v2-r-md); }

/* ---------- Grid/row compactness ---------- */
body#dash .row.m-top,
body#dash .mt-lg-3.m-top { margin-top: 0 !important; }
body#dash .row { margin-left: -7px; margin-right: -7px; row-gap: var(--v2-sp-3); }
body#dash .row > [class*="col-"] { padding-left: var(--v2-sp-2); padding-right: var(--v2-sp-2); }

/* Hidden class (used in form state) */
body#dash .hidden,
body#outside .hidden { display: none !important; }

/* ---------- New-order action row (submit + top-up) ---------- */
body#dash .neworder-actions {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--v2-sp-2);
    align-items: stretch;
    /* nothing separated these from the stub above, so the ticket and the buy
       button read as one fused block */
    margin-top: 16px;
}
@media (max-width: 540px) {
    body#dash .neworder-actions { grid-template-columns: 1fr; }
}
body#dash .neworder-actions .btn-lg {
    min-height: 52px;
    padding: var(--v2-sp-3) var(--v2-sp-6);
    white-space: nowrap;
}

/* ============================================================
 *  Page header (v4-style) — shared by orders, services, addfunds,
 *  account, tickets, affiliates, refill, subscription, drip_feed,
 *  api, updates, faq, childpanel, massorder
 * ============================================================ */
body#dash .page-header-v2,
body#outside .page-header-v2 {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--v2-sp-6);
    padding: var(--v2-sp-1) 0 var(--v2-sp-5);
    flex-wrap: wrap;
}
body#dash .page-header-v2 > div,
body#outside .page-header-v2 > div { min-width: 0; }
body#dash .page-h1-v2,
body#outside .page-h1-v2 {
    font-family: var(--v2-f-dis);
    font-size: var(--v2-fs-fluid-2);
    font-weight: 800;
    line-height: var(--v2-lh-tight);
    margin: 10px 0 8px;
    color: var(--v2-ink);
}
body#dash .page-h1-v2 i,
body#outside .page-h1-v2 i {
    font-style: italic;
    font-family: var(--v2-f-serif);
    font-weight: 400;
    color: var(--v2-yellow-text);
}
body#dash .page-sub-v2,
body#outside .page-sub-v2 {
    color: var(--v2-ink-mute);
    font-size: 14px;
    line-height: var(--v2-lh-body);
    max-width: 720px;
}

/* ============================================================
 *  Auth mini card (2fa, confirm-email — single narrow form)
 * ============================================================ */
body#dash .auth-mini-card .card-body,
body#outside .auth-mini-card .card-body { padding: var(--v2-sp-6); text-align: left; }
body#dash .auth-mini-title,
body#outside .auth-mini-title {
    font-family: var(--v2-f-dis);
    font-size: 20px;
    font-weight: 700;
    color: var(--v2-ink);
    margin: 0 0 6px;
}
body#dash .auth-mini-sub,
body#outside .auth-mini-sub {
    color: var(--v2-ink-mute);
    font-size: 13px;
    line-height: var(--v2-lh-body);
    margin: 0 0 20px;
}
body#dash .auth-mini-card .btn.btn-primary,
body#outside .auth-mini-card .btn.btn-primary {
    width: 100%;
    justify-content: center;
    margin-top: 8px;
    height: 46px;
    padding: 0 var(--v2-sp-4);
    border-radius: var(--v2-r-sm);
}

/* ============================================================
 *  Terms / About content (long-form prose)
 * ============================================================ */
body#dash .terms-content,
body#outside .terms-content,
body#dash .about-content,
body#outside .about-content {
    color: var(--v2-ink-dim);
}
body#dash .terms-content p,
body#outside .terms-content p,
body#dash .about-content p,
body#outside .about-content p { margin: 0 0 14px; }
body#dash .terms-content h1,
body#dash .terms-content h2,
body#dash .terms-content h3,
body#outside .terms-content h1,
body#outside .terms-content h2,
body#outside .terms-content h3,
body#dash .about-content h1,
body#dash .about-content h2,
body#dash .about-content h3,
body#outside .about-content h1,
body#outside .about-content h2,
body#outside .about-content h3 {
    font-family: var(--v2-f-dis);
    font-weight: 700;
    color: var(--v2-ink);
    margin: 28px 0 10px;
}
body#dash .terms-content a,
body#outside .terms-content a,
body#dash .about-content a,
body#outside .about-content a {
    color: var(--v2-yellow);
    text-decoration: underline !important;
    text-underline-offset: 3px;
}
body#dash .terms-content ul,
body#outside .terms-content ul,
body#dash .about-content ul,
body#outside .about-content ul { padding-left: var(--v2-sp-5); margin: 10px 0 14px; }
body#dash .terms-content li,
body#outside .terms-content li,
body#dash .about-content li,
body#outside .about-content li { margin-bottom: 6px; list-style: disc; }

/* ---------- Neworder header (eyebrow + h1 + inline stats strip) ----------
   A61 · เหลือแต่ระยะ — display/gap/align มาจากกฎที่ 21.2 (`display:flex`)
   ‼ กฎนี้เคยเป็น grid 1fr auto พร้อม media query ที่สลับเป็น 1fr คอลัมน์เดียว
     ทั้งชุดตายมาตลอดเพราะกฎ flex อยู่ทีหลังในไฟล์ ลบทิ้งแทนการไปสู้
     เช็คก่อนเพิ่มอะไรที่นี่: who-wins.py neworder-header --scope 'body#dash' */
body#dash .neworder-header {
    padding: var(--v2-sp-1) 0 var(--v2-sp-5);
    margin-bottom: 4px;
}
body#dash .neworder-header-title { min-width: 0; }
/* ขนาดตัวอักษรไม่ได้อยู่ที่นี่ — บล็อก 21.2 ตั้ง 26px !important ให้หัวหน้าฝั่ง dash
   ทุกหน้า บรรทัด font-size ตรงนี้จึงตายมาตลอด ลบทิ้งแทนที่จะไปสู้ด้วย !important */
body#dash .neworder-h1 {
    font-family: var(--v2-f-dis);
    font-weight: 800;
    line-height: var(--v2-lh-tight);
    margin: 10px 0 8px;
    color: var(--v2-ink);
}
body#dash .neworder-h1 i {
    font-style: italic;
    font-family: var(--v2-f-serif);
    font-weight: 400;
    color: var(--v2-yellow-text);
}
body#dash .neworder-sub {
    color: var(--v2-ink-mute);
    font-size: 14px;
    line-height: var(--v2-lh-body);
}
/* A61 · สถิติสามช่องเป็นแถบเปล่า ไม่ใช่การ์ด — กฎที่ 21.2 ล้าง padding / background / border
   ด้วย !important ทั้งสามตัว จึงลบออกจากที่นี่
   ‼ แต่ 21.2 **ไม่ได้แตะ** border-radius กับ backdrop-filter — สองตัวนั้นยังมีผลจริง
     ลบไปครั้งหนึ่งแล้วเบลอฉากหลังหายไป จับได้ตอนวัดเทียบ ไม่ใช่ตอนอ่านโค้ด
     ห้ามลบซ้ำโดยคิดว่า "พื้นโปร่งใสแล้วเบลอไม่มีผล" — backdrop-filter ทำงานตรงที่พื้นโปร่ง */
body#dash .neworder-stats {
    flex-wrap: wrap;
    border-radius: var(--v2-r-md);
    backdrop-filter: var(--v2-blur);
    -webkit-backdrop-filter: var(--v2-blur);
}
body#dash .neworder-stats .ns {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
/* A61 · ตัวเลขสถิติ — เหลือแต่ family กับ weight
   ‼ font-size / line-height / color ถูกกฎที่ 21.2 ตั้งใหม่ทั้งหมด และตัวเลขช่องที่สอง
     ถูกเปลี่ยนเป็นเหลืองที่นั่นด้วย (`:nth-child(2) b`) สามบรรทัดนั้นตายมาตลอด */
body#dash .neworder-stats .ns b {
    font-family: var(--v2-f-dis);
    font-weight: 800;
}
/* A65 · ลบกฎ mono/uppercase ของป้ายสถิติที่เคยอยู่ตรงนี้
   ‼ คอมเมนต์เดิมเขียนว่า "ป้ายพวกนี้เป็นภาษาอังกฤษล้วน (ORDERS / BALANCE)" — **ไม่จริง**
     ใน neworder.twig มันคือ ออเดอร์ทั้งหมด · คงเหลือ · ยอดใช้จ่ายไป ภาษาไทยล้วนทั้งสามตัว
     uppercase จึงไม่ทำอะไรกับตัวอักษรเลย นอกจากลาก JetBrains Mono มาเรนเดอร์ไทย
     ซึ่งคือบั๊กตัวเดียวกับที่ A54 แก้ไปแล้วรอบหนึ่ง
   ค่าใหม่อยู่ในบล็อก 21.2 (ค้นคำว่า "การ์ดสามใบ") */
body#dash .neworder-stats .ns span a {
    color: var(--v2-yellow-text);
    text-decoration: none !important;
}
/* A61 · เส้นคั่นระหว่างช่อง — วาดที่ 21.2 (solid --adv-panel-line, sp-4)
   ‼ ที่นี่เคยเป็นเส้นประ --v2-line ระยะ sp-5 ทั้งคู่ตายมาตลอด ลบทิ้ง
     กฎบนจอ 540px ที่ล้างเส้นออกยังอยู่ ไม่ได้แตะ */

/* ---------- Neworder 2-col wrap (form-card + summary) ---------- */
body#dash .neworder-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: var(--v2-sp-4);
    align-items: flex-start;
}
@media (max-width: 1100px) {
    body#dash .neworder-wrap { grid-template-columns: 1fr; }
}
body#dash .neworder-main { min-width: 0; }

/* Form card — wraps the tabbed form */
body#dash .form-card { padding: 0; }
body#dash .form-card > .card-body { padding: var(--v2-sp-5); }

/* Step rows (v4-style numbered steps) */
body#dash .step-row {
    display: flex;
    gap: var(--v2-sp-3);
    padding: var(--v2-sp-4) 0;
    border-bottom: 1px dashed var(--v2-line);
}
body#dash .step-row:first-of-type { padding-top: var(--v2-sp-1); }
body#dash .step-row:last-of-type { border-bottom: 0; padding-bottom: var(--v2-sp-1); }
body#dash .step-n {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--v2-yellow);
    color: var(--v2-yellow-ink);
    display: grid;
    place-items: center;
    font-family: var(--v2-f-dis);
    font-weight: 800;
    font-size: 14px;
    box-shadow: 0 6px 18px -6px var(--v2-yellow-glow);
}
body#dash .step-body {
    flex: 1;
    min-width: 0;
}
body#dash .step-body .step-t {
    font-family: var(--v2-f-dis);
    font-weight: 700;
    font-size: 14px;
    color: var(--v2-ink);
    margin-bottom: 2px;
}
body#dash .step-body .step-d {
    color: var(--v2-ink-mute);
    font-size: 12px;
    margin-bottom: 14px;
    line-height: 1.5;
}

/* Swiper inside step 1 — tighter since it's inside a card */
body#dash .step-body .nwo-categories { padding: var(--v2-sp-1) 0; }

/* Summary aside (service info tabs + ctx widgets) */
body#dash .neworder-summary {
    position: sticky;
    top: 80px;
    display: flex;
    flex-direction: column;
    gap: var(--v2-sp-2);
    min-width: 0;
}
/* A67 · H4 กฎข้อ 2 — คอลัมน์ขวาไปอยู่ **ล่างสุด** บนมือถือ
   ‼ `order: -1` ถูกลบ: มันดันคำเตือน 7 ข้อ + วิดเจ็ต 2 อันมาก่อนช่องกรอก
     ต้องเลื่อนผ่านทั้งหมดกว่าจะถึงงานหลัก — เห็นตอนเปิดจอ 390 จริงครั้งแรก
   ‼ ตัวเลขที่ต้องเห็นตลอดคือ "ยอดที่ต้องชำระ" ดีไซน์จึงให้ตรึงเฉพาะตั๋วไว้ขอบล่าง
     ไม่ใช่ดันทั้งคอลัมน์ขึ้นบน (Panel H · H4 กฎข้อ 2) */
@media (max-width: 1100px) {
    body#dash .neworder-summary { position: static; }
    /* กฎ "ตั๋วตรึงขอบล่าง" **ไม่ได้อยู่ตรงนี้** — ดูท้ายบล็อก .nos-quote (A62/A67)
       ‼ เขียนไว้ตรงนี้ครั้งแรกแล้วไม่ทำงาน: บล็อกฐานของ .nos-quote อยู่ท้ายไฟล์
         specificity เท่ากัน ตัวที่อยู่ทีหลังชนะ กฎ media ที่อยู่ก่อนหน้าจึงแพ้ทั้งดุ้น
         วัดบนจอ 390 จริงถึงเห็น (position ยังเป็น relative) */
}
body#dash .neworder-summary .nav {
    margin: 0 0 10px;
    overflow-x: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
}
body#dash .neworder-summary-card .card-body { padding: var(--v2-sp-4); }

/* App widgets inside the summary aside — full width stacked */
body#dash .neworder-summary .app-widget {
    margin-bottom: 0;
}

/* Service-info grid: single column inside the narrow summary aside */
body#dash .neworder-summary .ns-info {
    grid-template-columns: 1fr;
}

/* Hide the old sidebar-profile context that showed "จำนวนออเดอร์ทั้งหมด" etc */
body#dash .neworder-summary .card-body { position: relative; }

/* ============================================================
 *  services.twig — service catalog list
 * ============================================================ */

/* Services wrap — used when catalog is shown to guests */
body#outside .services-wrap { max-width: 1280px; margin: 0 auto; padding: var(--v2-sp-5) var(--v2-sp-6) 80px; }
body#outside .services-wrap .page-outside { position: relative; z-index: 2; }

/* Dropdown menu (filter categories, currencies) */
body#dash .dropdown-menu,
body#outside .dropdown-menu {
    background: var(--v2-glass-3);
    border: 1px solid var(--v2-line-strong);
    border-radius: var(--v2-r-md);
    backdrop-filter: var(--v2-blur-strong);
    -webkit-backdrop-filter: var(--v2-blur-strong);
    box-shadow: var(--v2-shadow-2);
    padding: var(--v2-sp-1);
    color: var(--v2-ink);
}
body#dash .dropdown-menu.dropdown-menu-scroll,
body#outside .dropdown-menu.dropdown-menu-scroll { max-height: 400px; overflow-y: auto; }
body#dash .dropdown-menu.dropdown-menu-currency,
body#outside .dropdown-menu.dropdown-menu-currency { width: auto; min-width: 140px; }
body#dash .dropdown-item,
body#outside .dropdown-item {
    padding: var(--v2-sp-2) var(--v2-sp-3);
    border-radius: var(--v2-r-sm);
    color: var(--v2-ink-dim);
    font-family: var(--v2-f-dis);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    white-space: normal;
    transition: background var(--v2-t-fast), color var(--v2-t-fast);
}
body#dash .dropdown-item:hover,
body#outside .dropdown-item:hover {
    background: var(--v2-glass-2);
    color: var(--v2-ink);
}
body#dash .dropdown-item.active,
body#outside .dropdown-item.active {
    background: var(--v2-yellow-soft);
    color: var(--v2-yellow);
}
@media (min-width: 992px) {
    body#dash .dropdown-item,
    body#outside .dropdown-item { min-width: 320px; }
}

/* Filter toggle button (ตัวกรองบริการ) uses .btn.btn-primary */
body#dash .dropdown .btn.dropdown-toggle,
body#outside .dropdown .btn.dropdown-toggle { padding-right: 36px; position: relative; }
body#dash .dropdown .btn.dropdown-toggle::after,
body#outside .dropdown .btn.dropdown-toggle::after {
    border: 0;
    content: "▾";
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    width: auto;
    height: auto;
    margin: 0;
}

/* Service search input */
body#dash .service-search,
body#outside .service-search { position: relative; }
body#dash .service-search::before,
body#outside .service-search::before {
    content: "\f002";
    font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free", "FontAwesome";
    font-weight: 400;
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--v2-ink-mute);
    font-size: 14px;
    pointer-events: none;
}
body#dash .service-search .textbox,
body#outside .service-search .textbox {
    width: 100%;
    padding: var(--v2-sp-3) var(--v2-sp-3) var(--v2-sp-3) 42px;
    border-radius: var(--v2-r-pill);
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    color: var(--v2-ink);
    font-family: var(--v2-f-thai);
    font-size: 14px;
    outline: 0;
    transition: border-color var(--v2-t-fast), background var(--v2-t-fast);
}
body#dash .service-search .textbox:focus,
body#outside .service-search .textbox:focus {
    border-color: var(--v2-yellow);
    background: var(--v2-glass-2);
    box-shadow: 0 0 0 3px var(--v2-yellow-soft);
}
body#dash .service-search .textbox::placeholder,
body#outside .service-search .textbox::placeholder { color: var(--v2-ink-mute); }

/* Empty search state */
body#outside .nothing-found { display: none; }
body#outside .nothing-found.show { display: block; }
body#outside .nothing-found-body { padding: 48px var(--v2-sp-6); }
body#outside .nothing-found-icon {
    font-size: 56px;
    color: var(--v2-yellow);
    margin-bottom: 14px;
}
body#outside .nothing-found h3 {
    font-family: var(--v2-f-dis);
    font-size: 20px;
    font-weight: 700;
    color: var(--v2-ink);
    margin: 0 0 6px;
}
body#outside .nothing-found p { color: var(--v2-ink-mute); font-size: 14px; margin: 0; }

/* Service category section */
body#dash .service-category,
body#outside .service-category { margin-bottom: 28px; }
body#dash .service-content-all,
body#outside .service-content-all {
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-lg);
    padding: var(--v2-sp-4);
    backdrop-filter: var(--v2-blur);
    -webkit-backdrop-filter: var(--v2-blur);
}
body#dash .service-content-head,
body#outside .service-content-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--v2-sp-3);
    padding-bottom: var(--v2-sp-3);
    border-bottom: 1px solid var(--v2-line);
    margin-bottom: 14px;
}
body#dash .service-cat-side,
body#outside .service-cat-side { display: flex; align-items: center; gap: var(--v2-sp-3); flex-wrap: wrap; }
body#dash .service-cat-header,
body#outside .service-cat-header {
    font-family: var(--v2-f-dis);
    font-size: 20px;
    font-weight: 700;
    color: var(--v2-ink);
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-2);
}
body#dash .s-count,
body#outside .s-count {
    font-family: var(--v2-f-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    color: var(--v2-ink-mute);
    text-transform: uppercase;
}
body#dash .s-count strong,
body#outside .s-count strong { color: var(--v2-yellow); font-weight: 700; }

/* Service item row */
body#dash .service-content,
body#outside .service-content {
    display: flex;
    flex-direction: column;
    gap: var(--v2-sp-2);
}
body#dash .service-item,
body#outside .service-item {
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-md);
    padding: var(--v2-sp-3) var(--v2-sp-4);
    transition: border-color var(--v2-t-fast), background var(--v2-t-fast);
}
body#dash .service-item:hover,
body#outside .service-item:hover {
    border-color: var(--v2-line-strong);
    background: var(--v2-glass-2);
}
body#dash .services-item-top,
body#outside .services-item-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--v2-sp-3);
    margin-bottom: 10px;
}
body#dash .sit-first,
body#outside .sit-first { display: flex; gap: var(--v2-sp-3); align-items: flex-start; flex: 1; min-width: 0; }
body#outside .sit-first .services-id { margin: auto; }
body#dash .services-id,
body#outside .services-id {
    font-family: var(--v2-f-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--v2-yellow);
    background: var(--v2-yellow-soft);
    padding: var(--v2-sp-1) var(--v2-sp-2);
    border-radius: var(--v2-r-xs);
    flex-shrink: 0;
}
body#dash .services-title,
body#outside .services-title {
    font-family: var(--v2-f-dis);
    font-size: 14px;
    font-weight: 600;
    color: var(--v2-ink);
    line-height: var(--v2-lh-tight);
    min-width: 0;
    word-break: break-word;
}
body#dash .services-title .ss-name,
body#outside .services-title .ss-name { color: var(--v2-ink); }
body#dash .sit-last,
body#outside .sit-last {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-2);
    flex-shrink: 0;
}
body#dash .services-rate,
body#outside .services-rate {
    font-family: var(--v2-f-dis);
    font-weight: 800;
    font-size: 16px;
    color: var(--v2-yellow-text);
    white-space: nowrap;
}
body#dash .btn-favorite,
body#outside .btn-favorite {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--v2-r-sm);
    background: var(--v2-glass-2);
    border: 1px solid var(--v2-line);
    color: var(--v2-ink-mute);
    cursor: pointer;
    transition: background var(--v2-t-fast), color var(--v2-t-fast);
}
body#dash .btn-favorite:hover,
body#outside .btn-favorite:hover { color: var(--v2-yellow); }
body#dash .btn-favorite .favorite-active,
body#outside .btn-favorite .favorite-active { color: var(--v2-yellow); }

/* Service item — bottom row (min/max/avg + actions) */
body#dash .services-item-bottom,
body#outside .services-item-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--v2-sp-3);
    flex-wrap: wrap;
}
body#dash .sib-first,
body#outside .sib-first {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-3);
    flex-wrap: wrap;
    font-family: var(--v2-f-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--v2-ink-mute);
}
body#dash .sib-first > span,
body#outside .sib-first > span { display: inline-flex; align-items: center; gap: var(--v2-sp-1); }
body#dash .sib-first > span i,
body#outside .sib-first > span i { color: var(--v2-ink-soft); font-size: 12px; }
body#dash .sib-first strong,
body#outside .sib-first strong {
    color: var(--v2-ink);
    font-family: var(--v2-f-dis);
    font-weight: 700;
    font-size: 12px;
}
body#dash .badgearea,
body#outside .badgearea { display: inline-flex; gap: var(--v2-sp-1); flex-wrap: wrap; }
body#dash .badgearea > span,
body#outside .badgearea > span {
    border-radius: var(--v2-r-pill) !important;
    padding: var(--v2-sp-1) var(--v2-sp-2) !important;
    font-family: var(--v2-f-dis);
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
}
body#dash .sib-last,
body#outside .sib-last { display: flex; gap: var(--v2-sp-2); flex-wrap: wrap; }
body#dash .sib-last .btn,
body#outside .sib-last .btn {
    padding: var(--v2-sp-2) var(--v2-sp-3);
    border-radius: var(--v2-r-sm);
    font-size: 12px;
    font-family: var(--v2-f-dis);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-1);
    border: 1px solid var(--v2-line);
    background: var(--v2-glass-2);
    color: var(--v2-ink);
    text-decoration: none !important;
    cursor: pointer;
    transition: background var(--v2-t-fast), border-color var(--v2-t-fast), transform var(--v2-t-fast);
}
body#dash .sib-last .btn:hover,
body#outside .sib-last .btn:hover {
    background: var(--v2-glass-3);
    border-color: var(--v2-line-strong);
    transform: translateY(-1px);
}
body#dash .btn.btn-order-now,
body#outside .btn.btn-order-now {
    background: var(--v2-yellow);
    color: var(--v2-yellow-ink);
    border-color: transparent;
}
body#dash .btn.btn-order-now:hover,
body#outside .btn.btn-order-now:hover {
    background: #ffe24a;
    color: var(--v2-yellow-ink);
    box-shadow: 0 8px 18px -6px var(--v2-yellow-glow);
}

/* Service detail modal */
body .modal-order-content {
    font-size: 13px;
    line-height: 1.7;
    color: var(--v2-ink-dim);
    padding: var(--v2-sp-2) 0;
}
body .modal-order-content br + br { display: none; }

/* Hit badge (added by layout.twig script for services with ✨) */
body#dash .hit::after,
body#outside .hit::after {
    content: "HIT";
    display: inline-block;
    margin-left: 8px;
    padding: 2px var(--v2-sp-2);
    border-radius: var(--v2-r-pill);
    background: var(--v2-danger);
    color: #fff;
    font-family: var(--v2-f-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    vertical-align: middle;
}

/* ============================================================
 *  orders.twig — order history list
 * ============================================================ */

/* Filter pill navigation */
body#dash .pnd-ord-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--v2-sp-1);
    padding: 0;
    margin: 0;
    list-style: none;
}
body#dash .pnd-ord-nav li { list-style: none; }
body#dash .pnd-ord-nav a {
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-1);
    padding: var(--v2-sp-2) var(--v2-sp-3);
    border-radius: var(--v2-r-pill);
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    color: var(--v2-ink-dim);
    font-family: var(--v2-f-dis);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none !important;
    transition: background var(--v2-t-fast), border-color var(--v2-t-fast), color var(--v2-t-fast);
}
body#dash .pnd-ord-nav a:hover {
    background: var(--v2-glass-2);
    border-color: var(--v2-line-strong);
    color: var(--v2-ink);
}
body#dash .pnd-ord-nav a.active {
    background: var(--v2-yellow);
    color: var(--v2-yellow-ink);
    border-color: transparent;
}

/* Order search form */
body#dash .orders-search form { gap: var(--v2-sp-1); }
body#dash .orders-search .textbox {
    flex: 1;
    padding: var(--v2-sp-3) var(--v2-sp-3) var(--v2-sp-3) 42px;
    border-radius: var(--v2-r-pill);
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    color: var(--v2-ink);
    font-family: var(--v2-f-thai);
    font-size: 14px;
    outline: 0;
    transition: border-color var(--v2-t-fast), background var(--v2-t-fast);
}
body#dash .orders-search .textbox:focus {
    border-color: var(--v2-yellow);
    background: var(--v2-glass-2);
    box-shadow: 0 0 0 3px var(--v2-yellow-soft);
}
body#dash .orders-search .btn.search {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    flex-shrink: 0;
}

/* No-orders empty state */
body#dash .noorders { padding: 40px var(--v2-sp-6); }
body#dash .noorders-icon {
    font-size: 56px;
    color: var(--v2-yellow);
    margin-bottom: 14px;
    line-height: 1;
}
body#dash .noorders p {
    color: var(--v2-ink-dim);
    font-size: 14px;
    line-height: var(--v2-lh-body);
    margin: 0 0 8px;
}
body#dash .noorders .primary-color { color: var(--v2-yellow); font-weight: 700; }
body#dash .noorders-cta {
    margin-top: 24px;
    display: flex;
    justify-content: center;
}

/* Order item card */
body#dash .order-item {
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-md);
    padding: var(--v2-sp-4) var(--v2-sp-4);
    margin-bottom: 10px;
    backdrop-filter: var(--v2-blur);
    -webkit-backdrop-filter: var(--v2-blur);
    transition: border-color var(--v2-t-fast), background var(--v2-t-fast);
}
body#dash .order-item:hover {
    border-color: var(--v2-line-strong);
    background: var(--v2-glass-2);
}

body#dash .order-item-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--v2-sp-3);
    padding-bottom: var(--v2-sp-3);
    margin-bottom: 12px;
    border-bottom: 1px dashed var(--v2-line);
}
body#dash .oit-first { display: flex; align-items: center; gap: var(--v2-sp-3); flex: 1; min-width: 0; flex-wrap: wrap; }
body#dash .order-id {
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-1);
    font-family: var(--v2-f-mono);
    font-size: 12px;
    font-weight: 700;
    color: var(--v2-ink);
    background: var(--v2-glass-2);
    padding: var(--v2-sp-1) var(--v2-sp-2);
    border-radius: var(--v2-r-sm);
    border: 1px solid var(--v2-line);
}
body#dash .order-id .primary-color { color: var(--v2-yellow); }
body#dash .order-title {
    color: var(--v2-ink);
    font-family: var(--v2-f-dis);
    font-weight: 600;
    font-size: 13px;
    min-width: 0;
}
body#dash .order-service-chip {
    display: inline-block;
    background: var(--v2-yellow);
    color: var(--v2-yellow-ink);
    padding: 2px var(--v2-sp-2);
    border-radius: var(--v2-r-xs);
    font-family: var(--v2-f-mono);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.04em;
    margin-right: 4px;
    vertical-align: 1px;
}

body#dash .oit-last { flex-shrink: 0; }
/* A48 · ชิปสถานะ — Panel A
   ‼ ห้ามใส่ font-family mono / text-transform uppercase / letter-spacing กลับ
     ป้ายเป็นภาษาไทย ทั้งสามอย่างไม่มีผลหรือทำร้ายการอ่าน
   git log --grep=A48 · .claude/verify/panelA2/A48-verify.json */
body#dash .os-widget {
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-1);
    height: 26px;
    padding: 0 var(--v2-sp-3);
    border-radius: var(--v2-r-pill);
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}
body#dash .os-widget::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}
/* หกสถานะของธีมแม็ปเข้าห้าโทนของดีไซน์ · การแม็ปนี้เป็นการตัดสินใจ ไม่ใช่การวัด
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */
body#dash .os-widget.pending    { background: var(--v2-well);        color: var(--v2-ink-dim); }
body#dash .os-widget.inprogress,
body#dash .os-widget.processing { background: var(--v2-warn-soft);   color: var(--v2-warn-text); }
body#dash .os-widget.partial    { background: var(--v2-info-soft);   color: var(--v2-info-text); }
body#dash .os-widget.completed  { background: var(--v2-ok-soft);     color: var(--v2-ok-text); }
body#dash .os-widget.canceled   { background: var(--v2-danger-soft); color: var(--v2-danger-text); }

body#dash .order-item-bottom {
    display: flex;
    justify-content: space-between;
    gap: var(--v2-sp-4);
    flex-wrap: wrap;
}
body#dash .oib-first {
    display: flex;
    gap: var(--v2-sp-4);
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
    font-family: var(--v2-f-mono);
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--v2-ink-mute);
    align-items: center;
}
body#dash .oib-first .link.order-link-url {
    color: var(--v2-info);
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-1);
    max-width: 420px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    text-decoration: none !important;
}
body#dash .oib-first .link.order-link-url strong {
    color: var(--v2-info-text);
    font-family: var(--v2-f-mono);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
body#dash .oib-first .link.order-link-url:hover strong { text-decoration: underline; }
body#dash .oib-first .item {
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-1);
}
body#dash .oib-first .item .primary-color {
    color: var(--v2-ink-mute);
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-1);
    font-weight: 500;
}
body#dash .oib-first .item .primary-color i { color: var(--v2-ink-soft); }
body#dash .oib-first .item strong {
    color: var(--v2-ink);
    font-family: var(--v2-f-dis);
    font-weight: 700;
    font-size: 12px;
}

body#dash .oib-last { display: flex; gap: var(--v2-sp-1); align-items: center; flex-wrap: wrap; }
body#dash .order-actions { display: flex; gap: var(--v2-sp-1); flex-wrap: wrap; }
body#dash .order-actions .btn {
    padding: var(--v2-sp-2) var(--v2-sp-3);
    border-radius: var(--v2-r-sm);
    font-size: 12px;
    font-family: var(--v2-f-dis);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-1);
    text-decoration: none !important;
    border: 1px solid var(--v2-line);
    background: var(--v2-glass-2);
    color: var(--v2-ink);
    cursor: pointer;
    transition: background var(--v2-t-fast), transform var(--v2-t-fast);
    line-height: 1.3;
}
body#dash .order-actions .btn:hover { background: var(--v2-glass-3); transform: translateY(-1px); }
body#dash .order-actions .btn.btn-success {
    color: var(--v2-ok-text);
    background: var(--v2-ok-soft);
    border-color: rgba(111, 228, 168, 0.25);
}
body#dash .order-actions .btn.btn-success:hover {
    background: rgba(111, 228, 168, 0.22);
    color: var(--v2-ok-text);
}
body#dash .order-actions .btn.btn-success.disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
body#dash .order-actions .btn.btn-danger {
    color: var(--v2-danger);
    background: var(--v2-danger-soft);
    border-color: rgba(255, 122, 106, 0.25);
}
body#dash .order-actions .btn.btn-danger:hover {
    background: rgba(255, 122, 106, 0.22);
    color: var(--v2-danger);
}

body#dash .btn-report.c-pointer .btn.btn-report-support {
    width: 40px;
    height: 40px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--v2-glass-2);
    border: 1px solid var(--v2-line-strong);
    color: var(--v2-ink);
    transition: background var(--v2-t-fast), color var(--v2-t-fast);
    font-size: 14px;
}
body#dash .btn-report.c-pointer .btn.btn-report-support:hover {
    background: var(--v2-yellow-soft);
    border-color: rgba(255, 214, 10, 0.35);
    color: var(--v2-yellow);
}

/* Pagination */
body#dash .pagination {
    display: inline-flex;
    gap: var(--v2-sp-1);
    padding: var(--v2-sp-1);
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-pill);
    list-style: none;
    margin: 0;
}
body#dash .pagination .page-item { list-style: none; }
body#dash .pagination .page-link {
    min-width: 34px;
    height: 34px;
    padding: 0 var(--v2-sp-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--v2-r-pill);
    background: transparent;
    border: 0;
    color: var(--v2-ink-dim);
    font-family: var(--v2-f-dis);
    font-weight: 600;
    font-size: 13px;
    text-decoration: none !important;
    cursor: pointer;
    transition: background var(--v2-t-fast), color var(--v2-t-fast);
}
body#dash .pagination .page-link:hover { background: var(--v2-glass-2); color: var(--v2-ink); }
/* A55 · หน้าที่กำลังอยู่ = "อยู่ตรงไหน" ไม่ใช่ "กดอะไร" → หมึก ไม่ใช่เหลือง
   กติกาเดียวกับแท็บ · โควตาเหลืองอยู่ใน RESUME */
body#dash .pagination .page-item.active .page-link {
    background: var(--v2-ink);
    color: var(--v2-bg);
    font-weight: 700;
}
/* A55 · ธีมเดิมวางแถบ 14x3px สี #253cff ไว้ใต้เลขหน้าที่กำลังอยู่ (:before ที่ L3209)
   น้ำเงินตัวนั้นไม่มีอยู่ในจานสีของธีมนี้เลย และตอนนี้มันไปนั่งทับแคปซูลหมึก
   ‼ ซ่อนเฉพาะฝั่ง authed — guest ยังใช้ของเดิม ห้ามลบกฎต้นทาง */
body#dash .pagination .page-item.active .page-link::before { content: none; }

/* Order ticket modal textarea */
body#dash .reportOrder textarea.form-control { min-height: 125px; }
body#dash .reportOrder .form-select { width: 100%; }

/* ============================================================
 *  addfunds.twig — top-up flow
 * ============================================================ */

/* Payment method grid (dynamically built via setPayment()) */
body#dash .payment-list#method-drop {
    margin-bottom: 22px;
}
body#dash .payment-top {
    aspect-ratio: 1.4 / 1;
    width: 100%;
    border-radius: var(--v2-r-sm);
    overflow: hidden;
    background: var(--v2-glass-2);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
body#dash .payment-top.active,
body#dash .payment-box.active .payment-top {
    outline: 2px solid var(--v2-yellow);
    outline-offset: -2px;
    box-shadow: 0 8px 20px -6px var(--v2-yellow-glow);
}
body#dash .payment-icon { width: 100%; height: 100%; display: flex; }
body#dash .payment-icon img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: var(--v2-r-sm); }
body#dash .payment-bottom {
    text-align: center;
    font-family: var(--v2-f-dis);
    font-size: 13px;
    font-weight: 600;
    color: var(--v2-ink);
}

/* Quick amount chips */

/* Addfunds amount input (number) */
/* .addfunds-amount is the field — it carries the ฿ prefix, so the input inside
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */
body#dash #amount.form-control {
    font-family: var(--v2-f-mono);
    font-weight: 700;
    background: none !important;
    border: 0 !important;
    border-radius: 0!important;
    padding: 0 !important;
    box-shadow: none !important;
    height: auto;
}
body#dash .addfunds-amount { align-items: center; }

/* Deposit history items */
body#dash .payment-history { display: flex; flex-direction: column; gap: var(--v2-sp-2); }
body#dash .history-item {
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-md);
    padding: var(--v2-sp-3) var(--v2-sp-4);
    transition: border-color var(--v2-t-fast);
}
body#dash .history-item:hover { border-color: var(--v2-line-strong); }
body#dash .history-item-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--v2-sp-3);
    padding-bottom: var(--v2-sp-2);
    margin-bottom: 10px;
    border-bottom: 1px dashed var(--v2-line);
    flex-wrap: wrap;
}
body#dash .hit-first {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-3);
    flex: 1;
    min-width: 0;
    flex-wrap: wrap;
}
body#dash .history-id {
    font-family: var(--v2-f-mono);
    font-size: 12px;
    font-weight: 700;
    color: var(--v2-ink);
    background: var(--v2-glass-2);
    padding: var(--v2-sp-1) var(--v2-sp-2);
    border-radius: var(--v2-r-sm);
    border: 1px solid var(--v2-line);
}
body#dash .history-title {
    color: var(--v2-ink);
    font-family: var(--v2-f-dis);
    font-weight: 600;
    font-size: 13px;
}
body#dash .hit-last { flex-shrink: 0; }
body#dash .history-item-bottom {
    display: flex;
    justify-content: space-between;
    gap: var(--v2-sp-3);
    flex-wrap: wrap;
    font-family: var(--v2-f-mono);
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--v2-ink-mute);
}
body#dash .hib-first { display: flex; gap: var(--v2-sp-3); flex-wrap: wrap; }
body#dash .hib-first .date { display: inline-flex; align-items: center; gap: var(--v2-sp-1); }
body#dash .hib-first .date i { color: var(--v2-ink-soft); }
body#dash .hib-first .date strong {
    color: var(--v2-ink);
    font-family: var(--v2-f-dis);
    font-weight: 700;
}

/* Payment page bottom wrapper (form container) */
body#dash .payment-page-bottom { padding-top: var(--v2-sp-1); }

/* ============================================================
 *  addfunds.twig v2 restructure — 2-col with summary sidebar
 * ============================================================ */
body#dash .addfunds-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: var(--v2-sp-4);
    align-items: flex-start;
}
@media (max-width: 1100px) {
    body#dash .addfunds-wrap { grid-template-columns: 1fr; }
}
body#dash .addfunds-main { min-width: 0; }

body#dash .addfunds-summary {
    position: sticky;
    top: 100px;
    display: flex;
    flex-direction: column;
    gap: var(--v2-sp-3);
}
@media (max-width: 1100px) { body#dash .addfunds-summary { position: static; } }

/* Wallet chip in page header */
body#dash .page-header-v2 .v2-wallet-chip {
    display: flex;
    flex-direction: column;
    gap: var(--v2-sp-1);
    padding: var(--v2-sp-3) var(--v2-sp-5);
    background: var(--v2-yellow-soft);
    border: 1px solid rgba(255, 214, 10, 0.25);
    border-radius: var(--v2-r-md);
    min-width: 180px;
    align-items: flex-end;
}
body#dash .v2-wallet-chip .l {
    font-family: var(--v2-f-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    color: var(--v2-ink-mute);
    text-transform: uppercase;
}
body#dash .v2-wallet-chip b {
    font-family: var(--v2-f-dis);
    font-size: 20px;
    font-weight: 800;
    color: var(--v2-yellow-text);
}

/* Amount mega input */
body#dash .addfunds-amount {
    display: flex;
    align-items: baseline;
    gap: var(--v2-sp-3);
    padding: var(--v2-sp-5) var(--v2-sp-5);
    border-radius: var(--v2-r-md);
    background: var(--v2-glass-2);
    border: 1px solid var(--v2-line);
    margin-bottom: 14px;
}
/* Yellow on the white field measured 1.55:1 — the ฿ was barely there. Section 31
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */
body#dash .addfunds-amount .cur {
    font-family: var(--v2-f-mono);
    font-size: 26px;
    color: var(--adv-mute);
    font-weight: 700;
}
/* background, border, padding and box-shadow used to live here and never took —
   #amount.form-control outranks this selector. They are now declared there, with
   !important, so they are removed rather than left looking effective. */
body#dash .addfunds-amount input.form-control {
    flex: 1;
    font-family: var(--v2-f-mono);
    font-size: 44px;
    font-weight: 700;
    color: var(--v2-ink);
    outline: 0;
    line-height: var(--v2-lh-tight);
}
body#dash .addfunds-amount input.form-control:focus {
    background: transparent;
    box-shadow: none;
}
body#dash .addfunds-amount input.form-control::placeholder { color: var(--v2-ink-soft); }

/* Amount quick chips — tightened */
body#dash .addBalance {
    display: flex;
    flex-wrap: wrap;
    gap: var(--v2-sp-2);
    margin: 0 !important;
}
body#dash .addBalance .addBalanceBtn {
    padding: var(--v2-sp-2) var(--v2-sp-4);
    border-radius: var(--v2-r-pill);
    border: 1px solid var(--v2-line);
    background: var(--v2-glass);
    color: var(--v2-ink-dim);
    font-family: var(--v2-f-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background var(--v2-t-fast), border-color var(--v2-t-fast), color var(--v2-t-fast);
    line-height: 1;
}
body#dash .addBalance .addBalanceBtn:hover {
    background: var(--v2-yellow-soft);
    border-color: rgba(255, 214, 10, 0.35);
    color: var(--v2-yellow);
}

/* Payment method grid — smaller compact cards with icons */
/* Two columns, not four. The panel currently serves two methods, so four
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */
body#dash .payment-list#method-drop {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--v2-sp-2);
    margin: 0;
}
/* A64 · กล่องช่องทางชำระเงิน — ที่นี่เคยเป็น "การ์ดแนวตั้ง" (รูปด้านบน ข้อความด้านล่าง
   จัดกึ่งกลาง) ทั้งชุดตายมานานแล้ว บล็อกที่ 21.x วาดใหม่เป็น "แถวแนวนอน" ไอคอน 42px
   ข้อความชิดซ้าย ซึ่งตรงกับที่ดีไซน์ Panel F (F3) ขอพอดี
   ‼ เหลือแต่ cursor กับ overflow ที่ยังมีผลจริง — ห้ามเติม display / flex-direction /
     background / border กลับมาที่นี่ มันจะตายทันทีเหมือนเดิม
     เช็คก่อนแก้: who-wins.py payment-box --scope 'body#dash' */
body#dash .payment-box {
    cursor: pointer;
    overflow: hidden;
}
body#dash .payment-box:hover {
    border-color: var(--v2-line-strong);
    background: var(--v2-glass-2);
    transform: translateY(-2px);
}
/* A64 · สถานะ "เลือกอยู่" วาดที่บล็อก 5 ด้วย !important ทั้งพื้น ขอบ และเงา
   สามบรรทัดที่เคยอยู่ตรงนี้จึงตายมาตลอด */
/* A64 · กรอบรูปด้านบนของการ์ดแนวตั้ง — ไม่มีการ์ดแนวตั้งแล้ว
   เหลือแต่ที่ยังมีผล: จัดกึ่งกลางไอคอน และล้าง outline/เงาที่ธีมเดิมใส่มา */
body#dash .payment-box .payment-top {
    display: flex;
    align-items: center;
    justify-content: center;
    outline: 0 !important;
    box-shadow: none !important;
}
body#dash .payment-box.active .payment-top {
    background: linear-gradient(135deg, var(--v2-yellow-soft), rgba(255, 214, 10, 0.05));
}
/* A64 · ขนาดและ display ของไอคอนถูกตั้งใหม่ที่ 20.x (42px, grid) — เหลือแต่การจัดกลาง */
body#dash .payment-box .payment-icon {
    align-items: center;
    justify-content: center;
}
body#dash .payment-box .payment-icon img {
    display: none !important;
}
body#dash .payment-box .payment-icon i {
    font-size: 34px;
    color: var(--v2-ink-mute);
    transition: color var(--v2-t-base);
}
body#dash .payment-box.active .payment-icon i {
    color: var(--v2-yellow);
}
/* A64 · ข้อความใต้ไอคอน — ตัวอักษร ระยะ และการจัดวางถูกวาดใหม่ที่ 21.x/31.x ทั้งหมด
   เหลือแต่เส้นคั่นบนกับความสูงขั้นต่ำ ซึ่งยังไม่มีใครเขียนทับ */
body#dash .payment-box .payment-bottom {
    border-top: 1px solid var(--v2-line);
    min-height: 44px;
    display: flex;
    align-items: center;
}
body#dash .payment-box.active .payment-bottom {
    color: var(--v2-yellow);
    border-top-color: rgba(255, 214, 10, 0.2);
}
/* Payment method variant icon colors */
body#dash .payment-box.pm-qr .payment-icon i { color: #4da9ff; }
body#dash .payment-box.pm-true .payment-icon i { color: #ff7a6a; }
body#dash .payment-box.pm-crypto .payment-icon i { color: #f7931a; }
body#dash .payment-box.pm-bank .payment-icon i { color: #6fe4a8; }
body#dash .payment-box.active.pm-qr .payment-icon i,
body#dash .payment-box.active.pm-true .payment-icon i,
body#dash .payment-box.active.pm-crypto .payment-icon i,
body#dash .payment-box.active.pm-bank .payment-icon i {
    color: var(--v2-yellow);
}

/* Submit button full-width */
body#dash .addfunds-submit {
    width: 100%;
    justify-content: center;
    height: 54px;
    font-size: 14px;
    border-radius: var(--v2-r-md);
}

/* Summary card */
body#dash .af-sum-card {
    padding: var(--v2-sp-5);
    background: var(--v2-glass-2);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-lg);
    backdrop-filter: var(--v2-blur);
    -webkit-backdrop-filter: var(--v2-blur);
}
body#dash .af-sum-head {
    font-family: var(--v2-f-dis);
    font-weight: 700;
    font-size: 16px;
    color: var(--v2-ink);
    margin-bottom: 16px;
    padding-bottom: var(--v2-sp-3);
    border-bottom: 1px solid var(--v2-line);
}
body#dash .af-sum-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: var(--v2-sp-2) 0;
    font-size: 13px;
}
body#dash .af-sum-row .k {
    color: var(--v2-ink-mute);
    font-family: var(--v2-f-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
body#dash .af-sum-row .v {
    font-family: var(--v2-f-dis);
    font-weight: 600;
    color: var(--v2-ink);
    font-size: 14px;
}
body#dash .af-sum-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 10px;
    padding: var(--v2-sp-4);
    border-radius: var(--v2-r-md);
    background: var(--v2-yellow-soft);
    border: 1px solid rgba(255, 214, 10, 0.25);
}
body#dash .af-sum-total .k {
    color: var(--v2-yellow);
    font-family: var(--v2-f-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
}
body#dash .af-sum-total .v {
    font-family: var(--v2-f-dis);
    font-size: 26px;
    font-weight: 800;
    color: var(--v2-yellow);
    line-height: 1;
}

/* Info cards in summary sidebar */
body#dash .af-info-card {
    padding: var(--v2-sp-4) var(--v2-sp-5);
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-md);
    font-size: 12px;
    color: var(--v2-ink-dim);
    line-height: var(--v2-lh-body);
}
body#dash .af-info-head {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-2);
    font-family: var(--v2-f-dis);
    font-weight: 700;
    font-size: 14px;
    color: var(--v2-ink);
    margin-bottom: 10px;
}
body#dash .af-info-head i {
    color: var(--v2-yellow);
    font-size: 16px;
}
body#dash .af-info-card ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
body#dash .af-info-card ul li {
    padding: var(--v2-sp-1) 0 var(--v2-sp-1) var(--v2-sp-4);
    position: relative;
}
body#dash .af-info-card ul li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--v2-ok);
    font-weight: 700;
}
body#dash .af-info-card p { margin: 0 0 10px; }
body#dash .af-info-card-yellow {
    background: var(--v2-yellow-soft);
    border-color: rgba(255, 214, 10, 0.22);
    color: var(--v2-ink);
}
body#dash .af-info-card-yellow .af-info-head { color: var(--v2-yellow); }

/* ============================================================
 *  affliliates.twig — affiliate dashboard
 * ============================================================ */

/* Dashboard stat card icon (dh-icon used in affiliates cards) */
body#dash .dh-icon,
body#outside .dh-icon {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--v2-r-sm);
    background: var(--v2-yellow-soft);
    color: var(--v2-yellow);
    font-size: 16px;
    flex-shrink: 0;
}

/* Info card body (aff dashboard) */
body#dash .card-body > .d-flex:first-child {
    color: var(--v2-ink-mute);
    font-family: var(--v2-f-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
/* .aff-bold is excluded because this rule outranks it — six compound selectors
   against two — and was painting the affiliate figures the same muted grey as
   their own labels, so a row read as disabled rather than as a value. */
body#dash .card-body > .d-flex > span:not(.far):not(.fal):not(.fas):not(.fab):not(.aff-bold) {
    color: var(--v2-ink-mute);
}
body#dash .card-body h5 {
    font-family: var(--v2-f-dis);
    font-size: 20px;
    font-weight: 700;
    color: var(--v2-ink);
    margin: 0;
    word-break: break-all;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
body#dash .btn-copy-inline {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--v2-r-sm);
    background: var(--v2-glass-2);
    border: 1px solid var(--v2-line);
    color: var(--v2-yellow);
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: background var(--v2-t-fast), color var(--v2-t-fast);
}
body#dash .btn-copy-inline:hover {
    background: var(--v2-yellow-soft);
    color: var(--v2-yellow);
}

/* Affiliate stat rows */
body#dash .aff-item {
    padding: var(--v2-sp-3) var(--v2-sp-1);
    border-bottom: 1px dashed var(--v2-line);
    font-size: 13px;
    color: var(--v2-ink-dim);
}
body#dash .aff-item:last-of-type { border-bottom: 0; }
body#dash .aff-item > span:first-child {
    font-family: var(--v2-f-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--v2-ink-mute);
    text-transform: uppercase;
}
body#dash .aff-item .aff-bold {
    font-family: var(--v2-f-dis);
    font-weight: 700;
    font-size: 16px;
    /* not --v2-yellow: on the white panel that measures 1.55:1, the same trap the
       ฿ prefix fell into. Ink follows the surface — the figure is distinguished
       from its label by weight and size, not by colour. */
    color: var(--v2-ink);
}

/* Dashboard section header */
body#dash .dash-header,
body#outside .dash-header {
    font-family: var(--v2-f-dis);
    font-size: 16px;
    font-weight: 700;
    color: var(--v2-ink);
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: var(--v2-sp-2);
}

/* Data card (d-card — used in affiliates, refunds, updates, etc.) */
body#dash .d-card {
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-lg);
    overflow: hidden;
    backdrop-filter: var(--v2-blur);
    -webkit-backdrop-filter: var(--v2-blur);
}
body#dash .d-card-body { padding: var(--v2-sp-1) var(--v2-sp-1); }

/* Table (Bootstrap .table) */
body#dash .table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
    color: var(--v2-ink-dim);
    margin: 0;
}
/* A51 · ตาราง — Panel A
   ‼ ห้ามใส่ font-family mono / text-transform uppercase / letter-spacing กลับให้ thead th
     หัวตารางมาจาก lang() ซึ่งเป็นภาษาไทย · วัดแล้วเดิมโดน letter-spacing 1.54px จริง
     ซึ่งเป็นสิ่งที่ A19 ห้ามไว้เอง แต่ตกสำรวจ
   git log --grep=A51 · .claude/verify/panelA2/A51-verify.json */
body#dash .table thead th {
    background: var(--v2-well);
    padding: var(--v2-sp-2) var(--v2-sp-5);
    border: 0;
    font-size: 11px;
    font-weight: 500;
    color: var(--v2-ink-mute);
    text-align: left;
    white-space: nowrap;
}
body#dash .table tbody td {
    padding: var(--v2-sp-3) var(--v2-sp-5);
    border: 0;
    border-top: 1px solid var(--v2-line);
    font-size: 12.5px;
    color: var(--v2-ink-dim);
    vertical-align: middle;
}
body#dash .table tbody tr:hover td {
    background: var(--v2-surface-2);
    color: var(--v2-ink);
}
body#dash .table tbody td b,
body#dash .table tbody td strong { color: var(--v2-ink); font-weight: 600; }

/* A53 · checkbox ในตารางต้องมองเห็นได้ — บั๊กใช้งาน ไม่ใช่เรื่องสไตล์
   style.css:889 ซ่อน input[type=checkbox] ทุกตัวทั้งไฟล์ แล้วให้ `+ label` วาดตัวควบคุมแทน
   /neworder ทำถูก (มี <span class="checkmark"> ใน label เดียวกัน) แต่ /notifications
   วาง input เปล่าไว้ใน <span> ไม่มีอะไรตามหลัง ช่องอีเมล/Telegram จึงว่างเปล่าทั้งคอลัมน์
   และผู้ใช้ตั้งค่าการแจ้งเตือนไม่ได้เลย — วัดแล้ว 4 ตัว display:none ไม่มี label
   ‼ ห้ามลบกฎที่ L889 เพื่อแก้ — จะไปเปิด checkbox ที่ตั้งใจซ่อนบน /neworder และหน้า guest
   ใช้ accent-color แทนการ appearance:none ทั้งชุด เพราะมีแค่ 4 ตัวและ native ทำงานถูกอยู่แล้ว
   git log --grep=A53 */
body#dash .table input[type="checkbox"] {
    display: inline-block;
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--v2-yellow);
    cursor: pointer;
    vertical-align: middle;
}

/* ============================================================
 *  tickets.twig + viewticket.twig
 * ============================================================ */

/* Support info banner (top of tickets page) */
body#dash .card-support { background: var(--v2-yellow-soft); border-color: rgba(255, 214, 10, 0.25); }
body#dash .card-support .card-body {
    color: var(--v2-ink);
    line-height: 1.9;
    font-size: 13px;
}

/* Unread tickets notice card */
body#dash .card-tickets {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-3);
    padding: var(--v2-sp-4) var(--v2-sp-4);
    background: var(--v2-yellow-soft);
    border-color: rgba(255, 214, 10, 0.25);
    margin-bottom: 12px;
}
body#dash .card-tickets > i {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--v2-r-sm);
    background: var(--v2-yellow);
    color: var(--v2-yellow-ink);
    font-size: 20px;
    flex-shrink: 0;
}
body#dash .card-tickets .card-text {
    font-size: 13px;
    color: var(--v2-ink);
    line-height: 1.5;
    font-family: var(--v2-f-dis);
}
body#dash .card-tickets .card-text .primary-color {
    color: var(--v2-yellow);
    font-weight: 700;
    font-family: var(--v2-f-mono);
}

/* Ticket item list */
body#dash .ticket-list {
    display: flex;
    flex-direction: column;
    gap: var(--v2-sp-2);
    margin-top: 14px;
}
body#dash .ticket-item {
    display: block;
    padding: var(--v2-sp-3) var(--v2-sp-4);
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-md);
    text-decoration: none !important;
    color: var(--v2-ink);
    transition: background var(--v2-t-fast), border-color var(--v2-t-fast), transform var(--v2-t-fast);
}
body#dash .ticket-item:hover {
    background: var(--v2-glass-2);
    border-color: var(--v2-line-strong);
    transform: translateY(-1px);
}
body#dash .ticket-item.ticket-item-new {
    border-color: rgba(255, 214, 10, 0.30);
    background: var(--v2-yellow-soft);
}
body#dash .ticket-item-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--v2-sp-3);
    margin-bottom: 10px;
    padding-bottom: var(--v2-sp-2);
    border-bottom: 1px dashed var(--v2-line);
}
body#dash .tit-first {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-3);
    flex: 1;
    min-width: 0;
}
body#dash .ticket-id {
    font-family: var(--v2-f-mono);
    font-size: 11px;
    font-weight: 700;
    color: var(--v2-ink);
    background: var(--v2-glass-2);
    padding: var(--v2-sp-1) var(--v2-sp-2);
    border-radius: var(--v2-r-xs);
    flex-shrink: 0;
}
body#dash .ticket-title {
    color: var(--v2-ink);
    font-family: var(--v2-f-dis);
    font-weight: 600;
    font-size: 13px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body#dash .ticket-item-bottom {
    display: flex;
    justify-content: space-between;
    gap: var(--v2-sp-3);
    font-family: var(--v2-f-mono);
    font-size: 11px;
    color: var(--v2-ink-mute);
    align-items: center;
}
body#dash .tib-first .date {
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-1);
}
body#dash .tib-first .date i { color: var(--v2-ink-soft); }
body#dash .tib-first .date strong {
    color: var(--v2-ink);
    font-family: var(--v2-f-dis);
    font-weight: 600;
}
body#dash .ticket-new-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-1);
    padding: var(--v2-sp-1) var(--v2-sp-2);
    border-radius: var(--v2-r-pill);
    background: var(--v2-yellow);
    color: var(--v2-yellow-ink);
    font-family: var(--v2-f-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
}

/* Tickets file uploader placeholder */
body#dash .tickets-uploader {
    min-height: 42px;
    border-radius: var(--v2-r-sm);
    border: 1px dashed var(--v2-line-strong);
    padding: var(--v2-sp-2) var(--v2-sp-3);
    background: var(--v2-glass);
    color: var(--v2-ink-mute);
    font-size: 12px;
}

/* "Hidden until JS" alert areas — preserve initial inline display:none */
body#dash #alertArea.is-hidden,
body#dash #successArea.is-hidden { display: none; }

/* text-danger utility */
body#dash .text-danger { color: var(--v2-danger) !important; }
body#dash .text-success { color: var(--v2-ok) !important; }

/* ---------- viewticket.twig ---------- */
body#dash .card-viewticket .card-body { padding: var(--v2-sp-5) var(--v2-sp-6) var(--v2-sp-4); }
body#dash .ticket-header {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-4);
    padding-bottom: var(--v2-sp-4);
    margin-bottom: 18px;
    border-bottom: 1px solid var(--v2-line);
    flex-wrap: wrap;
}
body#dash .ticket-header .item.item-title {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
body#dash .ticket-header .title {
    font-family: var(--v2-f-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    color: var(--v2-ink-mute);
    text-transform: uppercase;
}
body#dash .ticket-header .value {
    font-family: var(--v2-f-dis);
    font-size: 16px;
    font-weight: 700;
    color: var(--v2-ink);
}
body#dash .ticket-header .ticket-id-title {
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-2);
    font-family: var(--v2-f-mono);
    font-size: 12px;
    color: var(--v2-ink-mute);
}
body#dash .ticket-header .ticket-id-title .ticket-id {
    display: inline-block;
    padding: var(--v2-sp-1) var(--v2-sp-2);
    background: var(--v2-yellow-soft);
    border-radius: var(--v2-r-xs);
    color: var(--v2-yellow);
    font-weight: 700;
}

body#dash .btn.btn-rounded { border-radius: var(--v2-r-pill); padding: var(--v2-sp-2) var(--v2-sp-4); }
body#dash .btn.btn-sm { padding: var(--v2-sp-1) var(--v2-sp-3); font-size: 12px; }

/* Ticket message thread */
body#dash .ticket-body {
    display: flex;
    flex-direction: column;
    gap: var(--v2-sp-4);
    padding: var(--v2-sp-1) 0;
}
body#dash .ticket-message {
    display: flex;
    flex-direction: column;
    max-width: 80%;
    gap: var(--v2-sp-1);
}
body#dash .ticket-message-support {
    align-self: flex-end;
    align-items: flex-end;
}
body#dash .ticket-message-box {
    padding: var(--v2-sp-3) var(--v2-sp-4);
    border-radius: var(--v2-r-md);
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    color: var(--v2-ink);
    font-size: 14px;
    line-height: var(--v2-lh-body);
    word-break: break-word;
}
body#dash .ticket-message-support .ticket-message-box {
    background: var(--v2-yellow-soft);
    border-color: rgba(255, 214, 10, 0.25);
    color: var(--v2-ink);
}
body#dash .ticket-message-info {
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-2);
    font-family: var(--v2-f-mono);
    font-size: 11px;
    color: var(--v2-ink-mute);
}
body#dash .ticket-owner {
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-1);
    font-family: var(--v2-f-dis);
    color: var(--v2-ink);
    font-weight: 600;
}
body#dash .ticket-owner.support { color: var(--v2-yellow); }
body#dash .ticket-owner .verified {
    color: var(--v2-yellow);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    margin-left: 2px;
}
body#dash .ticket-owner .verified svg { width: 14px; height: 14px; }

/* viewticket page header — compact layout with ID chip on right */
body#dash .viewticket-header {
    align-items: center;
    gap: var(--v2-sp-4);
    padding: var(--v2-sp-2) 0 var(--v2-sp-5);
    flex-wrap: wrap;
}
body#dash .viewticket-header .page-h1-v2 {
    /* font-size ตาย เหมือน .neworder-h1 — บล็อก 21.2 คุมด้วย !important */
    margin: 6px 0 6px;
    line-height: var(--v2-lh-tight);
}
body#dash .viewticket-back {
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-1);
    color: var(--v2-ink-mute);
    text-decoration: none !important;
    font-family: var(--v2-f-dis);
    font-weight: 500;
    font-size: 13px;
    transition: color var(--v2-t-fast);
}
body#dash .viewticket-back:hover { color: var(--v2-yellow); }
body#dash .viewticket-meta {
    display: flex;
    gap: var(--v2-sp-3);
    align-items: center;
}
body#dash .vt-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--v2-sp-3) var(--v2-sp-4);
    background: var(--v2-yellow-soft);
    border: 1px solid rgba(255, 214, 10, 0.25);
    border-radius: var(--v2-r-md);
    min-width: 140px;
}
body#dash .vt-stat .l {
    font-family: var(--v2-f-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    color: var(--v2-ink-mute);
    text-transform: uppercase;
}
body#dash .vt-stat b {
    font-family: var(--v2-f-mono);
    font-size: 16px;
    font-weight: 700;
    color: var(--v2-yellow);
}

/* Verified badge (support agent) — yellow pill with check */
body#dash .ticket-owner.support .verified {
    width: 18px;
    height: 18px;
    background: var(--v2-yellow);
    border-radius: 4px;
    padding: 2px;
}

/* Ticket message meta row */
body#dash .ticket-meta-sep {
    color: var(--v2-ink-soft);
    margin: 0 2px;
}
body#dash .ticket-owner-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--v2-sp-2);
    margin-left: 4px;
    border-radius: var(--v2-r-pill);
    background: var(--v2-yellow);
    color: var(--v2-yellow-ink);
    font-family: var(--v2-f-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* Ticket file attachments row (inside message box) */
body#dash .ticket-files {
    margin-top: 12px;
    padding-top: var(--v2-sp-2);
    border-top: 1px dashed var(--v2-line);
    display: flex;
    flex-wrap: wrap;
    gap: var(--v2-sp-1);
    align-items: center;
}
body#dash .ticket-files small {
    font-family: var(--v2-f-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    color: var(--v2-ink-mute);
    text-transform: uppercase;
    margin-right: 4px;
}

body#dash .ticket-file {
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-1);
    padding: var(--v2-sp-1) var(--v2-sp-2);
    border-radius: var(--v2-r-sm);
    background: var(--v2-glass-2);
    border: 1px solid var(--v2-line);
    color: var(--v2-yellow);
    font-family: var(--v2-f-mono);
    font-size: 11px;
    text-decoration: none !important;
    margin-right: 4px;
}
body#dash .ticket-file:hover { background: var(--v2-yellow-soft); }

/* Reply form */
body#dash .ticket-footer {
    padding-top: var(--v2-sp-4);
    margin-top: 18px;
    border-top: 1px solid var(--v2-line);
}
body#dash .message-send {
    display: flex;
    flex-direction: column;
    gap: var(--v2-sp-2);
}
body#dash .message-send textarea.form-control { min-height: 90px; }

body#dash .btn .btn-icon { display: inline-flex; margin-left: 4px; }

/* Right-side info boxes (response time, service hours) */
body#dash .ticket-detail-box {
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-md);
    padding: var(--v2-sp-3) var(--v2-sp-4);
    margin-bottom: 10px;
}
body#dash .ticket-detail-box .sup-item {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-3);
}
body#dash .ticket-detail-box .sup-item .icon {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--v2-r-sm);
    background: var(--v2-yellow-soft);
    color: var(--v2-yellow);
    font-size: 16px;
    flex-shrink: 0;
}
body#dash .ticket-detail-box .sup-item-title {
    font-family: var(--v2-f-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--v2-ink-mute);
    text-transform: uppercase;
}
body#dash .ticket-detail-box .sup-item-value {
    font-family: var(--v2-f-dis);
    font-size: 14px;
    font-weight: 700;
    color: var(--v2-ink);
    margin-top: 2px;
}

/* ============================================================
 *  Remaining money/support pages — shared overrides
 * ============================================================ */

/* Bootstrap .well (used by notifications) */
body#dash .well {
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-md);
    padding: var(--v2-sp-4);
    margin-bottom: 14px;
    color: var(--v2-ink);
    box-shadow: none;
}

/* nav-pills (notifications tab bar) */
/* the 16px bottom margin loses to `.pnd-ord-nav { margin: 0 !important }`. On
   /orders, /refill and /drip-feed the pills are the last child of their
   container, so nothing sits under them to be crowded — the spacing comes from
   the container. Kept for the pages that use .nav-pills without .pnd-ord-nav. */
body#dash ul.nav.nav-pills {
    list-style: none;
    padding: var(--v2-sp-1);
    margin: 0 0 16px;
    display: inline-flex;
    gap: var(--v2-sp-1);
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-pill);
    flex-wrap: wrap;
}
body#dash .nav-pills li { list-style: none; }
/* color loses to the stock `.nav-link { color: var(--text-color) !important }`.
   Left alone deliberately: .nav-link is every Bootstrap tab on the site, so
   dropping that !important reaches far more than these pills, and --text-color
   reads correctly on the pill background anyway. The design wanted inactive
   pills one step softer; the active pill still separates on its yellow fill. */
body#dash .nav-pills li a {
    padding: var(--v2-sp-2) var(--v2-sp-4);
    border-radius: var(--v2-r-pill);
    font-family: var(--v2-f-dis);
    font-size: 13px;
    font-weight: 600;
    color: var(--v2-ink-dim);
    text-decoration: none !important;
    transition: background var(--v2-t-fast), color var(--v2-t-fast);
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-1);
}
body#dash .nav-pills li a:hover {
    background: var(--v2-glass-2);
    color: var(--v2-ink);
}
body#dash .nav-pills li.active a,
body#dash .nav-pills li a.active {
    background: var(--v2-yellow);
    color: var(--v2-yellow-ink);
}

/* .btn-danger (2FA disable, order cancel) */
body#dash .btn.btn-danger {
    background: var(--v2-danger-soft);
    color: var(--v2-danger-text);
    border: 1px solid rgba(255, 122, 106, 0.30);
    padding: var(--v2-sp-2) var(--v2-sp-4);
    border-radius: var(--v2-r-sm);
    font-family: var(--v2-f-dis);
    font-weight: 600;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--v2-sp-1);
    text-decoration: none !important;
    transition: background var(--v2-t-fast), color var(--v2-t-fast);
    cursor: pointer;
}
body#dash .btn.btn-danger:hover {
    background: rgba(255, 122, 106, 0.22);
    color: var(--v2-danger-text);
    border-color: rgba(255, 122, 106, 0.45);
}

/* input-group (input + button) */
body#dash .input-group {
    display: flex;
    width: 100%;
    position: relative;
}
body#dash .input-group .form-control { flex: 1; min-width: 0; }
body#dash .input-group > :not(:first-child) { margin-left: -1px; }
body#dash .input-group > :not(:first-child) .form-control,
body#dash .input-group > :not(:first-child) .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
body#dash .input-group > :not(:last-child) .form-control,
body#dash .input-group > :not(:last-child) .btn {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* ============================================================
 *  api.twig — REST API docs
 * ============================================================ */

body#dash .api-box,
body#outside .api-box {
    display: flex;
    flex-direction: column;
    gap: var(--v2-sp-4);
}
body#dash .api-top,
body#outside .api-top {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--v2-sp-2);
}
@media (max-width: 900px) {
    body#dash .api-top,
    body#outside .api-top { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
    body#dash .api-top,
    body#outside .api-top { grid-template-columns: 1fr; }
}
body#dash .api-top-item,
body#outside .api-top-item {
    display: flex;
    flex-direction: column;
    gap: var(--v2-sp-1);
    padding: var(--v2-sp-3) var(--v2-sp-3);
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-sm);
    font-family: var(--v2-f-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--v2-ink-mute);
    text-transform: uppercase;
}
body#dash .api-top-item b,
body#outside .api-top-item b {
    font-family: var(--v2-f-mono);
    font-size: 13px;
    color: var(--v2-yellow-text);
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: none;
    word-break: break-all;
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-1);
}
body#dash .api-top-item b a,
body#outside .api-top-item b a { color: var(--v2-yellow-text); text-decoration: underline; }

body#dash .api-code,
body#outside .api-code {
    display: flex;
    flex-direction: column;
    gap: var(--v2-sp-4);
}
body#dash .api-title,
body#outside .api-title {
    display: block;
    font-family: var(--v2-f-dis);
    font-size: 14px;
    font-weight: 700;
    color: var(--v2-ink);
    margin-top: 14px;
    padding-bottom: var(--v2-sp-1);
    border-bottom: 1px solid var(--v2-line);
}
body#dash .api-list,
body#outside .api-list {
    display: flex;
    flex-direction: column;
    gap: var(--v2-sp-1);
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-sm);
    padding: var(--v2-sp-2);
    margin-bottom: 8px;
}
body#dash .api-item,
body#outside .api-item {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: var(--v2-sp-3);
    padding: var(--v2-sp-2) var(--v2-sp-3);
    border-radius: var(--v2-r-xs);
    font-family: var(--v2-f-mono);
    font-size: 12px;
    color: var(--v2-yellow-text);
    font-weight: 600;
    transition: background var(--v2-t-fast);
}
body#dash .api-item:hover,
body#outside .api-item:hover { background: var(--v2-glass-2); }
body#dash .api-item b,
body#outside .api-item b {
    color: var(--v2-ink-dim);
    font-weight: 400;
    font-family: var(--v2-f-thai);
    font-size: 13px;
}
@media (max-width: 540px) {
    body#dash .api-item,
    body#outside .api-item { grid-template-columns: 1fr; gap: var(--v2-sp-1); }
}

/* the code block is #05050a in both modes, so its text cannot follow the mode:
   --v2-ink-dim put dark ink on a near-black panel at 1.06:1 in light. Ninth time
   in this project that ink had to follow the surface rather than the theme. */
body#dash pre.language-css,
body#outside pre.language-css {
    background: #05050a;
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-sm);
    padding: var(--v2-sp-3) var(--v2-sp-4);
    overflow-x: auto;
    font-family: var(--v2-f-mono);
    font-size: 12px;
    line-height: var(--v2-lh-body);
    color: #d8d8de;
    margin: 0;
}
body#dash pre.language-css code,
body#outside pre.language-css code {
    font-family: var(--v2-f-mono);
    color: inherit;
    background: transparent;
    padding: 0;
    white-space: pre-wrap;
    word-break: break-all;
}

body#dash .form-inline,
body#outside .form-inline {
    display: flex;
    gap: var(--v2-sp-2);
    align-items: center;
    flex-wrap: wrap;
    margin: 8px 0;
}
body#dash .form-inline .form-group,
body#outside .form-inline .form-group { margin: 0; }
body#dash .input-sm,
body#outside .input-sm { padding: var(--v2-sp-2) var(--v2-sp-3); font-size: 13px; height: 36px; }

/* ============================================================
 *  account.twig — extra specifics
 * ============================================================ */

/* A54 · เดิมบังคับ mono + uppercase + tracking ให้ label ทุกตัวในการ์ด ซึ่งเป็นภาษาไทย
   ("ชื่อผู้ใช้") · ตรงกับบล็อกฐานแล้ว ‼ ห้ามใส่ mono/uppercase กลับ */
body#dash .card-body label {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--v2-ink-mute);
    margin-bottom: 7px;
}
body#dash .card-body .form-control[readonly][disabled],
body#dash .card-body .form-control[readonly] {
    background: var(--v2-glass-2);
    color: var(--v2-ink-dim);
    font-family: var(--v2-f-mono);
    cursor: default;
}
body#dash span.form-control#current-email {
    line-height: 1.5;
    padding: var(--v2-sp-3) var(--v2-sp-3);
    min-height: 46px;
    display: flex;
    align-items: center;
}

/* ============================================================
 *  massorder.twig
 * ============================================================ */
body#dash #links.form-control {
    font-family: var(--v2-f-mono);
    font-size: 12px;
    line-height: 1.7;
    min-height: 280px;
}

/* ============================================================
 *  updates.twig + notifications (generic d-flex dash-header)
 * ============================================================ */
body#dash .updates-item,
body#dash .update-item {
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-md);
    padding: var(--v2-sp-3) var(--v2-sp-4);
    margin-bottom: 10px;
}

/* ============================================================
 *  subscription.twig, drip_feed.twig — forms inherit generic form-control/btn
 *  nothing extra needed
 * ============================================================ */

/* ============================================================
 *  childpanel.twig / childpanel_order.twig — inherit cards + tables
 * ============================================================ */

/* ============================================================
 *  Phase 4 — Auth + Marketing pages
 * ============================================================ */

/* signup/reset/setnew use .auth-hide-chrome to hide the global chrome */
body#outside:has(.auth-hide-chrome) #header,
body#outside:has(.auth-hide-chrome) > footer,
body#outside:has(.auth-hide-chrome) .sm-header { display: none !important; }

/* signup-area / reset-area wrapper (full-bleed auth pages) */
body#outside .signup-area {
    min-height: 100vh;
    padding: var(--v2-sp-6) var(--v2-sp-5) 60px;
    position: relative;
    z-index: 2;
}
body#outside .signup-area .home-fade {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}
body#outside .signup-area .hf-glow {
    position: absolute;
    width: 800px;
    height: 800px;
    top: -200px;
    left: -100px;
    background: radial-gradient(circle, var(--v2-yellow-soft), transparent 70%);
    filter: blur(80px);
}

/* Signup/reset header (logo + back to home button) */
body#outside .signup-header {
    max-width: 1240px;
    margin: 0 auto 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--v2-sp-4) 0;
    gap: var(--v2-sp-5);
    flex-wrap: wrap;
}
body#outside .signup-logo a {
    display: inline-flex;
    align-items: center;
    font-family: var(--v2-f-dis);
    font-weight: 700;
    color: var(--v2-ink);
    font-size: 20px;
    text-decoration: none !important;
}
body#outside .signup-logo img { max-height: 40px; width: auto; }
body#outside .signup-header .btn.btn-primary {
    background: var(--v2-glass-2);
    color: var(--v2-ink);
    border: 1px solid var(--v2-line-strong);
    height: 40px;
    padding: 0 var(--v2-sp-4);
    border-radius: var(--v2-r-pill);
    font-family: var(--v2-f-dis);
    font-weight: 600;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-1);
    text-decoration: none !important;
    transition: background var(--v2-t-fast);
}
body#outside .signup-header .btn.btn-primary:hover {
    background: var(--v2-glass-3);
    color: var(--v2-ink);
}

/* Signup badge (section header with icon) */
body#outside .signup-badge {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-3);
    padding: 0 var(--v2-sp-1) var(--v2-sp-4);
    margin-bottom: 20px;
    border-bottom: 1px solid var(--v2-line);
}
body#outside .signup-badge .icon {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--v2-r-sm);
    background: var(--v2-yellow);
    color: var(--v2-yellow-ink);
    font-size: 20px;
    flex-shrink: 0;
}
body#outside .signup-badge .text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
body#outside .signup-badge .text > span {
    font-family: var(--v2-f-dis);
    font-size: 20px;
    font-weight: 700;
    color: var(--v2-ink);
}
body#outside .signup-badge .text small {
    color: var(--v2-ink-mute);
    font-size: 12px;
    line-height: 1.5;
}

/* Signup content (form container) */
body#outside .signup-content {
    padding: var(--v2-sp-6);
    background: var(--v2-glass-2);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-lg);
    backdrop-filter: var(--v2-blur);
    -webkit-backdrop-filter: var(--v2-blur);
    box-shadow: var(--v2-shadow-1);
}
body#outside .signup-content .form-group { margin-bottom: 16px; }
body#outside .signup-content .form-group > label,
body#outside .signup-content .form-group .control-label {
    font-family: var(--v2-f-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--v2-ink-mute);
    font-weight: 500;
    margin-bottom: 8px;
    display: block;
}
body#outside .signup-content .form-control,
body#outside .signup-content .form-select {
    width: 100%;
    padding: var(--v2-sp-3) var(--v2-sp-3);
    border-radius: var(--v2-r-sm);
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    color: var(--v2-ink);
    font-family: var(--v2-f-thai);
    font-size: 14px;
    outline: 0;
    transition: border-color var(--v2-t-fast), background var(--v2-t-fast), box-shadow var(--v2-t-fast);
    line-height: 1.5;
}
body#outside .signup-content .form-control:focus {
    border-color: var(--v2-yellow);
    background: var(--v2-glass-2);
    box-shadow: 0 0 0 3px var(--v2-yellow-soft);
}
body#outside .signup-content .btn.btn-primary {
    width: 100%;
    justify-content: center;
    height: 46px;
    font-size: 14px;
    border-radius: var(--v2-r-sm);
    background: var(--v2-yellow);
    color: var(--v2-yellow-ink);
    font-family: var(--v2-f-dis);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-2);
    border: 0;
    cursor: pointer;
    transition: background var(--v2-t-fast), box-shadow var(--v2-t-base), transform var(--v2-t-fast);
}
body#outside .signup-content .btn.btn-primary:hover {
    background: #ffe24a;
    color: var(--v2-yellow-ink);
    box-shadow: 0 12px 30px -10px var(--v2-yellow-glow);
    transform: translateY(-1px);
}
body#outside .signup-content .alert {
    padding: var(--v2-sp-3) var(--v2-sp-4);
    border-radius: var(--v2-r-md);
    border: 1px solid var(--v2-line);
    background: var(--v2-glass-2);
    color: var(--v2-ink);
    font-size: 13px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: var(--v2-sp-2);
}
body#outside .signup-content .alert-success {
    background: var(--v2-ok-soft);
    border-color: rgba(111, 228, 168, 0.30);
    color: var(--v2-ok);
}
body#outside .signup-content .alert-danger {
    background: var(--v2-danger-soft);
    border-color: rgba(255, 122, 106, 0.30);
    color: var(--v2-danger);
}

/* Left-side marketing description (sign-d) */
body#outside .sign-d { padding: var(--v2-sp-6); }
body#outside .rp-left-title {
    font-family: var(--v2-f-dis);
    font-size: var(--v2-fs-fluid-2);
    font-weight: 800;
    line-height: var(--v2-lh-tight);
    color: var(--v2-ink);
    margin: 0 0 18px;
}
body#outside .rp-left-title .primary-color { color: var(--v2-yellow); }
body#outside .rp-left-text {
    color: var(--v2-ink-dim);
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
}

/* Login card (signin.twig) — the login form in the hero */
body#outside .login-card {
    -webkit-backdrop-filter: var(--v2-blur);
}
body#outside .login-card .card-body { padding: 0; background: transparent; }
body#outside .login-card .form-group { margin-bottom: 14px; }
body#outside .login-card .form-group > label {
    font-family: var(--v2-f-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--v2-ink-mute);
    font-weight: 500;
    margin-bottom: 8px;
    display: block;
}
body#outside .login-card .form-control {
    width: 100%;
    padding: var(--v2-sp-3) var(--v2-sp-3);
    border-radius: var(--v2-r-sm);
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    color: var(--v2-ink);
    font-family: var(--v2-f-thai);
    font-size: 14px;
    outline: 0;
    transition: border-color var(--v2-t-fast), background var(--v2-t-fast), box-shadow var(--v2-t-fast);
    line-height: 1.5;
}
body#outside .login-card .form-control:focus {
    border-color: var(--v2-yellow);
    background: var(--v2-glass-2);
    box-shadow: 0 0 0 3px var(--v2-yellow-soft);
}
body#outside .login-card .col-end { margin-top: 16px; }
body#outside .login-card .col-end .row { align-items: stretch; gap: var(--v2-sp-2); margin: 0; }
body#outside .login-card .col-end .col,
body#outside .login-card .col-end .col-auto { padding: 0; }
body#outside .login-remember-me {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: var(--v2-r-sm);
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    color: var(--v2-ink-mute);
    cursor: pointer;
    margin: 0;
    transition: background var(--v2-t-fast), color var(--v2-t-fast), border-color var(--v2-t-fast);
}
body#outside .login-remember-me input[type="checkbox"] { display: none; }
body#outside .login-remember-me input[type="checkbox"]:checked + .lgn-btn {
    color: var(--v2-yellow);
}
body#outside .login-remember-me:has(input:checked) {
    background: var(--v2-yellow-soft);
    border-color: rgba(255, 214, 10, 0.35);
    color: var(--v2-yellow);
}
body#outside .login-card .btn.btn-primary {
    width: 100%;
    height: 46px;
    border-radius: var(--v2-r-sm);
    background: var(--v2-yellow);
    color: var(--v2-yellow-ink);
    font-family: var(--v2-f-dis);
    font-weight: 600;
    font-size: 14px;
    border: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--v2-sp-2);
    cursor: pointer;
    transition: background var(--v2-t-fast), box-shadow var(--v2-t-base), transform var(--v2-t-fast);
    text-decoration: none !important;
}
body#outside .login-card .btn.btn-primary:hover {
    background: #ffe24a;
    color: var(--v2-yellow-ink);
    box-shadow: 0 12px 30px -10px var(--v2-yellow-glow);
    transform: translateY(-1px);
}
body#outside .frgt-pass {
    margin-top: 16px;
    text-align: center;
    font-size: 13px;
}
body#outside .frgt-pass a {
    color: var(--v2-yellow-text);
    text-decoration: none !important;
    font-weight: 600;
    font-family: var(--v2-f-dis);
}
/* the hover was #ffe24a — lighter than the resting colour, so on the white
   card it went from readable to invisible on the way to being clicked */
body#outside .frgt-pass a:hover { color: var(--v2-ink); }
body#outside .frgt-pass .sep {
    /* --v2-ink-soft is 0.32 alpha: 2.09:1 for a separator that carries meaning */
    color: var(--v2-ink-mute);
    margin: 0 8px;
}
body#outside .frgt-pass .signup-link { color: var(--v2-ink-dim); }
body#outside .frgt-pass .signup-link strong {
    color: var(--v2-yellow-text);
    font-weight: 700;
    margin-left: 4px;
}

/* Hero stats strip (below home-content paragraph) */
body#outside .home-stats {
    display: flex;
    gap: var(--v2-sp-6);
    margin-top: 30px;
    padding: var(--v2-sp-5) var(--v2-sp-5);
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-md);
    backdrop-filter: var(--v2-blur);
    -webkit-backdrop-filter: var(--v2-blur);
    flex-wrap: wrap;
    max-width: 540px;
}
body#outside .home-stats .m {
    font-family: var(--v2-f-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    color: var(--v2-ink-mute);
    text-transform: uppercase;
    min-width: 80px;
}
body#outside .home-stats .m b {
    display: block;
    font-family: var(--v2-f-dis);
    color: var(--v2-ink);
    font-size: 20px;
    margin-top: 4px;
    text-transform: none;
    font-weight: 800;
}
body#outside .home-stats .m:nth-child(2) b { color: var(--v2-yellow); }
body#outside .home-stats .m + .m {
    padding-left: var(--v2-sp-6);
    border-left: 1px dashed var(--v2-line);
}
@media (max-width: 540px) {
    body#outside .home-stats { gap: var(--v2-sp-3); padding: var(--v2-sp-3) var(--v2-sp-4); }
    body#outside .home-stats .m + .m { padding-left: 0; border-left: 0; }
}

/* Login card wrapper — hosts floating demo cards */
body#outside .login-card-wrap {
    position: relative;
    max-width: 440px;
    margin-left: auto;
}
@media (max-width: 991px) {
    body#outside .login-card-wrap { margin: 0 auto; }
}

body#outside .login-card {
    padding: var(--v2-sp-6);
    background: var(--v2-glass-2);
    border: 1px solid var(--v2-line-strong);
    border-radius: var(--v2-r-lg);
    backdrop-filter: var(--v2-blur-strong);
    -webkit-backdrop-filter: var(--v2-blur-strong);
    box-shadow: var(--v2-shadow-2);
    position: relative;
    z-index: 2;
}
body#outside .login-card-title {
    font-family: var(--v2-f-dis);
    font-size: 34px;
    font-weight: 800;
    color: var(--v2-ink);
    margin: 10px 0 6px;
    line-height: 1;
}
body#outside .login-card-title i {
    font-family: var(--v2-f-serif);
    font-style: italic;
    font-weight: 400;
    color: var(--v2-yellow);
}
body#outside .login-card-sub {
    color: var(--v2-ink-mute);
    font-size: 13px;
    line-height: var(--v2-lh-body);
    margin: 0 0 20px;
}

/* Floating demo cards around the login card (decorative) */
body#outside .float-demo {
    position: absolute;
    padding: var(--v2-sp-3) var(--v2-sp-4);
    border-radius: var(--v2-r-md);
    background: var(--v2-glass-3);
    border: 1px solid var(--v2-line-strong);
    backdrop-filter: var(--v2-blur);
    -webkit-backdrop-filter: var(--v2-blur);
    box-shadow: var(--v2-shadow-2);
    z-index: 1;
    font-size: 12px;
    color: var(--v2-ink-dim);
    min-width: 180px;
}
body#outside .float-demo .label {
    font-family: var(--v2-f-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    color: var(--v2-ink-mute);
    text-transform: uppercase;
}
body#outside .float-demo .value {
    font-family: var(--v2-f-dis);
    font-size: 20px;
    font-weight: 700;
    color: var(--v2-ink);
    margin-top: 4px;
}
body#outside .float-demo .value span {
    color: var(--v2-yellow);
    font-style: italic;
    font-family: var(--v2-f-serif);
    font-weight: 400;
}
body#outside .float-demo .value small {
    color: var(--v2-ink-mute);
    font-size: 13px;
    font-family: var(--v2-f-dis);
}
body#outside .float-demo-a {
    top: -18px;
    left: -32px;
    transform: rotate(-3deg);
    animation: v2-float 6s ease-in-out infinite;
}
body#outside .float-demo-b {
    bottom: -18px;
    right: -28px;
    transform: rotate(3deg);
    animation: v2-float 7s ease-in-out infinite 1s;
}
@media (max-width: 540px) {
    body#outside .float-demo { display: none; }
}

/* ============================================================
 *  v2 LANDING — mega centered hero (signin.twig)
 * ============================================================ */
body#outside .v2-hero {
    position: relative;
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 120px var(--v2-sp-6) 100px;
    text-align: center;
    overflow: hidden;
}
body#outside .v2-hero .home-fade,
body#outside .v2-hero .home-images { display: none; }

/* Floating corner demo cards */
body#outside .v2-hero-floats {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}
body#outside .v2-hero-floats .vf {
    border: 1px solid var(--v2-line);
    backdrop-filter: var(--v2-blur);
    -webkit-backdrop-filter: var(--v2-blur);
    font-family: var(--v2-f-thai);
}
body#outside .v2-hero-floats .vf-e {
    font-family: var(--v2-f-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--v2-ink-mute);
    text-transform: uppercase;
    margin-bottom: 6px;
}
body#outside .v2-hero-floats .vf-v {
    font-family: var(--v2-f-dis);
    font-weight: 700;
    color: var(--v2-ink);
    line-height: var(--v2-lh-tight);
}
body#outside .v2-hero-floats .vf-v i {
    color: var(--v2-yellow-text);
    font-style: italic;
    font-family: var(--v2-f-serif);
    font-weight: 400;
}
body#outside .v2-hero-floats .vf-v small {
    color: var(--v2-ink-mute);
    font-size: 14px;
    font-family: var(--v2-f-dis);
}
body#outside .v2-hero-floats .vf-v-sm {
    font-family: var(--v2-f-dis);
    font-size: 14px;
    font-weight: 600;
    color: var(--v2-ink);
    line-height: var(--v2-lh-tight);
}
body#outside .v2-hero-floats .vf-s {
    font-family: var(--v2-f-mono);
    font-size: 11px;
    color: var(--v2-ink-mute);
    margin-top: 6px;
    letter-spacing: 0.02em;
}
body#outside .v2-hero-floats .vf-s.ok { color: var(--v2-ok-text); }
body#outside .v2-hero-floats .vf-bars {
    display: flex;
    align-items: flex-end;
    gap: var(--v2-sp-1);
    margin-top: 10px;
}
body#outside .v2-hero-floats .vf-bars i {
    flex: 1;
    display: block;
}
body#outside .v2-hero-floats .vf-1 {     animation: v2-float-a 8s ease-in-out infinite; }
body#outside .v2-hero-floats .vf-2 {     animation: v2-float-a 10s ease-in-out infinite reverse; }
body#outside .v2-hero-floats .vf-3 {     animation: v2-float-a 12s ease-in-out infinite; }
body#outside .v2-hero-floats .vf-4 {     animation: v2-float-a 9s ease-in-out infinite reverse; }
@keyframes v2-float-a {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -16px; }
}
@media (max-width: 991px) {
    body#outside .v2-hero-floats { display: none; }
    body#outside .v2-hero { min-height: auto; padding: 80px var(--v2-sp-5) 60px; }
}

/* Hero center column */
body#outside .v2-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 1100px;
    margin: 0 auto;
}
body#outside .v2-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-2);
    padding: var(--v2-sp-1) var(--v2-sp-4) var(--v2-sp-1) var(--v2-sp-1);
    border-radius: var(--v2-r-pill);
    background: var(--v2-glass-2);
    border: 1px solid var(--v2-line);
    backdrop-filter: var(--v2-blur);
    -webkit-backdrop-filter: var(--v2-blur);
    font-size: 13px;
    color: var(--v2-ink-dim);
    margin-bottom: 28px;
}
body#outside .v2-hero-badge .chip-new {
    background: var(--v2-yellow);
    color: var(--v2-yellow-ink);
    font-weight: 700;
    padding: var(--v2-sp-1) var(--v2-sp-3);
    border-radius: var(--v2-r-pill);
    font-size: 11px;
    letter-spacing: 0.1em;
    font-family: var(--v2-f-mono);
}
body#outside .v2-hero-h1 {
    font-family: var(--v2-f-dis);
    font-weight: 800;
    margin: 0;
    color: var(--v2-ink);
}
body#outside .v2-hero-h1 i {
    font-family: var(--v2-f-serif);
    font-style: italic;
    font-weight: 400;
}
body#outside .v2-hero-sub {
    max-width: 640px;
    margin: 28px auto 0;
    color: var(--v2-ink-dim);
    line-height: var(--v2-lh-body);
}
body#outside .v2-hero-cta {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
body#outside .v2-hero-stats {
    margin-top: 52px;
    display: flex;
    gap: 40px;
    justify-content: center;
    flex-wrap: wrap;
    color: var(--v2-ink-mute);
    font-family: var(--v2-f-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
body#outside .v2-hero-stats b {
    color: var(--v2-ink);
    font-family: var(--v2-f-dis);
    font-weight: 800;
    font-size: 26px;
    text-transform: none;
    display: block;
    margin-top: 6px;
}

/* ============================================================
 *  v2 metric row (big yellow numbers, 4-col glass-strong box)
 * ============================================================ */
body#outside .v2-metric-section { padding: 40px 0 var(--v2-sp-5) !important; }
body#outside .v2-metric-row {
    padding: 36px var(--v2-sp-6);
    border-radius: var(--v2-r-xl);
    background: var(--v2-glass-3);
    border: 1px solid var(--v2-line-strong);
    backdrop-filter: var(--v2-blur-strong);
    -webkit-backdrop-filter: var(--v2-blur-strong);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--v2-sp-6);
    box-shadow: var(--v2-shadow-2);
}
@media (max-width: 700px) {
    body#outside .v2-metric-row { grid-template-columns: repeat(2, 1fr); gap: var(--v2-sp-4); padding: var(--v2-sp-6) var(--v2-sp-5); }
}
body#outside .v2-metric-row .m { text-align: center; }
body#outside .v2-metric-row .n {
    font-family: var(--v2-f-dis);
    font-size: var(--v2-fs-fluid-2);
    font-weight: 800;
    color: var(--v2-yellow);
    line-height: 1;
}
body#outside .v2-metric-row .l {
    font-family: var(--v2-f-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    color: var(--v2-ink-mute);
    text-transform: uppercase;
    margin-top: 12px;
}

/* ============================================================
 *  v2 showcase feature-stack (1 big + 4 small)
 * ============================================================ */
body#outside .v2-showcase { padding: 80px 0 100px !important; }
body#outside .v2-showcase-head {
    text-align: center;
    margin-bottom: 52px;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}
body#outside .v2-showcase-head h2 {
    font-family: var(--v2-f-dis);
    font-size: var(--v2-fs-fluid-2);
    line-height: var(--v2-lh-tight);
    margin: 14px 0 12px;
    font-weight: 800;
    color: var(--v2-ink);
}
body#outside .v2-showcase-head h2 i {
    font-family: var(--v2-f-serif);
    font-style: italic;
    font-weight: 400;
    color: var(--v2-yellow-text);
}
body#outside .v2-showcase-head p {
    color: var(--v2-ink-dim);
    font-size: 14px;
    line-height: var(--v2-lh-body);
    margin: 0;
}

body#outside .v2-feature-stack {
    display: grid;
    grid-template-columns: 1.25fr 1fr 1fr;
    gap: var(--v2-sp-4);
    grid-auto-rows: minmax(0, auto);
}
@media (max-width: 1000px) {
    body#outside .v2-feature-stack { grid-template-columns: 1fr 1fr; }
    body#outside .v2-feature-stack .v2-feat-big { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 640px) {
    body#outside .v2-feature-stack { grid-template-columns: 1fr; }
}
body#outside .v2-feat {
    border-radius: var(--v2-r-xl);
    position: relative;
    overflow: hidden;
    background: var(--v2-glass-2);
    border: 1px solid var(--v2-line);
    backdrop-filter: var(--v2-blur);
    -webkit-backdrop-filter: var(--v2-blur);
}
body#outside .v2-feat:hover {
    border-color: var(--v2-line-strong);
    background: var(--v2-glass-3);
    transform: translateY(-2px);
}
body#outside .v2-feat .e {
    font-family: var(--v2-f-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--v2-ink-mute);
    text-transform: uppercase;
}
body#outside .v2-feat h3 {
    font-family: var(--v2-f-dis);
    margin: 14px 0 10px;
    font-weight: 700;
    color: var(--v2-ink);
}
body#outside .v2-feat p {
    color: var(--v2-ink-dim);
    line-height: var(--v2-lh-body);
    margin: 0;
}
body#outside .v2-feat-big {
    grid-row: span 2;
}
body#outside .v2-feat-code {
    margin-top: 24px;
    border: 1px solid var(--v2-line);
    font-family: var(--v2-f-mono);
    font-size: 12px;
    line-height: var(--v2-lh-body);
    color: var(--v2-ink-dim);
}
body#outside .v2-feat-code .muted { color: rgba(247, 247, 248, 0.50); }
body#outside .v2-feat-code .ok { color: var(--v2-yellow); display: block; margin-top: 4px; }

/* ============================================================
 *  v2 product preview frame (Mac-style browser)
 * ============================================================ */
body#outside .v2-product-section { padding: 40px 0 100px !important; }
body#outside .v2-product-frame {
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--v2-sp-4);
    border-radius: var(--v2-r-xl);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04));
    border: 1px solid var(--v2-line-strong);
    backdrop-filter: var(--v2-blur-strong);
    -webkit-backdrop-filter: var(--v2-blur-strong);
    box-shadow: var(--v2-elev-3);
}
body#outside .v2-product-inner {
    border-radius: var(--v2-r-lg);
    background: #0d0d12;
    border: 1px solid var(--v2-line);
    padding: var(--v2-sp-5);
    min-height: 400px;
}
html.light body#outside .v2-product-inner { background: #ffffff; border-color: rgba(12,12,16,0.08); }
body#outside .v2-product-top {
    display: flex;
    gap: var(--v2-sp-2);
    padding-bottom: var(--v2-sp-3);
    border-bottom: 1px solid var(--v2-line);
    align-items: center;
}
body#outside .v2-product-top > i {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--v2-line-strong);
    display: inline-block;
}
body#outside .v2-product-top > i:nth-child(1) { background: #ff6058; }
body#outside .v2-product-top > i:nth-child(2) { background: #ffc327; }
body#outside .v2-product-top > i:nth-child(3) { background: #28cd41; }
body#outside .v2-product-url {
    margin-left: auto;
    font-family: var(--v2-f-mono);
    font-size: 11px;
    color: var(--v2-ink-mute);
    letter-spacing: 0.06em;
}
body#outside .v2-product-grid {
    display: grid;
    grid-template-columns: 200px 1fr 260px;
    gap: var(--v2-sp-4);
    margin-top: 18px;
}
@media (max-width: 900px) {
    body#outside .v2-product-grid { grid-template-columns: 1fr; }
}
body#outside .v2-product-side {
    background: var(--v2-glass);
    border-radius: var(--v2-r-md);
    padding: var(--v2-sp-3);
    font-size: 12px;
    display: flex;
    flex-direction: column;
    gap: var(--v2-sp-1);
}
body#outside .v2-product-side .pi {
    padding: var(--v2-sp-2) var(--v2-sp-2);
    border-radius: var(--v2-r-sm);
    color: var(--v2-ink-dim);
    font-family: var(--v2-f-dis);
    font-size: 13px;
    font-weight: 500;
}
body#outside .v2-product-side .pi.a {
    background: var(--v2-yellow-soft);
    color: var(--v2-yellow-text);
    font-weight: 700;
}
body#outside .v2-product-title {
    font-family: var(--v2-f-dis);
    font-size: 20px;
    margin: 10px 0 4px;
    font-weight: 700;
    color: var(--v2-ink);
}
body#outside .v2-product-sub {
    color: var(--v2-ink-mute);
    font-size: 13px;
    margin-bottom: 16px;
}
body#outside .v2-product-chart {
    height: 180px;
    display: flex;
    align-items: flex-end;
    gap: var(--v2-sp-1);
    padding: var(--v2-sp-4);
    border-radius: var(--v2-r-md);
    background: var(--v2-glass);
}
body#outside .v2-product-chart i {
    flex: 1;
    background: linear-gradient(180deg, var(--v2-yellow), var(--v2-yellow-2));
    border-radius: 3px 3px 0 0;
}
body#outside .v2-product-orders {
    background: var(--v2-glass);
    border-radius: var(--v2-r-md);
    padding: var(--v2-sp-3);
    font-size: 12px;
}
body#outside .v2-product-orders .pr-h {
    font-family: var(--v2-f-mono);
    font-size: 11px;
    color: var(--v2-ink-mute);
    letter-spacing: 0.12em;
    margin-bottom: 10px;
}
body#outside .v2-product-orders .pr-row {
    display: flex;
    justify-content: space-between;
    padding: var(--v2-sp-2) 0;
    border-bottom: 1px dashed var(--v2-line);
    color: var(--v2-ink-dim);
    font-size: 12px;
    font-family: var(--v2-f-dis);
}
body#outside .v2-product-orders .pr-row:last-child { border-bottom: 0; }
body#outside .v2-product-orders .pr-ok { color: var(--v2-ok-text); }
body#outside .v2-product-orders .pr-run { color: var(--v2-yellow-text); }

/* ============================================================
 *  v2 signin section (moved login form — below hero/marketing)
 * ============================================================ */
body#outside .v2-signin-section { padding: 60px 0 !important; scroll-margin-top: 80px; }
body#outside .v2-signin-wrap {
    max-width: 540px;
    margin: 0 auto;
    text-align: center;
}
body#outside .v2-signin-head h2 {
    font-family: var(--v2-f-dis);
    font-size: var(--v2-fs-fluid-2);
    line-height: var(--v2-lh-tight);
    margin: 12px 0 10px;
    font-weight: 800;
    color: var(--v2-ink);
}
body#outside .v2-signin-head h2 i {
    font-family: var(--v2-f-serif);
    font-style: italic;
    font-weight: 400;
    color: var(--v2-yellow);
}
body#outside .v2-signin-head p {
    color: var(--v2-ink-mute);
    font-size: 14px;
    margin: 0 0 28px;
    line-height: var(--v2-lh-body);
}
body#outside .v2-signin-wrap .login-card { text-align: left; padding: var(--v2-sp-7); }

/* ============================================================
 *  v2 CTA block (glass + radial gradient)
 * ============================================================ */
body#outside .v2-cta-block-section { padding: 80px 0 !important; }
body#outside .v2-cta-block {
    border-radius: var(--v2-r-xl);
    text-align: center;
    border: 1px solid var(--v2-line-strong);
    backdrop-filter: var(--v2-blur-strong);
    -webkit-backdrop-filter: var(--v2-blur-strong);
    box-shadow: var(--v2-shadow-2);
    max-width: 1100px;
    margin: 0 auto;
}
body#outside .v2-cta-block h2 {
    font-family: var(--v2-f-dis);
    margin: 16px 0 12px;
    line-height: 1;
    font-weight: 800;
    color: var(--v2-ink);
}
body#outside .v2-cta-block h2 i {
    font-family: var(--v2-f-serif);
    font-style: italic;
    font-weight: 400;
    color: var(--v2-yellow-text);
}
body#outside .v2-cta-block p {
    color: var(--v2-ink-dim);
    margin: 16px 0 0;
    font-size: 16px;
    line-height: var(--v2-lh-body);
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}
body#outside .v2-cta-actions {
    margin-top: 32px;
    display: flex;
    gap: var(--v2-sp-3);
    justify-content: center;
    flex-wrap: wrap;
}
body#outside .v2-cta-actions .btn.btn-lg {
    border-radius: var(--v2-r-pill);
}

/* ============================================================
 *  v2 brands strip — redesigned pill row with brand colors
 * ============================================================ */
body#outside .v2-brands-section {  position: relative; z-index: 2; }
body#outside .v2-brands-label {
    text-align: center;
    font-family: var(--v2-f-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--v2-ink-mute);
    text-transform: uppercase;
    margin-bottom: 20px;
}
body#outside .v2-brands-row {
    display: flex;
    gap: var(--v2-sp-2);
    margin: 0 auto;
}
body#outside .v2-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-2);
    padding: var(--v2-sp-2) var(--v2-sp-4) var(--v2-sp-2) var(--v2-sp-2);
    background: var(--v2-glass-2);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-pill);
    font-family: var(--v2-f-dis);
    font-size: 14px;
    font-weight: 500;
    color: var(--v2-ink-dim);
    transition: border-color var(--v2-t-base), background var(--v2-t-base), transform var(--v2-t-base), color var(--v2-t-base);
    backdrop-filter: var(--v2-blur);
    -webkit-backdrop-filter: var(--v2-blur);
}
body#outside .v2-brand:hover {
    transform: translateY(-3px);
    background: var(--v2-glass-3);
    color: var(--v2-ink);
    border-color: var(--v2-line-strong);
}
body#outside .v2-brand > i {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 14px;
    color: #fff;
    flex-shrink: 0;
}
body#outside .v2-brand.b-tg > i { background: #229ED9; }
body#outside .v2-brand.b-ig > i { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }
body#outside .v2-brand.b-yt > i { background: #FF0033; }
body#outside .v2-brand.b-tt > i { background: #000000; border: 1px solid rgba(255,255,255,0.15); }
body#outside .v2-brand.b-fb > i { background: #1877F2; }
body#outside .v2-brand.b-wa > i { background: #25D366; }
body#outside .v2-brand.b-x > i { background: #000000; border: 1px solid rgba(255,255,255,0.15); }
body#outside .v2-brand.b-sp > i { background: #1DB954; }
html.light body#outside .v2-brand.b-tt > i,
html.light body#outside .v2-brand.b-x > i { background: #18181b; border-color: rgba(0,0,0,0.12); }

/* ============================================================
 *  v2 split section — stats on left + login form on right
 * ============================================================ */
body#outside .v2-split-section {
    padding: 60px 0 !important;
    position: relative;
    z-index: 2;
    scroll-margin-top: 80px;
}
body#outside .v2-split-wrap {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 48px;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-xl);
    backdrop-filter: var(--v2-blur);
    -webkit-backdrop-filter: var(--v2-blur);
    position: relative;
    overflow: hidden;
}
body#outside .v2-split-wrap::before {
    content: "";
    position: absolute;
    top: -80px;
    right: -80px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, var(--v2-yellow-soft), transparent 70%);
    pointer-events: none;
    filter: blur(40px);
}
@media (max-width: 900px) {
    body#outside .v2-split-wrap { grid-template-columns: 1fr;  gap: var(--v2-sp-7); }
}
body#outside .v2-split-left { position: relative; z-index: 1; }
body#outside .v2-split-title {
    font-family: var(--v2-f-dis);
    line-height: var(--v2-lh-tight);
    margin: 12px 0 10px;
    font-weight: 800;
    color: var(--v2-ink);
}
body#outside .v2-split-title i {
    font-family: var(--v2-f-serif);
    font-style: italic;
    font-weight: 400;
    color: var(--v2-yellow-text);
}
body#outside .v2-split-desc {
    color: var(--v2-ink-dim);
    font-size: 14px;
    line-height: var(--v2-lh-body);
    max-width: 480px;
    margin: 0 0 26px;
}
body#outside .v2-split-metrics {
    display: grid;
}
body#outside .v2-split-metrics .m {
    border: 1px solid var(--v2-line);
}
body#outside .v2-split-metrics .n {
    font-family: var(--v2-f-dis);
    font-weight: 800;
}
body#outside .v2-split-metrics .l {
    font-family: var(--v2-f-mono);
    color: var(--v2-ink-mute);
    text-transform: uppercase;
}
body#outside .v2-split-rating {
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-2);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-pill);
    flex-wrap: wrap;
}
body#outside .v2-split-rating .v2-stars {
    color: var(--v2-yellow);
    display: inline-flex;
    gap: 2px;
}
body#outside .v2-split-rating .v2-stars i { font-size: 13px; }
body#outside .v2-split-rating strong {
    font-family: var(--v2-f-dis);
    font-weight: 800;
    color: var(--v2-ink);
    font-size: 14px;
}
body#outside .v2-split-rating span {
    font-family: var(--v2-f-mono);
    font-size: 11px;
    color: var(--v2-ink-mute);
    letter-spacing: 0.08em;
}

body#outside .v2-split-right {
    position: relative;
    z-index: 1;
}
body#outside .v2-split-right .v2-signin-head { margin-bottom: 16px; }
body#outside .v2-split-login-title {
    font-family: var(--v2-f-dis);
    font-size: 26px;
    line-height: 1;
    margin: 8px 0 6px;
    font-weight: 800;
    color: var(--v2-ink);
}
/* A23 kept the bright accent for body#outside on the reasoning that the guest
   hero sits on the dark split panel. That holds for .v2-hero-h1 and .v2-auth-h1,
   which do — measured, they pass. It does not hold here: the login title is on
   the LIGHT half of the split, at 1.43:1. The reasoning was right and the scope
   was wrong. */
body#outside .v2-split-login-title i {
    font-family: var(--v2-f-serif);
    font-style: italic;
    font-weight: 400;
    color: var(--v2-yellow-text);
}
body#outside .v2-split-right .v2-signin-head p {
    color: var(--v2-ink-mute);
    font-size: 13px;
    margin: 0;
}
body#outside .v2-split-right .login-card {
    background: var(--v2-glass);
    border: 1px solid var(--v2-line-strong);
    backdrop-filter: var(--v2-blur);
    -webkit-backdrop-filter: var(--v2-blur);
}

/* ============================================================
 *  Centered section head (v2) — shared by reviews/FAQ/blog
 * ============================================================ */
body#outside .v2-section-head-center {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--v2-sp-3);
}
body#outside .v2-section-head-center .v2-eyebrow { margin: 0; }
body#outside .v2-section-head-center h2 {
    font-family: var(--v2-f-dis);
    font-size: var(--v2-fs-fluid-2);
    line-height: var(--v2-lh-tight);
    margin: 0;
    font-weight: 800;
    color: var(--v2-ink);
}
body#outside .v2-section-head-center h2 i {
    font-family: var(--v2-f-serif);
    font-style: italic;
    font-weight: 400;
    color: var(--v2-yellow-text);
}
body#outside .v2-section-head-center p {
    color: var(--v2-ink-dim);
    font-size: 14px;
    line-height: var(--v2-lh-body);
    margin: 0;
}

/* ============================================================
 *  v2 reviews section — restyled glass testimonial cards
 * ============================================================ */
body#outside .v2-reviews-section { padding: 80px 0 !important; position: relative; z-index: 2; }
body#outside .v2-reviews-section .review-item {
    background: var(--v2-glass-2);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-lg);
    backdrop-filter: var(--v2-blur);
    -webkit-backdrop-filter: var(--v2-blur);
    transition: border-color var(--v2-t-base), transform var(--v2-t-base);
}
body#outside .v2-reviews-section .review-item:hover {
    border-color: var(--v2-line-strong);
    transform: translateY(-3px);
}
body#outside .v2-reviews-section .review-item .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--v2-sp-3);
    border-bottom: 1px dashed var(--v2-line);
}
body#outside .v2-reviews-section .review-item .r-user {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-2);
    min-width: 0;
}
body#outside .v2-reviews-section .review-item .avatar {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--v2-yellow), var(--v2-yellow-2));
    display: grid;
    place-items: center;
    font-family: var(--v2-f-dis);
    font-weight: 800;
    font-size: 16px;
    color: var(--v2-yellow-ink);
    box-shadow: 0 4px 12px var(--v2-yellow-soft);
}
body#outside .v2-reviews-section .review-item .name {
    font-family: var(--v2-f-dis);
    font-weight: 700;
    font-size: 14px;
    color: var(--v2-ink);
    min-width: 0;
}
body#outside .v2-reviews-section .review-item .name span {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-1);
    font-family: var(--v2-f-mono);
    font-size: 11px;
    color: var(--v2-ok-text);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-top: 2px;
}
body#outside .v2-reviews-section .review-item .rate {
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-1);
    padding: var(--v2-sp-1) var(--v2-sp-2);
    border-radius: var(--v2-r-pill);
    background: var(--v2-yellow-soft);
    color: var(--v2-yellow-text);
    font-family: var(--v2-f-dis);
    font-weight: 700;
    font-size: 13px;
}
body#outside .v2-reviews-section .review-item .rate i { font-size: 11px; }
body#outside .v2-reviews-section .review-item .text p {
    color: var(--v2-ink-dim);
    margin: 0;
}

/* ============================================================
 *  v2 FAQ section — glass accordion
 * ============================================================ */
body#outside .v2-faq-section { padding: 80px 0 !important; position: relative; z-index: 2; }
body#outside .v2-faq-section .faq-ss-tabs { margin: 0; }
body#outside .v2-faq-section .home-ss-tab {
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-md);
    margin-bottom: 10px;
    overflow: hidden;
    transition: border-color var(--v2-t-base), background var(--v2-t-base);
    backdrop-filter: var(--v2-blur);
    -webkit-backdrop-filter: var(--v2-blur);
}
body#outside .v2-faq-section .home-ss-tab:hover { border-color: var(--v2-line-strong); }
body#outside .v2-faq-section .home-ss-tab.active { border-color: rgba(255, 214, 10, 0.28); background: var(--v2-yellow-soft); }
body#outside .v2-faq-section .ss-tab-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--v2-sp-3);
    padding: var(--v2-sp-4) var(--v2-sp-5);
    cursor: pointer;
}
body#outside .v2-faq-section .ss-tab-head .left-p,
body#outside .v2-faq-section .ss-tab-head h4 {
    font-family: var(--v2-f-dis);
    font-weight: 600;
    font-size: 14px;
    color: var(--v2-ink);
    margin: 0;
    flex: 1;
}
body#outside .v2-faq-section .ss-tab-head .right-p {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--v2-glass-2);
    border: 1px solid var(--v2-line);
    color: var(--v2-yellow);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
    position: relative;
}
body#outside .v2-faq-section .ss-tab-head .right-p i { transition: opacity var(--v2-t-base); }
body#outside .v2-faq-section .ss-tab-head .right-p i.fa-angle-up { display: none; }
body#outside .v2-faq-section .home-ss-tab.active .ss-tab-head .right-p { background: var(--v2-yellow); color: var(--v2-yellow-ink); border-color: transparent; }
body#outside .v2-faq-section .home-ss-tab.active .ss-tab-head .right-p i.fa-angle-down { display: none; }
body#outside .v2-faq-section .home-ss-tab.active .ss-tab-head .right-p i.fa-angle-up { display: inline-flex; }

body#outside .v2-faq-section .ss-tab-content {
    padding: 0 var(--v2-sp-5) var(--v2-sp-4);
    color: var(--v2-ink-dim);
    font-size: 14px;
    line-height: 1.7;
    display: none;
}
body#outside .v2-faq-section .home-ss-tab.active .ss-tab-content { display: block; }

/* ============================================================
 *  v2 blog section — card grid
 * ============================================================ */
body#outside .v2-blog-section { padding: 80px 0 !important; position: relative; z-index: 2; }
body#outside .v2-blog-section .home-articles {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: var(--v2-sp-4);
    max-width: 1200px;
    margin: 0 auto;
}
@media (max-width: 900px) {
    body#outside .v2-blog-section .home-articles { grid-template-columns: 1fr; }
}
body#outside .v2-blog-section .home-articles > a {
    display: block;
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-lg);
    overflow: hidden;
    text-decoration: none !important;
    color: inherit;
    transition: border-color var(--v2-t-base), transform var(--v2-t-base), background var(--v2-t-base);
}
body#outside .v2-blog-section .home-articles > a:hover {
    border-color: var(--v2-line-strong);
    transform: translateY(-4px);
    background: var(--v2-glass-2);
}
body#outside .v2-blog-section .home-articles > a .blog-body {
    display: flex;
    flex-direction: column;
    height: 100%;
}
body#outside .v2-blog-section .home-articles .blog-image {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--v2-glass-2);
}
body#outside .v2-blog-section .home-articles .blog-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
body#outside .v2-blog-section .home-articles .blog-date {
    position: absolute;
    top: 12px;
    left: 12px;
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-1);
    padding: var(--v2-sp-1) var(--v2-sp-3);
    border-radius: var(--v2-r-pill);
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-family: var(--v2-f-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
body#outside .v2-blog-section .home-articles .blog-area-text { padding: var(--v2-sp-5) var(--v2-sp-5); }
body#outside .v2-blog-section .home-articles .blog-area-text h2 {
    font-family: var(--v2-f-dis);
    font-size: 20px;
    font-weight: 700;
    line-height: var(--v2-lh-tight);
    margin: 0 0 8px;
    color: var(--v2-ink);
}
body#outside .v2-blog-section .home-articles .blog-area-text p {
    color: var(--v2-ink-dim);
    font-size: 13px;
    line-height: var(--v2-lh-body);
    margin: 0;
}
body#outside .v2-blog-section .blog-three {
    display: flex;
    flex-direction: column;
    gap: var(--v2-sp-3);
}
body#outside .v2-blog-section .blog-three > a {
    flex: 1;
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-md);
    overflow: hidden;
    display: flex;
    flex-direction: row;
    min-height: 100px;
    text-decoration: none !important;
    color: inherit;
    transition: border-color var(--v2-t-base), transform var(--v2-t-base), background var(--v2-t-base);
}
body#outside .v2-blog-section .blog-three > a:hover {
    border-color: var(--v2-line-strong);
    transform: translateY(-2px);
    background: var(--v2-glass-2);
}
body#outside .v2-blog-section .blog-three .blog-body {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 0;
    width: 100%;
}
body#outside .v2-blog-section .blog-three .blog-image { aspect-ratio: auto; height: 100%; }
body#outside .v2-blog-section .blog-three .blog-image img { width: 100%; height: 100%; object-fit: cover; }
body#outside .v2-blog-section .blog-three .blog-date {
    top: 8px;
    left: 8px;
    padding: var(--v2-sp-1) var(--v2-sp-2);
    font-size: 11px;
}
body#outside .v2-blog-section .blog-three .blog-area-text { padding: var(--v2-sp-3) var(--v2-sp-4); display: flex; flex-direction: column; justify-content: center; }
body#outside .v2-blog-section .blog-three .blog-area-text h2 {
    font-size: 14px;
    line-height: 1.3;
    margin: 0 0 4px;
}
body#outside .v2-blog-section .blog-three .blog-area-text p {
    font-size: 12px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
body#outside .v2-blog-section .btn.btn-primary.mt-5 {
    margin: 40px auto 0 !important;
    display: inline-flex;
    height: 48px;
    padding: 0 var(--v2-sp-6);
    border-radius: var(--v2-r-pill);
    font-size: 14px;
    text-align: center;
    justify-content: center;
}
body#outside .v2-blog-section .container { text-align: center; }
body#outside .v2-blog-section .row { text-align: left; }

/* ============================================================
 *  v2 payments strip — clean pills with Remix icons (no logos)
 * ============================================================ */
body#outside .v2-payments-section { padding: 60px 0 !important; position: relative; z-index: 2; }
body#outside .v2-payments-row {
    display: flex;
    justify-content: center;
    gap: var(--v2-sp-2);
    flex-wrap: wrap;
    max-width: 1100px;
    margin: 0 auto;
}
body#outside .v2-pay-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-2);
    padding: var(--v2-sp-3) var(--v2-sp-5);
    background: var(--v2-glass-2);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-pill);
    font-family: var(--v2-f-dis);
    font-size: 14px;
    font-weight: 600;
    color: var(--v2-ink);
    backdrop-filter: var(--v2-blur);
    -webkit-backdrop-filter: var(--v2-blur);
    transition: border-color var(--v2-t-base), transform var(--v2-t-base), background var(--v2-t-base);
}
body#outside .v2-pay-pill:hover {
    border-color: rgba(255, 214, 10, 0.30);
    background: var(--v2-glass-3);
    transform: translateY(-2px);
}
body#outside .v2-pay-pill > i {
    font-size: 20px;
    color: var(--v2-yellow);
}

/* ============================================================
 *  v2 brands strip (legacy social-marks override)
 * ============================================================ */
body#outside #social-marks .brands-area { max-width: 1000px; padding: var(--v2-sp-3) var(--v2-sp-5); }

/* Home header (signin landing hero) */
body#outside .home-header {
    padding: 80px 0 40px;
    position: relative;
    overflow: hidden;
}
body#outside .home-header .home-fade {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}
body#outside .home-header .hf-glow {
    position: absolute;
    width: 900px;
    height: 900px;
    top: -250px;
    left: -200px;
    background: radial-gradient(circle, var(--v2-yellow-soft), transparent 70%);
    filter: blur(100px);
}
body#outside .home-images {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    overflow: hidden;
    opacity: 0.6;
}
body#outside .home-hero--image { position: absolute; }
body#outside .home-hero--image.left { top: 20%; left: -80px; max-width: 320px; }
body#outside .home-hero--image.right { bottom: 15%; right: -60px; max-width: 340px; }
body#outside .home-hero--image img { width: 100%; height: auto; display: block; }
body#outside .home-hero--image.floating {
    animation: v2-float 8s ease-in-out infinite;
}
@keyframes v2-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

body#outside .home-content-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-2);
    padding: var(--v2-sp-1) var(--v2-sp-3);
    border-radius: var(--v2-r-pill);
    background: var(--v2-yellow-soft);
    border: 1px solid rgba(255, 214, 10, 0.30);
    color: var(--v2-yellow);
    font-family: var(--v2-f-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 20px;
}
body#outside .home-content-badge .icon { font-size: 14px; }

body#outside .home-content h2 {
    font-family: var(--v2-f-dis);
    font-size: var(--v2-fs-fluid-3);
    font-weight: 800;
    line-height: var(--v2-lh-tight);
    color: var(--v2-ink);
    margin: 0 0 20px;
}
body#outside .home-content h2 .primary-color { color: var(--v2-yellow); }
body#outside .home-content p {
    color: var(--v2-ink-dim);
    font-size: 14px;
    line-height: 1.7;
    max-width: 540px;
    margin: 0 0 24px;
}
body#outside .home-content .btn.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-2);
    padding: 0 var(--v2-sp-6);
    height: 50px;
    border-radius: var(--v2-r-pill);
    font-family: var(--v2-f-dis);
    font-weight: 600;
    font-size: 14px;
    background: var(--v2-yellow);
    color: var(--v2-yellow-ink);
    border: 0;
    text-decoration: none !important;
    transition: background var(--v2-t-fast), transform var(--v2-t-fast), box-shadow var(--v2-t-base);
}
body#outside .home-content .btn.btn-primary:hover {
    background: #ffe24a;
    transform: translateY(-1px);
    box-shadow: 0 12px 30px -10px var(--v2-yellow-glow);
}
body#outside .home-content .btn-signup,
body#outside .btn.btn-signup {
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-2);
    padding: 0 var(--v2-sp-6);
    height: 50px;
    border-radius: var(--v2-r-pill);
    font-family: var(--v2-f-dis);
    font-weight: 600;
    font-size: 14px;
    background: var(--v2-glass-2);
    color: var(--v2-ink);
    border: 1px solid var(--v2-line-strong);
    text-decoration: none !important;
    transition: background var(--v2-t-fast);
}
body#outside .home-content .btn-signup:hover,
body#outside .btn.btn-signup:hover {
    background: var(--v2-glass-3);
    color: var(--v2-ink);
}

/* Social marks strip (platform icons row) */
body#outside #social-marks {
    padding: var(--v2-sp-7) 0 var(--v2-sp-2);
    position: relative;
    z-index: 2;
}
body#outside .brands-area {
    max-width: 1240px;
    margin: 0 auto;
    padding: var(--v2-sp-4) var(--v2-sp-6);
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-lg);
    backdrop-filter: var(--v2-blur);
    -webkit-backdrop-filter: var(--v2-blur);
}
body#outside .brands-top-active {
    display: flex;
    flex-wrap: wrap;
    gap: var(--v2-sp-2);
    justify-content: center;
}
body#outside .brands-item {
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-2);
    padding: var(--v2-sp-2) var(--v2-sp-4);
    background: var(--v2-glass-2);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-pill);
    color: var(--v2-ink-dim);
    font-family: var(--v2-f-dis);
    font-size: 13px;
    font-weight: 500;
    transition: background var(--v2-t-fast), color var(--v2-t-fast), transform var(--v2-t-fast);
}
body#outside .brands-item:hover {
    background: var(--v2-glass-3);
    color: var(--v2-ink);
    transform: translateY(-2px);
}
body#outside .brands-icon {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--v2-yellow-soft);
    color: var(--v2-yellow);
    font-size: 12px;
}

/* Counter section */
body#outside .m-counter { padding: 40px 0; }
body#outside .infoDetail {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--v2-sp-4);
}
@media (max-width: 700px) {
    body#outside .infoDetail { grid-template-columns: 1fr; }
}
body#outside .infoDetail .item {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-3);
    padding: var(--v2-sp-4) var(--v2-sp-5);
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-md);
    backdrop-filter: var(--v2-blur);
    -webkit-backdrop-filter: var(--v2-blur);
}
body#outside .infoDetail .item .icon {
    width: 80px;
    height: 80px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
body#outside .infoDetail .item .icon lottie-player { max-width: 80px; max-height: 80px; }
body#outside .infoDetail .item .text {
    font-family: var(--v2-f-dis);
    font-size: 26px;
    font-weight: 800;
    color: var(--v2-ink);
    line-height: var(--v2-lh-tight);
}
body#outside .infoDetail .item .text > span { display: flex; align-items: center; gap: var(--v2-sp-2); }
body#outside .infoDetail .item .text small {
    display: block;
    font-family: var(--v2-f-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--v2-ink-mute);
    margin-top: 4px;
    font-weight: 500;
}
body#outside .infoDetail .blob.blob-red {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--v2-danger);
    box-shadow: 0 0 10px var(--v2-danger);
    animation: v2-pulse 2s infinite;
}
@keyframes v2-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.7; }
}

/* Home feature cards (4-up grid) */
body#outside .home-1-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--v2-sp-3);
    margin: 0;
}
@media (max-width: 991px) { body#outside .home-1-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { body#outside .home-1-cards { grid-template-columns: 1fr; } }
body#outside .home-1-cards > [class*="col-"] { padding: 0; }
body#outside .home-1-card {
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-lg);
    padding: 0;
    height: 100%;
    transition: border-color var(--v2-t-fast), transform var(--v2-t-fast), background var(--v2-t-fast);
}
body#outside .home-1-card:hover {
    border-color: var(--v2-line-strong);
    transform: translateY(-4px);
    background: var(--v2-glass-2);
}
body#outside .home-1-card .card-body { padding: var(--v2-sp-6); }
body#outside .home-1-card .icon-box {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--v2-r-sm);
    background: var(--v2-yellow-soft);
    color: var(--v2-yellow);
    font-size: 20px;
    margin-bottom: 16px;
}
body#outside .home-1-title {
    font-family: var(--v2-f-dis);
    font-size: 20px;
    font-weight: 700;
    color: var(--v2-ink);
    margin: 0 0 6px;
}
body#outside .home-1-text {
    color: var(--v2-ink-dim);
    font-size: 13px;
    line-height: var(--v2-lh-body);
    margin: 0;
}

/* Generic h-section spacing */
body#outside .h-section { padding: 48px 0; }
body#outside .h-section.section-0 { padding: var(--v2-sp-6) 0; }

/* FAQ page */
body#outside .faq-ss-tabs { margin: 16px 0; }
body#outside .faq-ss-tabs .home-ss-tab {
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-md);
    padding: var(--v2-sp-3) var(--v2-sp-4);
    margin-bottom: 8px;
    transition: border-color var(--v2-t-fast);
}
body#outside .faq-ss-tabs .home-ss-tab:hover { border-color: var(--v2-line-strong); }
body#outside .faq-ss-tabs .ss-tab-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    gap: var(--v2-sp-3);
}
body#outside .faq-ss-tabs .ss-tab-head .text {
    font-family: var(--v2-f-dis);
    font-weight: 600;
    font-size: 14px;
    color: var(--v2-ink);
    flex: 1;
}
body#outside .faq-ss-tabs .ss-tab-head .right-p { color: var(--v2-yellow); font-size: 20px; }
body#outside .faq-ss-tabs .ss-tab-body {
    padding-top: var(--v2-sp-3);
    margin-top: 12px;
    border-top: 1px dashed var(--v2-line);
    color: var(--v2-ink-dim);
    font-size: 13px;
    line-height: 1.7;
}

/* Terms / About — generic content wrappers */
body#outside .page-outside,
body#dash .page-outside { max-width: 1240px; margin: 0 auto; padding: 0 var(--v2-sp-2); }

/* Read-before list (neworder right panel + faq) */
body#dash .read-before-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--v2-sp-2);
}
body#dash .read-before-list li {
    padding: var(--v2-sp-3) var(--v2-sp-3);
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-sm);
    color: var(--v2-ink-dim);
    font-size: 13px;
    line-height: var(--v2-lh-body);
}

/* faq.twig nav-item button width (was inline <style>) */
body#outside .nav-item button,
body#dash .nav-item button { width: 100%; }

/* Signin landing — hero CTA gap (was inline style="gap:10px") */
body#outside .home-ctas {
    display: flex;
    gap: var(--v2-sp-2);
    flex-wrap: wrap;
    padding-top: var(--v2-sp-5);
}

/* ============================================================
 *  updates.twig — service-update feed
 * ============================================================ */
body#dash .updates-item-wrapper,
body#outside .updates-item-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--v2-sp-2);
}
body#dash .updates-item,
body#outside .updates-item {
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-md);
    padding: var(--v2-sp-3) var(--v2-sp-4);
    transition: border-color var(--v2-t-fast), background var(--v2-t-fast);
}
body#dash .updates-item:hover,
body#outside .updates-item:hover {
    background: var(--v2-glass-2);
    border-color: var(--v2-line-strong);
}
body#dash .updates-item-top,
body#outside .updates-item-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--v2-sp-3);
    padding-bottom: var(--v2-sp-2);
    margin-bottom: 10px;
    border-bottom: 1px dashed var(--v2-line);
    flex-wrap: wrap;
}
body#dash .uit-first,
body#outside .uit-first { display: flex; align-items: center; gap: var(--v2-sp-3); flex: 1; min-width: 0; flex-wrap: wrap; }
body#dash .updates-id,
body#outside .updates-id {
    font-family: var(--v2-f-mono);
    font-size: 11px;
    font-weight: 700;
    color: var(--v2-yellow);
    background: var(--v2-yellow-soft);
    padding: var(--v2-sp-1) var(--v2-sp-2);
    border-radius: var(--v2-r-xs);
    flex-shrink: 0;
}
body#dash .updates-title,
body#outside .updates-title {
    color: var(--v2-ink);
    font-family: var(--v2-f-dis);
    font-weight: 600;
    font-size: 13px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
body#dash .uit-last .btn,
body#outside .uit-last .btn {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    background: var(--v2-glass-2);
    border: 1px solid var(--v2-line);
    color: var(--v2-yellow);
}
body#dash .uit-last .btn:hover,
body#outside .uit-last .btn:hover { background: var(--v2-yellow-soft); color: var(--v2-yellow); }

body#dash .updates-item-bottom,
body#outside .updates-item-bottom {
    display: flex;
    justify-content: space-between;
    gap: var(--v2-sp-3);
    flex-wrap: wrap;
    font-family: var(--v2-f-mono);
    font-size: 12px;
    color: var(--v2-ink-mute);
    align-items: center;
}
body#dash .uib-first span,
body#outside .uib-first span { display: inline-flex; align-items: center; gap: var(--v2-sp-1); }
body#dash .uib-first .added,
body#outside .uib-first .added { color: var(--v2-ok-text); }
body#dash .uib-first .removed,
body#outside .uib-first .removed { color: var(--v2-danger-text); }
body#dash .uib-first .decreased,
body#outside .uib-first .decreased { color: var(--v2-ok-text); }
body#dash .uib-first .increased,
body#outside .uib-first .increased { color: var(--v2-warn-text); }
body#dash .uib-last span,
body#outside .uib-last span { color: var(--v2-ink-dim); font-family: var(--v2-f-dis); font-weight: 600; font-size: 12px; }

/* ============================================================
 *  childpanel.twig + childpanel_order.twig
 * ============================================================ */
body#dash .child-item {
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-md);
    padding: var(--v2-sp-4) var(--v2-sp-4);
    transition: border-color var(--v2-t-fast), background var(--v2-t-fast);
}
body#dash .child-item:hover {
    background: var(--v2-glass-2);
    border-color: var(--v2-line-strong);
}
body#dash .child-item-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--v2-sp-3);
    padding-bottom: var(--v2-sp-2);
    margin-bottom: 10px;
    border-bottom: 1px dashed var(--v2-line);
    flex-wrap: wrap;
}
body#dash .cit-first { flex: 1; min-width: 0; }
body#dash .child-title {
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-2);
    font-family: var(--v2-f-dis);
    font-weight: 700;
    color: var(--v2-ink);
    font-size: 14px;
}
body#dash .child-title > i {
    color: var(--v2-yellow);
    font-size: 16px;
}
body#dash .child-item-bottom {
    display: flex;
    justify-content: space-between;
    gap: var(--v2-sp-3);
    flex-wrap: wrap;
    font-family: var(--v2-f-mono);
    font-size: 12px;
    color: var(--v2-ink-mute);
    align-items: center;
}
body#dash .cib-first {
    display: flex;
    gap: var(--v2-sp-4);
    flex-wrap: wrap;
    align-items: center;
}
body#dash .cib-first .item {
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-1);
}
body#dash .cib-first .item strong {
    color: var(--v2-ink-dim);
    font-family: var(--v2-f-dis);
    font-weight: 600;
    font-size: 12px;
}
body#dash .cib-first .item span:last-child {
    color: var(--v2-ink);
    font-family: var(--v2-f-dis);
    font-weight: 600;
    font-size: 12px;
}

/* ============================================================
 *  refunds.twig — Bootstrap 3-style refunds list
 * ============================================================ */
/* A48 · body#dash เอาออกจากลิสต์ — โทน info ของฝั่ง authed มาจากบล็อก A48 แล้ว
   กฎนี้เก็บไว้ให้ refunds.twig ฝั่ง guest เหมือนเดิม */
body#outside .alert-info {
    background: var(--v2-yellow-soft) !important;
    border-color: rgba(255, 214, 10, 0.25) !important;
    color: var(--v2-ink) !important;
}
body#dash .btn.btn-default,
body#outside .btn.btn-default {
    background: var(--v2-glass-2);
    border: 1px solid var(--v2-line-strong);
    color: var(--v2-ink);
    padding: var(--v2-sp-2) var(--v2-sp-4);
    border-radius: var(--v2-r-sm);
    font-family: var(--v2-f-dis);
    font-weight: 600;
    font-size: 14px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--v2-t-fast);
}
body#dash .btn.btn-default:hover,
body#outside .btn.btn-default:hover { background: var(--v2-glass-3); }

/* Bootstrap 3 well-float used in refunds */
body#dash .well.well-float,
body#outside .well.well-float {
    margin-top: 14px;
    padding: var(--v2-sp-1);
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-lg);
    box-shadow: none;
    overflow-x: auto;
}

/* Bootstrap 3 nav-pills used on refunds (with pull-right search) */
body#dash ul.nav.nav-pills .pull-right,
body#outside ul.nav.nav-pills .pull-right {
    margin-left: auto;
    list-style: none;
}
body#dash ul.nav.nav-pills .pull-right form,
body#outside ul.nav.nav-pills .pull-right form {
    display: flex;
    gap: var(--v2-sp-1);
    margin: 0;
}
body#dash ul.nav.nav-pills .pull-right .form-control {
    height: 40px;
    padding: 0 var(--v2-sp-3);
    border-radius: var(--v2-r-pill);
    font-size: 13px;
}
body#dash ul.nav.nav-pills .pull-right .btn {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
}

/* ============================================================
 *  confirmsemail.twig
 * ============================================================ */
body#dash .confirm-email__description,
body#outside .confirm-email__description {
    font-size: 14px;
    color: var(--v2-ink-dim);
    line-height: 1.7;
    text-align: center;
    padding: var(--v2-sp-5) var(--v2-sp-3);
}
body#dash .confirm-email__description div + div {
    margin-top: 8px;
    color: var(--v2-ink);
    font-weight: 500;
}
body#dash .confirm-email__action,
body#outside .confirm-email__action {
    display: flex;
    justify-content: center;
    gap: var(--v2-sp-2);
    flex-wrap: wrap;
    padding: var(--v2-sp-2) 0;
}

/* ============================================================
 *  account.twig — change-email modal + password fields
 * ============================================================ */
body#dash span.form-control[disabled] {
    background: var(--v2-glass-2);
    color: var(--v2-ink-dim);
    font-family: var(--v2-f-mono);
    cursor: default;
    display: flex;
    align-items: center;
    min-height: 46px;
    padding: var(--v2-sp-3) var(--v2-sp-3);
}

/* ============================================================
 *  blogs.twig + blogpost.twig — article cards
 * ============================================================ */
body#outside .h-section.bps .container { max-width: 960px; }
body#outside .blog-item,
body#dash .blog-item {
    display: block;
    padding: var(--v2-sp-4);
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-lg);
    margin-bottom: 14px;
    text-decoration: none !important;
    color: var(--v2-ink);
    transition: background var(--v2-t-fast), border-color var(--v2-t-fast), transform var(--v2-t-fast);
}
body#outside .blog-item:hover,
body#dash .blog-item:hover {
    background: var(--v2-glass-2);
    border-color: var(--v2-line-strong);
    transform: translateY(-2px);
}

/* blogpost image (was inline style) */
body#outside .blogpost-img,
body#dash .blogpost-img {
    border-radius: var(--v2-r-md);
    max-width: 700px;
    margin: 0 auto;
    display: block;
}

/* blog cards */
body#outside .card.blog-card,
body#dash .card.blog-card {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: border-color var(--v2-t-fast), transform var(--v2-t-fast), background var(--v2-t-fast);
}
body#outside .card.blog-card:hover,
body#dash .card.blog-card:hover {
    border-color: var(--v2-line-strong);
    transform: translateY(-4px);
    background: var(--v2-glass-2);
}
body#outside .blog-image,
body#dash .blog-image {
    aspect-ratio: 16 / 9;
    background: var(--v2-glass-2);
    overflow: hidden;
    position: relative;
}
body#outside .blog-image img,
body#dash .blog-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
body#outside .blog-content,
body#dash .blog-content { padding: var(--v2-sp-4); display: flex; flex-direction: column; gap: var(--v2-sp-2); }
body#outside .blog-title,
body#dash .blog-title {
    font-family: var(--v2-f-dis);
    font-size: 16px;
    font-weight: 700;
    line-height: var(--v2-lh-tight);
    margin: 0;
}
body#outside .blog-title a,
body#dash .blog-title a { color: var(--v2-ink); text-decoration: none !important; }
body#outside .blog-title a:hover,
body#dash .blog-title a:hover { color: var(--v2-yellow); }
body#outside .blog-date,
body#dash .blog-date {
    font-family: var(--v2-f-mono);
    font-size: 11px;
    color: var(--v2-ink-mute);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
body#outside .blog-card .btn.btn-sm,
body#dash .blog-card .btn.btn-sm {
    align-self: flex-start;
    margin-top: 4px;
}

/* Child panel extras (card-child, child-support, cs-image) */
body#dash .card.card-child,
body#outside .card.card-child {
    padding: var(--v2-sp-4);
    background: linear-gradient(135deg, var(--v2-yellow-soft), rgba(122, 91, 255, 0.10));
    border: 1px solid rgba(255, 214, 10, 0.30);
    border-radius: var(--v2-r-lg);
    margin-top: 10px;
}
body#dash .child-support,
body#outside .child-support {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-4);
    color: var(--v2-ink);
    font-size: 13px;
}
body#dash .cs-image,
body#outside .cs-image {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: var(--v2-r-md);
    background: var(--v2-yellow);
    color: var(--v2-yellow-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    box-shadow: 0 6px 16px -4px var(--v2-yellow-glow);
}
body#dash .cs-text,
body#outside .cs-text { flex: 1; min-width: 0; }
body#dash .cs-text h4,
body#outside .cs-text h4 {
    font-family: var(--v2-f-dis);
    font-size: 16px;
    font-weight: 700;
    color: var(--v2-ink);
    margin: 0 0 4px;
}
body#dash .cs-text p,
body#outside .cs-text p {
    font-size: 12px;
    color: var(--v2-ink-dim);
    margin: 0 0 10px;
    line-height: 1.5;
}

/* Nameservers block (used by child panel setup) */
body#dash .nameservers,
body#outside .nameservers {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--v2-sp-2);
    padding: var(--v2-sp-3);
    background: var(--v2-glass-2);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-sm);
    font-family: var(--v2-f-mono);
    font-size: 13px;
    color: var(--v2-ink);
}

/* fw-600 utility (used in some pages) */
body#dash .fw-600 { font-weight: 600; }

/* "first" modifier on some pills */
body#dash .first,
body#outside .first { font-weight: 700; }

/* d-icon (used for info badges) */
body#dash .d-icon,
body#outside .d-icon {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--v2-yellow-soft);
    color: var(--v2-yellow);
    font-size: 12px;
}
body#dash .d-icon.i-info::before,
body#outside .d-icon.i-info::before { content: "i"; font-family: var(--v2-f-dis); font-weight: 700; }
body#dash .me-2, body#outside .me-2 { margin-right: 8px; }

/* ============================================================
 *  Misc utility — align with legacy classes used in twigs
 * ============================================================ */
body#dash .mr-1 { margin-right: 4px; }
body#dash .mr-2 { margin-right: 8px; }
body#dash .pl-1 { padding-left: var(--v2-sp-1); }
body#dash .pl-2 { padding-left: var(--v2-sp-2); }
body#dash .pr-1 { padding-right: var(--v2-sp-1); }
body#dash .pr-2 { padding-right: var(--v2-sp-2); }
/* `body#dash .mt-3 { margin-top: 12px }` was here and could never have worked:
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */
body#dash .mt-4 { margin-top: 16px; }
body#dash .mt-5 { margin-top: 20px; }
body#dash .mb-3 { margin-bottom: 12px !important; }
body#dash .mb-4 { margin-bottom: 16px !important; }
body#dash .mb-5 { margin-bottom: 20px !important; }
body#dash .primary-color { color: var(--v2-yellow-text) !important; }

/* input-group-btn (Bootstrap 3 search combo) */
body#dash .input-group-btn { display: inline-flex; align-items: stretch; }

/* ============================================================
 *  v3 Apple-grade polish pass — signin.twig (2026-04-25)
 *  Restored after accidental delete (R7).
 *  Premium SaaS rhythm, depth, motion — additive overrides only.
 * ============================================================ */

/* ---------- HERO: halo, bigger floats, confident CTAs, trust strip, scroll cue ---------- */

body#outside .v2-hero {
    padding-top: 140px;
    padding-bottom: 150px;
    isolation: isolate;
}
body#outside .v2-hero::before {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    translate: -50% -50%;
    width: min(1100px, 92vw);
    aspect-ratio: 1 / 1;
    background:
        radial-gradient(closest-side, rgba(255, 214, 10, 0.17), transparent 70%),
        radial-gradient(closest-side, rgba(255, 214, 10, 0.06) 40%, transparent 75%);
    filter: blur(40px);
    pointer-events: none;
    z-index: 0;
}
body#outside .v2-hero::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 44px;
    translate: -50% 0;
    width: 1px;
    height: 58px;
    background: linear-gradient(180deg, transparent, var(--v2-yellow) 38%, transparent);
    animation: v3-scroll-cue 2.4s ease-in-out infinite;
    opacity: 0.65;
    pointer-events: none;
    z-index: 2;
}
@keyframes v3-scroll-cue {
    0%   { transform: translateY(-14px); opacity: 0; }
    40%  { opacity: 0.85; }
    100% { transform: translateY(14px); opacity: 0; }
}
@media (max-width: 991px) {
    body#outside .v2-hero::after { display: none; }
}

body#outside .v2-hero-floats .vf {
    padding: var(--v2-sp-5) var(--v2-sp-6);
    border-radius: var(--v2-r-lg);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)),
        var(--v2-glass-2);
    box-shadow: var(--v2-elev-2),
        inset 0 0 0 1px rgba(255, 255, 255, 0.06);
    min-width: 230px;
    /* keep `position: absolute` from the base rule above — earlier this was
       overridden to `position: relative` and dropped all 4 floats into the
       normal flow stacked at top-left of .v2-hero-floats. */
    position: absolute;
    isolation: isolate;
}
body#outside .v2-hero-floats .vf::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(255, 214, 10, 0.14), transparent 40%);
    pointer-events: none;
    z-index: -1;
    opacity: 0.9;
}
body#outside .v2-hero-floats .vf-v { font-size: 26px; }
/* R21 (2026-04-26): adopted positions/rotations from smm-panel 4/project/index-v2a.html
   to give floats more breathing room from the top edge — earlier values clipped on
   shorter desktop heights. */
body#outside .v2-hero-floats .vf-1 { top: 14%; left: 6%;  width: 260px; transform: rotate(-6deg); }
body#outside .v2-hero-floats .vf-2 { top: 20%; right: 7%; width: 230px; transform: rotate(5deg); }
body#outside .v2-hero-floats .vf-3 { bottom: 18%; left: 10%; width: 280px; transform: rotate(4deg); }
body#outside .v2-hero-floats .vf-4 { bottom: 22%; right: 9%; width: 240px; transform: rotate(-4deg); }
@media (max-width: 900px) {
    body#outside .v2-hero-floats .vf { display: none; }
}

/* R22 — Thai-friendly hero accent + line-height fix (2026-04-26)
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */
body#outside .v2-hero-h1,
body#outside .v2-hero-h1 .v2-hero-accent {
    line-height: var(--v2-lh-tight);
}
body#outside .v2-hero-accent {
    display: inline-block;
    font-family: var(--v2-f-dis);
    font-style: normal;
    font-weight: 800;
    letter-spacing: inherit;
    background: linear-gradient(180deg, #ffe24a 0%, var(--v2-yellow) 55%, var(--v2-yellow-2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    padding-right: 0.04em;
    filter: drop-shadow(0 10px 28px rgba(255, 214, 10, 0.28));
}

/* The hero accent is painted with background-clip:text, so its computed colour
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */
html.light body#outside .v2-hero-accent {
    background: linear-gradient(180deg, #a87800 0%, #8f6400 55%, #6e4c00 100%);
    -webkit-background-clip: text;
    background-clip: text;
    filter: none;
}

body#outside .v2-hero-floats .vf-bars { height: 66px; }
body#outside .v2-hero-floats .vf-bars i {
    border-radius: 4px 4px 2px 2px;
    background: linear-gradient(180deg, var(--v2-yellow), var(--v2-yellow-2));
    box-shadow: 0 0 12px -2px var(--v2-yellow-glow);
}

body#outside .v2-hero-h1 {
    font-size: var(--v2-fs-fluid-4);
    line-height: 0.92;
}
body#outside .v2-hero-h1 i {
    display: inline-block;
    background: linear-gradient(180deg, #ffe24a 0%, var(--v2-yellow) 55%, var(--v2-yellow-2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    padding-right: 0.04em;
    filter: drop-shadow(0 10px 28px rgba(255, 214, 10, 0.28));
}
body#outside .v2-hero-sub { margin-top: 32px; font-size: 20px; letter-spacing: 0; }

body#outside .v2-hero-cta { margin-top: 44px; gap: var(--v2-sp-3); }
body#outside .v2-hero-cta .pill {
    height: 60px;
    padding: 0 34px;
    font-size: 16px;
    font-weight: 600;
    border-radius: var(--v2-r-pill);
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-2);
    transition: transform var(--v2-t-base) var(--v2-ease), box-shadow var(--v2-t-base), background var(--v2-t-base);
}
body#outside .v2-hero-cta .pill.pill-y {
    background: linear-gradient(180deg, #ffe24a, var(--v2-yellow));
    color: var(--v2-yellow-ink);
    box-shadow:
        0 20px 40px -12px var(--v2-yellow-glow),
        inset 0 -2px 0 rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
body#outside .v2-hero-cta .pill.pill-y:hover {
    transform: translateY(-2px);
    box-shadow:
        0 28px 52px -12px var(--v2-yellow-glow),
        inset 0 -2px 0 rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
body#outside .v2-hero-cta .pill.pill-g {
    background: var(--v2-glass-2);
    color: var(--v2-ink);
    border: 1px solid var(--v2-line-strong);
    backdrop-filter: var(--v2-blur);
    -webkit-backdrop-filter: var(--v2-blur);
}
body#outside .v2-hero-cta .pill.pill-g:hover {
    transform: translateY(-2px);
    background: var(--v2-glass-3);
}

body#outside .v2-hero-inner::after {
    content: "NO CREDIT CARD  ·  30-SEC SIGNUP  ·  มีประกัน เคลมฟรี";
    display: block;
    margin: 32px auto 0;
    font-family: var(--v2-f-mono);
    font-size: 11px;
    letter-spacing: 0.26em;
    color: var(--v2-ink-mute);
    text-transform: uppercase;
}


/* ---------- SPLIT stats + login ---------- */

body#outside .v2-split-wrap {
    padding: 56px 52px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)),
        var(--v2-glass-2);
    box-shadow: var(--v2-elev-3),
        inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}
body#outside .v2-split-wrap::after {
    content: "";
    position: absolute;
    bottom: -80px;
    left: -80px;
    width: 360px;
    height: 360px;
    background: radial-gradient(circle, rgba(255, 214, 10, 0.08), transparent 70%);
    filter: blur(50px);
    pointer-events: none;
}
@media (max-width: 900px) {
    body#outside .v2-split-wrap { padding: var(--v2-sp-7) var(--v2-sp-6); }
}
body#outside .v2-split-title {
    font-size: var(--v2-fs-fluid-2);
}
body#outside .v2-split-metrics {
    grid-template-columns: 1fr 1fr;
    gap: var(--v2-sp-4);
    margin-bottom: 28px;
}
body#outside .v2-split-metrics .m {
    padding: var(--v2-sp-5) var(--v2-sp-5);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)),
        var(--v2-glass);
    border-radius: var(--v2-r-md);
    transition: border-color var(--v2-t-base), transform var(--v2-t-base), background var(--v2-t-base);
}
body#outside .v2-split-metrics .m:hover {
    border-color: rgba(255, 214, 10, 0.30);
    transform: translateY(-2px);
}
body#outside .v2-split-metrics .n {
    font-size: 44px;
    line-height: 1;
    background: linear-gradient(180deg, #ffffff 0%, #c7c7ce 95%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
html.light body#outside .v2-split-metrics .n {
    background: linear-gradient(180deg, #141417 0%, #46464c 95%);
    -webkit-background-clip: text;
    background-clip: text;
}
body#outside .v2-split-metrics .m:nth-child(1) .n,
body#outside .v2-split-metrics .m:nth-child(3) .n {
    background: linear-gradient(180deg, #ffe24a 0%, var(--v2-yellow) 55%, var(--v2-yellow-2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
body#outside .v2-split-metrics .l {
    font-size: 11px;
    letter-spacing: 0.16em;
    margin-top: 10px;
}
body#outside .v2-split-rating {
    padding: var(--v2-sp-3) var(--v2-sp-4);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)),
        var(--v2-glass);
    border-color: var(--v2-line-strong);
}
body#outside .v2-split-right .login-card {
    padding: var(--v2-sp-6);
    border-radius: var(--v2-r-lg);
    transition: border-color var(--v2-t-base), box-shadow var(--v2-t-base);
}
body#outside .v2-split-right .login-card:focus-within {
    border-color: rgba(255, 214, 10, 0.35);
    box-shadow: 0 0 0 4px rgba(255, 214, 10, 0.08);
}


/* ---------- BRANDS marquee ---------- */

body#outside .v2-brands-section { padding: 60px 0 !important; overflow: hidden; }
body#outside .v2-brands-row {
    max-width: 100%;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow: hidden;
    padding: var(--v2-sp-1) 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
body#outside .v2-brands-track {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    align-items: center;
    gap: var(--v2-sp-3);
    flex-shrink: 0;
    animation: v3-marquee 36s linear infinite;
    padding-right: var(--v2-sp-3);
}
body#outside .v2-brands-row:hover .v2-brands-track { animation-play-state: paused; }
@keyframes v3-marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
body#outside .v2-brands-section .v2-brand { flex-shrink: 0; }


/* ---------- FEATURE stack ---------- */

body#outside .v2-feat {
    padding: var(--v2-sp-7) var(--v2-sp-6) var(--v2-sp-7);
    min-height: 320px;
    transition: border-color var(--v2-t-base), background var(--v2-t-base), transform var(--v2-t-base), box-shadow var(--v2-t-base);
}
body#outside .v2-feat::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(460px circle at 50% 115%, rgba(255, 214, 10, 0.10), transparent 60%);
    opacity: 0;
    transition: opacity var(--v2-t-base);
    pointer-events: none;
}
body#outside .v2-feat:hover::after { opacity: 1; }
body#outside .v2-feat:hover { box-shadow: var(--v2-elev-3); }
body#outside .v2-feat > * { position: relative; z-index: 1; }
body#outside .v2-feat .v2-feat-ic {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--v2-r-sm);
    background: var(--v2-yellow-soft);
    color: var(--v2-yellow);
    font-size: 20px;
    margin-bottom: 18px;
    border: 1px solid rgba(255, 214, 10, 0.18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
body#outside .v2-feat-big .v2-feat-ic {
    width: 52px;
    height: 52px;
    font-size: 26px;
    border-radius: var(--v2-r-md);
    background: rgba(255, 214, 10, 0.16);
    margin-bottom: 22px;
}
body#outside .v2-feat h3 { font-size: 26px; letter-spacing: 0; line-height: var(--v2-lh-tight); }
body#outside .v2-feat-big h3 { font-size: 34px; letter-spacing: 0; line-height: var(--v2-lh-tight); }
body#outside .v2-feat p { font-size: 14px; }
body#outside .v2-feat-big {
    padding: 44px 40px 40px;
    background:
        radial-gradient(620px circle at 100% 0%, rgba(255, 214, 10, 0.22), transparent 55%),
        linear-gradient(180deg, rgba(255, 214, 10, 0.08), rgba(255, 214, 10, 0.02));
    border-color: rgba(255, 214, 10, 0.28);
    box-shadow: 0 40px 80px -30px rgba(255, 214, 10, 0.18);
}
body#outside .v2-feat-big::before {
    content: "";
    position: absolute;
    top: 28px;
    right: 30px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--v2-ok, #28cd41);
    z-index: 2;
    animation: v3-pulse-green 1.8s ease-out infinite;
}
@keyframes v3-pulse-green {
    0%   { box-shadow: 0 0 0 0 rgba(40, 205, 65, 0.55), 0 0 12px #28cd41; }
    70%  { box-shadow: 0 0 0 12px rgba(40, 205, 65, 0), 0 0 12px #28cd41; }
    100% { box-shadow: 0 0 0 0 rgba(40, 205, 65, 0), 0 0 12px #28cd41; }
}
body#outside .v2-feat-code {
    padding: var(--v2-sp-5) var(--v2-sp-5) var(--v2-sp-5);
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.3)),
        #0c0c10;
    border-color: rgba(255, 255, 255, 0.06);
    border-radius: var(--v2-r-md);
    position: relative;
}
body#outside .v2-feat-code::before {
    content: "batch.txt";
    position: absolute;
    top: 10px;
    right: 14px;
    font-family: var(--v2-f-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    color: var(--v2-ink-soft);
    text-transform: uppercase;
}


/* ---------- PRODUCT FRAME ---------- */

body#outside .v2-product-section { position: relative; overflow: hidden; }
body#outside .v2-product-section::before {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    translate: -50% -50%;
    width: 900px;
    height: 600px;
    background: radial-gradient(ellipse, rgba(255, 214, 10, 0.08), transparent 70%);
    filter: blur(60px);
    pointer-events: none;
    z-index: 0;
}
body#outside .v2-product-frame {
    position: relative;
    z-index: 1;
    transform: perspective(1600px) rotateX(2deg);
    transition: transform var(--v2-t-slow) var(--v2-ease);
}
body#outside .v2-product-frame:hover { transform: perspective(1600px) rotateX(0); }
body#outside .v2-product-orders .pr-run { position: relative; padding-left: var(--v2-sp-4); }
body#outside .v2-product-orders .pr-run::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    translate: 0 -50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--v2-yellow);
    animation: v3-pulse-yellow 1.6s ease-out infinite;
}
@keyframes v3-pulse-yellow {
    0%   { box-shadow: 0 0 0 0 rgba(255, 214, 10, 0.5); }
    70%  { box-shadow: 0 0 0 10px rgba(255, 214, 10, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 214, 10, 0); }
}


/* ---------- CTA BLOCK ---------- */

body#outside .v2-cta-block {
    padding: 88px 48px;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(255, 214, 10, 0.35), transparent 55%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)),
        var(--v2-glass-2);
}
body#outside .v2-cta-block h2 { font-size: var(--v2-fs-fluid-3); letter-spacing: 0; }
body#outside .v2-cta-actions .btn.btn-lg { height: 58px; padding: 0 var(--v2-sp-7); font-size: 14px; font-weight: 600; }
body#outside .v2-cta-actions .btn.btn-primary {
    background: linear-gradient(180deg, #ffe24a, var(--v2-yellow));
    color: var(--v2-yellow-ink);
    box-shadow: 0 18px 40px -12px var(--v2-yellow-glow);
    transition: transform var(--v2-t-base) var(--v2-ease), box-shadow var(--v2-t-base);
}
body#outside .v2-cta-actions .btn.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 26px 50px -14px var(--v2-yellow-glow);
}
body#outside .v2-cta-block::after {
    content: "✓ ไม่มีบัตรเครดิต    ·    ✓ ยกเลิกได้ทุกเมื่อ    ·    ✓ ซัพพอร์ต 24 ชม.";
    display: block;
    margin: 36px auto 0;
    font-family: var(--v2-f-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    color: var(--v2-ink-mute);
}


/* ---------- TESTIMONIALS ---------- */

body#outside .v2-reviews-section .c-reviews {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--v2-sp-4);
    max-width: 1200px;
    padding: var(--v2-sp-2) var(--v2-sp-5);
    margin: 0 auto;
    overflow: visible;
}
@media (max-width: 540px) {
    body#outside .v2-reviews-section .c-reviews { grid-template-columns: 1fr; }
}
body#outside .v2-reviews-section .review-item {
    max-width: unset;
    margin: 0;
    padding: 36px var(--v2-sp-6) var(--v2-sp-6);
    min-height: 260px;
    position: relative;
    overflow: hidden;
}
body#outside .v2-reviews-section .review-item::before {
    content: "\201C";
    position: absolute;
    top: -30px;
    left: 16px;
    font-family: var(--v2-f-serif);
    font-style: italic;
    font-size: 130px;
    color: var(--v2-yellow);
    opacity: 0.14;
    line-height: 1;
    pointer-events: none;
}
body#outside .v2-reviews-section .review-item .text p { font-size: 14px; line-height: var(--v2-lh-body); }
body#outside .v2-reviews-section .review-item .head { margin-bottom: 18px; padding-bottom: var(--v2-sp-4); }


/* ---------- v3 polish: LIGHT MODE overrides ---------- */

html.light body#outside .v2-hero-floats .vf {
    background:
        linear-gradient(180deg, rgba(18, 18, 20, 0.04), rgba(18, 18, 20, 0.01)),
        var(--v2-glass-2);
    box-shadow: var(--v2-elev-2),
        inset 0 0 0 1px rgba(0, 0, 0, 0.04);
}
html.light body#outside .v2-hero-floats .vf::before {
    background: linear-gradient(135deg, rgba(255, 200, 0, 0.18), transparent 40%);
}
html.light body#outside .v2-hero-cta .pill.pill-y {
    box-shadow:
        0 16px 32px -12px rgba(255, 200, 0, 0.45),
        inset 0 -2px 0 rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
html.light body#outside .v2-split-wrap {
    background:
        linear-gradient(180deg, rgba(18, 18, 20, 0.03), rgba(18, 18, 20, 0.01)),
        var(--v2-glass-2);
    box-shadow: var(--v2-elev-3),
        inset 0 0 0 1px rgba(0, 0, 0, 0.04);
}
html.light body#outside .v2-split-metrics .m {
    background:
        linear-gradient(180deg, rgba(18, 18, 20, 0.03), rgba(18, 18, 20, 0.01)),
        var(--v2-glass);
}
html.light body#outside .v2-split-rating {
    background:
        linear-gradient(180deg, rgba(18, 18, 20, 0.03), rgba(18, 18, 20, 0.01)),
        var(--v2-glass);
}
html.light body#outside .v2-feat-code {
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.02)),
        #0c0c10;
    color: rgba(247, 247, 248, 0.78);
    border-color: rgba(0, 0, 0, 0.08);
}
html.light body#outside .v2-feat-code .muted { color: rgba(247, 247, 248, 0.55); }
html.light body#outside .v2-feat-code::before { color: rgba(247, 247, 248, 0.45); }
html.light body#outside .v2-feat:hover { box-shadow: var(--v2-elev-2); }
html.light body#outside .v2-product-frame {
    background: linear-gradient(180deg, rgba(18, 18, 20, 0.04), rgba(18, 18, 20, 0.01));
    border-color: rgba(18, 18, 20, 0.08);
    box-shadow: var(--v2-elev-3),
        inset 0 0 0 1px rgba(0, 0, 0, 0.04);
}
html.light body#outside .v2-feat-big {
    background:
        radial-gradient(620px circle at 100% 0%, rgba(255, 200, 0, 0.24), transparent 55%),
        linear-gradient(180deg, rgba(255, 200, 0, 0.08), rgba(255, 200, 0, 0.02));
    border-color: rgba(255, 200, 0, 0.32);
    box-shadow: 0 24px 52px -24px rgba(255, 200, 0, 0.25);
}
html.light body#outside .v2-cta-block {
    background:
        radial-gradient(ellipse at 50% 0%, rgba(255, 200, 0, 0.30), transparent 55%),
        linear-gradient(180deg, rgba(18, 18, 20, 0.03), rgba(18, 18, 20, 0.01)),
        var(--v2-glass-2);
}
html.light body#outside .v2-cta-actions .btn.btn-primary {
    box-shadow: 0 14px 32px -10px rgba(255, 200, 0, 0.42);
}


/* ---------- v3 polish: MOBILE tuning ---------- */

@media (max-width: 640px) {
    body#outside .v2-hero { padding-top: 100px; padding-bottom: 110px; }
    /* สองบรรทัดนี้จูนเฉพาะช่วง ≤640 ไม่ใช้ token — token ตัวไหนก็ให้เส้นโค้งช่วงนี้ไม่ได้
       (hero บนจอ 320 ต้องลงถึง 44px ไม่ใช่ 56px ของ fluid-4 ไม่งั้นข้อความไทยล้น) */
    body#outside .v2-hero-h1 { font-size: clamp(44px, 12vw, 72px); letter-spacing: 0; }
    body#outside .v2-hero-sub { font-size: 16px; margin-top: 22px; }
    body#outside .v2-hero-cta { margin-top: 28px; gap: var(--v2-sp-2); }
    body#outside .v2-hero-cta .pill { height: 52px; padding: 0 var(--v2-sp-6); font-size: 14px; }
    body#outside .v2-hero-inner::after { font-size: 11px; letter-spacing: 0.14em; margin-top: 22px; padding: 0 var(--v2-sp-3); }
    body#outside .v2-feat { padding: var(--v2-sp-6) var(--v2-sp-5); min-height: 0; }
    body#outside .v2-feat h3 { font-size: 20px; }
    body#outside .v2-feat-big { padding: var(--v2-sp-7) var(--v2-sp-6); }
    body#outside .v2-feat-big h3 { font-size: 26px; }
    body#outside .v2-feat .v2-feat-ic { width: 40px; height: 40px; font-size: 20px; margin-bottom: 14px; }
    body#outside .v2-feat-big .v2-feat-ic { width: 44px; height: 44px; font-size: 20px; margin-bottom: 16px; }
    body#outside .v2-feat-code { padding: var(--v2-sp-4) var(--v2-sp-4) var(--v2-sp-4); font-size: 11px; }
    body#outside .v2-cta-block { padding: 52px var(--v2-sp-6); }
    body#outside .v2-cta-block h2 { font-size: clamp(32px, 8vw, 44px); }
    body#outside .v2-cta-actions { margin-top: 24px; gap: var(--v2-sp-2); }
    body#outside .v2-cta-actions .btn.btn-lg { height: 50px; padding: 0 var(--v2-sp-5); font-size: 14px; }
    body#outside .v2-cta-block::after { font-size: 11px; letter-spacing: 0.1em; margin-top: 24px; padding: 0 var(--v2-sp-2); }
    body#outside .v2-reviews-section .review-item { padding: var(--v2-sp-6) var(--v2-sp-5) var(--v2-sp-5); min-height: 0; }
    body#outside .v2-reviews-section .review-item::before { font-size: 96px; top: -20px; left: 10px; }
    body#outside .v2-brands-section { padding: 40px 0 !important; }
    body#outside .v2-brands-track { gap: var(--v2-sp-2); animation-duration: 22s; }
    body#outside .v2-brand { padding: var(--v2-sp-2) var(--v2-sp-3) var(--v2-sp-2) var(--v2-sp-2); font-size: 12px; }
    body#outside .v2-brand > i { width: 26px; height: 26px; font-size: 12px; }
}
@media (max-width: 460px) {
    body#outside .v2-hero-inner::after { display: none; }
}


/* ============================================================
 *  v3 Mobile regressions pass — verified fixes
 * ============================================================ */

/* Mobile neworder stats — บล็อกนี้ถูกลบใน A65
   ‼ มัน **ตายมาตลอด** ทุกบรรทัด: มันสั่ง display:grid แต่บล็อก 21.3/21.4 ที่อยู่ทีหลัง
     สั่ง display:flex ด้วย specificity เท่ากัน → flex ชนะทุกความกว้าง
     grid-template-columns · nth-child(3) · border-left ที่สั่งไว้จึงไม่มีความหมายสักตัว
     วัดยืนยันบน viewport 390 จริง: .neworder-stats เป็นแถวเดียว 322x58 ไม่ใช่ grid 2 คอลัมน์
   ที่อยู่ใหม่: @media (max-width: 640px) ในบล็อกสถิติของ A65 (ค้นคำว่า "การ์ดสามใบ") */

/* addfunds mega input — overflow on narrow viewports */
@media (max-width: 540px) {
    body#dash .addfunds-amount { padding: var(--v2-sp-4) var(--v2-sp-4); gap: var(--v2-sp-2); }
    body#dash .addfunds-amount .cur { font-size: 20px; }
    body#dash .addfunds-amount input.form-control { font-size: 26px; letter-spacing: 0; }
    body#dash .addBalance .addBalanceBtn { padding: var(--v2-sp-2) var(--v2-sp-3); font-size: 11px; }
    body#dash .v2-wallet-chip { min-width: 0; align-items: flex-start; padding: var(--v2-sp-2) var(--v2-sp-3); }
    body#dash .v2-wallet-chip b { font-size: 20px; }
}

/* payment-list collapse to 1-col below 540px */
@media (max-width: 540px) {
    body#dash .payment-list#method-drop { grid-template-columns: 1fr; }
}

/* pnd-ord-nav touch target on mobile */
@media (max-width: 540px) {
    body#dash .pnd-ord-nav a { padding: var(--v2-sp-2) var(--v2-sp-3); font-size: 12px; }
    body#dash .orders-search .textbox { font-size: 13px; padding: var(--v2-sp-3) var(--v2-sp-3) var(--v2-sp-3) 40px; }
}

/* page-header-v2 stack on mobile */
@media (max-width: 767px) {
    body#dash .page-header-v2 { gap: var(--v2-sp-4); align-items: flex-start; }
    body#dash .page-header-v2 .v2-wallet-chip { align-self: flex-start; align-items: flex-start; }
}


/* (removed R3/R4 inline-header-right block — superseded by R8 dropdown panel below) */


/* ============================================================
 *  Auth + content page mobile/light fixes
 * ============================================================ */

body#outside .signup-badge { margin-top: 40px; }
@media (min-width: 992px) { body#outside .signup-badge { margin-top: 80px; } }

@media (max-width: 540px) {
    body#outside .signup-content .form-control,
    body#outside .login-card .form-control,
    body#outside .auth-mini-card .form-control {
        min-height: 44px;
        font-size: 14px;
    }
}

html.light body#outside .card.blog-card .blog-date { color: var(--v2-ink-mute); }
html.light body#outside .card.blog-card .blog-date i { color: var(--v2-yellow); }

@media (max-width: 540px) {
    body#outside .v2-blog-section .home-articles .blog-area-text h2 { font-size: 16px; }
    body#outside .v2-blog-section .blog-three .blog-area-text h2 { font-size: 13px; }
}


/* ============================================================
 *  SIDEBAR PROFILE — definitive rebuild (R6/R7)
 *  Works with twig: <span class="blob blob-red"> has been DELETED.
 *  Dot is created via pseudo on .sidebar-text — no class-based legacy
 *  CSS can hijack a pseudo-element.
 * ============================================================ */


/* Defensive: hide any legacy .blob if Perfect Panel re-renders it */




/* ============================================================
 *  R8 Architecture rebuild (2026-04-25)
 *  - Sidebar position: fixed on desktop too (not sticky)
 *  - Real .profile-sub markup replaces ::after pseudo
 *  - Mobile chevron toggle restored with text labels
 * ============================================================ */

/* ---- 1. SIDEBAR FIXED on desktop (replaces sticky) ---- */
@media (min-width: 992px) {
    body#dash .app {
        display: block !important;
        grid-template-columns: none !important;
    }
    body#dash .page {
        margin-left: 234px;   /* A40b: 14 + 206 + 14 · ไม่ต้อง !important แล้วเพราะไม่มีคู่แข่ง */
        min-height: 100vh;
    }
    /* Sidebar-active legacy collapsed-mode (80px icon-only) — also adjust page */
}

/* ---- 2. PROFILE SUB — real markup replaces ::after ---- */

/* Suppress the legacy ::after pseudo subtitle (we now use real .profile-sub) */

/* ---- 3. MOBILE chevron + dropdown panel restored with text labels ---- */

/* Desktop: hide chevron toggle (header-right is always visible inline as icons) */

@media (max-width: 767px) {
    /* Show chevron on mobile */

    /* Header-right hidden by default on mobile (JS toggles display:block) */
    /* JS sets display: block on hdRight when open */



    /* Each item becomes a full-width row with icon + text label */

    /* Append text label after icon using ::after with attr() from data-original-title */
    /* Logout button has no data-original-title — provide explicit label */

    /* Theme switcher: keep its pill layout, add a label to the LEFT of the pill */
}


/* ============================================================
 *  R9 — Sidebar active menu legibility + mobile dropdown hardening
 * ============================================================ */

/* Sidebar menu active state — legacy uses solid yellow bg + black text (illegible
   in dark mode after v2 yellow accent shift). Restore v2 yellow-soft bg + yellow text. */

/* Light mode: yellow-soft bg + dark yellow text for contrast */


/* Mobile header-right dropdown: harden the hide-by-default behavior with !important.
   JS sets inline style="display: block" to open — inline always wins, but this
   defends against any later legacy class rule that sets display. */
@media (max-width: 767px) {
}

/* R10 — segmented nav-tab fix (2026-04-25)
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */
/* A52 · แท็บ — ถอน !important 43 ตัวของ R9 ออก ค่าทุกตัวคงเดิม
   ‼ ห้ามใส่ !important กลับ · ถ้าค่าไหนไม่ลง ให้ไปลบคู่แข่ง
   ‼ ยังไม่เปลี่ยนเป็นค่า Panel A (พื้น --v2-well / แคปซูลหมึก) เพราะ background
     ของคอมโพเนนต์นี้และของ .page-link ไม่ยอมลงด้วยเหตุที่ยังหาไม่เจอ —
     ตัดออกแล้วทั้ง specificity ลำดับ token !important inline และ <style>
     ดู .claude/verify/panelA2/A52-verify.json ก่อนลองอีกครั้ง
   ‼ bootstrap ผูก tab ด้วย data-toggle="tab" — ห้ามแตะ attribute ใน twig
   git log --grep=A52 */
body#dash ul.nav[role="tablist"] {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100%;
    gap: var(--v2-sp-1);
    padding: var(--v2-sp-1);
    margin: 0 0 16px;
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-pill);
    box-shadow: none;
}
body#dash ul.nav[role="tablist"] > .nav-item {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    list-style: none;
    margin: 0;
}
body#dash ul.nav[role="tablist"] > .nav-item > .nav-link {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    gap: var(--v2-sp-2);
    padding: var(--v2-sp-2) var(--v2-sp-3);
    border: 1px solid transparent;
    border-radius: var(--v2-r-pill);
    background: transparent;
    color: var(--v2-ink-dim);
    font-family: var(--v2-f-dis);
    font-size: 13px;
    font-weight: 600;
    line-height: var(--v2-lh-tight);
    letter-spacing: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background var(--v2-t-base) var(--v2-ease), color var(--v2-t-base) var(--v2-ease);
}
body#dash ul.nav[role="tablist"] > .nav-item > .nav-link:hover {
    background: var(--v2-glass-2);
    color: var(--v2-ink);
}
body#dash ul.nav[role="tablist"] > .nav-item > .nav-link.active {
    background: var(--v2-yellow);
    color: var(--v2-yellow-ink);
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 6px 16px -8px var(--v2-yellow-glow, rgba(255, 214, 10, 0.55));
}
body#dash ul.nav[role="tablist"] > .nav-item > .nav-link.active .icon {
    color: var(--v2-yellow-ink) !important;
}

/* Light mode — softer ring on active pill
   A67 · กัน #nav-tab / #nav-info-tabs ออกจากกฎนี้
   ‼ กฎนี้เป็น !important ที่ (1,6,3) จึงชนะกฎแท็บใหม่ของบล็อก 21.3 ทุกครั้ง
     ผลคือแท็บ neworder/addfunds ยังได้ **เงาเหลือง** ทั้งที่ตัวมันเป็นพื้นการ์ดขาวแล้ว
     ตรวจเจอตอนวัดบนหน้าจริงหลัง deploy A67 ไม่ใช่ตอนอ่านโค้ด (เหมือนเคสตัวอักษรดำของ A66)
   ‼ หน้าอื่นที่ยังเป็นแคปซูลเหลือง (เช่น notifications) ต้องได้เงานี้ต่อ จึงกันเฉพาะสอง id */
html.light body#dash ul.nav[role="tablist"]:not(#nav-tab):not(#nav-info-tabs) > .nav-item > .nav-link.active {
    border-color: rgba(0, 0, 0, 0.06) !important;
    box-shadow: 0 4px 14px -6px rgba(255, 200, 0, 0.5) !important;
}

/* Mobile — slightly tighter padding, keep label readable
   A65 · ถอน !important ทั้งสี่ตัว — บล็อกนี้อยู่หลังบล็อกฐานอยู่แล้ว ชนะด้วยลำดับ
   ‼ และถ้าคาไว้ มันจะข้ามหัวบล็อก 21.3 ไปทับแท็บของ neworder/addfunds บนมือถือ */
@media (max-width: 540px) {
    body#dash ul.nav[role="tablist"] {
        padding: var(--v2-sp-1);
        gap: var(--v2-sp-1);
    }
    body#dash ul.nav[role="tablist"] > .nav-item > .nav-link {
        padding: var(--v2-sp-2) var(--v2-sp-2);
        font-size: 12px;
        gap: var(--v2-sp-1);
    }
}

/* R11 — mobile header-right dropdown opacity fix (2026-04-25)
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */
@media (max-width: 767px) {

    /* Light mode — near-solid paper with soft inner highlight */

    /* Browsers without backdrop-filter — go fully solid (defensive) */
    @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    }
}

/* R12 — neworder.twig search-dropdown icon overlap fix (2026-04-25)
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */
body#dash .search-dropdown {
    position: relative;
}
body#dash .search-dropdown .input-wrapper {
    position: relative;
}
body#dash .search-dropdown .form-control,
body#dash .search-dropdown #template-input,
body#dash .search-dropdown input.select2-selection {
    padding-left: 44px !important;
}
body#dash .search-dropdown .input-wrapper__prepend {
    position: absolute !important;
    left: 6px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 32px !important;
    height: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none;
    color: var(--v2-ink-mute);
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2 !important;
    transition: color var(--v2-t-fast) var(--v2-ease) !important;
}
body#dash .search-dropdown .input-wrapper__prepend:hover {
    color: var(--v2-ink) !important;
}
body#dash .search-dropdown .input-wrapper__prepend .fas,
body#dash .search-dropdown .input-wrapper__prepend .fa,
body#dash .search-dropdown .input-wrapper__prepend [class*="fa-"] {
    font-size: 14px !important;
    line-height: 1 !important;
}
/* Defensive: hide any other stray icon nodes that Perfect Panel
   variants might insert as direct wrapper children (svg / standalone i). */
body#dash .search-dropdown .input-wrapper > i,
body#dash .search-dropdown .input-wrapper > svg {
    display: none !important;
}
/* R15.1 — non-glass modal full reset (2026-04-26)
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */
.modal-open .modal[id^="report"],
.modal-open .modal[id^="detail"],
.modal-open #changeEmailModal {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    z-index: 1055 !important;
}
body .modal[id^="report"] .modal-dialog,
body .modal[id^="detail"] .modal-dialog,
body #changeEmailModal .modal-dialog {
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto;
    position: relative;
    z-index: 1;
}
/* A57 · พื้นผิว modal — token ชุดเดียว ไม่ใช่สีเขียนตรง ๆ สองชุด
   กฎเดิมเขียน rgba ตรง ๆ พร้อม !important 15 ตัว แล้วทำสำเนา html.light อีกก้อนเพื่อ
   สลับสี — ซึ่งเป็นงานของ token อยู่แล้ว `--v2-line` ตรงกับค่าที่ hardcode ไว้ทั้งสองธีมพอดี
   ‼ !important ไม่จำเป็นเลย selector ชุดนี้เป็น (0,3,1) สูงกว่าคู่แข่งทุกตัวในไฟล์
     `opacity` เก็บ !important ไว้ตัวเดียว เพราะมันเป็นการแก้บั๊กตอนเปิด ไม่ใช่หน้าตา
   ‼ ห้ามแตะกฎ .modal-dialog ข้างบน — transform/opacity ที่นั่นคือตัวที่ทำให้ modal เปิดติด
   ‼ backdrop-filter ถูกถอด: พื้นทึบแล้วมันมองไม่เห็นผล และ /services มี modal 340 ตัวในหน้าเดียว */
/* ‼ A59 · แยก authed/guest เพราะ `--v2-surface` นิยามไว้ใต้ `body.v2-dash` เท่านั้น (A44
   ตั้งใจกันค่า Panel A ไม่ให้รั่วไปฝั่ง guest) กฎ A57 เดิมไม่มี scope แล้วเรียก token นั้น
   → ฝั่ง guest token ไม่มีค่า `background` พังทั้งบรรทัด modal 340 ตัวบน /services
   ของ guest พื้นกลายเป็นโปร่งใส จับได้ตอน sweep ปิดงาน ไม่ใช่ตอนเขียน
   ‼ ก่อนใช้ token ใน selector ที่ไม่มี scope ให้เช็คก่อนว่ามันนิยามที่ไหน:
     --v2-surface · --v2-surface-2 · --v2-well · --v2-sidebar · --v2-on-sidebar ·
     --v2-hero* · --v2-acc-line = authed เท่านั้น
     --v2-ink · --v2-line · --v2-elev-* · --v2-yellow = ใช้ได้ทั้งสองฝั่ง */
body#dash .modal[id^="report"] .modal-content,
body#dash .modal[id^="detail"] .modal-content,
body#dash #changeEmailModal .modal-content {
    background: var(--v2-surface);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-lg);
    box-shadow: var(--v2-elev-3);
    opacity: 1 !important;
    pointer-events: auto;
    color: var(--v2-ink);
}
/* guest ได้ค่าเดิมของ R15.1 ทุกตัว — คัดลอกมาตรง ๆ ไม่ใช่เขียนใหม่ ห้ามแก้ให้ "สวยขึ้น" */
body#outside .modal[id^="report"] .modal-content,
body#outside .modal[id^="detail"] .modal-content,
body#outside #changeEmailModal .modal-content {
    background: rgba(18, 20, 26, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--v2-r-lg);
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.07) inset,
        0 30px 70px -18px rgba(0, 0, 0, 0.85),
        0 0 0 1px rgba(0, 0, 0, 0.4);
    opacity: 1 !important;
    pointer-events: auto;
    color: var(--v2-ink);
}
html.light body#outside .modal[id^="report"] .modal-content,
html.light body#outside .modal[id^="detail"] .modal-content,
html.light body#outside #changeEmailModal .modal-content {
    background: rgba(255, 255, 255, 0.97);
    border-color: rgba(18, 18, 20, 0.10);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 1) inset,
        0 24px 56px -18px rgba(18, 18, 20, 0.22),
        0 0 0 1px rgba(18, 18, 20, 0.06);
    color: var(--v2-ink);
}
/* Make sure the backdrop sits at standard Bootstrap level — never above modal */
body .modal-backdrop,
body .modal-backdrop.fade.show {
    z-index: 1040 !important;
}

/* RTL — flip prepend button to the right and swap input padding */
body#dash .search-dropdown[data-dir="rtl"] .input-wrapper__prepend {
    left: auto !important;
    right: 6px !important;
}
body#dash .search-dropdown[data-dir="rtl"] .form-control,
body#dash .search-dropdown[data-dir="rtl"] #template-input,
body#dash .search-dropdown[data-dir="rtl"] input.select2-selection {
    padding-left: var(--v2-sp-3) !important;
    padding-right: 44px !important;
}

/* R13 — QR payment modal redesign (Layer A) (2026-04-25)
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */
body .modal-content:has(#qr-code-image) {
    max-width: 440px;
    margin: 0 auto;
    /* R16 (2026-04-26): give QR modal-content a SOLID surface. Default
       `body .modal-content { background: var(--v2-glass-3) }` = 13% white
       in dark mode → modal looked transparent so users saw the blurred
       addfunds page bleeding through and called it "popup ใต้ modal".
       Layer our own glass: solid dark base + heavy blur for the glass feel. */
    background: rgba(14, 16, 22, 0.96) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    backdrop-filter: blur(28px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(140%) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.07) inset,
        0 30px 80px -20px rgba(0, 0, 0, 0.85),
        0 0 0 1px rgba(0, 0, 0, 0.4) !important;
    color: var(--v2-ink) !important;
}
html.light body .modal-content:has(#qr-code-image) {
    background: rgba(255, 255, 255, 0.97) !important;
    border-color: rgba(18, 18, 20, 0.10) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 1) inset,
        0 24px 56px -18px rgba(18, 18, 20, 0.22),
        0 0 0 1px rgba(18, 18, 20, 0.06) !important;
    color: #1d2433 !important;
}
body .modal-content:has(#qr-code-image) .modal-body {
    padding: 36px var(--v2-sp-6) var(--v2-sp-4);
    text-align: center;
}
body .modal-content:has(#qr-code-image) .modal-body > .text-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

/* QR frame wrapper — injected by JS to host corner brackets + watermark.
   No longer gated on .qr-ready (placeholder base64 confused that signal).
   Loading-state hide is now handled by delayed-reveal on the whole modal
   (see "Jay-pattern delayed modal reveal" rule below). */
.qr-frame-wrap {
    position: relative;
    display: inline-block;
    padding: var(--v2-sp-3);
    margin: 0 auto;
    line-height: 0;
}
/* Four yellow corner brackets — viewfinder feel */
.qr-frame-wrap::before,
.qr-frame-wrap::after,
.qr-frame-wrap > .qr-corner-tr,
.qr-frame-wrap > .qr-corner-bl {
    content: "";
    position: absolute;
    width: 22px;
    height: 22px;
    border: 2.5px solid var(--v2-yellow);
    border-radius: 4px;
    pointer-events: none;
}
.qr-frame-wrap::before {
    top: 0; left: 0;
    border-right: 0; border-bottom: 0;
}
.qr-frame-wrap::after {
    bottom: 0; right: 0;
    border-left: 0; border-top: 0;
}
.qr-frame-wrap > .qr-corner-tr {
    top: 0; right: 0;
    border-left: 0; border-bottom: 0;
}
.qr-frame-wrap > .qr-corner-bl {
    bottom: 0; left: 0;
    border-right: 0; border-top: 0;
}

/* QR image — white card so scanners can lock the contrast.
   No opacity gating: the delayed modal reveal (below) hides the
   whole modal during Perfect Panel's QR fetch, so by the time
   the modal fades in, the real QR is already painted. */
body .modal-content #qr-code-image {
    background: #FFFFFF;
    padding: var(--v2-sp-4);
    border-radius: var(--v2-r-md);
    max-width: 280px;
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    box-shadow: var(--v2-elev-2),
        0 0 0 1px rgba(0, 0, 0, 0.04);
}

/* Anti-fraud watermark — white band across center of QR */
.qr-watermark-overlay {
    position: absolute;
    top: 50%;
    left: 18px;
    right: 18px;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.86);
    padding: var(--v2-sp-1) var(--v2-sp-2);
    text-align: center;
    pointer-events: none;
    z-index: 5;
    line-height: 1.3;
    border-radius: 3px;
}
.qr-watermark-overlay .wm-line1 {
    font-family: var(--v2-f-thai);
    font-size: 11px;
    font-weight: 700;
    color: rgba(160, 110, 0, 0.92);
}
.qr-watermark-overlay .wm-line2 {
    font-family: var(--v2-f-mono);
    font-size: 11px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.5);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-top: 1px;
}

/* Spinner block — keep visible while QR loads */
body .modal-content #qr-modal-spinner .fa-spinner-third {
    color: var(--v2-yellow);
    font-size: 34px;
    animation: qrSpin 0.9s linear infinite;
}
@keyframes qrSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Modal footer — single-use + 24h notices via pseudos */
body .modal-content:has(#qr-code-image) .modal-footer {
    flex-wrap: wrap;
    border-top: 1px solid var(--v2-line);
    padding: var(--v2-sp-4) var(--v2-sp-5) var(--v2-sp-5);
    justify-content: center;
    gap: 0;
}
body .modal-content:has(#qr-code-image) .modal-footer::before {
    content: "⚠ QR นี้ใช้ได้ครั้งเดียว ห้ามชำระซ้ำ";
    display: block;
    width: 100%;
    text-align: center;
    font-family: var(--v2-f-thai);
    font-size: 12px;
    font-weight: 600;
    color: var(--v2-warn);
    margin-bottom: 4px;
    order: -2;
}
body .modal-content:has(#qr-code-image) .modal-footer::after {
    content: "⏱ QR มีอายุ 24 ชั่วโมง หลังจากสร้าง";
    display: block;
    width: 100%;
    text-align: center;
    font-family: var(--v2-f-thai);
    font-size: 11px;
    color: var(--v2-ink-mute);
    margin-bottom: 12px;
    order: -1;
}
/* Yellow pill primary CTA */
body .modal-content:has(#qr-code-image) .modal-footer .btn,
body .modal-content:has(#qr-code-image) .modal-footer .btn.btn-default,
body .modal-content:has(#qr-code-image) .modal-footer .btn.btn-big-secondary {
    background: var(--v2-yellow) !important;
    color: var(--v2-yellow-ink) !important;
    border: 0 !important;
    border-radius: var(--v2-r-pill) !important;
    padding: var(--v2-sp-3) var(--v2-sp-7) !important;
    font-family: var(--v2-f-dis) !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    width: 100%;
    max-width: 320px;
    box-shadow: 0 6px 18px -8px var(--v2-yellow-glow);
    transition: transform var(--v2-t-fast) var(--v2-ease), background var(--v2-t-fast) var(--v2-ease);
}
body .modal-content:has(#qr-code-image) .modal-footer .btn:hover {
    background: var(--v2-yellow-2) !important;
    transform: translateY(-1px);
}

/* Modal-body close button — repositioned for the QR layout */
body .modal-content:has(#qr-code-image) .modal-body > .close {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--v2-glass-2);
    border: 1px solid var(--v2-line);
    color: var(--v2-ink);
    opacity: 1;
    font-size: 16px;
    text-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 10;
}
body .modal-content:has(#qr-code-image) .modal-body > .close:hover {
    background: var(--v2-glass-3);
}
body .modal-content:has(#qr-code-image) .modal-body { position: relative; }

/* Light mode parity — keep QR card white (scanner contrast) but tune shadow */
html.light body .modal-content #qr-code-image {
    box-shadow: var(--v2-elev-2),
        0 0 0 1px rgba(18, 18, 20, 0.06);
}
html.light .qr-watermark-overlay { background: rgba(255, 255, 255, 0.78); }
html.light .qr-watermark-overlay .wm-line1 { color: rgba(140, 95, 0, 0.95); }
html.light .qr-watermark-overlay .wm-line2 { color: rgba(0, 0, 0, 0.55); }

/* Mobile sizing */
@media (max-width: 540px) {
    body .modal-content:has(#qr-code-image) .modal-body { padding: var(--v2-sp-6) var(--v2-sp-4) var(--v2-sp-3); }
    body .modal-content #qr-code-image { max-width: 220px; padding: var(--v2-sp-3); }
    .qr-frame-wrap { padding: var(--v2-sp-3); }
    .qr-frame-wrap::before,
    .qr-frame-wrap::after,
    .qr-frame-wrap > .qr-corner-tr,
    .qr-frame-wrap > .qr-corner-bl { width: 18px; height: 18px; border-width: 2px; }
    .qr-watermark-overlay { left: 12px; right: 12px; padding: var(--v2-sp-1) var(--v2-sp-2); }
    .qr-watermark-overlay .wm-line1 { font-size: 11px; }
    .qr-watermark-overlay .wm-line2 { font-size: 11px; }
    body .modal-content:has(#qr-code-image) .modal-footer { padding: var(--v2-sp-3) var(--v2-sp-4) var(--v2-sp-4); }
}

/* ============================================================
 *  R13.5 — Layer B additions: step indicator + pulse status +
 *  trust strip + loading skeleton (2026-04-25)
 * ============================================================ */

/* --- Step indicator above QR --- */
.qr-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--v2-sp-1);
    margin: 0 auto 18px;
    flex-wrap: nowrap;
}
.qr-step {
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-2);
    padding: var(--v2-sp-2) var(--v2-sp-3) var(--v2-sp-2) var(--v2-sp-2);
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-pill);
}
.qr-step-n {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--v2-yellow);
    color: var(--v2-yellow-ink);
    font-family: var(--v2-f-dis);
    font-weight: 800;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.qr-step-t {
    font-family: var(--v2-f-thai);
    font-size: 12px;
    font-weight: 600;
    color: var(--v2-ink);
    line-height: 1;
    white-space: nowrap;
}
.qr-step-arrow {
    color: var(--v2-ink-mute);
    font-size: 16px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}

/* --- Pulse status (visual reassurance — not real polling) --- */
.qr-pulse-status {
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-2);
    margin: 16px auto 8px;
    padding: var(--v2-sp-2) var(--v2-sp-3);
    background: rgba(111, 228, 168, 0.10);
    border: 1px solid rgba(111, 228, 168, 0.32);
    border-radius: var(--v2-r-pill);
}
.qr-pulse-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--v2-ok);
    box-shadow: 0 0 0 0 rgba(111, 228, 168, 0.7);
    animation: qrPulse 1.6s var(--v2-ease) infinite;
    flex-shrink: 0;
}
.qr-pulse-text {
    font-family: var(--v2-f-thai);
    font-size: 12px;
    font-weight: 600;
    color: var(--v2-ok);
    line-height: 1;
}
@keyframes qrPulse {
    0%   { box-shadow: 0 0 0 0 rgba(111, 228, 168, 0.55); }
    70%  { box-shadow: 0 0 0 9px rgba(111, 228, 168, 0); }
    100% { box-shadow: 0 0 0 0 rgba(111, 228, 168, 0); }
}

/* --- Trust strip below pulse --- */
.qr-trust {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--v2-sp-2);
    margin: 4px auto 0;
    flex-wrap: wrap;
}
.qr-trust-item {
    font-family: var(--v2-f-thai);
    font-size: 11px;
    font-weight: 500;
    color: var(--v2-ink-dim);
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-1);
    line-height: var(--v2-lh-tight);
}
.qr-trust-item > i {
    color: var(--v2-yellow);
    font-size: 13px;
}
.qr-trust-sep {
    color: var(--v2-ink-mute);
    font-size: 12px;
    line-height: 1;
}

/* --- Loading skeleton (replaces default fa-spinner-third) --- */
body .modal-content #qr-modal-spinner {
    width: 280px;
    height: 280px;
    max-width: 100%;
    margin: 0 auto 14px;
    border-radius: var(--v2-r-md);
    background:
        linear-gradient(110deg,
            var(--v2-glass-2) 8%,
            rgba(255, 214, 10, 0.08) 18%,
            var(--v2-glass-2) 33%);
    background-size: 220% 100%;
    animation: qrShimmer 1.4s linear infinite;
    position: relative;
    overflow: hidden;
}
body .modal-content #qr-modal-spinner::before {
    content: "\f002";
    font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free", "FontAwesome";
    font-weight: 400;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--v2-ink-mute);
    font-size: 34px;
    opacity: 0.45;
}
body .modal-content #qr-modal-spinner > .spinner-block__wrapper {
    display: none;
}
@keyframes qrShimmer {
    0%   { background-position: 220% 0; }
    100% { background-position: -220% 0; }
}

/* Light-mode parity for new elements */
html.light .qr-step { background: rgba(18, 18, 20, 0.04); border-color: rgba(18, 18, 20, 0.10); }
html.light .qr-step-n { background: var(--v2-yellow); color: var(--v2-yellow-ink); }
html.light .qr-pulse-status {
    background: rgba(24, 160, 106, 0.10);
    border-color: rgba(24, 160, 106, 0.30);
}
html.light .qr-pulse-dot { background: var(--v2-ok); }
html.light .qr-pulse-text { color: var(--v2-ok); }
html.light body .modal-content #qr-modal-spinner {
    background:
        linear-gradient(110deg,
            rgba(18, 18, 20, 0.04) 8%,
            rgba(255, 200, 0, 0.10) 18%,
            rgba(18, 18, 20, 0.04) 33%);
    background-size: 220% 100%;
}

/* Mobile responsiveness for new elements */
@media (max-width: 540px) {
    .qr-steps { gap: var(--v2-sp-1); margin-bottom: 14px; }
    .qr-step { padding: var(--v2-sp-1) var(--v2-sp-2) var(--v2-sp-1) var(--v2-sp-1); gap: var(--v2-sp-1); }
    .qr-step-n { width: 19px; height: 19px; font-size: 11px; }
    .qr-step-t { font-size: 11px; }
    .qr-step-arrow { font-size: 13px; }
    .qr-pulse-status { padding: var(--v2-sp-2) var(--v2-sp-3); margin-top: 12px; }
    .qr-pulse-text { font-size: 11px; }
    .qr-trust { gap: var(--v2-sp-2); }
    .qr-trust-item { font-size: 11px; }
    body .modal-content #qr-modal-spinner { width: 220px; height: 220px; }
    body .modal-content #qr-modal-spinner::before { font-size: 26px; }
}
@media (max-width: 380px) {
    .qr-step-t { display: none; }
    .qr-step { padding: var(--v2-sp-1); }
    .qr-step-n { width: 22px; height: 22px; }
}

/* R13.7 — Jay-pattern delayed modal reveal (2026-04-25)
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */
.modal.fade:has(#qr-code-image) .modal-dialog {
    opacity: 0;
    transform: scale(0.94) translateY(24px);
}
.modal.fade.show:has(#qr-code-image) .modal-dialog,
.modal.fade.in:has(#qr-code-image) .modal-dialog {
    animation: qrModalDelayedReveal 0.5s var(--v2-ease) 1.7s both;
}
@keyframes qrModalDelayedReveal {
    from { opacity: 0; transform: scale(0.94) translateY(24px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Backdrop blur — when a QR modal is open, blur the whole page so the
   prep overlay AND the modal itself read sharp on a soft canvas instead
   of competing with the addfunds form behind them. Scoped via :has() so
   lang/currency modals keep their original lighter feel. */
body:has(.modal.show #qr-code-image) .modal-backdrop,
body:has(.modal.in #qr-code-image) .modal-backdrop {
    backdrop-filter: blur(14px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
    background-color: #000 !important;
}
body:has(.modal.show #qr-code-image) .modal-backdrop.show,
body:has(.modal.in #qr-code-image) .modal-backdrop.show {
    opacity: 0.88 !important;
}
/* Defensive: while the QR modal is open, hard-hide the dormant
   #promoPopup element so it can never accidentally show through
   any transparent layer. The popup script is commented out anyway. */
body:has(.modal.show #qr-code-image) #promoPopup,
body:has(.modal.in #qr-code-image) #promoPopup {
    display: none !important;
}
html.light body:has(.modal.show #qr-code-image) .modal-backdrop,
html.light body:has(.modal.in #qr-code-image) .modal-backdrop {
    background-color: #121214 !important;
}
html.light body:has(.modal.show #qr-code-image) .modal-backdrop.show,
html.light body:has(.modal.in #qr-code-image) .modal-backdrop.show {
    opacity: 0.55 !important;
}

/* Skeleton spinner is now visible during the 1.5s "behind the curtain"
   loading window — useful only if Perfect Panel takes longer than 1.5s.
   Keep it styled but hidden once the modal is fully revealed (Perfect
   Panel sets inline display:none on it once QR src is set). */

/* Neutralize legacy `.modal-open .modal { z-index: 9999; backdrop-filter: blur(10px) }`
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */
.modal-open .modal:has(#qr-code-image) {
    z-index: 1050 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Vertical centering for the QR modal (Bootstrap 4 default pins it near
   the top via .modal-dialog { margin: 1.75rem auto }). */
.modal.fade.show:has(#qr-code-image),
.modal.fade.in:has(#qr-code-image) {
    display: flex !important;
    align-items: center;
    justify-content: center;
}
.modal.fade:has(#qr-code-image) .modal-dialog {
    margin: 16px auto !important;
    max-width: 480px;
    width: calc(100% - 24px);
    max-height: calc(100vh - 32px);
    display: flex;
    align-items: stretch;
    justify-content: center;
}
.modal.fade:has(#qr-code-image) .modal-content {
    width: 100%;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
}

/* ============================================================
 *  R14 — QR prep loading overlay (premium SaaS-grade) (2026-04-25)
 *  Glass card centered between modal-backdrop and modal-dialog,
 *  shown during the 1.5s modal-reveal delay so the user sees brand
 *  craft instead of a blank dark overlay.
 * ============================================================ */
.qr-prep-overlay {
    position: fixed;
    inset: 0;
    /* Bootstrap 4: .modal-backdrop = 1040, .modal = 1050.
       Park overlay at 1045 — visible while .modal-dialog has
       opacity:0, hidden once the modal fades in to opacity:1
       (modal at 1050 covers it). */
    z-index: 1045;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    padding: var(--v2-sp-4);
    animation: qrPrepOverlayIn 0.32s var(--v2-ease) both;
}
.qr-prep-overlay.qr-prep-fading {
    animation: qrPrepOverlayOut 0.2s var(--v2-ease) forwards;
}
@keyframes qrPrepOverlayIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes qrPrepOverlayOut {
    from { opacity: 1; transform: scale(1); }
    to   { opacity: 0; transform: scale(0.97); }
}

.qr-prep-card {
    position: relative;
    width: 320px;
    max-width: 100%;
    padding: var(--v2-sp-6) var(--v2-sp-6) var(--v2-sp-5);
    background:
        linear-gradient(180deg, rgba(255, 214, 10, 0.04) 0%, rgba(255, 214, 10, 0) 50%),
        rgba(12, 12, 16, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--v2-r-lg);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.08) inset,
        0 30px 80px -20px rgba(0, 0, 0, 0.85),
        0 0 0 1px rgba(0, 0, 0, 0.4);
    backdrop-filter: var(--v2-blur-strong);
    -webkit-backdrop-filter: var(--v2-blur-strong);
    text-align: center;
    overflow: hidden;
    isolation: isolate;
    transform: scale(0.96);
    animation: qrPrepCardIn 0.5s var(--v2-ease) 0.05s forwards;
}
@keyframes qrPrepCardIn {
    to { transform: scale(1); }
}
.qr-prep-card-glow {
    position: absolute;
    inset: -50% -25% auto -25%;
    height: 200%;
    background: radial-gradient(60% 50% at 50% 0%, rgba(255, 214, 10, 0.20), transparent 70%);
    pointer-events: none;
    z-index: -1;
}

/* QR-grid: 7×7 yellow dots fading in with random delays + sweeping scan line */
.qr-prep-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--v2-sp-1);
    width: 96px;
    height: 96px;
    padding: var(--v2-sp-2);
    margin: 4px auto 18px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 214, 10, 0.18);
    border-radius: var(--v2-r-sm);
    overflow: hidden;
}
.qr-prep-dot {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: var(--v2-yellow);
    border-radius: 1.5px;
    opacity: 0;
    transform: scale(0.4);
    box-shadow: 0 0 6px rgba(255, 214, 10, 0.6);
    animation: qrPrepDotIn 0.6s var(--v2-ease) forwards;
}
@keyframes qrPrepDotIn {
    0%   { opacity: 0; transform: scale(0.4); }
    60%  { opacity: 1; transform: scale(1.08); }
    100% { opacity: 0.92; transform: scale(1); }
}
.qr-prep-scan {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 14px;
    background: linear-gradient(180deg,
        rgba(255, 214, 10, 0) 0%,
        rgba(255, 214, 10, 0.85) 50%,
        rgba(255, 214, 10, 0) 100%);
    box-shadow: 0 0 10px rgba(255, 214, 10, 0.55);
    pointer-events: none;
    animation: qrPrepScan 1.5s var(--v2-ease) infinite;
}
@keyframes qrPrepScan {
    0%   { transform: translateY(-100%); opacity: 0; }
    20%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { transform: translateY(96px); opacity: 0; }
}

/* Title */
.qr-prep-title {
    font-family: var(--v2-f-thai);
    font-size: 14px;
    font-weight: 700;
    color: var(--v2-ink);
    line-height: 1.3;
    margin: 0 0 6px;
    letter-spacing: 0.005em;
}

/* Status row — rotating message + animated dots */
.qr-prep-status {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    font-family: var(--v2-f-thai);
    font-size: 12px;
    font-weight: 500;
    color: var(--v2-ink-mute);
    margin-bottom: 14px;
    min-height: 16px;
}
.qr-prep-status-text {
    transition: opacity var(--v2-t-fast) var(--v2-ease);
}
.qr-prep-status-dots {
    color: var(--v2-yellow);
    font-weight: 700;
    min-width: 14px;
    text-align: left;
}

/* Progress bar */
.qr-prep-bar {
    position: relative;
    height: 3px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: var(--v2-r-pill);
    overflow: hidden;
    margin-bottom: 18px;
}
.qr-prep-bar-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0%;
    background: linear-gradient(90deg, var(--v2-yellow-2), var(--v2-yellow));
    box-shadow: 0 0 8px rgba(255, 214, 10, 0.5);
    border-radius: var(--v2-r-pill);
    animation: qrPrepBar 1.4s var(--v2-ease) forwards;
}
@keyframes qrPrepBar {
    0%   { width: 0%; }
    50%  { width: 60%; }
    85%  { width: 88%; }
    100% { width: 100%; }
}

/* Brand mark */
.qr-prep-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-2);
    padding-top: var(--v2-sp-3);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    width: 100%;
    justify-content: center;
}
.qr-prep-brand-mark {
    width: 28px;
    height: 28px;
    border-radius: var(--v2-r-xs);
    background: linear-gradient(135deg, var(--v2-yellow), var(--v2-yellow-2));
    color: var(--v2-yellow-ink);
    font-family: var(--v2-f-dis);
    font-weight: 800;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px -4px rgba(255, 214, 10, 0.5);
    flex-shrink: 0;
    line-height: 1;
}
.qr-prep-brand-stack {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    line-height: 1;
}
.qr-prep-brand-text {
    font-family: var(--v2-f-dis);
    font-size: 12px;
    font-weight: 800;
    color: var(--v2-ink);
    letter-spacing: 0.06em;
    line-height: 1;
}
.qr-prep-brand-tag {
    font-family: var(--v2-f-mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--v2-ink-mute);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    line-height: 1;
}

/* Light mode — softer card, paper bg */
html.light .qr-prep-card {
    background:
        linear-gradient(180deg, rgba(255, 200, 0, 0.06) 0%, rgba(255, 200, 0, 0) 50%),
        rgba(255, 255, 255, 0.96);
    border-color: rgba(18, 18, 20, 0.10);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 1) inset,
        0 30px 70px -20px rgba(18, 18, 20, 0.30),
        0 0 0 1px rgba(18, 18, 20, 0.05);
}
html.light .qr-prep-card-glow {
    background: radial-gradient(60% 50% at 50% 0%, rgba(255, 200, 0, 0.20), transparent 70%);
}
html.light .qr-prep-grid {
    background: rgba(18, 18, 20, 0.025);
    border-color: rgba(255, 200, 0, 0.30);
}
html.light .qr-prep-dot { box-shadow: 0 0 4px rgba(255, 200, 0, 0.5); }
html.light .qr-prep-bar { background: rgba(18, 18, 20, 0.06); }
html.light .qr-prep-brand { border-top-color: rgba(18, 18, 20, 0.06); }

/* Mobile sizing */
@media (max-width: 540px) {
    .qr-prep-card { width: 290px; padding: var(--v2-sp-6) var(--v2-sp-5) var(--v2-sp-4); }
    .qr-prep-grid { width: 84px; height: 84px; padding: var(--v2-sp-1); gap: var(--v2-sp-1); }
    .qr-prep-scan { height: 12px; }
    @keyframes qrPrepScan {
        0%   { transform: translateY(-100%); opacity: 0; }
        20%  { opacity: 1; }
        80%  { opacity: 1; }
        100% { transform: translateY(84px); opacity: 0; }
    }
    .qr-prep-title { font-size: 14px; }
    .qr-prep-status { font-size: 11px; }
    .qr-prep-brand-mark { width: 26px; height: 26px; font-size: 14px; }
    .qr-prep-brand-text { font-size: 12px; }
    .qr-prep-brand-tag { font-size: 11px; }
}

/* Reduced motion: skip the animations, fade in/out only */
@media (prefers-reduced-motion: reduce) {
    .qr-prep-dot { animation: none; opacity: 0.92; transform: none; }
    .qr-prep-scan { animation: none; opacity: 0; }
    .qr-prep-bar-fill { animation: none; width: 60%; }
    .qr-prep-card { animation: none; transform: none; }
}

/* R17 — blogpost.twig single-post layout (2026-04-26)
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */
body#dash .blogpost-header,
body#outside .blogpost-header {
    margin-bottom: 18px;
}
body#dash .blogpost-back,
body#outside .blogpost-back {
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-2);
    padding: var(--v2-sp-2) var(--v2-sp-4);
    margin-top: 12px;
    border-radius: var(--v2-r-pill);
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    color: var(--v2-ink);
    font-family: var(--v2-f-thai);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    transition: background var(--v2-t-fast), color var(--v2-t-fast), transform var(--v2-t-fast), border-color var(--v2-t-fast);
}
body#dash .blogpost-back:hover,
body#outside .blogpost-back:hover {
    background: var(--v2-yellow-soft);
    border-color: rgba(255, 214, 10, 0.35);
    color: var(--v2-yellow);
    transform: translateX(-2px);
}
body#dash .blogpost-back > i,
body#outside .blogpost-back > i { font-size: 14px; }

/* --- Single-post card: wider, calmer reading layout --- */
body#dash .blog-card-single,
body#outside .blog-card-single {
    max-width: 920px;
    margin: 0 auto !important;
}
body#dash .blog-card-single .blog-image,
body#outside .blog-card-single .blog-image {
    aspect-ratio: 16 / 9;
    background: var(--v2-glass-2);
}
body#dash .blog-card-single .blog-image img,
body#outside .blog-card-single .blog-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0;
    max-width: none;
    margin: 0;
}
body#dash .blog-card-single .blog-content,
body#outside .blog-card-single .blog-content {
    padding: var(--v2-sp-6) var(--v2-sp-7) var(--v2-sp-7);
    gap: var(--v2-sp-3);
}
body#dash .blog-card-single .blog-title,
body#outside .blog-card-single .blog-title {
    font-size: var(--v2-fs-fluid-1);
    line-height: 1.3;
    margin: 0;
}
body#dash .blog-card-single .blog-text,
body#outside .blog-card-single .blog-text {
    font-family: var(--v2-f-thai);
    font-size: 14px;
    line-height: var(--v2-lh-body);
    color: var(--v2-ink-dim);
}
body#dash .blog-card-single .blog-text p,
body#outside .blog-card-single .blog-text p { margin: 0 0 14px; }
body#dash .blog-card-single .blog-text a,
body#outside .blog-card-single .blog-text a {
    color: var(--v2-yellow);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}
body#dash .blog-card-single .blog-text a:hover,
body#outside .blog-card-single .blog-text a:hover {
    color: var(--v2-yellow-2);
}
body#dash .blog-card-single:hover,
body#outside .blog-card-single:hover {
    transform: none; /* override list-card hover lift on single post */
    background: transparent;
}

@media (max-width: 540px) {
    body#dash .blog-card-single .blog-content,
    body#outside .blog-card-single .blog-content { padding: var(--v2-sp-5) var(--v2-sp-4) var(--v2-sp-6); }
    body#dash .blog-card-single .blog-text,
    body#outside .blog-card-single .blog-text { font-size: 14px; line-height: 1.7; }
    body#dash .blogpost-back,
    body#outside .blogpost-back { font-size: 12px; padding: var(--v2-sp-2) var(--v2-sp-3); }
}

/* R20 — guest-page theme toggle (segmented pill) (2026-04-26)
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */
body#outside .outside-switcher {
    display: inline-flex !important;
    align-items: center;
    gap: 2px;
    padding: var(--v2-sp-1);
    height: auto;
    width: auto;
    background: var(--v2-glass) !important;
    border: 1px solid var(--v2-line) !important;
    border-radius: var(--v2-r-pill);
    backdrop-filter: var(--v2-blur);
    -webkit-backdrop-filter: var(--v2-blur);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 4px 12px -4px rgba(0, 0, 0, 0.30);
}
/* Force BOTH buttons visible (defeat legacy display:none rules) */
body#outside .outside-switcher .switcher-item,
body#outside .outside-switcher .light-btn,
body#outside .outside-switcher .dark-btn,
.dark body#outside .outside-switcher .dark-btn,
.dark body#outside .outside-switcher .light-btn,
html.light body#outside .outside-switcher .light-btn,
html.light body#outside .outside-switcher .dark-btn {
    display: inline-flex !important;
    width: 34px !important;
    height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: var(--v2-r-pill)!important;
    background: transparent !important;
    border: 0 !important;
    color: var(--v2-ink-mute) !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer;
    transition: background var(--v2-t-base) var(--v2-ease), color var(--v2-t-base) var(--v2-ease), transform var(--v2-t-base) var(--v2-ease) !important;
    box-shadow: none !important;
    font-size: 14px !important;
}
body#outside .outside-switcher .switcher-item svg {
    width: 16px;
    height: 16px;
    display: block;
}
body#outside .outside-switcher .switcher-item:hover {
    background: var(--v2-glass-2) !important;
    color: var(--v2-ink) !important;
}
/* Active state — current mode = yellow filled circle */
html.dark body#outside .outside-switcher .dark-btn,
html.light body#outside .outside-switcher .light-btn {
    background: var(--v2-yellow) !important;
    color: var(--v2-yellow-ink) !important;
    box-shadow: 0 4px 12px -4px var(--v2-yellow-glow, rgba(255, 214, 10, 0.55)) !important;
}
html.dark body#outside .outside-switcher .dark-btn:hover,
html.light body#outside .outside-switcher .light-btn:hover {
    background: var(--v2-yellow-2) !important;
}


/* ============================================================
 *  R18 — signin.twig Google Sign-In (2026-04-26)
 *  v2 SaaS-grade pattern: hairline divider + glass pill button
 *  with yellow halo on hover. Hides Perfect Panel's official GSI
 *  button (used as a click proxy) and presents our own custom UI.
 * ============================================================ */

/* Hide GSI's own widgets — we trigger them via the proxy button below.
   Simple display:none matches Likester's working pattern. Earlier sr-only
   approach (clip + 1×1 + pointer-events:none) made GSI refuse to render
   the button. */
.signin-google-hidden {
    display: none !important;
}

/* Hairline divider with centered "หรือ" text */
.signin-divider {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-3);
    margin: 22px 0 16px;
    color: var(--v2-ink-mute);
    font-family: var(--v2-f-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    user-select: none;
    -webkit-user-select: none;
}
.signin-divider::before,
.signin-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--v2-line) 30%,
        var(--v2-line) 70%,
        transparent 100%);
}
.signin-divider-text {
    flex: 0 0 auto;
    color: var(--v2-ink-mute);
}

/* Glass pill Google button — premium SaaS feel */
.btn-google-v2 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--v2-sp-3);
    width: 100%;
    height: 48px;
    padding: 0 var(--v2-sp-5);
    border-radius: var(--v2-r-pill);
    background: var(--v2-glass-2);
    border: 1px solid var(--v2-line);
    color: var(--v2-ink);
    font-family: var(--v2-f-dis);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none !important;
    transition:
        background var(--v2-t-base) var(--v2-ease),
        border-color var(--v2-t-base) var(--v2-ease),
        transform var(--v2-t-base) var(--v2-ease),
        box-shadow var(--v2-t-base) var(--v2-ease);
    position: relative;
    overflow: hidden;
    isolation: isolate;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.05) inset,
        0 4px 12px -4px rgba(0, 0, 0, 0.30);
}
.btn-google-v2::before {
    /* Yellow halo wash, hidden until hover */
    content: "";
    position: absolute;
    inset: -50% -25% auto -25%;
    height: 200%;
    background: radial-gradient(60% 50% at 50% 0%, rgba(255, 214, 10, 0.18), transparent 70%);
    opacity: 0;
    transition: opacity var(--v2-t-base) var(--v2-ease);
    pointer-events: none;
    z-index: -1;
}
.btn-google-v2:hover {
    background: var(--v2-glass-3);
    border-color: rgba(255, 214, 10, 0.35);
    transform: translateY(-1px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.08) inset,
        0 8px 22px -6px rgba(0, 0, 0, 0.45),
        0 0 0 4px rgba(255, 214, 10, 0.10);
}
.btn-google-v2:hover::before { opacity: 1; }
.btn-google-v2:active {
    transform: translateY(0);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.05) inset,
        0 3px 8px -3px rgba(0, 0, 0, 0.35);
}
.btn-google-v2:focus-visible {
    outline: 0;
    border-color: var(--v2-yellow);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.05) inset,
        0 4px 12px -4px rgba(0, 0, 0, 0.30),
        0 0 0 4px rgba(255, 214, 10, 0.22);
}
.btn-google-v2-icon {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--v2-r-xs);
    background: #fff;
    flex-shrink: 0;
    box-shadow: var(--v2-elev-1);
}
.btn-google-v2-icon svg { display: block; }
.btn-google-v2-text {
    line-height: 1;
    white-space: nowrap;
}

/* Light mode parity */
html.light .btn-google-v2 {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(18, 18, 20, 0.10);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.7) inset,
        0 4px 12px -4px rgba(18, 18, 20, 0.10);
}
html.light .btn-google-v2:hover {
    background: #ffffff;
    border-color: rgba(255, 200, 0, 0.45);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 8px 22px -6px rgba(18, 18, 20, 0.18),
        0 0 0 4px rgba(255, 200, 0, 0.14);
}

/* Mobile tighter sizing */
@media (max-width: 540px) {
    .signin-divider { margin: 18px 0 14px; font-size: 11px; gap: var(--v2-sp-2); }
    .btn-google-v2 { height: 46px; font-size: 13px; gap: var(--v2-sp-2); }
    .btn-google-v2-icon { width: 20px; height: 20px; }
    .btn-google-v2-icon svg { width: 16px; height: 16px; }
}

/* R23 — signup.twig full v2 redesign (2026-04-27)
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */

/* Outer auth section — full viewport, dark editorial bg */
body#outside .v2-auth {
    position: relative;
    min-height: 100vh;
    background: var(--v2-bg);
    color: var(--v2-ink);
    padding: var(--v2-sp-6) var(--v2-sp-6) 48px;
    overflow: hidden;
    isolation: isolate;
}
body#outside .v2-auth::before {
    /* Subtle yellow halo behind content */
    content: "";
    position: absolute;
    inset: -20% -10% 20% -10%;
    background: radial-gradient(60% 50% at 50% 50%, rgba(255, 214, 10, 0.10), transparent 70%);
    filter: blur(60px);
    pointer-events: none;
    z-index: 0;
}

/* Header — logo + back button */
body#outside .v2-auth-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1280px;
    margin: 0 auto 36px;
    padding: var(--v2-sp-3) 0;
    position: relative;
    z-index: 2;
}
body#outside .v2-auth-logo {
    display: inline-flex;
    align-items: center;
    height: 44px;
    text-decoration: none !important;
    color: var(--v2-ink);
    font-family: var(--v2-f-dis);
    font-weight: 800;
    font-size: 20px;
    letter-spacing: 0.04em;
}
body#outside .v2-auth-logo img {
    height: 38px;
    width: auto;
    display: block;
}
body#outside .v2-auth-back {
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-2);
    padding: var(--v2-sp-2) var(--v2-sp-4);
    border-radius: var(--v2-r-pill);
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    color: var(--v2-ink);
    font-family: var(--v2-f-thai);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    transition: background var(--v2-t-base) var(--v2-ease), border-color var(--v2-t-base) var(--v2-ease), transform var(--v2-t-base) var(--v2-ease);
    backdrop-filter: var(--v2-blur);
    -webkit-backdrop-filter: var(--v2-blur);
}
body#outside .v2-auth-back:hover {
    background: var(--v2-glass-2);
    border-color: rgba(255, 214, 10, 0.35);
    transform: translateX(-2px);
}
body#outside .v2-auth-back > i { font-size: 14px; color: var(--v2-yellow); }

/* Wrap — 2 column grid */
body#outside .v2-auth-wrap {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 64px;
    align-items: start;
    position: relative;
    z-index: 1;
}
@media (max-width: 991px) {
    body#outside .v2-auth-wrap {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    body#outside .v2-auth-left { display: none; } /* hide benefits on mobile, form takes priority */
}

/* Left side — benefits panel */
body#outside .v2-auth-left {
    padding-top: var(--v2-sp-3);
}
body#outside .v2-auth-h1 {
    font-family: var(--v2-f-dis);
    font-size: var(--v2-fs-fluid-3);
    font-weight: 800;
    line-height: var(--v2-lh-tight);
    margin: 14px 0 18px;
    color: var(--v2-ink);
}
body#outside .v2-auth-sub {
    font-family: var(--v2-f-thai);
    font-size: 14px;
    line-height: 1.7;
    color: var(--v2-ink-dim);
    margin: 0 0 32px;
    max-width: 520px;
}
body#outside .v2-auth-sub strong {
    color: var(--v2-ink);
    font-weight: 700;
}
body#outside .v2-auth-benefits {
    list-style: none;
    margin: 0 0 32px;
    padding: 0;
    display: grid;
    gap: var(--v2-sp-3);
}
body#outside .v2-auth-benefits li {
    display: flex;
    align-items: flex-start;
    gap: var(--v2-sp-3);
    padding: var(--v2-sp-3) var(--v2-sp-4);
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-md);
    backdrop-filter: var(--v2-blur);
    -webkit-backdrop-filter: var(--v2-blur);
    transition: background var(--v2-t-base) var(--v2-ease), border-color var(--v2-t-base) var(--v2-ease), transform var(--v2-t-base) var(--v2-ease);
}
body#outside .v2-auth-benefits li:hover {
    background: var(--v2-glass-2);
    border-color: rgba(255, 214, 10, 0.20);
    transform: translateY(-1px);
}
body#outside .v2-auth-benefits .ic {
    width: 38px;
    height: 38px;
    border-radius: var(--v2-r-sm);
    background: var(--v2-yellow-soft);
    color: var(--v2-yellow);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    border: 1px solid rgba(255, 214, 10, 0.18);
}
body#outside .v2-auth-benefits li > div {
    display: flex;
    flex-direction: column;
    gap: var(--v2-sp-1);
    min-width: 0;
}
body#outside .v2-auth-benefits strong {
    font-family: var(--v2-f-dis);
    font-size: 14px;
    font-weight: 700;
    color: var(--v2-ink);
    line-height: 1.3;
}
body#outside .v2-auth-benefits small {
    font-family: var(--v2-f-thai);
    font-size: 12px;
    line-height: 1.5;
    color: var(--v2-ink-mute);
}

/* Trust strip — star rating */
body#outside .v2-auth-trust {
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-2);
    padding: var(--v2-sp-2) var(--v2-sp-4);
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-pill);
    font-family: var(--v2-f-thai);
    font-size: 12px;
    color: var(--v2-ink-dim);
    backdrop-filter: var(--v2-blur);
    -webkit-backdrop-filter: var(--v2-blur);
}
body#outside .v2-auth-trust .v2-stars {
    display: inline-flex;
    gap: 2px;
    color: var(--v2-yellow);
    font-size: 11px;
}
body#outside .v2-auth-trust strong {
    color: var(--v2-ink);
    font-family: var(--v2-f-dis);
    font-weight: 700;
    font-size: 13px;
}

/* Right side — form column (re-uses .login-card already styled in v2) */
body#outside .v2-auth-right {
    width: 100%;
    max-width: 480px;
    margin-left: auto;
}
@media (max-width: 991px) {
    body#outside .v2-auth-right {
        max-width: 100%;
        margin: 0 auto;
    }
}
body#outside .v2-auth-right .v2-signin-head {
    text-align: left;
    margin-bottom: 18px;
}
body#outside .v2-auth-right .v2-split-login-title {
    font-family: var(--v2-f-dis);
    font-size: var(--v2-fs-fluid-1);
    font-weight: 800;
    line-height: var(--v2-lh-tight);
    margin: 8px 0 6px;
    color: var(--v2-ink);
}
body#outside .v2-auth-right .v2-signin-head p {
    font-family: var(--v2-f-thai);
    font-size: 13px;
    color: var(--v2-ink-mute);
    margin: 0;
}

/* Terms checkbox row */
body#outside .v2-auth-terms {
    display: flex;
    align-items: flex-start;
    gap: var(--v2-sp-2);
    margin: 4px 0 14px !important;
    padding: var(--v2-sp-3) var(--v2-sp-3);
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-sm);
}
body#outside .v2-auth-terms input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 2px 0 0;
    accent-color: var(--v2-yellow);
    flex-shrink: 0;
    cursor: pointer;
}
body#outside .v2-auth-terms label {
    font-family: var(--v2-f-thai);
    font-size: 12px;
    line-height: 1.5;
    color: var(--v2-ink-dim);
    margin: 0;
    cursor: pointer;
}
body#outside .v2-auth-terms a {
    color: var(--v2-yellow);
    text-decoration: underline;
    text-underline-offset: 2px;
}
body#outside .v2-auth-terms a:hover { color: var(--v2-yellow-2); }

/* Submit button — pill style with arrow */
body#outside .v2-auth-right .btn-primary.btn-block {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--v2-sp-2);
    width: 100%;
    height: 50px;
    padding: 0 var(--v2-sp-6);
    border-radius: var(--v2-r-pill);
    background: var(--v2-yellow) !important;
    color: var(--v2-yellow-ink) !important;
    border: 0 !important;
    font-family: var(--v2-f-dis);
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 8px 22px -6px var(--v2-yellow-glow, rgba(255, 214, 10, 0.55)) !important;
    transition: transform var(--v2-t-base) var(--v2-ease), box-shadow var(--v2-t-base) var(--v2-ease), background var(--v2-t-base) var(--v2-ease);
}
body#outside .v2-auth-right .btn-primary.btn-block:hover {
    background: var(--v2-yellow-2) !important;
    transform: translateY(-1px);
    box-shadow: 0 12px 28px -8px var(--v2-yellow-glow, rgba(255, 214, 10, 0.65)) !important;
}
body#outside .v2-auth-right .btn-primary.btn-block:active {
    transform: translateY(0);
}
body#outside .v2-auth-right .btn-primary.btn-block > i {
    font-size: 16px;
    transition: transform var(--v2-t-base) var(--v2-ease);
}
body#outside .v2-auth-right .btn-primary.btn-block:hover > i {
    transform: translateX(2px);
}

/* Footer links — "มีบัญชีอยู่แล้ว? เข้าสู่ระบบ"
   Reset legacy `.frgt-pass { background: rgba(232,255,49,0.15); border: 1px solid var(--main-color) }`
   at style.css:7707 which painted a yellow-tinted bordered box around the link.
   Scoped to .login-card so both signin AND signup form footers get the clean look. */
body#outside .login-card .frgt-pass,
body#outside .v2-auth-right .frgt-pass {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--v2-sp-2);
    margin-top: 18px;
    padding: var(--v2-sp-3) 0 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-top: 1px solid var(--v2-line) !important;
    border-radius: 0!important;
    font-family: var(--v2-f-thai);
    font-size: 13px;
    color: var(--v2-ink-mute);
}
body#outside .v2-auth-right .frgt-pass a {
    color: var(--v2-ink);
    text-decoration: none !important;
    transition: color var(--v2-t-base) var(--v2-ease);
}
body#outside .v2-auth-right .frgt-pass a:hover { color: var(--v2-yellow); }
body#outside .v2-auth-right .frgt-pass a strong { font-weight: 700; }

/* Mobile sizing */
@media (max-width: 540px) {
    body#outside .v2-auth { padding: var(--v2-sp-4) var(--v2-sp-4) var(--v2-sp-7); }
    body#outside .v2-auth-header { margin-bottom: 24px; padding: var(--v2-sp-2) 0; }
    body#outside .v2-auth-back { padding: var(--v2-sp-2) var(--v2-sp-3); font-size: 12px; }
    body#outside .v2-auth-back > i { font-size: 13px; }
    body#outside .v2-auth-back span { display: none; }
    body#outside .v2-auth-right .v2-split-login-title { font-size: 26px; }
    body#outside .v2-auth-right .btn-primary.btn-block { height: 46px; font-size: 14px; }
}

/* /services redesign — "boost gracefully" catalog (from design bundle
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */

/* ── HERO · signin-DNA showcase band ── */
.svc34 .cat-hero { position: relative; overflow: hidden; border-radius: var(--v2-r-lg); border: 1px solid var(--v2-line); background: var(--v2-glass); backdrop-filter: var(--v2-blur); -webkit-backdrop-filter: var(--v2-blur); box-shadow: var(--v2-shadow-1); margin-top: 6px; }
.svc34 .cat-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(900px 460px at 88% 10%, var(--v2-yellow-soft), transparent 60%), radial-gradient(700px 420px at 0% 120%, rgba(120,90,255,0.10), transparent 60%); }
.svc34 .cat-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--v2-sp-6); padding: 40px 44px; }
.svc34 .cat-hero-left { display: flex; flex-direction: column; gap: var(--v2-sp-4); justify-content: center; }
.svc34 .cat-hero h1 { font-family: var(--v2-f-dis); font-weight: 800; font-size: var(--v2-fs-fluid-2); letter-spacing: 0; line-height: 0.98; margin: 0; max-width: 14ch; text-wrap: balance; color: var(--v2-ink); }
.svc34 .cat-hero h1 i { color: var(--v2-yellow-2); font-style: italic; }
.svc34 .cat-hero h1 i.serif { font-family: var(--v2-f-serif); font-weight: 400; }
.svc34 .cat-hero .lead { color: var(--v2-ink-dim); font-size: 14px; line-height: var(--v2-lh-body); max-width: 48ch; margin: 0; }
.svc34 .cat-stats { display: flex; gap: var(--v2-sp-7); flex-wrap: wrap; margin-top: 4px; }
.svc34 .cat-stats .m { font-family: var(--v2-f-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--v2-ink-mute); text-transform: uppercase; }
.svc34 .cat-stats .m b { display: block; font-family: var(--v2-f-dis); color: var(--v2-ink); font-size: 26px; letter-spacing: 0; margin-top: 5px; text-transform: none; font-weight: 700; }
.svc34 .cat-stats .m b i { color: var(--v2-yellow-2); font-style: normal; }
.svc34 .cat-hero-cta { display: flex; gap: var(--v2-sp-2); flex-wrap: wrap; margin-top: 6px; }
.svc34 .cat-hero-right { position: relative; min-height: 260px; }
.svc34 .cat-float { position: absolute; padding: var(--v2-sp-4) var(--v2-sp-4); border-radius: var(--v2-r-lg); background: var(--v2-glass-3); border: 1px solid var(--v2-line); backdrop-filter: var(--v2-blur); -webkit-backdrop-filter: var(--v2-blur); box-shadow: var(--v2-elev-2); width: max-content; max-width: 90%; }
.svc34 .cat-float .k { font-family: var(--v2-f-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--v2-ink-mute); text-transform: uppercase; display: flex; align-items: center; gap: var(--v2-sp-2); }
.svc34 .cat-float .k .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--v2-ok); box-shadow: 0 0 10px var(--v2-ok); }
.svc34 .cat-float .v { font-family: var(--v2-f-dis); font-size: 20px; font-weight: 700; letter-spacing: 0; margin-top: 6px; color: var(--v2-ink); }
.svc34 .cat-float .v i { color: var(--v2-yellow-2); font-style: italic; }
.svc34 .cat-float .v small { color: var(--v2-ink-mute); font-size: 12px; }
.svc34 .cat-float.f1 { top: 6%; right: 4%; transform: rotate(3deg); }
.svc34 .cat-float.f2 { top: 40%; left: 2%; transform: rotate(-3deg); }
.svc34 .cat-float.f3 { bottom: 4%; right: 12%; transform: rotate(2deg); }
@media (prefers-reduced-motion: no-preference) { .svc34 .cat-float { animation: svc34Float 6s ease-in-out infinite; } .svc34 .cat-float.f2 { animation-delay: -2s; } .svc34 .cat-float.f3 { animation-delay: -4s; } }
@keyframes svc34Float { 0%,100% { translate: 0 0; } 50% { translate: 0 -8px; } }

/* ── login gate (guest) ── */
.svc34 .cat-gate { display: flex; align-items: center; gap: var(--v2-sp-3); flex-wrap: wrap; padding: var(--v2-sp-3) var(--v2-sp-4); border-radius: var(--v2-r-md); margin: 18px 0 0; background: var(--v2-yellow-soft); border: 1px solid rgba(255,200,0,0.28); }
.svc34 .cat-gate .lk { width: 34px; height: 34px; border-radius: var(--v2-r-sm); flex-shrink: 0; display: grid; place-items: center; background: var(--v2-yellow); color: var(--v2-yellow-ink); font-family: var(--v2-f-mono); }
.svc34 .cat-gate p { margin: 0; font-size: 13px; color: var(--v2-ink-dim); flex: 1; min-width: 200px; }
.svc34 .cat-gate p b { color: var(--v2-ink); }
.svc34 .cat-gate .acts { display: flex; gap: var(--v2-sp-2); flex-wrap: wrap; }
.svc34 .cat-gate .btn { text-decoration: none; }

/* ── CONTROLS · search + category filter ── */
.svc34 .cat-controls { display: flex; gap: var(--v2-sp-2); flex-wrap: wrap; align-items: center; margin: 26px 0 6px; }
.svc34 .cat-search { flex: 1 1 280px; display: flex; gap: var(--v2-sp-2); align-items: center; padding: var(--v2-sp-3) var(--v2-sp-4); border-radius: var(--v2-r-md); background: var(--v2-glass-2); border: 1px solid var(--v2-line); backdrop-filter: var(--v2-blur); }
.svc34 .cat-search:focus-within { border-color: var(--v2-yellow); }
.svc34 .cat-search .ic { color: var(--v2-ink-mute); font-family: var(--v2-f-mono); }
.svc34 .cat-search input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: var(--v2-ink); font: inherit; font-family: var(--v2-f-thai); font-size: 14px; }
.svc34 .cat-search input::placeholder { color: var(--v2-ink-soft); }
.svc34 .cat-filter-dd { position: relative; }
.svc34 .cat-filter-dd > .btn { display: inline-flex; align-items: center; gap: var(--v2-sp-2); padding: var(--v2-sp-3) var(--v2-sp-4); border-radius: var(--v2-r-md); background: var(--v2-glass-2); border: 1px solid var(--v2-line); color: var(--v2-ink); font-family: var(--v2-f-dis); font-weight: 600; font-size: 13px; cursor: pointer; white-space: nowrap; }
.svc34 .cat-filter-dd > .btn:hover { background: var(--v2-glass-3); }
.svc34 .cat-filter-dd .dropdown-menu { background: var(--v2-glass-3); border: 1px solid var(--v2-line-strong); border-radius: var(--v2-r-md); backdrop-filter: var(--v2-blur-strong); padding: var(--v2-sp-1); max-height: 360px; overflow-y: auto; }
.svc34 .cat-filter-dd .dropdown-item { color: var(--v2-ink-dim); padding: var(--v2-sp-2) var(--v2-sp-3); border-radius: var(--v2-r-sm); font-size: 13px; text-decoration: none; display: block; }
.svc34 .cat-filter-dd .dropdown-item:hover { background: var(--v2-yellow-soft); color: var(--v2-ink); }

/* ── section label per category ── */
.svc34 .cat-sec { display: flex; gap: var(--v2-sp-3); align-items: baseline; margin: 30px 0 12px; flex-wrap: wrap; }
.svc34 .cat-sec h3 { font-family: var(--v2-f-dis); font-size: 20px; letter-spacing: 0; margin: 0; font-weight: 700; display: flex; align-items: center; gap: var(--v2-sp-2); color: var(--v2-ink); }
.svc34 .cat-sec h3 img { max-width: calc(1em + 6px); max-height: calc(1em + 6px); vertical-align: middle; }
.svc34 .cat-sec .count { font-family: var(--v2-f-mono); font-size: 11px; color: var(--v2-ink-mute); letter-spacing: 0.12em; }

/* ── nothing-found (hidden until search empties) ── */
.svc34 .nothing-found { display: none; margin: 14px 0; }
.svc34 .nothing-found .cat-empty { text-align: center; padding: 50px var(--v2-sp-5); color: var(--v2-ink-mute); background: var(--v2-glass); border: 1px solid var(--v2-line); border-radius: var(--v2-r-lg); }
.svc34 .nothing-found .big { font-family: var(--v2-f-dis); font-size: 20px; color: var(--v2-ink); letter-spacing: 0; margin-bottom: 6px; }

/* ── SERVICE TABLE (desktop) ── */
.svc34 .svc-tblwrap { background: var(--v2-glass); border: 1px solid var(--v2-line); border-radius: var(--v2-r-lg); overflow: hidden; backdrop-filter: var(--v2-blur); }
.svc34 .svc-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.svc34 .svc-tbl thead th { font-family: var(--v2-f-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--v2-ink-mute); text-transform: uppercase; text-align: left; padding: var(--v2-sp-3) var(--v2-sp-4); border-bottom: 1px solid var(--v2-line); background: var(--v2-glass-2); font-weight: 500; white-space: nowrap; }
.svc34 .svc-tbl th.num, .svc34 .svc-tbl td.num { text-align: right; }
.svc34 .svc-tbl th.act, .svc34 .svc-tbl td.act { text-align: right; }
/* neutralize theme34's .service-item card styling when it's a table row */
.svc34 .svc-tbl tr.service-item { display: table-row; background: transparent !important; border: 0 !important; padding: 0 !important; border-radius: 0!important; }
.svc34 .svc-tbl tbody td { padding: var(--v2-sp-4) var(--v2-sp-4); border-bottom: 1px dashed var(--v2-line); color: var(--v2-ink-dim); vertical-align: middle; }
.svc34 .svc-tbl tbody tr.service-item:last-child td { border-bottom: 0; }
.svc34 .svc-tbl tbody tr.service-item:hover td { background: var(--v2-glass-2); }
.svc34 .svc-tbl .services-id { display: inline-block; font-family: var(--v2-f-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; color: var(--v2-yellow); background: var(--v2-yellow-soft); padding: var(--v2-sp-1) var(--v2-sp-2); border-radius: var(--v2-r-xs); margin: 0; }
.svc34 .svc-tbl .name-cell { min-width: 320px; }
.svc34 .svc-tbl .nm-row { display: flex; align-items: center; gap: var(--v2-sp-2); }
.svc34 .svc-tbl .ss-name { font-family: var(--v2-f-dis); font-size: 14px; font-weight: 600; color: var(--v2-ink); letter-spacing: 0; line-height: var(--v2-lh-tight); }
.svc34 .svc-tbl .services-rate { font-family: var(--v2-f-dis); font-weight: 800; font-size: 16px; letter-spacing: 0; color: var(--v2-yellow-2); white-space: nowrap; }
.svc34 .svc-tbl td.num b { color: var(--v2-ink); font-family: var(--v2-f-dis); font-weight: 700; }
.svc34 .svc-tbl .avg-val { color: var(--v2-yellow-2); font-family: var(--v2-f-dis); font-weight: 700; white-space: nowrap; }
.svc34 .svc-tbl .btn-favorite { color: var(--v2-ink-mute); cursor: pointer; }
.svc34 .svc-tbl .btn-favorite .favorite-active, .svc34 .svc-tbl .btn-favorite span[data-favorite-icon].fas { color: var(--v2-yellow); }
.svc34 .svc-tbl .badgearea:not(:empty) { display: inline-flex; gap: var(--v2-sp-1); flex-wrap: wrap; margin-left: 6px; }
.svc34 .svc-row-actions { display: inline-flex; gap: var(--v2-sp-2); justify-content: flex-end; flex-wrap: nowrap; }
.svc34 .svc-row-actions .btn { white-space: nowrap; text-decoration: none; }

/* ── MOBILE · stack the table into cards (≤760px) ── */
@media (max-width: 760px) {
  .svc34 .svc-tblwrap { background: transparent; border: 0; border-radius: 0; overflow: visible; }
  .svc34 .svc-tbl, .svc34 .svc-tbl tbody { display: block; }
  .svc34 .svc-tbl thead { display: none; }
  .svc34 .svc-tbl tr.service-item { display: block; background: var(--v2-glass) !important; border: 1px solid var(--v2-line) !important; border-radius: var(--v2-r-lg)!important; padding: var(--v2-sp-4) !important; margin-bottom: 12px; }
  .svc34 .svc-tbl tbody tr.service-item:hover td { background: transparent; }
  .svc34 .svc-tbl tbody td { display: flex; justify-content: space-between; align-items: center; gap: var(--v2-sp-3); padding: var(--v2-sp-2) 0; border-bottom: 0; text-align: right; }
  .svc34 .svc-tbl tbody td.name-cell { padding-bottom: var(--v2-sp-3); margin-bottom: 8px; border-bottom: 1px dashed var(--v2-line); }
  .svc34 .svc-tbl td::before { content: attr(data-label); font-family: var(--v2-f-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--v2-ink-mute); text-transform: uppercase; text-align: left; flex-shrink: 0; }
  .svc34 .svc-tbl td.name-cell::before, .svc34 .svc-tbl td.act::before { display: none; }
  .svc34 .svc-tbl td.act { padding-top: var(--v2-sp-3); }
  .svc34 .svc-tbl .name-cell { min-width: 0; }
  .svc34 .svc-tbl .nm-row { width: 100%; }
  .svc34 .svc-row-actions { width: 100%; }
  .svc34 .svc-row-actions .btn { flex: 1; justify-content: center; }
}

/* ── footer meta ── */
.svc34 .cat-foot { text-align: center; margin-top: 40px; }
.svc34 .cat-foot .meta { font-family: var(--v2-f-mono); font-size: 11px; color: var(--v2-ink-mute); letter-spacing: 0.12em; margin-top: 12px; }

/* ── responsive hero ── */
@media (max-width: 920px) { .svc34 .cat-hero-grid { grid-template-columns: 1fr; padding: var(--v2-sp-7) var(--v2-sp-6); gap: var(--v2-sp-5); } .svc34 .cat-hero-right { display: none; } }
@media (max-width: 600px) { .svc34 .cat-hero-grid { padding: var(--v2-sp-6) var(--v2-sp-5); } .svc34 .cat-stats { gap: var(--v2-sp-5); } .svc34 .cat-stats .m b { font-size: 20px; } }

/* A57 · บล็อก .svc-modal (9 กฎ) ถูกลบ 2026-08-04 — class นี้ไม่เคยถูกใส่ที่ไหนเลย
   หลักฐาน: ไม่มีใน *.twig · ไม่มีใน *.js · DOM สดของ /services มี modal 340 ตัวและ
   .svc-modal นับได้ 0 · HTML ฝั่ง guest ของ /services (1.18 MB) ก็ไม่มี
   modal คำอธิบายบริการใช้ id="detail{id}" ซึ่งกฎ R15.1 คุมอยู่แล้ว
   ‼ ถ้าวันหนึ่งต้องการกล่องกว้าง 540px กลับมา ให้ดู git log ของ commit นี้ */

.api-code-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    border-radius: var(--v2-r-sm);
}

/* P1: Hide sidebar hamburger on desktop */
@media (min-width: 992px) {
    body#dash #db-menuToggle { display: none !important; }
}
/* P1: Override legacy sidebar collapse-to-80px on desktop for body#dash. */
@media (min-width: 992px) {
}

/* FIX: guest mobile menu */
@media (max-width: 991px) {
  body#outside .hm-wrapper.active {
    display: block !important;
    position: fixed; top: 60px; left: 0; right: 0; bottom: 0; z-index: 60;
    padding: var(--v2-sp-4) var(--v2-sp-4) var(--v2-sp-6); overflow-y: auto;
    background: var(--v2-nav-bg); backdrop-filter: var(--v2-blur-strong); -webkit-backdrop-filter: var(--v2-blur-strong);
  }
  body#outside .hm-wrapper.active .row-btn { flex-direction: column; align-items: stretch; gap: var(--v2-sp-3); }
  body#outside .hm-wrapper.active .header-menu { flex-direction: column; align-items: stretch; gap: var(--v2-sp-1); }
  body#outside .hm-wrapper.active .header-menu .hm-link { justify-content: flex-start; font-size: 16px; padding: var(--v2-sp-3) var(--v2-sp-3); }
  body#outside .hm-wrapper.active .col, body#outside .hm-wrapper.active .col-auto,
  body#outside .hm-wrapper.active .col-lg-auto, body#outside .hm-wrapper.active .col-6,
  body#outside .hm-wrapper.active .col-12 { width: 100%; max-width: 100%; flex: 0 0 100%; }
  body#outside .hm-wrapper.active .btn, body#outside .hm-wrapper.active .btn-100 { width: 100%; justify-content: center; }
  body#outside .hm-wrapper.active .home-logo { display: none; }
  body#outside .hm-wrapper.active .m-hidden { display: block !important; }
  body#outside .hm-wrapper.active .row-btn > .d-flex { flex-direction: column; width: 100%; align-items: stretch; gap: var(--v2-sp-2); }
  body#outside .hm-wrapper.active .outside-switcher { display: none !important; }
}

/* FIX: /services ID badge */
body#outside .sit-first .services-id, body#dash .sit-first .services-id { margin: 0 !important; align-self: flex-start; }
body#outside .sit-first, body#dash .sit-first { align-items: flex-start; gap: var(--v2-sp-2); }
body#outside .services-title, body#dash .services-title { flex: 1; }

/* FIX: blogpost — remove fixed aspect-ratio so image shows at natural height */
body#outside .blog-image.blogpost-image,
body#dash .blog-image.blogpost-image {
  aspect-ratio: auto;
  background: transparent;
  max-height: 520px;
  border-radius: var(--v2-r-md) var(--v2-r-md) 0 0;
}
body#outside .blog-image.blogpost-image img,
body#dash .blog-image.blogpost-image img {
  width: 100%; height: auto; object-fit: cover;
  max-height: 520px; border-radius: 0;
}


/* A3 — Soft Panel  ต่อท้ายทั้งชุด ไม่แตะกฎเดิมสักบรรทัด
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */

/* ADSERVE · Soft Panel signature layer
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */

/* ─── 1 · TOKENS ─────────────────────────────────────────── */
html.dark {
    --adv-bg:            #0c0c10;
    --adv-glow:          rgba(255, 180, 0, 0.13);
    --adv-panel-top:     #1a1a22;
    --adv-panel-bot:     #16161d;
    --adv-panel-line:    #24242e;
    --adv-inner:         #20202a;
    --adv-inner-top:     #24242f;
    --adv-inner-line:    #2f2f3b;
    --adv-hair:          #2e2e3a;
    --adv-mute:          #9a9aa6;   /* 5.1:1 บนแผงที่สว่างที่สุด — ห้ามใช้เข้มกว่านี้กับตัวอักษร */
    --adv-lift:          inset 0 1px 0 rgba(255,255,255,0.06), 0 24px 48px -32px rgba(0,0,0,0.9);
    --adv-lift-sm:       inset 0 1px 0 rgba(255,255,255,0.06), 0 18px 36px -28px rgba(0,0,0,0.9);
    --adv-lift-lg:       inset 0 1px 0 rgba(255,255,255,0.06), 0 28px 56px -34px rgba(0,0,0,0.95);
    --adv-sel-glow:      0 10px 26px -14px rgba(255,214,10,0.45);
    --adv-btn:           linear-gradient(180deg, #ffe24a, #ffc400);
    --adv-btn-lift:      inset 0 1px 0 rgba(255,255,255,0.5), 0 14px 30px -12px rgba(255,190,0,0.55);
    --adv-stub-bg:       #ffd60a;       /* ผิวด้าน — ห้ามใส่ไล่สีเงา */
    --adv-stub-ink:      #1a1500;
    --adv-perf:          rgba(26,21,0,0.20);
}

html, html.light {
    --adv-bg:            #eceae4;
    --adv-glow:          rgba(255, 200, 0, 0.20);
    --adv-panel-top:     #ffffff;
    --adv-panel-bot:     #fdfcfa;
    --adv-panel-line:    #e4e2da;
    --adv-inner:         #f2f0ea;
    --adv-inner-top:     #fbf9f2;
    --adv-inner-line:    #dcd9d1;
    --adv-hair:          #dcd9d1;
    /* was #6b6b73 at 4.63:1 — measured on plain white. On the tinted CTA block
       (#eceae4) the same value is 4.39, and .v2-eyebrow lives there. */
    --adv-mute:          #666670;   /* 4.72:1 บนแผงที่เข้มที่สุดในโหมดสว่าง */
    --adv-lift:          0 1px 0 rgba(255,255,255,0.9) inset, 0 18px 36px -28px rgba(60,50,20,0.45);
    --adv-lift-sm:       0 1px 0 rgba(255,255,255,0.9) inset, 0 14px 28px -24px rgba(60,50,20,0.4);
    --adv-lift-lg:       0 1px 0 rgba(255,255,255,0.95) inset, 0 24px 48px -30px rgba(60,50,20,0.45);
    --adv-sel-glow:      0 10px 24px -14px rgba(255,200,0,0.5);
    --adv-btn:           linear-gradient(180deg, #ffd233, #ffbe00);
    --adv-btn-lift:      inset 0 1px 0 rgba(255,255,255,0.55), 0 14px 30px -12px rgba(255,190,0,0.5);
    --adv-stub-bg:       #ffc800;
    --adv-stub-ink:      #1a1500;
    --adv-perf:          rgba(26,21,0,0.20);
}

/* ─── 2 · s1 · แสงเหลืองมุมซ้ายบน ─────────────────────────── */
/* ตั้งที่ html ด้วย ไม่ใช่แค่ body ไม่งั้นพื้นไม่คลุมพื้นที่เลื่อน */
html:has(body#dash), html:has(body#outside) { background: var(--adv-bg); }

body#dash, body#outside {
    background:
        radial-gradient(900px 620px at 6% -14%, var(--adv-glow), transparent 58%),
        var(--adv-bg);
    background-attachment: fixed;
}
/* orb เดิมไม่ต้องใช้แล้ว แสงมาจากทิศเดียว */
body#dash .v2-orbs, body#outside .v2-orbs { display: none; }

/* ─── 3 · แผงลอย ──────────────────────────────────────────── */
/* This block is "floating panels" and forces background + border + shadow with
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */
/* A46 · ‼ ห้ามใส่ body#dash .card, .app-widget, #up-header.header กลับเข้ากลุ่มนี้
   ทั้งกลุ่มเป็น !important และมันทับพื้นผิว Panel A ของสามตัวนั้นมาตลอด
   git log --grep=A46 */
body#outside .card,
body#outside .v2-card,
body#outside .login-card,
body#outside .v2-feat,
body#outside .blog-card,
body#outside .signup-content {
    background: linear-gradient(180deg, var(--adv-panel-top), var(--adv-panel-bot)) !important;
    border: 1px solid var(--adv-panel-line) !important;
    box-shadow: var(--adv-lift) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
body#dash .card > .card-body::before,
body#dash .card > .card-body::after { display: none !important; }


/* พื้นชั้นในของแผง — input, กล่องย่อย, panel-body */
/* .panel-body left this group on 2026-08-02 (phase 3 · 5.1): it sits inside a
   .card that already draws a surface, so filling it made a box in a box. It is
   now a section of its card — padding and a rule, no fill. */
/* A54 · body#dash .form-control ออกจากกลุ่มนี้แล้ว — ทั้งกลุ่มเป็น !important และทับ
   พื้นผิวของบล็อกฐาน · ห้ามใส่กลับ · guest ยังใช้กฎนี้ต่อ */
body#dash .stat,
body#dash .dw-item,
body#outside .form-control {
    background: var(--adv-inner) !important;
    border: 1px solid var(--adv-inner-line) !important;
    backdrop-filter: none !important;
}
body#outside .form-control:focus {
    background: linear-gradient(180deg, var(--adv-inner-top), var(--adv-inner)) !important;
    border-color: var(--v2-yellow) !important;
    box-shadow: var(--adv-sel-glow) !important;
}

/* เส้นคั่นเป็นเส้นประประจำแบรนด์ */
body#dash .tbl tbody td,
body#dash .step-row {
    border-bottom-color: var(--adv-hair) !important;
}

/* ─── 4 · การ์ดที่เลือกได้ ────────────────────────────────── */
/* ปกติ */
/* .service-item ออกจากกลุ่มนี้ 2026-08-02 (เฟส 3 · 3.1) — มันไม่มี state .active
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */
body#dash .nwo-cat-btn,
body#dash .payment-box {
    background: linear-gradient(180deg, var(--adv-inner-top), var(--adv-inner)) !important;
    border: 1.5px solid transparent !important;
    box-shadow: var(--adv-lift-sm);
    transition: box-shadow var(--v2-t-base) var(--v2-ease), border-color var(--v2-t-base) var(--v2-ease), transform var(--v2-t-base) var(--v2-ease);
}
/* เลือกอยู่ — ต้องลอย "สูงกว่า" เพื่อน ไม่ใช่แบนกว่า */
body#dash .nwo-cat-btn.active,
body#dash .payment-box.active {
    background: linear-gradient(180deg, #282833, #22222d) !important;
    border-color: var(--v2-yellow) !important;
    box-shadow: var(--adv-lift-sm), var(--adv-sel-glow) !important;
}
html.light body#dash .nwo-cat-btn.active,
html.light body#dash .payment-box.active {
    background: linear-gradient(180deg, #fbf9f2, #f4f2ea) !important;
}
/* ปิดใช้งาน — ต้องแบน เพื่อไม่ให้สับสนกับ "เลือกอยู่" */
body#dash .payment-box.disabled {
    background: var(--adv-panel-bot) !important;
    box-shadow: none !important;
    opacity: .55;
}
/* .service-item เป็นแถว ไม่มีพื้นผิวให้ทำให้แบน จางอย่างเดียวพอ
   ถ้าใส่พื้นให้เฉพาะตัวที่ปิดใช้งาน แถวที่ใช้ไม่ได้จะกลายเป็นแถวที่เด่นที่สุด */
body#dash .service-item.disabled,
body#outside .service-item.disabled { opacity: .55; }

/* ─── 5 · ปุ่มหลัก ────────────────────────────────────────── */
/* A56 · body#dash ออกจากกลุ่มนี้แล้ว — ท่าเดียวกับ A46 (.card) และ A54 (.form-control)
   ‼ ทั้งกลุ่มเป็น !important และทับพื้นของบล็อก Panel A ที่ L8756 ทั้งดวง
     background: var(--v2-yellow) ที่นั่นไม่เคยขึ้นจอเลย
   ‼ guest ยังใช้กฎนี้ต่อ ห้ามใส่ body#dash กลับเข้ามา ให้แก้ที่บล็อกฐานแทน
   เช็คก่อนแก้: python3 .claude/tools/who-wins.py btn-primary --scope 'body#dash' */
body#outside .btn.btn-primary,
body#outside .pill-y,
body#outside .v2-auth-right .btn-primary.btn-block {
    background: var(--adv-btn) !important;
    box-shadow: var(--adv-btn-lift) !important;
}
body#outside .btn.btn-primary:hover {
    background: linear-gradient(180deg, #ffe95f, #ffcd14) !important;
}

/* ─── 6 · s2 · ตั๋วผิวด้าน ────────────────────────────────── */
/* ใช้กับ "ช่วงเวลาที่มีเงิน" เท่านั้น ~5-6 จุดทั้งเว็บ:
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */
.adv-stub {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--v2-sp-4);
    padding: var(--v2-sp-5) var(--v2-sp-5);
    background: var(--adv-stub-bg);   /* ผิวด้าน — ห้ามใส่ไล่สีหรือแสงตัดเฉียง */
    color: var(--adv-stub-ink);
    overflow: hidden;
    /* The note above says the stub has to be the card's last child or it will
       ดูเหตุผลเต็มใน git log และ .claude/verify/ */
    border-radius: 0 0 var(--v2-r-md) var(--v2-r-md);
}
.adv-stub::before {                    /* รอยปรุ — แทนเอฟเฟกต์แสง */
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 9px;
    background-image: radial-gradient(circle at 7px 1px, var(--adv-perf) 2.6px, transparent 3.1px);
    background-size: 16px 9px;
    background-repeat: repeat-x;
    pointer-events: none;
}
.adv-stub .k {
    font-family: var(--v2-f-mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.6;
}
.adv-stub b {
    font-family: var(--v2-f-dis);
    font-size: 34px;
    font-weight: 800;
    line-height: 1;
}
/* บรรทัดรองในตั๋ว เช่น "คงเหลือหลังสั่ง" */
.adv-stub-note {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--v2-sp-3);
    margin-top: 11px;
    border-top: 1px dashed rgba(26,21,0,0.26);
    font-size: 12px;
    font-weight: 600;
    opacity: 0.72;
}
.adv-stub-col { flex-direction: column; align-items: stretch; gap: 0; }

/* เส้นฉีกเหนือตั๋ว */
.adv-tear {
    height: 1px;
    background: repeating-linear-gradient(90deg, var(--adv-hair) 0 6px, transparent 6px 12px);
}

/* ─── 7 · แก้บั๊กที่เจอในโค้ดจริง ─────────────────────────── */

/* 7.1 ตัวอักษรเล็กคอนทราสต์ต่ำ — ยกให้ผ่าน 4.5:1 */
body#dash .stat .l,
body#dash .dw-title,
body#dash .neworder-stats .ns span,
body#dash .form-label,
/* .blog-date removed from this blanket on 2026-08-01. It is absolutely
   positioned over the cover image on a rgba(0,0,0,0.55) scrim, and its own rule
   already says color: #fff — this !important was overriding that with dark ink
   on a dark scrim, 1.09:1. The scrim does not follow the theme, so neither can
   the text. Tenth time in this project that ink had to follow the surface. */
body#dash .control-label,
body#dash .tbl thead th,
body#outside .v2-eyebrow { color: var(--adv-mute) !important; }

/* 7.2 หัวเรื่องไทย line-height 1.05 เตี้ยเกิน วรรณยุกต์บนกับสระล่างชนกัน */
body#outside .v2-auth-h1,
body#outside .v2-hero-h1,
body#outside .page-h1-v2,
body#dash .page-h1-v2,
body#dash .neworder-h1,
body#outside .v2-split-title,
body#outside .idx-head h2,
body#outside .cta-c h2 { line-height: var(--v2-lh-tight) !important; }
body#outside .v2-feat h3,
body#outside .v2-feat-big h3 { line-height: var(--v2-lh-tight) !important; }

/* 7.3 .payment-box.pm-* ประกาศสีไอคอนชุดเดียว ไม่มี override โหมดสว่าง
       #ff7a6a / #4da9ff บนพื้นขาวคอนทราสต์ต่ำ */
html.light body#dash .payment-box.pm-qr     .payment-icon i { color: #1f6feb; }
html.light body#dash .payment-box.pm-true   .payment-icon i { color: var(--v2-danger); }
html.light body#dash .payment-box.pm-crypto .payment-icon i { color: #b45309; }
html.light body#dash .payment-box.pm-bank   .payment-icon i { color: var(--v2-ok); }

/* ─── 8 · เมนูมือถือ ─────────────────────────────────────── */
@media (max-width: 991px) {
    body#dash .main-backdrop:not(.hidden) {
        position: fixed;
        inset: 0;
        z-index: 40;
        background: rgba(6,6,9,0.72);
    }
    html.light body#dash .main-backdrop:not(.hidden) { background: rgba(28,24,12,0.42); }
}

/* ─── 9 · toast #notify ────────────────────────────────────
   A58 · พื้นผิวย้ายไปอยู่กับกฎ `body #notify` ที่เดียว — ที่นี่เคยเขียนซ้ำเป็นชุดที่สี่
   toast เป็นแถบมืดทั้งสองธีม (`--v2-sidebar`) เลยไม่ต้องมีสำเนา html.light อีกชุด
   ‼ เหลืองสงวนไว้ให้แผ่นไอคอนอย่างเดียว — ตัว toast ไม่ใช่ "การกระทำหลักของหน้า"
     ดูโควตาเหลืองใน RESUME */
/* A58 · แผ่นไอคอนเป็นวงกลมเหลือง — บนแถบมืด เหลืองไม่ได้แข่งกับอะไร
   ‼ A59 · ผูกกับ `body#dash` เพราะ `--v2-yellow-ink` กับพี่น้องของมันนิยามใต้ `body.v2-dash`
     เท่านั้น — เขียนไม่มี scope แล้วเรียก token พวกนี้ = declaration พังทั้งบรรทัดฝั่ง guest
     element อยู่ใน layout ส่วนที่ใช้ร่วมกัน (layout.twig:532) แต่ปุ่ม copy มีเฉพาะหน้า authed
   ‼ กฎเดิม `#notify.show i` (1,1,1) เคยชนะกฎนี้ (1,0,2) — ไอคอนออกมาเป็นสี่เหลี่ยมขาว
     แก้ด้วยการลบกฎเดิมทิ้ง ไม่ใช่ยกน้ำหนักกฎนี้ */
body#dash #notify i {
    width: 26px;
    height: 26px;
    flex: none;
    margin-right: 0;
    border-radius: 50%;
    background: var(--v2-yellow);
    color: var(--v2-yellow-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    vertical-align: middle;
}
/* ข้อความกับไอคอนอยู่แถวเดียว ห่างเท่ากันทุกครั้ง */
body#dash #notify #notifyText {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-3);
}

/* ─── 10 · promo popup ───────────────────────────────────── */
body#dash .promo-popup {
    background: linear-gradient(180deg, var(--adv-panel-top), var(--adv-panel-bot));
    border: 1px solid #2a2a35;
    border-radius: var(--v2-r-lg);
    box-shadow: var(--v2-elev-3);
    overflow: hidden;
}
body#dash .promo-popup-overlay { background: rgba(6,6,9,0.78); }
body#dash .promo-close-btn {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(12,12,16,0.72);
    border: 1px solid #3a3a46;
    color: var(--v2-ink);
}
body#dash .promo-footer {
    padding: var(--v2-sp-4) var(--v2-sp-5) var(--v2-sp-5);
    border-top: 1px solid var(--adv-panel-line);
}
body#dash .promo-checkbox-text { font-size: 13px; color: var(--adv-mute); }

/* ─── 11 · อ่านยาว (terms / about / blog) ────────────────── */
body#dash .terms-content, body#outside .terms-content,
body#dash .about-content, body#outside .about-content {
    font-size: 14px;
    line-height: 1.95;
    max-width: 66ch;
}
body#outside .blog-text, body#dash .blog-text {
    font-size: 16px;
    line-height: 2;
    max-width: 64ch;
}


/* ─── 12 · WIZARD (neworder แบบทีละขั้น) ─────────────────── */
.adv-step { display: none; }
.adv-wizard[data-step="1"] .adv-step[data-step="1"],
.adv-wizard[data-step="2"] .adv-step[data-step="2"],
.adv-wizard[data-step="3"] .adv-step[data-step="3"],
.adv-wizard[data-step="4"] .adv-step[data-step="4"] { display: block; }
.adv-wizard[data-step="1"] .adv-prev { visibility: hidden; }
.adv-wizard[data-step="4"] .adv-next { display: none; }

/* A66 · รางขั้นตอน = แคปซูลสี่ใบ — ค่าจาก A67 ตรงตาม `panel-tokens.css` ของจริง
   ‼ **แก้คำที่เคยเขียนผิดไว้ตรงนี้** A66 เขียนว่า "ดีไซน์ไม่ได้ส่ง CSS ของสถานะมา"
     — **ไม่จริง** `panel-tokens.css` นิยาม `[data-rail]` ไว้ครบทั้งสี่สถานะ
     ที่ผิดคือผมไปอ่าน**สำเนาเก่า**ใน `.claude/design/` (76 บรรทัด · ดึงมาก่อนเฟส F)
     แทนที่จะดึงไฟล์ใหม่จากโปรเจกต์ดีไซน์ ฉบับจริงมีหัวข้อ "เฟส F" ต่อท้ายอีกยาว
     บทเรียน: **สำเนาในรีโปคือภาพนิ่ง ณ วันที่ดึง — ก่อนจะบอกว่า "ดีไซน์ไม่มีของ" ให้ดึงใหม่ก่อน**
   ค่าที่ดีไซน์กำหนด (panel-tokens.css หัวข้อ "rail 4 ขั้น"):
       [data-rail]        พื้น --well            ← ทุกสถานะมีพื้น ไม่มีตัวไหนโปร่ง
       [data-rail=done]   พื้น --ok-soft  ตัว --ok   · ป้ายเลข พื้น --ok ตัว --card  (เขียวทึบ)
       [data-rail=now]    พื้น --ink      ตัว --card · ป้ายเลข พื้น --acc ตัว --acc-ink
       [data-rail=todo]   ตัว --mute                · ป้ายเลข พื้น --line ตัว --mute
   ‼ คอมเมนต์ในไฟล์ดีไซน์เตือนไว้เอง: "พื้นต้องมาจากที่นี่ที่เดียว ห้ามใส่ background ใน inline
     ไม่งั้น inline ชนะ แล้วจะได้สีตัวอักษรมาแต่พื้นไม่มา = ขาวบนครีม" — เคสเดียวกับที่เราเจอบ่อย
   ‼ token ฝั่ง authed (--v2-well / --v2-surface) ต้องมี body#dash · --v2-ink / --v2-ok / --v2-line
     เป็น root ใช้ได้ทั้งสองฝั่ง
   ‼ ขนาดตาม Panel H (44 / ป้าย 21 / 12px) ซึ่งใหม่กว่า F1 (46 / 22 / 12.5) และวาดครบทั้งสี่ขั้น */
.adv-rail { display: flex; align-items: center; gap: 6px; margin-bottom: 20px; }
.adv-rail-i {
    flex: 1; display: flex; align-items: center; gap: 9px;
    height: 44px; padding: 0 12px; border: 0; text-align: left;
    border-radius: var(--v2-r-md);
    color: var(--adv-mute); font-family: var(--v2-f-thai); font-size: 12px; font-weight: 500;
    cursor: pointer;
}
body#dash .adv-rail-i { background: var(--v2-well); }
.adv-rail-i i {
    width: 21px; height: 21px; border-radius: 50%;
    background: var(--v2-line); border: 0;
    display: grid; place-items: center; flex-shrink: 0;
    font-family: var(--v2-f-dis); font-size: 10.5px; font-weight: 700; font-style: normal;
    color: var(--adv-mute);
}
body#dash .adv-rail-i.is-done { background: var(--v2-ok-soft); color: var(--v2-ok); }
.adv-rail-i.is-done i { background: var(--v2-ok); color: var(--v2-surface); }
.adv-rail-i.is-active { font-weight: 600; }
body#dash .adv-rail-i.is-active { background: var(--v2-ink); color: var(--v2-surface); }
.adv-rail-i.is-active i { background: var(--v2-yellow); color: var(--v2-yellow-ink); box-shadow: var(--adv-sel-glow); }

/* หัวขั้น — ดีไซน์ให้เบากว่าหัวหน้า (600/16) และมีตัวนับ "ขั้นที่ N / 4" ชิดขวา
   ‼ ตัวนับทำด้วย ::after ล้วน ไม่ได้แตะ twig และไม่ได้เพิ่มเนื้อหาใหม่ —
     เลขขั้นเป็นสถานะที่หน้ามีอยู่แล้ว (รางขั้นตอนบอกเรื่องเดียวกัน) */
.adv-step-head {
    display: grid; grid-template-columns: 1fr auto; align-items: baseline;
    column-gap: var(--v2-sp-4); margin-bottom: 14px;
}
.adv-step-head .t { grid-column: 1; grid-row: 1; font-family: var(--v2-f-dis); font-size: 16px; font-weight: 600; letter-spacing: 0; line-height: 1.45; color: var(--v2-ink); }
.adv-step-head .d { grid-column: 1; grid-row: 2; font-size: 12.5px; line-height: 1.7; color: var(--adv-mute); margin-top: 3px; }
.adv-step-head::after {
    grid-column: 2; grid-row: 1;
    font-size: 11.5px; color: var(--adv-mute); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.adv-step[data-step="1"] .adv-step-head::after { content: "ขั้นที่ 1 / 4"; }
.adv-step[data-step="2"] .adv-step-head::after { content: "ขั้นที่ 2 / 4"; }
.adv-step[data-step="3"] .adv-step-head::after { content: "ขั้นที่ 3 / 4"; }
.adv-step[data-step="4"] .adv-step-head::after { content: "ขั้นที่ 4 / 4"; }

/* แถบสรุปบริการ — ดีไซน์ให้เป็นร่องแบน (--well) ไม่ใช่แผ่นนูนไล่สี */
.adv-recap {
    display: flex; align-items: center; gap: var(--v2-sp-3);
    padding: var(--v2-sp-3) var(--v2-sp-4); margin-bottom: 18px;
    border-radius: var(--v2-r-md);
    background: var(--adv-inner);
    box-shadow: none;
}
.adv-recap-k { font-family: var(--v2-f-thai); font-size: 11px; font-weight: 500; text-transform: none; color: var(--adv-mute); flex-shrink: 0; }
.adv-recap-v { flex: 1; min-width: 0; font-family: var(--v2-f-dis); font-size: 13px; font-weight: 600; color: var(--v2-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adv-recap-v:empty::before { content: "ยังไม่ได้เลือก"; color: var(--adv-mute); font-weight: 500; }
.adv-recap-edit { height: 32px; padding: 0 14px; border-radius: var(--v2-r-pill); background: var(--adv-panel-top); box-shadow: var(--adv-lift-sm); border: 0; color: var(--v2-ink); font-family: var(--v2-f-thai); font-size: 12px; font-weight: 500; cursor: pointer; flex-shrink: 0; }

.adv-nav {
    display: flex; align-items: center; justify-content: space-between; gap: var(--v2-sp-3);
    padding-top: 18px; margin-top: 20px;
    border-top: 1px solid var(--adv-panel-line);
}
/* ปุ่มเดินขั้น — ดีไซน์แยกชัดว่า **เหลืองไม่ใช่ของปุ่มนี้**
   ถัดไป = แคปซูลหมึก · ย้อนกลับ = แคปซูลร่อง · เหลืองถูกเก็บไว้ให้ "สั่งซื้อเลย" บนตั๋วดำ
   ตรงกับกติกาใน panel-tokens.css บรรทัด 4–5 (เหลืองห้ามแตะพื้นสว่าง)
   ‼ ห้ามแตะ .btn-primary ทั้งเว็บ — ผูกกับ .adv-nav เท่านั้น (1,3,1) ชนะ body#dash .btn.btn-primary (1,2,1)
   ‼ ของเดิมปุ่มถัดไปยืดกิน 590px เพราะ .btn ตัวฐานเป็น flex ที่โตได้ — ตรึงด้วย flex: 0 0 auto */
body#dash .adv-nav .btn.adv-prev,
body#dash .adv-nav .btn.adv-next {
    flex: 0 0 auto; width: auto; min-height: 44px; height: 44px;
    border-radius: var(--v2-r-pill); border: 0;
    font-size: 13px; font-weight: 600;
}
body#dash .adv-nav .btn.adv-prev { padding: 0 18px; background: var(--adv-inner); color: var(--v2-ink); box-shadow: none; }
body#dash .adv-nav .btn.adv-prev:hover { background: var(--adv-panel-line); }
body#dash .adv-nav .btn.adv-next { padding: 0 22px; background: var(--v2-ink); color: var(--v2-surface); box-shadow: none; }
body#dash .adv-nav .btn.adv-next:hover { background: var(--v2-ink); filter: brightness(1.15); }
.adv-stub-main { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--v2-sp-4); }

/* A67 · มือถือ · รางขั้นตอน — ทำตาม Panel H · H4 กฎข้อ 1
   ดีไซน์สั่งตรง ๆ ว่า **ห้ามย่อรางเป็นวงกลมเลข** เพราะเสียความหมาย
   ให้เหลือหลอดความคืบหน้าเส้นเดียวแทน ส่วนคำว่า "ขั้นที่ N / 4" กับชื่อขั้น
   มีอยู่ที่หัวขั้นแล้ว (`.adv-step-head` ของ A66) จึงไม่ต้องเขียนซ้ำ
   ‼ แลกมาด้วยการที่มือถือกดข้ามขั้นจากรางไม่ได้ — ดีไซน์เลือกทางนี้เอง
     ปุ่ม "เปลี่ยน" ในแถบ recap (`data-goto="2"`) ยังกดได้ปกติ และปุ่มย้อนกลับก็ยังอยู่
   ‼ ก่อนหน้านี้ A66 คงชื่อขั้นปัจจุบันไว้ตัวเดียวเพราะคิดว่าดีไซน์ไม่มีสเปกมือถือ
     ตอนนี้มีแล้ว ใช้ของดีไซน์แทนที่ของที่เราเดา */
@media (max-width: 767px) {
    .adv-rail-i { display: none; }
    body#dash .adv-rail {
        height: 5px;
        border-radius: var(--v2-r-pill);
        background: var(--v2-well);
        overflow: hidden;
    }
    body#dash .adv-rail::after {
        content: "";
        flex: 0 0 auto;
        height: 100%;
        border-radius: var(--v2-r-pill);
        background: var(--v2-yellow);
    }
    body#dash .adv-wizard[data-step="1"] .adv-rail::after { width: 25%; }
    body#dash .adv-wizard[data-step="2"] .adv-rail::after { width: 50%; }
    body#dash .adv-wizard[data-step="3"] .adv-rail::after { width: 75%; }
    body#dash .adv-wizard[data-step="4"] .adv-rail::after { width: 100%; }
    .adv-recap { flex-wrap: wrap; }

    /* H4 กฎข้อ 3 — บอกว่าแถวแพลตฟอร์มยังมีต่อด้วย **การ์ดที่ถูกตัดครึ่ง** ที่ขอบขวา
       ดีไซน์ระบุเองว่าไม่ใช้ลูกศรหรือจุด เพราะการ์ดครึ่งใบสื่อว่าปัดได้ชัดที่สุด
       ‼ ของจริงมี 9 ปุ่ม กว้างรวม 630 ในกรอบ 319 — swiper ปัดได้อยู่แล้ว
         แต่ก่อนหน้านี้ขอบขวาตัดเรียบ เลยไม่มีอะไรบอกว่ายังมีอีก */
    body#dash .nwo-categories {
        -webkit-mask-image: linear-gradient(to right, #000 0, #000 76%, transparent 100%);
        mask-image: linear-gradient(to right, #000 0, #000 76%, transparent 100%);
    }
}

/* ─── 13 · ตั๋ว: ลิงก์แนะนำเพื่อน ────────────────────────── */
.adv-reflink { font-family: var(--v2-f-mono); font-size: 20px; font-weight: 600; margin-top: 8px; word-break: break-all;
               /* colour added 2026-07-31: the stub under this is --adv-stub-bg, yellow in
                  both themes, so the link cannot inherit theme ink — that flips to near-white
                  on dark. Set here rather than in a later override, which is what created a
                  third .adv-reflink rule and got removed again. */
               color: var(--adv-stub-ink); }
.adv-copy { height: 34px; padding: 0 var(--v2-sp-3); border-radius: var(--v2-r-sm); background: rgba(26,21,0,0.14); color: var(--adv-stub-ink); font-family: var(--v2-f-thai); font-weight: 700; font-size: 12px; border: 0; cursor: pointer; }
@media (max-width: 640px) { .adv-reflink { font-size: 14px; } .adv-stub b { font-size: 26px; } }

/* ─── 14 · แถบตั๋วแทนรายการติ๊กถูก ──────────────────────── */
.adv-terms { position: relative; border-radius: var(--v2-r-lg); overflow: hidden; background: linear-gradient(180deg, var(--adv-panel-top), var(--adv-panel-bot)); border: 1px solid var(--adv-panel-line); box-shadow: var(--adv-lift); }
.adv-terms::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 9px; background-image: radial-gradient(circle at 7px 1px, rgba(255,214,10,0.30) 2.6px, transparent 3.1px); background-size: 16px 9px; background-repeat: repeat-x; pointer-events: none; }
.adv-terms-head { padding: var(--v2-sp-4) var(--v2-sp-5) var(--v2-sp-3); font-family: var(--v2-f-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--adv-mute); }
.adv-terms-row { display: flex; gap: var(--v2-sp-5); padding: var(--v2-sp-5) var(--v2-sp-5); }
.adv-terms-row + .adv-terms-row { border-top: 1px dashed var(--adv-hair); }
.adv-terms-row .n { font-family: var(--v2-f-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; color: var(--v2-yellow-text); padding-top: var(--v2-sp-1); flex-shrink: 0; }
.adv-terms-row strong { display: block; font-family: var(--v2-f-dis); font-size: 16px; font-weight: 700; letter-spacing: 0; line-height: var(--v2-lh-tight); color: var(--v2-ink); }
.adv-terms-row small { display: block; font-size: 13px; color: var(--adv-mute); margin-top: 5px; line-height: var(--v2-lh-body); }

/* ─── 15 · ตารางแถวแบบใหม่ (refunds) ────────────────────── */
.adv-rows-head, .adv-row { display: grid; grid-template-columns: 120px 1fr 160px 150px; gap: var(--v2-sp-4); align-items: center; }
.adv-rows-head { padding: var(--v2-sp-3) var(--v2-sp-5); border-bottom: 1px solid var(--adv-panel-line); font-family: var(--v2-f-mono); font-size: 11px; color: var(--adv-mute); }
.adv-row { padding: var(--v2-sp-4) var(--v2-sp-5); border-bottom: 1px solid var(--adv-hair); }
.adv-row:last-child { border-bottom: 0; }
.adv-row-id a { font-family: var(--v2-f-mono); font-size: 12px; color: var(--v2-yellow); text-decoration: none !important; }
.adv-row-amount { font-family: var(--v2-f-mono); font-size: 13px; font-weight: 600; color: var(--v2-ok); }
.adv-row-date { font-family: var(--v2-f-mono); font-size: 12px; color: var(--adv-mute); }
.ta-r { text-align: right; }
@media (max-width: 767px) {
    .adv-rows-head { display: none; }
    .adv-row { grid-template-columns: 1fr auto; row-gap: var(--v2-sp-2); }
    .adv-row-date { grid-column: 1 / -1; text-align: left; }
}


/* A4 — สองอย่างที่ light mode ตกหล่น  (2026-07-30)
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */

html.light .order-item .order-item-bottom .oib-first .item {
    background: var(--main-bg);
}

html.light body#dash .services-id,
html.light body#outside .services-id,
html.light body#dash .updates-id,
html.light body#outside .updates-id {
    color: var(--adv-stub-ink);
}


/* A7 — the tablet dead zone: no sidebar, no way to open one  (2026-07-31)
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */

@media (min-width: 992px) and (max-width: 1199.98px) {
    /* the in-drawer close button belongs to the <=991 drawer, not to this range */
}


/* A8 — patches 3 and 4 from the handoff: the signup benefit list and the
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */

.adv-metrics {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-radius: var(--v2-r-lg);
    overflow: hidden;
    background: linear-gradient(180deg, var(--adv-panel-top), var(--adv-panel-bot));
    border: 1px solid var(--adv-panel-line);
    box-shadow: var(--adv-lift);
    max-width: 540px;
}
.adv-metrics::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 9px;
    background-image: radial-gradient(circle at 7px 1px, rgba(255,214,10,0.30) 2.6px, transparent 3.1px);
    background-size: 16px 9px;
    background-repeat: repeat-x;
    pointer-events: none;
}
.adv-metrics .m { padding: var(--v2-sp-6); }
.adv-metrics .m:nth-child(odd) { border-right: 1px dashed var(--adv-hair); }
.adv-metrics .m:nth-child(-n+2) { border-bottom: 1px dashed var(--adv-hair); }
.adv-metrics .m b {
    display: block;
    font-family: var(--v2-f-dis);
    font-size: 26px;
    font-weight: 800;
    line-height: 1;
    color: var(--v2-ink);
}
.adv-metrics .m.ok b { color: var(--v2-ok); }
.adv-metrics .m span {
    display: block;
    font-family: var(--v2-f-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    color: var(--adv-mute);
    margin-top: 8px;
}
@media (max-width: 540px) {
    .adv-metrics { grid-template-columns: 1fr; }
    .adv-metrics .m:nth-child(odd) { border-right: 0; }
    .adv-metrics .m:not(:last-child) { border-bottom: 1px dashed var(--adv-hair); }
}


/* A10 — patches 1 and 2: the top-up total and the referral link become
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */

body#dash .af-sum-card {
    overflow: hidden;
    padding-bottom: 0;
}
body#dash .af-sum-card .adv-tear,
body#dash .af-sum-card .adv-stub {
    margin-left: -22px;
    margin-right: -22px;
}
body#dash .af-sum-card .adv-stub {
    border-radius: 0;
}
body#dash .af-sum-card .adv-stub .v {
    font-family: var(--v2-f-dis);
}

body#dash .adv-card-flush {
    overflow: hidden;
    padding: 0;
}
body#dash .adv-card-flush > .adv-stub {
    border-radius: 0;
    margin: 0;
}
body#dash .adv-copy {
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-1);
    padding: var(--v2-sp-2) var(--v2-sp-4);
    background: var(--adv-stub-bg);
    border: 0;
    border-radius: var(--v2-r-pill);
    color: var(--adv-stub-ink);
    font-family: var(--v2-f-dis);
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
}
body#dash .adv-copy:hover {
    box-shadow: var(--adv-sel-glow);
}
@media (max-width: 640px) {
    body#dash .adv-stub-col { flex-direction: column; align-items: stretch; gap: var(--v2-sp-3); }
    body#dash .adv-copy { width: 100%; justify-content: center; }
}


/* A11 — the service category bar is yellow in both themes, so its text
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */

body#dash .service-cat-side .service-cat-header,
body#outside .service-cat-side .service-cat-header {
    color: var(--adv-stub-ink);
}
body#dash .service-cat-side .s-count,
body#outside .service-cat-side .s-count {
    /* 0.66 measured 4.23:1 on the orange chip — 0.85 clears it at 6.0 */
    color: rgba(26, 21, 0, 0.85);
}
body#dash .service-cat-side .s-count strong,
body#outside .service-cat-side .s-count strong {
    color: var(--adv-stub-ink);
}


/* A12 — sections 16-18 of the Soft Panel layer  (2026-07-31)
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */

/* ─── 16 · กลุ่มหน้า auth ที่ใช้คลาส .signup-* ─────────────
   resetpassword · setnewpassword · confirmemail · signup
   หน้ากลุ่มนี้ไม่ได้ใช้ .card เลย จึงไม่โดนส่วนที่ 3
   ============================================================ */

/* พื้น + แสง — .signup-area เป็น wrapper ตัวนอกสุด */
.signup-area {
    background:
        radial-gradient(900px 620px at 6% -14%, var(--adv-glow), transparent 58%),
        var(--adv-bg);
    min-height: 100vh;
}
/* แสงเดิมไม่ต้องใช้ แสงมาจากทิศเดียว */
.signup-area .home-fade,
.signup-area .hf-glow { display: none !important; }

/* หัวหน้า — โลโก้ + ปุ่มกลับ */
.signup-area .signup-header {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-3);
    padding: var(--v2-sp-5) 34px;
}
.signup-area .signup-header .signup-logo { display: flex; align-items: center; }
.signup-area .signup-header .signup-logo img { height: 30px; width: auto; display: block; }
/* body#outside prefix added 2026-07-31, not in the design file: section 5 sets
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */
body#outside .signup-area .signup-header > .btn {
    margin-left: auto;
    height: 42px;
    padding: 0 var(--v2-sp-4);
    border-radius: var(--v2-r-pill);
    background: linear-gradient(180deg, var(--adv-panel-top), var(--adv-panel-bot)) !important;
    border: 1px solid var(--adv-panel-line) !important;
    box-shadow: none !important;
    color: var(--v2-ink) !important;
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-2);
}
.signup-area .signup-header > .btn i { color: var(--v2-yellow); }

/* การ์ดกลาง — .signup-badge คือกล่องเนื้อหาหลัก */
.signup-area .signup-badge,
.signup-area .signup-content {
    background: linear-gradient(180deg, var(--adv-panel-top), var(--adv-panel-bot)) !important;
    border: 1px solid var(--adv-panel-line) !important;
    border-radius: var(--v2-r-lg) !important;
    box-shadow: var(--adv-lift-lg) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: var(--v2-sp-6) !important;
}
.signup-area .signup-badge > .icon {
    width: 52px;
    height: 52px;
    border-radius: var(--v2-r-md);
    background: var(--v2-yellow-soft);
    color: var(--v2-yellow);
    display: grid;
    place-items: center;
    font-size: 26px;
    margin-bottom: 18px;
}
.signup-area .signup-badge .text h1,
.signup-area .signup-badge .text h2,
.signup-area .signup-badge .text h4 {
    font-family: var(--v2-f-dis);
    font-size: 20px;
    font-weight: 800;
    line-height: var(--v2-lh-tight);   /* ไทย — ห้ามต่ำกว่านี้ */
    color: var(--v2-ink);
}
.signup-area .signup-badge .text p {
    font-size: 13px;
    line-height: 1.7;
    color: var(--adv-mute);
    margin-top: 7px;
}
.signup-area .form-control {
    background: var(--adv-inner) !important;
    border: 1px solid var(--adv-inner-line) !important;
    height: 50px;
    border-radius: var(--v2-r-md);
}
.signup-area .form-control:focus {
    background: linear-gradient(180deg, var(--adv-inner-top), var(--adv-inner)) !important;
    border-color: var(--v2-yellow) !important;
    box-shadow: var(--adv-sel-glow) !important;
}
body#outside .signup-area .btn.btn-primary:not(.signup-header .btn) {
    background: var(--adv-btn) !important;
    box-shadow: var(--adv-btn-lift) !important;
    height: 52px;
    border-radius: var(--v2-r-md);
    font-weight: 700;
}
/* ลิงก์ท้ายการ์ด — "เข้าสู่ระบบ" / "สมัครฟรี" */
.signup-area .signup-badge .signup-foot,
.signup-area .signup-badge hr + div {
    padding-top: var(--v2-sp-3);
    border-top: 1px solid var(--adv-panel-line);
    font-size: 13px;
    color: var(--adv-mute);
    text-align: center;
}

/* ─── 17 · 2fa · การ์ดเดี่ยว .auth-mini-card ─────────────── */
body#dash .auth-mini-card,
body#outside .auth-mini-card,
.auth-mini-card {
    background: linear-gradient(180deg, var(--adv-panel-top), var(--adv-panel-bot)) !important;
    border: 1px solid var(--adv-panel-line) !important;
    box-shadow: var(--adv-lift-lg) !important;
}
.auth-mini-card .card-body { padding: var(--v2-sp-6) !important; }
.auth-mini-title {
    font-family: var(--v2-f-dis);
    font-size: 20px;
    font-weight: 800;
    line-height: var(--v2-lh-tight);
    color: var(--v2-ink);
}
.auth-mini-sub {
    font-size: 13px;
    line-height: 1.7;
    color: var(--adv-mute);
    margin: 7px 0 20px;
}
/* ช่องรหัส 6 หลัก — ตัว mono ใหญ่ อ่านง่าย ไม่ต้องแยก 6 ช่อง */
.auth-mini-card #code {
    height: 64px;
    font-family: var(--v2-f-mono);
    font-size: 26px;
    font-weight: 600;
    letter-spacing: 0.42em;
    text-align: center;
    text-indent: 0.42em;   /* ชดเชย letter-spacing ตัวท้าย ให้อยู่กลางจริง */
}
.auth-mini-card .btn.btn-primary {
    width: 100%;
    height: 52px;
    border-radius: var(--v2-r-md);
    font-weight: 700;
}

/* ─── 18 · child_panel_order · .form-select ──────────────── */
/* หน้านี้ใช้ .form-select ไม่ใช่ .form-control จึงไม่โดนส่วนที่ 3 */
body#dash .form-select,
body#outside .form-select {
    background-color: var(--adv-inner) !important;
    border: 1px solid var(--adv-inner-line) !important;
    color: var(--v2-ink);
    height: 46px;
    border-radius: var(--v2-r-md);
}
body#dash .form-select:focus {
    border-color: var(--v2-yellow) !important;
    box-shadow: var(--adv-sel-glow) !important;
}
/* ราคาที่ readonly — ทำเป็นตั๋วเล็ก ไม่ใช่ input จาง */
body#dash #price[readonly] {
    background: var(--adv-stub-bg) !important;
    border-color: transparent !important;
    color: var(--adv-stub-ink);
    font-family: var(--v2-f-dis);
    font-size: 20px;
    font-weight: 800;
    height: 56px;
    cursor: default;
}


/* A13 — the yellow button keeps theme ink, and mobile taps get a floor
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */

html body#dash .btn.btn-primary,
html body#outside .btn.btn-primary {
    color: var(--v2-yellow-ink);
}

@media (max-width: 991px) {
    body#dash .btn,
    body#outside .btn,
    body#dash .sbar-btn,
    body#dash .hd-btn {
        min-height: 44px;
    }
    /* square icon buttons need width too, or they become tall pills */
    /* these three set an explicit height that would otherwise win */
    body#dash .order-item-bottom .oib-last .btn,
    body#dash .services-item-bottom .sib-last .btn,
    body#dash .order-item-bottom .sib-last .btn.btn-primary {
        height: auto;
        line-height: var(--v2-lh-tight);
        padding-top: var(--v2-sp-2);
        padding-bottom: var(--v2-sp-2);
    }
    /* A13 keyed the floor off .btn, and these controls do not carry it — the
       ดูเหตุผลเต็มใน git log และ .claude/verify/ */
    body#dash .btn-favorite,
    body#dash .addBalanceBtn,
    body#dash .close,
    body#dash .adv-copy,
    body#dash .adv-rail-i {
        min-height: 44px;
    }
    body#dash .btn-favorite,
    body#dash .close {
        min-width: 44px;
    }
}

/* The star is a 32px box with a 17×24 <span role="button"> inside it holding
   data-favorite-service-id. The role is on the inner span, so that 17×24 is
   what a target-size check measures and what a screen reader announces — the
   parent is only decoration. Filling the parent makes the whole control the
   button, at every width. */
body#dash .btn-favorite [data-favorite-service-id],
body#outside .btn-favorite [data-favorite-service-id] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}


/* A14 — the price on /services was yellow on mint  (2026-07-31)
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */

html.light body#dash .services-rate,
html.light body#outside .services-rate {
    color: var(--v2-ok-text);
}


/* A15 — the last two places where ink follows the theme instead of the
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */

/* หมึกเข้มบนหน้าที่กำลังอยู่ — เพราะพื้นของมันเป็น "เหลือง"
   ‼ เหลือเฉพาะ guest แล้ว (A55) — ฝั่ง authed พื้นเปลี่ยนเป็นหมึกเข้ม กฎนี้เลยกลับด้าน
     กลายเป็นหมึกดำบนพื้นดำ ห้ามใส่ body#dash กลับเข้ามา
   A15 เขียน !important ตัวนี้ตอนไล่หา "สีที่ไม่ยอมเปลี่ยน" ในธีมมืด และบันทึกไว้ว่า
   ยกน้ำหนักสองรอบแล้วยังแพ้ — ตอนนี้รู้แล้วว่าอาการแบบนั้นมักไม่ใช่ cascade:
   .page-link มี transition ที่ครอบ color อยู่ และ tab ที่ไม่ได้อยู่หน้าจอจะแช่ค่าเดิมไว้
   ดู RESUME หัวข้อ "a hidden tab freezes every transition" ก่อนยกน้ำหนักรอบต่อไป */
html body#outside .pagination .page-item.active .page-link {
    color: var(--v2-yellow-ink) !important;
}

/* light only. The first version of this had no mode scope, and .af-info-card-yellow
   is a 14-22% yellow tint — over cream it lands pale and dark ink reads, over
   #0c0c10 it lands dark olive and dark ink disappears. Measured at 19 apart in
   dark, worse than the 29 it was sent in to fix. On dark the original yellow
   already had its contrast from the near-black behind it. */
html.light body#dash .af-info-card-yellow .af-info-head,
html.light body#dash .af-info-card-yellow .af-info-head i {
    color: var(--adv-stub-ink);
}


/* A16 — Polish Pass: sections 19-32  (2026-07-31)
   ‼ 1-18 อยู่ในไฟล์แล้วจาก A3/A12 ห้าม append ไฟล์ 32 section ทั้งก้อนซ้ำ
   !important 98 ตัวในบล็อกนี้ตั้งใจให้อยู่ · git log --grep=A16 */
/* ส่วน 19–22 · POLISH PASS (31 ก.ค. 2026)
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */

/* ─── 19 · ไทยห้ามโดน letter-spacing ─────────────────────────
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */
body#dash, body#outside, .signup-area { letter-spacing: normal; }

body#dash .dw-title,
body#dash .app-widget span,
body#dash .app-widget span small,
body#dash .stat .l,
body#dash .ns span,
body#dash .form-label,
body#dash .control-label,
body#dash .card-title,
body#dash .page-sub-v2,
body#outside .page-sub-v2,
body#outside .v2-feat h3,
body#outside .v2-feat p,
.signup-area .signup-badge .text h1,
.signup-area .signup-badge .text h2,
.signup-area .signup-badge .text h4,
.signup-area .signup-badge .text p,
.auth-mini-title,
.auth-mini-sub,
.adv-step-head .t,
.adv-step-head .d,
.adv-rail-i,
.adv-terms-row strong,
.adv-terms-row small { letter-spacing: normal !important; }

/* tracking เก็บไว้เฉพาะ Latin ตัวพิมพ์ใหญ่ — ที่ที่มันช่วยจริง */
body#dash .v2-eyebrow,
body#outside .v2-eyebrow,
.adv-stub .k,
.adv-rows-head,
.adv-recap-k,
.adv-terms-head { letter-spacing: 0.18em; }

/* label ที่ "เนื้อหาเป็นไทยได้" ต้องไม่มี tracking แม้จะเป็น mono
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */
body#dash .form-section,
body#dash .adv-rows-head,
body#dash .adv-rows-head span,
body#dash .tbl thead th,
body#dash .svc-tbl thead th,
.svc34 .svc-tbl thead th { letter-spacing: normal !important; text-transform: none !important; }

/* ไทยไม่มีชุด italic จริง เบราว์เซอร์จะบังคับเอียง (oblique) หัวตัวอักษรเบี้ยว
   ใช้สี + น้ำหนักเน้นแทน */
body#dash .page-h1-v2 i,
body#dash .neworder-h1 i,
body#outside .page-h1-v2 i {
    font-style: normal;
    color: var(--v2-yellow-text);
    font-weight: 800;
}
/* the guest hero and auth panel keep the bright accent — those two sit on the
   dark split panel in both themes, where #ffc800 is 10:1 and the ink version
   would be the unreadable one. Same reason the tokens are split by surface
   rather than by mode. */
body#outside .v2-hero-h1 i,
body#outside .v2-auth-h1 i {
    font-style: normal;
    color: var(--v2-yellow);
    font-weight: 800;
}

/* ─── 20 · เลิกซ้อนกล่อง ─────────────────────────────────────
   กฎ: หนึ่งพื้นที่มีได้ไม่เกิน 2 ชั้น (แผง + ช่องกรอก)
   ============================================================ */

/* 20.1 การ์ดผู้ใช้ในเมนู — 3 ชั้น 232px → แถวเดียว 64px */
/* Two things are dead here and both should stay that way. `.user-card` is not in
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */
/* รูปเป็นสี่เหลี่ยมมน เข้าชุดกับไอคอนอื่นทั้งเว็บ ไม่ต้องมีวงแหวน */
/* ป้ายที่จบด้วย … แล้วไม่บอกอะไร — ซ่อนไว้ ใส่ยอดคงเหลือแทนใน twig */


/* 20.3 ปุ่มจ่ายเงิน — ป้ายชื่อต้องอยู่ในการ์ดเดียวกัน ไม่ใช่กล่องต่อท้าย */
body#dash .payment-box .payment-icon {
    width: 42px;
    height: 42px;
    border-radius: var(--v2-r-md);
    display: grid;
    place-items: center;
    font-size: 20px;
    flex-shrink: 0;
    margin: 0 !important;
}
body#dash .payment-box .payment-label,
body#dash .payment-box > span:last-child {
    flex: 1;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0!important;
    font-family: var(--v2-f-dis);
    font-size: 14px;
    font-weight: 700;
    color: var(--v2-ink);
    text-align: left;
}

/* ─── 21 · ความหนาแน่น ─────────────────────────────────────── */

/* 21.1 เมนู 52px → 38px · 9 รายการประหยัด 162px */
body#dash #nav-reg > li > a {
    height: 38px;
    gap: var(--v2-sp-3);
    padding: 0 var(--v2-sp-3);
    border-radius: var(--v2-r-sm);
    font-size: 14px;
}
body#dash #nav-reg > li + li { margin-top: 2px; }
body#dash #nav-reg > li > a > i { width: 18px; text-align: center; font-size: 16px; }
/* หัวข้อกลุ่ม — ทำแล้วใน A20: layout.twig ปล่อย <div class="nav-group"> สี่อัน
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */

/* 21.2 หัวหน้า — หน้าทำงานไม่ใช่หน้าขายของ */
body#dash .page-h1-v2,
body#dash .neworder-h1 { font-size: 26px; line-height: var(--v2-lh-tight); }
body#dash .page-sub-v2,
body#dash .neworder-sub { font-size: 12px; margin-top: 3px; }
body#dash .neworder-header {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-4);
    flex-wrap: wrap;
}
/* A65 · สถิติ 3 ตัว = การ์ดสามใบ ตามดีไซน์ Panel F (F1 บรรทัด 98–103)
   ของเดิมเป็นตัวหนังสือชิดขวาคั่นด้วยเส้น — ดีไซน์ให้เป็นการ์ดพื้นขาวมีเงา ชิดซ้าย
   ‼ `!important` สามตัวเดิมออกได้ เพราะกฎนี้อยู่หลัง L9313 อยู่แล้ว ชนะด้วยลำดับ
   ‼ ป้ายเลิกเป็น mono/uppercase — ดีไซน์ใช้ตัวปกติ 11px และภาษาไทยไม่มีตัวพิมพ์ใหญ่
     (บทเรียนเดิมจาก A54 · uppercase กับไทยได้แต่เสียฟอนต์ที่มีสระครบ) */
body#dash .neworder-stats {
    margin-left: auto;
    display: flex;
    align-items: stretch;
    gap: var(--v2-sp-2);
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
}
/* ‼ ต้องเป็น `min-width` ไม่ใช่ `flex-basis` — ลองมาแล้วทั้งสองแบบบนหน้าจริง
     `flex: 1 1 124px` ให้กล่องนอกกว้างแค่ 351 แล้วการ์ดหักเป็น 2+1 ตั้งแต่จอ 1440
     เพราะ flex-basis ของลูกไม่ได้เข้าไปคิดใน max-content ของกล่องนอก แต่ min-width เข้า
     ใส่ min-width แล้วได้ 388 = 124×3 + gap 8×2 ตรงตามดีไซน์เป๊ะ
   ‼ ปล่อยให้ห่อบรรทัดได้ (flex-wrap: wrap ที่บล็อก A61) — ที่ 390 แถวนี้เหลือ 359
     388 ไม่พอ มันจะห่อเป็น 2+1 แทนที่จะดันหน้าให้เลื่อนแนวนอน */
body#dash .neworder-stats .ns {
    flex: 0 1 auto;
    min-width: 124px;
    text-align: left;
    padding: var(--v2-sp-3) var(--v2-sp-4);
    border-radius: var(--v2-r-md);
    background: var(--v2-surface);
    box-shadow: var(--v2-elev);
}
body#dash .neworder-stats .ns b {
    font-size: 19px;
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--v2-ink);
}
body#dash .neworder-stats .ns:nth-child(2) b { color: var(--v2-yellow-text); }
body#dash .neworder-stats .ns span {
    margin-top: 5px;
    font-family: var(--v2-f-thai);
    font-size: 11px;
    text-transform: none;
}

/* 21.3 แท็บของ neworder / addfunds — แผ่นพับต่อกับการ์ด (ดีไซน์ Panel F · F1 บรรทัด 110–119)
   ‼ บล็อกเดิมตรงนี้ **แพ้ทั้งก้อน** ไม่เคยขึ้นจอเลย:
     เดิมเขียน `body#dash #nav-tab` = (2,0,1) ส่วนคู่แข่งที่บล็อก A52 เขียน
     `body#dash ul.nav#nav-tab` = (2,1,2) → ของ A52 ชนะทุกบรรทัด
     ลูกก็เหมือนกัน `#nav-tab .nav-link` (2,1,1) แพ้ `ul.nav#nav-tab > .nav-item > .nav-link` (2,3,3)
     เขียนใหม่ด้วย "รูปทรง selector เดียวกับตัวที่ต้องชนะ" แล้ววางไว้ทีหลังในไฟล์
     → specificity เท่ากัน ลำดับตัดสิน ไม่ต้องพึ่ง !important แม้แต่ตัวเดียว
   ‼ `[role="tablist"]` ทั้งเว็บยังใช้แคปซูลเหลืองของ A52 ต่อ — ห้ามแก้ที่นั่นเพื่อสองหน้านี้
     หน้าอื่น (orders · services · tickets) เป็นงานของ Panel B–E
   ‼ แท็บที่เลือกใช้ **พื้นเดียวกับการ์ด** ไม่ใช่เหลือง เพื่อให้อ่านเป็นชิ้นเดียวกับการ์ดข้างล่าง
     เหลืองถูกเก็บไว้ให้ปุ่ม "สั่งซื้อเลย" บนตั๋วดำ ตามกติกาใน panel-tokens.css บรรทัด 4–5 */
body#dash ul.nav#nav-tab,
body#dash ul.nav#nav-info-tabs {
    display: flex;
    width: 100%;
    gap: var(--v2-sp-1);
    padding: 0 var(--v2-sp-1);
    margin: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}
body#dash ul.nav#nav-tab > .nav-item,
body#dash ul.nav#nav-info-tabs > .nav-item { flex: 0 1 auto; }
body#dash ul.nav#nav-tab > .nav-item > .nav-link,
body#dash ul.nav#nav-info-tabs > .nav-item > .nav-link {
    height: 42px;
    padding: 0 var(--v2-sp-5);
    border: 0;
    border-radius: var(--v2-r-lg) var(--v2-r-lg) 0 0;
    background: none;
    box-shadow: none;
    color: var(--adv-mute);
    font-weight: 500;
}
body#dash ul.nav#nav-tab > .nav-item > .nav-link:hover,
body#dash ul.nav#nav-info-tabs > .nav-item > .nav-link:hover {
    background: var(--v2-glass);
    color: var(--v2-ink);
}
/* A67 · เงาบาง ๆ ใต้แท็บที่เลือก มาจาก `panel-tokens.css` → `[data-tabon="true"]`
   มันคือเงาที่ทำให้แท็บดู "ยกขึ้นมาต่อกับการ์ด" ไม่ใช่แค่แปะสีเดียวกัน */
body#dash ul.nav#nav-tab > .nav-item > .nav-link.active,
body#dash ul.nav#nav-info-tabs > .nav-item > .nav-link.active {
    background: var(--v2-surface);
    color: var(--v2-ink);
    border-color: transparent;
    box-shadow: 0 -3px 10px -6px rgba(0, 0, 0, 0.3);
    font-weight: 600;
}
body#dash ul.nav#nav-tab > .nav-item > .nav-link.active .icon,
body#dash ul.nav#nav-info-tabs > .nav-item > .nav-link.active .icon { color: inherit !important; }

/* มุมการ์ดต้องเปิดรับแท็บที่กำลังเลือก — ฝั่งไหน active มุมฝั่งนั้นหาย
   ‼ ผูกกับ .active จริง ไม่ฮาร์ดโค้ด เพราะ #nav-tab เริ่มที่แท็บซ้าย
     แต่ #nav-info-tabs เริ่มที่แท็บขวา และ bootstrap ย้าย .active ตอนกด */
body#dash ul.nav#nav-tab:has(> .nav-item:first-child > .nav-link.active) + .card,
body#dash ul.nav#nav-info-tabs:has(> .nav-item:first-child > .nav-link.active) + .card {
    border-top-left-radius: 0;
}
body#dash ul.nav#nav-tab:has(> .nav-item:last-child > .nav-link.active) + .card,
body#dash ul.nav#nav-info-tabs:has(> .nav-item:last-child > .nav-link.active) + .card {
    border-top-right-radius: 0;
}
@media (max-width: 640px) {
    body#dash ul.nav#nav-tab > .nav-item > .nav-link,
    body#dash ul.nav#nav-info-tabs > .nav-item > .nav-link { padding: 0 var(--v2-sp-3); }
}

/* 21.4 ตัวเตือน 7 การ์ด → แผงเดียวเส้นประคั่น */
body#dash .read-before-list {
    margin: 0;
    padding: 0;
    list-style: none;
    border-radius: var(--v2-r-lg);
    overflow: hidden;
    background: linear-gradient(180deg, var(--adv-panel-top), var(--adv-panel-bot));
    border: 1px solid var(--adv-panel-line);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
    counter-reset: rb;
}
/* background/border/border-radius below are dead: `#nav-read ul li` carries two
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */
body#dash .read-before-list > li {
    counter-increment: rb;
    display: flex;
    gap: var(--v2-sp-3);
    padding: var(--v2-sp-3) var(--v2-sp-4);
    background: none;
    border: 0;
    border-radius: 0;
    font-size: 13px;
    line-height: var(--v2-lh-body);
    color: var(--adv-mute);
}
body#dash .read-before-list > li + li { border-top: 1px dashed var(--adv-hair); }
/* เลข 01–07 แทนอีโมจิ 👉 ที่ซ้ำทุกข้อ */
body#dash .read-before-list > li::before {
    content: counter(rb, decimal-leading-zero);
    font-family: var(--v2-f-mono);
    font-size: 11px;
    color: var(--adv-mute);
    padding-top: 2px;
    flex-shrink: 0;
}

/* ─── 22 · โหมดสว่าง — เลิกไล่สีครีม ─────────────────────────
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */
html.light {
    --adv-bg:        #f1efe9;
    --adv-glow:      transparent;   /* ปิดแสง — โหมดสว่างไม่ต้องมี */
    --adv-panel-top: #ffffff;
    --adv-panel-bot: #ffffff;
    --adv-lift:      0 1px 2px rgba(60,50,20,0.06);
    --adv-lift-sm:   0 1px 2px rgba(60,50,20,0.05);
    --adv-lift-lg:   0 2px 8px -2px rgba(60,50,20,0.10);
}
html.light body#dash,
html.light body#outside,
html.light .signup-area { background: var(--adv-bg); }

/* การ์ดที่เลือกอยู่ในโหมดสว่าง — ใช้ขอบ+เงาเหลือง ไม่ใช่พื้นครีม */
html.light body#dash .nwo-cat-btn.active,
html.light body#dash .payment-box.active {
    background: #fffdf5 !important;
    border-color: var(--v2-yellow) !important;
    box-shadow: 0 1px 2px rgba(60,50,20,0.06), var(--adv-sel-glow) !important;
}


/* ส่วน 23–29 · POLISH PASS 2 · หน้าที่เหลือทั้งหมด
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */

/* ─── 23 · ระบบร่วมทุกหน้า ───────────────────────────────── */

/* 23.1 หัวหน้า — หัวเรื่องกับปุ่มอยู่แถวเดียวกัน */
body#dash .page-header-v2 {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-4);
    flex-wrap: wrap;
    margin-bottom: 16px;
}
body#dash .page-header-v2 > div:first-child { min-width: 0; }
body#dash .page-header-v2 > div:last-child:not(:first-child) { margin-left: auto; }
body#dash .v2-eyebrow { font-size: 11px; }

/* 23.2 padding การ์ด — 26px → 20px */
body#dash .card > .card-body { padding: var(--v2-sp-5) var(--v2-sp-5); }
body#dash .card { margin-bottom: 14px; }

/* 23.3 ฟอร์ม — ช่อง 50→44px · ช่องไฟ 24→18px */
body#dash .form-group { margin-bottom: 18px; }
body#dash .form-group:last-child { margin-bottom: 0; }
/* .form-select also matches .select2-hidden-accessible — the original <select>
   that select2 collapses to 1px and hides behind its own widget. The audit
   reports these declarations as losing there; that is the hidden element, not a
   visible one, and the widget is styled separately. */
/* A54 · ความสูง/มุม/ขนาดของ input ย้ายไปอยู่ในบล็อกฐานที่เดียว — เหลือแต่ .form-select */
body#dash .form-select { height: 46px; border-radius: var(--v2-r-md); font-size: 13px; }
/* A54 · ขนาด label ย้ายไปบล็อกฐาน · comment เดิมบอกว่า font-weight แพ้ให้ .card-body label
   ซึ่งตอนนี้ถูกทำให้ตรงกันแล้ว ไม่มีใครแพ้ใคร */

/* 23.4 alert — 20px → 14px
   A49 · guest เท่านั้น · ห้ามใส่ body#dash กลับ — มันอยู่หลัง A48 และทับ padding/font-size
   ของบล็อกนั้น · .claude/verify/panelA2/A49-verify.json */
body#outside .alert {
    padding: var(--v2-sp-3) var(--v2-sp-4);
    border-radius: var(--v2-r-md);
    font-size: 13px;
    line-height: var(--v2-lh-body);
}

/* 23.5 หน้าว่าง — จัดกลาง 320px → แนวนอน 148px */
/* .noorders ใน orders.twig อยู่ใน {% if orderList is empty %} เซิร์ฟเวอร์เป็นคน
   ตัดสินว่าจะ render ไหม บังคับให้แสดงได้ */
body#dash .noorders {
    display: flex !important;
    align-items: center;
    gap: var(--v2-sp-4);
    padding: var(--v2-sp-6) var(--v2-sp-6) !important;
    text-align: left !important;
}
/* .nothing-found คนละเรื่อง — services.twig วางไว้ตลอดโดยไม่มีเงื่อนไข แล้วให้
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */
body#outside .nothing-found.show {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-4);
    padding: var(--v2-sp-6) var(--v2-sp-6) !important;
    text-align: left !important;
}
/* A49 · หน้าว่าง — token ของ Panel A บนเลย์เอาต์แนวนอนของ A16 (320px → 148px)
   ‼ คู่ display:none / .show ต้องอยู่ครบ และห้ามใส่ !important (นั่นคือบั๊ก A36)
   .claude/verify/panelA2/A49-verify.json */
body#dash .nothing-found {
    display: none;
    background: var(--v2-well);
    border-radius: var(--v2-r-lg);
    padding: var(--v2-sp-5);
}
body#dash .nothing-found.show { display: block; }
/* services.twig ห่อ .card ไว้ข้างใน tickets.twig ไม่ห่อ — การ์ดชั้นในไม่ต้องวาดพื้นซ้ำ
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */
body#dash .nothing-found > .card {
    background: none;
    box-shadow: none;
    border-radius: 0;
}
body#dash .nothing-found > .card::before,
body#dash .nothing-found > .card::after { display: none; }
body#dash .nothing-found > .card > .card-body { padding: 0; }
body#dash .nothing-found .nothing-found-body {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-4);
    text-align: left;
    width: 100%;
}
body#dash .nothing-found-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--v2-surface);
    color: var(--v2-ink-mute);
    display: grid;
    place-items: center;
    font-size: 17px;
    flex-shrink: 0;
    margin: 0;
}
body#dash .nothing-found h3 {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--v2-ink);
    margin: 0 0 var(--v2-sp-1);
}
body#dash .nothing-found p {
    margin: 0;
    font-size: 12px;
    line-height: 1.65;
    color: var(--v2-ink-mute);
}
/* .noorders เป็นของ orders.twig ที่เซิร์ฟเวอร์ตัดสินว่าจะ render ไหม — คงเดิม */
body#dash .noorders p {
    margin: 0;
    font-family: var(--v2-f-dis);
    font-size: 14px;
    font-weight: 700;
    color: var(--v2-ink);
}

/* 23.6 modal — หัว 4 บรรทัด → 1 แถว
   ‼ A57 · ขอบเคยเป็น #2a2a35 เขียนตรง ๆ ซึ่งเป็นสีของธีมมืด พอสลับเป็นธีมสว่างจะได้
     เส้นเกือบดำรอบกล่องขาว ตอนนี้ใช้ token เดียวกับ modal ตัวอื่น
   modal ที่ render จริงทุกตัว (report / detail / changeEmail) ไม่ได้ใช้กฎนี้ — มันคุม
   langModal กับ currencyModal ซึ่งจะโผล่ก็ต่อเมื่อเจ้าของเปิดภาษา/สกุลเงินมากกว่าหนึ่ง
   เก็บไว้เพื่อวันนั้น และให้หน้าตาตรงกันตั้งแต่แรก */
body#dash .modal-content {
    background: var(--v2-surface);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-lg);
    box-shadow: var(--v2-elev-3);
}
body#dash .modal-header {
    padding: var(--v2-sp-4) var(--v2-sp-5);
    border-bottom: 1px solid var(--adv-panel-line);
    align-items: center;
    gap: var(--v2-sp-3);
}
body#dash .modal-title {
    font-family: var(--v2-f-dis);
    font-size: 16px;
    font-weight: 700;
    line-height: var(--v2-lh-tight);
    letter-spacing: normal;
}
body#dash .modal-body { padding: var(--v2-sp-4) var(--v2-sp-5); }
body#dash .modal-footer { padding: 0 var(--v2-sp-5) var(--v2-sp-5); border-top: 0; gap: var(--v2-sp-2); }
body#dash .modal-footer .btn { height: 44px; border-radius: var(--v2-r-sm); font-size: 13px; }

/* 23.7 pagination — ย้ายไปอยู่บล็อกเดียวข้างบน (A55)
   ‼ ที่นี่เคยเขียน body#dash .pagination .page-link ซ้ำ specificity เท่ากันเป๊ะแต่อยู่
     ทีหลัง เลยชนะบล็อก Panel A ทั้งก้อน 11 declaration โดยไม่มี gate ไหนเห็น
     ห้ามเขียน selector ที่มีอยู่แล้วซ้ำที่นี่ เช็คก่อน:
     python3 .claude/tools/who-wins.py <class> --scope 'body#dash' */

/* ─── 24 · การ์ดออเดอร์ · ใช้ร่วม 5 หน้า ─────────────────────
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */
/* border-radius ออกจากกฎนี้ 2026-08-02 (เฟส 3 · 3.1) — สองตัวนี้เป็นแถวในลิสต์
   แล้ว ไม่ใช่การ์ด  ระยะซ้ายขวาออกด้วยเพราะแถวควรชิดขอบการ์ดแม่ */
body#dash .order-item,
body#dash .child-item {
    padding: var(--v2-sp-3) 0 !important;
}
body#dash .order-item-top { gap: var(--v2-sp-3); margin-bottom: 10px; }
body#dash .oit-first { gap: var(--v2-sp-2); flex-wrap: nowrap; }
body#dash .oit-first .g-ticon,
body#dash .child-item .g-ticon {
    width: 34px !important; height: 34px !important;
    border-radius: var(--v2-r-sm)!important;
    font-size: 16px !important;
    flex-shrink: 0;
}
/* ID เป็นตัวหนังสือเปล่า ไม่ต้องเป็นแคปซูล */
body#dash .oit-first .order-id {
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
    height: auto !important;
    font-family: var(--v2-f-mono);
    font-size: 11px;
    color: var(--v2-yellow-text);
}
body#dash .order-item-bottom { gap: var(--v2-sp-2); }
body#dash .oib-first { gap: var(--v2-sp-3); row-gap: var(--v2-sp-1); }
/* ลิงก์ย่อ ไม่กินเต็มบรรทัด */
body#dash .oib-first .link.order-link-url {
    max-width: 340px;
    font-family: var(--v2-f-mono);
    font-size: 11px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* ตัวเลข — แถว mono เดียว ไม่ใช่บล็อกละหัวข้อ */
body#dash .oib-first .item {
    font-family: var(--v2-f-mono);
    font-size: 11px;
    color: var(--adv-mute);
}
/* was #d6d6de — a grey chosen against the dark panel and left unscoped, so in
   light mode every order date read at 1.45:1. 454 rows across /orders and
   /subscriptions, the largest single contrast defect on the site, and mine.
   --v2-ink-dim follows the mode and keeps the step down from the label. */
body#dash .oib-first .item strong { color: var(--v2-ink-dim); font-weight: 500; }
/* height and padding lose to .btn-report.c-pointer .btn.btn-report-support, which
   makes a 40px circle. Looked at on /orders: that report button is the only
   button in the row, so there is no 28px sibling for it to look uneven against.
   Measured, looked at, left alone. */
body#dash .oib-last .btn { height: 28px; padding: 0 var(--v2-sp-3); border-radius: var(--v2-r-sm); font-size: 12px; }

/* ─── 25 · services ──────────────────────────────────────────
   เหลือแค่ลดความสูงแถวกับเก็บรายละเอียด — ห้ามรื้อเป็นการ์ด
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */
.svc34 .svc-tblwrap {
    background: linear-gradient(180deg, var(--adv-panel-top), var(--adv-panel-bot));
    border-color: var(--adv-panel-line);
    box-shadow: var(--adv-lift);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.svc34 .svc-tbl tbody td { padding: var(--v2-sp-3) var(--v2-sp-4); border-bottom-color: var(--adv-hair); }
.svc34 .svc-tbl thead th { padding: var(--v2-sp-3) var(--v2-sp-4); background: var(--adv-inner); }
.svc34 .svc-tbl tbody tr.service-item:hover td { background: var(--adv-inner); }
/* ID เป็นตัวหนังสือเปล่า — แคปซูลเหลืองแย่งความสนใจจากราคา */
.svc34 .svc-tbl .services-id {
    background: none;
    padding: 0;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: normal;
    color: var(--adv-mute);
}
.svc34 .svc-tbl .ss-name { font-size: 13px; letter-spacing: normal; }
.svc34 .svc-tbl .services-rate { font-size: 14px; color: var(--v2-ink); }
.svc34 .svc-tbl .badgearea [class*="svc34-"] { height: 18px; padding: 0 var(--v2-sp-2); font-size: 11px; }

/* ─── 26 · ตาราง .tbl ────────────────────────────────────── */
body#dash .tbl thead th { padding: var(--v2-sp-3) var(--v2-sp-4); font-size: 11px; }
body#dash .tbl tbody td { padding: var(--v2-sp-3) var(--v2-sp-4); font-size: 13px; }
body#dash .tbl tbody tr:hover td { background: var(--adv-inner); }
/* มือถือ — ยุบเป็นการ์ด (ต้องมี data-label บน td เหมือนที่ svc-tbl ทำ) */
@media (max-width: 767px) {
    body#dash .tbl thead { display: none; }
    body#dash .tbl tbody tr {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: var(--v2-sp-1) var(--v2-sp-3);
        padding: var(--v2-sp-3) var(--v2-sp-4);
        margin-bottom: 9px;
        border-radius: var(--v2-r-md);
        background: linear-gradient(180deg, var(--adv-panel-top), var(--adv-panel-bot));
        border: 1px solid var(--adv-panel-line);
    }
    body#dash .tbl tbody td { padding: 0; border: 0 !important; }
    body#dash .tbl tbody td[data-label]::before {
        content: attr(data-label) " ";
        font-family: var(--v2-f-mono);
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.14em;
        color: var(--adv-mute);
        margin-right: 6px;
    }
}

/* ─── 27 · api · updates ─────────────────────────────────── */
body#dash .api-top > div { padding: var(--v2-sp-4) var(--v2-sp-4); border-radius: var(--v2-r-lg); }
body#dash .api-code {
    background: #0d0d11 !important;
    border: 1px solid #2a2a35 !important;
    border-radius: var(--v2-r-md);
    padding: var(--v2-sp-4) var(--v2-sp-5);
    font-family: var(--v2-f-mono);
    font-size: 12px;
    line-height: 2;
}
html.light body#dash .api-code { background: #faf9f5 !important; border-color: var(--adv-panel-line) !important; }
/* updates — ไทม์ไลน์เป็นแถว ไม่ใช่การ์ดซ้อน */
body#dash .updates-item {
    display: flex !important;
    align-items: center;
    gap: var(--v2-sp-3);
    padding: var(--v2-sp-3) var(--v2-sp-5) !important;
    border-radius: 0!important;
    background: none !important;
    border: 0 !important;
    border-bottom: 1px solid var(--adv-hair) !important;
    box-shadow: none;
}
body#dash .updates-item:hover { background: var(--adv-inner) !important; }
body#dash .updates-item:last-child { border-bottom: 0 !important; }

/* ─── 28 · tickets · viewticket ──────────────────────────────
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */
body#dash .ticket-item {
    padding: var(--v2-sp-3) var(--v2-sp-4);
    border-radius: var(--v2-r-md);
    background: linear-gradient(180deg, var(--adv-panel-top), var(--adv-panel-bot));
    border: 1px solid var(--adv-panel-line);
    box-shadow: var(--adv-lift-sm);
}
body#dash .ticket-item + .ticket-item { margin-top: 9px; }
body#dash .ticket-item:hover { background: var(--adv-inner); }
body#dash .ticket-item-new { border-left: 3px solid var(--v2-yellow); }
body#dash .ticket-id { font-family: var(--v2-f-mono); font-size: 11px; color: var(--adv-mute); }
body#dash .ticket-title { font-family: var(--v2-f-dis); font-size: 13px; font-weight: 600; letter-spacing: normal; }
body#dash .ticket-status { height: 24px; padding: 0 var(--v2-sp-2); font-size: 11px; }

/* แชท — บับเบิลไม่เกิน 74% ไม่ยืดเต็มความกว้าง */
body#dash .ticket-message { display: flex; flex-direction: column; align-items: flex-start; gap: var(--v2-sp-2); margin-bottom: 20px; }
body#dash .ticket-message-support { align-items: flex-end; }
body#dash .ticket-message-box {
    max-width: 74%;
    padding: var(--v2-sp-4) var(--v2-sp-4);
    font-size: 13px;
    line-height: var(--v2-lh-body);
    background: var(--adv-inner);
    color: #e4e4ea;
    border-radius: var(--v2-r-lg) var(--v2-r-lg) var(--v2-r-lg) var(--v2-r-xs);
}
/* ฝั่งเรา (มี .ticket-owner-tag "คุณ") = .ticket-message-support */
body#dash .ticket-message-support .ticket-message-box {
    background: var(--v2-yellow);
    color: var(--v2-yellow-ink);
    border-radius: var(--v2-r-lg) var(--v2-r-lg) var(--v2-r-xs) var(--v2-r-lg);
}
body#dash .ticket-message-info { display: flex; align-items: center; gap: var(--v2-sp-2); font-size: 11px; color: var(--adv-mute); }
body#dash .ticket-owner-tag { height: 19px; padding: 0 var(--v2-sp-2); border-radius: var(--v2-r-pill); background: var(--adv-inner); font-size: 11px; display: inline-flex; align-items: center; }
body#dash .ticket-time { font-family: var(--v2-f-mono); }
body#dash .ticket-file {
    display: inline-flex; align-items: center; gap: var(--v2-sp-2);
    height: 34px; padding: 0 var(--v2-sp-3);
    border-radius: var(--v2-r-sm);
    background: var(--adv-panel-line);
    font-size: 12px;
}
body#dash .ticket-detail-box {
    padding: var(--v2-sp-3) var(--v2-sp-4);
    border-radius: var(--v2-r-md);
    background: linear-gradient(180deg, var(--adv-panel-top), var(--adv-panel-bot));
    border: 1px solid var(--adv-panel-line);
}
body#dash .ticket-detail-box + .ticket-detail-box { margin-top: 10px; }

/* ─── 29 · affiliates · addfunds ─────────────────────────────
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */
body#dash .aff-item { padding: var(--v2-sp-3) 0; border-bottom: 1px solid var(--adv-panel-line); font-size: 13px; }
body#dash .aff-item:last-child { border-bottom: 0; }
body#dash .aff-bold { font-family: var(--v2-f-mono); font-size: 14px; font-weight: 600; color: var(--v2-ink); }
body#dash .af-sum-head { font-family: var(--v2-f-dis); font-size: 13px; font-weight: 700; letter-spacing: normal; }
body#dash .af-sum-row { padding: var(--v2-sp-2) 0; font-size: 13px; }

/* ปุ่มจ่ายเงิน — ป้ายชื่อต้องอยู่ในการ์ดเดียวกัน ไม่ใช่กล่องต่อท้าย */
body#dash .payment-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--v2-sp-2); }
body#dash .payment-box {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    gap: var(--v2-sp-3);
    padding: var(--v2-sp-3) var(--v2-sp-4) !important;
    border-radius: var(--v2-r-md)!important;
    text-align: left;
}
body#dash .payment-box .payment-top { margin: 0 !important; padding: 0 !important; flex-shrink: 0; }
body#dash .payment-box .payment-icon {
    width: 42px; height: 42px;
    border-radius: var(--v2-r-md);
    display: grid; place-items: center;
    font-size: 20px;
    margin: 0 !important;
}
body#dash .payment-box .payment-bottom {
    flex: 1;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0!important;
    text-align: left;
    /* the stock rule makes this a centred flex container, and text-align has no
       say over a flex item — the label drifted away from its icon */
    justify-content: flex-start;
}
body#dash .payment-box .payment-bottom span {
    font-family: var(--v2-f-dis);
    font-size: 14px;
    font-weight: 700;
    color: var(--v2-ink);
    letter-spacing: normal;
}
@media (max-width: 640px) { body#dash .payment-list { grid-template-columns: minmax(0,1fr); } }

/* ─── 30 · hover · focus (ทำงานบน markup เดิม) ───────────── */

/* 30.1 hover — พื้นสว่างขึ้น 1 ขั้น ไม่ต้องขยับหรือเรืองแสง */
body#dash #nav-reg > li > a:hover,
body#dash .order-item:hover,
body#dash .child-item:hover,
body#dash .blog-card:hover { background: var(--adv-inner) !important; }
body#dash .nwo-cat-btn:hover:not(.active),
body#dash .payment-box:hover:not(.active) { border-color: var(--adv-inner-line) !important; }

/* 30.2 focus-visible — โผล่เฉพาะตอนกด Tab ไม่โผล่ตอนคลิก */
body#dash a:focus-visible,
body#dash button:focus-visible,
body#dash input:focus-visible,
body#dash select:focus-visible,
body#dash textarea:focus-visible,
body#dash [tabindex]:focus-visible,
body#outside a:focus-visible,
body#outside button:focus-visible,
body#outside input:focus-visible,
.signup-area a:focus-visible,
.signup-area button:focus-visible,
.signup-area input:focus-visible {
    outline: 2px solid var(--v2-yellow);
    outline-offset: 2px;
    border-radius: var(--v2-r-sm);
}
body#dash :focus:not(:focus-visible) { outline: none; }


/* ส่วน 31 · ต้องเติมคลาสใหม่ในโค้ดก่อน ถึงจะทำงาน
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */

/* 31.1 .form-pair — จับ 2 .form-group ที่เกี่ยวกันไว้แถวเดียว */
body#dash .form-pair { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--v2-sp-2); }
body#dash .form-pair.wide-first { grid-template-columns: 1.6fr minmax(0,1fr); }
@media (max-width: 767px) { body#dash .form-pair, body#dash .form-pair.wide-first { grid-template-columns: minmax(0,1fr); } }

/* 31.2 .form-section — หัวข้อกลุ่มในฟอร์ม */
body#dash .form-section {
    font-family: var(--v2-f-mono);
    font-size: 11px;
    color: var(--adv-mute);
    margin-bottom: 11px;
}
body#dash .form-section:not(:first-child) { padding-top: var(--v2-sp-4); border-top: 1px dashed var(--adv-hair); }
/* A heading that opens its own container is :first-child there and misses the
   rule above, so it read as a label floating over the next field rather than as
   a divider. That is the shape the ticket form needs — the headings sit inside
   #order-section and #payment-section so they hide with the fields they name. */
body#dash .form-group > .form-section:first-child {
    padding-top: var(--v2-sp-3);
    border-top: 1px dashed var(--adv-hair);
}

/* 31.3 .nav-group — นิยามอยู่ในส่วน 21.1 แล้ว ไม่ประกาศซ้ำ */


/* A60 · .af-amount-wrap ถูกลบ 2026-08-05 — class นี้ไม่เคยถูกใส่ที่ไหนเลย
   หลักฐาน: ไม่มีใน *.twig · ไม่มีใน *.js · DOM สดของ /addfunds นับได้ 0
   และดีไซน์ Panel F ก็ไม่ได้อ้างถึงมันเลย (0 ครั้ง)
   ช่องกรอกเงินจริงใช้ #amount ซึ่ง setAmount() ใน script.js:349 เขียนค่าลงไปตรง ๆ
   ‼ ถ้า Panel F จะทำกรอบ ฿ + ตัวเลขระนาบเดียวกัน ให้เขียนใหม่บน markup ที่มีอยู่จริง
     อย่าปลุกชื่อนี้กลับมา */

/* 31.5 .filter-sticky — ตรึงแถบกรองบนหน้ารายการยาว */
body#dash .filter-sticky {
    position: sticky;
    top: 0;
    z-index: 20;
    padding: var(--v2-sp-3) 0;
    margin-bottom: 4px;
    background: linear-gradient(180deg, var(--adv-bg) 72%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
@media (max-width: 991px) { body#dash .filter-sticky { position: static; backdrop-filter: none; } }

/* 31.6 .adv-skeleton — ลบแล้ว 2026-08-04 (A58)
   โครงร่างตอนโหลดชุดนี้ (4 กฎ + keyframe adv-shimmer + กฎ prefers-reduced-motion)
   ไม่เคยถูกใช้เลย: ไม่มีใน *.twig · ไม่มีใน *.js · หกหน้าที่ตรวจ (/, /orders, /services,
   /affiliates, /account, /addfunds) นับ .adv-skeleton ได้ 0 ทั้งหมด
   keyframe adv-shimmer มีผู้ใช้แค่บล็อกนี้บล็อกเดียว จึงไปด้วยกัน
   ‼ ถ้าจะทำ loading state จริง ให้ดู git log ของ commit นี้ก่อนเขียนใหม่ */


/* ─── 32 · ป้ายแคปซูลห้ามตัดคำ ───────────────────────────────
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */
body#dash .os-widget,
body#dash .ticket-status,
body#dash .ticket-owner-tag,
body#dash .ticket-new-badge,
body#dash .pnd-ord-nav > li > a,
body#dash .oit-first .order-id,
body#outside .v2-brand,
.svc34 .svc-tbl .services-id,
.svc34 .svc-tbl .badgearea > *,
.adv-stub .k,
.adv-copy { white-space: nowrap; }


/* A17 — the sidebar profile is two spans, not two cards  (2026-07-31)
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */



/* A18 — the payment buttons, second markup mismatch in section 20
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */

body#dash .payment-box .payment-top {
    width: auto;
    aspect-ratio: auto;
    flex: 0 0 auto;
    background: none;
    padding: 0;
    overflow: visible;
}
body#dash .payment-box .payment-bottom {
    flex: 1;
    min-width: 0;
    padding: 0;
    text-align: left;
    font-family: var(--v2-f-dis);
    font-size: 14px;
    font-weight: 700;
    color: var(--v2-ink);
    white-space: normal;
}


/* A19 — ตัวอักษรไทยเลิกรับ tracking  (2026-07-31)
   ‼ ห้ามใส่ letter-spacing บวกให้ element ที่ข้อความเป็นไทย สระกับวรรณยุกต์จะหลุดจากพยัญชนะ
   tracking เก็บไว้เฉพาะ Latin ตัวพิมพ์ใหญ่ (ดูกฎ 0.18em ท้ายบล็อก)
   git log --grep=A19 */

html body#dash .oib-first,
html body#dash .sib-first,
html body#outside .sib-first,
html body#dash .s-count,
html body#outside .s-count,
html body#dash .card-body label,
/* the affiliates cards put their Thai label in the first flex row, and that row
   carries 0.12em which every child inherits — found by walking up from the text,
   not by matching a rule against it */
html body#dash .card-body > .d-flex:first-child,
html body#dash .aff-item > span:first-child,
html body#dash .af-sum-row .k,
html body#dash .v2-wallet-chip .l,
html body#dash .adv-stub .k,
html body#outside .adv-stub .k,
html body#dash .adv-recap-k,
html body#outside .adv-recap-k,
html body#dash .adv-terms-head,
html body#outside .adv-terms-head,
html body#dash .neworder-promo strong {
    letter-spacing: normal;
}


/* A20 — the sidebar menu never got the density pass  (2026-07-31)
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */



/* A29 — the sidebar role label stopped fitting when the type scale landed
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */



/* A30 — หนึ่งความคิด หนึ่งพื้นผิว  (2026-08-02)
   ‼ ห้ามเปลี่ยนชื่อ .panel-body — layout.twig:779 อ่าน $("#service_description>.panel-body")
   git log --grep=A30 */

/* the description panel and the summary panel are sections, not cards */
body#dash .card .card-body .panel-body,
body#dash #service_description .panel-body,
body#dash .panel-body.service-desc,
body#dash .panel-body.border-solid {
    background: none;
    border: 0;
    border-top: 1px solid var(--v2-line);
    border-radius: 0;
    box-shadow: none;
    padding: var(--v2-sp-3) 0 0;
    margin-bottom: 0;
}

/* deposit history is a list of rows, so it gets rules between them, not 43 cards */
body#dash .history-item {
    background: none;
    border: 0;
    border-bottom: 1px solid var(--v2-line);
    border-radius: 0;
    box-shadow: none;
    padding: var(--v2-sp-3) 0;
}
body#dash .history-item:last-child { border-bottom: 0; }
body#dash .history-item:hover { border-color: var(--v2-line); background: none; }

/* A66 · ลบกฎ `.adv-recap { border-radius: var(--v2-r-sm) }` ที่เคยอยู่ตรงนี้
   เหตุผลเดิมคือ "มุมในต้องเท่ามุมนอกลบระยะขอบ" ซึ่งเป็นกฎที่เราตั้งเอง
   ดีไซน์ Panel F (F1 บรรทัด 138) ให้แถบนี้เป็น var(--ri) = 14px เท่ากับช่องกรอกที่อยู่ใต้มัน
   และนั่นคือประเด็น: recap กับช่องลิงก์เป็นของระดับเดียวกัน ต้องมุมเท่ากัน
   ค่าที่ใช้จริงตอนนี้มาจากบล็อกฐาน (--v2-r-md) — ไม่ต้องมีกฎซ้ำที่นี่อีก */

/* A34 · เฟส 3 · พื้นผิว 50 จุด — จาก handoff รอบสอง
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */

/* ── 3.1 · รายการในการ์ด (24 จุด) ───────────────────────────────────────────
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */
body#dash .api-item,
body#dash .api-top-item,
body#dash .ticket-item,
body#dash .ns-info .ns-item,
body#dash .updates-item,
body#dash .child-item,
body#dash .service-item,
body#dash .order-item,
body#outside .api-top-item,
body#outside .service-item,
body#outside .updates-item {
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding-left: 0;
    padding-right: 0;
}

/* เส้นวางบน "ทุกแถวที่มีแถวก่อนหน้า" ไม่ใช่ล่างทุกแถวแล้วลบตัวสุดท้าย
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */
body#dash .api-item ~ .api-item,
body#dash .api-top-item ~ .api-top-item,
body#dash .ticket-item ~ .ticket-item,
body#dash .ns-info .ns-item ~ .ns-item,
body#dash .updates-item ~ .updates-item,
body#dash .child-item ~ .child-item,
body#dash .service-item ~ .service-item,
body#dash .order-item ~ .order-item,
body#outside .api-top-item ~ .api-top-item,
body#outside .service-item ~ .service-item,
body#outside .updates-item ~ .updates-item { border-top: 1px solid var(--v2-line); }

/* hover เคยเปลี่ยนพื้นการ์ด พอไม่มีการ์ดแล้วก็ไม่มีอะไรให้เปลี่ยน */
body#dash .ticket-item:hover,
body#dash .child-item:hover,
body#dash .service-item:hover,
body#outside .service-item:hover { background: none; }

/* zebra บน /orders เคยทำหน้าที่แยกแถว ตอนนี้เส้นคั่นทำแทนแล้ว
   ปล่อยไว้จะกลายเป็นสองระบบซ้อนกัน */
body#dash .order-item:nth-child(even) { background: none; }

/* ── 3.3 · แจ้งเตือนในการ์ด (20 จุด) ────────────────────────────────────────
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */
body#dash .card .alert,
body#dash .v2-card .alert,
body#dash .login-card .alert,
body#outside .card .alert,
body#outside .v2-card .alert,
body#outside .login-card .alert,
body#outside .signup-content .alert {
    border-radius: var(--v2-r-sm);
    box-shadow: none;
}
/* ยกเว้นแถบสีชิดซ้ายของ promo — เป็น inset ที่ทำหน้าที่บอกประเภท ไม่ใช่เงายก */
body#dash .card .alert.neworder-promo,
body#dash .v2-card .alert.neworder-promo {
    box-shadow: inset 3px 0 0 var(--adv-stripe, var(--v2-yellow));
}

/* ── 3.4 · ตั๋วที่ตั้งใจให้ซ้อน (7 จุด) ─────────────────────────────────────
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */
body#dash .af-sum-total,
body#dash .addfunds-amount { border-radius: var(--v2-r-sm); }

/* ไม่ลด 2 ตัว แม้สเปกจะลิสต์ไว้:
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */

/* A35 · หัวข้อหมวดบน /services · วรรณยุกต์ไทยชนบรรทัดบนที่จอ 360
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */
/* ตัวจริงที่ทำให้เกิดคือ h2 { line-height: 1.2 } และ h3 { line-height: 1.2 }
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */
h1, h2, h3, h4, h5, h6 { line-height: var(--v2-lh-tight); }

/* A40b — sidebar: 110 rules become one  (2026-08-03)
   ‼ 1 · dMenuToggle() ใส่ class ที่ <body> ไม่ใช่แถบข้าง → ต้องเขียน .sidebar-active .sidebar
   ‼ 2 · drawer ใช้ left อย่างเดียว ห้ามเพิ่ม transform กลับ (เคยรวมกันได้ -560px = ช่องโหว่ 992-1199)
   ‼ 3 · โหมดยุบเหลือ 80px ถูกลบแล้ว วัดแล้วว่าไม่มีใครได้ประโยชน์
   git log --grep=A40b */

/* ── โครง ─────────────────────────────────────────────────────────────── */
.sidebar {
    display: flex;
    flex-direction: column;
    background: var(--v2-sidebar);
    color: var(--v2-on-sidebar);
    border-radius: var(--v2-r-lg);
    padding: var(--v2-sp-5) var(--v2-sp-3) var(--v2-sp-3);
    /* A47 · เดิมเป็น --v2-elev-2 · Panel A มีความลึกระดับเดียว และตั้งแต่ A46 การ์ดกับ
       ดูเหตุผลเต็มใน git log และ .claude/verify/ */
    box-shadow: var(--v2-elev);
    overflow-y: auto;
    z-index: 50;
}

@media (min-width: 992px) {
    /* กรอบเว้นขอบ 14px ตามที่ดีไซน์วาด แถบข้างจึงเป็นการ์ดลอย ไม่ใช่แถบชนขอบจอ */
    .sidebar {
        position: fixed;
        left: 14px;
        top: 14px;
        width: 206px;
        height: calc(100vh - 28px);
    }
    /* 14 + 206 + 14 — เลขนี้ผูกกับ left/width ข้างบน แก้ทีต้องแก้พร้อมกัน */
    body#dash .page { margin-left: 234px; }
}

@media (max-width: 991.98px) {
    /* drawer เต็มความสูง ชนขอบจอ ไม่มีมุมโค้ง */
    .sidebar {
        position: fixed;
        top: 0;
        left: -280px;
        width: 280px;
        height: 100vh;
        border-radius: 0;
        transition: left var(--v2-t-base) var(--v2-ease);
    }
    .sidebar-active .sidebar { left: 0; }
    body#dash .page { margin-left: 0; }
}

/* ── โลโก้ ────────────────────────────────────────────────────────────── */
.sidebar-header {
    display: flex;
    align-items: center;
    padding: 0 var(--v2-sp-2) var(--v2-sp-5);
}
.sidebar-header a { display: inline-flex; align-items: center; }
.sidebar-header img { max-height: 24px; width: auto; }
/* แถบข้างเป็นพื้นเข้มในทั้งสองธีมแล้ว โลโก้จึงไม่ต้องสลับตามธีมอีก
   ("logo-dark" ในธีมนี้แปลว่า "ตัวที่ใช้บนพื้นเข้ม" ไม่ใช่ "ตัวของธีมมืด") */
.sidebar-header .logo-light,
.sidebar-header .logo-small { display: none; }
.sidebar-header .logo-dark { display: block; }

/* ── ปุ่มปิด drawer ───────────────────────────────────────────────────── */
.sidebar-dismiss {
    display: none;
    position: absolute;
    top: 14px;
    right: 14px;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.07);
    color: var(--v2-on-sidebar-dim);
    cursor: pointer;
}
@media (max-width: 991.98px) {
    .sidebar-dismiss { display: inline-flex; }
}

/* ── เมนู ─────────────────────────────────────────────────────────────── */
.sidebar-content { flex: 1; overflow-y: auto; }
.sidebar-menu,
.sidebar-menu-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.nav-group {
    padding: var(--v2-sp-4) 10px var(--v2-sp-2);
    font-size: 10px;
    font-weight: 500;
    line-height: var(--v2-lh-ui);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--v2-on-sidebar-dim);
}
.nav-group:first-child { padding-top: 0; }
.sidebar-menu-link {
    display: flex;
    align-items: center;
    gap: 11px;
    height: 40px;
    padding: 0 13px;
    border-radius: var(--v2-r-sm);
    font-size: 13px;
    font-weight: 400;
    color: var(--v2-on-sidebar-dim);
    transition: background-color var(--v2-t-fast) var(--v2-ease),
                color var(--v2-t-fast) var(--v2-ease);
}
.sidebar-menu-link:hover {
    background: rgba(255, 255, 255, 0.07);
    color: var(--v2-on-sidebar);
}
.sidebar-menu-link.active {
    background: var(--v2-yellow);
    color: var(--v2-yellow-ink);
    font-weight: 600;
}
/* ไอคอนกับข้อความรับสีจากแถวเสมอ แถวที่เลือกจึงเป็นหมึกเข้มบนเหลืองทั้งก้อน
   ไม่ใช่ตัวอักษรเหลืองบนพื้นเหลืองจางแบบเดิม */
.sidebar-menu-link .sidebar-menu-icon,
.sidebar-menu-link .sidebar-menu-text { color: inherit; }
.sidebar-menu-icon { width: 16px; flex-shrink: 0; font-size: 13px; text-align: center; }
.sidebar-menu-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* A41b — topbar: the survivors move into one block  (2026-08-03)
   ‼ ลำดับ at-rule เรียงตามที่เคยอยู่ในไฟล์ ไม่ใช่ตามที่ควรเป็น — เรียงใหม่ = สลับผู้ชนะ
   ‼ สองกฎท้ายอยู่ใน @media > @supports ซ้อนสองชั้น ห้ามทำให้แบน
   ‼ dropdown มือถือผูกกับ script.js:219-262 ที่เขียน display เป็น inline — อ่านก่อนแตะ
   git log --grep=A41b */
.sbar-btn {
    line-height: 26px;
    font-size: 20px;
    padding: var(--v2-sp-3) var(--v2-sp-4);
    width: 50px;
    height: 50px;
    background: var(--second-bg);
    border-radius: var(--v2-r-md);
    color: var(--text-color);
}

/* A42: เดิมเป็น `#up-header span` เฉยๆ ซึ่ง (1,0,1) ชนะทุก class selector ที่
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */
#up-header > .row > span {
    font-size: 20px;
}

#up-header.active {
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    position: fixed;
    left: 335px;
    z-index: 1019;
    right: 15px;
    top: 5px;
    -webkit-transition: 0.2s;
    transition: var(--v2-t-base);
}

#up-header.active + .container-fluid,
.page .container-fluid:has(#up-header.active) {
    padding-top: 90px;
}

body:has(#up-header.active) .container-fluid {
    padding-top: 90px;
}

.header-right {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: var(--v2-sp-2);
}

.switcher {
    /* Panel A · แคปซูล 44px ให้สูงเท่าปุ่มไอคอนข้างๆ ลูกในเป็นวงกลม 36 */
    height: 44px;
    border-radius: var(--v2-r-pill);
    background-color: var(--v2-surface);
    box-shadow: var(--v2-elev-1);
    padding: var(--v2-sp-1);
    display: inline-flex;
    gap: var(--v2-sp-1);
    position: relative;
}

.switcher .active-bg {
    content: "";
    position: absolute;
    background:
        radial-gradient(
            397.75% 81.29% at 109.6% 34.26%,
            #319cff 0%,
            #1467b4 99.99%,
            #319cff 100%
        ),
        #1e81dc;
    box-shadow:
        0px 1.182px 2.365px 0px rgb(49 155 91),
        0px 0px 0px 1.182px #23a055;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--border-radius);
    left: 5px;
    top: 5px;
    width: 40px;
    height: 40px;
    z-index: 1;
    -webkit-transition: 0.14s ease;
    transition: var(--v2-t-fast) var(--v2-ease);
}

.switcher .switcher-item {
    position: relative;
    z-index: 3;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: transparent;
    height: 36px;
    width: 36px;
    border: none;
    outline: none;
    border-radius: 50%;
    font-size: 14px;
    line-height: 17px;
    color: var(--text-color);
    -webkit-transition: 0.14s ease;
    transition: var(--v2-t-fast) var(--v2-ease);
}

.switcher .switcher-item.active {
    /* เหลืองทึบ หมึกเข้ม — กติกาของ Panel A คือเหลืองห้ามแตะพื้นสว่างในฐานะตัวอักษร
       ใช้ได้เป็นพื้นที่ตัวหนังสือเป็นสีดำเท่านั้น #fff บนเหลืองคือสิ่งที่กติกาห้าม */
    background: var(--v2-yellow);
    border: 0;
    border-radius: 50%;
    color: var(--v2-yellow-ink);
}

.switcher {
    height: 50px;
}

body#dash #up-header.header {
    padding: var(--v2-sp-1);
    /* พื้นทึบ ไม่ใช่กระจก — Theme Audit นับ backdrop-filter ได้ 151 จุด และหลายจุด
       ดูเหตุผลเต็มใน git log และ .claude/verify/ */
    border-radius: var(--v2-r-pill);
    background: var(--v2-surface);
    border: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    margin-bottom: 22px;
    position: fixed;
    /* 14 + 206 + 14 — ผูกกับ .sidebar ในบล็อก A40b แก้ทีต้องแก้พร้อมกัน */
    top: 14px;
    left: 234px;
    right: 14px;
    z-index: 45;
    /* A46 · เปลี่ยนจาก --v2-elev-2 เป็น --v2-elev พร้อมกับตอนที่พื้นผิวนี้เพิ่งได้ทำงานจริง
       ดูเหตุผลเต็มใน git log และ .claude/verify/ */
    box-shadow: var(--v2-elev);
}

body#dash #up-header .row {
    margin: 0;
    align-items: center;
    gap: var(--v2-sp-2);
    flex-wrap: nowrap;
}

body#dash #up-header .col,
body#dash #up-header .col-auto {
    padding: 0;
}

body#dash #up-header .col.text-center .mob-logo { display: none; }

body#dash #up-header .menuBtn,
body#dash #up-header .sbar-btn,
body#dash #up-header .hd-btn,
body#dash .header-right .sbar-btn,
body#dash .header-right .hd-btn {
    /* Panel A · ปุ่มไอคอนเป็นวงกลม 44px ซึ่งเป็นขนาดเป้าแตะขั้นต่ำของ WCAG 2.2 พอดี
       ของเดิม 38px แล้วมี media query ที่ 991 มาดันเป็น 44 เฉพาะมือถือ ตอนนี้ไม่ต้อง */
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--v2-surface);
    border: 0;
    box-shadow: var(--v2-elev-1);
    color: var(--v2-ink-dim);
    font-size: 14px;
    cursor: pointer;
    padding: 0;
    transition: background var(--v2-t-fast), color var(--v2-t-fast);
    text-decoration: none !important;
}

body#dash #up-header .menuBtn:hover,
body#dash .sbar-btn:hover,
body#dash .hd-btn:hover {
    background: var(--v2-glass-2);
    color: var(--v2-ink);
    border-color: var(--v2-line-strong);
}

body#dash .hd-btn .fa-chevron-down { transition: transform var(--v2-t-base); }

body#dash #up-header.active .hd-btn .fa-chevron-down { transform: rotate(180deg); }

body#dash .header-right {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-2);
    position: relative;
}

body#dash .header-right .hdi { display: inline-flex; }

body#dash .header-right .hd-shadow { display: none; }

body#dash #up-header > .row > .col-auto > #hd-btn.hd-btn { display: none; }

@media (max-width: 1199.98px) {
        body:has(#up-header.active) .container-fluid,
        .page .container-fluid:has(#up-header.active) {
            padding-top: 80px;
        }
}

@media (max-width: 640px) {
        body:has(#up-header.active) .container-fluid,
        .page .container-fluid:has(#up-header.active) {
            padding-top: var(--v2-sp-7);
        }

        .header-right {
            display: block;
            position: absolute;
            -webkit-box-orient: horizontal;
            -webkit-box-direction: reverse;
            -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
            margin-top: 20px;
            right: 25px;
            text-align: right;
            width: 100%;
            opacity: 0;
        }

        .header-right .hd-shadow {
            content: "";
            position: absolute;
            right: -500px;
            top: -500px;
            width: 500px;
            height: 500px;
            border-radius: 50%;
            background: transparent;
            -webkit-box-shadow: -160px 260px 300px rgb(234 255 49 / 20%);
            box-shadow: -160px 260px 300px #ffce3133;
            z-index: 1001;
            -webkit-transition: 0.14s ease;
            transition: var(--v2-t-fast) var(--v2-ease);
        }

        .header-right .hdi {
            margin-bottom: 10px;
            z-index: 1002;
            position: relative;
        }

        .header-right .hdi.active > * {
            -webkit-transform: scale(1);
            transform: scale(1);
        }

        .header-right .hdi > * {
            -webkit-transform: scale(0);
            transform: scale(0);
            -webkit-transition: 0.14s ease;
            transition: var(--v2-t-fast) var(--v2-ease);
        }

        .hd-btn {
            display: block;
            z-index: 1004;
            position: relative;
        }
}

@media (max-width: 992px) {
        #up-header.active {
            left: 0;
            right: 0;
            top: 0;
        }

        #up-header .col img {
            margin: auto;
        }
}

@media (max-width: 991px) {
        body#dash #up-header.header {
            left: 14px;
            right: 14px;
        }

        body#dash .sbar-btn,
        body#dash .hd-btn {
            min-width: 44px;
        }
}

@media (max-width: 767px) {
        body#dash #up-header .col.text-center .mob-logo { display: inline-flex; }

        body#dash #up-header .col.text-center .mob-logo img.mob-logo-img {
            max-height: 26px;
            width: auto;
        }

        html.dark body#dash #up-header .mob-logo .logo-light,
        html:not(.dark) body#dash #up-header .mob-logo .logo-dark,
        html.light body#dash #up-header .mob-logo .logo-dark { display: none; }

        html.dark body#dash #up-header .mob-logo .logo-dark,
        html:not(.dark) body#dash #up-header .mob-logo .logo-light,
        html.light body#dash #up-header .mob-logo .logo-light { display: inline-block; }

        body#dash #up-header > .row > .col-auto > #hd-btn.hd-btn {
            display: inline-flex !important;
        }

        body#dash .header-right,
        body#dash .header-right.mobHid {
            display: none;
            position: absolute !important;
            top: calc(100% + 10px) !important;
            right: 0 !important;
            min-width: 240px !important;
            flex-direction: column !important;
            align-items: stretch !important;
            padding: var(--v2-sp-2) !important;
            border-radius: var(--v2-r-md) !important;
            z-index: 100 !important;
            gap: var(--v2-sp-1) !important;
            backdrop-filter: var(--v2-blur-strong) !important;
            -webkit-backdrop-filter: var(--v2-blur-strong) !important;
            opacity: 1 !important;
        }

        body#dash .header-right[style*="display: block"],
        body#dash .header-right[style*="display:block"] {
            display: flex !important;
        }

        body#dash .header-right .hd-shadow { display: none !important; }

        body#dash .header-right .hdi {
            width: 100% !important;
            opacity: 0;
            transform: translateY(-4px);
            transition: opacity var(--v2-t-base) var(--v2-ease), transform var(--v2-t-base) var(--v2-ease);
        }

        body#dash .header-right .hdi.active {
            opacity: 1;
            transform: translateY(0);
        }

        body#dash .header-right .hdi .sbar-btn,
        body#dash .header-right .hdi .hd-btn,
        body#dash .header-right .hdi > a,
        body#dash .header-right .hdi > button {
            width: 100% !important;
            height: 44px !important;
            padding: 0 var(--v2-sp-3) !important;
            border-radius: var(--v2-r-sm) !important;
            background: var(--v2-glass) !important;
            border: 1px solid var(--v2-line) !important;
            color: var(--v2-ink-dim) !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: flex-start !important;
            gap: var(--v2-sp-3) !important;
            font-family: var(--v2-f-thai) !important;
            font-size: 14px !important;
            font-weight: 500 !important;
            text-decoration: none !important;
        }

        body#dash .header-right .hdi .sbar-btn:hover,
        body#dash .header-right .hdi .hd-btn:hover {
            background: var(--v2-glass-2) !important;
            color: var(--v2-ink) !important;
        }

        body#dash .header-right .hdi .sbar-btn > i,
        body#dash .header-right .hdi .hd-btn > i {
            width: 18px;
            font-size: 16px;
            text-align: center;
        }

        body#dash .header-right .hdi .sbar-btn[data-original-title]::after,
        body#dash .header-right .hdi .hd-btn[data-original-title]::after {
            content: attr(data-original-title);
            font-family: var(--v2-f-thai);
            font-size: 14px;
            font-weight: 500;
            color: var(--v2-ink);
        }

        body#dash .header-right .hdi a.hd-btn[href="/logout"]::after {
            content: "ออกจากระบบ";
            font-family: var(--v2-f-thai);
            font-size: 14px;
            font-weight: 500;
            color: var(--v2-danger);
        }

        body#dash .header-right .hdi a.hd-btn[href="/logout"] > i {
            color: var(--v2-danger);
        }

        body#dash .header-right .hdi:has(> .switcher) {
            background: var(--v2-glass) !important;
            border: 1px solid var(--v2-line) !important;
            border-radius: var(--v2-r-sm) !important;
            padding: var(--v2-sp-1) var(--v2-sp-2) var(--v2-sp-1) var(--v2-sp-3) !important;
            height: 44px !important;
            display: flex !important;
            align-items: center;
            justify-content: space-between;
            gap: var(--v2-sp-2) !important;
        }

        body#dash .header-right .hdi:has(> .switcher)::before {
            content: "ธีมสี";
            font-family: var(--v2-f-thai);
            font-size: 14px;
            font-weight: 500;
            color: var(--v2-ink);
        }

        body#dash .header-right .switcher {
            padding: 2px;
            border: 0;
            background: var(--v2-glass-2);
        }

        body#dash .header-right .switcher .switcher-item { width: 28px; height: 28px; }

        body#dash .header-right:not([style*="display: block"]):not([style*="display:block"]),
        body#dash .header-right.mobHid:not([style*="display: block"]):not([style*="display:block"]) {
            display: none !important;
        }

        body#dash .header-right,
        body#dash .header-right.mobHid {
            background:
                linear-gradient(180deg, rgba(255, 214, 10, 0.04) 0%, rgba(255, 214, 10, 0) 60%),
                rgba(8, 8, 11, 0.96) !important;
            border: 1px solid rgba(255, 255, 255, 0.10) !important;
            box-shadow:
                0 1px 0 rgba(255, 255, 255, 0.06) inset,
                0 24px 60px -20px rgba(0, 0, 0, 0.85),
                0 0 0 1px rgba(0, 0, 0, 0.4) !important;
        }

        html.light body#dash .header-right,
        html.light body#dash .header-right.mobHid {
            background:
                linear-gradient(180deg, rgba(255, 200, 0, 0.05) 0%, rgba(255, 200, 0, 0) 60%),
                rgba(255, 255, 255, 0.98) !important;
            border: 1px solid rgba(18, 18, 20, 0.10) !important;
            box-shadow:
                0 1px 0 rgba(255, 255, 255, 1) inset,
                0 20px 50px -16px rgba(18, 18, 20, 0.25),
                0 0 0 1px rgba(18, 18, 20, 0.05) !important;
        }
}

@media (max-width: 767px) {
    @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
                body#dash .header-right,
                body#dash .header-right.mobHid {
                    background: #08080b !important;
                }

                html.light body#dash .header-right,
                html.light body#dash .header-right.mobHid {
                    background: #ffffff !important;
                }
    }
}

@media (max-width: 991px) {
    /* ยกออกมาจากบล็อก A13 ซึ่งรวมปุ่มหลายชนิดไว้ใน selector list เดียว
       ค่าเท่าเดิม ตำแหน่งท้ายเท่าเดิม เปลี่ยนแค่ที่อยู่ */
    body#dash .switcher .switcher-item {
        min-height: 44px;
        min-width: 44px;
    }
}

/* A42 — ของสี่ชิ้นที่ดีไซน์เพิ่ม แต่ละชิ้นผูกกับข้อมูลที่มีอยู่จริง  (2026-08-03)
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */

/* ── การ์ดยอดเงินท้ายแถบข้าง ─────────────────────────────────────────── */
.sb-balance {
    display: block;
    margin-top: var(--v2-sp-4);
    padding: var(--v2-sp-4);
    background: var(--v2-yellow);
    color: var(--v2-yellow-ink);
    border-radius: var(--v2-r-md);
}
.sb-balance:hover { color: var(--v2-yellow-ink); }
.sb-balance-label {
    display: block;
    font-size: 11px;
    font-weight: 500;
    line-height: var(--v2-lh-ui);
    opacity: 0.72;
}
.sb-balance-amount {
    display: block;
    margin-top: 7px;
    font-size: 21px;
    font-weight: 700;
    line-height: var(--v2-lh-tight);
    font-variant-numeric: tabular-nums;
}
.sb-balance-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 36px;
    margin-top: var(--v2-sp-3);
    border-radius: var(--v2-r-sm);
    background: var(--v2-sidebar);
    color: var(--v2-yellow);
    font-size: 12.5px;
    font-weight: 600;
    line-height: var(--v2-lh-ui);
}

/* ── ช่องค้นหาบนแถบบน ────────────────────────────────────────────────── */
.hd-search-col { flex: 1; min-width: 0; }
.hd-search {
    display: flex;
    align-items: center;
    gap: 11px;
    height: 44px;
    padding: 0 18px;
    background: var(--v2-well);
    border-radius: var(--v2-r-pill);
}
.hd-search > i { font-size: 12px; color: var(--v2-ink-mute); }
.hd-search input {
    flex: 1;
    min-width: 0;
    background: none;
    border: 0;
    outline: 0;
    font-family: var(--v2-f-thai);
    font-size: 13px;
    color: var(--v2-ink);
}
.hd-search input::placeholder { color: var(--v2-ink-mute); }
/* ที่แคบกว่า 768 แถบบนต้องเก็บทั้งแฮมเบอร์เกอร์ โลโก้ และปุ่ม chevron ไว้แล้ว
   ช่องค้นหาจึงลงไปอยู่หน้า services แทน ไม่เบียดสามอย่างนั้นให้เล็กกว่า 44px */
@media (max-width: 767px) {
    .hd-search-col { display: none; }
}

/* ── กระดิ่ง → กล่องข้อความ ──────────────────────────────────────────── */
.hd-bell { position: relative; }
.hd-bell-dot {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    display: grid;
    place-items: center;
    border-radius: var(--v2-r-pill);
    background: var(--v2-danger);
    color: var(--v2-bg);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* ── การ์ด profile บนแถบบน ───────────────────────────────────────────────
   ‼ line-height ของ .profile-sub จำเป็น ไม่ใช่ของประดับ: .hd-profile เป็น
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */
.hdi-profile { display: inline-flex; }
.hd-profile {
    padding: 0 var(--v2-sp-2) 0 5px;
    height: 44px;
    background: var(--v2-well);
    border: 0;
    border-radius: var(--v2-r-pill);
    color: var(--v2-ink);
    text-align: left;
    cursor: pointer;
}
.hd-profile .sp-box { display: flex; align-items: center; gap: var(--v2-sp-2); height: 44px; }
.hd-profile .sp-wrapper { display: flex; align-items: center; min-width: 0; gap: var(--v2-sp-2); }
.hd-profile .hd-avatar { position: relative; display: inline-flex; width: 34px; height: 34px; flex: none; }
.hd-profile .hd-avatar img {
    width: 34px; height: 34px; margin: auto;
    border-radius: 50%; object-fit: cover; display: block;
}
.hd-profile .hd-avatar::after {
    content: ""; position: absolute; right: 0; bottom: 0;
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--v2-ok); box-shadow: 0 0 0 2.5px var(--v2-well);
}
.hd-user { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.hd-user .profile-name {
    display: flex; align-items: center; gap: var(--v2-sp-1); min-width: 0;
    font-size: 12.5px; font-weight: 600; line-height: var(--v2-lh-tight);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hd-user .profile-name > .verified { flex-shrink: 0; color: var(--v2-yellow); display: inline-flex; }
.hd-user .profile-name > .verified svg { width: 14px; height: 14px; }
.hd-user .profile-sub {
    font-family: var(--v2-f-mono); font-size: 10px; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--v2-ink-mute);
    line-height: var(--v2-lh-tight);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hd-profile .power-off {
    width: 30px; height: 30px; min-width: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    color: var(--v2-ink-mute);
    background: var(--v2-surface);
}
.hd-profile .power-off:hover { color: var(--v2-danger); background: var(--v2-danger-soft); }
/* บนจอแคบเหลือแค่รูป — ชื่อกับป้ายลงไปอยู่ในเมนู dropdown ที่มีอยู่แล้ว */
@media (max-width: 991px) {
    .hd-profile { padding: 0; background: none; }
    .hd-profile .hd-user { display: none; }
}

/* ─── A61 · ตั๋วสรุปราคาในคอลัมน์ขวาของหน้าสั่งงาน (Panel F · F1) ──────────
   เจ้าของอนุมัติ 2026-08-05 · ไม่ได้แทนที่คำเตือน 7 ข้อ นั่นยังอยู่ใต้แท็บเดิม
   ‼ พื้นใช้ --v2-sidebar ซึ่ง "เข้มทั้งสองธีม" ไม่ใช่ --v2-hero ที่ดีไซน์เขียนไว้
     เหตุผล (เจ้าของตัดสิน 2026-08-05): --v2-hero เป็นเหลืองในธีมมืด ตั๋วใบเดียวกัน
     จึงเปลี่ยนความหมายตอนสลับธีม — สว่าง = "ข้อมูล" มืด = "สิ่งที่ต้องกด"
     ทั้งที่มันกดไม่ได้ และในธีมมืดจะมีเหลืองสองก้อนบนจอเดียว โดยก้อนใหญ่กว่า
     คือก้อนที่กดไม่ได้ สายตาเลยไปผิดที่
     จุดเน้นย้ายไปอยู่ที่ "ตัวเลขยอด" แทน — ท่าเดียวกับ .neworder-stats
   ‼ ผูกกับ body#dash เพราะ --v2-sidebar / --v2-on-sidebar ประกาศไว้ใต้
     body.v2-dash เท่านั้น กฎที่ไม่มี scope จะพังทั้งบรรทัดบนหน้า guest
     (A57/A58 พลาดแบบนี้มาแล้ว modal ฝั่ง guest 340 ตัวพื้นหาย)
   ‼ ตัวเลขใช้ tabular-nums ตามดีไซน์ — คอลัมน์เงินต้องกวาดตาลงตรง ๆ ได้
   ‼ ซ่อนไว้จนกว่าจะมีราคาจริง (twig ตั้ง hidden, JS ปลดเมื่อ #charge > 0)
     ห้ามประกาศ display ที่นี่ ไม่งั้นจะไปทับ [hidden] */
body#dash .nos-quote {
    position: relative;
    margin-bottom: var(--v2-sp-3);
    padding: var(--v2-sp-5);
    border-radius: var(--v2-r-lg);
    background: var(--v2-sidebar);
    color: var(--v2-on-sidebar);
}
body#dash .nos-quote-main .k {
    font-size: 12px;
    font-weight: 500;
    color: var(--v2-on-sidebar-dim);
}
body#dash .nos-quote-main b {
    display: block;
    margin-top: var(--v2-sp-2);
    font-family: var(--v2-f-dis);
    font-size: 40px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.035em;
    font-variant-numeric: tabular-nums;
    color: var(--v2-yellow);
}
/* รอยปรุของตั๋ว — วงกลมสองข้างกินเข้าไปในขอบ คั่นด้วยเส้นประ */
body#dash .nos-quote-rows {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-top: var(--v2-sp-4);
    padding-top: var(--v2-sp-4);
    border-top: 1px dashed var(--v2-on-sidebar-dim);
}
body#dash .nos-quote-rows::before,
body#dash .nos-quote-rows::after {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--v2-bg);
    margin-top: calc(-1 * var(--v2-sp-4) - 7px);
}
body#dash .nos-quote-rows::before { left: -7px; }
body#dash .nos-quote-rows::after { right: -7px; }
body#dash .nos-quote-rows > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--v2-sp-3);
    font-size: 12.5px;
}
body#dash .nos-quote-rows span { color: var(--v2-on-sidebar-dim); }
body#dash .nos-quote-rows b {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
/* ยอดติดลบ = เงินไม่พอ ต้องเห็นทันที ไม่ใช่รู้ตอนกดสั่งแล้วเด้ง error */
body#dash .nos-quote-rows b.is-short { color: var(--v2-danger); }

/* A67 · H4 กฎข้อ 2 — มือถือ: ตั๋วราคาตรึงขอบล่างจอ
   คอลัมน์ขวาไปอยู่ล่างสุดแล้ว (ลบ order:-1 ออก) แต่ "ยอดที่ต้องชำระ" คือตัวเลข
   ที่ต้องเห็นตลอดตอนกรอก ดีไซน์จึงให้ตรึงเฉพาะตั๋ว ไม่ใช่ดันทั้งคอลัมน์ขึ้นบน
   ‼ ต้องอยู่ **หลัง** บล็อกฐานของ .nos-quote ข้างบน — specificity เท่ากัน ลำดับตัดสิน
     ครั้งแรกเขียนไว้ที่บล็อก media ของ .neworder-summary (บรรทัด ~9418) แล้วไม่ทำงานเลย
   ‼ ตัวตั๋วมี `hidden` จาก JS ตอนยังไม่มีราคา จึงไม่มีแถบดำลอยตอนเพิ่งเข้าหน้า */
@media (max-width: 1100px) {
    body#dash .nos-quote {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 60;
        margin: 0;
        border-radius: var(--v2-r-lg) var(--v2-r-lg) 0 0;
        box-shadow: 0 -10px 30px -12px rgba(0, 0, 0, 0.45);
    }
    /* ย่อตั๋วให้กระชับตามจอมือถือของดีไซน์ — ตัวเลข 26px ไม่ใช่ 40px
       และเหลือแถวเดียว "คงเหลือหลังสั่ง" ตามภาพ H4 (ราคาต่อ 1,000 กับ จำนวน ตัดออก
       เพราะสองตัวนั้นอ่านได้จากฟอร์มที่กำลังกรอกอยู่แล้ว)
       ‼ วัดครั้งแรกได้สูง 231px = 27% ของจอ 844 — บังเนื้อหาที่อยู่ใต้มัน */
    body#dash .nos-quote { padding: var(--v2-sp-4); }
    body#dash .nos-quote-main { display: flex; align-items: baseline; justify-content: space-between; gap: var(--v2-sp-3); }
    body#dash .nos-quote-main b { font-size: 26px; }
    body#dash .nos-quote-rows > div:nth-child(1),
    body#dash .nos-quote-rows > div:nth-child(2) { display: none; }
    /* เผื่อที่ให้เนื้อหาไม่โดนตั๋วบัง เฉพาะตอนที่ตั๋วโผล่จริง */
    body#dash .neworder-wrap:has(#nos-quote:not([hidden])) { padding-bottom: 150px; }
}

/* ─── A62 · ช่อง "จำนวนที่สั่ง" — ตัวเลขที่กลายเป็นเงิน (Panel F · F1) ─────
   ‼ ห้ามแตะ .form-control ตัวกลาง — A54 ตั้งไว้ 46px ทั้งเว็บโดยตั้งใจ
     กฎที่นี่ผูกกับ #order_quantity ตัวเดียว ตัวอื่นใน #fields ไม่กระทบ
   ‼ ดีไซน์ขอช่องสูง 50px ไม่ได้ทำตาม — จะได้ช่องสูงไม่เท่ากันสามช่องในฟอร์มเดียว
     โดยไม่ได้อะไรกลับมา ที่ทำแทนคือน้ำหนักและ tabular-nums ซึ่งเป็นประเด็นจริง
     ของดีไซน์: เลขนี้คือเลขที่กลายเป็นยอดเงิน ต้องอ่านง่ายและเทียบหลักได้
   ‼ min–max ย้ายขึ้นไปอยู่บรรทัดเดียวกับ label ด้วย grid — ไม่ได้แก้ twig
     `small.help-block.min-max` เป็นพี่น้องของ input ไม่ใช่ลูกของ label
     ระบบเป็นคนเขียนข้อความนั้น (PerfectPanel) ห้ามไปยุ่งกับตัวหนังสือ */
body#dash #order_quantity {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    column-gap: var(--v2-sp-3);
}
body#dash #order_quantity > .control-label { grid-column: 1; grid-row: 1; }
body#dash #order_quantity > .help-block.min-max {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    text-align: right;
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
    color: var(--v2-ink-mute);
}
body#dash #order_quantity > .form-control {
    grid-column: 1 / -1;
    grid-row: 2;
    font-family: var(--v2-f-dis);
    font-size: 18px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

/* ─── A63 · สามสถานะของ QR ที่ยังไม่เคยมีดีไซน์ (Panel F · F4) ────────────
   หมดอายุ · ล้มเหลว · เวลาสิ้นสุด — ดีไซน์ Panel F ทำมาแค่ทางสวย
   (เตรียม → พร้อมสแกน → สำเร็จ) คำว่า "ล้มเหลว" ไม่ปรากฏในไฟล์ดีไซน์เลยสักครั้ง
   ‼ ผูก body#dash เพราะ --v2-well / --v2-surface-2 เป็น token ฝั่ง authed เท่านั้น
   ‼ ห้ามใส่ animation ให้จอพวกนี้ — มันไม่ใช่ของที่ควรดึงดูดสายตาให้ตื่นเต้น
     ผู้ใช้กำลังเสียเงินอยู่ ต้องอ่านออกในครั้งเดียว */
body#dash .qr-state {
    margin-top: var(--v2-sp-4);
    padding: var(--v2-sp-4);
    border-radius: var(--v2-r-md);
    background: var(--v2-well);
    text-align: center;
}
body#dash .qr-state-title {
    font-family: var(--v2-f-dis);
    font-size: 15px;
    font-weight: 700;
    color: var(--v2-ink);
}
body#dash .qr-state-text {
    margin-top: var(--v2-sp-2);
    font-size: 12.5px;
    line-height: var(--v2-lh-body);
    color: var(--v2-ink-dim);
}
body#dash .qr-state-actions {
    display: flex;
    gap: var(--v2-sp-2);
    justify-content: center;
    margin-top: var(--v2-sp-4);
}
body#dash .qr-state-actions .btn { flex: 1; max-width: 190px; }
/* ปุ่มที่ยังกดไม่ได้ต้องดู "ยังไม่ได้" ไม่ใช่ดูเหมือนพัง */
body#dash .qr-state-actions .btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
/* QR ที่หมดอายุ — จางลงแต่ยังเห็น เพื่อให้รู้ว่าอันนี้คือของเดิมที่ใช้ไม่ได้แล้ว
   ไม่ใช่ซ่อนไปเฉย ๆ จนผู้ใช้สงสัยว่ารูปหายไปไหน */
body#dash #qr-code-image.is-expired {
    opacity: 0.25;
    filter: grayscale(1);
}
/* เวลาสิ้นสุด — เงียบ ๆ จนกว่าจะเหลือน้อยกว่าหนึ่งชั่วโมง */
body#dash .qr-deadline {
    margin-top: var(--v2-sp-3);
    text-align: center;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--v2-ink-mute);
}
body#dash .qr-deadline.is-urgent {
    color: var(--v2-danger);
    font-weight: 600;
}