@charset "UTF-8";

/* ============================================================
 *  Design tokens — mode-agnostic
 * ============================================================ */
:root {
    /* ── ฟอนต์ · เฟส 2 ─────────────────────────────────────────────
       ตระกูลเดียวคุมทั้งไทยและละติน  Plus Jakarta Sans ถูกถอดออกเพราะไม่มี
       อักษรไทย หนึ่งบรรทัดจึงเคยเป็นสองฟอนต์จริง ๆ (ไทยจาก Plex · ตัวเลขกับ
       อังกฤษจาก Jakarta) คนละความสูง คนละน้ำหนัก
       Noto Sans Thai ถูกถอดออกเพราะโหลดน้ำหนัก 100-900 ทั้งชุด แต่ถูกอ้างถึง
       แค่ 3 จุด  Instrument Serif เคยถูกเรียกใช้ 15 จุดโดยไม่มีใครโหลดให้
       จึงตกไปเป็น Georgia มาตลอด ตอนนี้โหลดจริงแล้วใน layout.twig */
    --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 ───────────────────────────────────────────
       5 ค่า จากเดิม 28  ชื่อ token เดิมถูกเก็บไว้ทั้งหมดเพื่อไม่ให้ที่เรียก
       ใช้อยู่แล้วพัง — xl ยุบมาเท่ากับ lg
       กติกา: กล่องในกล่อง มุมใน = มุมนอก − ระยะขอบ */
    --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 ─────────────────────────────────────
       8 ระดับสำหรับหน้าจอใช้งาน + 2 ระดับ display  จากเดิม 42 ค่าพิกเซล
       ค่าครึ่งพิกเซลถูกยุบทั้งหมด */
    --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 ──────────────────────────────────
       เดิม 19 สูตร clamp() ไม่ซ้ำกันเลยสักคู่ ต่างกันทีละ 2px แบบไม่มีเหตุผล
       17 สูตรถูกยุบเป็น 4 ระดับนี้ (อีก 2 อยู่ใน @media 640 ดูที่นั่น)
       ค่าไม่ได้ปัดสวย แต่ fit จากสมาชิกจริงของกลุ่ม เพื่อให้ส่วนต่างสูงสุดต่ำที่สุด
       ระดับ 4 ตันที่ 120px ไม่ใช่ 148px ตามที่ handoff ระบุ — ต่ำกว่า 1200px เท่าเดิมทุกค่า */
    --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 ───────────────────────────────────────────
       เดิม 73 สูตรที่ไม่ซ้ำกันใน 133 จุด ต่างกันทั้งความเร็วและเส้นโค้ง
       ยุบเหลือ 3 ระดับ ใช้ --v2-ease เส้นเดียวกันหมด
       ค่า 0s ไม่แตะ และ delay 600000s ที่กันสีเหลือง autofill ของ Chrome ก็ไม่แตะ */
    --v2-t-fast: 140ms;   /* hover · สีพื้น · เส้นขอบ */
    --v2-t-base: 240ms;   /* เปิด-ปิด · เลื่อน */
    --v2-t-slow: 400ms;   /* แผงใหญ่ · overlay */

    /* ── ระยะบรรทัด · เฟส 2 ───────────────────────────────────────
       ไทยมีสระบนและสระล่างสองชั้น ต่ำกว่า 1.3 วรรณยุกต์ชนบรรทัดบน
       ค่า 1 และ 0 ที่เหลืออยู่คือกล่องที่จัดกึ่งกลางด้วยความสูงคงที่ ไม่แตะ */
    --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 ระดับ ────────────────────────────
       บนพื้นมืด ความลึกคือเส้นขอบ 1px บวกความมืดรอบตัว ไม่ใช่เงาหนาซ้อนกัน
       --v2-shadow-1/2 ถูกชี้มาที่ตัวใหม่ ที่เรียกใช้อยู่แล้วจึงเปลี่ยนตาม */
    --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:
       yellow 4.61:1, ok 5.38, danger 5.44, info 5.72. The fills above keep their
       original values, so a yellow button is still #ffc800 with the same ink on
       it; only text changes. --v2-info has no light value at all above, which is
       why order links were rendering at 1.78:1 in the dark theme's cyan. */
    /* 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;
}

/* ============================================================
 *  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
       give a 360px phone a scrollbar — it clips 15px off the right edge and
       there is no way to reach it. 360 is the common Android width here, so
       that was most phones losing the end of every row. Measured at 360, 340
       and 320: page overflow goes to 0 and .app tracks the viewport. The
       handful of elements still crossing the edge are the marquee and swiper,
       which overhang on purpose and are the same count either way. */
    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;
}

.alert.alert-success {
    color: #09b797 !important;
    background: #2dfad431 !important;
}

.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 {
    color: var(--text-color) !important;
    box-shadow: none !important;
    outline: 0 !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;
    color: #fff !important;
    outline: 0 !important;
    transition: var(--v2-t-base) all;
}

.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,
.sbar-btn,
.sidebar {
    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;
}

.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);
}

.light .sbar-btn {
    background: var(--main-bg);
}

.sbar-btn .avatar {
    height: 26px;
}

.sbar-btn.sbar-lang {
    padding: var(--v2-sp-1);
}

.sbar-btn .flag-icon {
    border-radius: var(--v2-r-pill);
    font-size: 34px;
}

.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;
}

.sidebar {
    width: 305px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    top: 15px;
    bottom: 15px;
    left: 15px;
    border-radius: var(--border-radius);
    z-index: 1020;
    position: fixed;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-transition: 0.2s ease;
    transition: var(--v2-t-base) var(--v2-ease);
    overflow: hidden;
}

.sidebar::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(120deg, rgb(13 17 23) 0, #2c3748 100%);
    border-radius: var(--v2-r-pill);
    filter: blur(60px);
    z-index: 0;
}

.light .sidebar::before {
    background: linear-gradient(120deg, rgb(237 239 242) 0, #d3cfcf 100%);
}

.sidebar .sidebar-dismiss {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    background: rgba(238, 91, 91, 0.05);
    color: #ee5b5b;
    border-radius: var(--border-radius);
    padding: 0 !important;
    display: none;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.sidebar-header {
    padding: var(--v2-sp-4) 0 var(--v2-sp-5) 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.sidebar-profile {
    position: relative;
    padding: 0 var(--v2-sp-4);
    width: 100%;
    color: var(--text-color);
    font-size: 16px;
    font-weight: 600;
}

.sidebar-profile .power-off {
    background: #ff000030;
    padding: var(--v2-sp-2);
    border-radius: var(--v2-r-xs);
    line-height: 14px;
    color: red;
}

.sidebar-profile .verified svg {
    margin-top: -3px;
}

.sidebar-profile .verified {
    margin-top: -1px;
    color: #009ef7;
}

@media (min-width: 991.98px) {
    .sidebar-active .sidebar-profile {
        display: none;
    }
}

#up-header 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);
}

.sidebar-active #up-header.active {
    left: 110px;
}

.sp-box {
    padding: var(--v2-sp-3) var(--v2-sp-2);
    border-color: #1b1e25;
    background:
        radial-gradient(
            68.6% 68.6% at 57.8% 96.86%,
            var(--main-color-trans) 0,
            rgb(240 240 240 / 20%) 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: space-between;
    gap: var(--v2-sp-2);
    margin: 10px 0 25px 0;
    position: relative;
}

.sp-box .blob {
    position: absolute;
    left: 52px;
    top: 26px;
    width: 7px;
    height: 7px;
}

.dark .sp-box {
    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);
}

.sidebar-user {
    display: flex;
    flex-direction: column;
    gap: var(--v2-sp-5);
    align-items: flex-start;
}

.sidebar-user .user-status {
    font-size: 13px;
    color: var(--main-color);
}

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

.sp-wrapper img {
    border-radius: 100%;
    width: 50px;
}

.sidebar-content {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    overflow-y: auto;
}

.sidebar-menu {
    list-style: none;
    margin: 0px;
    padding: var(--v2-sp-2) var(--v2-sp-4);
}

.sidebar-menu .sidebar-menu-item {
    position: relative;
}

.sidebar-menu .sidebar-menu-link {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: var(--v2-sp-4) var(--v2-sp-5);
    color: var(--text-color);
    margin-bottom: 6px;
    -webkit-transition: 0.14s ease;
    transition: var(--v2-t-fast) var(--v2-ease);
    border-radius: var(--v2-r-md);
}

.sidebar-menu .sidebar-menu-link.active {
    background: var(--main-color);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #000000 !important;
    margin-bottom: 15px;
}

.sidebar-menu .sidebar-menu-link.active:hover {
    background: var(--main-color);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.sidebar-menu .sidebar-menu-link:hover {
    background: var(--main-bg);
    color: var(--text-color) !important;
}

.sidebar-menu .sidebar-menu-link .sidebar-menu-icon {
    line-height: 20px;
    font-size: 16px;
    width: 30px;
}

.sidebar-menu .sidebar-menu-link .sidebar-menu-text {
    font-weight: 500;
    font-size: 16px;
    line-height: 17px;
}

.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);
}

#up-header.active + .container-fluid,
.page .container-fluid:has(#up-header.active) {
    padding-top: 90px;
}

/* Alternative fix that works with older browsers */
body:has(#up-header.active) .container-fluid {
    padding-top: 90px;
}

/* Additional fix for responsive design */
@media (max-width: 1199.98px) {
    body:has(#up-header.active) .container-fluid,
    .page .container-fluid:has(#up-header.active) {
        padding-top: 80px;
    }

    /* 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) {
    body:has(#up-header.active) .container-fluid,
    .page .container-fluid:has(#up-header.active) {
        padding-top: var(--v2-sp-7);
    }

    /* 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;
    }
}

.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);
}

.hd-btn {
    display: none;
}

.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);
    }
    .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.mobHid {
        display: none;
    }
    .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: 1199.98px) {
    .sidebar {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
    .sidebar-active .sidebar {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    .sidebar .sidebar-dismiss {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
    .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 */
    }
    .sidebar {
        background: var(--main-bg);
        width: 100%;
        left: 0;
        top: 0;
        bottom: 0;
        border-radius: 0;
    }
    .sidebar-menu {
        padding-left: var(--v2-sp-4);
        padding-right: var(--v2-sp-4);
    }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
    .sidebar {
        width: 300px;
    }
    .header {
        left: 300px;
    }
    .page {
        padding-left: 315px;
    }
    .sidebar-menu {
        padding-left: var(--v2-sp-4);
        padding-right: var(--v2-sp-4);
    }
}

@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;
    }
}

.switcher {
    height: 50px;
    border-radius: var(--v2-r-md);
    background-color: var(--second-bg);
    padding: var(--v2-sp-1);
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    gap: var(--v2-sp-2);
    position: relative;
}

.light .switcher {
    background: var(--main-bg);
}

.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: -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;
    background: transparent;
    height: 40px;
    width: 40px;
    border: none;
    outline: none;
    font-size: 16px;
    line-height: 17px;
    color: var(--text-color);
    -webkit-transition: 0.14s ease;
    transition: var(--v2-t-fast) var(--v2-ease);
}

.switcher .switcher-item.active {
    background: var(--main-color);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--v2-r-sm);
    color: #fff;
}

.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;
    color: var(--text-color) !important;
    position: relative;
}

.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;
}


.sidebar-header .logo-big,
.switcher {
    height: 50px;
}

@media (min-width: 992px) {
    .service-wrapper {
        flex-direction: column;
    }
    .sidebar-active .sidebar {
        width: 80px;
        overflow: hidden;
    }
    .sidebar-active .sidebar .sidebar-menu-text {
        display: none;
    }
    .sidebar-active .sidebar .sidebar-menu {
        padding-left: var(--v2-sp-2);
        padding-right: var(--v2-sp-2);
    }
    .sidebar-active .sidebar .sidebar-menu-item span {
        display: none;
    }
    .sidebar-active .sidebar .logo-big {
        display: none;
    }
    .sidebar-active .sidebar .logo-small {
        display: block;
        width: 55px;
        margin: auto;
    }
    .sidebar-active .page {
        padding-left: 95px;
    }
}

@media (min-width: 992px) {
    .sidebar-menu .sidebar-menu-link .sidebar-menu-icon {
        padding-right: var(--v2-sp-2);
    }
}

@media (max-width: 992px) {
    .sidebar-menu .sidebar-menu-link .sidebar-menu-text {
        padding-left: var(--v2-sp-2);
    }
    .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%;
    }
    #up-header.active {
        left: 0;
        right: 0;
        top: 0;
    }
    #up-header .col img {
        margin: auto;
    }
}

@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%;
}

.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);
    color: var(--text-color) !important;
    font-size: 14px;
    font-weight: 500;
    line-height: 160%;
    white-space: nowrap;
}

.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);
    color: #000000 !important;
}

.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;
}

#notify.show i {
    background: var(--text-white);
    border-radius: var(--v2-r-sm);
    line-height: 1;
    display: flex;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
}

#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.show i {
    color: var(--main-color);
    flex-direction: column;
}

#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; /* ปรับขนาดตามความเหมาะสม */
    }
}

.sidebar-header .logo-dark {
    display: none;
}

.sidebar-header .logo-light {
    display: block;
}

.dark .sidebar-header .logo-dark {
    display: block;
}

