/* Static CSS — classic member theme */
/* Each block below comes from a PHP view file (100% static, no PHP value) */
/* Skipped (kept inline): base/header.php, panel/game.php */


/* ─────────────────────────────────────────────────── */
/* FILE: base/footer.php */
/* ─────────────────────────────────────────────────── */


    /* ── Footer Style A — Pill ลอย + FAB ── */
    .fs-a {
        position: fixed;
        left: 50%;
        bottom: 14px;
        transform: translateX(-50%);
        z-index: 999;
        width: calc(100% - 24px);
        max-width: 460px;
        display: grid;
        grid-template-columns: 1fr 1fr 1.2fr 1fr 1fr;
        align-items: end;
        background: linear-gradient(180deg, #232a55 0%, #161b3a 100%);
        border: 1px solid rgba(255, 255, 255, .08);
        border-radius: 22px;
        padding: 8px 10px;
        box-shadow: 0 14px 36px rgba(0, 0, 0, .55);
    }

    .fs-a-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        gap: 3px;
        color: #c9cee0;
        text-decoration: none;
        padding: 4px 0;
    }

    .fs-a-item i {
        font-size: 18px;
    }

    .fs-a-item span {
        font-size: 11px;
        font-weight: 600;
    }

    .fs-a-item.is-active {
        color: #f5c542;
    }

    .fs-a-item.is-active i {
        color: #f5c542;
    }

    .fs-a-item.is-primary {
        margin-top: -24px;
    }

    .fs-a-item.is-primary .fab {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: linear-gradient(135deg, #ffc107, #ff7a00);
        color: #1a1a2e;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        border: 4px solid #161b3a;
        /* box-shadow: 0 8px 20px rgba(255, 193, 7, .45); */
        margin-bottom: 4px;
    }

    .fs-a-item.is-primary span {
        /* color: #ffc107; */
        font-weight: 800;
    }

    /* ── Footer Style B — Tab Bar เรียบ ── */
    .fs-b {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 999;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        background: rgba(10, 15, 35, .95);
        backdrop-filter: blur(12px);
        border-top: 1px solid rgba(245, 197, 66, .25);
        padding: 8px 0 12px;
    }

    .fs-b-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        color: rgba(255, 255, 255, .6);
        text-decoration: none;
        padding: 4px;
        position: relative;
    }

    .fs-b-item i {
        font-size: 20px;
    }

    .fs-b-item span {
        font-size: 11px;
        font-weight: 500;
    }

    .fs-b-item.is-active {
        color: #f5c542;
    }

    .fs-b-item.is-active::before {
        content: '';
        position: absolute;
        top: -8px;
        left: 30%;
        right: 30%;
        height: 3px;
        border-radius: 0 0 3px 3px;
        background: #f5c542;
    }

    /* ── Footer Style C — Curve + FAB ── */
    .fs-c {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 999;
        height: 70px;
        background: #161b3a;
        display: grid;
        grid-template-columns: 1fr 1fr auto 1fr 1fr;
        align-items: center;
        padding: 0 10px;
        border-top: 1px solid rgba(255, 255, 255, .06);
    }

    .fs-c::before {
        content: '';
        position: absolute;
        top: -28px;
        left: 50%;
        transform: translateX(-50%);
        width: 80px;
        height: 56px;
        background: #161b3a;
        border-radius: 50% 50% 0 0 / 100% 100% 0 0;
        box-shadow: 0 -2px 6px rgba(0, 0, 0, .2);
    }

    .fs-c-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        color: rgba(255, 255, 255, .7);
        text-decoration: none;
        position: relative;
        z-index: 1;
    }

    .fs-c-item i {
        font-size: 18px;
    }

    .fs-c-item span {
        font-size: 11px;
        font-weight: 500;
    }

    .fs-c-item.is-active {
        color: #f5c542;
    }

    .fs-c-item.is-active i {
        color: #f5c542;
    }

    .fs-c-fab {
        position: relative;
        z-index: 2;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: linear-gradient(135deg, #f5c542, #ff7a00);
        color: #1a1a2e;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        margin-top: -36px;
        /* box-shadow: 0 10px 22px rgba(245, 197, 66, .5); */
        border: 4px solid #0a1f4d;
        text-decoration: none;
    }

    /* ── Footer Style D — Glass / Frosted ── */
    .fs-d {
        position: fixed;
        left: 50%;
        bottom: 14px;
        transform: translateX(-50%);
        z-index: 999;
        width: calc(100% - 24px);
        max-width: 460px;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        background: rgba(255, 255, 255, .08);
        backdrop-filter: blur(20px) saturate(180%);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        border: 1px solid rgba(255, 255, 255, .15);
        border-radius: 26px;
        padding: 10px 6px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .15);
    }

    .fs-d-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        color: rgba(255, 255, 255, .7);
        text-decoration: none;
        padding: 6px 2px;
        border-radius: 18px;
        transition: all .25s ease;
    }

    .fs-d-item i {
        font-size: 18px;
    }

    .fs-d-item span {
        font-size: 11px;
        font-weight: 600;
    }

    .fs-d-item.is-active {
        background: linear-gradient(135deg, rgba(245, 197, 66, .25), rgba(245, 197, 66, .08));
        color: #f5c542;
        box-shadow: 0 4px 14px rgba(245, 197, 66, .2), inset 0 1px 0 rgba(255, 255, 255, .15);
    }

    /* ── Footer Style E — Icons Only ── */
    .fs-e {
        position: fixed;
        left: 50%;
        bottom: 14px;
        transform: translateX(-50%);
        z-index: 999;
        display: flex;
        gap: 6px;
        background: rgba(10, 15, 35, .88);
        backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, .08);
        border-radius: 999px;
        padding: 8px;
        box-shadow: 0 14px 30px rgba(0, 0, 0, .55);
    }

    .fs-e-item {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(255, 255, 255, .65);
        text-decoration: none;
        font-size: 18px;
        transition: all .2s ease;
    }

    .fs-e-item:hover {
        background: rgba(255, 255, 255, .08);
        color: #fff;
    }

    .fs-e-item.is-active {
        background: linear-gradient(135deg, #f5c542, #ff7a00);
        color: #1a1a2e;
        box-shadow: 0 6px 16px rgba(245, 197, 66, .45);
    }

    /* ── Footer Style I — Sliding Pill (Material You) ── */
    .fs-i {
        position: fixed;
        left: 50%;
        bottom: 14px;
        transform: translateX(-50%);
        z-index: 999;
        width: calc(100% - 24px);
        max-width: 460px;
        background: rgba(20, 25, 50, .92);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border: 1px solid rgba(255, 255, 255, .08);
        border-radius: 28px;
        padding: 6px;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        box-shadow: 0 14px 30px rgba(0, 0, 0, .5);
        overflow: hidden;
    }

    .fs-i-pill {
        position: absolute;
        top: 6px;
        bottom: 6px;
        width: calc((100% - 12px) / 5);
        background: linear-gradient(135deg, #6366f1, #8b5cf6);
        border-radius: 22px;
        transition: left .4s cubic-bezier(.4, 0, .2, 1);
        box-shadow: 0 6px 18px rgba(99, 102, 241, .45);
        z-index: 0;
    }

    .fs-i-item {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        color: rgba(255, 255, 255, .55);
        text-decoration: none;
        padding: 8px 4px;
        transition: color .3s;
    }

    .fs-i-item i {
        font-size: 17px;
    }

    .fs-i-item span {
        font-size: 10px;
        font-weight: 600;
    }

    .fs-i-item.is-active {
        color: #fff;
    }

    /* ── Footer Style K — Segmented Pill (active = pink→purple) ── */
    .fs-k {
        position: fixed;
        left: 50%;
        bottom: 14px;
        transform: translateX(-50%);
        z-index: 999;
        width: calc(100% - 24px);
        max-width: 460px;
        background: rgba(255, 255, 255, .05);
        border: 1px solid rgba(255, 255, 255, .12);
        border-radius: 16px;
        overflow: hidden;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        box-shadow: 0 14px 30px rgba(0, 0, 0, .5);
    }

    .fs-k-item {
        padding: 12px 0;
        text-align: center;
        color: rgba(255, 255, 255, .55);
        text-decoration: none;
        border-right: 1px solid rgba(255, 255, 255, .1);
        transition: background .2s, color .2s;
    }

    .fs-k-item:last-child {
        border-right: 0;
    }

    .fs-k-item i {
        display: block;
        font-size: 18px;
        margin-bottom: 3px;
    }

    .fs-k-item span {
        font-size: 10px;
        font-weight: 600;
    }

    .fs-k-item.is-active {
        background: linear-gradient(135deg, #ec4899, #8b5cf6);
        color: #fff;
    }

    /* ── พื้นที่กันชน body ─ ทุก style fixed → กัน content ล่างโดนทับ ── */
    body {
        padding-bottom: 100px;
    }

    /* ── SweetAlert2 timer progress bar (toast + popup) ── */

    /* toast */
    .swal2-popup.swal2-toast .swal2-timer-progress-bar-container {
        height: 4px;
    }

    .swal2-popup.swal2-toast .swal2-timer-progress-bar {
        height: 4px;
        opacity: 1 !important;
    }

    /* popup ปกติ */
    .swal2-popup:not(.swal2-toast) .swal2-timer-progress-bar-container {
        visibility: visible !important;
        opacity: 1 !important;
    }

    .swal2-popup:not(.swal2-toast) .swal2-timer-progress-bar {
        opacity: 1 !important;
    }

    /* สีแถบตาม icon — ใช้ทั้ง toast + popup */
    .swal2-popup.swal2-icon-success .swal2-timer-progress-bar {
        background: #22c55e !important;
    }

    .swal2-popup.swal2-icon-error .swal2-timer-progress-bar {
        background: #ef4444 !important;
    }

    .swal2-popup.swal2-icon-warning .swal2-timer-progress-bar {
        background: #f59e0b !important;
    }

    .swal2-popup.swal2-icon-info .swal2-timer-progress-bar {
        background: #3b82f6 !important;
    }

    /* รองรับ \n ใน message → render เป็น line break */
    .swal2-popup .swal2-title,
    .swal2-popup .swal2-html-container,
    .swal2-toast .swal2-title {
        white-space: pre-line !important;
        line-height: 1.4;
    }

/* ─────────────────────────────────────────────────── */
/* FILE: panel/activity.php */
/* ─────────────────────────────────────────────────── */


    /* ═══ Classic — Activity ═══ */
    .cac-toolbar {
        display: flex;
        align-items: center;
        gap: 12px;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 10px 14px;
        margin-bottom: 14px;
         margin-top: 10px;
    }
    .cac-back {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: var(--text);
        text-decoration: none;
        font-size: 13px;
        font-weight: 600;
        padding: 6px 10px;
        border-radius: 8px;
        background: rgba(255,255,255,.05);
        border: 1px solid var(--border);
    }
    .cac-back:hover { background: rgba(255,255,255,.12); }
    .cac-toolbar-title {
        flex: 1;
        font-weight: 800;
        font-size: 15px;
        letter-spacing: .03em;
    }

    /* Hero header */
    .cac-hero {
        background:
            radial-gradient(circle at 50% 0%, rgba(245,184,32,.18), transparent 60%),
            var(--bg-card);
        border: 1px solid rgba(245,184,32,.3);
        border-radius: 16px;
        padding: 18px 20px;
        text-align: center;
        margin-bottom: 14px;
    }
    .cac-hero .t {
        font-size: 18px;
        font-weight: 800;
        color: var(--accent);
        letter-spacing: .02em;
    }
    .cac-hero .s {
        font-size: 12px;
        color: var(--text-muted);
        margin-top: 4px;
    }

    /* Activity grid */
    .cac-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    @media (min-width: 760px) {
        .cac-grid { grid-template-columns: repeat(4, 1fr); }
    }

    .cac-card {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        padding: 20px 12px 16px;
        background: linear-gradient(180deg, var(--bg-card-2), var(--bg-card));
        border: 1px solid var(--border);
        border-radius: 16px;
        text-decoration: none;
        color: var(--text);
        overflow: hidden;
        transition: transform .15s, border-color .2s, box-shadow .2s;
    }
    .cac-card::before {
        content: '';
        position: absolute;
        top: -40%; left: -20%;
        width: 140%; height: 140%;
        background: radial-gradient(circle at 30% 0%, rgba(245,184,32,.07), transparent 60%);
        pointer-events: none;
    }
    .cac-card:hover {
        transform: translateY(-3px);
        border-color: rgba(245,184,32,.4);
        box-shadow: 0 12px 28px rgba(0,0,0,.5);
        color: var(--text);
    }
    .cac-icon {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 30px;
        color: #fff;
        box-shadow: 0 10px 22px var(--cac-glow, rgba(0,0,0,.3)),
                    inset 0 1px 0 rgba(255,255,255,.2),
                    inset 0 -3px 8px rgba(0,0,0,.15);
        position: relative;
        z-index: 1;
    }
    .cac-label {
        position: relative;
        z-index: 1;
        text-align: center;
        font-weight: 800;
        font-size: 14px;
        color: var(--text);
        line-height: 1.2;
    }
    .cac-sub {
        position: relative;
        z-index: 1;
        font-size: 11px;
        color: var(--text-muted);
        text-align: center;
    }

    .cac-empty {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 14px;
        padding: 36px 14px;
        text-align: center;
        color: var(--text-muted);
        font-size: 13px;
    }
    .cac-empty i { font-size: 36px; color: var(--text-muted); margin-bottom: 8px; }

/* ─────────────────────────────────────────────────── */
/* FILE: panel/affiliate.php */
/* ─────────────────────────────────────────────────── */


    /* ═══ Classic — Affiliate ═══ */
    .caf-toolbar {
        display: flex;
        align-items: center;
        gap: 12px;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 10px 14px;
        margin-bottom: 14px;
        margin-top: 10px;
    }
    .caf-back {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: var(--text);
        text-decoration: none;
        font-size: 13px;
        font-weight: 600;
        padding: 6px 10px;
        border-radius: 8px;
        background: rgba(255,255,255,.05);
        border: 1px solid var(--border);
    }
    .caf-back:hover { background: rgba(255,255,255,.12); }
    .caf-toolbar-title {
        flex: 1;
        font-weight: 800;
        font-size: 15px;
        letter-spacing: .03em;
    }

    /* Description */
    .caf-desc {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 14px;
        padding: 14px 16px;
        margin-bottom: 14px;
        color: var(--text);
        font-size: 13px;
        line-height: 1.6;
    }
    .caf-desc:empty { display: none; }

    /* Tabs */
    .caf-tabs {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-bottom: 14px;
    }
    .caf-tab {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 12px 14px;
        border-radius: 12px;
        border: 1px solid var(--border);
        background: var(--bg-card);
        color: var(--text-muted);
        font-weight: 700;
        font-size: 14px;
        cursor: pointer;
        transition: all .18s;
    }
    .caf-tab:hover { color: var(--text); border-color: rgba(255,255,255,.18); }
    .caf-tab.is-active {
        border-color: transparent;
        color: #fff;
        box-shadow: 0 8px 18px rgba(0,0,0,.35);
    }
    .caf-tab.is-active[data-tab="preview"] {
        background: linear-gradient(135deg, #60a5fa, #2563eb);
    }
    .caf-tab.is-active[data-tab="members"] {
        background: linear-gradient(135deg, var(--green), var(--green-2));
    }

    .caf-pane { display: none; }
    .caf-pane.is-show { display: block; }

    /* Ref link */
    .caf-link-card {
        background: linear-gradient(135deg, rgba(245,184,32,.10), rgba(245,184,32,.02));
        border: 1px solid rgba(245,184,32,.32);
        border-radius: 14px;
        padding: 14px;
        margin-bottom: 14px;
    }
    .caf-link-head {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 10px;
        font-weight: 800;
        color: var(--accent);
        font-size: 14px;
    }
    .caf-link-head i {
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background: rgba(245,184,32,.18);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
    }
    .caf-link-input {
        display: flex;
        background: rgba(0,0,0,.3);
        border: 1px solid var(--border);
        border-radius: 10px;
        overflow: hidden;
    }
    .caf-link-input input {
        flex: 1;
        background: transparent;
        border: 0;
        color: var(--text);
        padding: 10px 12px;
        font-size: 13px;
        outline: none;
        min-width: 0;
    }
    .caf-link-input button {
        flex-shrink: 0;
        background: rgba(245,184,32,.15);
        border: 0;
        border-left: 1px solid var(--border);
        color: var(--accent);
        padding: 0 16px;
        font-size: 13px;
        font-weight: 700;
        cursor: pointer;
        transition: background .15s;
        display: flex;
        align-items: center;
        gap: 6px;
    }
    .caf-link-input button:hover { background: rgba(245,184,32,.28); }
    .caf-link-input button.is-ok { color: var(--green); }

    /* Stat grid */
    .caf-stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-bottom: 14px;
    }
    @media (max-width: 380px) {
        .caf-stats { grid-template-columns: 1fr; }
    }
    .caf-stat {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 14px;
        padding: 14px 14px;
        text-align: center;
    }
    .caf-stat .lbl {
        font-size: 11.5px;
        color: var(--text-muted);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        margin-bottom: 6px;
    }
    .caf-stat .val {
        font-size: 20px;
        font-weight: 800;
        line-height: 1.1;
        letter-spacing: .02em;
    }
    .caf-stat.is-main {
        background: linear-gradient(135deg, rgba(245,184,32,.12), rgba(245,184,32,.03));
        border-color: rgba(245,184,32,.4);
    }
    .caf-stat.is-main .lbl { color: var(--accent); }
    .caf-stat.is-main .val { color: var(--accent); }

    .caf-stat.is-green   { border-color: rgba(34,197,94,.3); }
    .caf-stat.is-green .val   { color: var(--green); }
    .caf-stat.is-green .lbl i { color: var(--green); }

    .caf-stat.is-yellow  { border-color: rgba(245,184,32,.3); }
    .caf-stat.is-yellow .val   { color: var(--accent); }
    .caf-stat.is-yellow .lbl i { color: var(--accent); }

    .caf-stat.is-purple  { border-color: rgba(167,139,250,.3); }
    .caf-stat.is-purple .val   { color: #c4b5fd; }
    .caf-stat.is-purple .lbl i { color: #a78bfa; }

    .caf-stat .val small {
        font-size: 12px;
        color: var(--text-muted);
        font-weight: 500;
        margin-left: 4px;
    }

    /* Members table */
    .caf-card {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 14px;
        padding: 12px;
        margin-bottom: 14px;
    }
    .caf-table-wrap { overflow-x: auto; }
    .caf-table {
        width: 100%;
        min-width: 720px;
        border-collapse: separate;
        border-spacing: 0;
        font-size: 12px;
        color: var(--text);
    }
    .caf-table th {
        padding: 9px 8px;
        font-weight: 700;
        color: var(--text-muted);
        text-align: center;
        background: rgba(255,255,255,.03);
        border-bottom: 1px solid var(--border);
        white-space: nowrap;
    }
    .caf-table th.col-day   { background: rgba(245,184,32,.10); color: var(--accent); }
    .caf-table th.col-month { background: rgba(96,165,250,.10); color: #60a5fa; }
    .caf-table td {
        padding: 10px 8px;
        text-align: center;
        border-bottom: 1px dashed var(--border);
        white-space: nowrap;
    }
    .caf-table td.col-day   { background: rgba(245,184,32,.04); }
    .caf-table td.col-month { background: rgba(96,165,250,.04); }
    .caf-table tr:last-child td { border-bottom: 0; }
    .caf-table .v       { font-weight: 700; }
    .caf-table .v.muted { color: var(--text-muted); font-weight: 500; }
    .caf-table .v.is-loss { color: var(--red); }
    .caf-table .v.is-com  { color: var(--green); }
    .caf-table .v.is-first { color: var(--green); }
    .caf-table .sub {
        display: block;
        font-size: 10.5px;
        color: var(--text-muted);
        margin-top: 2px;
        font-weight: 500;
    }
    .caf-table .sub.is-com { color: var(--accent); }
    .caf-table tfoot td {
        background: rgba(255,255,255,.04);
        border-top: 1px solid var(--border);
        border-bottom: 0;
        font-weight: 800;
    }

    .caf-empty {
        text-align: center;
        padding: 28px 14px;
        color: var(--text-muted);
        font-size: 13px;
    }
    .caf-empty i { display: block; font-size: 28px; margin-bottom: 6px; }

    /* Pagination */
    .caf-pag-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 12px;
        padding: 0 4px;
    }
    .caf-pag-info { color: var(--text-muted); font-size: 12px; }
    .caf-pag-nav  { display: flex; gap: 4px; }
    .caf-pag-nav button {
        background: rgba(255,255,255,.05);
        border: 1px solid var(--border);
        color: var(--text);
        font-size: 12px;
        padding: 4px 10px;
        min-width: 32px;
        border-radius: 6px;
        cursor: pointer;
    }
    .caf-pag-nav button:hover:not(:disabled) { background: rgba(255,255,255,.1); }
    .caf-pag-nav button.is-active {
        background: linear-gradient(135deg, var(--accent), var(--accent-2));
        color: #1a1d24;
        border-color: var(--accent);
        font-weight: 700;
    }
    .caf-pag-nav button:disabled { opacity: .4; cursor: not-allowed; }
    .caf-pag-nav .dots { color: var(--text-muted); padding: 0 4px; align-self: center; }

/* ─────────────────────────────────────────────────── */
/* FILE: panel/card.php */
/* ─────────────────────────────────────────────────── */


    /* ═══ Classic — Card (open card lucky) ═══ */
    .ccd-toolbar {
        display: flex;
        align-items: center;
        gap: 12px;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 10px 14px;
        margin-bottom: 14px;
        margin-top: 10px;
    }
    .ccd-back {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: var(--text);
        text-decoration: none;
        font-size: 13px;
        font-weight: 600;
        padding: 6px 10px;
        border-radius: 8px;
        background: rgba(255,255,255,.05);
        border: 1px solid var(--border);
    }
    .ccd-back:hover { background: rgba(255,255,255,.12); }
    .ccd-toolbar-title {
        flex: 1;
        font-weight: 800;
        font-size: 15px;
        letter-spacing: .03em;
    }

    .ccd-desc {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 14px;
        padding: 14px 16px;
        margin-bottom: 12px;
        color: var(--text);
        font-size: 13px;
        line-height: 1.6;
    }
    .ccd-desc:empty { display: none; }

    /* Ticket banner */
    .ccd-ticket {
        background: linear-gradient(135deg, rgba(167,139,250,.18), rgba(167,139,250,.04));
        border: 1px solid rgba(167,139,250,.45);
        border-radius: 14px;
        padding: 14px 18px;
        margin-bottom: 14px;
        text-align: center;
        font-weight: 800;
        font-size: 15px;
        color: #c4b5fd;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }
    .ccd-ticket i { font-size: 18px; color: #a78bfa; }
    .ccd-ticket .num {
        background: rgba(0,0,0,.3);
        color: #c4b5fd;
        padding: 3px 12px;
        border-radius: 999px;
        font-weight: 800;
        margin: 0 4px;
        font-size: 15px;
    }

    /* Card scene */
    .ccd-scene {
        background:
            radial-gradient(circle at 50% 0%, rgba(167,139,250,.10), transparent 65%),
            var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 16px;
        padding: 20px 14px;
        margin-bottom: 14px;
    }
    .ccd-hint {
        text-align: center;
        color: var(--text-muted);
        font-size: 13px;
        margin-bottom: 14px;
    }
    .ccd-hint i { color: var(--accent); margin-right: 4px; }

    .ccd-grid {
        max-width: 480px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    .ccd-item {
        position: relative;
        border-radius: 14px;
        overflow: hidden;
        cursor: pointer;
        border: 3px solid transparent;
        background: var(--bg-card-2);
        box-shadow: 0 6px 14px rgba(0,0,0,.4);
        transition: border-color .2s, transform .15s, box-shadow .2s;
        perspective: 600px;
    }
    .ccd-item:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 22px rgba(167,139,250,.25);
    }
    .ccd-item img {
        width: 100%;
        display: block;
        border-radius: 10px;
        transition: opacity .15s;
        backface-visibility: hidden;
    }
    .ccd-item.is-flip { animation: ccdFlip .6s ease forwards; }
    @keyframes ccdFlip {
        0%   { transform: rotateY(0deg) scale(1); }
        40%  { transform: rotateY(90deg) scale(1.1); }
        60%  { transform: rotateY(90deg) scale(1.1); }
        100% { transform: rotateY(0deg) scale(1); }
    }

    /* History */
    .ccd-his-card {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 14px;
        padding: 14px 16px;
        margin-bottom: 14px;
    }
    .ccd-his-title {
        display: flex;
        align-items: center;
        gap: 8px;
        font-weight: 800;
        font-size: 14px;
        color: var(--accent);
        padding-bottom: 10px;
        margin-bottom: 8px;
        border-bottom: 1px solid var(--border);
    }
    .ccd-his-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 12.5px;
    }
    .ccd-his-table th {
        text-align: center;
        font-weight: 700;
        color: var(--text-muted);
        padding: 8px 4px;
        border-bottom: 1px dashed var(--border);
    }
    .ccd-his-table td {
        text-align: center;
        padding: 9px 4px;
        border-bottom: 1px dashed var(--border);
        color: var(--text);
    }
    .ccd-his-table tr:last-child td { border-bottom: 0; }
    .ccd-his-table .amt {
        color: var(--green);
        font-weight: 700;
    }
    .ccd-his-empty {
        text-align: center;
        padding: 24px;
        color: var(--text-muted);
        font-size: 13px;
    }
    .ccd-his-empty i { display: block; font-size: 28px; margin-bottom: 6px; }

/* ─────────────────────────────────────────────────── */
/* FILE: panel/checkin.php */
/* ─────────────────────────────────────────────────── */


    /* ═══ Classic — Checkin ═══ */
    .cci-toolbar {
        display: flex;
        align-items: center;
        gap: 12px;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 10px 14px;
        margin-bottom: 14px;
        margin-top: 10px;
    }
    .cci-back {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: var(--text);
        text-decoration: none;
        font-size: 13px;
        font-weight: 600;
        padding: 6px 10px;
        border-radius: 8px;
        background: rgba(255,255,255,.05);
        border: 1px solid var(--border);
    }
    .cci-back:hover { background: rgba(255,255,255,.12); }
    .cci-toolbar-title {
        flex: 1;
        font-weight: 800;
        font-size: 15px;
        letter-spacing: .03em;
    }

    /* Streak hero */
    .cci-hero {
        background:
            radial-gradient(circle at 50% 0%, rgba(34,197,94,.18), transparent 65%),
            var(--bg-card);
        border: 1px solid rgba(34,197,94,.32);
        border-radius: 16px;
        padding: 20px 18px;
        margin-bottom: 14px;
        text-align: center;
    }
    .cci-hero .fire {
        font-size: 32px;
        color: #f97316;
        filter: drop-shadow(0 4px 10px rgba(249,115,22,.5));
        margin-bottom: 6px;
    }
    .cci-hero .count {
        font-size: 36px;
        font-weight: 800;
        color: var(--green);
        line-height: 1.1;
    }
    .cci-hero .count small {
        font-size: 15px;
        color: var(--text-muted);
        font-weight: 500;
        margin-left: 6px;
    }
    .cci-hero .lbl {
        margin-top: 4px;
        color: var(--text-muted);
        font-size: 13px;
    }
    .cci-progress {
        position: relative;
        background: var(--bg-card-3);
        border: 1px solid var(--border);
        border-radius: 999px;
        height: 14px;
        overflow: hidden;
        margin-top: 12px;
    }
    .cci-progress > .bar {
        height: 100%;
        background: linear-gradient(90deg, #22c55e, #16a34a);
        transition: width .35s ease;
        border-radius: 999px;
    }

    /* Grid of day cards */
    .cci-card {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 14px;
        padding: 14px;
        margin-bottom: 14px;
    }
    .cci-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
    }
    @media (max-width: 420px) {
        .cci-grid { grid-template-columns: repeat(3, 1fr); }
    }

    .cci-day {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        padding: 12px 6px;
        border-radius: 12px;
        border: 1px solid var(--border);
        background: var(--bg-card-2);
        color: var(--text-muted);
        font-size: 12px;
        transition: all .2s;
    }
    .cci-day .icon { font-size: 22px; line-height: 1; }
    .cci-day .num {
        font-size: 13px;
        font-weight: 700;
        color: var(--text);
        line-height: 1;
        margin-top: 2px;
    }
    .cci-day .date {
        font-size: 10px;
        opacity: .75;
    }
    .cci-day.checked {
        background: rgba(34,197,94,.10);
        border-color: rgba(34,197,94,.5);
        color: var(--green);
    }
    .cci-day.checked .num { color: var(--green); }
    .cci-day.active {
        background: rgba(245,184,32,.10);
        border-color: rgba(245,184,32,.5);
        color: var(--accent);
        box-shadow: 0 0 18px rgba(245,184,32,.18);
    }
    .cci-day.active .num { color: var(--accent); }

    .cci-day.reward {
        grid-column: 1 / -1;
        flex-direction: row;
        justify-content: space-between;
        padding: 14px 18px;
        background: linear-gradient(135deg, rgba(245,184,32,.14), rgba(245,184,32,.04));
        border-color: rgba(245,184,32,.5);
        color: var(--accent);
    }
    .cci-day.reward .num { color: var(--accent); font-size: 14px; }
    .cci-day.reward.checked {
        background: linear-gradient(135deg, rgba(34,197,94,.16), rgba(245,184,32,.06));
        border-color: rgba(34,197,94,.5);
    }
    .cci-day .bonus {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: 11px;
        font-weight: 700;
        color: var(--accent);
        background: rgba(245,184,32,.18);
        padding: 4px 10px;
        border-radius: 999px;
        border: 1px solid rgba(245,184,32,.35);
    }

    .cci-note {
        text-align: center;
        font-size: 12px;
        color: var(--text-muted);
        margin: 4px 0 14px;
        line-height: 1.7;
    }
    .cci-note b { color: var(--accent); font-weight: 700; }

    .cci-btn {
        width: 100%;
        padding: 14px 0;
        font-size: 15px;
        font-weight: 800;
        letter-spacing: .03em;
        border-radius: 12px;
        border: 0;
        cursor: pointer;
        transition: transform .1s, box-shadow .2s, opacity .2s;
        background: linear-gradient(135deg, var(--green), var(--green-2));
        color: #fff;
        box-shadow: 0 8px 20px rgba(34,197,94,.35);
    }
    .cci-btn:hover:not(:disabled) {
        box-shadow: 0 10px 26px rgba(34,197,94,.5);
    }
    .cci-btn:active { transform: scale(.98); }
    .cci-btn:disabled {
        background: rgba(255,255,255,.05);
        color: var(--text-muted);
        cursor: not-allowed;
        box-shadow: none;
        border: 1px solid var(--border);
    }

/* ─────────────────────────────────────────────────── */
/* FILE: panel/deposit.php */
/* ─────────────────────────────────────────────────── */


    /* ═══ Classic — Deposit page ═══ */
    .cd-toolbar {
        display: flex;
        align-items: center;
        gap: 12px;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 10px 14px;
        margin-bottom: 14px;
        margin-top: 10px;
    }
    .cd-back {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: var(--text);
        text-decoration: none;
        font-size: 13px;
        font-weight: 600;
        padding: 6px 10px;
        border-radius: 8px;
        background: rgba(255,255,255,.05);
        border: 1px solid var(--border);
    }
    .cd-back:hover { background: rgba(255,255,255,.12); color: var(--text); }
    .cd-toolbar-title {
        flex: 1;
        font-weight: 800;
        font-size: 15px;
        letter-spacing: .03em;
    }

    /* ── Promo ─────────────────── */
    .cd-promo-card {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 14px;
        padding: 16px;
        margin-bottom: 14px;
    }
    .cd-promo-head h5 {
        font-weight: 800;
        font-size: 16px;
        margin: 0 0 4px;
    }
    .cd-promo-head p {
        margin: 0 0 12px;
        font-size: 12px;
        color: var(--text-muted);
    }
    .cd-promo-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 10px;
    }
    .cd-promo-item {
        background: var(--bg-card-2);
        border: 1px solid var(--border);
        border-radius: 12px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        transition: border-color .15s, transform .15s;
    }
    .cd-promo-item:hover { border-color: rgba(245,184,32,.4); transform: translateY(-2px); }
    .cd-promo-item.skip {
        background: linear-gradient(135deg, rgba(245,184,32,.08), rgba(212,160,23,.04));
        border-color: rgba(245,184,32,.3);
        text-align: center;
        padding: 18px;
        cursor: pointer;
    }
    .cd-promo-thumb {
        display: block;
        width: 100%;
        height: auto;
        background: #111;
        object-fit: contain;
    }
    .cd-promo-body { padding: 10px 12px; flex: 1; }
    .cd-promo-title { font-weight: 700; font-size: 13px; margin-bottom: 6px; }
    .cd-promo-meta { display: flex; flex-wrap: wrap; gap: 6px; font-size: 11px; }
    .cd-promo-meta span {
        background: rgba(255,255,255,.06);
        border: 1px solid var(--border);
        padding: 2px 8px;
        border-radius: 999px;
        color: var(--text-muted);
    }
    .cd-promo-meta .ok { color: var(--green); border-color: rgba(34,197,94,.3); }
    .cd-promo-foot {
        display: flex;
        gap: 6px;
        padding: 10px 12px;
        border-top: 1px solid var(--border);
    }
    .cd-btn-outline,
    .cd-btn-primary {
        flex: 1;
        padding: 7px 10px;
        border-radius: 8px;
        font-weight: 700;
        font-size: 12px;
        border: 0;
        cursor: pointer;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        transition: transform .1s, box-shadow .15s;
    }
    .cd-btn-outline {
        background: rgba(255,255,255,.05);
        color: var(--text);
        border: 1px solid var(--border);
    }
    .cd-btn-outline:hover { background: rgba(255,255,255,.12); }
    .cd-btn-primary {
        background: linear-gradient(135deg, var(--accent), var(--accent-2));
        color: #1a1d24;
        box-shadow: 0 4px 12px rgba(245,184,32,.3);
    }
    .cd-btn-primary:hover  { box-shadow: 0 6px 18px rgba(245,184,32,.5); }
    .cd-btn-primary:active { transform: scale(.97); }

    /* selected promo bar */
    .cd-selected {
        display: flex;
        align-items: center;
        gap: 10px;
        background: rgba(245,184,32,.08);
        border: 1px solid rgba(245,184,32,.3);
        border-radius: 12px;
        padding: 10px 14px;
        margin-bottom: 14px;
        font-size: 13px;
    }
    .cd-selected .lbl { color: var(--text-muted); }
    .cd-selected .val { color: var(--accent); font-weight: 700; flex: 1; }
    .cd-change-btn {
        background: transparent;
        border: 1px solid rgba(245,184,32,.4);
        color: var(--accent);
        padding: 4px 10px;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 600;
        cursor: pointer;
    }
    .cd-change-btn:hover { background: rgba(245,184,32,.1); }

    /* ─────────────────────────────────────────
     *  Unified topbar — รวม back+title+promo เป็นแถบเดียว
     *  ใช้ทั้ง deposit.php และ deposit_pending.php
     *  replaces: .cd-toolbar, .cd-selected, .cdp-toolbar, .cdp-promo-bar
     * ───────────────────────────────────────── */
    .cd-topbar {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 8px 12px;
        margin-bottom: 14px;
         margin-top: 10px;
    }
    .cd-topbar-back {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: var(--text);
        text-decoration: none;
        font-size: 13px;
        font-weight: 600;
        padding: 6px 10px;
        border-radius: 8px;
        background: rgba(255,255,255,.05);
        border: 1px solid var(--border);
        flex-shrink: 0;
        transition: background .12s;
    }
    .cd-topbar-back:hover { background: rgba(255,255,255,.12); color: var(--text); }
    .cd-topbar-title {
        font-weight: 800;
        font-size: 15px;
        letter-spacing: .02em;
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }
    .cd-topbar-promo {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-left: auto;
        font-size: 12px;
        min-width: 0;
    }
    .cd-topbar-promo > i { color: var(--accent); flex-shrink: 0; }
    .cd-topbar-promo .name {
        font-weight: 700;
        max-width: 160px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .cd-topbar-promo .name.ok   { color: var(--green); }
    .cd-topbar-promo .name.skip { color: var(--red); }
    .cd-topbar-change {
        background: transparent;
        border: 1px solid rgba(245,184,32,.4);
        color: var(--accent);
        padding: 4px 12px;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 600;
        cursor: pointer;
        flex-shrink: 0;
        transition: background .12s;
    }
    .cd-topbar-change:hover { background: rgba(245,184,32,.1); }

    /* mobile แคบ: ให้ promo wrap ลงบรรทัด 2 ชิดขวา */
    @media (max-width: 380px) {
        .cd-topbar-promo {
            margin-left: 0;
            width: 100%;
            justify-content: flex-end;
            padding-top: 2px;
            border-top: 1px dashed var(--border);
            margin-top: 2px;
            padding-top: 8px;
        }
    }

    /* ── Tabs ─────────────────── */
    .cd-tabs {
        display: flex;
        gap: 8px;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 6px;
        margin-bottom: 14px;
    }
    .cd-tab {
        flex: 1;
        background: transparent;
        border: 1px solid transparent;
        border-radius: 8px;
        padding: 10px 6px;
        color: var(--text-muted);
        font-weight: 700;
        font-size: 13px;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        transition: background .15s, color .15s, border-color .15s;
    }
    .cd-tab:hover { color: var(--text); background: rgba(255,255,255,.04); }
    .cd-tab.is-active {
        background: linear-gradient(135deg, var(--accent), var(--accent-2));
        color: #1a1d24;
        border-color: var(--accent);
        box-shadow: 0 4px 12px rgba(245,184,32,.3);
    }

    /* ── Form card ─────────────────── */
    .cd-pane { display: none; }
    .cd-pane.is-active { display: block; }
    .cd-form-card {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 14px;
        padding: 18px;
        margin-bottom: 14px;
    }

    .cd-label { font-size: 13px; color: var(--text-muted); margin-bottom: 6px; }
    .cd-input {
        width: 100%;
        background: var(--bg-card-2);
        border: 1px solid var(--red);
        border-radius: 10px;
        color: var(--text);
        font-family: inherit;
        font-size: 18px;
        font-weight: 700;
        padding: 12px 14px;
        outline: none;
        transition: border-color .15s, box-shadow .15s, background .15s;
    }
    .cd-input::placeholder { color: var(--text-muted); font-weight: 500; font-size: 14px; }
    .cd-input:focus {
        background: var(--bg-card-3);
        box-shadow: 0 0 0 3px rgba(239,68,68,.15);
    }
    .cd-hint {
        font-size: 12px;
        color: var(--accent);
        margin-bottom: 8px;
        display: inline-flex;
        gap: 4px;
        align-items: center;
    }

    .cd-chips {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
        margin-top: 12px;
        justify-items: center;
    }
    .cd-chip {
        width: 100%;
        background: var(--bg-card-2);
        border: 1px solid var(--border);
        color: var(--text);
        padding: 8px 10px;
        border-radius: 999px;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        transition: background .12s, border-color .12s, transform .1s;
        text-align: center;
    }
    .cd-chip:hover  { background: var(--bg-card-3); border-color: rgba(245,184,32,.3); }
    .cd-chip:active { transform: scale(.95); }
    .cd-chip.active {
        background: linear-gradient(135deg, var(--accent), var(--accent-2));
        color: #1a1d24;
        border-color: var(--accent);
    }

    .cd-actions {
        display: flex;
        gap: 8px;
        margin-top: 16px;
    }
    .cd-btn-reset,
    .cd-btn-submit {
        flex: 1;
        padding: 12px;
        border-radius: 10px;
        font-weight: 800;
        font-size: 15px;
        border: 0;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        transition: transform .1s, box-shadow .15s, background .15s;
    }
    .cd-btn-reset {
        background: rgba(239,68,68,.1);
        color: var(--red);
        border: 1px solid rgba(239,68,68,.3);
        flex: 0 0 110px;
    }
    .cd-btn-reset:hover { background: rgba(239,68,68,.2); }
    .cd-btn-submit {
        background: linear-gradient(135deg, var(--accent), var(--accent-2));
        color: #1a1d24;
        box-shadow: 0 6px 16px rgba(245,184,32,.35);
    }
    .cd-btn-submit:hover  { box-shadow: 0 8px 22px rgba(245,184,32,.5); }
    .cd-btn-submit:active { transform: scale(.98); }

    /* Bank info box */
    .cd-bank-head {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 12px;
    }
    .cd-bank-head img {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        object-fit: cover;
        flex-shrink: 0;
    }
    .cd-bank-head .name { font-weight: 700; }
    .cd-bank-head .sub  { font-size: 12px; color: var(--text-muted); }

    .cd-acc-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        background: var(--bg-card-2);
        border: 1px solid var(--border);
        border-radius: 10px;
        padding: 10px 14px;
        margin-bottom: 12px;
    }
    .cd-acc-row .lbl   { font-size: 11px; color: var(--text-muted); }
    .cd-acc-row .acc   { font-size: 17px; font-weight: 700; letter-spacing: .04em; }
    .cd-copy-btn {
        background: transparent;
        border: 1px solid var(--border);
        color: var(--text);
        padding: 6px 10px;
        border-radius: 8px;
        font-size: 12px;
        cursor: pointer;
        white-space: nowrap;
    }
    .cd-copy-btn:hover { background: rgba(255,255,255,.06); }

    .cd-warn {
        background: rgba(239,68,68,.08);
        border: 1px solid rgba(239,68,68,.3);
        border-radius: 10px;
        padding: 10px 14px;
        font-size: 12px;
        color: var(--text);
        margin-bottom: 14px;
        line-height: 1.7;
    }
    .cd-warn .head { color: var(--red); font-weight: 700; margin-bottom: 4px; }

    /* Slip upload */
    .cd-upload {
        border: 2px dashed rgba(255,255,255,.18);
        background: var(--bg-card-2);
        border-radius: 12px;
        text-align: center;
        padding: 30px 14px;
        cursor: pointer;
        margin-bottom: 12px;
        transition: border-color .15s, background .15s;
    }
    .cd-upload:hover { border-color: var(--accent); background: var(--bg-card-3); }
    .cd-upload i  { font-size: 28px; color: var(--text-muted); margin-bottom: 6px; display: block; }
    .cd-upload .desc { color: var(--text-muted); font-size: 13px; }
    .cd-upload img { max-width: 100%; max-height: 280px; border-radius: 8px; display: none; }
    .cd-upload.has-image { padding: 0; border: 0; background: transparent; }
    .cd-upload.has-image i, .cd-upload.has-image .desc { display: none; }
    .cd-upload.has-image img { display: block; margin: 0 auto; }

/* ─────────────────────────────────────────────────── */
/* FILE: panel/deposit_condition.php */
/* ─────────────────────────────────────────────────── */


    /* ═══ Classic — Deposit condition ═══ */
    .cdc-toolbar {
        display: flex;
        align-items: center;
        gap: 12px;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 10px 14px;
        margin-bottom: 14px;
        margin-top: 10px;
    }
    .cdc-back {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: var(--text);
        text-decoration: none;
        font-size: 13px;
        font-weight: 600;
        padding: 6px 10px;
        border-radius: 8px;
        background: rgba(255,255,255,.05);
        border: 1px solid var(--border);
    }
    .cdc-back:hover { background: rgba(255,255,255,.12); }
    .cdc-toolbar-title {
        flex: 1;
        font-weight: 800;
        font-size: 15px;
        letter-spacing: .03em;
    }

    /* Big warning header */
    .cdc-alert {
        display: flex;
        align-items: center;
        gap: 12px;
        background: linear-gradient(135deg, rgba(245,184,32,.15), rgba(245,184,32,.05));
        border: 1px solid rgba(245,184,32,.45);
        border-radius: 14px;
        padding: 16px 18px;
        margin-bottom: 14px;
    }
    .cdc-alert i  { font-size: 28px; color: var(--accent); }
    .cdc-alert .t { font-weight: 800; color: var(--accent); font-size: 16px; }
    .cdc-alert .s { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

    /* Promo status card */
    .cdc-card {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 14px;
        padding: 16px 18px;
        margin-bottom: 14px;
    }
    .cdc-promo-head {
        display: flex;
        align-items: center;
        gap: 10px;
        padding-bottom: 12px;
        margin-bottom: 12px;
        border-bottom: 1px solid var(--border);
    }
    .cdc-promo-head i  { color: var(--accent); font-size: 20px; }
    .cdc-promo-head .t { font-weight: 800; font-size: 15px; color: var(--accent); }

    .cdc-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 7px 0;
        font-size: 13px;
    }
    .cdc-row .lbl { color: var(--text-muted); }
    .cdc-row .val { font-weight: 700; }
    .cdc-row .val.ok   { color: var(--green); }
    .cdc-row .val.warn { color: var(--red); }
    .cdc-row .val.info { color: #a78bfa; }      /* ม่วง */
    .cdc-row .val.cyan { color: #60a5fa; }
    .cdc-row .val.muted { color: var(--text-muted); font-weight: 500; }

    /* Progress bar */
    .cdc-progress {
        position: relative;
        background: var(--bg-card-3);
        border: 1px solid var(--border);
        border-radius: 8px;
        height: 22px;
        overflow: hidden;
        margin: 10px 0;
    }
    .cdc-progress > .bar {
        height: 100%;
        border-radius: 8px;
        transition: width .35s ease;
        background: linear-gradient(90deg, #f5b820, #f97316);  /* default warning */
    }
    .cdc-progress > .bar.is-clear {
        background: linear-gradient(90deg, #22c55e, #16a34a);
    }
    .cdc-progress > .lbl {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: 700;
        color: #fff;
        text-shadow: 0 1px 2px rgba(0,0,0,.6);
    }

    /* Advice block */
    .cdc-advice {
        background: var(--bg-card-2);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 12px 16px;
        margin-bottom: 14px;
    }
    .cdc-advice p {
        margin: 0 0 6px;
        font-size: 13px;
        color: var(--text);
        display: flex;
        align-items: flex-start;
        gap: 8px;
        line-height: 1.6;
    }
    .cdc-advice p:last-child { margin-bottom: 0; }
    .cdc-advice p i { color: var(--green); margin-top: 3px; flex-shrink: 0; }

    .cdc-go-withdraw {
        display: block;
        width: 100%;
        text-align: center;
        background: linear-gradient(135deg, var(--accent), var(--accent-2));
        color: #1a1d24;
        font-weight: 800;
        font-size: 14px;
        padding: 12px 18px;
        border-radius: 10px;
        border: 0;
        text-decoration: none;
        margin-top: 10px;
        box-shadow: 0 6px 16px rgba(245,184,32,.35);
        transition: transform .1s, box-shadow .15s;
    }
    .cdc-go-withdraw:hover  { box-shadow: 0 8px 22px rgba(245,184,32,.5); color: #1a1d24; }
    .cdc-go-withdraw:active { transform: scale(.98); }

    /* No promo */
    .cdc-no-promo {
        display: flex;
        align-items: center;
        gap: 12px;
        background: linear-gradient(135deg, rgba(34,197,94,.12), rgba(34,197,94,.04));
        border: 1px solid rgba(34,197,94,.4);
        border-radius: 14px;
        padding: 16px 18px;
    }
    .cdc-no-promo i  { font-size: 28px; color: var(--green); }
    .cdc-no-promo .t { font-weight: 800; color: var(--green); font-size: 15px; }
    .cdc-no-promo .s { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

/* ─────────────────────────────────────────────────── */
/* FILE: panel/deposit_pending.php */
/* ─────────────────────────────────────────────────── */


    /* ═══ Classic — Deposit pending ═══ */
    .cdp-toolbar {
        display: flex;
        align-items: center;
        gap: 12px;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 10px 14px;
        margin-bottom: 14px;
        margin-top: 10px;
    }
    .cdp-back {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: var(--text);
        text-decoration: none;
        font-size: 13px;
        font-weight: 600;
        padding: 6px 10px;
        border-radius: 8px;
        background: rgba(255,255,255,.05);
        border: 1px solid var(--border);
    }
    .cdp-back:hover { background: rgba(255,255,255,.12); }
    .cdp-toolbar-title {
        flex: 1;
        font-weight: 800;
        font-size: 15px;
        letter-spacing: .03em;
    }

    /* Promo bar */
    .cdp-promo-bar {
        display: flex;
        align-items: center;
        gap: 10px;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 10px 14px;
        margin-bottom: 14px;
    }
    .cdp-promo-bar .name { flex: 1; font-size: 13px; font-weight: 700; }
    .cdp-promo-bar .name.ok   { color: var(--green); }
    .cdp-promo-bar .name.skip { color: var(--red); }
    .cdp-promo-bar .name i { margin-right: 4px; }
    .cdp-change-btn {
        background: linear-gradient(135deg, #3b82f6, #2563eb);
        color: #fff;
        padding: 6px 14px;
        border-radius: 999px;
        border: 0;
        font-size: 12px;
        font-weight: 700;
        cursor: pointer;
        box-shadow: 0 4px 12px rgba(59,130,246,.3);
    }
    .cdp-change-btn:hover { box-shadow: 0 6px 16px rgba(59,130,246,.45); }

    /* Main card */
    .cdp-card {
        background:
            radial-gradient(circle at top, rgba(245,184,32,.06), transparent 70%),
            var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 14px;
        padding: 20px;
        text-align: center;
    }
    .cdp-title {
        font-size: 25px;
        font-weight: 500;
        color: var(--accent);
        text-align: center;
        margin-bottom: 5px;
    }
    .cdp-subtitle {
        font-size: 20px;
        font-weight: 500;
        color: var(--text-muted);
        text-align: center;
        margin-bottom: 5px;
    }

    .cdp-info-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        max-width: 320px;
        margin: 0 auto 16px;
    }
    .cdp-info-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: var(--bg-card-2);
        border: 1px solid var(--border);
        border-radius: 8px;
        padding: 8px 14px;
        font-size: 13px;
    }
    .cdp-info-row .lbl { color: var(--text-muted); }
    .cdp-info-row .val { font-weight: 700; }
    .cdp-info-row .val.amount { color: var(--red); font-size: 18px; }
    .cdp-info-row .val.timer  { color: var(--red); font-size: 16px; min-width: 80px; text-align: right; }
    .cdp-info-row .val.time   { color: #60a5fa; }

    /* ── Summary grid (QR / p2p ส่วน 3 บรรทัดบน) — เลียน default theme: inline centered ── */
    .cdp-info-grid:not(.cdp-p2p-grid) {
        max-width: none;
        gap: 4px;
        text-align: center;
    }
    .cdp-info-grid:not(.cdp-p2p-grid) .cdp-info-row {
        display: block;
        background: transparent;
        border: 0;
        border-radius: 0;
        padding: 2px 0;
        font-size: 18px;
    }
    .cdp-info-grid:not(.cdp-p2p-grid) .cdp-info-row .lbl::after {
        content: ' : ';
        white-space: pre;
    }
    /* val ทุกประเภท — match default (font-size 18px, weight 500) */
    .cdp-info-grid:not(.cdp-p2p-grid) .cdp-info-row .val {
        font-size: 18px;
        font-weight: 500;
    }
    .cdp-info-grid:not(.cdp-p2p-grid) .cdp-info-row .val.timer {
        min-width: 0;
        text-align: center;
    }

    /* QR */
    .cdp-qr-wrap {
        position: relative;
        display: inline-block;
        /* background: #fff; */
        padding: 10px;
        border-radius: 12px;
        margin: 8px 0 12px;
        box-shadow: 0 8px 24px rgba(0,0,0,.4);
    }
    .cdp-qr-wrap img {
        display: block;
        border-radius: 6px;
        width: 220px;
        height: 220px;
    }
    .cdp-qr-overlay {
        position: absolute;
        inset: 10px;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: none;
        overflow: hidden;
    }
    .cdp-qr-overlay span {
        color: rgba(220, 38, 38, 0.75);
        font-size: 13px;
        font-weight: 700;
        white-space: nowrap;
        transform: rotate(-35deg);
        letter-spacing: 1px;
        text-shadow: 0 0 4px rgba(0,0,0,0.3);
    }

    .cdp-ref {
        color: var(--red);
        font-size: 14px;
        font-weight: 700;
        letter-spacing: .04em;
        margin: 4px 0;
    }
    .cdp-warn {
        color: var(--accent);
        font-size: 13px;
        font-weight: 600;
        margin-bottom: 14px;
    }

    /* Download */
    .cdp-dl-btn {
        background: linear-gradient(135deg, var(--green), var(--green-2));
        color: #fff;
        border: 0;
        border-radius: 10px;
        padding: 10px 22px;
        font-weight: 700;
        font-size: 13px;
        cursor: pointer;
        box-shadow: 0 4px 12px rgba(34,197,94,.3);
        margin-bottom: 16px;
        transition: transform .1s, box-shadow .15s;
    }
    .cdp-dl-btn:hover  { box-shadow: 0 6px 18px rgba(34,197,94,.5); }
    .cdp-dl-btn:active { transform: scale(.97); }

    /* Notes */
    .cdp-notes {
        text-align: left;
        max-width: 380px;
        margin: 0 auto 18px;
        background: rgba(245,184,32,.06);
        border: 1px solid rgba(245,184,32,.2);
        border-radius: 10px;
        padding: 12px 16px;
    }
    .cdp-note {
        color: var(--text-muted);
        font-size: 12px;
        padding: 3px 0;
        line-height: 1.6;
    }
    .cdp-note::before {
        content: "* ";
        color: var(--accent);
        font-weight: 800;
    }

    .cdp-divider {
        height: 1px;
        background: var(--border);
        margin: 16px auto;
        max-width: 380px;
    }

    .cdp-cancel-btn {
        background: rgba(239,68,68,.1);
        color: var(--red);
        border: 1px solid rgba(239,68,68,.3);
        border-radius: 10px;
        padding: 10px 22px;
        font-weight: 700;
        font-size: 13px;
        cursor: pointer;
        transition: background .15s;
    }
    .cdp-cancel-btn:hover { background: rgba(239,68,68,.2); }

    @keyframes cdpBlink {
        0%, 50%   { opacity: 1; }
        50.01%, 100% { opacity: .35; }
    }
    .cdp-blink { animation: cdpBlink 1s step-start infinite; }

/* ─────────────────────────────────────────────────── */
/* FILE: panel/deposit_success.php */
/* ─────────────────────────────────────────────────── */


    /* ═══ Classic — Deposit success ═══ */
    .cds-toolbar {
        display: flex;
        align-items: center;
        gap: 12px;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 10px 14px;
        margin-bottom: 14px;
        margin-top: 10px;
    }
    .cds-back {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: var(--text);
        text-decoration: none;
        font-size: 13px;
        font-weight: 600;
        padding: 6px 10px;
        border-radius: 8px;
        background: rgba(255,255,255,.05);
        border: 1px solid var(--border);
    }
    .cds-back:hover { background: rgba(255,255,255,.12); }
    .cds-toolbar-title {
        flex: 1;
        font-weight: 800;
        font-size: 15px;
        letter-spacing: .03em;
    }

    /* Hero card with check icon */
    .cds-hero {
        background:
            radial-gradient(circle at 50% 0%, rgba(34,197,94,.18), transparent 60%),
            var(--bg-card);
        border: 1px solid rgba(34,197,94,.25);
        border-radius: 16px;
        padding: 26px 20px 20px;
        text-align: center;
        margin-bottom: 14px;
    }

    .cds-check {
        width: 96px;
        height: 96px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--green), var(--green-2));
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 14px;
        box-shadow: 0 12px 32px rgba(34,197,94,.45),
                    inset 0 -4px 12px rgba(0,0,0,.15),
                    inset 0 2px 6px rgba(255,255,255,.25);
        animation: cdsPop .55s ease-out;
    }
    .cds-check i {
        color: #fff;
        font-size: 46px;
        animation: cdsCheck .6s .2s ease-out both;
        filter: drop-shadow(0 2px 4px rgba(0,0,0,.25));
    }
    @keyframes cdsPop {
        0%   { transform: scale(0);    opacity: 0; }
        60%  { transform: scale(1.12); opacity: 1; }
        100% { transform: scale(1); }
    }
    @keyframes cdsCheck {
        0%   { transform: scale(0) rotate(-30deg); opacity: 0; }
        100% { transform: scale(1) rotate(0);      opacity: 1; }
    }

    .cds-title {
        color: var(--green);
        font-size: 22px;
        font-weight: 800;
        margin-bottom: 4px;
        letter-spacing: .02em;
    }
    .cds-subtitle {
        color: var(--text-muted);
        font-size: 13px;
        margin-bottom: 4px;
    }

    /* Detail card */
    .cds-card {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 14px;
        padding: 14px 18px;
        margin-bottom: 14px;
    }
    .cds-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 11px 0;
        border-bottom: 1px dashed var(--border);
        font-size: 13px;
    }
    .cds-row:last-child { border-bottom: 0; }
    .cds-row .lbl { color: var(--text-muted); }
    .cds-row .val { font-weight: 700; color: var(--text); }

    .cds-row .val.amount { color: var(--green);  font-size: 20px; font-weight: 800; }
    .cds-row .val.bonus  { color: var(--accent); font-size: 16px; font-weight: 800; }
    .cds-row .val.credit { color: #60a5fa;       font-size: 18px; font-weight: 800; }
    .cds-row .val.muted  { color: var(--text-muted); font-size: 12px; font-weight: 500; letter-spacing: .03em; }

    .cds-badge {
        display: inline-block;
        background: rgba(245,184,32,.15);
        color: var(--accent);
        font-size: 11px;
        font-weight: 700;
        padding: 2px 8px;
        border-radius: 999px;
        margin-left: 6px;
        border: 1px solid rgba(245,184,32,.3);
    }

    /* Action buttons */
    .cds-actions {
        display: flex;
        gap: 10px;
    }
    .cds-btn {
        flex: 1;
        padding: 13px 0;
        border-radius: 999px;
        border: 0;
        font-size: 14px;
        font-weight: 800;
        text-decoration: none;
        text-align: center;
        cursor: pointer;
        transition: transform .1s, box-shadow .15s;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }
    .cds-btn:active { transform: scale(.97); }
    .cds-btn.home {
        background: linear-gradient(135deg, var(--accent), var(--accent-2));
        color: #1a1d24;
        box-shadow: 0 6px 16px rgba(245,184,32,.35);
    }
    .cds-btn.home:hover  { box-shadow: 0 8px 22px rgba(245,184,32,.5); color: #1a1d24; }
    .cds-btn.again {
        background: rgba(255,255,255,.06);
        color: var(--text);
        border: 1px solid var(--border);
    }
    .cds-btn.again:hover { background: rgba(255,255,255,.12); color: var(--text); }

/* ─────────────────────────────────────────────────── */
/* FILE: panel/his_bank.php */
/* ─────────────────────────────────────────────────── */


    /* ═══ Classic — History Bank ═══ */
    .chb-toolbar {
        display: flex;
        align-items: center;
        gap: 12px;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 10px 14px;
        margin-bottom: 14px;
        margin-top: 10px;
    }
    .chb-back {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: var(--text);
        text-decoration: none;
        font-size: 13px;
        font-weight: 600;
        padding: 6px 10px;
        border-radius: 8px;
        background: rgba(255,255,255,.05);
        border: 1px solid var(--border);
    }
    .chb-back:hover { background: rgba(255,255,255,.12); }
    .chb-toolbar-title {
        flex: 1;
        font-weight: 800;
        font-size: 15px;
        letter-spacing: .03em;
    }

    /* Tabs */
    .chb-tabs {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-bottom: 14px;
    }
    .chb-tab {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 12px 14px;
        border-radius: 12px;
        border: 1px solid var(--border);
        background: var(--bg-card);
        color: var(--text-muted);
        font-weight: 700;
        font-size: 14px;
        cursor: pointer;
        transition: all .18s;
    }
    .chb-tab:hover { color: var(--text); border-color: rgba(255,255,255,.18); }
    .chb-tab.is-active {
        border-color: transparent;
        color: #fff;
        box-shadow: 0 8px 18px rgba(0,0,0,.35);
    }
    .chb-tab.is-active[data-tab="dep"] {
        background: linear-gradient(135deg, var(--green), var(--green-2));
    }
    .chb-tab.is-active[data-tab="wd"] {
        background: linear-gradient(135deg, var(--red), var(--red-2));
    }

    /* Card wrap */
    .chb-card {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 14px;
        padding: 12px;
        margin-bottom: 14px;
    }
    .chb-pane { display: none; }
    .chb-pane.is-show { display: block; }

    /* Table */
    .chb-table-wrap {
        overflow-x: auto;
    }
    .chb-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 12.5px;
        white-space: nowrap;
        color: var(--text);
    }
    .chb-table thead {
        background: rgba(255,255,255,.04);
    }
    .chb-table th {
        padding: 11px 8px;
        font-weight: 700;
        color: var(--text-muted);
        border-bottom: 1px solid var(--border);
        text-align: center;
    }
    .chb-table td {
        padding: 10px 8px;
        border-bottom: 1px dashed var(--border);
        text-align: center;
    }
    .chb-table tr:last-child td { border-bottom: 0; }
    .chb-table td.amt { font-weight: 700; color: var(--text); }

    .chb-empty {
        padding: 36px 14px;
        color: var(--text-muted);
        font-size: 13px;
    }
    .chb-empty i { display: block; font-size: 32px; margin-bottom: 6px; }

    /* Badges */
    .chb-badge {
        display: inline-block;
        padding: 3px 10px;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: .03em;
    }
    .chb-badge.dep   { background: rgba(34,197,94,.18);  color: var(--green); border:1px solid rgba(34,197,94,.4); }
    .chb-badge.wd    { background: rgba(239,68,68,.18);  color: var(--red);   border:1px solid rgba(239,68,68,.4); }
    .chb-badge.bon   { background: rgba(245,184,32,.18); color: var(--accent);border:1px solid rgba(245,184,32,.4); }
    .chb-badge.ok    { background: rgba(34,197,94,.18);  color: var(--green); border:1px solid rgba(34,197,94,.4); }
    .chb-badge.wait  { background: rgba(245,184,32,.18); color: var(--accent);border:1px solid rgba(245,184,32,.4); }
    .chb-badge.fail  { background: rgba(239,68,68,.18);  color: var(--red);   border:1px solid rgba(239,68,68,.4); }

    /* Pagination row */
    .chb-pag-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 12px;
        padding: 0 4px;
    }
    .chb-pag-info { color: var(--text-muted); font-size: 12px; }
    .chb-pag-nav { display: flex; gap: 4px; }
    .chb-pag-nav .btn,
    .chb-pag-nav button {
        background: rgba(255,255,255,.05);
        border: 1px solid var(--border);
        color: var(--text);
        font-size: 12px;
        padding: 4px 10px;
        border-radius: 6px;
        cursor: pointer;
    }
    .chb-pag-nav .btn:hover,
    .chb-pag-nav button:hover { background: rgba(255,255,255,.1); }
    .chb-pag-nav .btn.active,
    .chb-pag-nav .btn-primary,
    .chb-pag-nav button.active {
        background: linear-gradient(135deg, var(--accent), var(--accent-2));
        color: #1a1d24;
        border-color: var(--accent);
        font-weight: 700;
    }
    .chb-pag-nav .btn:disabled,
    .chb-pag-nav button:disabled { opacity: .4; cursor: not-allowed; }

/* ─────────────────────────────────────────────────── */
/* FILE: panel/invoice.php */
/* ─────────────────────────────────────────────────── */


    /* ═══ Classic — Invoice ═══ */
    .civ-toolbar {
        display: flex;
        align-items: center;
        gap: 12px;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 10px 14px;
        margin-bottom: 14px;
         margin-top: 10px;
    }
    .civ-back {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: var(--text);
        text-decoration: none;
        font-size: 13px;
        font-weight: 600;
        padding: 6px 10px;
        border-radius: 8px;
        background: rgba(255,255,255,.05);
        border: 1px solid var(--border);
    }
    .civ-back:hover { background: rgba(255,255,255,.12); }
    .civ-toolbar-title {
        flex: 1;
        font-weight: 800;
        font-size: 15px;
        letter-spacing: .03em;
    }

    /* Stats */
    .civ-stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-bottom: 14px;
    }
    .civ-stat {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 14px;
        padding: 14px 14px;
        text-align: center;
        position: relative;
        overflow: hidden;
    }
    .civ-stat::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse at top, rgba(245,184,32,.12), transparent 60%);
        pointer-events: none;
    }
    .civ-stat-label {
        color: var(--text-muted);
        font-size: 12px;
        font-weight: 600;
        margin-bottom: 4px;
        position: relative;
    }
    .civ-stat-value {
        font-size: 22px;
        font-weight: 800;
        color: var(--accent);
        position: relative;
        letter-spacing: .02em;
    }

    /* Tabs (4 columns) */
    .civ-tabs {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
        margin-bottom: 14px;
    }
    .civ-tab {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        padding: 10px 6px;
        border-radius: 12px;
        border: 1px solid var(--border);
        background: var(--bg-card);
        color: var(--text-muted);
        font-weight: 700;
        font-size: 12.5px;
        cursor: pointer;
        transition: all .18s;
        line-height: 1.25;
    }
    .civ-tab:hover { color: var(--text); border-color: rgba(255,255,255,.18); }
    .civ-tab-count {
        font-size: 18px;
        font-weight: 800;
    }
    .civ-tab.is-active {
        border-color: transparent;
        color: #fff;
        box-shadow: 0 8px 18px rgba(0,0,0,.35);
    }
    .civ-tab.is-active[data-tab="all"]    { background: linear-gradient(135deg, #6366f1, #4f46e5); }
    .civ-tab.is-active[data-tab="wait"]   { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #1a1d24; }
    .civ-tab.is-active[data-tab="result"] { background: linear-gradient(135deg, var(--green), var(--green-2)); }
    .civ-tab.is-active[data-tab="cancel"] { background: linear-gradient(135deg, var(--red), var(--red-2)); }

    /* Panes */
    .civ-pane { display: none; }
    .civ-pane.is-show { display: block; }

    .civ-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    @media (max-width: 720px) {
        .civ-grid { grid-template-columns: 1fr; }
    }

    .civ-empty {
        text-align: center;
        color: var(--text-muted);
        padding: 36px 14px;
        font-size: 13px;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 12px;
    }
    .civ-empty i { display: block; font-size: 32px; margin-bottom: 6px; }

    /* Bet Card */
    .civ-card {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 14px;
        overflow: hidden;
        transition: transform .18s, border-color .18s;
    }
    .civ-card:hover {
        transform: translateY(-1px);
        border-color: rgba(255,255,255,.14);
    }
    .civ-card-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 14px;
        background: rgba(255,255,255,.03);
        border-bottom: 1px solid var(--border);
    }
    .civ-card-head-l {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
    }
    .civ-lotto-name {
        font-weight: 800;
        color: var(--accent);
        font-size: 14px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .civ-round {
        color: var(--green);
        font-size: 12px;
        font-weight: 600;
    }
    .civ-card-body { padding: 12px 14px; }

    .civ-card-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 10px;
    }
    .civ-amount-label {
        color: var(--red);
        font-size: 11.5px;
        font-weight: 600;
    }
    .civ-amount-value {
        font-weight: 800;
        font-size: 18px;
        color: var(--accent);
        letter-spacing: .02em;
    }
    .civ-btn-info {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: linear-gradient(135deg, var(--red), var(--red-2));
        color: #fff;
        font-weight: 700;
        font-size: 12.5px;
        padding: 7px 14px;
        border-radius: 999px;
        border: none;
        cursor: pointer;
        transition: transform .15s, box-shadow .15s;
    }
    .civ-btn-info:hover {
        transform: translateY(-1px);
        box-shadow: 0 6px 14px rgba(239,68,68,.35);
    }
    .civ-card-foot {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        color: var(--text-muted);
        font-size: 12px;
    }
    .civ-bet-code {
        font-family: 'Roboto Mono', ui-monospace, monospace;
        color: var(--text);
        font-size: 12px;
        font-weight: 600;
    }
    .civ-bet-date { font-size: 11.5px; }

    /* Badges */
    .civ-badge {
        display: inline-block;
        padding: 3px 10px;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: .03em;
        white-space: nowrap;
    }
    .civ-badge.win    { background: rgba(34,197,94,.18);  color: var(--green); border:1px solid rgba(34,197,94,.4); }
    .civ-badge.lose   { background: rgba(255,255,255,.06); color: var(--text-muted); border:1px solid var(--border); }
    .civ-badge.wait   { background: rgba(245,184,32,.18); color: var(--accent);border:1px solid rgba(245,184,32,.4); }
    .civ-badge.cancel { background: rgba(239,68,68,.18);  color: var(--red);   border:1px solid rgba(239,68,68,.4); }

    /* ── Modal (bet invoice) ── */
    #civBetInvoiceModal .modal-content {
        background: var(--bg-card);
        border: 1px solid var(--border);
        color: var(--text);
        border-radius: 14px;
    }
    #civBetInvoiceModal .modal-header,
    #civBetInvoiceModal .modal-footer {
        border-color: var(--border);
    }
    #civBetInvoiceModal .btn-close {
        filter: invert(1) grayscale(100%) brightness(200%);
    }
    #civBetInvoiceModal .modal-title {
        color: var(--accent);
        font-weight: 800;
    }

    .civ-bet-group { margin-bottom: 16px; }
    .civ-bet-group-title {
        font-weight: 800;
        font-size: 13.5px;
        color: var(--accent);
        padding: 6px 0;
        border-bottom: 1px solid var(--border);
        margin-bottom: 6px;
    }
    #civBetPreviewBox .table {
        color: var(--text);
        border-color: var(--border);
        background: transparent;
        margin-bottom: 0;
    }
    #civBetPreviewBox .table th {
        background: var(--bg-card-2);
        color: var(--accent);
        font-size: 12px;
        border-color: var(--border);
        text-align: center;
    }
    #civBetPreviewBox .table td {
        background: var(--bg-card-3);
        border-color: var(--border);
        font-size: 12.5px;
        color: var(--text);
        text-align: center;
    }
    #civBetPreviewBox hr { border-color: var(--border); }

    .civ-bet-info-row {
        display: flex;
        flex-wrap: wrap;
        gap: 6px 14px;
        font-size: 13px;
        margin-bottom: 4px;
    }
    .civ-bet-info-row strong { color: var(--accent); font-weight: 700; }
    .civ-bet-info-row .info-val { color: var(--text); }
    .civ-bet-info-row .info-sub { color: var(--text-muted); font-size: 12px; }

    .civ-bet-win    { color: var(--green); font-weight: 700; }
    .civ-bet-lose   { color: var(--text-muted); }
    .civ-bet-wait   { color: var(--accent); }
    .civ-bet-cancel { color: var(--red); }
    .civ-bet-hard {
        background: var(--red);
        color: #fff;
        font-size: 10.5px;
        padding: 1px 6px;
        border-radius: 4px;
        font-weight: 700;
    }