.dark .sidebar-header .logo-light {
    display: none;
}

/* !important removed on 2026-08-01. These four are the stock theme's, and the
   !important made them beat `body#dash .btn.btn-outline-light` — so the wizard's
   ย้อนกลับ button wore a hard #333 border while every other outline on the page
   used --v2-line-strong. Safe to drop: .btn-outline-light appears in exactly one
   template, neworder.twig, which only ever renders under body#dash, so the
   Soft Panel rule now governs and nothing else can reach these. Bootstrap's own
   .btn-outline-light loses on document order regardless. */
.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;
}
.sidebar-active .logo-small {
    display: block;
    width: 40px;
    height: auto;
}
.sidebar-active .logo-big {
    display: none;
}
.dark .sidebar-active .logo-big {
    display: none;
}


.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; }
}

body#dash .sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    padding: var(--v2-sp-5) var(--v2-sp-3);
    -webkit-backdrop-filter: var(--v2-blur);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--v2-sp-2);
    z-index: 50;
}
@media (max-width: 991px) {
    body#dash .sidebar {
        position: fixed;
        left: -280px;
        top: 0;
        height: 100vh;
        transition: left var(--v2-t-base) var(--v2-ease);
    }
    body#dash .sidebar-active .sidebar,
    body#dash.sidebar-active .sidebar { left: 0; }
}

body#dash .sidebar::before { display: none !important; }

body#dash .sidebar-header {
    padding: var(--v2-sp-1) var(--v2-sp-2) var(--v2-sp-4);
    border-bottom: 1px solid var(--v2-line);
    display: flex;
    align-items: center;
}
body#dash .sidebar-header a { display: inline-flex; align-items: center; }
body#dash .sidebar-header img.logo-big {
    max-height: 32px;
    width: auto;
    display: block;
}
body#dash .sidebar-header .logo-small { display: none; }
html.dark body#dash .sidebar-header .logo-light,
html:not(.dark) body#dash .sidebar-header .logo-dark,
html.light body#dash .sidebar-header .logo-dark { display: none; }
html.dark body#dash .sidebar-header .logo-dark,
html:not(.dark) body#dash .sidebar-header .logo-light,
html.light body#dash .sidebar-header .logo-light { display: block; }

body#dash .sidebar-dismiss {
    display: none;
    position: absolute;
    top: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--v2-glass-2);
    border: 1px solid var(--v2-line);
    color: var(--v2-ink);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    font-size: 13px;
    z-index: 2;
}
@media (max-width: 991px) {
    body#dash .sidebar-dismiss { display: inline-flex; }
}

/* Sidebar profile — rich v4-style user card with avatar ring + tier chip */
body#dash .dropdown.dd-custom { margin-top: 4px; }
body#dash .sidebar-profile {
    width: 100%;
    padding: var(--v2-sp-3);
    background: linear-gradient(135deg, var(--v2-glass-3), var(--v2-glass-2));
    border: 1px solid var(--v2-line-strong);
    border-radius: var(--v2-r-md);
    cursor: pointer;
    transition: background var(--v2-t-fast), border-color var(--v2-t-fast), transform var(--v2-t-fast);
    position: relative;
    overflow: hidden;
}
body#dash .sidebar-profile::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 80% at 100% 0%, var(--v2-yellow-soft), transparent 60%);
    pointer-events: none;
    opacity: 0.8;
}
body#dash .sidebar-profile:hover {
    border-color: rgba(255, 214, 10, 0.28);
}
/* .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 .sidebar-profile .sp-box {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-3);
    position: relative;
    z-index: 1;
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    margin: 0;
}
body#dash .sidebar-profile .sp-wrapper {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    position: relative;
}
body#dash .sidebar-text {
    position: relative;
    flex-shrink: 0;
    padding: 2px;
    background: linear-gradient(135deg, var(--v2-yellow), var(--v2-yellow-2));
    border-radius: 50%;
    box-shadow: 0 0 20px var(--v2-yellow-soft);
}
body#dash .sidebar-text img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    background: var(--v2-bg);
    border: 2px solid var(--v2-bg);
}
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; }
body#dash .sidebar-user {
    display: flex;
    flex-direction: column;
    min-width: 0;
    text-align: left;
    flex: 1;
    gap: 2px;
}
body#dash .sidebar-user > span {
    font-family: var(--v2-f-dis);
    font-weight: 700;
    font-size: 14px;
    color: var(--v2-ink);
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-1);
    line-height: var(--v2-lh-tight);
}
body#dash .sidebar-user .verified {
    color: var(--v2-yellow);
    display: inline-flex;
    filter: drop-shadow(0 0 4px var(--v2-yellow-soft));
}
body#dash .sidebar-user .verified svg {
    width: 15px;
    height: 15px;
}
body#dash .sidebar-user::after {
    content: "Member · Verified";
    font-family: var(--v2-f-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    color: var(--v2-ink-mute);
    text-transform: uppercase;
    font-weight: 500;
}
body#dash .sidebar-profile .power-off {
    width: 32px;
    height: 32px;
    min-width: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--v2-r-sm);
    color: var(--v2-ink-mute);
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    font-size: 12px;
    transition: color var(--v2-t-fast), background var(--v2-t-fast), border-color var(--v2-t-fast);
    text-decoration: none !important;
}
body#dash .sidebar-profile .power-off:hover {
    color: var(--v2-danger);
    background: var(--v2-danger-soft);
    border-color: rgba(255, 122, 106, 0.30);
}

/* Sidebar menu */
body#dash .sidebar-content {
    flex: 1;
    overflow-y: auto;
    margin-top: 4px;
}
body#dash .sidebar-menu {
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    list-style: none;
}
body#dash .sidebar-menu-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    list-style: none;
}
body#dash .sidebar-menu-link {
    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);
    color: var(--v2-ink-dim);
    font-family: var(--v2-f-dis);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none !important;
    transition: background var(--v2-t-fast), color var(--v2-t-fast);
    border: 1px solid transparent;
}
body#dash .sidebar-menu-link:hover {
    background: var(--v2-glass);
    color: var(--v2-ink);
}
body#dash .sidebar-menu-link.active {
    background: var(--v2-yellow-soft);
    color: var(--v2-yellow);
    border-color: rgba(255, 214, 10, 0.22);
}
body#dash .sidebar-menu-link.active .sidebar-menu-icon {
    color: var(--v2-yellow);
}
body#dash .sidebar-menu-icon {
    width: 20px;
    display: inline-flex;
    justify-content: center;
    font-size: 14px;
    color: var(--v2-ink-mute);
    flex-shrink: 0;
}
body#dash .sidebar-menu-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ------------- 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) ------------- */
body#dash #up-header.header {
    padding: var(--v2-sp-2) var(--v2-sp-3);
    border-radius: var(--v2-r-md);
    background: var(--v2-topbar-bg);
    border: 1px solid var(--v2-line);
    backdrop-filter: var(--v2-blur-strong);
    -webkit-backdrop-filter: var(--v2-blur-strong);
    margin-bottom: 22px;
    position: fixed;
    top: 12px;
    left: calc(260px + 18px);
    right: 18px;
    z-index: 45;
    box-shadow: var(--v2-shadow-2);
}
@media (max-width: 991px) {
    body#dash #up-header.header {
        left: 12px;
        right: 12px;
    }
}
body#dash .container-fluid { padding-top: 92px !important; }
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; }
@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 .col > span.d-none.d-md-block {
    font-family: var(--v2-f-dis);
    font-weight: 700;
    font-size: 20px;
    color: var(--v2-ink);
    margin-left: 6px;
    line-height: var(--v2-lh-tight);
}

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 {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--v2-r-sm);
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    color: var(--v2-ink-dim);
    font-size: 14px;
    cursor: pointer;
    padding: 0;
    transition: background var(--v2-t-fast), color var(--v2-t-fast), border-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); }

/* Topbar right-side cluster */
body#dash .header-right {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-1);
    position: relative;
}
body#dash .header-right .hdi { display: inline-flex; }
body#dash .header-right .hd-shadow { display: none; }

/* 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. */
    body#dash .header-right {
        position: absolute;
        top: calc(100% + 10px);
        right: 0;
        min-width: 220px;
        flex-direction: column;
        align-items: stretch;
        padding: var(--v2-sp-3);
        background: var(--v2-side-bg);
        border: 1px solid var(--v2-line);
        border-radius: var(--v2-r-md);
        box-shadow: var(--v2-shadow-2);
        z-index: 100;
        gap: var(--v2-sp-2);
        backdrop-filter: var(--v2-blur-strong);
        -webkit-backdrop-filter: var(--v2-blur-strong);
    }
    body#dash .header-right .hdi .sbar-btn,
    body#dash .header-right .hdi .hd-btn {
        width: 100%;
        justify-content: flex-start;
        gap: var(--v2-sp-2);
        padding: 0 var(--v2-sp-3);
        height: 40px;
    }
}

/* 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 ------------- */
body #notify {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(40px);
    padding: var(--v2-sp-3) var(--v2-sp-5);
    border-radius: var(--v2-r-pill);
    background: var(--v2-yellow);
    color: var(--v2-yellow-ink);
    font-family: var(--v2-f-dis);
    font-weight: 600;
    font-size: 13px;
    box-shadow: 0 12px 30px -10px var(--v2-yellow-glow);
    opacity: 0;
    pointer-events: none;
    transition: transform var(--v2-t-base) var(--v2-ease), opacity var(--v2-t-base);
    z-index: 1100;
}
body #notify.active {
    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) {
    body#dash.sidebar-active .main-backdrop {
        opacity: 1;
        pointer-events: auto;
    }
    body#dash.sidebar-active {
        overflow: hidden;
    }
    body#dash.sidebar-active .sidebar {
        box-shadow: var(--v2-elev-2);
    }
}

/* ------------- 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 -------------
   NB: `body#dash .app` was REMOVED from this rule (R15.2). Setting
   z-index:2 on .app created a stacking context that trapped Bootstrap
   modal-content beneath the body-level .modal-backdrop (z-index 1040).
   Since .app comes AFTER .v2-orbs in DOM, it paints above orbs without
   needing an explicit z-index. The body#outside selectors keep their
   z-index since guest pages don't have Bootstrap modals to worry about. */
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 ---------- */
body#dash .card {
    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);
    box-shadow: var(--v2-shadow-1);
    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);
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--v2-sp-3);
    margin-bottom: 10px;
    backdrop-filter: var(--v2-blur);
    -webkit-backdrop-filter: var(--v2-blur);
}
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) ---------- */
body#dash ul.nav[role="tablist"],
body#dash ul.nav#nav-tab {
    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; }
body#dash .form-label,
body#dash .control-label {
    display: block;
    font-family: var(--v2-f-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--v2-ink-mute);
    text-transform: uppercase;
    font-weight: 500;
    margin-bottom: 8px;
}
body#dash .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;
    transition: border-color var(--v2-t-fast), background var(--v2-t-fast), box-shadow var(--v2-t-fast);
    outline: 0;
    line-height: 1.5;
    box-shadow: none;
}
body#dash .form-control:focus {
    border-color: var(--v2-yellow);
    background: var(--v2-glass-2);
    box-shadow: 0 0 0 3px var(--v2-yellow-soft);
    color: var(--v2-ink);
}
body#dash .form-control::placeholder { color: var(--v2-ink-mute); }
body#dash textarea.form-control {
    min-height: 120px;
    resize: vertical;
    line-height: 1.5;
    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;
}
body#dash .form-control[readonly] {
    background: var(--v2-glass-2);
    color: var(--v2-yellow);
    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;
}
body#dash .btn.btn-primary:hover,
body#dash .btn.btn-primary:focus {
    background: #ffe24a;
    color: var(--v2-yellow-ink);
    box-shadow: 0 12px 24px -10px var(--v2-yellow-glow);
    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) ---------- */
body#dash .alert {
    padding: var(--v2-sp-3) var(--v2-sp-4);
    border-radius: var(--v2-r-md);
    border: 1px solid var(--v2-line) !important;
    background: var(--v2-glass-2) !important;
    font-size: 13px;
    color: var(--v2-ink) !important;
    display: flex;
    align-items: center;
    gap: var(--v2-sp-3);
    flex-wrap: wrap;
    margin-bottom: 18px;
    backdrop-filter: var(--v2-blur);
    -webkit-backdrop-filter: var(--v2-blur);
    position: relative;
    line-height: 1.5;
}
/* :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-warning:not(.neworder-promo) {
    background: var(--v2-warn-soft) !important;
    border-color: rgba(255, 170, 90, 0.30) !important;
}
body#dash .alert-success {
    background: var(--v2-ok-soft) !important;
    border-color: rgba(111, 228, 168, 0.30) !important;
    color: var(--v2-ok) !important;
}
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) !important;
    border-color: rgba(255, 122, 106, 0.30) !important;
    color: var(--v2-danger) !important;
}
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)
   A6 2026-07-31 — moved onto the Soft Panel tokens.
   Edited here instead of appended. This block already owns the element and its
   background carries !important, so an appended rule loses to it however
   specific it is — a second layer that could never win. Found that out the
   hard way: the appended version applied its padding and silently dropped its
   background and border-left, which reads like a broken var(), not a cascade
   problem. Only background and colour need !important, to clear
   `body#dash .alert`; border, padding and radius win on specificity alone.
   The close button keeps the theme's own .alert .close rule above. */
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 ---------- */
body#dash #nav-read ul {
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--v2-sp-2);
    list-style: none !important;
}
body#dash #nav-read ul 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);
    list-style: none;
}

/* ---------- 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) ---------- */
body#dash .neworder-header {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--v2-sp-6);
    align-items: end;
    padding: var(--v2-sp-1) 0 var(--v2-sp-5);
    margin-bottom: 4px;
    flex-wrap: wrap;
}
@media (max-width: 900px) {
    body#dash .neworder-header { grid-template-columns: 1fr; }
}
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);
}
body#dash .neworder-stats {
    display: flex;
    gap: var(--v2-sp-5);
    align-items: center;
    flex-wrap: wrap;
    padding: var(--v2-sp-3) var(--v2-sp-4);
    background: var(--v2-glass-2);
    border: 1px solid var(--v2-line);
    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;
    min-width: 80px;
}
body#dash .neworder-stats .ns b {
    font-family: var(--v2-f-dis);
    font-weight: 800;
    font-size: 20px;
    color: var(--v2-yellow);
    line-height: var(--v2-lh-tight);
}
body#dash .neworder-stats .ns span {
    font-family: var(--v2-f-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--v2-ink-mute);
}
body#dash .neworder-stats .ns span a {
    color: var(--v2-yellow-text);
    text-decoration: none !important;
}
body#dash .neworder-stats .ns + .ns {
    padding-left: var(--v2-sp-5);
    border-left: 1px dashed var(--v2-line);
}

/* ---------- 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;
}
@media (max-width: 1100px) {
    body#dash .neworder-summary { position: static; order: -1; }
}
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#dash .nothing-found,
body#outside .nothing-found { display: none; }
body#dash .nothing-found.show,
body#outside .nothing-found.show { display: block; }
body#dash .nothing-found-body,
body#outside .nothing-found-body { padding: 48px var(--v2-sp-6); }
body#dash .nothing-found-icon,
body#outside .nothing-found-icon {
    font-size: 56px;
    color: var(--v2-yellow);
    margin-bottom: 14px;
}
body#dash .nothing-found h3,
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#dash .nothing-found p,
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; }
body#dash .os-widget {
    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);
    font-family: var(--v2-f-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
}
body#dash .os-widget::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}
body#dash .os-widget.completed { color: var(--v2-ok-text); background: var(--v2-ok-soft); }
body#dash .os-widget.processing { color: var(--v2-yellow-text); background: var(--v2-yellow-soft); }
body#dash .os-widget.inprogress { color: var(--v2-yellow-text); background: var(--v2-yellow-soft); }
body#dash .os-widget.pending { color: var(--v2-ink-mute); background: var(--v2-glass-2); }
body#dash .os-widget.partial { color: var(--v2-warn); background: var(--v2-warn-soft); }
body#dash .os-widget.canceled { color: var(--v2-danger-text); background: var(--v2-danger-soft); }

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); }
body#dash .pagination .page-item.active .page-link {
    background: var(--v2-yellow);
    color: var(--v2-yellow-ink);
}

/* 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
   it must have no surface of its own. It had three: this rule's padding, the
   background and border from `body#dash .form-control !important`, and an 11px
   radius from `.form-control:not(textarea)`. The result was a filled box inside
   a bordered card. Being the highest-specificity selector on the element, this
   is the right place to settle it, with !important only where it has to beat an
   earlier !important. Size and colour now come from the Soft Panel rule below,
   which had been losing to this selector since the day it was written. */
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
   already reached this conclusion and set the prefix to --adv-mute, but it wrote
   it against .af-amount-wrap, a class that only exists once patches.md §5 is
   applied to the markup. Same decision, on the class this page actually uses.
   The number beside it stays full-strength ink, so the prefix reading quieter
   than the amount is the intent, not a compromise. */
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
   tracks left half the row empty AND squeezed each card to 180px — against a
   backend label of "เติมเงินด้วย TrueWallet", which needs 143px of text plus a
   42px icon. Every label wrapped to two lines. The method name comes from the
   admin panel (data-payment-name), so the label is not ours to shorten; the
   grid is. A later rule asked for two columns and lost to this ID selector, so
   the fix belongs here rather than in yet another override. The 700px step is
   gone with it — the 640px rule further down already collapses to one column. */
body#dash .payment-list#method-drop {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--v2-sp-2);
    margin: 0;
}
body#dash .payment-box {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    border-radius: var(--v2-r-md);
    background: var(--v2-glass);
    border: 1.5px solid var(--v2-line);
    cursor: pointer;
    transition: border-color var(--v2-t-fast), background var(--v2-t-fast), transform var(--v2-t-fast);
    text-align: center;
    overflow: hidden;
}
body#dash .payment-box:hover {
    border-color: var(--v2-line-strong);
    background: var(--v2-glass-2);
    transform: translateY(-2px);
}
body#dash .payment-box.active {
    border-color: var(--v2-yellow);
    background: var(--v2-yellow-soft);
    box-shadow: 0 8px 24px -6px var(--v2-yellow-glow);
}
body#dash .payment-box .payment-top {
    aspect-ratio: 1.6 / 1;
    width: 100%;
    overflow: hidden;
    background: linear-gradient(135deg, var(--v2-glass-2), var(--v2-glass));
    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));
}
body#dash .payment-box .payment-icon {
    width: auto;
    height: auto;
    display: inline-flex;
    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);
}
body#dash .payment-box .payment-bottom {
    padding: var(--v2-sp-2) var(--v2-sp-2);
    text-align: center;
    font-family: var(--v2-f-dis);
    font-size: 13px;
    font-weight: 600;
    color: var(--v2-ink);
    border-top: 1px solid var(--v2-line);
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: 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;
}
body#dash .table 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: 0;
    border-bottom: 1px solid var(--v2-line);
    font-weight: 500;
    background: transparent;
}
body#dash .table tbody td {
    padding: var(--v2-sp-3) var(--v2-sp-4);
    border: 0;
    border-bottom: 1px dashed var(--v2-line);
    color: var(--v2-ink-dim);
    vertical-align: middle;
}
body#dash .table tbody tr:last-child td { border-bottom: 0; }
body#dash .table tbody tr:hover td {
    background: var(--v2-glass);
    color: var(--v2-ink);
}
body#dash .table tbody td b,
body#dash .table tbody td strong { color: var(--v2-ink); font-weight: 600; }

/* ============================================================
 *  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
 * ============================================================ */

body#dash .card-body label {
    display: block;
    font-family: var(--v2-f-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--v2-ink-mute);
    text-transform: uppercase;
    margin-bottom: 6px;
    font-weight: 500;
}
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
 * ============================================================ */
body#dash .alert-info,
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:
   Bootstrap ships every spacing utility with !important, so .mt-3 is 1rem on
   this page and on every other, and .mt-lg-0 correctly takes over at lg. Adding
   !important would win it, but that shifts eight templates by 4px for no reason
   anyone asked for — the design carries its own spacing on its own classes and
   does not need to redefine a Bootstrap utility. Removed rather than left
   looking like a rule. Cascade audit, 2026-08-01. */
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)
 *  The original `<i>` accent used Instrument Serif italic — fine for
 *  Latin words ("Apple") but wrecks Thai because the serif font has no
 *  Thai glyphs, fallback inherits italic skew, and tone marks (ั ้ ่)
 *  spike up into the previous line at line-height 0.92.
 *  Solution: use `<span class="v2-hero-accent">` that keeps the yellow
 *  gradient + drop shadow but DROPS italic + serif so Thai renders in
 *  the one Plex Thai stack. Also bump line-height.
 * ============================================================ */
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
   is transparent and every contrast probe in this project skipped it — it was
   excluded as a false-positive class. Measured against its own gradient stops it
   runs 1.19–1.88:1 on the cream hero, against the 3:1 large text needs. Dark mode
   is 11.1–15.5 on the near-black panel and is left exactly as it is.

   The gradient stays — it is the page's signature — with the stops taken down to
   the lightest gold that still clears 3:1 on rgb(246,245,240): 3.59 / 4.82 / 7.13.
   The glow goes too: a yellow drop-shadow behind dark gold on cream reads as a
   smudge, not a light source. Applies to signin's hero, signup's hero and the
   "สมัครฟรี" title, which all share this class. 2026-08-01. */
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 — 3-col cramped on <540px → 2x2 grid + smaller font */
@media (max-width: 540px) {
    body#dash .neworder-stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--v2-sp-2) var(--v2-sp-3);
        padding: var(--v2-sp-3) var(--v2-sp-3);
    }
    body#dash .neworder-stats .ns { min-width: 0; }
    body#dash .neworder-stats .ns b { font-size: 16px; letter-spacing: 0; }
    body#dash .neworder-stats .ns span { font-size: 11px; letter-spacing: 0.1em; }
    body#dash .neworder-stats .ns + .ns { padding-left: 0; border-left: 0; }
    body#dash .neworder-stats .ns:nth-child(3) { grid-column: 1 / -1; padding-top: var(--v2-sp-2); border-top: 1px dashed var(--v2-line); }
}

/* 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.
 * ============================================================ */

body#dash .sidebar-profile .sidebar-text {
    position: relative !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    /* 48 → 36 on 2026-08-02. Phase 1–2 rounded .profile-sub into the type
       scale at 11px and "MEMBER · VERIFIED" stopped fitting the 260px sidebar
       again — the defect A21 had fixed, reopened by a change that was right in
       itself. Dropping it a step below the scale would be the one off-scale
       value in the file, so the room comes from the decoration instead. */
    width: 36px !important;
    height: 36px !important;
    padding: 2px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, var(--v2-yellow), var(--v2-yellow-2)) !important;
    box-shadow: 0 0 18px rgba(255, 214, 10, 0.18);
    flex-shrink: 0;
    overflow: visible !important;
}
body#dash .sidebar-profile .sidebar-text img {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    object-fit: cover;
    display: block !important;
    background: var(--v2-bg) !important;
    border: 2px solid var(--v2-side-bg, var(--v2-bg)) !important;
    margin: 0 !important;
}
body#dash .sidebar-profile .sidebar-text::after {
    content: "" !important;
    position: absolute !important;
    bottom: 2px !important;
    right: 2px !important;
    width: 11px !important;
    height: 11px !important;
    border-radius: 50% !important;
    background: #28cd41 !important;
    box-shadow: 0 0 0 2.5px var(--v2-side-bg, #0a0a0c) !important;
    z-index: 3 !important;
    pointer-events: none !important;
    animation: none !important;
    transform: none !important;
    margin: 0 !important;
}

/* Defensive: hide any legacy .blob if Perfect Panel re-renders it */
body#dash .sidebar-profile .blob,
body#dash .sp-box .blob,
body#dash .sp-wrapper > .blob { display: none !important; }

body#dash .sidebar-profile .sp-wrapper { gap: var(--v2-sp-2) !important; overflow: hidden !important; }
body#dash .sidebar-profile .sidebar-user { min-width: 0; overflow: hidden !important; }
body#dash .sidebar-profile .sidebar-user > span {
    display: flex !important;
    align-items: center;
    gap: var(--v2-sp-1) !important;
    min-width: 0;
    line-height: var(--v2-lh-tight) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis;
}
body#dash .sidebar-profile .sidebar-user > span > .verified { flex-shrink: 0 !important; }
body#dash .sidebar-profile .sidebar-user::after {
    margin-top: 2px !important;
    line-height: var(--v2-lh-tight) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
}

html.light body#dash .sidebar-profile .sidebar-text::after {
    box-shadow: 0 0 0 2.5px var(--v2-side-bg, #ffffff) !important;
}
html.light body#dash .sidebar-profile .sidebar-text img {
    border-color: var(--v2-side-bg, #ffffff) !important;
}


/* ============================================================
 *  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 .sidebar {
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        width: 260px !important;
        height: 100vh !important;
        z-index: 50 !important;
    }
    body#dash .page {
        margin-left: 260px !important;
        min-height: 100vh;
    }
    /* Sidebar-active legacy collapsed-mode (80px icon-only) — also adjust page */
    body#dash.sidebar-active .page { margin-left: 80px !important; }
}

/* ---- 2. PROFILE SUB — real markup replaces ::after ---- */