/* ─────────────────────────────────────────────────── */
/* FILE: panel/lottery.php */
/* ─────────────────────────────────────────────────── */


    /* ═══ Classic — Lottery list ═══ */
    .clt-toolbar {
        display: flex;
        align-items: center;
        gap: 12px;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 10px 14px;
        margin-bottom: 14px;
         margin-top: 10px;
    }
    .clt-back {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: var(--text);
        text-decoration: none;
        font-size: 13px;
        font-weight: 600;
        padding: 6px 10px;
        border-radius: 8px;
        background: rgba(255,255,255,.05);
        border: 1px solid var(--border);
    }
    .clt-back:hover { background: rgba(255,255,255,.12); }
    .clt-toolbar-title {
        flex: 1;
        font-weight: 800;
        font-size: 15px;
        letter-spacing: .03em;
    }

    /* Group header */
    .clt-group-head {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 6px 0 10px;
        padding: 8px 14px;
        background: linear-gradient(135deg, rgba(245,184,32,.18), rgba(245,184,32,.04));
        border: 1px solid rgba(245,184,32,.35);
        color: var(--accent);
        font-weight: 800;
        font-size: 14px;
        border-radius: 10px;
        letter-spacing: .02em;
    }
    .clt-group-head i { font-size: 14px; }

    /* Grid */
    .clt-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-bottom: 16px;
    }
    @media (min-width: 768px)  { .clt-grid { grid-template-columns: repeat(3, 1fr); } }
    @media (min-width: 1200px) { .clt-grid { grid-template-columns: repeat(4, 1fr); } }

    /* Card */
    .clt-card {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 12px;
        overflow: hidden;
        text-decoration: none;
        color: var(--text);
        display: flex;
        flex-direction: column;
        transition: transform .15s, border-color .2s, box-shadow .2s;
    }
    .clt-card:hover {
        transform: translateY(-2px);
        border-color: rgba(245,184,32,.4);
        box-shadow: 0 10px 22px rgba(0,0,0,.45);
        color: var(--text);
    }
    .clt-card.is-off {
        opacity: .8;
    }

    /* Top: icon + name + sub */
    .clt-top {
        display: flex;
        align-items: stretch;
        color: #fff;
        text-shadow: 0 1px 3px rgba(0,0,0,.35);
        background: linear-gradient(135deg, #444, #2a2a2a);
        min-height: 56px;
    }
    .clt-top.is-on {
        /* color overridden inline ด้วย box_color */
    }
    .clt-ico {
        flex-shrink: 0;
        width: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(0,0,0,.22);
        font-size: 18px;
    }
    .clt-title {
        flex: 1;
        padding: 8px 12px;
        text-align: right;
        line-height: 1.2;
    }
    .clt-name {
        font-weight: 800;
        font-size: 14.5px;
        line-height: 1.2;
    }
    .clt-sub {
        display: inline-block;
        margin-top: 4px;
        font-size: 11px;
        padding: 2px 8px;
        border-radius: 999px;
        background: rgba(0,0,0,.28);
    }

    /* Bottom: status + countdown */
    .clt-bottom {
        display: flex;
        align-items: center;
        min-height: 50px;
        background: var(--bg-card-2);
        border-top: 1px solid var(--border);
    }
    .clt-status {
        flex-shrink: 0;
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        border-right: 1px solid var(--border);
    }
    .clt-status.ok    { color: var(--green); }
    .clt-status.off   { color: var(--text-muted); }
    .clt-status.fail  { color: var(--red); }
    .clt-status.done  { color: #60a5fa; }
    .clt-info {
        flex: 1;
        padding: 0 12px;
        text-align: right;
        line-height: 1.2;
    }
    .clt-countdown {
        font-weight: 800;
        font-size: 14px;
        color: var(--green);
        letter-spacing: .02em;
        font-family: 'Kanit', sans-serif;
    }
    .clt-countdown.is-warn { color: #fb923c; }
    .clt-countdown.is-danger { color: var(--red); }
    .clt-status-text {
        font-weight: 700;
        font-size: 14px;
    }
    .clt-status-text.muted    { color: var(--text-muted); }
    .clt-status-text.resulted { color: #60a5fa; }
    .clt-status-text.nobet    { color: var(--text-muted); }
    .clt-status-text.canceled { color: var(--red); }

    .clt-empty {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 14px;
        padding: 36px 14px;
        text-align: center;
        color: var(--text-muted);
        font-size: 13px;
    }
    .clt-empty i { display: block; font-size: 32px; margin-bottom: 6px; color: var(--accent); }

/* ─────────────────────────────────────────────────── */
/* FILE: panel/numbersets.php */
/* ─────────────────────────────────────────────────── */


    /* ═══ Classic — Numbersets ═══ */
    .cns-toolbar {
        display: flex;
        align-items: center;
        gap: 12px;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 10px 14px;
        margin-bottom: 14px;
        margin-top: 10px;
    }
    .cns-back {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: var(--text);
        text-decoration: none;
        font-size: 13px;
        font-weight: 600;
        padding: 6px 10px;
        border-radius: 8px;
        background: rgba(255,255,255,.05);
        border: 1px solid var(--border);
    }
    .cns-back:hover { background: rgba(255,255,255,.12); }
    .cns-toolbar-title {
        flex: 1;
        font-weight: 800;
        font-size: 15px;
        letter-spacing: .03em;
    }

    .cns-card {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 14px;
        padding: 14px;
        margin-bottom: 14px;
    }
    .cns-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 12px;
        border-bottom: 1px solid var(--border);
        margin-bottom: 12px;
    }
    .cns-head .t {
        display: flex;
        align-items: center;
        gap: 8px;
        font-weight: 800;
        color: var(--accent);
        font-size: 14px;
    }

    .cns-add-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 14px;
        border-radius: 999px;
        border: 0;
        background: linear-gradient(135deg, var(--green), var(--green-2));
        color: #fff;
        font-weight: 800;
        font-size: 13px;
        text-decoration: none;
        cursor: pointer;
        box-shadow: 0 6px 14px rgba(34,197,94,.35);
        transition: transform .1s, box-shadow .2s;
    }
    .cns-add-btn:hover { color: #fff; box-shadow: 0 8px 20px rgba(34,197,94,.5); }
    .cns-add-btn:active { transform: scale(.97); }

    .cns-table-wrap { overflow-x: auto; }
    .cns-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 13px;
        color: var(--text);
    }
    .cns-table th {
        text-align: center;
        font-weight: 700;
        color: var(--text-muted);
        padding: 10px 8px;
        border-bottom: 1px solid var(--border);
        background: rgba(255,255,255,.03);
        white-space: nowrap;
    }
    .cns-table th.col-name { text-align: left; padding-left: 14px; }
    .cns-table td {
        padding: 10px 8px;
        border-bottom: 1px dashed var(--border);
        text-align: center;
    }
    .cns-table td.col-name { text-align: left; padding-left: 14px; font-weight: 700; }
    .cns-table tr:last-child td { border-bottom: 0; }

    .cns-actions { display: inline-flex; gap: 6px; }
    .cns-btn-icon {
        width: 32px;
        height: 32px;
        border-radius: 8px;
        border: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        cursor: pointer;
        text-decoration: none;
        transition: transform .1s, box-shadow .2s;
    }
    .cns-btn-icon.edit {
        background: linear-gradient(135deg, var(--accent), var(--accent-2));
        color: #1a1d24;
        box-shadow: 0 4px 10px rgba(245,184,32,.3);
    }
    .cns-btn-icon.edit:hover { color: #1a1d24; box-shadow: 0 6px 14px rgba(245,184,32,.45); }
    .cns-btn-icon.del {
        background: linear-gradient(135deg, var(--red), var(--red-2));
        color: #fff;
        box-shadow: 0 4px 10px rgba(239,68,68,.3);
    }
    .cns-btn-icon.del:hover { color: #fff; box-shadow: 0 6px 14px rgba(239,68,68,.45); }
    .cns-btn-icon:active { transform: scale(.94); }

    .cns-empty {
        text-align: center;
        padding: 36px 12px;
        color: var(--text-muted);
        font-size: 13px;
    }
    .cns-empty i { display: block; font-size: 32px; margin-bottom: 6px; }

/* ─────────────────────────────────────────────────── */
/* FILE: panel/numbersets_add.php */
/* ─────────────────────────────────────────────────── */


    /* ═══ Classic — Numbersets Add ═══ */
    .cna-toolbar {
        display: flex;
        align-items: center;
        gap: 12px;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 10px 14px;
        margin-bottom: 14px;
        margin-top: 10px;
    }
    .cna-back {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: var(--text);
        text-decoration: none;
        font-size: 13px;
        font-weight: 600;
        padding: 6px 10px;
        border-radius: 8px;
        background: rgba(255,255,255,.05);
        border: 1px solid var(--border);
    }
    .cna-back:hover { background: rgba(255,255,255,.12); }
    .cna-toolbar-title {
        flex: 1;
        font-weight: 800;
        font-size: 15px;
        letter-spacing: .03em;
    }

    /* Card */
    .cna-card {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 14px;
        padding: 16px;
        margin-bottom: 14px;
    }
    .cna-card + .cna-card { margin-top: -2px; }

    /* Name row */
    .cna-name-row {
        display: grid;
        grid-template-columns: 110px 1fr;
        gap: 12px;
        align-items: center;
    }
    @media (max-width: 420px) {
        .cna-name-row { grid-template-columns: 1fr; gap: 6px; }
    }
    .cna-name-row .lbl {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-weight: 700;
        color: var(--accent);
        font-size: 13px;
    }
    .cna-input {
        width: 100%;
        background: rgba(255,255,255,.04);
        border: 1px solid var(--border);
        border-radius: 9px;
        padding: 9px 12px;
        font-size: 13.5px;
        color: var(--text);
        font-family: 'Kanit', sans-serif;
        outline: none;
        transition: border-color .15s;
    }
    .cna-input:focus { border-color: rgba(245,184,32,.5); }
    .cna-input::placeholder { color: var(--text-muted); }

    /* Section title */
    .cna-section-title {
        display: flex;
        align-items: center;
        gap: 8px;
        font-weight: 800;
        color: var(--green);
        font-size: 14px;
        margin: 6px 0 10px;
    }

    /* Row of bet entry */
    #cnaRows {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .cna-row {
        display: grid;
        grid-template-columns: 28px 130px 1fr 36px;
        align-items: center;
        gap: 8px;
    }
    @media (max-width: 480px) {
        .cna-row { grid-template-columns: 24px 110px 1fr 34px; gap: 6px; }
    }
    .cna-row-no {
        font-weight: 800;
        color: var(--text-muted);
        text-align: center;
        font-size: 13px;
    }
    .cna-row select.cna-input { padding-right: 28px; }
    .cna-row select.cna-input option { background: var(--bg-card-2); color: var(--text); }

    .cna-btn-remove {
        width: 36px;
        height: 36px;
        border-radius: 9px;
        background: rgba(239,68,68,.12);
        border: 1px solid rgba(239,68,68,.4);
        color: var(--red);
        cursor: pointer;
        font-size: 12px;
        transition: background .15s, transform .1s;
    }
    .cna-btn-remove:hover { background: rgba(239,68,68,.22); }
    .cna-btn-remove:active { transform: scale(.94); }

    /* Add row button */
    .cna-add-row {
        margin-top: 12px;
        width: 100%;
        padding: 11px;
        border: 1px dashed rgba(96,165,250,.5);
        background: rgba(96,165,250,.08);
        color: #60a5fa;
        font-weight: 700;
        font-size: 13px;
        border-radius: 10px;
        cursor: pointer;
        transition: background .15s;
    }
    .cna-add-row:hover { background: rgba(96,165,250,.16); }

    /* Action buttons */
    .cna-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .cna-act {
        padding: 13px 0;
        border-radius: 12px;
        border: 0;
        font-size: 14px;
        font-weight: 800;
        letter-spacing: .03em;
        cursor: pointer;
        text-decoration: none;
        text-align: center;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        transition: transform .1s, box-shadow .2s;
    }
    .cna-act.cancel {
        background: rgba(239,68,68,.12);
        color: var(--red);
        border: 1px solid rgba(239,68,68,.45);
    }
    .cna-act.cancel:hover { background: rgba(239,68,68,.2); color: var(--red); }
    .cna-act.save {
        background: linear-gradient(135deg, var(--green), var(--green-2));
        color: #fff;
        box-shadow: 0 8px 20px rgba(34,197,94,.35);
    }
    .cna-act.save:hover { color: #fff; box-shadow: 0 10px 26px rgba(34,197,94,.5); }
    .cna-act:active { transform: scale(.98); }

/* ─────────────────────────────────────────────────── */
/* FILE: panel/numbersets_detail.php */
/* ─────────────────────────────────────────────────── */


    /* ═══ Classic — Numbersets Detail ═══ */
    .cnd-toolbar {
        display: flex;
        align-items: center;
        gap: 12px;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 10px 14px;
        margin-bottom: 14px;
        margin-top: 10px;
    }
    .cnd-back {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: var(--text);
        text-decoration: none;
        font-size: 13px;
        font-weight: 600;
        padding: 6px 10px;
        border-radius: 8px;
        background: rgba(255,255,255,.05);
        border: 1px solid var(--border);
    }
    .cnd-back:hover { background: rgba(255,255,255,.12); }
    .cnd-toolbar-title {
        flex: 1;
        font-weight: 800;
        font-size: 15px;
        letter-spacing: .03em;
    }

    /* Hero */
    .cnd-hero {
        background:
            radial-gradient(circle at 50% 0%, rgba(167,139,250,.16), transparent 65%),
            var(--bg-card);
        border: 1px solid rgba(167,139,250,.32);
        border-radius: 14px;
        padding: 14px 16px;
        margin-bottom: 14px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }
    .cnd-hero .info {
        display: flex;
        align-items: center;
        gap: 12px;
        min-width: 0;
    }
    .cnd-hero .icon {
        flex-shrink: 0;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: linear-gradient(135deg, #a78bfa, #7c3aed);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 22px;
        box-shadow: 0 6px 16px rgba(167,139,250,.4);
    }
    .cnd-hero .name {
        font-size: 16px;
        font-weight: 800;
        color: var(--text);
        line-height: 1.2;
        word-break: break-word;
    }
    .cnd-hero .sub {
        font-size: 12px;
        color: var(--text-muted);
        margin-top: 2px;
    }

    .cnd-del-btn {
        flex-shrink: 0;
        background: linear-gradient(135deg, var(--red), var(--red-2));
        color: #fff;
        border: 0;
        font-weight: 700;
        font-size: 12.5px;
        padding: 8px 14px;
        border-radius: 999px;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        box-shadow: 0 6px 14px rgba(239,68,68,.35);
        transition: transform .1s, box-shadow .2s;
    }
    .cnd-del-btn:hover { box-shadow: 0 8px 18px rgba(239,68,68,.5); }
    .cnd-del-btn:active { transform: scale(.96); }

    /* Group card */
    .cnd-group {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 14px;
        padding: 12px 14px;
        margin-bottom: 12px;
    }
    .cnd-group-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding-bottom: 10px;
        margin-bottom: 8px;
        border-bottom: 1px solid var(--border);
    }
    .cnd-group-name {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-weight: 800;
        font-size: 14px;
        letter-spacing: .02em;
    }
    .cnd-group-name .dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: var(--accent);
        box-shadow: 0 0 8px currentColor;
        color: var(--accent);
    }
    .cnd-group-count {
        font-size: 12px;
        color: var(--text-muted);
    }

    .cnd-number-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
        gap: 8px;
    }
    .cnd-number {
        position: relative;
        background: rgba(255,255,255,.04);
        border: 1px solid var(--border);
        border-radius: 10px;
        padding: 10px 6px;
        text-align: center;
        transition: border-color .15s;
    }
    .cnd-number:hover { border-color: rgba(255,255,255,.18); }
    .cnd-number .idx {
        position: absolute;
        top: 4px;
        left: 6px;
        font-size: 10px;
        color: var(--text-muted);
    }
    .cnd-number .val {
        font-size: 20px;
        font-weight: 800;
        color: var(--text);
        letter-spacing: .04em;
    }

    .cnd-empty {
        text-align: center;
        padding: 36px 12px;
        color: var(--text-muted);
        font-size: 13px;
    }
    .cnd-empty i { display: block; font-size: 32px; margin-bottom: 6px; }

/* ─────────────────────────────────────────────────── */
/* FILE: panel/profile.php */
/* ─────────────────────────────────────────────────── */


    /* ═══ Classic — Profile ═══ */
    .cpf-toolbar {
        display: flex;
        align-items: center;
        gap: 12px;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 10px 14px;
        margin-bottom: 14px;
        margin-top: 10px;
    }
    .cpf-back {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: var(--text);
        text-decoration: none;
        font-size: 13px;
        font-weight: 600;
        padding: 6px 10px;
        border-radius: 8px;
        background: rgba(255,255,255,.05);
        border: 1px solid var(--border);
    }
    .cpf-back:hover { background: rgba(255,255,255,.12); }
    .cpf-toolbar-title {
        flex: 1;
        font-weight: 800;
        font-size: 15px;
        letter-spacing: .03em;
    }

    /* Rank hero */
    .cpf-hero {
        background:
            radial-gradient(circle at 50% 0%, rgba(245,184,32,.18), transparent 60%),
            var(--bg-card);
        border: 1px solid rgba(245,184,32,.3);
        border-radius: 16px;
        padding: 20px 16px 16px;
        text-align: center;
        margin-bottom: 14px;
    }
    .cpf-hero img {
        max-height: 84px;
        max-width: 150px;
        object-fit: contain;
        filter: drop-shadow(0 4px 14px rgba(245,184,32,.35));
    }
    .cpf-hero .name {
        margin-top: 6px;
        font-size: 13px;
        color: var(--accent);
        font-weight: 700;
        letter-spacing: .03em;
    }

    /* Generic card */
    .cpf-card {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 14px;
        padding: 0;
        margin-bottom: 14px;
        overflow: hidden;
    }
    .cpf-card-head {
        background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0));
        border-bottom: 1px solid var(--border);
        padding: 11px 16px;
        font-weight: 800;
        font-size: 14px;
        color: var(--text);
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .cpf-card-head i { color: var(--accent); margin-right: 6px; }
    .cpf-card-body { padding: 14px 16px; }

    /* Profile fields grid */
    .cpf-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .cpf-field label {
        display: block;
        font-size: 11px;
        color: var(--text-muted);
        margin-bottom: 4px;
        letter-spacing: .02em;
    }
    .cpf-value {
        background: rgba(255,255,255,.03);
        border: 1px solid var(--border);
        border-radius: 8px;
        padding: 8px 11px;
        font-size: 13px;
        font-weight: 600;
        color: var(--text);
        min-height: 36px;
        display: flex;
        align-items: center;
        word-break: break-all;
    }
    @media (max-width: 480px) {
        .cpf-grid { grid-template-columns: 1fr; }
    }

    /* Turn warning box */
    .cpf-turn {
        background: linear-gradient(135deg, rgba(245,184,32,.12), rgba(245,184,32,.04));
        border: 1px solid rgba(245,184,32,.45);
        border-radius: 14px;
        padding: 14px 16px;
        margin-bottom: 14px;
    }
    .cpf-turn-head {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 8px;
    }
    .cpf-turn-head i { color: var(--accent); font-size: 16px; }
    .cpf-turn-head .t { font-weight: 800; color: var(--accent); font-size: 14px; }
    .cpf-turn-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 5px 0;
        font-size: 12.5px;
    }
    .cpf-turn-row .lbl { color: var(--text-muted); }
    .cpf-turn-row .val { font-weight: 700; }
    .cpf-turn-row .val.ok    { color: var(--green); }
    .cpf-turn-row .val.warn  { color: var(--red); }
    .cpf-turn-row .val.info  { color: #a78bfa; }
    .cpf-turn-row .val.cyan  { color: #60a5fa; }
    .cpf-progress {
        position: relative;
        background: var(--bg-card-3);
        border: 1px solid var(--border);
        border-radius: 6px;
        height: 18px;
        overflow: hidden;
        margin: 6px 0;
    }
    .cpf-progress > .bar {
        height: 100%;
        background: linear-gradient(90deg, #f5b820, #f97316);
        transition: width .35s ease;
    }
    .cpf-progress > .bar.is-clear {
        background: linear-gradient(90deg, #22c55e, #16a34a);
    }
    .cpf-progress > .lbl {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        font-weight: 700;
        color: #fff;
        text-shadow: 0 1px 2px rgba(0,0,0,.6);
    }

    /* Rank list */
    .cpf-rank-row {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 16px;
        border-bottom: 1px dashed var(--border);
    }
    .cpf-rank-row:last-child { border-bottom: 0; }
    .cpf-rank-row.is-current {
        background: rgba(245,184,32,.06);
    }
    .cpf-rank-img {
        flex-shrink: 0;
        width: 48px;
        text-align: center;
        position: relative;
    }
    .cpf-rank-img img {
        width: 44px;
        height: 44px;
        object-fit: contain;
    }
    .cpf-rank-img .ph {
        width: 44px; height: 44px;
        border-radius: 50%;
        background: rgba(255,255,255,.05);
        border: 1px solid var(--border);
        display: flex; align-items: center; justify-content: center;
        color: var(--text-muted);
        margin: 0 auto;
    }
    .cpf-rank-badge {
        display: block;
        font-size: 9px;
        background: var(--accent);
        color: #1a1d24;
        font-weight: 800;
        border-radius: 4px;
        padding: 1px 4px;
        margin-top: 2px;
    }
    .cpf-rank-info { flex: 1; min-width: 0; }
    .cpf-rank-name {
        font-weight: 700;
        font-size: 13px;
        color: var(--text);
    }
    .cpf-rank-meta {
        font-size: 11px;
        color: var(--text-muted);
        display: flex;
        flex-wrap: wrap;
        gap: 3px 10px;
        margin-top: 2px;
    }
    .cpf-rank-action { flex-shrink: 0; }
    .cpf-btn-claim {
        background: linear-gradient(135deg, var(--accent), var(--accent-2));
        color: #1a1d24;
        border: 0;
        border-radius: 999px;
        padding: 6px 14px;
        font-size: 12px;
        font-weight: 800;
        cursor: pointer;
        box-shadow: 0 4px 10px rgba(245,184,32,.3);
    }
    .cpf-btn-claim:disabled { opacity: .5; cursor: not-allowed; }
    .cpf-rank-status {
        display: inline-flex;
        align-items: center;
        border-radius: 999px;
        padding: 4px 10px;
        font-size: 11px;
        font-weight: 700;
        border: 1px solid var(--border);
    }
    .cpf-rank-status.claimed {
        background: rgba(34,197,94,.12);
        color: var(--green);
        border-color: rgba(34,197,94,.35);
    }
    .cpf-rank-status.locked {
        background: rgba(255,255,255,.04);
        color: var(--text-muted);
    }
    .cpf-rank-status.current {
        background: rgba(245,184,32,.14);
        color: var(--accent);
        border-color: rgba(245,184,32,.4);
    }

    /* Password form */
    .cpf-pw-field { margin-bottom: 12px; }
    .cpf-pw-field:last-of-type { margin-bottom: 16px; }
    .cpf-pw-label {
        display: block;
        font-size: 12px;
        font-weight: 600;
        color: var(--text-muted);
        margin-bottom: 5px;
    }
    .cpf-pw-input {
        width: 100%;
        background: rgba(255,255,255,.03);
        border: 1px solid var(--border);
        border-radius: 8px;
        padding: 10px 12px;
        font-size: 14px;
        color: var(--text);
        outline: none;
        transition: border-color .15s;
    }
    .cpf-pw-input:focus {
        border-color: rgba(245,184,32,.5);
        background: rgba(255,255,255,.05);
    }
    .cpf-pw-err {
        color: var(--red);
        font-size: 11px;
        margin-top: 4px;
        display: none;
    }
    .cpf-pw-submit {
        width: 100%;
        padding: 12px 0;
        border-radius: 10px;
        border: 0;
        background: linear-gradient(135deg, var(--accent), var(--accent-2));
        color: #1a1d24;
        font-weight: 800;
        font-size: 14px;
        cursor: pointer;
        box-shadow: 0 6px 16px rgba(245,184,32,.35);
        transition: transform .1s, box-shadow .15s;
    }
    .cpf-pw-submit:hover { box-shadow: 0 8px 22px rgba(245,184,32,.5); }
    .cpf-pw-submit:active { transform: scale(.98); }

/* ─────────────────────────────────────────────────── */
/* FILE: panel/promotion.php */
/* ─────────────────────────────────────────────────── */


    /* ═══ Classic — Promotion ═══ */
    .cpr-toolbar {
        display: flex;
        align-items: center;
        gap: 12px;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 10px 14px;
        margin-bottom: 14px;
        margin-top: 10px;
    }
    .cpr-back {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: var(--text);
        text-decoration: none;
        font-size: 13px;
        font-weight: 600;
        padding: 6px 10px;
        border-radius: 8px;
        background: rgba(255,255,255,.05);
        border: 1px solid var(--border);
    }
    .cpr-back:hover { background: rgba(255,255,255,.12); }
    .cpr-toolbar-title {
        flex: 1;
        font-weight: 800;
        font-size: 15px;
        letter-spacing: .03em;
    }

    /* Hero */
    .cpr-hero {
        background:
            radial-gradient(circle at 50% 0%, rgba(245,184,32,.18), transparent 65%),
            var(--bg-card);
        border: 1px solid rgba(245,184,32,.32);
        border-radius: 16px;
        padding: 18px 18px;
        margin-bottom: 14px;
        display: flex;
        align-items: center;
        gap: 14px;
    }
    .cpr-hero .icon {
        flex-shrink: 0;
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--accent), var(--accent-2));
        display: flex;
        align-items: center;
        justify-content: center;
        color: #1a1d24;
        font-size: 24px;
        box-shadow: 0 8px 20px rgba(245,184,32,.4);
    }
    .cpr-hero .t {
        font-size: 17px;
        font-weight: 800;
        color: var(--accent);
        letter-spacing: .02em;
    }
    .cpr-hero .s {
        font-size: 12px;
        color: var(--text-muted);
        margin-top: 2px;
    }

    /* Grid */
    .cpr-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        margin-bottom: 16px;
    }
    @media (min-width: 760px)  { .cpr-grid { grid-template-columns: repeat(3, 1fr); } }
    @media (min-width: 1100px) { .cpr-grid { grid-template-columns: repeat(4, 1fr); } }
    @media (max-width: 380px)  { .cpr-grid { grid-template-columns: 1fr; } }

    .cpr-card {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 14px;
        overflow: hidden;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        text-decoration: none;
        color: var(--text);
        transition: transform .15s, border-color .2s, box-shadow .2s;
    }
    .cpr-card:hover {
        transform: translateY(-3px);
        border-color: rgba(245,184,32,.45);
        box-shadow: 0 12px 28px rgba(0,0,0,.5);
        color: var(--text);
    }

    .cpr-thumb {
        display: block;
        width: 100%;
        height: auto;
        background-color: var(--bg-card-2);
        border-bottom: 1px solid var(--border);
        object-fit: contain;
    }
    .cpr-thumb.is-empty {
        aspect-ratio: 16 / 9;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--accent);
        font-size: 38px;
        background: linear-gradient(135deg, rgba(245,184,32,.10), rgba(245,184,32,.02));
    }

    .cpr-body {
        padding: 11px 12px 12px;
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 6px;
    }
    .cpr-title {
        font-weight: 800;
        font-size: 14px;
        color: var(--text);
        line-height: 1.3;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .cpr-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        font-size: 11px;
    }
    .cpr-meta .tag {
        background: rgba(255,255,255,.05);
        border: 1px solid var(--border);
        color: var(--text-muted);
        padding: 2px 8px;
        border-radius: 999px;
    }
    .cpr-meta .tag.bonus {
        background: rgba(34,197,94,.12);
        border-color: rgba(34,197,94,.4);
        color: var(--green);
    }
    .cpr-meta .tag.turn {
        background: rgba(96,165,250,.12);
        border-color: rgba(96,165,250,.4);
        color: #60a5fa;
    }
    .cpr-meta .tag.policy {
        background: rgba(245,184,32,.12);
        border-color: rgba(245,184,32,.4);
        color: var(--accent);
    }

    .cpr-foot {
        display: flex;
        gap: 6px;
        margin-top: 4px;
    }
    .cpr-btn {
        flex: 1;
        padding: 8px 0;
        border-radius: 9px;
        border: 0;
        font-size: 12px;
        font-weight: 800;
        cursor: pointer;
        text-decoration: none;
        text-align: center;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        transition: transform .1s, box-shadow .2s;
    }
    .cpr-btn.detail {
        background: rgba(255,255,255,.06);
        border: 1px solid var(--border);
        color: var(--text);
    }
    .cpr-btn.detail:hover { background: rgba(255,255,255,.14); color: var(--text); }
    .cpr-btn.get {
        background: linear-gradient(135deg, var(--accent), var(--accent-2));
        color: #1a1d24;
        box-shadow: 0 4px 10px rgba(245,184,32,.3);
    }
    .cpr-btn.get:hover { color: #1a1d24; box-shadow: 0 6px 14px rgba(245,184,32,.45); }
    .cpr-btn:active { transform: scale(.96); }

    /* Empty */
    .cpr-empty {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 14px;
        padding: 40px 14px;
        text-align: center;
        color: var(--text-muted);
        font-size: 13px;
    }
    .cpr-empty i { display: block; font-size: 36px; margin-bottom: 8px; color: var(--accent); }

    /* Modal */
    .cpr-modal {
        position: fixed;
        inset: 0;
        z-index: 1050;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 16px;
    }
    .cpr-modal.is-show { display: flex; animation: cprFade .2s ease; }
    @keyframes cprFade {
        from { opacity: 0; }
        to   { opacity: 1; }
    }
    .cpr-modal-backdrop {
        position: absolute;
        inset: 0;
        background: rgba(0,0,0,.65);
        backdrop-filter: blur(6px);
    }
    .cpr-modal-panel {
        position: relative;
        width: 100%;
        max-width: 560px;
        max-height: 92vh;
        background: linear-gradient(180deg, #1a1d24 0%, #14171c 100%);
        border: 1px solid rgba(255,255,255,.08);
        border-radius: 16px;
        box-shadow: 0 20px 60px rgba(0,0,0,.6);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        animation: cprSlideUp .25s cubic-bezier(.34, 1.56, .64, 1);
    }
    @keyframes cprSlideUp {
        from { transform: translateY(20px); opacity: 0; }
        to   { transform: translateY(0); opacity: 1; }
    }
    .cpr-modal-head {
        position: relative;
        padding: 14px 50px 14px 18px;
        border-bottom: 1px solid var(--border);
        background: rgba(255,255,255,.02);
        font-weight: 800;
        font-size: 15px;
        color: var(--accent);
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .cpr-modal-close {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: rgba(255,255,255,.06);
        border: 1px solid var(--border);
        color: var(--text);
        font-size: 14px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background .15s, transform .1s;
    }
    .cpr-modal-close:hover { background: rgba(255,255,255,.14); }
    .cpr-modal-close:active { transform: translateY(-50%) scale(.94); }

    .cpr-modal-body {
        flex: 1;
        overflow-y: auto;
        padding: 0;
    }
    .cpr-modal-banner {
        width: 100%;
        background-color: var(--bg-card-2);
    }
    .cpr-modal-banner img {
        display: block;
        width: 100%;
        height: auto;
        object-fit: contain;
    }
    .cpr-modal-banner.is-empty {
        aspect-ratio: 16 / 9;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--accent);
        font-size: 56px;
        background: linear-gradient(135deg, rgba(245,184,32,.10), rgba(245,184,32,.02));
    }
    .cpr-modal-content { padding: 16px 18px; }
    .cpr-modal-title {
        font-size: 17px;
        font-weight: 800;
        color: var(--text);
        margin-bottom: 10px;
        line-height: 1.3;
    }
    .cpr-modal-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-bottom: 14px;
    }
    .cpr-modal-tags .tag {
        background: rgba(255,255,255,.05);
        border: 1px solid var(--border);
        color: var(--text-muted);
        padding: 4px 10px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 700;
    }
    .cpr-modal-tags .tag.bonus {
        background: rgba(34,197,94,.12);
        border-color: rgba(34,197,94,.4);
        color: var(--green);
    }
    .cpr-modal-tags .tag.turn {
        background: rgba(96,165,250,.12);
        border-color: rgba(96,165,250,.4);
        color: #60a5fa;
    }
    .cpr-modal-tags .tag.policy {
        background: rgba(245,184,32,.12);
        border-color: rgba(245,184,32,.4);
        color: var(--accent);
    }
    .cpr-modal-desc {
        font-size: 13.5px;
        color: var(--text);
        line-height: 1.7;
        word-break: break-word;
    }
    .cpr-modal-desc img { max-width: 100%; height: auto; }
    .cpr-modal-desc p { margin: 0 0 10px; }
    .cpr-modal-desc:empty::before {
        content: 'ไม่มีรายละเอียดเพิ่มเติม';
        color: var(--text-muted);
        font-style: italic;
        font-size: 13px;
    }

    .cpr-modal-foot {
        padding: 12px 14px;
        border-top: 1px solid var(--border);
        display: grid;
        grid-template-columns: 1fr 2fr;
        gap: 8px;
        background: rgba(0,0,0,.2);
    }
    .cpr-modal-foot .cancel {
        background: rgba(255,255,255,.06);
        border: 1px solid var(--border);
        color: var(--text);
        padding: 11px 0;
        border-radius: 10px;
        font-weight: 700;
        cursor: pointer;
        font-size: 13.5px;
    }
    .cpr-modal-foot .cancel:hover { background: rgba(255,255,255,.14); }
    .cpr-modal-foot .go {
        background: linear-gradient(135deg, var(--accent), var(--accent-2));
        color: #1a1d24;
        border: 0;
        padding: 11px 0;
        border-radius: 10px;
        font-weight: 800;
        cursor: pointer;
        font-size: 13.5px;
        text-decoration: none;
        text-align: center;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        box-shadow: 0 6px 14px rgba(245,184,32,.35);
    }
    .cpr-modal-foot .go:hover { color: #1a1d24; box-shadow: 0 8px 20px rgba(245,184,32,.5); }

/* ─────────────────────────────────────────────────── */
/* FILE: panel/provider.php */
/* ─────────────────────────────────────────────────── */


    /* ═══ Provider page (classic) ═══ */
    .pv-toolbar {
        display: flex;
        align-items: center;
        gap: 12px;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 10px 14px;
        margin-bottom: 12px;
         margin-top: 10px;
    }
    .pv-back {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: var(--text);
        text-decoration: none;
        font-size: 13px;
        font-weight: 600;
        padding: 6px 10px;
        border-radius: 8px;
        background: rgba(255,255,255,.05);
        border: 1px solid var(--border);
        transition: background .15s;
    }
    .pv-back:hover { background: rgba(255,255,255,.12); color: var(--text); }

    .pv-title {
        flex: 1;
        font-weight: 700;
        font-size: 15px;
        color: var(--text);
        text-transform: uppercase;
        letter-spacing: .04em;
    }
    .pv-title small {
        font-weight: 500;
        opacity: .55;
        margin-left: 6px;
        text-transform: none;
        letter-spacing: 0;
    }

    /* ── Search bar (red border ตรงกับธีม) ── */
    .pv-search {
        position: relative;
        margin-bottom: 14px;
    }
    .pv-search-icon {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--text-muted);
        font-size: 14px;
        pointer-events: none;
    }
    .pv-search-input {
        width: 100%;
        background: var(--bg-card-2);
        border: 1px solid var(--red);
        border-radius: 10px;
        color: var(--text);
        font-family: inherit;
        font-size: 14px;
        padding: 10px 36px;
        outline: none;
        transition: border-color .15s, background .15s, box-shadow .15s;
    }
    .pv-search-input::placeholder { color: var(--text-muted); }
    .pv-search-input:focus {
        border-color: var(--red);
        background: var(--bg-card-3);
        box-shadow: 0 0 0 3px rgba(239, 68, 68, .15);
    }
    .pv-search-clear {
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translateY(-50%);
        width: 24px;
        height: 24px;
        border: 0;
        border-radius: 50%;
        background: rgba(255, 255, 255, .08);
        color: var(--text-muted);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
    }
    .pv-search-clear:hover { background: rgba(255, 255, 255, .16); color: var(--text); }

    /* ── Game grid: PC 5 cols / Mobile 2 cols ── */
    .pv-grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 12px;
    }
    @media (max-width: 760px) {
        .pv-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    }

    .pv-game {
        background: linear-gradient(180deg, var(--bg-card-2) 0%, var(--bg-card) 100%);
        border: 1px solid rgba(255, 255, 255, .08);
        border-radius: 14px;
        overflow: hidden;
        text-decoration: none;
        color: inherit;
        display: block;
        position: relative;
        transition: transform .2s ease, box-shadow .25s, border-color .2s;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .04),   /* highlight ด้านบน */
            0 2px 6px rgba(0, 0, 0, .35);
    }

    /* hairline ทองบาง ๆ ด้านบน card */
    .pv-game::before {
        content: '';
        position: absolute;
        top: 0; left: 8%; right: 8%;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(245, 184, 32, .4), transparent);
        pointer-events: none;
        z-index: 2;
    }

    .pv-game:hover {
        transform: translateY(-4px);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .08),
            0 14px 32px rgba(0, 0, 0, .55),
            0 0 0 1px rgba(245, 184, 32, .25),
            0 0 22px rgba(245, 184, 32, .15);  /* glow ทอง */
        border-color: rgba(245, 184, 32, .5);
    }

    .pv-game-thumb {
        position: relative;
        aspect-ratio: 1 / 1;
        overflow: hidden;
        padding: 6%;     /* ทำให้รูป logo เล็กลง ~12% (มี gap รอบรูป) */
        background:
            radial-gradient(circle at 50% 0%, rgba(245, 184, 32, .08), transparent 65%),
            linear-gradient(180deg, #1f242e 0%, #0e1116 100%);
        box-shadow:
            inset 0 -2px 6px rgba(0, 0, 0, .35),   /* shadow ด้านล่างของกรอบรูป */
            inset 0 1px 0 rgba(255, 255, 255, .03);
    }
    .pv-game-thumb img {
        width: 100%;
        height: 100%;
        object-fit: contain;   /* ให้ logo พอดีกรอบ ไม่ครอบ */
        display: block;
        transition: transform .3s ease, filter .3s;
        filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .45));
    }
    .pv-game:hover .pv-game-thumb img {
        transform: scale(1.08);
        filter: drop-shadow(0 10px 22px rgba(245, 184, 32, .35));
    }

    .pv-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(0,0,0,.7) 0%, rgba(0,0,0,.15) 55%, transparent 100%);
        opacity: 0;
        transition: opacity .2s;
    }
    .pv-game:hover .pv-overlay { opacity: 1; }

    .pv-play-btn {
        position: absolute;
        bottom: 12px;
        left: 50%;
        transform: translate(-50%, 6px);
        background: linear-gradient(135deg, var(--accent), var(--accent-2));
        color: #1a1d24;
        font-size: 12px;
        font-weight: 800;
        padding: 6px 18px;
        border-radius: 999px;
        white-space: nowrap;
        opacity: 0;
        transition: opacity .2s, transform .2s;
        letter-spacing: .04em;
        box-shadow: 0 6px 16px rgba(245, 184, 32, .45);
    }
    .pv-game:hover .pv-play-btn {
        opacity: 1;
        transform: translate(-50%, 0);
    }

    .pv-game-name {
        padding: 10px 10px 12px;
        font-size: 12px;
        font-weight: 700;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: rgba(255, 255, 255, .88);
        border-top: 1px solid rgba(255, 255, 255, .04);
        background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .15) 100%);
        transition: color .2s;
    }
    .pv-game:hover .pv-game-name {
        color: var(--accent);
    }

    .pv-game.is-hidden { display: none !important; }

    .pv-empty {
        grid-column: 1 / -1;
        text-align: center;
        padding: 40px 20px;
        color: var(--text-muted);
        font-size: 14px;
    }