/* Suppress the legacy ::after pseudo subtitle (we now use real .profile-sub) */
body#dash .sidebar-profile .sidebar-user::after {
    content: none !important;
    display: none !important;
}
body#dash .sidebar-profile .sidebar-user .profile-name {
    display: flex !important;
    align-items: center;
    gap: var(--v2-sp-1) !important;
    min-width: 0;
    line-height: var(--v2-lh-tight);
    font-family: var(--v2-f-dis);
    font-weight: 700;
    font-size: 14px;
    color: var(--v2-ink);
    white-space: nowrap !important;
    overflow: hidden !important;
}
body#dash .sidebar-profile .sidebar-user .profile-name > .verified {
    flex-shrink: 0;
    color: var(--v2-yellow);
    display: inline-flex !important;
    filter: drop-shadow(0 0 4px var(--v2-yellow-soft));
}
body#dash .sidebar-profile .sidebar-user .profile-name > .verified svg {
    width: 15px !important;
    height: 15px !important;
}
body#dash .sidebar-profile .sidebar-user .profile-sub {
    display: block !important;
    margin-top: 2px !important;
    font-family: var(--v2-f-mono);
    font-size: 11px;
    /* 0.14em spent 23px of the box on air and cost the word "VERIFIED".
       Measured on the live element: 0.06em still needs 107px against 99
       available, 0.04em needs 104, 0.02em needs 101. Only normal fits, at 97.
       The ellipsis stays as the fallback for a longer role string. */
    letter-spacing: normal;
    /* --v2-ink-mute is 0.52/0.48 alpha, which puts a 9.5px label at 3.75:1 in
       light and 4.09 in dark. --ink-dim is the same hue one step up and clears
       4.5 in both. Clearing the nested card moved this text onto a lighter
       surface, so it needed the step regardless. */
    color: var(--v2-ink-dim);
    text-transform: uppercase;
    font-weight: 500;
    line-height: var(--v2-lh-tight);
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* ---- 3. MOBILE chevron + dropdown panel restored with text labels ---- */

/* Desktop: hide chevron toggle (header-right is always visible inline as icons) */
body#dash #up-header > .row > .col-auto > #hd-btn.hd-btn { display: none; }

@media (max-width: 767px) {
    /* Show chevron on mobile */
    body#dash #up-header > .row > .col-auto > #hd-btn.hd-btn {
        display: inline-flex !important;
    }

    /* Header-right hidden by default on mobile (JS toggles display:block) */
    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;
    }
    /* JS sets display: block on hdRight when open */
    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);
    }

    /* Each item becomes a full-width row with icon + text label */
    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;
    }

    /* Append text label after icon using ::after with attr() from data-original-title */
    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);
    }
    /* Logout button has no data-original-title — provide explicit label */
    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);
    }

    /* Theme switcher: keep its pill layout, add a label to the LEFT of the pill */
    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 .switcher svg { width: 14px; height: 14px; }
}


/* ============================================================
 *  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. */
body#dash .sidebar-menu-link.active,
body#dash .sidebar-menu .sidebar-menu-link.active {
    background: var(--v2-yellow-soft) !important;
    color: var(--v2-yellow) !important;
    border: 1px solid rgba(255, 214, 10, 0.28) !important;
    margin-bottom: 6px !important;
}
body#dash .sidebar-menu-link.active:hover,
body#dash .sidebar-menu .sidebar-menu-link.active:hover {
    background: rgba(255, 214, 10, 0.18) !important;
    border-color: rgba(255, 214, 10, 0.4) !important;
}
body#dash .sidebar-menu-link.active .sidebar-menu-icon,
body#dash .sidebar-menu .sidebar-menu-link.active .sidebar-menu-icon { color: var(--v2-yellow) !important; }
body#dash .sidebar-menu-link.active .sidebar-menu-text,
body#dash .sidebar-menu .sidebar-menu-link.active .sidebar-menu-text { color: var(--v2-yellow) !important; }

/* Light mode: yellow-soft bg + dark yellow text for contrast */
html.light body#dash .sidebar-menu-link.active,
html.light body#dash .sidebar-menu .sidebar-menu-link.active {
    background: rgba(255, 200, 0, 0.16) !important;
    color: #8a6500 !important;
    border-color: rgba(255, 200, 0, 0.4) !important;
}
html.light body#dash .sidebar-menu-link.active .sidebar-menu-icon,
html.light body#dash .sidebar-menu-link.active .sidebar-menu-text { color: #8a6500 !important; }


/* 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) {
    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;
    }
}

/* ============================================================
 *  R10 — segmented nav-tab fix (2026-04-25)
 *  Fixes neworder + addfunds + neworder-summary tablists where
 *  legacy `.nav-item{width:100%}` + legacy `.nav-link{display:flex;justify-content:center}`
 *  fought with v2 `.nav-link{display:inline-flex}` — produced a small
 *  active pill on the left and stranded inactive text in empty space.
 *  Solution: real segmented control. Each tab fills its share, the
 *  pill background spans the whole segment, content stays centered.
 * ============================================================ */
body#dash ul.nav#nav-tab,
body#dash ul.nav#nav-info-tabs,
body#dash ul.nav[role="tablist"] {
    width: 100% !important;
    padding: var(--v2-sp-1) !important;
    gap: var(--v2-sp-1) !important;
    margin: 0 0 16px !important;
    background: var(--v2-glass) !important;
    border: 1px solid var(--v2-line) !important;
    border-radius: var(--v2-r-pill) !important;
    box-shadow: none !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
}
body#dash ul.nav#nav-tab > .nav-item,
body#dash ul.nav#nav-info-tabs > .nav-item,
body#dash ul.nav[role="tablist"] > .nav-item {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
    list-style: none !important;
    margin: 0 !important;
}
body#dash ul.nav#nav-tab > .nav-item > .nav-link,
body#dash ul.nav#nav-info-tabs > .nav-item > .nav-link,
body#dash ul.nav[role="tablist"] > .nav-item > .nav-link {
    display: flex !important;
    width: 100% !important;
    justify-content: center !important;
    align-items: center !important;
    gap: var(--v2-sp-2) !important;
    padding: var(--v2-sp-2) var(--v2-sp-3) !important;
    border-radius: var(--v2-r-pill) !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    color: var(--v2-ink-dim) !important;
    font-family: var(--v2-f-dis) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: var(--v2-lh-tight) !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    transition: background var(--v2-t-base) var(--v2-ease), color var(--v2-t-base) var(--v2-ease) !important;
}
body#dash ul.nav#nav-tab > .nav-item > .nav-link:hover,
body#dash ul.nav#nav-info-tabs > .nav-item > .nav-link:hover,
body#dash ul.nav[role="tablist"] > .nav-item > .nav-link:hover {
    background: var(--v2-glass-2) !important;
    color: var(--v2-ink) !important;
}
body#dash ul.nav#nav-tab > .nav-item > .nav-link.active,
body#dash ul.nav#nav-info-tabs > .nav-item > .nav-link.active,
body#dash ul.nav[role="tablist"] > .nav-item > .nav-link.active {
    background: var(--v2-yellow) !important;
    color: var(--v2-yellow-ink) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 6px 16px -8px var(--v2-yellow-glow, rgba(255, 214, 10, 0.55)) !important;
}
body#dash ul.nav#nav-tab > .nav-item > .nav-link .icon,
body#dash ul.nav#nav-info-tabs > .nav-item > .nav-link .icon,
body#dash ul.nav[role="tablist"] > .nav-item > .nav-link .icon {
    font-size: 14px !important;
    flex-shrink: 0 !important;
}
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,
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 */
html.light body#dash ul.nav#nav-tab > .nav-item > .nav-link.active,
html.light body#dash ul.nav#nav-info-tabs > .nav-item > .nav-link.active,
html.light body#dash ul.nav[role="tablist"] > .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 */
@media (max-width: 540px) {
    body#dash ul.nav#nav-tab,
    body#dash ul.nav#nav-info-tabs,
    body#dash ul.nav[role="tablist"] {
        padding: var(--v2-sp-1) !important;
        gap: var(--v2-sp-1) !important;
    }
    body#dash ul.nav#nav-tab > .nav-item > .nav-link,
    body#dash ul.nav#nav-info-tabs > .nav-item > .nav-link,
    body#dash ul.nav[role="tablist"] > .nav-item > .nav-link {
        padding: var(--v2-sp-2) var(--v2-sp-2) !important;
        font-size: 12px !important;
        gap: var(--v2-sp-1) !important;
    }
}

/* ============================================================
 *  R11 — mobile header-right dropdown opacity fix (2026-04-25)
 *  Issue: panel used --v2-side-bg (rgba 0.65) + backdrop-filter, but
 *  on the partner-promo screen the bright yellow banner bled through
 *  the panel, making the menu unreadable. Mobile Safari also drops
 *  backdrop-filter sometimes. Bump the panel to a near-solid bg with
 *  a layered subtle inner gradient so it still feels glassy.
 * ============================================================ */
@media (max-width: 767px) {
    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;
    }

    /* Light mode — near-solid paper with soft inner highlight */
    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;
    }

    /* Browsers without backdrop-filter — go fully solid (defensive) */
    @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;
        }
    }
}

/* ============================================================
 *  R12 — neworder.twig search-dropdown icon overlap fix (2026-04-25)
 *  Real DOM rendered by Perfect Panel runtime:
 *    .search-dropdown > .input-wrapper >
 *        <button class="input-wrapper__prepend"><span class="fas fa-search"></span></button>
 *        <input class="form-control" placeholder="ค้นหา">
 *  Style the actual injected button as the magnifier and reserve
 *  left padding on the input so they don't overlap. (Earlier
 *  attempt rendered a CSS pseudo AND left the runtime button
 *  visible → two magnifiers.)
 * ============================================================ */
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)
 *  Two compounding problems plagued non-QR modals (report/detail/email):
 *    1. `body .modal-content { background: var(--v2-glass-3) }` =
 *       rgba(255,255,255,0.13) — only 13% white = nearly invisible.
 *    2. Legacy `.modal-open .modal { backdrop-filter: blur(10px) }` (line
 *       2748 + 3956) makes `.modal` a stacking context AND blurs
 *       the .modal-backdrop sitting beneath, sometimes producing the
 *       impression that the dialog is "sunk under the overlay".
 *  Fix: scope-out non-QR form modals from the legacy blur, force a
 *  solid modal-content bg, and explicitly reset modal-dialog state
 *  with !important so no stray transform/opacity from elsewhere can
 *  hide them.
 * ============================================================ */
.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;
}
body .modal[id^="report"] .modal-content,
body .modal[id^="detail"] .modal-content,
body #changeEmailModal .modal-content {
    background: rgba(18, 20, 26, 0.96) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: var(--v2-r-lg) !important;
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%) !important;
    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) !important;
    opacity: 1 !important;
    pointer-events: auto;
    color: var(--v2-ink);
}
html.light body .modal[id^="report"] .modal-content,
html.light body .modal[id^="detail"] .modal-content,
html.light body #changeEmailModal .modal-content {
    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: var(--v2-ink) !important;
}
/* 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)
 *  R17 (2026-05-06): watermark is now baked INTO the QR image
 *  via canvas in layout.twig (band below the QR modules) so
 *  bank apps can scan cleanly and the watermark survives
 *  download/screenshot. The old `.qr-watermark-overlay` rules
 *  below are kept only as inert dead-code (JS no longer injects
 *  that element); safe to remove on next cleanup pass.
 *
 *  Targets the runtime-injected `<form class="modal-content">`
 *  containing #qr-code-image. JS wraps the img in `.qr-frame-wrap`
 *  (corner brackets) and bakes the watermark.
 *  This block styles: white QR card, viewfinder brackets,
 *  single-use + 24h footer notices, yellow pill CTA, fade-in
 *  transition, mobile sizing, dark + light parity.
 * ============================================================ */
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)
 *  Adopted from Jay-Like.com style.css:5601-5621.
 *  Why: Perfect Panel ships the QR modal HTML with a long-base64
 *  placeholder src already on #qr-code-image. Any "src.length > 200"
 *  heuristic falsely fires "ready" before the real QR replaces the
 *  placeholder. The fix is to hide the entire modal-dialog for 1.5s
 *  after Bootstrap adds .show — by that time the real QR has arrived
 *  and the modal fades in fully populated, no flash of broken state.
 *  Scoped via :has(#qr-code-image) so lang/currency modals open
 *  immediately as before.
 * ============================================================ */
.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) }`
   for the QR modal only. That rule was hoisting the QR modal above our prep
   overlay (z-index 1045) AND blurring the overlay through the modal's
   backdrop-filter. Restore Bootstrap default z-index 1050 + drop the blur
   so the prep overlay reads sharp during the 1.5s reveal delay. Lang /
   currency modals keep their legacy glass blur. */
.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)
 *  Original twig nested the cover image inside .blog-content while
 *  .blog-image only held a back-arrow button. CSS at line 14665 gave
 *  .blog-image an `aspect-ratio: 16/9` for the LIST page covers — on
 *  the single post that produced a huge empty grey block above the
 *  back button. Twig was restructured: cover goes back into .blog-image,
 *  back button promoted to a proper page-header pill. CSS below covers
 *  the new .blogpost-back pill + .blog-card-single typography.
 * ============================================================ */
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)
 *  Legacy `.outside-switcher` hid the inactive button via display:none,
 *  leaving a single yellow circle that didn't read as a toggle in dark
 *  mode (looked like an isolated button). Convert to a real 2-icon
 *  segmented control: both buttons always visible, active = yellow,
 *  inactive = ink-mute. Click either to switch modes.
 * ============================================================ */
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)
 *  Replaced legacy `.signup-area` blue card layout with v2 split-section
 *  (benefits panel left + form right). All backend bindings preserved
 *  (RegistrationForm[*] field names, _csrf, captcha, check_agreement).
 *  Reuses existing tokens: --v2-glass, --v2-yellow, --v2-line, etc.
 * ============================================================ */

/* 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
   services-v2.html / catalog.css). Tokens reconciled to theme 34
   (--v2-f-* , --v2-r-*). Desktop = TABLE, mobile = stacked cards.
   Appended to theme 34 style.css. Scoped to .svc34-* + #dash/#outside.
   ═══════════════════════════════════════════════════════════ */

/* ── 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; } }

/* ── service description modal (#detail{id}) — theme34's .modal-dialog has max-width:none
   which made it full-width/unboxed; box it back to a centered glass card. ── */
.svc-modal .modal-dialog { max-width: 540px !important; margin: 7vh auto !important; }
.svc-modal .modal-content { padding: 0 !important; border-radius: var(--v2-r-lg); overflow: hidden; box-shadow: var(--v2-elev-3); }
.svc-modal .modal-header { display: flex; align-items: center; justify-content: space-between; gap: var(--v2-sp-3); padding: var(--v2-sp-4) var(--v2-sp-5) !important; border-bottom: 1px solid var(--v2-line); margin: 0; }
.svc-modal .modal-title { font-family: var(--v2-f-dis); font-weight: 700; font-size: 16px; color: var(--v2-ink); margin: 0; }
.svc-modal .modal-header .close { background: transparent; border: 0; color: var(--v2-ink-mute); font-size: 26px; line-height: 1; cursor: pointer; opacity: .8; padding: 0; }
.svc-modal .modal-header .close:hover { opacity: 1; color: var(--v2-ink); }
.svc-modal .modal-body { padding: var(--v2-sp-5) !important; color: var(--v2-ink-dim); font-size: 14px; line-height: var(--v2-lh-body); max-height: 70vh; overflow-y: auto; }
.svc-modal .modal-body .modal-order-content { white-space: pre-line; word-break: break-word; }
.svc-modal .modal-body .btn { text-decoration: none; }

.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) {
    body#dash.sidebar-active .sidebar { width: 260px !important; overflow: visible !important; }
    body#dash.sidebar-active .sidebar .sidebar-menu-text { display: initial !important; }
    body#dash.sidebar-active .sidebar .sidebar-menu { padding-left: 0 !important; padding-right: 0 !important; }
    body#dash.sidebar-active .sidebar .sidebar-menu-item span { display: initial !important; }
    body#dash.sidebar-active .sidebar .logo-big { display: block !important; }
    body#dash.sidebar-active .sidebar .logo-small { display: none !important; }
    body#dash.sidebar-active .page { padding-left: 0 !important; }
}

/* 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  ต่อท้ายทั้งชุด ไม่แตะกฎเดิมสักบรรทัด
   ที่มา: design-variants-for-neworder-page/handoff/adserve-soft-panel.css
   แปะเมื่อ 2026-07-30 · 92 rules · 372 declarations · 29 !important

   นี่คือ override layer ตั้งใจให้ทับของเดิม จาก 99 class ที่ใช้ 64 class
   มีนิยามอยู่แล้วในไฟล์นี้ (.btn 92 กฎ · .card 42 · .form-control 35)
   จะไปแก้ที่ต้นทางไม่ได้เพราะมีแค่ 3 class ที่ถูกนิยามครั้งเดียว

   หนี้ที่เกิดจากการทับคือกฎเดิมที่ไม่มีวันชนะอีกแล้วแต่ยังนอนอยู่ ขั้นถัดไป
   คือรัน shadowed-declaration pass เพื่อตัดพวกนั้นทิ้ง ไม่ใช่ปล่อยไว้
   ========================================================================= */

/* ============================================================
 *  ADSERVE · Soft Panel signature layer
 *  ต่อท้าย style.css ได้เลย — ไม่แก้ของเดิม ไม่แตะ markup
 *  scoped ที่ body#dash / body#outside ทั้งหมด
 *
 *  ที่มา: ม็อก 10 ไฟล์ใน Claude Design (Soft Panel)
 *  ลายเซ็น 2 ชั้น
 *    s1 แสงเหลือง — ทุกหน้า
 *    s2 ตั๋วผิวด้าน — เฉพาะจุดที่มีเงิน (ใช้คลาส .adv-stub)
 * ============================================================ */

/* ─── 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
   !important — which is why 43 deposit rows each drew their own card inside the
   card that already held them. A row in a list is not a floating panel, so the
   list-row classes have left the group:
     .history-item                        2026-08-02 (phase 3 · 5.1)
     .order-item .child-item .updates-item 2026-08-02 (phase 3 · 3.1) */
body#dash .card,
body#dash .app-widget,
body#dash #up-header.header,
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; }

body#dash .sidebar {
    background: linear-gradient(180deg, var(--adv-panel-top), var(--adv-panel-bot));
    border-right: 1px solid var(--adv-panel-line);
    box-shadow: var(--adv-lift-sm);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* พื้นชั้นในของแผง — 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. */
body#dash .form-control,
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#dash .form-control:focus,
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
   เหมือนอีกสองตัว มีแค่ .disabled จึงไม่ใช่การ์ดที่เลือกได้ แต่เป็นแถวในลิสต์
   ที่ถูกจับมาไว้ด้วยกันเพราะหน้าตาคล้ายกันเฉย ๆ */
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 · ปุ่มหลัก ────────────────────────────────────────── */
body#dash .btn.btn-primary,
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#dash .btn.btn-primary:hover,
body#outside .btn.btn-primary:hover {
    background: linear-gradient(180deg, #ffe95f, #ffcd14) !important;
}

/* ─── 6 · s2 · ตั๋วผิวด้าน ────────────────────────────────── */
/* ใช้กับ "ช่วงเวลาที่มีเงิน" เท่านั้น ~5-6 จุดทั้งเว็บ:
   ยอดรวมตอนสั่ง · ยอดหลังเติม · บัตรลิงก์แนะนำเพื่อน · ใบเสร็จหลังสั่งสำเร็จ
   วิธีใช้: <div class="adv-stub"><span class="k">รวมทั้งหมด</span><b>฿266</b></div>
   ต้องเป็นลูกคนสุดท้ายของการ์ด ไม่งั้นจะไม่ได้มุมโค้งล่างและอ่านไม่เป็นตั๋ว */
.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
       not read as a ticket. On neworder step 4 it is mid-card, followed by a
       hidden #charge input and the buttons — so it had no radius at all and sat
       as a square yellow band welded to the button under it. The torn edge is
       the top, so only the bottom corners round. Inside .adv-card-flush the
       square version still wins; that rule comes later. */
    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 .sidebar {
        width: 280px;
        box-shadow: var(--v2-elev-2);
    }
    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); }
    body#dash .sidebar-dismiss {
        background: var(--adv-inner);
        border: 1px solid var(--adv-inner-line);
    }
}

/* ─── 9 · toast #notify ──────────────────────────────────── */
body#dash #notify {
    background: linear-gradient(180deg, #1e1e27, #181820);
    border: 1px solid var(--adv-hair);
    border-radius: var(--v2-r-md);
    box-shadow: var(--v2-elev-2);
    padding: var(--v2-sp-3) var(--v2-sp-4);
    font-size: 13px;
    color: var(--v2-ink);
}
html.light body#dash #notify {
    background: #fff;
    border-color: var(--adv-panel-line);
    box-shadow: 0 20px 40px -22px rgba(50,42,18,0.4);
}
body#dash #notify i {
    width: 32px;
    height: 32px;
    margin-right: 10px;
    border-radius: var(--v2-r-sm);
    background: var(--v2-ok-soft);
    color: var(--v2-ok);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

/* ─── 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; }

.adv-rail { display: flex; align-items: center; gap: var(--v2-sp-1); margin-bottom: 24px; }
.adv-rail-i {
    flex: 1; display: flex; align-items: center; gap: var(--v2-sp-2);
    padding: var(--v2-sp-2) var(--v2-sp-1); background: 0; border: 0; text-align: left;
    color: var(--adv-mute); font-family: var(--v2-f-thai); font-size: 13px; cursor: pointer;
}
.adv-rail-i i {
    width: 26px; height: 26px; border-radius: 50%;
    border: 1px solid var(--adv-inner-line);
    display: grid; place-items: center; flex-shrink: 0;
    font-family: var(--v2-f-dis); font-size: 12px; font-weight: 700; font-style: normal;
}
.adv-rail-i.is-done i { background: var(--v2-ok-soft); border-color: transparent; color: var(--v2-ok); }
.adv-rail-i.is-active { color: var(--v2-ink); font-weight: 600; }
.adv-rail-i.is-active i { background: var(--v2-yellow); border-color: transparent; color: var(--v2-yellow-ink); box-shadow: var(--adv-sel-glow); }

.adv-step-head { margin-bottom: 20px; }
.adv-step-head .t { font-family: var(--v2-f-dis); font-size: 20px; font-weight: 800; letter-spacing: 0; line-height: var(--v2-lh-tight); color: var(--v2-ink); }
.adv-step-head .d { font-size: 13px; line-height: var(--v2-lh-body); color: var(--adv-mute); margin-top: 5px; }

.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: linear-gradient(180deg, var(--adv-inner-top), var(--adv-inner));
    box-shadow: var(--adv-lift-sm);
}
.adv-recap-k { font-family: var(--v2-f-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--adv-mute); flex-shrink: 0; }
.adv-recap-v { flex: 1; min-width: 0; font-family: var(--v2-f-dis); font-size: 14px; font-weight: 700; 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 var(--v2-sp-3); border-radius: var(--v2-r-sm); background: var(--adv-panel-line); border: 0; color: var(--v2-ink); font-family: var(--v2-f-thai); font-size: 12px; font-weight: 600; cursor: pointer; flex-shrink: 0; }

.adv-nav {
    display: flex; align-items: center; justify-content: space-between; gap: var(--v2-sp-3);
    padding-top: var(--v2-sp-5); margin-top: 24px;
    border-top: 1px solid var(--adv-panel-line);
}
.adv-stub-main { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--v2-sp-4); }

@media (max-width: 767px) {
    .adv-rail-i span { display: none; }
    .adv-rail-i { flex: 0 0 auto; }
    .adv-rail { justify-content: space-between; }
    .adv-recap { flex-wrap: wrap; }
}

/* ─── 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)

   1) ชิปในการ์ดออเดอร์ เป็นดำบนดำ
      5775  .order-item-bottom .oib-first .item { background:#191a1e }
            hardcode สีเข้ม ไม่เคยมี .light override
      6007  .order-item:nth-child(even) … .item { background:var(--main-bg) }
            light mode --main-bg = #ffffff เลยบังเอิญแก้ให้เฉพาะการ์ดตำแหน่งคู่
      การ์ดเรียงห่างกัน 3 → parity สลับทุกใบ = ขาวสลับดำ ครึ่งนึงอ่านไม่ออก
      เพื่อนบ้าน 5988 กับ 6002 มี .light override ให้ border-color แล้ว
      แต่ไม่มีใครทำให้ background — นี่คือบรรทัดที่หายไป
      ใช้ var(--main-bg) ตัวเดียวกับ 6007 การ์ดคู่จึงไม่ขยับสักพิกเซล
      กระทบ /orders /subscriptions /drip-feed

   2) ป้าย ID จางเกินไปหลังพื้นเปลี่ยนเป็นครีม
      ป้ายเป็น color:var(--v2-yellow) บน background:var(--v2-yellow-soft)
      ซึ่งโปร่ง 0.22 → สีจริงขึ้นกับพื้นที่อยู่ข้างหลัง
      Soft Panel เปลี่ยนพื้นหน้าจาก #ffffff เป็น --adv-bg #eceae4
      ป้ายเลยเข้มขึ้นตามพื้น แต่ตัวอักษรยังเหลืองเท่าเดิม ระยะห่างเลยหด
      ตัวป้ายไม่ได้ถูกแก้ พื้นหลังมันเปลี่ยน
      ใช้ --adv-stub-ink ที่ดีไซน์นิยามไว้เป็น "หมึกสำหรับวางบนเหลือง" อยู่แล้ว
      dark mode ไม่แตะ เพราะเหลืองบนเหลืองเข้มยังคอนทราสต์ดี

   ทั้งบล็อกไม่มี !important — ชนะด้วย specificity ล้วน
   ========================================================================= */

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)

   992px–1199.98px had no navigation at all. Three rules, none wrong on its
   own, and the gap only exists where their ranges disagree:

     max-width:1199.98  .sidebar { transform: translateX(-100%) }   ← pushes it out
     min-width:992      body#dash .sidebar { left:0 !important }    ← wins `left`,
                                                                      never touches
                                                                      `transform`
     min-width:992      body#dash #db-menuToggle { display:none !important }

   So the sidebar was translated off screen and the button that opens it was
   hidden. iPad landscape is 1024, iPad Pro 1112 and 1194 — all three land in
   the gap.

   The layout was already expecting the sidebar to be there: the same
   min-width:992 block sets `body#dash .page { margin-left: 260px !important }`,
   so those widths also carried a 260px empty gutter down the left. That is the
   tell that the intended design for this range is the desktop one, not a
   drawer. Cancelling the transform restores it and the gutter fills with the
   sidebar it was reserved for. Showing a hamburger instead would have left the
   gutter empty and hidden the nav behind a tap for no reason.

   Nothing above 1200 or below 992 is touched.
   ========================================================================= */