/* ─────────────────────────────────────────────────── */
/* FILE: panel/redeem.php */
/* ─────────────────────────────────────────────────── */


    /* ═══ Classic — Redeem (Codefree) ═══ */
    .crd-toolbar {
        display: flex;
        align-items: center;
        gap: 12px;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 10px 14px;
        margin-bottom: 14px;
        margin-top: 10px;
    }
    .crd-back {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: var(--text);
        text-decoration: none;
        font-size: 13px;
        font-weight: 600;
        padding: 6px 10px;
        border-radius: 8px;
        background: rgba(255,255,255,.05);
        border: 1px solid var(--border);
    }
    .crd-back:hover { background: rgba(255,255,255,.12); }
    .crd-toolbar-title {
        flex: 1;
        font-weight: 800;
        font-size: 15px;
        letter-spacing: .03em;
    }

    /* Hero */
    .crd-hero {
        background:
            radial-gradient(circle at 50% 0%, rgba(132,204,22,.18), transparent 65%),
            var(--bg-card);
        border: 1px solid rgba(132,204,22,.35);
        border-radius: 16px;
        padding: 22px 18px 18px;
        margin-bottom: 14px;
        text-align: center;
    }
    .crd-hero .icon {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        background: linear-gradient(135deg, #84cc16, #4d7c0f);
        margin: 0 auto 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 30px;
        box-shadow: 0 10px 24px rgba(132,204,22,.4),
                    inset 0 2px 0 rgba(255,255,255,.2);
    }
    .crd-hero .t {
        font-size: 18px;
        font-weight: 800;
        color: #a3e635;
        letter-spacing: .02em;
    }
    .crd-hero .s {
        font-size: 12px;
        color: var(--text-muted);
        margin-top: 4px;
    }

    /* Note */
    .crd-note {
        background: rgba(96,165,250,.08);
        border: 1px solid rgba(96,165,250,.3);
        border-radius: 12px;
        padding: 12px 14px;
        font-size: 12.5px;
        color: var(--text);
        line-height: 1.7;
        margin-bottom: 14px;
    }
    .crd-note b { color: #60a5fa; font-weight: 700; }
    .crd-note i { color: #60a5fa; margin-right: 4px; }

    /* Input card */
    .crd-card {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 14px;
        padding: 16px;
        margin-bottom: 14px;
    }
    .crd-input {
        width: 100%;
        padding: 14px 16px;
        font-size: 18px;
        font-weight: 700;
        letter-spacing: 2px;
        text-transform: uppercase;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: rgba(255,255,255,.03);
        color: var(--text);
        outline: none;
        text-align: center;
        transition: border-color .2s, background .2s;
        margin-bottom: 12px;
        font-family: 'Kanit', sans-serif;
    }
    .crd-input:focus {
        border-color: rgba(132,204,22,.55);
        background: rgba(132,204,22,.05);
    }
    .crd-input::placeholder {
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 0;
        text-transform: none;
        color: var(--text-muted);
    }

    .crd-btn {
        width: 100%;
        padding: 14px 0;
        font-size: 15px;
        font-weight: 800;
        letter-spacing: .03em;
        border-radius: 12px;
        border: 0;
        cursor: pointer;
        transition: transform .1s, box-shadow .2s, opacity .2s;
        background: linear-gradient(135deg, #84cc16, #4d7c0f);
        color: #fff;
        box-shadow: 0 8px 20px rgba(132,204,22,.35);
    }
    .crd-btn:hover:not(:disabled) {
        box-shadow: 0 10px 26px rgba(132,204,22,.5);
    }
    .crd-btn:active { transform: scale(.98); }
    .crd-btn:disabled {
        background: rgba(255,255,255,.05);
        color: var(--text-muted);
        cursor: not-allowed;
        box-shadow: none;
        border: 1px solid var(--border);
    }

    /* History */
    .crd-his-card {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 14px;
        padding: 14px 16px;
        margin-bottom: 14px;
    }
    .crd-his-title {
        display: flex;
        align-items: center;
        gap: 8px;
        font-weight: 800;
        font-size: 14px;
        color: var(--accent);
        padding-bottom: 10px;
        margin-bottom: 6px;
        border-bottom: 1px solid var(--border);
    }
    .crd-his-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 11px 0;
        border-bottom: 1px dashed var(--border);
    }
    .crd-his-item:last-child { border-bottom: 0; }
    .crd-his-code {
        font-weight: 800;
        font-size: 14px;
        color: #a3e635;
        letter-spacing: .5px;
    }
    .crd-his-date {
        font-size: 11px;
        color: var(--text-muted);
        margin-top: 2px;
    }
    .crd-his-amount {
        font-weight: 800;
        font-size: 15px;
        color: var(--green);
        white-space: nowrap;
    }
    .crd-his-empty {
        text-align: center;
        padding: 24px 12px;
        color: var(--text-muted);
        font-size: 13px;
    }
    .crd-his-empty i { display: block; font-size: 28px; margin-bottom: 6px; }

/* ─────────────────────────────────────────────────── */
/* FILE: panel/refund.php */
/* ─────────────────────────────────────────────────── */


    /* ═══ Classic — Refund ═══ */
    .crf-toolbar {
        display: flex;
        align-items: center;
        gap: 12px;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 10px 14px;
        margin-bottom: 14px;
        margin-top: 10px;
    }
    .crf-back {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: var(--text);
        text-decoration: none;
        font-size: 13px;
        font-weight: 600;
        padding: 6px 10px;
        border-radius: 8px;
        background: rgba(255,255,255,.05);
        border: 1px solid var(--border);
    }
    .crf-back:hover { background: rgba(255,255,255,.12); }
    .crf-toolbar-title {
        flex: 1;
        font-weight: 800;
        font-size: 15px;
        letter-spacing: .03em;
    }

    /* Hero */
    .crf-hero {
        background:
            radial-gradient(circle at 50% 0%, rgba(239,68,68,.16), transparent 65%),
            var(--bg-card);
        border: 1px solid rgba(239,68,68,.32);
        border-radius: 16px;
        padding: 18px 18px;
        margin-bottom: 14px;
        display: flex;
        align-items: center;
        gap: 14px;
    }
    .crf-hero .icon {
        flex-shrink: 0;
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: linear-gradient(135deg, #ef4444, #dc2626);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 24px;
        box-shadow: 0 8px 20px rgba(239,68,68,.4);
    }
    .crf-hero .t {
        font-size: 16px;
        font-weight: 800;
        color: var(--text);
    }
    .crf-hero .s {
        font-size: 12px;
        color: var(--text-muted);
        margin-top: 2px;
    }

    /* Description */
    .crf-desc {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 14px;
        padding: 14px 16px;
        margin-bottom: 14px;
        color: var(--text);
        font-size: 13px;
        line-height: 1.6;
    }
    .crf-desc:empty { display: none; }

    /* Summary tiles (วันนี้ / เดือนนี้) */
    .crf-summary {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-bottom: 14px;
    }
    .crf-tile {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 14px;
        padding: 14px 16px;
    }
    .crf-tile .lbl {
        font-size: 12px;
        color: var(--text-muted);
        display: flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 6px;
    }
    .crf-tile.is-day .lbl i    { color: var(--accent); }
    .crf-tile.is-month .lbl i  { color: #60a5fa; }
    .crf-tile .val {
        font-size: 20px;
        font-weight: 800;
        color: var(--green);
        line-height: 1.1;
        letter-spacing: .02em;
    }
    .crf-tile .val small {
        font-size: 12px;
        color: var(--text-muted);
        font-weight: 500;
        margin-left: 4px;
    }

    /* Table card */
    .crf-card {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 14px;
        padding: 12px;
        margin-bottom: 14px;
    }
    .crf-card-head {
        display: flex;
        align-items: center;
        gap: 8px;
        font-weight: 800;
        font-size: 14px;
        color: var(--accent);
        padding: 4px 6px 10px;
        border-bottom: 1px solid var(--border);
        margin-bottom: 8px;
    }

    .crf-table-wrap { overflow-x: auto; }
    .crf-table {
        width: 100%;
        min-width: 620px;
        border-collapse: separate;
        border-spacing: 0;
        font-size: 12px;
        color: var(--text);
    }
    .crf-table th {
        padding: 9px 8px;
        font-weight: 700;
        color: var(--text-muted);
        text-align: center;
        background: rgba(255,255,255,.03);
        border-bottom: 1px solid var(--border);
        white-space: nowrap;
    }
    .crf-table th.col-day   { background: rgba(245,184,32,.10); color: var(--accent); }
    .crf-table th.col-month { background: rgba(96,165,250,.10); color: #60a5fa; }
    .crf-table th.col-sub-day   { background: rgba(245,184,32,.05); color: var(--accent); font-size: 11px; }
    .crf-table th.col-sub-month { background: rgba(96,165,250,.05); color: #60a5fa; font-size: 11px; }

    .crf-table td {
        padding: 10px 8px;
        text-align: center;
        border-bottom: 1px dashed var(--border);
        white-space: nowrap;
    }
    .crf-table td.col-name {
        text-align: left;
        font-weight: 600;
        color: var(--text);
        padding-left: 14px;
    }
    .crf-table td.col-day   { background: rgba(245,184,32,.04); }
    .crf-table td.col-month { background: rgba(96,165,250,.04); }
    .crf-table .sub {
        display: block;
        font-size: 10px;
        color: var(--text-muted);
        font-weight: 500;
    }
    .crf-table .v       { font-weight: 700; color: var(--text); }
    .crf-table .v.r     { color: var(--green); }
    .crf-table .v.is-profit { color: var(--red); }

    .crf-section-head {
        padding: 8px 14px;
        background: rgba(255,255,255,.04);
        color: var(--text-muted);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .03em;
    }

    .crf-pct {
        display: inline-block;
        background: rgba(34,197,94,.18);
        color: var(--green);
        border: 1px solid rgba(34,197,94,.4);
        padding: 3px 10px;
        border-radius: 999px;
        font-weight: 800;
        font-size: 11px;
    }

    .crf-table tfoot td {
        background: rgba(34,197,94,.08);
        border-top: 1px solid rgba(34,197,94,.3);
        border-bottom: 0;
    }
    .crf-table tfoot td.col-name { color: var(--green); font-weight: 800; }
    .crf-table tfoot td .v.r     { color: var(--green); font-weight: 800; }

    .crf-empty {
        text-align: center;
        padding: 32px 14px;
        color: var(--text-muted);
        font-size: 13px;
    }
    .crf-empty i { display: block; font-size: 30px; margin-bottom: 6px; }

/* ─────────────────────────────────────────────────── */
/* FILE: panel/result.php */
/* ─────────────────────────────────────────────────── */


    /* ═══ Classic — Result (รอบเดี่ยว) ═══ */
    .crs-toolbar {
        display: flex;
        align-items: center;
        gap: 12px;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 10px 14px;
        margin-bottom: 14px;
        margin-top: 10px;
    }
    .crs-back {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: var(--text);
        text-decoration: none;
        font-size: 13px;
        font-weight: 600;
        padding: 6px 10px;
        border-radius: 8px;
        background: rgba(255,255,255,.05);
        border: 1px solid var(--border);
    }
    .crs-back:hover { background: rgba(255,255,255,.12); }
    .crs-toolbar-title {
        flex: 1;
        font-weight: 800;
        font-size: 15px;
        letter-spacing: .03em;
    }

    /* Result box */
    .crs-box {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 14px;
        overflow: hidden;
        margin-bottom: 14px;
    }
    .crs-title {
        padding: 12px 14px;
        text-align: center;
        font-weight: 800;
        font-size: 15px;
        color: #fff;
        text-shadow: 0 1px 3px rgba(0,0,0,.35);
        line-height: 1.35;
        letter-spacing: .02em;
    }
    .crs-title .round {
        display: block;
        margin-top: 2px;
        font-size: 13px;
        font-weight: 600;
        opacity: .92;
    }

    /* Big middle (single jackpot / no jackpot 3 ตัวบน) */
    .crs-mid {
        padding: 18px 12px 16px;
        text-align: center;
        border-bottom: 1px solid var(--border);
    }
    .crs-mid .lbl {
        font-size: 12px;
        color: var(--text-muted);
        margin-bottom: 6px;
    }
    .crs-mid .num {
        font-size: 30px;
        font-weight: 800;
        color: var(--accent);
        letter-spacing: .06em;
    }
    .crs-mid .num.pending { color: var(--text-muted); letter-spacing: .12em; }

    /* Row of cells */
    .crs-row {
        display: grid;
        border-top: 1px solid var(--border);
    }
    .crs-row.cols-2 { grid-template-columns: 1fr 1fr; }
    .crs-row.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
    .crs-box .crs-row:first-of-type { border-top: 0; }

    .crs-cell {
        padding: 14px 8px;
        text-align: center;
        border-right: 1px solid var(--border);
    }
    .crs-cell:last-child { border-right: 0; }
    .crs-cell .lbl {
        font-size: 12px;
        color: var(--text-muted);
        margin-bottom: 4px;
    }
    .crs-cell .num {
        font-size: 22px;
        font-weight: 800;
        color: var(--accent);
        letter-spacing: .04em;
    }
    .crs-cell .num.pending { color: var(--text-muted); letter-spacing: .12em; }

    .crs-empty {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 14px;
        padding: 36px 14px;
        text-align: center;
        color: var(--text-muted);
        font-size: 13px;
    }
    .crs-empty i { display: block; font-size: 32px; margin-bottom: 6px; color: var(--accent); }

/* ─────────────────────────────────────────────────── */
/* FILE: panel/results.php */
/* ─────────────────────────────────────────────────── */


    /* ═══ Classic — Results ═══ */
    .cres-toolbar {
        display: flex;
        align-items: center;
        gap: 12px;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 10px 14px;
        margin-bottom: 14px;
         margin-top: 10px;
    }
    .cres-back {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: var(--text);
        text-decoration: none;
        font-size: 13px;
        font-weight: 600;
        padding: 6px 10px;
        border-radius: 8px;
        background: rgba(255,255,255,.05);
        border: 1px solid var(--border);
    }
    .cres-back:hover { background: rgba(255,255,255,.12); }
    .cres-toolbar-title {
        flex: 1;
        font-weight: 800;
        font-size: 15px;
        letter-spacing: .03em;
    }

    /* Filter card */
    .cres-filter {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 14px;
        padding: 14px;
        margin-bottom: 14px;
        display: grid;
        grid-template-columns: 160px 1fr;
        gap: 10px;
    }
    @media (max-width: 480px) {
        .cres-filter { grid-template-columns: 1fr 1fr; }
    }
    .cres-filter label {
        display: block;
        font-size: 12px;
        color: var(--text-muted);
        margin-bottom: 5px;
    }
    .cres-filter label i { color: var(--accent); margin-right: 4px; }
    .cres-filter input[type="date"],
    .cres-filter select {
        width: 100%;
        background: rgba(255,255,255,.04);
        border: 1px solid var(--border);
        color: var(--text);
        font-family: 'Kanit', sans-serif;
        font-size: 13.5px;
        padding: 9px 11px;
        border-radius: 9px;
        outline: none;
        transition: border-color .15s;
    }
    .cres-filter input[type="date"]:focus,
    .cres-filter select:focus { border-color: rgba(245,184,32,.5); }
    .cres-filter input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(.7); cursor: pointer; }
    .cres-filter select option { background: var(--bg-card-2); color: var(--text); }

    .cres-empty {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 20px;
        text-align: center;
        color: var(--text-muted);
        font-size: 13px;
        margin-bottom: 12px;
    }
    .cres-empty i { color: var(--accent); margin-right: 4px; }

    /* Result box */
    .cres-box {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 14px;
        overflow: hidden;
        margin-bottom: 12px;
    }
    .cres-cat-head {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 9px 14px;
        color: #fff;
        text-shadow: 0 1px 3px rgba(0,0,0,.35);
    }
    .cres-cat-head i { font-size: 14px; }
    .cres-cat-name {
        flex: 1;
        font-weight: 800;
        font-size: 14px;
        letter-spacing: .02em;
    }
    .cres-cat-date {
        background: rgba(255,255,255,.22);
        color: #fff;
        font-size: 11px;
        font-weight: 600;
        padding: 2px 8px;
        border-radius: 999px;
    }

    .cres-past-note {
        text-align: center;
        font-size: 12px;
        color: #f87171;
        padding: 8px 6px 2px;
    }
    .cres-sub-title {
        text-align: center;
        font-size: 12px;
        color: var(--text-muted);
        padding: 10px 0 4px;
    }
    .cres-no-result {
        color: var(--text-muted);
        font-size: 13px;
        padding: 12px 0;
    }

    /* Jackpot digits */
    .cres-gov-thai { padding: 12px 14px 14px; }
    .cres-gov-bank { background: var(--bg-card-2); border-top: 1px solid var(--border); }
    .cres-gov-foreign { background: var(--bg-card-2); border-top: 1px solid var(--border); }

    .cres-jackpot {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 6px;
        padding: 10px 12px 14px;
    }
    .cres-jackpot.small { gap: 4px; padding: 8px 12px 4px; }

    .cres-digit {
        min-width: 32px;
        text-align: center;
        background: rgba(255,255,255,.06);
        border: 1px solid var(--border);
        border-radius: 6px;
        padding: 6px 8px;
        font-size: 18px;
        font-weight: 800;
        color: var(--accent);
    }
    .cres-digit.big {
        min-width: 36px;
        font-size: 20px;
    }

    /* Rows of cells (3 / 2 ตัว ฯลฯ) */
    .cres-row3 {
        display: grid;
        grid-template-columns: 1fr 2fr 1fr;
        border-top: 1px solid var(--border);
    }
    .cres-row3.cres-row3-bank {
        grid-template-columns: 1fr 1fr 1fr;
    }
    .cres-row2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        border-top: 1px solid var(--border);
    }
    .cres-cell {
        padding: 10px 8px;
        text-align: center;
        border-right: 1px solid var(--border);
    }
    .cres-cell:last-child { border-right: 0; }
    .cres-lbl {
        font-size: 12px;
        color: var(--text-muted);
        margin-bottom: 4px;
    }
    .cres-num {
        font-size: 17px;
        font-weight: 800;
        color: var(--accent);
        letter-spacing: .02em;
    }

    /* Bank head (baac / gsb) */
    .cres-bank-head {
        padding: 10px 14px 6px;
        background: linear-gradient(180deg, color-mix(in srgb, var(--box-color) 14%, transparent), transparent);
    }
    .cres-bank-name {
        font-weight: 800;
        font-size: 14px;
        color: var(--box-color);
    }
    .cres-bank-date {
        font-size: 11px;
        color: var(--box-color);
        margin-top: 2px;
    }
    .cres-bank-date.is-past { color: #f87171; }

    /* Foreign head (compact) */
    .cres-foreign-head {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 7px 14px;
        background: color-mix(in srgb, var(--box-color) 14%, transparent);
    }
    .cres-foreign-name {
        flex: 1;
        font-weight: 700;
        font-size: 13px;
        color: var(--box-color);
    }
    .cres-badge {
        background: var(--box-color);
        color: #fff;
        font-size: 10px;
        font-weight: 700;
        padding: 2px 8px;
        border-radius: 999px;
    }
    .cres-badge.is-past { background: var(--text-muted); }

    /* Table layout (≥3 gens, non-gov) */
    .cres-table-wrap {
        overflow-x: auto;
        border-top: 1px solid var(--border);
    }
    .cres-table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        font-size: 12.5px;
        min-width: 460px;
    }
    .cres-table thead th {
        background: rgba(255,255,255,.04);
        color: var(--text-muted);
        font-weight: 700;
        padding: 9px 8px;
        text-align: center;
        border-bottom: 1px solid var(--border);
        white-space: nowrap;
    }
    .cres-table thead th.col-name { text-align: left; padding-left: 14px; }
    .cres-table tbody td {
        padding: 10px 8px;
        text-align: center;
        border-bottom: 1px dashed var(--border);
        font-weight: 700;
        color: var(--text);
    }
    .cres-table tbody td.col-name { text-align: left; padding-left: 14px; font-weight: 700; }
    .cres-table tbody tr:last-child td { border-bottom: 0; }
    .cres-row-past {
        font-size: 10.5px;
        color: var(--accent);
        font-weight: 500;
        margin-top: 2px;
    }

    /* Col grid layout (1-2 gens, non-gov) */
    .cres-cols-grid {
        display: grid;
        border-top: 1px solid var(--border);
    }
    .cres-col {
        padding: 12px 6px 10px;
        text-align: center;
        border-right: 1px solid var(--border);
    }
    .cres-col:last-child { border-right: 0; }
    .cres-col-name {
        font-weight: 800;
        font-size: 15px;
        color: var(--green);
        margin-bottom: 4px;
    }
    .cres-col-past {
        font-size: 11px;
        color: var(--text-muted);
        margin-bottom: 6px;
    }

    .cres-loading { opacity: .4; pointer-events: none; transition: opacity .15s; }

/* ─────────────────────────────────────────────────── */
/* FILE: panel/streak_deposit.php */
/* ─────────────────────────────────────────────────── */


    /* ═══ Classic — Streak Deposit ═══ */
    .csd-toolbar {
        display: flex;
        align-items: center;
        gap: 12px;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 10px 14px;
        margin-bottom: 14px;
        margin-top: 10px;
    }
    .csd-back {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: var(--text);
        text-decoration: none;
        font-size: 13px;
        font-weight: 600;
        padding: 6px 10px;
        border-radius: 8px;
        background: rgba(255,255,255,.05);
        border: 1px solid var(--border);
    }
    .csd-back:hover { background: rgba(255,255,255,.12); }
    .csd-toolbar-title {
        flex: 1;
        font-weight: 800;
        font-size: 15px;
        letter-spacing: .03em;
    }

    /* Streak hero */
    .csd-hero {
        background:
            radial-gradient(circle at 50% 0%, rgba(239,68,68,.18), transparent 65%),
            var(--bg-card);
        border: 1px solid rgba(239,68,68,.32);
        border-radius: 16px;
        padding: 20px 18px;
        margin-bottom: 14px;
        text-align: center;
    }
    .csd-hero .fire {
        font-size: 32px;
        color: #f97316;
        filter: drop-shadow(0 4px 10px rgba(249,115,22,.5));
        margin-bottom: 6px;
    }
    .csd-hero .count {
        font-size: 36px;
        font-weight: 800;
        color: var(--red);
        line-height: 1.1;
    }
    .csd-hero .count small {
        font-size: 15px;
        color: var(--text-muted);
        font-weight: 500;
        margin-left: 6px;
    }
    .csd-hero .lbl {
        margin-top: 4px;
        color: var(--text-muted);
        font-size: 13px;
    }
    .csd-progress {
        position: relative;
        background: var(--bg-card-3);
        border: 1px solid var(--border);
        border-radius: 999px;
        height: 14px;
        overflow: hidden;
        margin-top: 12px;
    }
    .csd-progress > .bar {
        height: 100%;
        background: linear-gradient(90deg, #ef4444, #f97316);
        transition: width .35s ease;
        border-radius: 999px;
    }

    /* Tip */
    .csd-tip {
        background: rgba(96,165,250,.08);
        border: 1px solid rgba(96,165,250,.3);
        border-radius: 12px;
        padding: 11px 14px;
        margin-bottom: 14px;
        font-size: 12.5px;
        color: var(--text);
        line-height: 1.6;
    }
    .csd-tip i { color: #60a5fa; margin-right: 4px; }
    .csd-tip b { color: var(--accent); font-weight: 700; }

    /* Grid */
    .csd-card {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 14px;
        padding: 14px;
        margin-bottom: 14px;
    }
    .csd-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
    }
    @media (max-width: 420px) {
        .csd-grid { grid-template-columns: repeat(3, 1fr); }
    }

    .csd-day {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        padding: 12px 6px;
        border-radius: 12px;
        border: 1px solid var(--border);
        background: var(--bg-card-2);
        color: var(--text-muted);
        font-size: 12px;
        transition: all .2s;
    }
    .csd-day .icon { font-size: 22px; line-height: 1; }
    .csd-day .num {
        font-size: 13px;
        font-weight: 700;
        color: var(--text);
        line-height: 1;
        margin-top: 2px;
    }
    .csd-day .date {
        font-size: 10px;
        opacity: .75;
    }
    .csd-day.deposited {
        background: rgba(34,197,94,.10);
        border-color: rgba(34,197,94,.5);
        color: var(--green);
    }
    .csd-day.deposited .num { color: var(--green); }
    .csd-day.today-active {
        background: rgba(96,165,250,.10);
        border-color: rgba(96,165,250,.5);
        color: #60a5fa;
        box-shadow: 0 0 18px rgba(96,165,250,.18);
    }
    .csd-day.today-active .num { color: #60a5fa; }

    .csd-day.reward {
        grid-column: 1 / -1;
        flex-direction: row;
        justify-content: space-between;
        padding: 14px 18px;
        background: linear-gradient(135deg, rgba(245,184,32,.14), rgba(245,184,32,.04));
        border-color: rgba(245,184,32,.5);
        color: var(--accent);
    }
    .csd-day.reward .num { color: var(--accent); font-size: 14px; }
    .csd-day.reward.deposited {
        background: linear-gradient(135deg, rgba(34,197,94,.16), rgba(245,184,32,.06));
        border-color: rgba(34,197,94,.5);
    }
    .csd-day .bonus {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: 11px;
        font-weight: 700;
        color: var(--accent);
        background: rgba(245,184,32,.18);
        padding: 4px 10px;
        border-radius: 999px;
        border: 1px solid rgba(245,184,32,.35);
    }

    /* Claim button */
    .csd-btn {
        width: 100%;
        padding: 14px 0;
        font-size: 15px;
        font-weight: 800;
        letter-spacing: .03em;
        border-radius: 12px;
        border: 0;
        cursor: pointer;
        transition: transform .1s, box-shadow .2s, opacity .2s;
        background: linear-gradient(135deg, var(--accent), var(--accent-2));
        color: #1a1d24;
        box-shadow: 0 8px 20px rgba(245,184,32,.4);
    }
    .csd-btn:hover:not(:disabled) {
        box-shadow: 0 10px 26px rgba(245,184,32,.55);
        color: #1a1d24;
    }
    .csd-btn:active { transform: scale(.98); }
    .csd-btn:disabled {
        background: rgba(255,255,255,.05);
        color: var(--text-muted);
        cursor: not-allowed;
        box-shadow: none;
        border: 1px solid var(--border);
    }

/* ─────────────────────────────────────────────────── */
/* FILE: panel/tang.php */
/* ─────────────────────────────────────────────────── */


    .lotto-titlebar {
        padding: 12px 14px;
        border-radius: 14px;
        border: 1px solid var(--bs-border-color);
        background: color-mix(in srgb,
                var(--bs-body-bg) 92%,
                var(--bs-body-color) 8%);
    }

    .lotto-title-ico {
        width: 38px;
        height: 38px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--bs-border-color);
        background: rgba(13, 110, 253, 0.1);
        color: #0d6efd;
    }

    .lotto-title {
        font-weight: 900;
        letter-spacing: -0.2px;
    }

    .lotto-sub {
        font-size: 12px;
        color: var(--bs-secondary-color);
        font-weight: 600;
    }

    .betting-tabs {
        display: flex;
        gap: 8px;
    }

    .bet-tab {
        flex: 1;
        padding: 10px;
        border: none;
        border-radius: 8px;
        background: #1e2a38;
        color: #aaa;
        font-size: 14px;
        cursor: pointer;
        transition: all 0.2s;
    }

    .bet-tab.active {
        background: #f0a500;
        color: #000;
        font-weight: bold;
    }

    /* Dream panel */
    .dream-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 10px;
        max-height: 420px;
        overflow-y: auto;
        margin-top: 8px;
    }

    .dream-card {
        background: #1e2a38;
        border-radius: 10px;
        overflow: hidden;
        cursor: pointer;
        border: 2px solid transparent;
        transition: all 0.2s;
    }

    .dream-card:hover {
        border-color: #f0a500;
    }

    .dream-card.selected {
        border-color: #f0a500;
        background: #2a3a10;
    }

    .dream-img {
        width: 100%;
        height: 80px;
        object-fit: cover;
    }

    .dream-img-placeholder {
        width: 100%;
        height: 80px;
        background: #0d1b2a;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28px;
        color: #f0a500;
    }

    .dream-body {
        padding: 8px;
    }

    .dream-keyword {
        font-weight: bold;
        color: #fff;
        font-size: 14px;
    }

    .dream-desc {
        font-size: 11px;
        color: #aaa;
        margin: 3px 0;
        line-height: 1.3;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .dream-nums {
        display: flex;
        gap: 4px;
        margin-top: 4px;
        flex-wrap: wrap;
    }

    .dream-num {
        font-size: 11px;
        padding: 2px 6px;
        border-radius: 4px;
    }

    .dream-num.top {
        background: #c8a200;
        color: #000;
    }

    .dream-num.bottom {
        background: #2a4a6a;
        color: #fff;
    }

    /* เลขที่เลือกได้ใน dream panel */
    .dream-num-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-top: 10px;
    }

    .dream-chip {
        padding: 5px 12px;
        border-radius: 20px;
        background: #1e2a38;
        color: #ccc;
        font-size: 13px;
        cursor: pointer;
        border: 1px solid #444;
        transition: all 0.15s;
    }

    .dream-chip:hover {
        border-color: #f0a500;
        color: #f0a500;
    }

    .dream-chip.picked {
        background: #f0a500;
        color: #000;
        font-weight: bold;
        border-color: #f0a500;
    }

    .betting-wrapper {
        display: grid;
        grid-template-columns: 1fr;
        gap: 15px;
    }

    @media (min-width: 992px) {
        .betting-wrapper {
            grid-template-columns: 1.2fr 0.8fr;
        }
    }

    .type-selector {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        margin-bottom: 15px;
    }

    .extra-options {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-bottom: 15px;
    }

    .opt-chip {
        background: #384781;
        border: 1px solid #edd70f;
        color: #ddd;
        padding: 5px 12px;
        border-radius: 20px;
        font-size: 12px;
        cursor: pointer;
    }

    .opt-chip.active {
        background: #f3d078;
        color: #000;
        border-color: #f3d078;
    }

    .display-screen {
        background: #000;
        border: 2px solid #444;
        border-radius: 12px;
        padding: 20px;
        text-align: center;
        margin-bottom: 15px;
    }

    .numpad {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        max-width: 350px;
        margin: 0 auto;
    }

    .btn-num {
        background: linear-gradient(180deg, #444, #222);
        border: 1px solid #555;
        color: #fff;
        font-size: 24px;
        padding: 15px 0;
        border-radius: 10px;
        box-shadow: 0 4px 0 #000;
    }

    .btn-num:active {
        transform: translateY(2px);
        box-shadow: 0 2px 0 #000;
    }

    .btn-num.del {
        background: #600;
    }

    .btn-num.submit {
        background: linear-gradient(180deg, #28a745, #1e7e34);
        grid-column: span 2;
    }

    .bet-cart {
        background: #1a1a1a;
        border-radius: 10px;
        border: 1px solid var(--border-color);
        display: flex;
        flex-direction: column;
        height: 100%;
        min-height: 400px;
    }

    .cart-list {
        flex-grow: 1;
        overflow-y: auto;
        padding: 10px;
        max-height: 500px;
    }

    .cart-item {
        background: #2a2a2a;
        margin-bottom: 5px;
        padding: 8px 12px;
        border-radius: 5px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    /* btn-type */
    .btn-type {
        background: #384781;
        border: 1px solid #edd70f;
        color: #fff;
        padding: 10px 5px;
        border-radius: 8px;
        font-size: 13px;
        transition: 0.3s;
        user-select: none;
    }

    .btn-type.active {
        background: linear-gradient(180deg, #c48e31, #f3d078);
        color: #000;
        border-color: #f3d078;
        font-weight: bold;
        box-shadow: 0 0 0 2px rgba(243, 208, 120, 0.55) inset;
    }

    /* num-slot */
    .num-slot {
        display: inline-block;
        width: 45px;
        height: 55px;
        line-height: 55px;
        background: #fff;
        color: #d40000;
        font-size: 32px;
        font-weight: bold;
        border-radius: 5px;
        margin: 0 5px;
        vertical-align: middle;
    }

    .num-slot.empty {
        color: transparent;
    }

    /* pill buttons */
    .pill-btn-rate,
    .pill-btn-rules {
        border-radius: 50px;
        padding: 4px 16px;
        font-size: 14px;
        font-weight: 600;
        border: 1px solid transparent;
        background: rgba(255, 255, 255, .05);
        transition: all .2s;
        cursor: pointer;
    }

    .pill-btn-rate {
        color: #e9e9e9;
        border-color: rgba(255, 77, 79, .4);
        background: rgb(103 4 4 / 93%);
    }

    .pill-btn-rate:hover {
        background: #ff4d4f;
        color: #fff;
        box-shadow: 0 0 10px rgba(255, 77, 79, .5);
    }

    .pill-btn-rules {
        color: #f2f3f5;
        border-color: rgba(13, 110, 253, .4);
        background: rgb(9 46 101 / 98%);
    }

    .pill-btn-rules:hover {
        background: #0d6efd;
        color: #fff;
        box-shadow: 0 0 10px rgba(13, 110, 253, .5);
    }

    .pill-btn-rate:active,
    .pill-btn-rules:active {
        transform: scale(.96);
    }

    /* #pullSlipModal */
    #pullSlipModal .modal-title {
        font-size: 18px;
    }

    #pullSlipModal table {
        table-layout: auto;
        width: 100%;
    }

    #pullSlipModal .table thead th {
        font-size: 13px;
        font-weight: 600;
        color: #ccc;
    }

    #pullSlipModal .table tbody td {
        font-size: 14px;
    }

    #pullSlipModal .btnUseSlip {
        font-size: 12px;
        padding: 4px 10px;
    }

    #pullSlipModal .modal-footer .btn {
        font-size: 14px;
    }

    #pullSlipModal .table tbody tr {
        border-bottom: 1px solid rgba(255, 255, 255, .08);
    }

    #pullSlipModal .table tbody tr:last-child {
        border-bottom: none;
    }

    /* #sendSlipModal */
    #sendSlipModal .slip-modal {
        background: #1f242a;
        color: #e5e7eb;
        border: 1px solid rgba(255, 255, 255, .1);
        border-radius: 14px;
    }

    #sendSlipModal .modal-header,
    #sendSlipModal .modal-footer {
        border-color: rgba(255, 255, 255, .1);
    }

    #sendSlipModal .modal-title {
        color: #ffd45a;
    }

    #sendSlipModal .btn-close {
        filter: invert(1);
        opacity: .75;
    }

    #sendSlipModal .btn-close:hover {
        opacity: 1;
    }

    #sendSlipModal .table {
        color: #e5e7eb;
        --bs-table-bg: transparent;
        --bs-table-border-color: rgba(255, 255, 255, .12);
    }

    #sendSlipModal .table thead th {
        color: #ffd45a;
        font-weight: 900;
        letter-spacing: .02em;
        border-bottom-color: rgba(255, 255, 255, .14);
    }

    #sendSlipModal .table td {
        border-top-color: rgba(255, 255, 255, .1);
    }

    #sendSlipModal .slip-section-title {
        color: #ffd45a;
        font-weight: 900;
        font-size: 18px;
        margin: 10px 0 8px;
    }

    #sendSlipModal .price-input {
        max-width: 96px;
        margin: 0 auto;
        border-radius: 8px;
        background: #fff;
        color: #111;
        font-weight: 800;
        text-align: center;
    }

    #sendSlipModal .btn-del {
        width: 38px;
        height: 38px;
        border-radius: 999px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    #sendSlipModal .js-quick-price {
        border-radius: 8px;
        font-weight: 900;
    }

    #sendSlipModal .slip-summary {
        padding: 12px;
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, .1);
        background: rgba(0, 0, 0, .18);
    }

    #sendSlipModal .qty-control {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    #sendSlipModal .qc-btn {
        width: 40px;
        height: 34px;
        border-radius: 8px;
        border: 0;
        background: #f59e0b;
        color: #111;
        font-weight: 900;
    }

    #sendSlipModal .slip-scroll-bottom {
        position: absolute;
        right: 14px;
        bottom: 140px;
        z-index: 5;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        border: none;
        background: rgba(40, 167, 69, .95);
        color: #fff;
        font-size: 18px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
        display: none;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: opacity .15s ease;
    }
    #sendSlipModal .slip-scroll-bottom:hover { background: rgba(33, 136, 56, 1); }
    #sendSlipModal .slip-scroll-bottom.show { display: flex; }

    #sendSlipModal .modal-footer .btn {
        font-weight: 900;
        border-radius: 10px;
    }

    #sendSlipModal .table tbody td:first-child,
    #sendSlipModal .table tbody td:nth-child(2) {
        color: #fff;
        font-weight: 800;
    }

    /* ═══ Classic theme — overrides ═══ */
    .ctg-wrap {
        font-family: 'Kanit', sans-serif;
    }

    /* Classic-style toolbar (เหมือนหน้าอื่น) */
    .ctg-toolbar {
        display: flex;
        align-items: center;
        gap: 12px;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 10px 14px;
        margin-bottom: 14px;
         margin-top: 10px;
    }
    .ctg-back {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: var(--text) !important;
        text-decoration: none;
        font-size: 13px;
        font-weight: 600;
        padding: 6px 10px;
        border-radius: 8px;
        background: rgba(255,255,255,.05);
        border: 1px solid var(--border);
    }
    .ctg-back:hover { background: rgba(255,255,255,.12); }
    .ctg-toolbar-title {
        flex: 1;
        font-weight: 800;
        font-size: 15px;
        letter-spacing: .03em;
        color: var(--text);
    }
    .ctg-toolbar-actions {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
    }
    @media (max-width: 480px) {
        .ctg-toolbar { flex-wrap: wrap; }
        .ctg-toolbar-title { order: 3; flex-basis: 100%; padding-top: 6px; border-top: 1px dashed var(--border); margin-top: 4px; }
    }

    /* main section card */
    .ctg-wrap > section.bg-white.card-dark {
        background: var(--bg-card) !important;
        border: 1px solid var(--border) !important;
        border-radius: 14px;
        overflow: hidden;
        color: var(--text);
    }
    /* legacy card-hd (เผื่อมีบาง template ยังใช้) */
    .ctg-wrap .card-hd {
        background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)) !important;
        border-bottom: 1px solid var(--border) !important;
        padding: 12px 14px !important;
        color: var(--text);
    }
    .ctg-wrap .card-hd .fw-bold { color: var(--text); }

    /* Pill buttons (อัตราจ่าย / กติกา) */
    .ctg-wrap .pill-btn-rate,
    .ctg-wrap .pill-btn-rules {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 0;
        font-weight: 800;
        font-size: 12px;
        padding: 7px 14px;
        border-radius: 999px;
        cursor: pointer;
        line-height: 1;
        transition: transform .1s, box-shadow .2s;
    }
    .ctg-wrap .pill-btn-rate {
        background: linear-gradient(135deg, var(--accent), var(--accent-2));
        color: #1a1d24 !important;
        box-shadow: 0 4px 10px rgba(245,184,32,.3);
    }
    .ctg-wrap .pill-btn-rate:hover  { box-shadow: 0 6px 14px rgba(245,184,32,.45); }
    .ctg-wrap .pill-btn-rules {
        background: rgba(255,255,255,.06);
        color: var(--text) !important;
        border: 1px solid var(--border);
    }
    .ctg-wrap .pill-btn-rules:hover { background: rgba(255,255,255,.12); }
    .ctg-wrap .pill-btn-rate:active,
    .ctg-wrap .pill-btn-rules:active { transform: scale(.96); }

    /* Lotto titlebar */
    .ctg-wrap .lotto-titlebar {
        background: var(--bg-card-2) !important;
        border: 1px solid var(--border) !important;
        border-radius: 12px;
        color: var(--text);
    }
    .ctg-wrap .lotto-title-ico {
        background: rgba(245,184,32,.14) !important;
        border-color: rgba(245,184,32,.4) !important;
        color: var(--accent) !important;
    }
    .ctg-wrap .lotto-title { color: var(--text) !important; }
    .ctg-wrap .lotto-sub   { color: var(--text-muted) !important; }

    /* Tabs */
    .ctg-wrap .bet-tab {
        background: var(--bg-card-2);
        color: var(--text-muted);
        border: 1px solid var(--border);
        font-weight: 700;
    }
    .ctg-wrap .bet-tab.active {
        background: linear-gradient(135deg, var(--accent), var(--accent-2)) !important;
        color: #1a1d24 !important;
        border-color: var(--accent) !important;
        font-weight: 800;
        box-shadow: 0 6px 14px rgba(245,184,32,.3);
    }

    /* Generic section cards inside */
    .ctg-wrap section.bg-dark.card-dark,
    .ctg-wrap section.card-dark {
        background: var(--bg-card-2) !important;
        border: 1px solid var(--border) !important;
        border-radius: 12px;
        color: var(--text);
    }

    /* Dream panel — already dark, just tune to classic palette */
    .ctg-wrap .dream-card {
        background: var(--bg-card-2);
        border: 2px solid transparent;
    }
    .ctg-wrap .dream-card:hover   { border-color: var(--accent); }
    .ctg-wrap .dream-card.selected{ border-color: var(--accent); background: rgba(245,184,32,.08); }
    .ctg-wrap .dream-img-placeholder { background: var(--bg-card); color: var(--accent); }
    .ctg-wrap .dream-keyword { color: var(--text); }
    .ctg-wrap .dream-desc    { color: var(--text-muted); }
    .ctg-wrap .dream-num.top {
        background: linear-gradient(135deg, var(--accent), var(--accent-2));
        color: #1a1d24;
    }
    .ctg-wrap .dream-chip {
        background: var(--bg-card-2);
        color: var(--text);
        border: 1px solid var(--border);
    }
    .ctg-wrap .dream-chip:hover { border-color: var(--accent); color: var(--accent); }
    .ctg-wrap .dream-chip.picked {
        background: linear-gradient(135deg, var(--accent), var(--accent-2));
        color: #1a1d24;
        border-color: var(--accent);
    }

    /* Inputs / selects / textareas inside tang */
    .ctg-wrap .form-control,
    .ctg-wrap .form-select,
    .ctg-wrap input[type="text"]:not(.no-classic-style),
    .ctg-wrap input[type="number"]:not(.no-classic-style),
    .ctg-wrap textarea:not(.no-classic-style) {
        background: rgba(255,255,255,.04);
        border: 1px solid var(--border);
        color: var(--text);
        font-family: 'Kanit', sans-serif;
    }
    .ctg-wrap .form-control:focus,
    .ctg-wrap .form-select:focus {
        background: rgba(255,255,255,.06);
        border-color: rgba(245,184,32,.5);
        color: var(--text);
        box-shadow: 0 0 0 .15rem rgba(245,184,32,.18);
    }
    .ctg-wrap .form-control::placeholder { color: var(--text-muted); }
    .ctg-wrap .form-select option { background: var(--bg-card-2); color: var(--text); }
    .ctg-wrap label, .ctg-wrap .form-label { color: var(--text-muted); }

    /* Tables */
    .ctg-wrap table {
        --bs-table-bg: transparent;
        --bs-table-color: var(--text);
        --bs-table-striped-bg: rgba(255,255,255,.03);
        --bs-table-striped-color: var(--text);
        --bs-table-hover-bg: rgba(255,255,255,.05);
        --bs-table-hover-color: var(--text);
        --bs-table-border-color: var(--border);
        color: var(--text);
    }
    .ctg-wrap thead th,
    .ctg-wrap .table-light th { background: rgba(255,255,255,.04) !important; color: var(--text-muted) !important; border-color: var(--border) !important; }
    .ctg-wrap td, .ctg-wrap th { border-color: var(--border) !important; }

    /* Buttons (มี Bootstrap btn-* อยู่บนหน้า — ทำให้ใช้ palette classic) */
    .ctg-wrap .btn-success {
        background: linear-gradient(135deg, var(--green), var(--green-2));
        border-color: var(--green);
        color: #fff;
    }
    .ctg-wrap .btn-danger {
        background: linear-gradient(135deg, var(--red), var(--red-2));
        border-color: var(--red);
        color: #fff;
    }
    .ctg-wrap .btn-warning {
        background: linear-gradient(135deg, var(--accent), var(--accent-2));
        border-color: var(--accent);
        color: #1a1d24;
    }
    .ctg-wrap .btn-primary {
        background: linear-gradient(135deg, #60a5fa, #2563eb);
        border-color: #2563eb;
        color: #fff;
    }
    .ctg-wrap .btn-secondary, .ctg-wrap .btn-outline-secondary {
        background: rgba(255,255,255,.05);
        border-color: var(--border);
        color: var(--text);
    }
    .ctg-wrap .btn-outline-secondary:hover { background: rgba(255,255,255,.12); color: var(--text); }

/* ─────────────────────────────────────────────────── */
/* FILE: panel/wheel.php */
/* ─────────────────────────────────────────────────── */


    /* ═══ Classic — Wheel ═══ */
    .cwh-toolbar {
        display: flex;
        align-items: center;
        gap: 12px;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 10px 14px;
        margin-bottom: 14px;
        margin-top: 10px;
    }
    .cwh-back {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: var(--text);
        text-decoration: none;
        font-size: 13px;
        font-weight: 600;
        padding: 6px 10px;
        border-radius: 8px;
        background: rgba(255,255,255,.05);
        border: 1px solid var(--border);
    }
    .cwh-back:hover { background: rgba(255,255,255,.12); }
    .cwh-toolbar-title {
        flex: 1;
        font-weight: 800;
        font-size: 15px;
        letter-spacing: .03em;
    }

    .cwh-desc {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 14px;
        padding: 14px 16px;
        margin-bottom: 12px;
        color: var(--text);
        font-size: 13px;
        line-height: 1.6;
    }
    .cwh-desc:empty { display: none; }

    /* Ticket banner */
    .cwh-ticket {
        background: linear-gradient(135deg, rgba(245,184,32,.18), rgba(245,184,32,.04));
        border: 1px solid rgba(245,184,32,.4);
        border-radius: 14px;
        padding: 14px 18px;
        margin-bottom: 14px;
        text-align: center;
        font-weight: 800;
        font-size: 15px;
        color: var(--accent);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }
    .cwh-ticket i { font-size: 18px; }
    .cwh-ticket .num {
        background: rgba(0,0,0,.3);
        color: var(--accent);
        padding: 3px 12px;
        border-radius: 999px;
        font-weight: 800;
        margin: 0 4px;
        font-size: 15px;
    }

    /* Wheel scene */
    .cwh-scene {
        background:
            radial-gradient(circle at 50% 0%, rgba(245,184,32,.10), transparent 65%),
            var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 16px;
        padding: 26px 14px 22px;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 14px;
    }
    .cwh-outer {
        position: relative;
        width: 360px;
        height: 360px;
        max-width: 100%;
    }
    .cwh-pointer {
        position: absolute;
        top: -10px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 20;
        display: flex;
        flex-direction: column;
        align-items: center;
        filter: drop-shadow(0 4px 8px rgba(245,184,32,.45));
    }
    .cwh-pointer-ball {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: radial-gradient(circle at 40% 35%, #ffd54f, #b8860b);
        box-shadow: 0 0 12px rgba(245,184,32,.7);
    }
    .cwh-pointer-tri {
        width: 0;
        height: 0;
        margin-top: -2px;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 24px solid #d97706;
    }
    #cwh-canvas {
        position: absolute;
        top: 0;
        left: 0;
        max-width: 100%;
    }

    /* Spin button */
    .cwh-spin {
        margin-top: 22px;
        padding: 14px 56px;
        border-radius: 32px;
        border: 0;
        background: linear-gradient(180deg, #f5b820 0%, #d4a017 50%, #b8860b 100%);
        color: #1a1d24;
        font-size: 20px;
        font-weight: 900;
        letter-spacing: 4px;
        cursor: pointer;
        box-shadow:
            0 0 0 3px rgba(245,184,32,.3),
            0 0 0 5px #1a1d24,
            0 8px 22px rgba(245,184,32,.5);
        text-shadow: 0 1px 4px rgba(0,0,0,.4);
        transition: transform .1s, box-shadow .2s;
    }
    .cwh-spin:hover:not(:disabled) {
        box-shadow:
            0 0 0 3px rgba(245,184,32,.45),
            0 0 0 5px #1a1d24,
            0 10px 28px rgba(245,184,32,.65);
    }
    .cwh-spin:active { transform: scale(.97); }
    .cwh-spin:disabled { opacity: .5; cursor: not-allowed; }

    .cwh-result {
        margin-top: 12px;
        min-height: 22px;
        font-size: 16px;
        font-weight: 700;
        color: var(--accent);
        text-align: center;
        letter-spacing: .04em;
    }

    /* History */
    .cwh-his-card {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 14px;
        padding: 14px 16px;
        margin-bottom: 14px;
    }
    .cwh-his-title {
        display: flex;
        align-items: center;
        gap: 8px;
        font-weight: 800;
        font-size: 14px;
        color: var(--accent);
        padding-bottom: 10px;
        margin-bottom: 8px;
        border-bottom: 1px solid var(--border);
    }
    .cwh-his-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 12.5px;
    }
    .cwh-his-table th {
        text-align: center;
        font-weight: 700;
        color: var(--text-muted);
        padding: 8px 4px;
        border-bottom: 1px dashed var(--border);
    }
    .cwh-his-table td {
        text-align: center;
        padding: 9px 4px;
        border-bottom: 1px dashed var(--border);
        color: var(--text);
    }
    .cwh-his-table tr:last-child td { border-bottom: 0; }
    .cwh-his-table .amt {
        color: var(--green);
        font-weight: 700;
    }
    .cwh-his-empty {
        text-align: center;
        padding: 24px;
        color: var(--text-muted);
        font-size: 13px;
    }
    .cwh-his-empty i { display: block; font-size: 28px; margin-bottom: 6px; }

/* ─────────────────────────────────────────────────── */
/* FILE: panel/withdraw.php */
/* ─────────────────────────────────────────────────── */


    /* ═══ Classic — Withdraw ═══ */
    .cw-toolbar {
        display: flex;
        align-items: center;
        gap: 12px;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 10px 14px;
        margin-bottom: 14px;
         margin-top: 10px;
    }
    .cw-back {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: var(--text);
        text-decoration: none;
        font-size: 13px;
        font-weight: 600;
        padding: 6px 10px;
        border-radius: 8px;
        background: rgba(255,255,255,.05);
        border: 1px solid var(--border);
    }
    .cw-back:hover { background: rgba(255,255,255,.12); }
    .cw-toolbar-title {
        flex: 1;
        font-weight: 800;
        font-size: 15px;
        letter-spacing: .03em;
    }

    /* Limit info box */
    .cw-limit-box {
        background: linear-gradient(135deg, rgba(167,139,250,.10), rgba(167,139,250,.04));
        border: 1px solid rgba(167,139,250,.35);
        border-radius: 12px;
        padding: 14px 16px;
        margin-bottom: 12px;
    }
    .cw-limit-list {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .cw-limit-list li {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 13px;
    }
    .cw-limit-list li > i {
        color: #a78bfa;
        font-size: 14px;
        flex-shrink: 0;
    }
    .cw-limit-list .lbl  { flex: 1; color: var(--text); font-weight: 500; }
    .cw-limit-list .val  {
        background: linear-gradient(135deg, var(--accent), var(--accent-2));
        color: #1a1d24;
        font-size: 12px;
        font-weight: 800;
        padding: 3px 10px;
        border-radius: 6px;
        white-space: nowrap;
    }

    /* Custom alert (HTML จากแอดมิน) */
    .cw-custom-alert {
        background: rgba(239,68,68,.10);
        border: 1px solid rgba(239,68,68,.3);
        border-radius: 12px;
        padding: 14px 16px;
        margin-bottom: 12px;
        color: var(--text);
        font-size: 13px;
        line-height: 1.6;
    }

    /* Bank card (account ของผู้ใช้) */
    .cw-bank-card {
        display: flex;
        align-items: center;
        gap: 14px;
        background: linear-gradient(135deg, rgba(34,197,94,.18), rgba(22,163,74,.08));
        border: 1px solid rgba(34,197,94,.4);
        border-radius: 14px;
        padding: 14px 16px;
        margin-bottom: 12px;
    }
    .cw-bank-logo {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        flex-shrink: 0;
        box-shadow: 0 4px 12px rgba(0,0,0,.3);
    }
    .cw-bank-logo img { width: 100%; height: 100%; object-fit: cover; }
    .cw-bank-logo i   { font-size: 26px; color: var(--green); }
    .cw-bank-info { line-height: 1.4; }
    .cw-bank-info .bn  { font-size: 12px; color: rgba(255,255,255,.7); }
    .cw-bank-info .acc { font-size: 20px; font-weight: 800; letter-spacing: 1px; color: var(--text); margin: 2px 0; }
    .cw-bank-info .ow  { font-size: 13px; color: rgba(255,255,255,.85); }

    /* Turn status (ติดเทิร์น) */
    .cw-turn-box {
        background: var(--bg-card);
        border: 1px solid rgba(245,184,32,.45);
        border-radius: 12px;
        padding: 14px 16px;
        margin-bottom: 12px;
    }
    .cw-turn-head {
        display: flex;
        align-items: center;
        gap: 8px;
        padding-bottom: 10px;
        margin-bottom: 8px;
        border-bottom: 1px solid var(--border);
    }
    .cw-turn-head i  { color: var(--accent); font-size: 16px; }
    .cw-turn-head .t { font-weight: 800; color: var(--accent); font-size: 14px; }

    .cw-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 5px 0;
        font-size: 12px;
    }
    .cw-row .lbl { color: var(--text-muted); }
    .cw-row .val { font-weight: 700; }
    .cw-row .val.ok    { color: var(--green); }
    .cw-row .val.warn  { color: var(--red); }
    .cw-row .val.info  { color: #a78bfa; }
    .cw-row .val.cyan  { color: #60a5fa; }

    .cw-progress {
        position: relative;
        background: var(--bg-card-3);
        border-radius: 8px;
        height: 18px;
        overflow: hidden;
        margin: 6px 0;
        border: 1px solid var(--border);
    }
    .cw-progress > .bar {
        height: 100%;
        background: linear-gradient(90deg, #f5b820, #f97316);
        transition: width .35s;
    }
    .cw-progress > .bar.is-clear { background: linear-gradient(90deg, #22c55e, #16a34a); }
    .cw-progress > .lbl {
        position: absolute; inset: 0;
        display: flex; align-items: center; justify-content: center;
        font-size: 11px;
        font-weight: 700;
        color: #fff;
        text-shadow: 0 1px 2px rgba(0,0,0,.6);
    }

    /* Amount input card */
    .cw-form-card {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 14px;
        padding: 18px;
        margin-bottom: 12px;
    }
    .cw-input-wrap {
        position: relative;
        margin-bottom: 8px;
    }
    .cw-input {
        width: 100%;
        background: var(--bg-card-2);
        border: 1px solid var(--red);
        border-radius: 12px;
        color: var(--red);
        font-family: inherit;
        font-size: 26px;
        font-weight: 800;
        padding: 14px 56px 14px 18px;
        text-align: center;
        outline: none;
        transition: background .15s, box-shadow .15s;
        -moz-appearance: textfield;
    }
    .cw-input::-webkit-outer-spin-button,
    .cw-input::-webkit-inner-spin-button {
        -webkit-appearance: none; margin: 0;
    }
    .cw-input::placeholder { color: var(--text-muted); font-size: 16px; font-weight: 500; }
    .cw-input:focus { background: var(--bg-card-3); box-shadow: 0 0 0 3px rgba(239,68,68,.15); }
    .cw-input[readonly] { opacity: .85; cursor: not-allowed; }
    .cw-input-unit {
        position: absolute;
        right: 18px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--red);
        font-weight: 700;
        font-size: 16px;
        pointer-events: none;
    }
    .cw-min-label {
        font-size: 12px;
        color: var(--accent);
        text-align: center;
        margin-top: 4px;
    }

    /* Submit */
    .cw-submit {
        display: block;
        width: 100%;
        background: linear-gradient(135deg, #ec4899, var(--red));
        color: #fff;
        border: 0;
        border-radius: 12px;
        padding: 14px;
        font-size: 16px;
        font-weight: 800;
        cursor: pointer;
        margin-top: 10px;
        box-shadow: 0 6px 16px rgba(239,68,68,.35);
        transition: transform .1s, box-shadow .15s;
    }
    .cw-submit:hover  { box-shadow: 0 8px 22px rgba(239,68,68,.5); }
    .cw-submit:active { transform: scale(.98); }

    /* History */
    .cw-history-title {
        font-weight: 800;
        font-size: 14px;
        margin: 18px 0 10px;
        color: var(--text);
        display: flex;
        align-items: center;
        gap: 6px;
    }
    .cw-history-title i { color: var(--accent); }

    .cw-history-card {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 12px;
        overflow: hidden;
    }
    .cw-history-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 12px;
    }
    .cw-history-table thead {
        background: var(--bg-card-2);
    }
    .cw-history-table th {
        padding: 10px 6px;
        font-weight: 700;
        color: var(--text-muted);
        text-align: center;
        font-size: 12px;
    }
    .cw-history-table td {
        padding: 10px 6px;
        border-top: 1px solid var(--border);
        text-align: center;
        color: var(--text);
        font-size: 12px;
    }
    .cw-no-data {
        text-align: center;
        padding: 24px 14px;
        color: var(--text-muted);
        font-size: 13px;
    }

    .cw-badge {
        display: inline-block;
        font-size: 11px;
        font-weight: 700;
        padding: 3px 8px;
        border-radius: 6px;
        letter-spacing: .03em;
    }
    .cw-badge.ok   { background: rgba(34,197,94,.18);  color: var(--green); border: 1px solid rgba(34,197,94,.35); }
    .cw-badge.pen  { background: rgba(245,184,32,.18); color: var(--accent);border: 1px solid rgba(245,184,32,.35); }
    .cw-badge.rej  { background: rgba(239,68,68,.18);  color: var(--red);   border: 1px solid rgba(239,68,68,.35); }

/* ─────────────────────────────────────────────────── */
/* FILE: panel/withdraw_pending.php */
/* ─────────────────────────────────────────────────── */


    /* ═══ Classic — Withdraw pending ═══ */
    .cwp-toolbar {
        display: flex;
        align-items: center;
        gap: 12px;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 10px 14px;
        margin-bottom: 14px;
        margin-top: 10px;
    }
    .cwp-back {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: var(--text);
        text-decoration: none;
        font-size: 13px;
        font-weight: 600;
        padding: 6px 10px;
        border-radius: 8px;
        background: rgba(255,255,255,.05);
        border: 1px solid var(--border);
    }
    .cwp-back:hover { background: rgba(255,255,255,.12); }
    .cwp-toolbar-title {
        flex: 1;
        font-weight: 800;
        font-size: 15px;
        letter-spacing: .03em;
    }

    /* Hero */
    .cwp-hero {
        background:
            radial-gradient(circle at 50% 0%, rgba(245,184,32,.18), transparent 60%),
            var(--bg-card);
        border: 1px solid rgba(245,184,32,.3);
        border-radius: 16px;
        padding: 26px 20px 20px;
        text-align: center;
        margin-bottom: 14px;
    }

    .cwp-icon {
        width: 88px;
        height: 88px;
        border-radius: 50%;
        background: linear-gradient(135deg, rgba(245,184,32,.18), rgba(245,184,32,.06));
        border: 1px solid rgba(245,184,32,.35);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 14px;
        box-shadow: 0 8px 20px rgba(245,184,32,.18), inset 0 1px 0 rgba(255,255,255,.08);
    }
    .cwp-icon i {
        font-size: 38px;
        color: var(--accent);
        animation: cwpPulse 1.6s ease-in-out infinite;
    }
    @keyframes cwpPulse {
        0%, 100% { opacity: 1;    transform: scale(1); }
        50%      { opacity: .6;   transform: scale(.92); }
    }

    .cwp-title {
        color: var(--text);
        font-size: 22px;
        font-weight: 800;
        margin-bottom: 4px;
    }
    .cwp-subtitle {
        color: var(--text-muted);
        font-size: 13px;
    }

    /* Detail card */
    .cwp-card {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 14px;
        padding: 16px 18px;
        margin-bottom: 14px;
    }

    .cwp-amount-box {
        text-align: center;
        padding: 4px 0 16px;
        border-bottom: 1px dashed var(--border);
        margin-bottom: 10px;
    }
    .cwp-amount-label {
        color: var(--text-muted);
        font-size: 13px;
        margin-bottom: 4px;
    }
    .cwp-amount {
        color: var(--green);
        font-size: 32px;
        font-weight: 800;
        line-height: 1.1;
        letter-spacing: .02em;
    }
    .cwp-amount small {
        color: var(--text-muted);
        font-size: 14px;
        font-weight: 500;
        margin-left: 6px;
    }

    .cwp-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 9px 0;
        font-size: 13px;
        border-bottom: 1px dashed var(--border);
    }
    .cwp-row:last-child { border-bottom: 0; }
    .cwp-row .lbl { color: var(--text-muted); }
    .cwp-row .val {
        color: var(--text);
        font-weight: 700;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        text-align: right;
    }
    .cwp-row .val.muted { font-weight: 500; color: var(--text-muted); }
    .cwp-bank-logo {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        object-fit: cover;
        background: #fff;
        flex-shrink: 0;
    }

    /* Note */
    .cwp-note {
        background: rgba(245,184,32,.06);
        border: 1px solid rgba(245,184,32,.2);
        border-radius: 10px;
        padding: 12px 14px;
        color: var(--text-muted);
        font-size: 13px;
        text-align: center;
        line-height: 1.6;
    }
    .cwp-note i { color: var(--accent); margin-right: 4px; }


     .ms-header {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 18px 20px 28px;
        }

        .ms-logo {
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .ms-logo-img {
            height: 80px;
            width: auto;
            max-width: 280px;
            display: block;
            object-fit: contain;
        }

        .ms-logo-text {
            font-weight: 900;
            font-size: 22px;
            letter-spacing: .04em;
            color: var(--accent);
            line-height: 1;
        }

        .ms-logo-sub {
            font-size: 9px;
            letter-spacing: .12em;
            color: rgba(255, 255, 255, .55);
            text-transform: uppercase;
            margin-top: 4px;
        }

        .ms-header-right {
            display: flex;
            align-items: center;
            gap: 14px;
        }

        .ms-user-info {
            text-align: right;
            line-height: 1.2;
        }

        .ms-user-info .phone {
            font-size: 14px;
            font-weight: 600;
            color: var(--text);
        }

        .ms-user-info .balance {
            font-size: 13px;
            color: var(--text-muted);
            display: inline-flex;
            align-items: center;
            gap: 6px;
            margin-top: 2px;
        }

        .ms-user-info .balance .refresh {
            cursor: pointer;
            opacity: .7;
        }

         

        .ms-icon-btn {
            width: 36px;
            height: 36px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: var(--text-muted);
            background: transparent;
            border: 0;
            cursor: pointer;
            font-size: 18px;
        }

        .ms-icon-btn:hover {
            color: var(--text);
        }


        

        .ms-bal-top {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 14px;
        }

        .ms-bal-label {
            font-size: 13px;
            color: var(--text-muted);
            margin-bottom: 4px;
        }

          .ms-bal-refresh {
            background: transparent;
            border: 0;
            color: var(--text-muted);
            font-size: 18px;
            cursor: pointer;
            transition: transform .3s ease, color .2s;
        }

        .ms-bal-refresh:hover {
            color: var(--text);
        }

        .ms-bal-refresh:active {
            transform: rotate(180deg);
        }

        .ms-bank-row {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 16px;
        }

        .ms-bank-logo {
            width: 38px;
            height: 38px;
            border-radius: 8px;

            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-weight: 800;
            flex-shrink: 0;
        }

        .ms-bank-info {
            line-height: 1.3;
        }


            .ms-bal-actions {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
        }

        .ms-bal-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 12px 18px;
            border-radius: 10px;
            border: 0;

            cursor: pointer;
            text-decoration: none;
            transition: transform .1s, box-shadow .15s;
        }

        .ms-bal-btn:active {
            transform: scale(.97);
        }


          /* ─── Main layout: sidebar + content ────────────────── */
        .ms-main {
            display: grid;
            grid-template-columns: 117px 1fr;
            gap: 16px;
            align-items: start;
        }

        /* ─── Sidebar categories ────────────────────────────── */
        .ms-cats {
            display: flex;
            flex-direction: column;
            gap: 10px;
            position: sticky;
            top: 100px;
            align-self: start;
            max-height: calc(100vh - 110px);
            overflow-y: auto;
            scrollbar-width: none;
        }

        .ms-cats::-webkit-scrollbar {
            display: none;
        }


        /*  
                'gt_shadow_color' => $style['gt_shadow_color'] ?? '',
                'gt_shadow_blur' => $style['gt_shadow_blur'] ?? '',
               */


                  /* ─── Content area ──────────────────────────────────── */
        .ms-section {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 14px;
            padding: 14px 4px;
        }

        .ms-section-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 14px;
            padding-bottom: 10px;
            border-bottom: 1px solid var(--border);
        }

        .ms-section-title {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-weight: 700;
            font-size: 15px;
        }

        .ms-section-title .icon {
            color: var(--hot-orange);
            font-size: 18px;
        }

        .ms-section-count {
            font-size: 13px;
            color: var(--text-muted);
        }

        /* ─── Search bar (under section head) ─── */
        .ms-search {
            position: relative;
            margin-bottom: 14px;
            padding-left: 5px;
            padding-right: 5px;


        }

        .ms-search-icon {
            position: absolute;
            left: 12px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-muted);
            font-size: 14px;
            pointer-events: none;
        }

        .ms-search-input {
            width: 100%;
            background: var(--bg-card-2);
            border: 1px solid var(--red);
            /* ขอบแดง */
            border-radius: 10px;
            color: var(--text);
            font-family: inherit;
            font-size: 14px;
            padding: 10px 36px 10px 36px;
            outline: none;
            transition: border-color .15s, background .15s, box-shadow .15s;
        }

        .ms-search-input::placeholder {
            color: var(--text-muted);
        }

        .ms-search-input:focus {
            border-color: var(--red);
            background: var(--bg-card-3);
            box-shadow: 0 0 0 3px rgba(239, 68, 68, .15);
            /* ring แดงบาง ตอน focus */
        }

        .ms-search-clear {
            position: absolute;
            right: 8px;
            top: 50%;
            transform: translateY(-50%);
            width: 24px;
            height: 24px;
            border: 0;
            border-radius: 50%;
            background: rgba(255, 255, 255, .08);
            color: var(--text-muted);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
        }

        .ms-search-clear:hover {
            background: rgba(255, 255, 255, .16);
            color: var(--text);
        }

        /* card ที่ filter ออก */
        .ms-game.is-hidden {
            display: none !important;
        }

        /* empty state ตอน search ไม่เจอ */
        .ms-search-empty {
            grid-column: 1 / -1;
            text-align: center;
            padding: 24px;
            color: var(--text-muted);
            font-size: 13px;
        }

        /* ─── Game grid (image only — PC: 5 cols, Mobile: 2 cols) ── */
        .ms-game-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 12px;
        }

        .ms-game {
            background: var(--bg-card-2);
            border-radius: 10px;
            overflow: hidden;
            cursor: pointer;
            transition: transform .15s, box-shadow .2s;
            text-decoration: none;
            color: inherit;
            display: block;
        }

        .ms-game:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 24px rgba(0, 0, 0, .45);
        }


           /* ซ่อนชื่อ + tag ตามที่ขอ */
        .ms-game-info {
            display: none;
        }

        /* ─── Lotto menu cards ─── */
        .ms-lotto-thumb {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 42px;
            color: #fff;
            text-shadow: 0 3px 8px rgba(0, 0, 0, .35);
        }

        .ms-lotto-label {
            padding: 8px 6px;
            text-align: center;
            font-size: 13px;
            font-weight: 700;
            color: var(--text);
            background: var(--bg-card-2);
            line-height: 1.2;
        }

        .ms-game.ms-lotto-card:hover .ms-lotto-thumb i {
            transform: scale(1.08);
            transition: transform .2s;
        }

        .ms-game-name {
            font-size: 13px;
            font-weight: 700;
            color: var(--text);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .ms-game-tag {
            font-size: 11px;
            color: var(--text-muted);
            letter-spacing: .04em;
            text-transform: uppercase;
            margin-top: 2px;
        }

        /* ─── Mobile responsive ────────────────────────────── */
        @media (max-width: 760px) {
            .ms-wrap {
                padding: 4px 7px 80px;
            }

            .ms-header {
                padding: 7px 7px 7px;
            }

            .ms-logo-img {
                height: 60px;
                max-width: 220px;
            }

            .ms-logo-text {
                font-size: 17px;
            }

            .ms-logo-sub {
                font-size: 8px;
            }

            .ms-user-info .phone {
                font-size: 13px;
            }

            .ms-user-info .balance {
                font-size: 12px;
            }

            .ms-icon-btn {
                width: 32px;
                height: 32px;
                font-size: 16px;
            }

            .ms-balance-card {
                padding: 14px 14px;
            }

            .ms-bal-amount {
                font-size: 22px;
            }

            .ms-main {
                grid-template-columns: 70px 1fr;
                gap: 7px;
            }

            .ms-cats {
                top: 80px;
                max-height: calc(100vh - 90px);
            }

            .ms-cat {
                padding: 9px 4px 7px;
            }

            .ms-cat-icon {
                width: 34px;
                height: 34px;
                font-size: 20px;
                margin-bottom: 4px;
            }

            .ms-cat-label {
                font-size: 10px;
            }

            .ms-game-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 8px;
            }
        }


        /* ═══ Menu modal ═══ */
        .ms-modal {
            position: fixed;
            inset: 0;
            z-index: 1000;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 16px;
        }

        .ms-modal.is-show {
            display: flex;
            animation: msModalFade .2s ease;
        }

        @keyframes msModalFade {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        .ms-modal-backdrop {
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, .65);
            backdrop-filter: blur(6px);
            cursor: pointer;
        }

        .ms-modal-panel {
            position: relative;
            width: 100%;
            max-width: 480px;
            max-height: 92vh;
            background: linear-gradient(180deg, #1a1d24 0%, #14171c 100%);
            border: 1px solid rgba(255, 255, 255, .08);
            border-radius: 16px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
            overflow: hidden;
            display: flex;
            flex-direction: column;
            animation: msModalSlideUp .25s cubic-bezier(.34, 1.56, .64, 1);
        }

        @keyframes msModalSlideUp {
            from {
                transform: translateY(20px);
                opacity: 0;
            }

            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        .ms-modal-head {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 7px 20px;
            border-bottom: 1px solid rgba(255, 255, 255, .06);
            background: rgba(255, 255, 255, .02);
        }

        .ms-modal-logo {
            height: 42px;
            width: auto;
            max-width: 200px;
            display: block;
        }

        .ms-modal-close {
            position: absolute;
            right: 14px;
            top: 50%;
            transform: translateY(-50%);
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: rgba(255, 255, 255, .06);
            border: 1px solid rgba(255, 255, 255, .1);
            color: var(--text);
            font-size: 16px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background .15s, transform .1s;
        }

        .ms-modal-close:hover {
            background: rgba(255, 255, 255, .12);
        }

        .ms-modal-close:active {
            transform: translateY(-50%) scale(.92);
        }

        .ms-modal-body {
            flex: 1;
            overflow-y: auto;
            padding: 14px;
            min-height: 200px;
        }

        /* Profile card inside menu modal */
        .ms-menu-profile {
            background: linear-gradient(135deg, rgba(245, 184, 32, .12), rgba(245, 184, 32, .02));
            border: 1px solid rgba(245, 184, 32, .32);
            border-radius: 14px;
            padding: 14px;
            margin-bottom: 8px;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .ms-mp-top {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .ms-mp-avatar {
            flex-shrink: 0;
            width: 52px;
            height: 52px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--accent), var(--accent-2));
            display: flex;
            align-items: center;
            justify-content: center;
            color: #1a1d24;
            font-size: 22px;
            font-weight: 800;
            box-shadow: 0 6px 14px rgba(245, 184, 32, .35), inset 0 1px 0 rgba(255, 255, 255, .25);
            overflow: hidden;
        }

        .ms-mp-avatar img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .ms-mp-name {
            font-weight: 800;
            color: var(--text);
            font-size: 14px;
            line-height: 1.2;
        }

        .ms-mp-phone {
            margin-top: 2px;
            color: var(--text-muted);
            font-size: 12px;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .ms-mp-balance {
            background: rgba(0, 0, 0, .25);
            border: 1px solid rgba(245, 184, 32, .22);
            border-radius: 10px;
            padding: 3px 12px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .ms-mp-balance .lbl {
            color: var(--text-muted);
            font-size: 12px;
        }

        .ms-mp-balance .val {
            color: var(--accent);
            font-size: 17px;
            font-weight: 800;
            letter-spacing: .03em;
        }

        .ms-mp-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 6px 12px;
        }

        .ms-mp-row {
            display: flex;
            flex-direction: column;
            min-width: 0;
        }

        .ms-mp-row .lbl {
            color: var(--text-muted);
            font-size: 11px;
            letter-spacing: .02em;
        }

        .ms-mp-row .val {
            color: var(--text);
            font-size: 13px;
            font-weight: 700;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        @media (max-width: 380px) {
            .ms-mp-grid {
                grid-template-columns: 1fr;
            }
        }

        /* Affiliate link card */
        .ms-aff-card {
            background: linear-gradient(135deg, rgba(245, 184, 32, .10), rgba(245, 184, 32, .02));
            border: 1px solid rgba(245, 184, 32, .32);
            border-radius: 14px;
            padding: 14px;
            margin-bottom: 12px;
        }

        .ms-aff-head {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 10px;
            font-weight: 800;
            color: var(--accent);
            font-size: 14px;
        }

        .ms-aff-head i {
            width: 26px;
            height: 26px;
            border-radius: 50%;
            background: rgba(245, 184, 32, .18);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
        }

        .ms-aff-input {
            display: flex;
            align-items: stretch;
            gap: 0;
            background: rgba(0, 0, 0, .3);
            border: 1px solid var(--border);
            border-radius: 10px;
            overflow: hidden;
            margin-bottom: 10px;
        }

        .ms-aff-input input {
            flex: 1;
            background: transparent;
            border: 0;
            color: var(--text);
            padding: 10px 12px;
            font-size: 13px;
            outline: none;
            min-width: 0;
        }

        .ms-aff-copy {
            flex-shrink: 0;
            background: rgba(245, 184, 32, .15);
            border: 0;
            border-left: 1px solid var(--border);
            color: var(--accent);
            padding: 0 14px;
            font-size: 14px;
            cursor: pointer;
            transition: background .15s;
        }

        .ms-aff-copy:hover {
            background: rgba(245, 184, 32, .28);
        }

        .ms-aff-copy.is-ok {
            color: var(--green);
        }

        .ms-aff-more {
            display: block;
            text-align: center;
            color: var(--accent);
            font-size: 13px;
            font-weight: 700;
            text-decoration: none;
            padding: 4px 0;
        }

        .ms-aff-more:hover {
            color: var(--accent);
            opacity: .85;
        }

        .ms-aff-more i {
            font-size: 11px;
            margin-left: 4px;
        }

        /* CTA: ฝากเงิน / ถอนเงิน */
        .ms-cta-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            margin-bottom: 12px;
        }

        .ms-cta-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 12px 10px;
            border-radius: 12px;
            font-weight: 800;
            font-size: 15px;
            color: #fff;
            text-decoration: none;
            border: 1px solid transparent;
            transition: transform .12s, filter .12s;
        }

        .ms-cta-btn i {
            font-size: 18px;
        }

        .ms-cta-btn:hover {
            color: #fff;
            filter: brightness(1.08);
            transform: translateY(-1px);
        }

        .ms-cta-btn.is-deposit {
            background: linear-gradient(135deg, var(--green), var(--green-2));
        }

        .ms-cta-btn.is-withdraw {
            background: linear-gradient(135deg, var(--red), var(--red-2));
        }

        /* Menu list inside modal */
        .ms-menu-list {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }

        /* Divider + logout */
        .ms-menu-divider {
            height: 1px;
            background: var(--border);
            border: 0;
            margin: 14px 0;
        }

        .ms-menu-logout {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            width: 100%;
            padding: 13px 18px;
            border-radius: 10px;
            border: 0;
            background: linear-gradient(135deg, var(--red), var(--red-2));
            color: #fff;
            font-weight: 800;
            font-size: 14px;
            letter-spacing: .03em;
            text-decoration: none;
            cursor: pointer;
            box-shadow: 0 6px 16px rgba(239, 68, 68, .35);
            transition: transform .1s, box-shadow .15s;
        }

        .ms-menu-logout:hover {
            color: #fff;
            box-shadow: 0 8px 22px rgba(239, 68, 68, .5);
        }

        .ms-menu-logout:active {
            transform: scale(.98);
        }

        .ms-menu-item {
            display: flex;
            align-items: center;
            gap: 10px;
            background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, 0));
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 12px;
            text-decoration: none;
            color: var(--text);
            transition: transform .12s, border-color .18s, box-shadow .18s, background .18s;
            min-width: 0;
        }

        .ms-menu-item:hover {
            border-color: rgba(245, 184, 32, .45);
            box-shadow: 0 6px 18px rgba(245, 184, 32, .12);
            transform: translateY(-1px);
            color: var(--text);
        }

        .ms-menu-icon {
            flex-shrink: 0;
            width: 40px;
            height: 40px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 19px;
            color: #fff;
            box-shadow: 0 6px 14px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .18);
        }

        .ms-menu-text {
            flex: 1;
            min-width: 0;
        }

        .ms-menu-title {
            font-size: 13px;
            font-weight: 800;
            color: var(--accent);
            letter-spacing: .02em;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .ms-menu-arrow {
            flex-shrink: 0;
            color: var(--accent);
            font-size: 12px;
            opacity: .8;
        }

        /* icon background variants */
        .ms-mi-c1 {
            background: linear-gradient(135deg, #f59e0b, #d97706);
        }

        /* gold/orange */
        .ms-mi-c2 {
            background: linear-gradient(135deg, #22c55e, #16a34a);
        }

        /* green */
        .ms-mi-c3 {
            background: linear-gradient(135deg, #ef4444, #dc2626);
        }

        /* red */
        .ms-mi-c4 {
            background: linear-gradient(135deg, #60a5fa, #2563eb);
        }

        /* blue */
        .ms-mi-c5 {
            background: linear-gradient(135deg, #a78bfa, #7c3aed);
        }

        /* purple */
        .ms-mi-c6 {
            background: linear-gradient(135deg, #06b6d4, #0891b2);
        }

        /* cyan */
        .ms-mi-c7 {
            background: linear-gradient(135deg, #ec4899, #db2777);
        }

        /* pink */
        .ms-mi-c8 {
            background: linear-gradient(135deg, #84cc16, #4d7c0f);
        }

        /* lime */
        .ms-mi-c9 {
            background: linear-gradient(135deg, #f97316, #c2410c);
        }