@media (min-width: 992px) and (max-width: 1199.98px) {
    body#dash .sidebar,
    body#outside .sidebar {
        transform: none !important;
    }
    /* the in-drawer close button belongs to the <=991 drawer, not to this range */
    body#dash .sidebar .sidebar-dismiss,
    body#outside .sidebar .sidebar-dismiss {
        display: none !important;
    }
}


/* =========================================================================
   A8 — patches 3 and 4 from the handoff: the signup benefit list and the
   signin metric block get the Soft Panel treatment  (2026-07-31)

   Both are restyles. Every string was lifted out of the existing markup by
   regex and written back unchanged — nothing retyped, so nothing can drift.
   totals['ordersAll'] stays a live variable.

   The other three metrics are hardcoded and were already on the page before
   any of this: 380+ SERVICES, 47s AVG START, 99.98% UPTIME · 90D. Measured
   against the panel, the services figure is 340 — 340 rows on /services and
   the category headers sum to 340 as well. /services reports "ข้อมูลไม่
   เพียงพอ" for its own average start time, and nothing on the panel sources
   an uptime figure. The signup list repeats 380+ and adds
   "PromptPay · TrueMoney · USDT", where /addfunds offers QR and TrueWallet;
   USDT exists only as a branch in setPayment() for a method that is not
   enabled. Left as-is here because changing them is the owner's call, not a
   side effect of a restyle. Flagged separately.

   .adv-metrics is not scoped to body#outside because the class is unique to
   this block and the same treatment suits it wherever it lands.
   ========================================================================= */

.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
   ticket stubs  (2026-07-31)

   Both stubs have to sit flush against the bottom of their card, or the
   perforation reads as a stray line floating inside a box instead of a tear
   along its edge. That means the card loses its bottom padding and clips,
   and the stub is pulled out to the card's own padding width.

   addfunds: 22px side padding, so the stub bleeds -22px each way. #af-sum-total
   keeps its id — setChanceAmount() writes to it on every keystroke, and the
   element changed from span to b only so it inherits the stub's numerals.

   affiliates: the referral link is the point of the page, so its card goes
   full width and the other two split the row instead of all three sharing
   thirds. Both of those cards stay — the handoff offered to delete them since
   their values also appear in the stub's second line, but the values are the
   content and removing them is not a styling decision.

   No !important anywhere here: every rule targets the same selector as the
   one it adjusts and simply comes later in the file.
   ========================================================================= */

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
   cannot follow the theme  (2026-07-31)

   .service-cat-side takes background: var(--main-color) — #ffc800 in light,
   #ffd60a in dark. Yellow either way. But the text on it was tied to the
   theme instead of to the bar:

     .service-cat-header  color: var(--v2-ink)        #121214 light / #f7f7f8 dark
     .s-count             color: var(--v2-ink-mute)   .52 black / .48 white
     .s-count strong      color: var(--v2-yellow)     yellow, on yellow, always

   Light mode landed on dark-on-yellow and read fine. Dark mode landed on
   white-on-yellow, and the count badge on near-invisible white at 48%
   opacity — 231 findings on /services, more than every other page combined.
   The strong was yellow-on-yellow in both.

   Fixed by anchoring all three to --adv-stub-ink, the design's ink for
   sitting on yellow, which does not change between themes because the
   surface it sits on does not either. Light shifts from #121214 to #1a1500,
   which is imperceptible; dark stops being unreadable.
   ========================================================================= */

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)

   Pulled from the design project after the owner extended it to cover the six
   pages the first pass missed. Those pages use different class families, so
   section 3 never reached them: .signup-* for resetpassword / setnewpassword /
   confirmemail / signup, .auth-mini-card for 2fa, and .form-select plus
   #price[readonly] for child_panel_order. Verbatim from the handoff file.

   Checked before appending rather than after, because the appended
   .neworder-promo block in A6 lost silently to an existing !important and
   looked like a broken var() instead of a cascade problem:

     .signup-area          existing body#outside rule sets min-height/padding
                           only, no background. The old .signup-area at 5467
                           does set one, same specificity, earlier — new wins
                           on source order.
     .signup-badge         existing rules reach (1,1,3); the new rule is
                           (0,2,0) but carries !important on every property
                           that matters, so it wins anyway.
     .auth-mini-card       existing reaches (2,4,5), no !important; new is
                           (0,1,0) with !important. Wins.
     .form-select          existing :focus at (0,4,0) carries !important on
                           border and box-shadow; new is (1,1,1) with
                           !important, so id beats classes at equal weight.

   Also folded a duplicate of my own into section 13. A10 added
   `body#dash .adv-reflink` without checking that section 13 already styled
   .adv-reflink, leaving three rules for one class and overriding the
   designer's 20px with 14px. The colour fix moved into section 13 and the
   override is gone; the link is back to the size the design asked for.
   ========================================================================= */

/* ─── 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
   `body#outside .btn.btn-primary { background: var(--adv-btn) !important }` at
   (1,2,1), and this rule as written is (0,3,0). Both !important, so the id wins
   and the back button stayed a solid yellow pill competing with the real primary
   action. Verified on /resetpassword: the selector matched, the declaration lost. */
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
   (2026-07-31)

   1 · white text on the yellow button, dark mode only
   ------------------------------------------------------------------
   `body#dash .sib-last .btn { color: var(--v2-ink) }` and
   `body#dash .btn.btn-primary { color: var(--v2-yellow-ink) }` are both
   (1,2,1). Same weight, so source order decides, and .sib-last comes later.
   --v2-ink is #f7f7f8 on dark, and .btn-primary always carries the yellow
   gradient from section 5 — so 340 "คำอธิบาย" buttons on /services rendered
   white on yellow. Confirmed on the page, not just in the probe.

   This is the fourth time this pattern has come up (.services-id in A4,
   .promo-cta in A6, .adv-reflink in A11). The others were fixed one at a
   time; this one is written as the catch-all it should have been from the
   start. `html body#…` is (1,2,2) purely to sit above any container rule
   that lands on (1,2,1) — no !important, and it beats the next one too.

   2 · tap targets
   ------------------------------------------------------------------
   104 buttons render under 44px on a 390px viewport — .sidebar-dismiss at
   34, .sbar-btn and .hd-btn at 38, .btn-primary at 36. That is the last
   unticked item on the handoff checklist. They clear WCAG 2.2 AA, which
   asks for 24px, but not the 44px the design asked for and not what a
   thumb wants. Applied only under 991px so desktop density is untouched,
   and as min-height rather than height so nothing that is already taller
   gets squashed.
   ========================================================================= */

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,
    body#dash .sidebar-dismiss {
        min-height: 44px;
    }
    /* square icon buttons need width too, or they become tall pills */
    body#dash .sbar-btn,
    body#dash .hd-btn,
    body#dash .sidebar-dismiss {
        min-width: 44px;
    }
    /* 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
       same selector-versus-markup gap that hid the sidebar profile and the
       payment buttons. Measured at 390px: the favourite star 32, the theme
       switcher 32, the amount presets 34, the banner close 28, the copy button
       and the wizard rail 34. All clear WCAG 2.2's 24px; none reach 44.
       2026-08-01. */
    body#dash .btn-favorite,
    body#dash .switcher .switcher-item,
    body#dash .addBalanceBtn,
    body#dash .close,
    body#dash .adv-copy,
    body#dash .adv-rail-i {
        min-height: 44px;
    }
    body#dash .btn-favorite,
    body#dash .switcher .switcher-item,
    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)

   .services-rate is color: var(--v2-yellow-2) sitting in a pill tinted
   rgba(45,250,212,0.192). In light mode that composites to #d0f6e9 and the
   yellow lands 39 luminance away — 340 prices, the single most important
   number on the page.

   Nearly missed this one. The probe flagged it, I looked at a full-page
   screenshot, read the number as teal, and wrote it off as an artifact.
   It took scaling the element 4× to see that it really is yellow on mint;
   at 17px the eye fills in a colour that is not there. When a measurement
   and a glance disagree, the glance needs magnifying before the measurement
   gets overruled.

   --v2-ok is #18a06a, which lands 110 away and belongs to the same hue
   family as the pill, so the price still reads as a positive figure rather
   than as body text. Light only: on dark the pill composites over #0c0c10
   and the yellow has all the contrast it needs.
   ========================================================================= */

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
   surface  (2026-07-31)

   pagination: `body#dash .pagination .page-item.active .page-link` already
   asks for var(--v2-yellow-ink) at (1,3,1), and the active page still
   rendered rgb(247,247,248) on rgb(255,214,10). Something later lands on it;
   rather than hunt that down and have the next rule undo it again, the
   html prefix takes this to (1,3,2) so it sits above anything at (1,3,1).

   addfunds: .af-info-card-yellow .af-info-head is var(--v2-yellow) on the
   card's own yellow tint — 29 apart. The card is the "ยอดไม่เข้า?" panel, so
   the heading needs to be readable, not decorative.

   That closes this family: .services-id (A4), .promo-cta (A6), the category
   bar (A11), .adv-reflink (A11), .btn-primary (A13), the price pill (A14),
   and now these two. The rule for anyone extending this theme: if the
   surface is yellow in both themes, the ink on it must be too. Reaching for
   --v2-ink there is always wrong, because --v2-ink flips and the surface
   does not.
   ========================================================================= */

/* !important, after raising specificity twice and still losing in dark mode.
   The selector matches — verified with .matches() on the live element — and the
   colour still comes out rgb(247,247,248), so whatever wins is either heavier
   or already !important. One declaration, on the one element, is cheaper than
   another round of escalation that the next rule undoes again. */
html body#dash .pagination .page-item.active .page-link,
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 from the design project  (2026-07-31)

   Sections 1-18 are already in this file from A3 and A12. Diffed the new
   32-section file against them: 16 identical, section 18 differs only by a
   banner comment, and section 15 drops letter-spacing and text-transform
   from .adv-rows-head — that one line is applied above, in place, because
   the header it styles holds Thai and tracking pulls the vowel marks off.

   Only 19-32 are appended. The handoff says to append the whole file; doing
   that here would have laid sections 1-18 down a second time — 21 KB of
   dead duplicate and 30 duplicate !important — because this repo is not the
   empty one the instructions assume.

   The 98 !important in this block ship as written. A static pass says 113
   of the 180 (selector × declaration) pairs have no existing rule to beat
   and could drop the flag, but that test matches on the rightmost compound
   only: it cannot see an element carrying two of the classes involved, and
   it treats `border` and `border-color` as unrelated. A wrong drop makes a
   rule lose silently, which is how the .neworder-promo block in A6 spent an
   hour looking like a broken var(). Trimming comes next as its own pass,
   gated on computed values being identical before and after — the same
   invariant that let A5 cut 8.2 KB with 28 of 28 cells unchanged.

   Section 31 is inert until the classes in patches.md §5 exist in the twig
   (.form-pair, .form-section, .nav-group, .af-amount-wrap, .cur,
   .filter-sticky, .adv-skeleton). Appending it now costs nothing and keeps
   the block whole.
   ========================================================================= */
/* ═══════════════════════════════════════════════════════════
   ส่วน 19–22 · POLISH PASS (31 ก.ค. 2026)
   แก้ 3 อาการจากภาพหน้าจริง: กล่องซ้อนกล่อง · เปลืองพื้นที่ ·
   ไทยโดน letter-spacing  → ดู "Density and Polish Pass.dc.html"
   ═══════════════════════════════════════════════════════════ */

/* ─── 19 · ไทยห้ามโดน letter-spacing ─────────────────────────
   สระ/วรรณยุกต์ไทยซ้อนบนล่างของพยัญชนะ พอถ่างช่องไฟตัวประกอบ
   จะลอยหลุดจากตัวที่มันเกาะ · เก็บ tracking ไว้เฉพาะป้าย Latin
   ============================================================ */
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#dash .os-widget,
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
   (.form-section ตัวอย่างใน patches.md คือ "โดเมนและสกุลเงิน"
    .adv-rows-head ใน refunds.twig คือ {{ lang(...) }} ที่ออกมาเป็นไทย)
   text-transform:uppercase ก็ไม่มีผลกับไทย เอาออกด้วย */
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 */
body#dash .sidebar .user-card,
body#dash .sidebar .sidebar-user {
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
}
/* Two things are dead here and both should stay that way. `.user-card` is not in
   this theme's markup at all — the sidebar profile is .sp-box > .sp-wrapper >
   .sidebar-user, two spans and nothing else. And the 11px gap loses on all 17
   routes to .profile-name's own 4px, which is right: these children are single
   lines of text, not rows of chips. The panel styling below is neutralised by
   A17 for the same reason. */
body#dash .sidebar .user-card > *,
body#dash .sidebar .sidebar-user > * {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-3);
    padding: var(--v2-sp-3) var(--v2-sp-3) !important;
    border-radius: var(--v2-r-md) !important;
    background: linear-gradient(180deg, var(--adv-panel-top), var(--adv-panel-bot)) !important;
    border: 1px solid var(--adv-panel-line) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06) !important;
}
/* รูปเป็นสี่เหลี่ยมมน เข้าชุดกับไอคอนอื่นทั้งเว็บ ไม่ต้องมีวงแหวน */
body#dash .sidebar .user-card img,
body#dash .sidebar .sidebar-user img {
    width: 38px !important;
    height: 38px !important;
    border-radius: var(--v2-r-sm)!important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    object-fit: cover;
}
/* ป้ายที่จบด้วย … แล้วไม่บอกอะไร — ซ่อนไว้ ใส่ยอดคงเหลือแทนใน twig */
body#dash .sidebar .user-card .user-meta,
body#dash .sidebar .sidebar-user .user-meta {
    font-family: var(--v2-f-thai);
    font-size: 11px;
    letter-spacing: normal;
    color: var(--adv-mute);
    text-transform: none;
}

/* 20.2 ช่องกรอกเงิน — ฿ กับตัวเลขต้องอยู่ระนาบเดียวกัน */
body#dash .af-amount-wrap {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 72px;
    padding: 0 var(--v2-sp-5);
    border-radius: var(--v2-r-md);
    background: var(--adv-inner);
    border: 1.5px solid var(--v2-yellow);
    box-shadow: var(--adv-sel-glow);
}
body#dash .af-amount-wrap .cur {
    font-family: var(--v2-f-dis);
    font-size: 26px;
    font-weight: 700;
    color: var(--adv-mute);
}
body#dash .af-amount-wrap input,
body#dash .af-amount-wrap .form-control {
    flex: 1;
    min-width: 0;
    height: 100% !important;
    padding: 0 var(--v2-sp-2) !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-family: var(--v2-f-dis);
    font-size: 34px;
    font-weight: 800;
    color: var(--v2-ink);
}

/* 20.3 ปุ่มจ่ายเงิน — ป้ายชื่อต้องอยู่ในการ์ดเดียวกัน ไม่ใช่กล่องต่อท้าย */
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-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 .sidebar .nav > li > a,
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 .sidebar .nav > li + li,
body#dash #nav-reg > li + li { margin-top: 2px; }
body#dash .sidebar .nav > li > a > i,
body#dash #nav-reg > li > a > i { width: 18px; text-align: center; font-size: 16px; }
/* หัวข้อกลุ่ม — ทำแล้วใน A20: layout.twig ปล่อย <div class="nav-group"> สี่อัน
   ในลูป site['menu'] โดยผูกกับ menu['link'] ไม่ใช่ลำดับ (div ไม่ใช่ li ตามที่
   คอมเมนต์เดิมเสนอ — selector เป็น descendant อยู่แล้ว ใช้ได้ทั้งคู่) */
body#dash .sidebar .nav-group {
    padding: var(--v2-sp-3) var(--v2-sp-3) var(--v2-sp-2);
    font-size: 11px;
    font-weight: 600;
    color: var(--adv-mute);
    list-style: none;
}

/* 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;
}
/* สถิติ 3 ตัวไม่ต้องมีการ์ด — วางในแถวเดียวกับหัวเรื่อง */
body#dash .neworder-stats {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--v2-sp-4);
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none;
}
body#dash .neworder-stats .ns { text-align: right; }
body#dash .neworder-stats .ns + .ns { padding-left: var(--v2-sp-4); border-left: 1px solid var(--adv-panel-line); }
body#dash .neworder-stats .ns b { font-size: 20px; line-height: var(--v2-lh-tight); color: var(--v2-ink); }
body#dash .neworder-stats .ns:nth-child(2) b { color: var(--v2-yellow-text); }
body#dash .neworder-stats .ns span { font-size: 11px; margin-top: 2px; }

/* 21.3 แท็บ — segmented 40px ไม่ใช่ปุ่มเต็มความกว้าง 60px

   DEAD, and deliberately so. Every declaration in 21.3 loses to the
   `ul.nav#nav-tab` block above, which is !important throughout and carries a
   comment explaining the bug it exists to fix: the old rules produced a small
   active pill on the left with the inactive labels stranded in empty space. That
   fix wins and should keep winning. Left in place rather than deleted so the
   design's compact-tab intent stays on the record — but editing anything here
   changes nothing on the page. Confirmed by cascade audit, 2026-08-01. */
body#dash #nav-tab,
body#dash #nav-info-tabs {
    display: inline-flex;
    gap: var(--v2-sp-1);
    padding: var(--v2-sp-1);
    border-radius: var(--v2-r-sm);
    background: linear-gradient(180deg, var(--adv-panel-top), var(--adv-panel-bot));
    border: 1px solid var(--adv-panel-line);
    width: auto;
}
body#dash #nav-tab > li,
body#dash #nav-info-tabs > li { flex: 0 0 auto; }
body#dash #nav-tab .nav-link,
body#dash #nav-info-tabs .nav-link {
    height: 34px;
    padding: 0 var(--v2-sp-4);
    border-radius: var(--v2-r-sm)!important;
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-2);
    border: 0 !important;
}
body#dash #nav-tab .nav-link.active,
body#dash #nav-info-tabs .nav-link.active {
    background: var(--v2-yellow) !important;
    color: var(--v2-yellow-ink) !important;
    font-weight: 700;
    box-shadow: none !important;
}
body#dash #nav-tab .nav-link .icon,
body#dash #nav-info-tabs .nav-link .icon { font-size: 14px; margin: 0; }

/* 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
   IDs and wins, so each item stays its own card instead of collapsing into the
   dashed single panel this block describes. Cards suit the page and the counter
   still applies, so the look is left alone — but the three declarations are
   decoration in the file, not instructions to the browser. The comment below is
   also half true: CSS added the 01–07 numbers but cannot remove the 👉, which
   comes from the backend text, so both are on screen. */
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 · โหมดสว่าง — เลิกไล่สีครีม ─────────────────────────
   แสงเหลืองที่สวยบนพื้นดำ พอมาบนพื้นขาวกลายเป็นคราบขุ่น
   ความต่างต้องมาจาก พื้น vs แผง ไม่ใช่ไล่สี
   ============================================================ */
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 · หน้าที่เหลือทั้งหมด
   → ดู "Polish Pass 2 All Pages.dc.html"

   ⚠️ ทุก selector ในส่วนนี้ยืนยันแล้วว่ามีจริงใน twig/style.css
      กฎที่ต้องเติมคลาสใหม่ในโค้ด แยกไปอยู่ท้ายไฟล์ (ส่วน 30)
      และมีขั้นตอนใน patches.md
   ═══════════════════════════════════════════════════════════ */

/* ─── 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. */
body#dash .form-control:not(textarea),
body#dash .form-select { height: 44px; border-radius: var(--v2-r-sm); font-size: 13px; }
/* font-weight loses to `.card-body label`, which sets 500 on the uppercase mono
   micro-label these pages actually use. 500 is right for 11px uppercase; the 600
   here applies on the few labels outside a .card-body. */
body#dash .control-label,
body#dash .form-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--adv-mute);
    margin-bottom: 6px;
}

/* 23.4 alert — 20px → 14px */
body#dash .alert, 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 วางไว้ตลอดโดยไม่มีเงื่อนไข แล้วให้
   ช่องค้นหาเป็นคนเปิดปิด  display:flex !important ตรงนี้จึงชนะ inline style ที่
   script.js เขียน (style.display='none') เพราะ !important ชนะ inline เสมอ
   ผลคือกล่อง "ไม่มีผลลัพธ์!" โผล่คู่กับผลลัพธ์ 340 รายการตลอดเวลา ซ่อนไม่ได้เลย
   ตอนนี้ script.js สลับคลาส .show แทน กฎจึงผูกกับคลาสนั้น และไม่ต้องใช้
   !important อีก เพราะ .show ชนะกฎ display:none ที่ specificity อยู่แล้ว */
body#dash .nothing-found.show,
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;
}
body#dash .nothing-found .nothing-found-body {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-4);
    text-align: left !important;
    width: 100%;
}
body#dash .nothing-found-icon {
    width: 44px; height: 44px;
    border-radius: var(--v2-r-md);
    background: var(--adv-inner);
    color: #5f5f6b;
    display: grid; place-items: center;
    font-size: 20px;
    flex-shrink: 0;
    margin: 0 !important;
}
body#dash .nothing-found p, 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 แถว */
body#dash .modal-content {
    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);
}
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 */
body#dash .pagination { gap: var(--v2-sp-1); }
body#dash .pagination .page-link {
    min-width: 38px; height: 38px;
    border-radius: var(--v2-r-sm);
    background: linear-gradient(180deg, var(--adv-panel-top), var(--adv-panel-bot));
    border: 1px solid var(--adv-panel-line);
    color: var(--v2-ink);
    font-family: var(--v2-f-mono);
    font-size: 13px;
    display: inline-flex; align-items: center; justify-content: center;
}
body#dash .pagination .active .page-link {
    background: var(--v2-yellow);
    border-color: transparent;
    color: var(--v2-yellow-ink);
    font-weight: 700;
}

/* ─── 24 · การ์ดออเดอร์ · ใช้ร่วม 5 หน้า ─────────────────────
   โครงจริง: .order-item > .order-item-top (.oit-first > .order-id,
   .oit-last) + .order-item-bottom (.oib-first > .link.order-link-url,
   .item.date, .item.flex-item · .oib-last > .btn)
   214px → 120px ต่อใบ
   ============================================================ */
/* 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; }
body#dash .os-widget { height: 24px; padding: 0 var(--v2-sp-2); font-size: 11px; }

/* ─── 25 · services ──────────────────────────────────────────
   ⚠️ หน้านี้เป็น "ตาราง" อยู่แล้ว (.svc34 .svc-tbl tr.service-item)
      มี hover · เส้นประ · data-label ยุบเป็นการ์ดบนมือถือ ครบแล้ว
      เหลือแค่ลดความสูงแถวกับเก็บรายละเอียด — ห้ามรื้อเป็นการ์ด
   ============================================================ */
.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 ──────────────────────────────
   โครงจริง: .ticket-list > .ticket-item(.ticket-item-new) >
   .ticket-item-top (.ticket-id .ticket-title .ticket-status) +
   .ticket-item-bottom · แชท: .ticket-message(.ticket-message-support)
   > .ticket-message-box + .ticket-message-info
   ============================================================ */
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 ─────────────────────────────
   โครงจริง: .aff-item + .aff-bold · .af-sum-card > .af-sum-head
   + .af-sum-row · .payment-box > .payment-top > .payment-icon
   + .payment-bottom > span   (JS เจนใน addfunds.twig บรรทัด 224)
   ============================================================ */
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 .sidebar .nav > li > a:hover,
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 · ต้องเติมคลาสใหม่ในโค้ดก่อน ถึงจะทำงาน
   ────────────────────────────────────────────────────────────
   ทุกกฎด้านล่างนี้ "ไม่มีผล" จนกว่าจะเติมคลาสตาม patches.md §5
   ถ้ายังไม่ได้เติม ก็ไม่พังอะไร แค่ไม่เกิดอะไรขึ้น
   ═══════════════════════════════════════════════════════════ */

/* 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 แล้ว ไม่ประกาศซ้ำ */

/* 31.4 .af-amount-wrap — ฿ กับตัวเลขระนาบเดียวกัน */
body#dash .af-amount-wrap {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 72px;
    padding: 0 var(--v2-sp-5);
    border-radius: var(--v2-r-md);
    background: var(--adv-inner);
    border: 1.5px solid var(--v2-yellow);
    box-shadow: var(--adv-sel-glow);
}
body#dash .af-amount-wrap .cur { font-family: var(--v2-f-dis); font-size: 26px; font-weight: 700; color: var(--adv-mute); }
body#dash .af-amount-wrap .form-control {
    flex: 1; min-width: 0;
    height: 100% !important;
    padding: 0 var(--v2-sp-2) !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-family: var(--v2-f-dis);
    font-size: 34px;
    font-weight: 800;
    color: var(--v2-ink);
}

/* 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 — โครงร่างตอนโหลด */
@keyframes adv-shimmer { 0% { background-position: -420px 0; } 100% { background-position: 420px 0; } }
.adv-skeleton {
    border-radius: var(--v2-r-pill);
    background: linear-gradient(90deg, var(--adv-inner) 0%, var(--adv-inner-line) 50%, var(--adv-inner) 100%);
    background-size: 840px 100%;
    animation: adv-shimmer 1.4s linear infinite;
}
.adv-skeleton-row {
    display: flex; align-items: center; gap: var(--v2-sp-3);
    padding: var(--v2-sp-3) var(--v2-sp-3);
    border-radius: var(--v2-r-md);
    background: var(--adv-inner);
}
.adv-skeleton-row + .adv-skeleton-row { margin-top: 9px; }
@media (prefers-reduced-motion: reduce) { .adv-skeleton { animation: none; } }


/* ─── 32 · ป้ายแคปซูลห้ามตัดคำ ───────────────────────────────
   ป้ายที่ตั้ง height ตายตัว + border-radius:999px ไม่มีที่เหลือ
   แนวนอนเลย · พอฟอนต์ไทยยังโหลดไม่เสร็จ (FOUT) หรือผู้ใช้ซูม
   คำจะตกบรรทัดที่ 2 แล้วล้นออกนอกพื้นสี
   เช่น "กำลังทำ" → "กำลัง" / "ทำ" · "Best Seller" → "Best" / "Seller"
   ============================================================ */
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)

   Section 20 styles `.sidebar .sidebar-user > *` as a panel: padding,
   border, radius, gradient, inset highlight. That is written for a card
   layout. The markup here is layout.twig:123 — .sidebar-user holds exactly
   two spans, .profile-name and .profile-sub, and nothing else. .user-card,
   which the same rule also targets, does not exist anywhere in this theme.

   So the selector matched and did the wrong thing: a box around the username,
   a second box around "Member · Verified", and the role clipped to
   "MEMBER…". Swept every page for clipped text afterwards and this was the
   only real hit — the one other match is the order link on /orders, which is
   deliberately ellipsised.

   Worth naming because the handoff states sections 1-30 are safe on existing
   markup and every selector was verified to exist. The selector does exist.
   What was not checked is what sits inside it, and a rule aimed at children
   can land on a completely different kind of child.

   Fixed here rather than by editing section 20, so the appended block stays a
   verbatim copy of the design file and this correction stays visible as ours.
   ========================================================================= */

body#dash .sidebar .sidebar-user {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}
body#dash .sidebar .sidebar-user > .profile-name,
body#dash .sidebar .sidebar-user > .profile-sub {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0!important;
    background: none !important;
    box-shadow: none !important;
    width: auto;
    /* overflow/text-overflow were here too, lost to the !important pair in
       section 20 — and rightly so: spilling a name out of a 231px sidebar is
       worse than an ellipsis. Fixing the nested card gave the text its room,
       which is what this block was actually after. */
}


/* =========================================================================
   A18 — the payment buttons, second markup mismatch in section 20
   (2026-07-31)

   Section 20.3 turns .payment-box from a column into a row on purpose —
   "ป้ายชื่อต้องอยู่ในการ์ดเดียวกัน ไม่ใช่กล่องต่อท้าย". It sizes .payment-icon to
   42px and styles the label through `.payment-label` and
   `> span:last-child`. Neither exists. The buttons are generated by
   setPayment() in addfunds.twig, and the shape is
   .payment-box > .payment-top > .payment-icon  +  .payment-bottom, where
   .payment-bottom is a div holding the text.

   So the label rule matched nothing, and .payment-top kept the column-era
   `width: 100%` and `aspect-ratio: 1.6/1` from line 11117. In a row that
   took 145 of the box's 180px and left .payment-bottom exactly 0 — the
   label wrapped one character per line and spilled out of the card.

   Releasing .payment-top's width and giving .payment-bottom the flex the
   label rule intended gets the row the design asked for. Verified on the
   live page before writing: 44px icon, 88px label, two lines, no overflow.

   patches.md §6 documents this exact structure, which is the part worth
   keeping: the note was right and the CSS was written against a different
   shape anyway. Same story as the sidebar in A17 — the selectors exist, the
   children are not what the rules assume. Two of the fourteen new sections
   needed this; the rest landed clean.
   ========================================================================= */

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 — Thai text stops receiving tracking  (2026-07-31)

   Rule 6 of the handoff: never put letter-spacing on Thai, because the
   vowel and tone marks ride on their base consonant and tracking pushes
   them off it. Section 19 does this for the classes the design knew about.
   Audited the rendered pages rather than the stylesheet — every element
   whose own text contains U+0E00–U+0E7F and whose computed letter-spacing
   is positive — and found about 1,580 more across the 14 member routes.

   Two of them inherit, which is why grepping the CSS would have missed
   them: .oib-first and .sib-first carry 0.04em and every Thai label inside
   an order row or a service row picks it up. That is 1,488 of the total on
   its own — "ขั้นต่ำ", "ยอดที่ชำระ", "คงเหลือ".

   The rest are label rules: .s-count, .card-body label, .aff-item span,
   .af-sum-row .k, .v2-wallet-chip .l.

   And three of the four classes the design exempts. patches.md §5 keeps
   0.18em on .v2-eyebrow, .adv-stub .k, .adv-recap-k and .adv-terms-head
   "เพราะเนื้อหาเป็น Latin ตัวพิมพ์ใหญ่เสมอ". Checked all four against the twig:
   .v2-eyebrow is Latin on all 34 pages — ORDER · SINGLE, WALLET · DEPOSIT —
   and keeps its tracking. The other three are Thai here: "ยอดหลังเติม",
   "บริการที่เลือก", "สิ่งที่คุณได้". The exemption was written for the mock's
   own copy, not for this panel's.

   .neworder-promo strong is mine, from A6. 0.02em on "ปรับระบบใหม่".

   Negative tracking is left alone. It tightens rather than separates, the
   design applies it to Thai display type itself (-0.03em on the auth
   headings), and removing it would change every heading on the site.
   ========================================================================= */

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)

   Section 21.1 sets 38px rows on `body#dash .sidebar .nav > li > a` and
   `#nav-reg > li > a`. The sidebar here is `ul.sidebar-menu`, so the rule
   matched nothing and the rows stayed at 42px — .matches() on the live
   element returns false. Third selector-versus-markup mismatch in the
   Polish Pass, after the sidebar profile in A17 and the payment buttons in
   A18. Same values, pointed at the class this theme actually uses.

   The menu is a single <li> holding a {% for %} over site['menu'], so the
   rows are sibling <a> elements rather than list items — hence `> a` and
   `a + a` rather than the `> li > a` the design assumed.

   Group headings land in layout.twig. .nav-group already has its styling
   from section 21.1, which reaches it because that selector is a plain
   descendant of .sidebar.

   The menu already scrolls: .sidebar-content is 489px and the 13 rows came
   to 648. Density takes them to 620, four headings put it at 768. So this
   trades 148px of scroll for four labels in a list that had to be scrolled
   either way — worth it at 13 items, and the reason the headings are four
   and not the five the grouping first suggested.
   ========================================================================= */

body#dash .sidebar .sidebar-menu > 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 .sidebar .sidebar-menu > li > a + a { margin-top: 2px; }
body#dash .sidebar .sidebar-menu .sidebar-menu-icon {
    width: 18px;
    text-align: center;
    font-size: 16px;
}
body#dash .sidebar .sidebar-menu .nav-group:first-child { padding-top: 0; }


/* =========================================================================
   A29 — the sidebar role label stopped fitting when the type scale landed
   (2026-08-02)

   Phase 1–2 rounded .profile-sub from 9.5px into the scale at 11px, and
   "MEMBER · VERIFIED" went from needing 97px of a 99px box to needing 112.
   It was truncating again — the same defect A21 fixed, reopened by a change
   that was right in itself.

   Rounding it back down would be the one value off the new scale, so the
   room comes from the decoration instead: the avatar was 48px around a 40px
   image and the power button 32px around a 12px glyph. 36/32 and 30 give
   back 14px, and the label fits at 113 against 112 measured on the live
   sidebar. The avatar still reads as an avatar at 36px.
   ========================================================================= */

body#dash .sidebar-profile .sidebar-text img { width: 32px !important; height: 32px !important; }
body#dash .sidebar-profile .power-off { width: 30px; height: 30px; min-width: 30px; }


/* =========================================================================
   A30 — phase 3 · 5.1 · one idea, one surface  (2026-08-02)

   Measured on the live pages before touching anything, because the spec lists
   seven sites and only four of them actually draw a nested surface:

     .card.form-card › .card-body › .panel-body            #20202a, border, r14 inside r22   ← real
     .card.neworder-summary-card › … › .panel-body.service-desc   same                       ← real
     .card.form-card › .card-body › .history-item ×43      r14 + shadow inside r22           ← real
     .card › .card-body › .adv-recap                       keeps its surface, radius steps down
     /addfunds .nothing-found      not rendered on that page at all
     /services .nothing-found      draws no surface already
     .order-item-top / -bottom     draw no surface — the spec said to check first, and this is the answer

   Done in CSS rather than by renaming the class in Twig, which is what the spec
   sketched: layout.twig line 779 reads $("#service_description>.panel-body").html()
   to split the service description into lines. Renaming it to .card-section
   would have broken that silently.
   ========================================================================= */

/* 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; }

/* .adv-recap keeps its surface — it is a summary strip, not a section — but an
   inner corner has to be the outer one minus the gap, not the same 14 */
.adv-recap { border-radius: var(--v2-r-sm); }

/* ═══════════════════════════════════════════════════════════════════════════
   A34 · เฟส 3 · พื้นผิว 50 จุด — จาก handoff รอบสอง
   รอบแรกสแกน 5 ไฟล์ได้ 7 จุด รอบนี้สแกนครบ 27 เทมเพลตได้ 50 จุดใน 12 หน้า
   และจัดได้เป็นพฤติกรรม 4 แบบ ทั้งหมดแก้ที่ CSS ไม่ต้องแตะ Twig
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 3.1 · รายการในการ์ด (24 จุด) ───────────────────────────────────────────
   การ์ดใบเดียวที่ข้างในมีการ์ดเล็กเรียงกัน  แถวในลิสต์ไม่ใช่แผงลอย
   พื้นผิวเหลือใบเดียว แถวคั่นด้วยเส้น แถวสุดท้ายไม่มีเส้นและไม่มีระยะล่างเกิน
   .history-item ทำไปแล้วใน A30  ที่เหลือ 8 คลาสอยู่ตรงนี้ */
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;
}

/* เส้นวางบน "ทุกแถวที่มีแถวก่อนหน้า" ไม่ใช่ล่างทุกแถวแล้วลบตัวสุดท้าย
   เพราะ :last-child ใช้ไม่ได้ที่นี่ — หลัง .order-item ใบสุดท้ายบน /orders
   ยังมี .modal, <script> และ section ต่อท้ายอยู่ในพ่อเดียวกัน แถวสุดท้ายจึง
   ไม่เคยเป็น last-child  แบบ ~ ให้เส้นเฉพาะระหว่างแถว ไม่มีบนหัวไม่มีใต้ท้าย */
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 จุด) ────────────────────────────────────────
   อันนี้ซ้อนได้ เพราะเป็นของแทรกชั่วคราวที่ต้องอ่านแยกจากเนื้อหารอบตัว
   แต่ต้องลดมุมลงหนึ่งขั้น ตามกติกา มุมใน = มุมนอก − ระยะขอบ  (14 − 4 = 10)
   และไม่มีเงา — ของที่อยู่ในกล่องแล้วไม่ต้องลอยอีกชั้น */
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 จุด) ─────────────────────────────────────
   พวกนี้คือ "ของอีกชิ้น" ในการ์ด ไม่ใช่เนื้อหาต่อเนื่อง จึงเก็บพื้นผิวไว้
   แต่ลดมุมลงหนึ่งขั้น
   .adv-recap กับ .nameservers ลดไปแล้ว  อีกสองตัวไม่ลด ดูเหตุผลท้ายบล็อก */
body#dash .af-sum-total,
body#dash .addfunds-amount { border-radius: var(--v2-r-sm); }

/* ไม่ลด 2 ตัว แม้สเปกจะลิสต์ไว้:
   .adv-copy         เป็น pill (--v2-r-pill) ไม่ใช่การ์ด ลดมุมคือทำให้มันไม่ใช่ pill
   .ticket-message-box มุมไม่เท่ากันสี่ด้านเพราะเป็นบับเบิลข้อความ ลดแล้วเสียรูปบับเบิล
   ทั้งคู่ผ่านกติกา "ของอีกชิ้น" อยู่แล้ว สิ่งที่ลิสต์ต้องการคือไม่ให้มุมในเท่ามุมนอก
   ซึ่งทั้งสองตัวก็ไม่เท่าอยู่แล้ว */

/* ═══════════════════════════════════════════════════════════════════════════
   A35 · หัวข้อหมวดบน /services · วรรณยุกต์ไทยชนบรรทัดบนที่จอ 360
   เจอตอนตรวจตามข้อ 7 ของ handoff (360 / 768 / 1440) ซึ่งรอบก่อนผมตรวจแค่ 390
   .service-cat-header เขียน line-height: 23px เป็นพิกเซลตายตัวตอน font-size
   ยังเป็น 16px (= 1.44)  ต่อมามีกฎตั้ง font-size เป็น 20px อัตราส่วนเลยตกเหลือ
   1.15 โดยไม่มีใครรู้ — ต่ำกว่า --v2-lh-tight (1.3) ที่ไฟล์นี้ประกาศเองว่าเป็น
   ค่าต่ำสุดที่ภาษาไทยรับได้  เห็นผลเฉพาะตอนหัวข้อตัดสองบรรทัด คือที่จอแคบ
   ═══════════════════════════════════════════════════════════════════════════ */
/* ตัวจริงที่ทำให้เกิดคือ h2 { line-height: 1.2 } และ h3 { line-height: 1.2 }
   ใน bootstrap.css — ไม่ใช่คลาสไหนของธีมเลย เฟส 2 ตั้ง --v2-lh-tight: 1.3 ไว้เป็น
   "ต่ำสุดที่ไทยรับได้" แต่ไม่ได้ทับกฎ base สองตัวนี้ หัวเรื่องที่ไม่มีกฎของตัวเอง
   จึงตกลงมาที่ 1.2  เห็นผลเฉพาะตอนหัวเรื่องตัดสองบรรทัด = จอแคบ
   style.css โหลดหลัง bootstrap.css กฎนี้จึงชนะที่ลำดับ ไม่ต้องพึ่ง specificity
   หัวเรื่องที่มีกฎ line-height ของตัวเองอยู่แล้วไม่ถูกแตะ เพราะ specificity สูงกว่า */
h1, h2, h3, h4, h5, h6 { line-height: var(--v2-lh-tight); }